/* ============================================================
   Albumi — site vitrine
   Reprend la charte de l'application : encre chaude + or champagne,
   Fraunces en titrage, Plus Jakarta Sans en texte.
   ============================================================ */

:root {
  --bg: #f7f5f2;
  --bg-2: #f1eee8;
  --surface: #ffffff;
  --surface-2: #f4f1ec;
  --fg: #1c1719;
  --fg-2: #4a4147;
  --muted: #7d7378;
  --line: #e8e3db;
  --line-strong: #d5cec4;

  --ink: #2a2228;
  --ink-deep: #17121a;
  --ink-soft: #efebe4;
  --accent: #b0824a;
  --accent-deep: #8c6436;
  --accent-soft: #f6ecdd;

  --sh-1: 0 1px 2px rgba(32, 24, 20, .06), 0 1px 3px rgba(32, 24, 20, .04);
  --sh-2: 0 4px 12px rgba(32, 24, 20, .08), 0 2px 4px rgba(32, 24, 20, .04);
  --sh-3: 0 12px 32px rgba(32, 24, 20, .12), 0 4px 8px rgba(32, 24, 20, .05);
  --sh-4: 0 24px 60px rgba(32, 24, 20, .18);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --gutter: 16px;
  --max: 1120px;
  color-scheme: light;
}

/* L'arabe a besoin de ses propres fontes : Fraunces n'a pas de glyphes arabes. */
html[lang="ar"] {
  --f-display: 'Amiri', Georgia, serif;
  --f-body: 'Tajawal', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* --- boutons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 0; border-radius: 999px;
  font: 600 15px var(--f-body); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--ink); color: #fff; box-shadow: var(--sh-2); }
.btn.primary:hover { background: var(--ink-deep); box-shadow: var(--sh-3); }
.btn.gold { background: var(--accent); color: #fff; box-shadow: var(--sh-2); }
.btn.gold:hover { background: var(--accent-deep); box-shadow: var(--sh-3); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.btn.ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn.sm { padding: 9px 16px; font-size: 13.5px; }
.btn.lg { padding: 16px 30px; font-size: 16.5px; }

/* --- en-tête --- */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 244, 248, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topin { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-size: 21px; font-weight: 600; }
.brand .mark {
  width: 34px; height: 34px; flex: none;
  color: var(--fg); display: grid; place-items: center;
}
.brand .mark svg { width: 34px; height: 34px; display: block; }
/* Dans la barre de navigation le logo est seul : il doit porter sans le nom. */
.topin .brand .mark, .topin .brand .mark svg { width: 42px; height: 42px; }
nav.links { display: flex; gap: 22px; margin-inline-start: auto; }
nav.links a { text-decoration: none; font-size: 14.5px; color: var(--fg-2); font-weight: 500; }
nav.links a:hover { color: var(--ink); }
.topact { display: flex; align-items: center; gap: 8px; margin-inline-start: 16px; }
.lang { font-size: 13px; text-decoration: none; color: var(--fg-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 12px; font-weight: 600; }
.lang:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 860px) {
  nav.links { display: none; }
  .topact { margin-inline-start: auto; }
}

/* --- hero --- */
.hero { position: relative; overflow: hidden; }
.hero .photo { position: absolute; inset: 0; }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 20, 16, .62) 0%, rgba(26, 20, 16, .52) 55%, rgba(26, 20, 16, .55) 82%, rgba(247, 244, 248, .97) 100%);
}
.heroin { position: relative; padding: 92px 0 72px; text-align: center; }
.heroin h1 { font-size: clamp(34px, 6.4vw, 60px); color: #fff; letter-spacing: -.015em; text-wrap: balance; }
.heroin .kicker {
  display: inline-block; margin-bottom: 18px; padding: 6px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.heroin .sell {
  max-width: 620px; margin: 18px auto 0; color: rgba(255, 255, 255, .93);
  font-size: clamp(16px, 2.3vw, 19px); text-wrap: balance;
}
.herocta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.herocta .btn.ghost { background: rgba(255, 255, 255, .92); border-color: transparent; }
.heronote { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 3px rgba(20, 15, 12, .5); }

/* --- captures --- */
.shots { position: relative; margin-top: -40px; padding-bottom: 72px; }
.shotgrid { display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: end; }
@media (max-width: 820px) { .shotgrid { grid-template-columns: 1fr; justify-items: center; } }

.phone {
  width: 290px; border-radius: 34px; padding: 10px; background: #1d1726;
  box-shadow: var(--sh-4); position: relative;
}
.phone::before {
  content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); z-index: 2;
}
.phone img { display: block; width: 100%; border-radius: 26px; }

.laptop { width: 100%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-4); background: #fff; }
.laptop .bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.laptop .bar i { width: 10px; height: 10px; border-radius: 99px; background: var(--line-strong); }
.laptop img { display: block; width: 100%; }
.laptop .ui-desk { min-width: 0; }
.caption { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }

/* --- sections --- */
section { padding: 72px 0; }
section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.shead { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.shead h2 { font-size: clamp(27px, 4.2vw, 38px); letter-spacing: -.01em; text-wrap: balance; }
.shead p { margin-top: 12px; color: var(--fg-2); font-size: 16.5px; text-wrap: balance; }
.eyebrow {
  display: block; margin-bottom: 10px; color: var(--accent-deep);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* --- étapes --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--sh-1); counter-increment: s;
}
.step::before {
  content: counter(s); display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 16px; border-radius: 11px;
  background: var(--ink-soft); color: var(--ink-deep);
  font: 600 18px var(--f-display);
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--fg-2); font-size: 15px; }

