/* ─────────────────────────────────────────────────────────────────────────────
   invites.css — section 7 « Côté invités » (#invites), la bande sombre.

   Le gabarit vient de sections.css (.band, .sx__head, .sx__body, .lo, .mock,
   .codeinv) ; ici seulement :
     DEUX ÉCRANS    sur ordinateur : .iv-e1 (titre, liste, cadre) tient dans la
                    fenêtre (88px libres en haut pour le menu, 24px en bas) ;
                    .iv-e2 (reconnaissance faciale en clair, code, appels) aussi ;
     .ivs           calque 01 : le selfie qui fait le tri (invites.js) ;
     .ivm           calque 02 : la pluie de l'album des invités (invites.js) ;
     .iv-cr .iv-am  calques 03 et 04, écrits avec les textes réels de l'app ;
     .iv-clair      la reconnaissance faciale « en clair » ; .iv-pied le code.
   Le HTML et ces règles donnent l'ÉTAT FINAL des démos (sans JavaScript, ou
   avec « réduire les animations ») ; .iv--init, posé par invites.js, donne
   l'état de départ, et les transitions mènent de l'un à l'autre. Les délais
   de chaque vignette (--d, --f) sont calculés par invites.js.
   Tailles dans le cadre : unités du conteneur (cqw/cqh), plancher 12px.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── La bande : une lueur discrète, verte en haut, orangée en bas ─────────── */
#invites{background:
  radial-gradient(52% 34% at 92% 0%,rgba(22,179,100,.11),rgba(22,179,100,0) 72%),
  radial-gradient(40% 28% at 0% 100%,rgba(249,119,8,.07),rgba(249,119,8,0) 72%),
  var(--nuit)}
/* Encre sur orange : 6,6:1 (le blanc n'y ferait que 2,7:1), comme dans #apercu. */
#invites .cta1,#invites .cta1:hover{color:var(--ink)}
/* Le QR des cartons, défini une fois (symbole) : rien à afficher ici. */
.iv-def{position:absolute;width:0;height:0;overflow:hidden}

/* ── Deux écrans (ordinateur) ────────────────────────────────────────────────
   Écran 1 : la pastille, le titre (deux lignes, il suit aussi la hauteur), la
   liste et le cadre. Le cadre prend la hauteur qui reste (--iv-vis) et ne
   dépasse pas 0,72 fois sa largeur. Écran 2 : sa propre respiration en haut.
   Un lien vers #invites pose la section en haut de l'écran : sa marge haute
   garde déjà la place du menu (html : scroll-padding-top 96px). */
@media(min-width:901px){
  #invites{
    scroll-margin-top:-96px;padding-top:0;padding-bottom:clamp(40px,7vh,88px);
    --iv-h2:min(clamp(36px,4.6vw,72px),7.4vh);
    --iv-gap:clamp(14px,2.6vh,28px);
    --iv-vis:calc(100vh - 112px - 44px - 2.04 * var(--iv-h2) - var(--iv-gap));
  }
  @supports(height:100svh){#invites{--iv-vis:calc(100svh - 112px - 44px - 2.04 * var(--iv-h2) - var(--iv-gap))}}
  #invites .iv-e1{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:88px 0 24px}
  #invites .gp{margin-bottom:12px}
  #invites .sx__head h2{font-size:var(--iv-h2)}
  #invites .sx__ch{font-size:min(clamp(17px,1.35vw,21px),2.7vh)}
  #invites .sx__body{margin-top:var(--iv-gap)}
  #invites .sx__vis{container-type:inline-size}
  #invites .iv__mock .mock__vp{aspect-ratio:auto;height:min(var(--iv-vis),72cqw)}
  /* La liste se resserre (marges), le texte garde sa taille. */
  #invites .lo{--lo-px:16px;--lo-n:26px;--lo-gap:12px}
  #invites .lo__b{min-height:clamp(44px,6.2vh,60px);font-size:clamp(18px,1.4vw,20px)}
  #invites .lo__it.on .lo__b{padding-top:clamp(10px,1.8vh,20px);padding-bottom:clamp(4px,.8vh,10px)}
  #invites .lo__p{padding-bottom:clamp(12px,2.1vh,20px);font-size:min(17px,max(16px,2.3vh))}
  #invites .lo__p>*+*{margin-top:clamp(6px,1.1vh,12px)}
  #invites .lo__nu{font-size:min(17px,max(16px,2.3vh))}
  /* Une ancre vers un élément de la liste (#invites-selfie) montre aussi le titre. */
  #invites .lo__it{scroll-margin-top:calc(44px + 2.04 * var(--iv-h2) + var(--iv-gap) - 8px)}
  #invites .iv-e2{padding-top:clamp(40px,8vh,96px)}
}

/* ════════ 01 · Le selfie qui fait le tri (.ivs) ═════════════════════════════
   À gauche, la galerie entière en toutes petites photos (12 × 9 ; 9 × 12 sur
   téléphone), la mention « Selfie facultatif » dessous. À droite, le téléphone
   de l'invité : son selfie, puis « Où tu apparais » et la grille de ses
   photos. Une ligne de lecture passe sur la galerie : tout s'éteint, sauf ses
   photos, qui s'envolent vers le téléphone (leur place reste marquée). */
