/* ─────────────────────────────────────────────────────────────────────────────
   apercu.css — le sommaire des deux côtés (#apercu), juste après l'ouverture.

   Tout le gabarit vient de sections.css : .sx, .sx__head--c (en-tête centré),
   .duo (deux cartes et le rail), ul.reassure--puces (garanties), .rv. Ici,
   seulement ce qui est propre à cette section :
     - UN ÉCRAN sur ordinateur (21/10) : titre, marges, listes et boutons
       suivent la hauteur de l'écran ; le texte courant ne descend pas sous 16px ;
     - l'arrivée par une ancre, qui pose le surtitre juste sous le menu ;
     - les deux cartes alignées ligne à ligne (pastille, titre, liens, prix) ;
     - les titres coupés après la virgule (apercu.js) ;
     - le rail et l'animation « Une photo, deux écrans » (apercu.js) :
       l'ordinateur du photographe, le logo, le téléphone de l'invité ;
     - le texte du bouton orange, en encre (lisible) ;
     - les garanties, qui ne se coupent jamais au milieu d'une ligne.

   Jetons propres à la section :
     --carte-px  marge intérieure horizontale des cartes
     --duo-gap   écart entre une carte et le rail (celui de sections.css)
     --duo-rg    écart entre les rangées des cartes
     --pc-w      largeur de l'ordinateur      --tel-w  largeur du téléphone
     --app-gap   écart entre un texte et l'appareil voisin
   ───────────────────────────────────────────────────────────────────────────── */