/* --- fonctions --- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feats { grid-template-columns: 1fr; } }
.feat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.feat:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.feat .ico { font-size: 22px; line-height: 1; margin-bottom: 12px; }
.feat h3 { font-size: 17px; margin-bottom: 6px; }
.feat p { color: var(--fg-2); font-size: 14.5px; }

/* --- comparatif --- */
.vs { max-width: 760px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--sh-1); }
.vs .row { display: grid; grid-template-columns: 1fr 108px; gap: 12px; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--line); font-size: 15px; }
.vs .row:first-child { border-top: 0; background: var(--surface-2); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vs .yes { color: #3f8f6b; font-weight: 700; text-align: center; }
.vs .no { color: var(--muted); text-align: center; }

/* --- tarifs --- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 20px; box-shadow: var(--sh-1); position: relative; height: 100%;
  display: flex; flex-direction: column;
}
.plan.star { border-color: var(--accent); box-shadow: var(--sh-3); }
.plan .tag {
  position: absolute; top: -11px; inset-inline-start: 20px; padding: 3px 11px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.plan h3 { font-size: 19px; }
.plan .price { margin: 10px 0 2px; font: 600 34px/1 var(--f-display); }
.plan .price small { font: 600 14px var(--f-body); color: var(--muted); }
.plan .per { color: var(--muted); font-size: 13px; }
.plan ul { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 9px; }
.plan li { font-size: 14.5px; color: var(--fg-2); padding-inline-start: 22px; position: relative; }
.plan li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; color: var(--accent-deep); font-weight: 700;
}
.plan li.off { color: var(--muted); }
.plan li.off::before { content: '—'; color: var(--line-strong); }
.plan .btn { margin-top: auto; width: 100%; }
.pricenote { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* --- FAQ --- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 18px;
}
.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 15.5px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent-deep); font-size: 20px; font-weight: 600; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-bottom: 18px; color: var(--fg-2); font-size: 15px; }

/* --- appel final --- */
.final { position: relative; overflow: hidden; border-block: 1px solid var(--line); }
.final .photo { position: absolute; inset: 0; }
.final .photo img { width: 100%; height: 100%; object-fit: cover; }
.final .veil { position: absolute; inset: 0; background: rgba(26, 20, 16, .72); }
.finalin { position: relative; padding: 76px 0; text-align: center; color: #fff; }
.finalin h2 { font-size: clamp(26px, 4.2vw, 38px); }
.finalin p { max-width: 560px; margin: 14px auto 0; color: rgba(255, 255, 255, .9); }
.finalin .herocta { margin-top: 28px; }

/* --- contact --- */
/* auto-fit plutot qu un nombre fixe : la grille s adapte au nombre de
   contacts reellement presents. A trois colonnes figees, retirer un bloc
   laissait une colonne vide et tout paraissait decale. */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .contact { grid-template-columns: 1fr; } }
.cbox {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; text-align: center; text-decoration: none; display: block;
}
.cbox:hover { border-color: var(--ink); }
.cbox .ico { font-size: 22px; }
.cbox .k { margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cbox .v { margin-top: 3px; font-weight: 600; font-size: 15px; }

/* --- pied --- */
footer.bot { background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0 30px; }
.botin { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.botin .links { display: flex; flex-wrap: wrap; gap: 18px; }
.botin a { color: var(--fg-2); text-decoration: none; font-size: 14px; }
.botin a:hover { color: var(--ink); }
.copy { width: 100%; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; }

/* --- pages de texte (mentions légales…) --- */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 0 72px; }
.doc h1 { font-size: 32px; margin-bottom: 8px; }
.doc h2 { font-size: 20px; margin: 32px 0 10px; }
.doc p, .doc li { color: var(--fg-2); font-size: 15.5px; }
.doc ul { padding-inline-start: 22px; }
.todo {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-md); padding: 14px 16px; margin: 18px 0; font-size: 14.5px; color: var(--accent-deep);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141211; --bg-2: #191716; --surface: #1e1b19; --surface-2: #272321;
    --fg: #f3efe8; --fg-2: #cfc7bc; --muted: #a2988d;
    --line: #332e2a; --line-strong: #48403a;
    --ink: #57504a; --ink-deep: #6e665f; --ink-soft: #2b2724;
    --accent: #d4a56a; --accent-deep: #e0b87f; --accent-soft: #2e2419;
  }
  :root:not([data-theme="light"]) header.top { background: rgba(19, 15, 23, .88); }
  :root:not([data-theme="light"]) .herocta .btn.ghost { background: rgba(255, 255, 255, .92); color: #221a27; }
}

/* ============================================================
   Maquettes de l'application, reconstruites en HTML.
   Une capture d'ecran est figee a sa resolution : sur un ecran
   a deux pixels par point elle est agrandie et devient floue.
   Ici le texte est du vrai texte et les photos viennent des
   originaux : net a n'importe quelle densite, et plus leger.
   ============================================================ */
.ui { font-family: var(--f-body); color: var(--fg); -webkit-font-smoothing: antialiased; }
.ui img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- telephone : le mur de la soiree --- */
.ui-phone { background: #f7f5f2; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; height: 530px; }
.ui-phone .body { flex: 1; overflow: hidden; padding: 14px 12px 0; }
.ui-ph-top { display: flex; justify-content: flex-end; padding: 10px 12px 4px; }
.ui-ph-top span { border: 1px solid #e8e3db; border-radius: 99px; padding: 3px 11px; font-size: 10px; color: #4a4147; background: #fff; }
.ui-h2 { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: #1c1719; margin: 0 2px 10px; }
.ui-facebar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e8e3db;
  border-radius: 12px; padding: 9px 10px; margin-bottom: 11px; box-shadow: 0 1px 2px rgba(32,24,20,.06); }
.ui-facebar .ic { width: 27px; height: 27px; border-radius: 8px; background: #f6ecdd; color: #8c6436;
  display: grid; place-items: center; flex: none; }
.ui-facebar .ic svg { width: 15px; height: 15px; }
.ui-facebar b { display: block; font-size: 11.5px; font-weight: 600; color: #1c1719; }
.ui-facebar small { display: block; font-size: 9px; color: #7d7378; line-height: 1.3; }
.ui-facebar .go { color: #7d7378; font-size: 13px; flex: none; }
.ui-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ui-card { position: relative; aspect-ratio: 1; border-radius: 11px; overflow: hidden; background: #f4f1ec;
  box-shadow: 0 1px 2px rgba(32,24,20,.06); }
.ui-card::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(14,10,8,.62), rgba(14,10,8,.14) 55%, transparent); }
.ui-card .who { position: absolute; z-index: 1; bottom: 5px; inset-inline-start: 7px; font-size: 9.5px;
  font-weight: 600; color: #fff; }
.ui-pill { position: absolute; z-index: 1; top: 5px; inset-inline-end: 5px; display: flex; align-items: center; gap: 3px;
  background: rgba(20,14,10,.5); color: #fff; border-radius: 99px; padding: 2px 7px; font-size: 9.5px; font-weight: 600; }
.ui-pill svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.ui-pill.on { background: #fff; color: #c0533f; }
.ui-pill.on svg { fill: #c0533f; stroke: #c0533f; }
.ui-vid { position: absolute; z-index: 1; top: 5px; inset-inline-start: 5px; display: flex; align-items: center; gap: 4px;
  background: rgba(16,10,20,.66); color: #fff; border-radius: 99px; padding: 2px 7px 2px 5px; font-size: 9px; font-weight: 600; }
.ui-vid svg { width: 8px; height: 8px; fill: currentColor; }
.ui-tabs { display: flex; border-top: 1px solid #e8e3db; background: rgba(255,255,255,.9); padding: 7px 0 8px; }
.ui-tabs div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8.5px; color: #7d7378; }
.ui-tabs div.on { color: #2a2228; font-weight: 600; }
.ui-tabs svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* --- bureau : la galerie des maries --- */
.ui-desk { background: #f7f5f2; padding: 16px 18px 0; height: 406px; overflow: hidden; }
.ui-back { font-size: 10px; color: #7d7378; margin-bottom: 12px; }
.ui-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ui-dhead h3 { font-family: var(--f-display); font-weight: 600; font-size: 21px; color: #1c1719; margin: 0; }
.ui-dhead .sub { font-size: 10px; color: #7d7378; margin-top: 2px; }
.ui-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-btn { border-radius: 99px; padding: 5px 11px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.ui-btn.g { border: 1px solid #d5cec4; color: #1c1719; background: #fff; }
.ui-btn.gold { background: #b0824a; color: #fff; }
.ui-btn.ink { background: #2a2228; color: #fff; }
.ui-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 13px 0 11px; }
.ui-tile { background: #fff; border: 1px solid #e8e3db; border-radius: 11px; padding: 9px 11px; }
.ui-tile .k { font-size: 8px; letter-spacing: .09em; text-transform: uppercase; color: #7d7378; }
.ui-tile .v { font-family: var(--f-display); font-weight: 600; font-size: 21px; color: #1c1719; line-height: 1.15; }
.ui-tile .v.gold { color: #8c6436; }
.ui-planbar { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e8e3db;
  border-radius: 11px; padding: 7px 11px; font-size: 10px; color: #4a4147; margin-bottom: 12px; }
.ui-planbar .bdg { background: #f6ecdd; color: #8c6436; border-radius: 99px; padding: 2px 8px; font-size: 9px; font-weight: 700; }
.ui-dtabs { display: flex; gap: 16px; border-bottom: 1px solid #e8e3db; padding-bottom: 7px; margin-bottom: 13px; font-size: 10.5px; color: #7d7378; }
.ui-dtabs span.on { color: #1c1719; font-weight: 600; }
.ui-guest { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ui-av { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center;
  background: #2a2228; color: #e3c084; font-size: 9px; font-weight: 700; flex: none; }
.ui-guest b { font-size: 11px; color: #1c1719; display: block; }
.ui-guest small { font-size: 8.5px; color: #7d7378; }
.ui-row { display: flex; gap: 8px; margin-bottom: 14px; }
.ui-row .ui-card { width: 86px; aspect-ratio: 4/3; border-radius: 9px; flex: none; }
.ui-row .ui-card::after { display: none; }

/* Sur telephone, la maquette bureau ne rentre pas : son contenu impose une
   largeur minimale d'environ 400 px. On lui donne sa vraie largeur de bureau
   puis on la reduit, comme une photo d'ecran. Le texte devient illisible,
   c'est assume : a cette taille elle ne sert qu'a montrer qu'un espace
   complet existe cote maries. */
@media (max-width: 820px) {
  .laptop { overflow: hidden; }
  .laptop .ui-desk { width: 720px; zoom: .46; }
}
@media (max-width: 420px) {
  .laptop .ui-desk { zoom: .40; }
}

/* ============================================================
   Cartes d'invitation : modeles presentes sur la vitrine.
   Dessinees en CSS, pas en image : nettes a toute densite, et
   les motifs (zellige, dentelle) sont generes, donc sans poids.
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.card-item { display: flex; flex-direction: column; gap: 10px; }
.inv {
  container-type: inline-size;
  aspect-ratio: 5 / 7; border-radius: var(--r-md); overflow: hidden; position: relative;
  box-shadow: var(--sh-3); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 26px 18px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card-item:hover .inv { transform: translateY(-3px); box-shadow: var(--sh-4); }
.inv .deco { position: absolute; inset: 0; pointer-events: none; }
.inv .in { position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: center; gap: 7px; width: 100%; }
.inv .sur { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .78; }
.inv .noms { font-family: var(--f-display); font-weight: 500; font-size: clamp(19px, 5.4cqw, 24px); line-height: 1.12; }
.inv .rule { width: 34px; height: 1px; opacity: .5; margin: 2px 0; }
.inv .quand { font-size: 10px; letter-spacing: .06em; }
.inv .ou { font-size: 9px; opacity: .8; }
.inv .qr { margin-top: 9px; width: 42px; height: 42px; border-radius: 5px; padding: 3px; }
.inv .qr svg { width: 100%; height: 100%; display: block; }
.inv .scan { font-size: 7px; letter-spacing: .14em; text-transform: uppercase; opacity: .72; margin-top: 3px; }
.card-item .nom { font-size: 13.5px; font-weight: 600; text-align: center; }
.card-item .quoi { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: -6px; }

/* --- les six modeles --- */
.inv.jasmin { background: #fbf9f4; color: #2f3a2e; }
.inv.jasmin .rule { background: #6d8a5e; }
.inv.jasmin .qr { background: #fff; border: 1px solid #dfe5d6; }

.inv.zellige { background: #1d1b24; color: #f2ece2; }
.inv.zellige .deco {
  background-image:
    repeating-linear-gradient(45deg, rgba(201,160,92,.26) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg, rgba(201,160,92,.26) 0 1px, transparent 1px 13px);
}
.inv.zellige .rule { background: #c9a05c; }
.inv.zellige .qr { background: #f2ece2; }

.inv.sidibou { background: #fcfcfa; color: #16356b; }
.inv.sidibou .deco {
  background-image: repeating-linear-gradient(90deg, #16356b 0 3px, transparent 3px 13px);
  height: 9px; bottom: 0; top: auto; opacity: .85;
}
.inv.sidibou .rule { background: #16356b; }
.inv.sidibou .qr { background: #fff; border: 1px solid #c9d4e8; }

.inv.encre { background: #221c20; color: #f3efe8; }
.inv.encre .deco { border: 1px solid rgba(217,177,114,.4); inset: 11px; border-radius: 7px; }
.inv.encre .rule { background: #d9b172; }
.inv.encre .qr { background: #f3efe8; }

.inv.henne { background: #5d1f28; color: #f6e3c9; }
.inv.henne .deco {
  background-image: radial-gradient(circle at 50% 0%, rgba(214,167,106,.3), transparent 62%);
}
.inv.henne .rule { background: #d6a76a; }
.inv.henne .qr { background: #f6e3c9; }

.inv.oranger { background: #fdf4ec; color: #5a3f2e; }
.inv.oranger .deco {
  background-image: radial-gradient(circle at 18% 12%, rgba(226,169,124,.3), transparent 46%),
    radial-gradient(circle at 84% 88%, rgba(226,169,124,.26), transparent 46%);
}
.inv.oranger .rule { background: #c98a5e; }
.inv.oranger .qr { background: #fff; border: 1px solid #eddbc9; }

.invnote { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* L'invitation : une seule image large, pas une grille de vignettes.
   Un produit qu'on montre une fois en grand convainc mieux que six fois
   en petit. */
.invshow { margin: 0 auto; max-width: 720px; }
.invshow img { width: 100%; height: auto; display: block; border-radius: var(--r-md); box-shadow: var(--sh-3); }
.invpoints { max-width: 560px; margin: 26px auto 0; padding: 0; list-style: none; }
.invpoints li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.invpoints li:last-child { border-bottom: 0; }
.invpoints strong { font-weight: 600; }