.ivs{--ivs-g:3px;position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);
  column-gap:clamp(16px,5cqw,56px);padding:clamp(14px,5cqh,32px) clamp(16px,4.6cqw,46px);color:var(--ivory);font-family:var(--s);text-align:left;
  -webkit-user-select:none;user-select:none}
:where(.ivs) p{margin:0}
.ivs__gal{position:relative;z-index:1;min-width:0;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
/* Une vignette : la plus grande qui tienne en largeur ET en hauteur (16px
   d'étiquette, 28px de mention, 2 × 12px d'écart au-dessus et dessous). */
.ivs__gal>*{--t:min(calc((100cqw - 11 * var(--ivs-g)) / 12),calc((100cqh - 68px - 8 * var(--ivs-g)) / 9));--gw:calc(12 * var(--t) + 11 * var(--ivs-g))}
.ivs__k{width:var(--gw);font:600 12px/16px var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(240,237,228,.62)}
.ivs__g{position:relative;display:grid;grid-template-columns:repeat(12,var(--t));grid-auto-rows:var(--t);gap:var(--ivs-g)}
.ivs__g i{position:relative;display:block;border-radius:max(2px,calc(var(--t) * .14));background-color:#2A231E;background-repeat:no-repeat;
  background-size:800% 600%;background-position:calc(var(--x) * 100% / 7) calc(var(--y) * 100% / 5)}
/* Les photos de l'invité : leur image (b), leur anneau au passage de la ligne
   (u), et, une fois parties vers le téléphone, leur place en pointillé (::before). */
.ivs__g i.y{background:none}
.ivs__g i.y b,.ivs__g i.y u{position:absolute;inset:0;border-radius:inherit}
.ivs__g i.y b{background-repeat:no-repeat;background-size:400% 300%;background-position:calc(var(--x) * 100% / 3) calc(var(--y) * 100% / 2)}
.ivs__g i.y u{box-shadow:0 0 0 2px #F97708,0 0 14px 2px rgba(249,119,8,.55);opacity:0}
.ivs__g i.y::before{content:'';position:absolute;inset:0;border:1.5px dashed rgba(249,119,8,.75);border-radius:inherit}
/* État final : la galerie éteinte, les photos de l'invité parties. */
.ivs__g i:not(.y){opacity:.14}
.ivs__g i.y b{opacity:0}
/* La ligne de lecture (posée à gauche de la galerie, invites.js la fait passer). */
.ivs__scan{position:absolute;z-index:3;left:-3px;top:-8px;bottom:-8px;width:3px;border-radius:3px;background:#F97708;box-shadow:0 0 16px 4px rgba(249,119,8,.55);opacity:0;pointer-events:none}
.ivs__fac{width:var(--gw);display:flex}
.ivs__fac span{display:inline-flex;align-items:center;gap:9px;height:28px;padding:0 13px 0 11px;border:1px solid rgba(22,179,100,.42);border-radius:100px;background:rgba(22,179,100,.1);
  font:600 12px/1 var(--m);letter-spacing:.12em;text-transform:uppercase;color:#8FE3B4;white-space:nowrap}
.ivs__fac span::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#16B364;box-shadow:0 0 0 3px rgba(22,179,100,.22)}

/* Le téléphone : 9/19,3, l'unité cqw vaut 1 % de sa largeur. */
.ivs__tel{position:relative;z-index:2;align-self:center;height:min(90cqh,62cqw);aspect-ratio:9/19.3;container-type:inline-size;
  border-radius:14% / 6.5%;background:#0E0C0A;box-shadow:0 60px 120px -40px rgba(0,0,0,.9),inset 0 0 0 2px #2a2622}
.ivs__vitre{position:absolute;inset:2.4cqw;border-radius:11.8cqw;background:#14110F}
.ivs__vitre::after{content:'';position:absolute;z-index:9;left:50%;top:1.6%;width:30%;height:3.4%;border-radius:40px;background:#000;transform:translateX(-50%)}
/* Le selfie : l'écran de l'appareil photo, le cercle (src/CameraCapture.tsx),
   « ✓ Visage détecté » en vert comme dans app/onboarding/photo.tsx. */
.ivs__cam{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit;background:#000}
.ivs__cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ivs__rond{position:absolute;left:50%;top:38%;width:68cqw;aspect-ratio:1;border:max(2px,1cqw) solid #2E9E5B;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 999px rgba(10,8,6,.42)}
.ivs__ok{position:absolute;left:0;right:0;top:63%;padding:0 6cqw;text-align:center;font-size:max(12px,5.6cqw);font-weight:700;line-height:1.2;color:#7BE0A6;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ivs__decl{position:absolute;left:50%;bottom:6%;width:19cqw;aspect-ratio:1;border:max(2px,1.2cqw) solid #fff;border-radius:50%;background:rgba(255,255,255,.22);transform:translateX(-50%)}
.ivs__decl::after{content:'';position:absolute;inset:14%;border-radius:50%;background:#F97708}
.ivs__flash{position:absolute;inset:0;background:#fff;opacity:0}
/* Le résultat : « Où tu apparais, Yoni » (app/home.tsx), « 12 PHOTOS »
   (app/find.tsx) et la grille. Le fond ivoire est un calque à part : les
   vignettes, elles, arrivent de la galerie sans être rognées. */
.ivs__res{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:14cqw 5cqw 0;border-radius:inherit;color:#1A1410}
.ivs__res::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#FBF8F2}
.ivs__tete{display:flex;align-items:center;gap:3.4cqw}
.ivs__av{flex:none;display:block;width:15cqw;height:15cqw;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 2px #FBF8F2,0 0 0 max(3px,1.4cqw) #F97708}
.ivs__ti{min-width:0;font-size:max(12px,7.2cqw);font-weight:700;line-height:1.12;letter-spacing:-.03em}
/* Les moments (étiquettes du photographe), en défilement horizontal comme dans l'app. */
.ivs__ch{display:flex;gap:1.8cqw;margin-top:4.4cqw;overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,#000 78%,transparent);mask:linear-gradient(90deg,#000 78%,transparent)}
.ivs__ch span{flex:none;padding:1.2cqw 3.2cqw;border:1px solid #E6DED0;border-radius:100px;font-size:max(12px,4.4cqw);font-weight:500;line-height:1.2;color:#6B5D50}
.ivs__ch .on{border-color:#F97708;background:#F97708;color:#1A1410}
@container (max-width:180px){.ivs__ch{display:none}}
.ivs__nb{margin-top:3.6cqw;font:700 12px/1.2 var(--m);letter-spacing:.08em;color:#6B5D50;font-variant-numeric:tabular-nums}
.ivs__nb b{font-weight:700;color:#1A1410}
.ivs__r{position:relative;margin-top:3cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw}
.ivs__plus{position:absolute;right:5cqw;bottom:5.5cqw;width:16cqw;aspect-ratio:1;border-radius:50%;background:#F97708;box-shadow:0 6px 14px -4px rgba(26,20,16,.4)}
/* « ＋ » : verser ses propres photos (app/find.tsx, addFab), en encre sur l'orange. */
.ivs__plus::before,.ivs__plus::after{content:'';position:absolute;left:50%;top:50%;width:42%;height:max(2px,1.3cqw);border-radius:2px;background:#1A1410;transform:translate(-50%,-50%)}
.ivs__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.ivs__r i{display:block;aspect-ratio:1;border-radius:2.4cqw;background-color:#E6DED0;background-repeat:no-repeat;background-size:400% 300%;
  background-position:calc(var(--x) * 100% / 3) calc(var(--y) * 100% / 2);transform-origin:0 0}
/* Les planches d'images : chargées quand la section approche (invites.js pose
   .iv-charge), tout de suite sans JavaScript. */
:is(html:not(.js),.iv-charge) .ivs__g i:not(.y){background-image:url(../photos/anim-invites-galerie.webp)}
:is(html:not(.js),.iv-charge) :is(.ivs__g i.y b,.ivs__r i){background-image:url(../photos/anim-invites-yoni.webp)}

/* ── 01 · État de départ (invites.js pose .iv--init) et le jeu ───────────────
   Au départ : la galerie entière allumée, le selfie à l'écran. Quand
   .iv--init s'en va, chaque élément rejoint l'état final avec son délai :
     0,25 s   l'éclair de la prise de vue ; 0,5 s le cercle passe au vert ;
     0,7 s    la ligne de lecture traverse la galerie (1,4 s) : chaque photo
              s'éteint à son passage (--d), celles de l'invité s'allument ;
     2,0 s    l'écran des résultats ; dès 2,15 s ses photos s'envolent (--f),
              une toutes les 70 ms, et le compteur monte (invites.js). */
.ivs.iv--init .ivs__g i:not(.y){opacity:1}
.ivs.iv--init .ivs__g i.y b{opacity:1}
.ivs.iv--init .ivs__g i.y::before{opacity:0}
.ivs.iv--init .ivs__rond{border-color:rgba(255,255,255,.88)}
.ivs.iv--init .ivs__ok{opacity:0;transform:translateY(6px)}
.ivs.iv--init .ivs__res::before,.ivs.iv--init .ivs__tete,.ivs.iv--init .ivs__nb,.ivs.iv--init .ivs__ch,.ivs.iv--init .ivs__plus{opacity:0}
.ivs.iv--init .ivs__r i{opacity:0;transform:var(--de,none)}
.ivs.iv--init *,.ivs.iv--init *::before,.ivs.iv--init *::after{transition:none!important;animation:none!important}
html.js .ivs:not(.iv--init) .ivs__g i:not(.y){transition:opacity .45s ease var(--d,0s)}
html.js .ivs:not(.iv--init) .ivs__g i.y b{transition:opacity 0s linear var(--f,0s)}
html.js .ivs:not(.iv--init) .ivs__g i.y::before{transition:opacity .3s ease var(--f,0s)}
html.js .ivs:not(.iv--init) .ivs__g i.y u{animation:ivs-anneau calc(var(--f,2s) - var(--d,0s)) linear var(--d,0s) both}
html.js .ivs:not(.iv--init) .ivs__scan{animation:ivs-ligne 1.4s cubic-bezier(.45,0,.55,1) .7s both}
html.js .ivs:not(.iv--init) .ivs__flash{animation:ivs-eclair .5s ease-out .22s both}
html.js .ivs:not(.iv--init) .ivs__rond{transition:border-color .3s ease .5s}
html.js .ivs:not(.iv--init) .ivs__ok{transition:opacity .3s ease .55s,transform .4s cubic-bezier(.2,.8,.2,1) .55s}
html.js .ivs:not(.iv--init) .ivs__res::before{transition:opacity .35s ease 1.95s}
html.js .ivs:not(.iv--init) :is(.ivs__tete,.ivs__nb){transition:opacity .35s ease 2.05s}
html.js .ivs:not(.iv--init) :is(.ivs__ch,.ivs__plus){transition:opacity .4s ease 3.3s}
html.js .ivs:not(.iv--init) .ivs__r i{transition:transform .72s cubic-bezier(.22,.75,.2,1) var(--f,0s),opacity 0s linear var(--f,0s)}
@keyframes ivs-ligne{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(var(--sw,300px))}}
@keyframes ivs-eclair{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
@keyframes ivs-anneau{0%{opacity:0}12%{opacity:1}82%{opacity:1}100%{opacity:0}}

/* ════════ 02 · La pluie de l'album des invités (.ivm) ═══════════════════════
   Vue des mariés (eux seuls voient tout) : l'en-tête d'une galerie d'invités
   (src/GuestCoverHeader.tsx), le mur des photos, et le carton de table
   (src/EventQr.tsx) qui se retourne sur son QR et son code. */
.ivm{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);
  column-gap:clamp(16px,5cqw,56px);padding:clamp(14px,5cqh,32px) clamp(16px,4.6cqw,46px);color:var(--ivory);font-family:var(--s);text-align:left;
  -webkit-user-select:none;user-select:none}
:where(.ivm) p{margin:0}
.ivm__gal{position:relative;z-index:1;min-width:0;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
/* 5 × 4 vignettes : en-tête 26 + 50px, deux écarts de 10px. */
.ivm__gal>*{--t:min(calc((100cqw - 4 * 8px) / 5),calc((100cqh - 96px - 3 * 8px) / 4));--gw:calc(5 * var(--t) + 4 * 8px)}
.ivm__k{width:var(--gw);display:flex;align-items:center;gap:9px;font:600 12px/16px var(--m);letter-spacing:.12em;text-transform:uppercase;color:rgba(240,237,228,.62)}
.ivm__k i{flex:none;width:7px;height:7px;border-radius:50%;background:#16B364;box-shadow:0 0 0 3px rgba(22,179,100,.22)}
.ivm__tete{width:var(--gw);display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;min-height:50px}
.ivm__tete>div{min-width:0}
.ivm__ey{font:600 12px/1.3 var(--m);letter-spacing:.16em;color:#FF9A3D}
.ivm__nom{margin-top:3px;font-size:clamp(17px,2.6cqw,22px);font-weight:600;line-height:1.15;letter-spacing:-.03em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ivm__st{flex:none;display:flex;align-items:flex-end;gap:16px}
.ivm__st span{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ivm__st b{font-size:clamp(18px,2.6cqw,22px);font-weight:600;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.ivm__st em{font-style:normal;font-size:12px;line-height:1.2;color:rgba(240,237,228,.66)}
.ivm__mur{display:grid;grid-template-columns:repeat(5,var(--t));grid-auto-rows:var(--t);gap:8px}
.ivm__mur i{position:relative;display:block;border-radius:max(6px,calc(var(--t) * .08));background-color:#2A231E;background-repeat:no-repeat;
  background-size:500% 400%;background-position:calc(var(--x) * 100% / 4) calc(var(--y) * 100% / 3);box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
:is(html:not(.js),.iv-charge) .ivm__mur i{background-image:url(../photos/anim-invites-mur.webp)}
/* La signature : prénom et initiale, comme « Posté par … » (src/Lightbox.tsx). */
.ivm__mur span{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);padding:3px 6px;border-radius:100px;background:rgba(12,10,8,.74);
  font:500 12px/1.25 var(--s);letter-spacing:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Le carton (src/EventQr.tsx) : debout sur la table, légèrement de biais.
   Ses unités cqw valent 1 % de sa largeur. */
.ivm__carton{position:relative;z-index:2;align-self:center;height:min(82cqh,58cqw);aspect-ratio:.64;container-type:size;perspective:1600px;transform:rotate(2.5deg)}
.ivm__tourne{position:absolute;inset:0;transform-style:preserve-3d}
.ivm__face,.ivm__dos{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:7cqw;
  box-shadow:0 50px 90px -34px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.05)}
.ivm__face{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:7cqh 8cqw 6.5cqh;border:1px solid #EDE3D2;background:#fff;color:#1A1410;text-align:center}
.ivm__ft,.ivm__fb{display:flex;flex-direction:column;align-items:center;gap:1.2cqh}
.ivm__br{font-size:max(13px,7.4cqw);font-weight:700;line-height:1;letter-spacing:-.03em;color:#1A1410}
.ivm__br span{color:#F97708}
.ivm__ev{margin-top:1.2cqh;font-size:max(14px,8.6cqw);font-weight:700;line-height:1.12;letter-spacing:-.03em}
.ivm__d{font-size:max(12px,5.4cqw);color:#6B5D50}
.ivm__qr{display:block;width:min(64cqw,40cqh);height:auto;fill:#1A1410}
.ivm__l{font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#6B5D50}
.ivm__c{position:relative;font-size:max(20px,12.5cqw);font-weight:700;line-height:1;letter-spacing:.26em;margin-right:-.26em;color:#1A1410}
.ivm__c::after{content:'';position:absolute;left:0;right:.26em;bottom:-1.2cqh;height:max(3px,1.4cqw);border-radius:3px;background:#F97708;transform-origin:0 50%}
/* Le dos du carton : du papier, la marque. */
.ivm__dos{display:flex;align-items:center;justify-content:center;background:#F3EDE2;transform:rotateY(180deg)}
.ivm__dos::before{content:'';position:absolute;inset:5cqw;border:1px solid rgba(26,20,16,.12);border-radius:4cqw}
.ivm__dos .ivm__br{font-size:max(15px,11cqw)}

/* ── 02 · État de départ et le jeu ───────────────────────────────────────────
   Au départ : le mur vide, le carton de dos. Les photos tombent une à une
   (--d, dans un ordre mêlé, en un peu plus de 2 s), leur signature suit ;
   le compteur monte avec elles (invites.js) ; à 2,3 s le carton se retourne. */
.ivm.iv--init .ivm__mur i{opacity:0;transform:translateY(-48px) rotate(var(--r,-4deg)) scale(1.06)}
.ivm.iv--init .ivm__mur span{opacity:0}
.ivm.iv--init .ivm__tourne{transform:rotateY(180deg)}
.ivm.iv--init .ivm__c::after{transform:scaleX(0)}
.ivm.iv--init *,.ivm.iv--init *::before,.ivm.iv--init *::after{transition:none!important;animation:none!important}
html.js .ivm:not(.iv--init) .ivm__mur i{transition:transform .62s cubic-bezier(.3,1.32,.52,1) var(--d,0s),opacity .22s ease var(--d,0s)}
html.js .ivm:not(.iv--init) .ivm__mur span{transition:opacity .3s ease calc(var(--d,0s) + .4s)}
html.js .ivm:not(.iv--init) .ivm__tourne{transition:transform 1s cubic-bezier(.35,.1,.15,1) 2.3s}
html.js .ivm:not(.iv--init) .ivm__c::after{transition:transform .5s cubic-bezier(.2,.8,.2,1) 3.25s}

/* ════════ 03 · Les mariés créent leur galerie (.iv-cr) ═══════════════════ */
/* Les deux maquettes HTML partagent la palette de l'application invités
   (apps/guest-app/src/theme.ts) : ivoire, ivoire grisé, encre, orange. */
.iv-cr,.iv-am{--a-iv:#FBF8F2;--a-ivd:#F3EDE2;--a-ink:#1A1410;--a-ink3:#6B5D50;--a-soft:#5A5048;--a-or:#F97708;--a-ors:#FFF3E8;--a-ori:#A84E00;--a-line:#E6DED0;
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--a-ink);font-family:var(--s);letter-spacing:-.01em;text-align:left}
:where(.iv-cr,.iv-am) p{margin:0}
.iv-cr{gap:4.5cqw;padding:4cqh 5cqw}
.iv-cr__ecran{flex:0 0 47cqw;display:flex;flex-direction:column;gap:clamp(7px,1.9cqh,13px);padding:clamp(12px,3.2cqh,22px) clamp(14px,2.6cqw,22px);border-radius:20px;background:var(--a-iv);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.iv-cr__et{display:flex;align-items:center;gap:10px}
.iv-cr__et span{flex:none;font:600 12px/1 var(--m);letter-spacing:.06em;color:var(--a-ink3)}
.iv-cr__et i{flex:1;height:4px;border-radius:4px;background:var(--a-or)}
.iv-cr__h{font-size:clamp(19px,4.6cqh,27px);font-weight:700;line-height:1.1;letter-spacing:-.035em}
.iv-cr__recap{padding:clamp(9px,2.3cqh,15px) 14px;border-radius:12px;background:var(--a-ivd)}
.iv-cr__recap b{display:block;font-size:clamp(16px,3.6cqh,21px);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.iv-cr__recap span{display:block;margin-top:3px;font-size:clamp(12px,2.5cqh,14px);color:var(--a-ink3)}
.iv-cr__formule{padding:clamp(9px,2.3cqh,14px) 14px;border:1.5px solid var(--a-or);border-radius:12px;background:#fff}
.iv-cr__fn{display:flex;align-items:center;gap:8px}
.iv-cr__fn b{font-size:clamp(15px,3.2cqh,17px);font-weight:600}
.iv-cr__fn span{padding:3px 10px;border-radius:100px;background:var(--a-ors);font-size:12px;font-weight:600;color:var(--a-ori)}
.iv-cr__ft{margin-top:6px;font-size:clamp(12px,2.6cqh,14px);line-height:1.45;color:var(--a-soft)}
.iv-cr__btn{padding:clamp(8px,2.2cqh,13px) 12px;border-radius:12px;background:var(--a-or);font-size:clamp(14px,3cqh,16px);font-weight:600;text-align:center;color:var(--a-ink)}
/* Le carton : src/EventQr.tsx, à la verticale comme à l'impression. */
.iv-qr{flex:0 0 29cqw;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1cqh,7px);padding:clamp(12px,3cqh,20px) clamp(10px,2cqw,18px);border:1px solid #EDE3D2;border-radius:16px;background:#fff;text-align:center;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9);transform:rotate(3deg) translateY(2cqh)}
.iv-qr__txt,.iv-qr__bas{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.8cqh,5px)}
.iv-qr__br{font-size:clamp(15px,3.2cqh,18px);font-weight:700;letter-spacing:-.03em}
.iv-qr__br span{color:var(--a-or)}
.iv-qr__ev{font-size:clamp(15px,3.6cqh,20px);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.iv-qr__d{font-size:clamp(12px,2.4cqh,13px);color:var(--a-ink3)}
.iv-qr__q{display:block;width:min(74%,30cqh);height:auto;margin:clamp(2px,.8cqh,8px) 0;fill:var(--a-ink)}
.iv-qr__l{font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--a-ink3)}
.iv-qr__c{font:700 clamp(20px,5.4cqh,31px)/1 var(--s);letter-spacing:.32em;margin-right:-.32em;color:var(--a-ink)}

/* ════════ 04 · D'un mariage à l'autre (.iv-am) ═══════════════════════════ */
.iv-am{padding:5cqh 4.5cqw}
.iv-am__ph{position:relative;flex:0 0 59cqw;height:88cqh;overflow:hidden;border-radius:18px;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.iv-am__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:74% 60%}
.iv-am__gens{position:absolute;left:14px;bottom:14px;width:min(250px,calc(100% - 28px));padding:12px 14px 8px;border-radius:16px;background:rgba(12,10,8,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.iv-am .iv-am__gt{margin-bottom:4px;font-size:15px;font-weight:700}
.iv-am .iv-am__g{display:flex;align-items:center;gap:10px;margin:0 -8px;padding:6px 8px;border-radius:10px;font-size:15px}
.iv-am__g i{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.16);font-style:normal;font-size:13px;font-weight:700}
.iv-am__g span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-am__g b{flex:none;font-size:20px;font-weight:400;line-height:1;color:rgba(255,255,255,.5)}
.iv-am__g--on{background:rgba(249,119,8,.26)}
.iv-am__g--on i{background:var(--a-or);color:var(--a-ink)}
.iv-am__fiche{position:relative;z-index:2;flex:0 0 36cqw;margin-left:-7cqw;display:flex;flex-direction:column;gap:12px;padding:20px 18px 8px;border-radius:20px;background:#fff;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.04)}
.iv-am__tete{display:flex;align-items:center;gap:12px}
.iv-am__tete i{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--a-ivd);font-style:normal;font-size:22px;font-weight:700;color:var(--a-ink3)}
.iv-am__tete p{min-width:0}
.iv-am__tete b{display:block;font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.025em}
.iv-am__tete span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--a-ink3)}
.iv-am__chips{display:flex;flex-wrap:wrap;gap:6px}
.iv-am__chips span{padding:5px 11px;border-radius:100px;background:var(--a-ivd);font-size:12.5px;line-height:1.3}
.iv-am__btn{padding:12px;border-radius:12px;background:var(--a-or);font-size:15px;font-weight:600;text-align:center;color:var(--a-ink)}
.iv-am__x{padding:4px 0 6px;font-size:14px;text-align:center;color:var(--a-ink3)}

/* Cadre bas (petit ordinateur) : on resserre plutôt que de rapetisser le texte. */
@container mock (max-height: 420px){
  .iv-cr{gap:3.5cqw;padding:3cqh 4cqw}
  .iv-cr__ecran{flex-basis:52cqw}
  .iv-cr__et{display:none}
  .iv-qr{flex-basis:31cqw}
  .iv-am__ph{flex-basis:58cqw;height:90cqh}
  .iv-am__gens{left:10px;bottom:10px;padding:10px 12px 6px}
  .iv-am .iv-am__g{padding:4px 8px}
  .iv-am__fiche{flex-basis:38cqw;margin-left:-8cqw;gap:9px;padding:16px 14px 6px}
  .iv-am__tete i{width:42px;height:42px;font-size:18px}
  .iv-am__tete b{font-size:17px}
}

/* 03 et 04 : une apparition simple, rejouée à chaque visite (invites.js pose
   .iv-vu à l'entrée, la retire à la sortie). Sans JavaScript : tout est là. */
.iv-cr__ecran,.iv-qr,.iv-am__g,.iv-am__fiche{transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
.iv-qr{transition-delay:.28s}
.iv-am__g:nth-of-type(2){transition-delay:.12s}.iv-am__g:nth-of-type(3){transition-delay:.2s}.iv-am__g:nth-of-type(4){transition-delay:.28s}
.iv-am__fiche{transition-delay:.55s}
html.js .iv-anim:not(.iv-vu) .iv-cr__ecran{opacity:0;transform:translateY(18px)}
html.js .iv-anim:not(.iv-vu) .iv-qr{opacity:0;transform:translate(26px,30px) rotate(10deg)}
html.js .iv-anim:not(.iv-vu) .iv-am__g{opacity:0;transform:translateX(-10px)}
html.js .iv-anim:not(.iv-vu) .iv-am__fiche{opacity:0;transform:translateY(34px)}
/* La remise à zéro, hors écran, se fait sans transition. */
html.js .iv-anim.iv-raz :is(.iv-cr__ecran,.iv-qr,.iv-am__g,.iv-am__fiche){transition:none}

/* ── La reconnaissance faciale, en clair ─────────────────────────────────── */
.iv-clair{margin-top:clamp(56px,6vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.1)}
.iv-clair__t{font-size:clamp(20px,1.6vw,24px);font-weight:600;line-height:1.25;letter-spacing:-.025em;color:var(--ivory)}
/* Sous-grille : les phrases partent à la même hauteur, même si un libellé passe sur deux lignes. */
.iv-clair__l{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;row-gap:10px}
.iv-clair__l li{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;row-gap:10px;min-width:0;padding:2px clamp(16px,2vw,32px) 2px 0}
.iv-clair__l li+li{padding-left:clamp(16px,2vw,32px);border-left:1px solid rgba(255,255,255,.1)}
.iv-clair__k{display:flex;align-items:baseline;gap:10px;font:600 12px/1.5 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.iv-clair__k::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#16B364;box-shadow:0 0 0 3px rgba(22,179,100,.2);transform:translateY(-1px)}
.iv-clair__l span{font-size:15px;line-height:1.5;color:rgba(240,237,228,.72);text-wrap:pretty}

/* ── Pied : le code du carton, le mot pour le photographe, les deux appels ── */
.iv-pied{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sx-gap);align-items:center;margin-top:clamp(40px,4.5vw,64px)}
.iv-code{padding:clamp(22px,2.4vw,34px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(255,255,255,.04)}
.iv-code .codeinv__t{font-size:19px}
.iv-code__p{margin-top:6px;font-size:15px;line-height:1.45;color:rgba(240,237,228,.72)}
.iv-code .codeinv__form{margin-top:16px}
.iv-code__app{margin-top:22px}
.iv-pro{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.iv-pro__p{font-size:clamp(18px,1.45vw,21px);color:rgba(240,237,228,.82);max-width:34ch;text-wrap:pretty}
.iv-pro .ctas{margin-top:0}
/* Écran 2 (ordinateur) : il commence par son propre filet, sans marge en plus. */
@media(min-width:901px){
  #invites .iv-clair{margin-top:0}
  #invites .iv-pied{margin-top:clamp(28px,5vh,64px)}
}

/* ── Téléphone et tablette (sous 900px) ──────────────────────────────────── */
@media (max-width:900px){
  /* La liste se resserre un peu (marges), pour que l'écran 1 reste court. */
  #invites .lo__b{min-height:48px}
  #invites .lo__it.on .lo__b{padding-top:16px;padding-bottom:8px}
  #invites .lo__p{padding-bottom:16px}
  #invites .lo>.lo__vis{margin:10px 0 14px}
  #invites .gp{margin-bottom:12px}
  #invites .sx__body{margin-top:20px}
  /* 01 : la galerie en 9 × 12 à gauche (l'étiquette sur deux lignes), le
     téléphone à droite. */
  .ivs{column-gap:14px;padding:14px}
  .ivs__gal>*{--t:min(calc((100cqw - 8 * var(--ivs-g)) / 9),calc((100cqh - 84px - 11 * var(--ivs-g)) / 12));--gw:calc(9 * var(--t) + 8 * var(--ivs-g))}
  .ivs__g{grid-template-columns:repeat(9,var(--t))}
  /* Colonne étroite : l'étiquette et la mention passent en lettres normales. */
  .ivs__k{font:500 12px/16px var(--s);letter-spacing:.01em;text-transform:none}
  .ivs__fac span{gap:7px;padding:0 10px 0 9px;font:600 13px/1 var(--s);letter-spacing:0;text-transform:none}
  .ivs__tel{height:min(88cqh,92cqw)}
  .ivs__av{display:none}
  .ivs__res{padding-top:15cqw}

  /* 02 : l'en-tête, le mur (4 × 2), puis le carton en ticket : le QR à
     gauche, le texte à droite. */
  .ivm{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;row-gap:12px;padding:12px 14px}
  /* 4 × 2 vignettes : étiquette 16 + 10, en-tête 44 + 10 (sans marge en plus). */
  .ivm__gal>*{--t:min(calc((100cqw - 3 * 8px) / 4),calc((100cqh - 82px - 8px) / 2));--gw:calc(4 * var(--t) + 3 * 8px)}
  .ivm__tete{min-height:44px}
  .ivm__mur span{left:3px;bottom:3px;max-width:calc(100% - 6px);padding:3px 5px}
  .ivm__mur{grid-template-columns:repeat(4,var(--t))}
  .ivm__mur i:nth-child(n+9){display:none}
  .ivm__ey{letter-spacing:.1em;white-space:nowrap}
  .ivm__st{gap:12px}
  .ivm__carton{align-self:stretch;justify-self:center;width:min(100%,420px);height:auto;aspect-ratio:auto;container-type:normal;transform:rotate(-1.2deg)}
  .ivm__tourne{position:relative;inset:auto}
  .ivm__face{position:relative;inset:auto;display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-areas:"q t" "q b";align-items:center;justify-items:start;column-gap:16px;row-gap:5px;
    padding:10px 16px;border-radius:16px;text-align:left}
  .ivm__ft{grid-area:t;align-items:flex-start;gap:2px}
  .ivm__fb{grid-area:b;align-items:flex-start;gap:4px}
  .ivm__qr{grid-area:q;width:80px}
  .ivm__br{font-size:14px}
  .ivm__ev{margin-top:1px;font-size:16px}
  .ivm__d{font-size:12px}
  .ivm__c{font-size:22px}
  .ivm__l,.iv-qr__l{letter-spacing:.08em}
  .ivm__c::after{bottom:-5px;height:3px}
  .ivm__dos{border-radius:16px}
  .ivm__dos::before{inset:8px;border-radius:10px}
  .ivm__dos .ivm__br{font-size:20px}

  /* 03 et 04 : le calque donne la hauteur (data-r-m="auto"), tout s'empile. */
  .iv-cr,.iv-am{position:relative;inset:auto;flex-direction:column;align-items:stretch;padding:16px}
  /* Tablette : le contenu garde une largeur de téléphone, centré dans le cadre. */
  @media (min-width:600px){.iv-cr,.iv-am{padding:24px max(16px,calc((100% - 500px) / 2))}}
  .iv-cr{padding:14px}
  .iv-cr__ecran{flex:none;gap:9px;padding:15px 14px}
  .iv-cr__et{display:none}
  .iv-cr__h{font-size:21px}
  .iv-cr__recap{padding:9px 12px}
  .iv-cr__recap b{font-size:17px}
  .iv-cr__recap span{font-size:13px}
  .iv-cr__ft{font-size:13px}
  .iv-cr__formule{padding:10px 12px}
  .iv-cr__fn b{font-size:16px}
  .iv-cr__btn{padding:10px;font-size:16px}
  /* Le carton devient un ticket : le QR à gauche, le texte à droite. */
  .iv-qr{flex:none;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"q t" "q b";align-items:center;justify-items:start;column-gap:16px;row-gap:8px;
    margin:-12px 14px 0;padding:12px 16px;text-align:left;transform:rotate(-1.5deg)}
  .iv-qr__txt{grid-area:t;align-items:flex-start;gap:2px}
  .iv-qr__q{grid-area:q;width:80px;margin:0}
  .iv-qr__bas{grid-area:b;align-items:flex-start;gap:4px}
  .iv-qr__br{font-size:14px}
  .iv-qr__ev{font-size:16px}
  .iv-qr__c{font-size:22px}
  html.js .iv-anim:not(.iv-vu) .iv-qr{transform:translate(0,26px) rotate(4deg)}

  .iv-am__ph{flex:none;width:100%;height:auto;aspect-ratio:16/10}
  .iv-am__gens{left:10px;bottom:10px;width:min(230px,calc(100% - 20px));padding:10px 12px 6px}
  .iv-am .iv-am__gt{font-size:14px}
  .iv-am .iv-am__g{padding:4px 8px;font-size:14px}
  .iv-am__g i{width:26px;height:26px;font-size:12px}
  /* Pas de chevauchement : la fiche cacherait le bas de « Sur cette photo ». */
  .iv-am__fiche{flex:none;margin:10px 0 0;padding:14px 16px 2px;gap:8px}

  .iv-clair__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .iv-clair__l li,.iv-clair__l li+li{padding:14px 14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04)}
  .iv-pied{grid-template-columns:minmax(0,1fr);gap:28px}
  .iv-pro{align-items:stretch}
  .iv-pro__p{max-width:none}
}
@media (max-width:560px){
  /* Téléphone : une liste à filets, plus courte que quatre cartes. */
  .iv-clair{margin-top:48px;padding-top:24px}
  .iv-clair__l{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:14px}
  .iv-clair__l li,.iv-clair__l li+li{row-gap:6px;padding:13px 0 14px;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:none}
  .iv-clair__l li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
  .iv-pied{margin-top:32px}
  .iv-code{padding:20px 18px}
}

/* ── « Réduire les animations » : états finaux, sans mouvement ─────────────── */
@media (prefers-reduced-motion:reduce){
  .ivs *,.ivs *::before,.ivs *::after,.ivm *,.ivm *::before,.ivm *::after{transition:none!important;animation:none!important}
  .iv-cr__ecran,.iv-qr,.iv-am__g,.iv-am__fiche{transition:none!important}
  html.js .iv-anim:not(.iv-vu) .iv-cr__ecran,html.js .iv-anim:not(.iv-vu) .iv-am__g,html.js .iv-anim:not(.iv-vu) .iv-am__fiche{opacity:1;transform:none}
  html.js .iv-anim:not(.iv-vu) .iv-qr{opacity:1;transform:rotate(3deg) translateY(2cqh)}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  html.js .iv-anim:not(.iv-vu) .iv-qr{transform:rotate(-1.5deg)}
}