#apercu{--carte-px:clamp(26px,2.4vw,38px);--duo-gap:18px;--duo-rg:18px;--pc-w:132px;--tel-w:54px;--app-gap:20px}
@media(max-width:1099px){#apercu{--pc-w:112px;--tel-w:48px;--app-gap:16px}}

/* Arrivée par « Voir comment ça marche ↓ », « Passer l'animation » ou
   « Aller au contenu » : le surtitre se pose à 88px du haut de l'écran
   (~80px sur téléphone), juste sous la place du menu, et la section tient
   dessous. (html : scroll-padding-top 96px, 72px sous 700px.) */
#apercu{scroll-margin-top:calc(-8px - var(--sx-y))}
@media(max-width:700px){#apercu{scroll-margin-top:calc(8px - var(--sx-y))}}

/* Titres coupés après la virgule, quand ils n'y gagnent aucune ligne (apercu.js). */
#apercu .apercu--coupe .apercu__b{display:block}
#apercu .sx__head--c h2{max-width:22ch}

/* Un lien qui passe sur deux lignes ne laisse pas un mot seul en bas. */
#apercu .duo__l a{text-wrap:balance}

/* Cartes : un halo très léger de la couleur du côté, en haut à droite. */
#apercu .duo__c{background:#fff;background:radial-gradient(120% 55% at 100% 0%,color-mix(in srgb,var(--c) 7%,#fff) 0%,#fff 70%)}

/* Bouton orange : texte encre (6,6:1). Le blanc sur cet orange ne fait que
   2,7:1 — c'est aussi le choix de la barre collée (.bar__b--pro). */
#apercu .cta1,#apercu .cta1:hover{color:var(--ink)}

/* ═════════ Un écran sur ordinateur ═════════════════════════════════════════
   Budget : hauteur de l'écran − 88px (place du menu) − 24px. Mesuré à
   1280×720, 1536×730, 1440×800 et 1920×950. Le titre suit la largeur ET la
   hauteur ; seuls les écarts, les rangées de liens et les boutons se
   resserrent. Le chapeau, que les cartes redisaient, n'existe plus. */
@media(min-width:901px){
  #apercu{--sx-y:clamp(72px,12vh,120px);--duo-rg:clamp(10px,1.5vh,18px);--carte-px:clamp(24px,2.3vw,36px)}
  #apercu .sx__k{margin-bottom:clamp(8px,1.4vh,18px)}
  #apercu .sx__head--c h2{font-size:min(clamp(36px,4.6vw,72px),7vh)}
  #apercu .duo{margin-top:clamp(14px,2.6vh,40px)}
  #apercu .duo__c{padding:clamp(16px,2.5vh,34px) var(--carte-px)}
  #apercu .duo__lab{padding-block:clamp(5px,.8vh,7px)}
  #apercu .duo__c h3{font-size:clamp(22px,3.4vh,26px)}
  #apercu .duo__l a{min-height:clamp(36px,5vh,54px);padding:5px 0;font-size:clamp(16px,2.3vh,18px)}
  #apercu .duo__bas{padding-top:0}
  #apercu .duo__px{font-size:clamp(18px,2.6vh,20px)}
  #apercu .duo__m{margin-bottom:clamp(8px,1.4vh,14px)}
  #apercu .duo__bas :is(.cta1,.cta2){padding:clamp(11px,1.5vh,15px) clamp(20px,1.8vw,26px);font-size:clamp(16px,2.2vh,18px)}
}

/* Côte à côte, les deux cartes et le rail partagent leurs rangées (pastille,
   titre, liens, prix) : listes et prix restent alignés même si un titre ou un
   lien prend une ligne de plus d'un côté. */
@media(min-width:901px){
  @supports (grid-template-rows:subgrid){
    #apercu .duo{grid-template-rows:repeat(4,auto);row-gap:var(--duo-rg)}
    #apercu .duo__c{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--duo-rg)}
    #apercu .duo__lab{justify-self:start;align-self:start}
    #apercu .duo__c h3{align-self:start}   /* hauteur du texte, pas de la ligne (mesure d'apercu.js) */
    /* Les deux listes remplissent leur rangée : si des liens passent sur deux
       lignes d'un côté (vers 900-1 100px), les rangées de l'autre s'aèrent, et
       les deux filets du bas restent alignés sur le logo. */
    #apercu .duo__l{display:flex;flex-direction:column;align-self:stretch}
    #apercu .duo__l li{flex:1 1 auto;display:flex}
    #apercu .duo__l a{flex:1}
  }
}

/* ── Le rail : là où les deux côtés se rejoignent ───────────────────────────
   Il porte l'ordinateur, le logo (dans une pastille) et le téléphone.
   Sans JavaScript, le logo (gabarit #mk) n'est pas posé : pas de pastille vide. */
.apercu__noeud:not(:has(svg)){display:none}
.apercu__noeud{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(43,24,16,.45)}
#apercu .apercu__rail{position:relative}
/* sections.css colore en vert le DERNIER trait du rail ; ici le dernier enfant
   est le téléphone : on vise le second trait. */
#apercu .duo__rail>span:nth-of-type(2){background:linear-gradient(180deg,#0F7D46,rgba(15,125,70,0))}

/* Côte à côte : le logo se pose sur le filet qui ferme les deux listes, et
   les appareils se font face à ses côtés, au pied des cartes — l'ordinateur à
   droite de l'offre photographe, le téléphone à gauche de l'offre mariés. La
   photo vole de l'un à l'autre sans passer sur aucun texte. */
@media(min-width:901px){
  @supports (grid-template-rows:subgrid){
    #apercu .duo__rail{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--duo-rg);justify-items:center;align-items:stretch;padding:22px 0}
    #apercu .duo__rail>*{grid-column:1}   /* une seule colonne : le trait vert partage la case du logo */
    #apercu .duo__rail>span{width:2px;min-height:0;align-self:stretch}
    #apercu .duo__rail>span:nth-of-type(1){grid-row:1/4;margin-bottom:36px}
    #apercu .apercu__noeud{grid-row:4;align-self:start;margin-top:calc(-26px - var(--duo-rg))}
    #apercu .duo__rail>span:nth-of-type(2){grid-row:4;margin-top:calc(36px - var(--duo-rg))}
    #apercu .apercu__pc{grid-row:4;position:absolute;top:4px;right:calc(100% + var(--duo-gap) + var(--carte-px))}
    #apercu .apercu__tel{grid-row:4;position:absolute;top:0;left:calc(100% + var(--duo-gap) + var(--carte-px))}
    #apercu .duo__c:not(.duo__c--cpl) :is(.duo__px,.duo__m){padding-right:calc(var(--pc-w) + var(--app-gap))}
    #apercu .duo__c--cpl .duo__bas{padding-left:calc(var(--tel-w) + var(--app-gap))}
  }
}
/* Sans « subgrid » (navigateurs anciens) : le rail de sections.css, logo au
   milieu ; les appareils restent dans le rail, posés de part et d'autre du
   logo, à la hauteur des prix. */
@media(min-width:901px){
  @supports not (grid-template-rows:subgrid){
    #apercu .apercu__pc{position:absolute;bottom:22px;right:calc(100% + var(--duo-gap) + var(--carte-px))}
    #apercu .apercu__tel{position:absolute;bottom:22px;left:calc(100% + var(--duo-gap) + var(--carte-px))}
    #apercu .duo__c:not(.duo__c--cpl) :is(.duo__px,.duo__m){padding-right:calc(var(--pc-w) + var(--app-gap))}
    #apercu .duo__c--cpl .duo__bas{padding-left:calc(var(--tel-w) + var(--app-gap))}
  }
}

/* ── Garanties ───────────────────────────────────────────────────────────────
   Une ligne dès 1 280px (lettres un peu moins espacées jusqu'à 1 420px : elle
   y tient en ~1 140px). En dessous, deux lignes de deux, centrées chacune : un
   pseudo-élément pleine largeur force le retour après la 2e garantie, et la 3e
   (début de ligne) perd son point. Sous 900px : une colonne, sans cases.
   Pas d'apparition .rv : posées en bas de l'écran (dans les 10 % que
   l'apparition ignore), elles resteraient invisibles jusqu'au défilement. */
#apercu .apercu__gar{margin-top:clamp(14px,2.4vh,28px)}
@media(min-width:1280px) and (max-width:1420px){
  #apercu ul.apercu__gar{letter-spacing:.07em}
  #apercu ul.apercu__gar li+li::before{margin:0 12px}
}
@media(min-width:901px) and (max-width:1279px){
  #apercu ul.apercu__gar{row-gap:7px}   /* deux interlignes autour du retour forcé : ~14px */
  #apercu ul.apercu__gar::before{content:'';order:1;flex:0 0 100%;height:0}
  #apercu ul.apercu__gar li:nth-child(n+3){order:2}
  #apercu ul.apercu__gar li:nth-child(3)::before{display:none}
}
@media(max-width:900px){
  #apercu .apercu__gar{margin-top:14px;align-items:stretch}
}

/* ═════════ Animation « Une photo, deux écrans » ═════════════════════════════
   Ce qui suit pose l'ÉTAT FINAL (sans JavaScript, « réduire les animations »,
   fin de l'animation) : l'ordinateur montre la collection, la photo retrouvée
   cerclée d'orange ; le téléphone montre les photos de l'invité, la même photo
   en tête. #apercu.apercu--attente (posée par apercu.js) est l'état de DÉPART :
   le téléphone est sur l'appareil photo du selfie. Tout ce qui bouge le fait en
   transform et opacity (Web Animations, apercu.js). Les appareils ont leur
   place réservée : rien ne bouge autour d'eux pendant l'animation. */

/* ── L'ordinateur du photographe ── */
#apercu .apercu__pc{z-index:1;width:var(--pc-w);pointer-events:none}
#apercu .apercu__pc-lid{margin:0 6%;padding:3.2% 3.2% 3.6%;border-radius:calc(var(--pc-w) * .06) calc(var(--pc-w) * .06) 2px 2px;background:#211C18;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#apercu .apercu__pc-vue{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:#FAF8F3}
#apercu .apercu__pc-vue img{display:block;width:100%;height:100%;object-fit:cover}
/* La vignette de la photo retrouvée : ligne 1, colonne 3 de l'image de l'écran
   (anim-apercu-ecran.webp, 240 × 150 : x 123, y 28, 48 × 32). */
#apercu .apercu__cible{position:absolute;left:51.25%;top:18.667%;width:20%;height:21.333%;border-radius:2px;box-shadow:0 0 0 1.5px #F97708,0 0 9px 1px rgba(249,119,8,.55)}
#apercu .apercu__pc-base{position:relative;display:block;height:max(4px,calc(var(--pc-w) * .042));border-radius:1px 1px 9px 9px / 1px 1px 4px 4px;background:linear-gradient(180deg,#F3F0EA,#C6BFB4);box-shadow:0 12px 18px -10px rgba(43,24,16,.5)}
#apercu .apercu__pc-base::before{content:'';position:absolute;left:50%;top:0;width:15%;height:45%;border-radius:0 0 3px 3px;background:#B3AB9F;transform:translateX(-50%)}

/* ── Le téléphone de l'invité ── (--u : un centième de sa largeur) */
#apercu .apercu__tel{--u:calc(var(--tel-w) / 100);z-index:1;width:var(--tel-w);padding:calc(var(--u) * 5.5);border-radius:calc(var(--u) * 21);background:#15110E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 16px 26px -14px rgba(43,24,16,.55);pointer-events:none}
#apercu .apercu__tel-ecran{position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:calc(var(--u) * 15.5);background:#FAF8F3;isolation:isolate}
#apercu .apercu__tel-ecran::after{content:'';position:absolute;z-index:6;left:50%;top:calc(var(--u) * 4);width:calc(var(--u) * 24);height:calc(var(--u) * 6.5);border-radius:99px;background:#000;transform:translateX(-50%)}

/* Ses photos : son visage (reconnu dans la collection), puis la photo
   retrouvée en tête, puis les autres. */
#apercu .apercu__vos{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--u) * 17) calc(var(--u) * 6) 0}
#apercu .apercu__vos-tete{display:flex;align-items:center;gap:calc(var(--u) * 4)}
#apercu .apercu__av{flex:none;position:relative;width:calc(var(--u) * 15);height:calc(var(--u) * 15);overflow:hidden;border-radius:50%;background:#E2DBCE;box-shadow:0 0 0 calc(var(--u) * 1.5) #16B364}
#apercu .apercu__av img{position:absolute;max-width:none;width:330%;height:auto;left:-52%;top:-43%}
#apercu .apercu__vos-l{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 2.6)}
#apercu .apercu__vos-l::before,#apercu .apercu__vos-l::after{content:'';display:block;height:calc(var(--u) * 3.6);border-radius:99px;background:#2A231E}
#apercu .apercu__vos-l::after{width:55%;height:calc(var(--u) * 3);background:#D8D0C2}
#apercu .apercu__fente{position:relative;display:block;margin-top:calc(var(--u) * 6);aspect-ratio:3/2;overflow:hidden;border-radius:calc(var(--u) * 5);background:#EAE4D8}
#apercu .apercu__fente img{display:block;width:100%;height:100%;object-fit:cover}
#apercu .apercu__grille{display:block;width:100%;height:auto;aspect-ratio:1;margin-top:calc(var(--u) * 3.9)}

/* L'appareil photo du selfie, comme dans le produit (selfie-camera.tsx) :
   l'image en miroir, un cercle guide blanc, le déclencheur rond. Puis
   l'analyse (un arc qui tourne), et le cercle vert d'« Identification
   réussie ! » (biometric-access.tsx). État final : glissé hors de l'écran. */
#apercu .apercu__cam{position:absolute;inset:0;z-index:2;overflow:hidden;background:#0B0907;transform:translateY(-101%)}
#apercu .apercu__cam>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#apercu .apercu__flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0}
#apercu .apercu__guide{position:absolute;left:17%;top:51%;width:66%;height:auto;aspect-ratio:1;overflow:visible;transform:translateY(-50%)}
#apercu .apercu__guide circle{fill:none}
#apercu .apercu__guide-c{stroke:rgba(255,255,255,.5);stroke-width:4}
#apercu .apercu__arc{stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-dasharray:26 74;opacity:0;transform-origin:50px 50px}
#apercu .apercu__rond{stroke:#16B364;stroke-width:5.5}
#apercu .apercu__ok{position:absolute;left:calc(50% + var(--u) * 11.3);top:calc(51% + var(--u) * 11.3);width:calc(var(--u) * 19);height:calc(var(--u) * 19);display:grid;place-items:center;border-radius:50%;background:#16B364;box-shadow:0 0 0 calc(var(--u) * 1.6) #0B0907}
#apercu .apercu__ok svg{width:68%;height:68%;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
#apercu .apercu__decl{position:absolute;left:calc(50% - var(--u) * 10);bottom:calc(var(--u) * 10);width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;background:#fff;box-shadow:0 0 0 calc(var(--u) * 1.8) rgba(255,255,255,.32)}

/* État de départ (JavaScript, avant que l'animation ne se joue, et de nouveau
   quand la démo est sortie de l'écran : elle se rejouera au retour). */
#apercu.apercu--attente .apercu__cam{transform:none}
#apercu.apercu--attente :is(.apercu__cible,.apercu__fente img,.apercu__grille,.apercu__rond,.apercu__ok){opacity:0}

/* ── La photo en vol, et la zone qui déclenche l'animation (apercu.js) ──
   Elle passe au-dessus des cartes et des appareils, DERRIÈRE le logo. */
#apercu .duo{position:relative}            /* repère de la photo en vol */
#apercu .apercu__vol{position:absolute;left:0;top:0;z-index:2;display:block;overflow:hidden;border-radius:5px;background:#EAE4D8;opacity:0;pointer-events:none;transform-origin:50% 50%;box-shadow:0 0 0 1px rgba(255,255,255,.75),0 16px 28px -12px rgba(43,24,16,.5)}
#apercu .apercu__vol img{display:block;width:100%;height:100%;object-fit:cover}
#apercu .apercu__zone{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
#apercu .apercu__noeud{position:relative;z-index:3}
#apercu .apercu__onde{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #F97708;opacity:0;pointer-events:none}

/* ═════════ Cartes empilées (téléphone, tablette) ═════════════════════════════
   Le rail devient le pont entre les deux cartes : l'ordinateur, un trait, le
   logo, un trait, le téléphone. La photo le traverse de gauche à droite. Que la
   carte des mariés passe en premier (public mémorisé, body.aud-cpl) n'y change
   rien. Les cartes, sans appareil, gardent toute leur largeur au texte. */
@media(max-width:900px){
  #apercu{--pc-w:clamp(80px,24vw,108px);--tel-w:clamp(38px,10.5vw,46px);--carte-px:20px}
  .apercu__noeud{width:46px;height:46px}
  #apercu .apercu__noeud svg{width:24px;height:24px}
  #apercu .duo{margin-top:18px;gap:10px}
  #apercu .duo__c{padding:18px var(--carte-px) 20px;gap:12px}
  #apercu .duo__c h3{font-size:clamp(22px,6.2vw,26px)}
  #apercu .duo__l a{min-height:44px;padding:6px 0;font-size:16px}
  #apercu .duo__bas{padding-top:2px}
  #apercu .duo__m{margin-bottom:10px}
  #apercu .duo__bas :is(.cta1,.cta2){padding-block:13px}
  #apercu .duo__rail{align-items:flex-end;justify-content:center;gap:10px;padding:2px var(--carte-px) 4px}
  #apercu .duo__rail>span{flex:1 1 0;min-width:10px;max-width:150px;align-self:center}   /* tablette : le pont reste groupé au centre */
  #apercu .duo__rail>span:nth-of-type(2){background:linear-gradient(90deg,#0F7D46,rgba(15,125,70,0))}
  #apercu .apercu__pc,#apercu .apercu__tel{position:relative;flex:none}
  #apercu .apercu__pc{margin-bottom:6px}
  #apercu .apercu__noeud{align-self:center}
  /* Garanties : une colonne, une garantie par ligne, sans cases. */
  #apercu ul.apercu__gar{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;justify-items:start;text-align:left;letter-spacing:.06em}
  #apercu ul.apercu__gar li{display:flex;align-items:flex-start;gap:10px;padding:0;border:0;border-radius:0;background:none;line-height:1.4}
  #apercu ul.apercu__gar li::before,#apercu ul.apercu__gar li+li::before{content:'';flex:none;width:6px;height:6px;margin:.45em 0 0;border-radius:50%;background:var(--c,var(--acc))}
}

/* « Réduire les animations » : l'état final, rien ne vole. */
@media(prefers-reduced-motion:reduce){
  #apercu .apercu__vol{display:none}
}