/* ─────────────────────────────────────────────────────────────────────────────
   livrer.css — section 6 « Livrer » (#livrer) : la galerie à votre nom, le
   lien et le mot de passe, l'accès client des mariés.

   Le gabarit vient de sections.css (.sx --paper --rev, .gp.c-v, .lo, .mock,
   .go, .rv) et la maquette « livraison » (calque 02) de maquettes.css.
   Ici, seulement ce qui est propre à la section, toujours sous #livrer :
     - UN ÉCRAN sur ordinateur (901px et plus) : la section tient dans la
       fenêtre, 88px libres en haut (le menu peut revenir par-dessus quand on
       remonte), 24px en bas. Le titre reste grand mais suit la hauteur ;
       l'écran prend la hauteur qui reste sous le titre (--lv-dispo) ;
     - le titre et les repères en violet (la couleur du pilier) ;
     - le calque 01, « La couverture qui s'envole » (.lv-fl) : l'éditeur et ses
       réglages, la messagerie du photographe, le téléphone des mariés ;
     - la mini-page « accès client » du calque 03, fidèle à
       /share/:token/scored (client/src/pages/shared-collection-scored.tsx).
   Pas de bouton « Rejouer » : chaque démo se rejoue seule (livrer.js).
   Tailles en unités de conteneur (cqw, cqh, cqi) avec un plancher : aucun
   texte sous 12px. Les animations ne touchent qu'à transform et opacity
   (les couleurs de la palette changent par fondu de couleur, sans mise en page).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── En-tête et liste ─────────────────────────────────────────────────────── */
/* Deux phrases, deux lignes : la seconde, en violet. */
#livrer .sx__head h2{max-width:none}
#livrer .sx__head h2>span,#livrer .sx__head h2>em{display:block}
#livrer .sx__head h2 em{font-style:normal;color:var(--v-t)}
#livrer .lo__t{text-wrap:balance}
/* Repères en puces : elles passent à la ligne entières. */
#livrer .lv__rep{display:flex;flex-wrap:wrap;gap:6px;letter-spacing:.1em}
#livrer .lv__rep span{padding:2px 10px;border:1px solid rgba(124,92,255,.32);border-radius:100px;background:rgba(124,92,255,.06);white-space:nowrap}
#livrer .lv__essai{position:relative;padding-left:26px}
/* Sans JavaScript, pas de réglages à essayer : l'invitation se tait. */
html:not(.js) #livrer .lv__essai{display:none}
#livrer .lv__essai::before{content:'';position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;
  background:conic-gradient(#ffffff 0 25%,#f5f0e8 0 50%,#1a1a1a 0 75%,#f0ebe5 0);box-shadow:0 0 0 1px rgba(26,21,16,.18)}

/* ── Ordinateur : la section tient sur un écran ──────────────────────────────
   En-tête : pastille (32px + 12px) et deux lignes de titre (interligne 1,02),
   chacune d'une traite ; le chapeau, à droite, reste plus court. Le titre
   suit la largeur ET la hauteur (7,4vh) ; la première ligne anglaise a la
   même longueur que la française. Corps : l'écran à gauche (sept
   colonnes au plus, rapport 1,42 à 1,85), la liste à droite. Mesures : voir
   le rapport. */
@media(min-width:901px){
  #livrer{
    --sx-y:clamp(64px,9vh,112px);
    --lv-h2:min(clamp(36px,4.6vw,72px),7.4vh);
    --lv-gap:clamp(18px,3vh,32px);
    --lv-dispo:calc(100vh - 112px - 44px - 2.04 * var(--lv-h2) - var(--lv-gap));
    display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding-top:88px;padding-bottom:24px}
  @supports(height:100svh){#livrer{--lv-dispo:calc(100svh - 112px - 44px - 2.04 * var(--lv-h2) - var(--lv-gap))}}
  /* Un lien vers #livrer pose la section en haut de l'écran : sa marge haute
     garde déjà la place du menu (html : scroll-padding-top 96px). */
  #livrer{scroll-margin-top:-96px}
  #livrer>.sx__in{width:100%}
  #livrer .sx__head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sx-gap)}
  #livrer .lv-tete{grid-column:1/8}
  #livrer .sx__head .sx__ch{grid-column:8/-1}
  #livrer .gp{margin-bottom:12px}
  #livrer .sx__head h2{font-size:var(--lv-h2)}
  #livrer .sx__head h2>span,#livrer .sx__head h2>em{white-space:nowrap}
  #livrer .sx__body{margin-top:var(--lv-gap)}
  #livrer .sx__vis{container-type:inline-size}
  #livrer .lv__mock{width:min(100%,calc(var(--lv-dispo) * 1.85))}
  #livrer .lv__mock .mock__vp{aspect-ratio:auto;height:min(calc(100cqw / 1.42),var(--lv-dispo))}
  /* La liste se resserre (marges, pas le corps du texte). */
  #livrer .lo{--lo-px:16px;--lo-n:26px;--lo-gap:12px}
  #livrer .lo__b{min-height:54px;font-size:clamp(18px,1.45vw,20px)}
  #livrer .lo__it.on .lo__b{padding-top:16px;padding-bottom:8px}
  #livrer .lo__p{padding-bottom:16px}
  #livrer .lo__p>*+*{margin-top:10px}
  #livrer .sx__txt>.go{margin-top:20px}
}
/* Écran bas (portable) : quelques pixels de plus à gagner dans la liste. */
@media(min-width:901px) and (max-height:780px){
  #livrer .lo__b{min-height:50px}
  #livrer .lo__it.on .lo__b{padding-top:14px;padding-bottom:6px}
  #livrer .lo__p{padding-bottom:14px}
  #livrer .lo__p>*+*{margin-top:8px}
  #livrer .sx__txt>.go{margin-top:16px}
}

/* ── Téléphone et tablette en hauteur ────────────────────────────────────── */
@media(max-width:900px){
  #livrer{--sx-y:56px}
  #livrer .gp{margin-bottom:12px}
  #livrer .sx__body{margin-top:20px}
  #livrer .lo>.lo__vis{margin:10px 0 14px}
  #livrer .lo__p>*+*{margin-top:10px}
  #livrer .lv__mock{border-radius:24px}
}

/* ── Le cadre et ses calques ──────────────────────────────────────────────── */
#livrer .lv__hote{position:absolute;inset:0}
/* Sous 900px, chaque calque a son rapport (data-r-m : 4/5, 7/10, 4/5) ;
   entre 640 et 900px, le cadre est large : 16/11. */
@media(min-width:640px) and (max-width:900px){#livrer .lv__mock .mock__vp{aspect-ratio:16/11}}

/* ── 02 · Le message, côté photographe (maquette « livraison ») ─────────────
   Le mot de passe, plus long que l'ancien code, allonge la bulle : la photo
   s'y fait un peu plus basse, aucune bulle ne se laisse comprimer, et la
   conversation se cale en bas, comme une vraie (le haut passe sous l'en-tête). */
#livrer .mq.s5 .chd{z-index:1}
#livrer .mq.s5 .fil{justify-content:flex-end}
#livrer .mq.s5 .bub{flex-shrink:0}
#livrer .mq.s5 .s5s{aspect-ratio:16/9}

/* ── 01 · La couverture qui s'envole ─────────────────────────────────────────
   .lv-fl remplit le cadre. Deux compositions, choisies sur la taille du cadre
   (conteneur « mock », W × H) :
     - CÔTE À CÔTE (cadre large, 440px et plus) : à gauche, l'éditeur (barre du
       navigateur, couverture) posé sur ses réglages, centrés en hauteur ; à
       droite, le téléphone des mariés, en entier ;
     - RELAIS (cadre étroit) : l'éditeur, puis le téléphone qui prend sa place ;
       les réglages, en une rangée sans libellés, en bas du cadre.
   La messagerie du photographe (.lv-msg) se pose en bas, par-dessus les
   réglages, le temps d'« Envoyer ».
   Le HTML est l'état final. livrer.js pose .js (l'état de départ), puis les
   étapes : a1 le titre s'écrit, a2 filet + date + bouton, b1 « Lien copié »,
   c1 la messagerie s'ouvre, c2 elle part, b2 le message arrive chez les
   mariés (et, en relais, le téléphone remplace l'éditeur), b3 la page
   s'ouvre sous le message, b4 la couverture s'y pose et la grille se remplit.
   Palette, mise en page et police : classes p-*, m-*, t-* sur .lv-fl
   (valeurs de cover-editor.tsx).
   Variables (toutes en unités du cadre) : --m marge, --ph hauteur des
   réglages, --zh hauteur au-dessus d'eux (relais), --tw largeur du
   téléphone, --ew largeur de l'éditeur. */
.lv-fl{--g-fond:#f5f0e8;--g-tete:#ede8df;--g-acc:#9e8c5e;--g-txt:#1A1510;--g-sous:#6E665B;--g-cta:#fff;--g-bande:#1A1510;
  --m:clamp(10px,3.4cqw,18px);--ph:56px;--zh:calc(100cqh - var(--ph));
  --tw:clamp(178px,58cqw,215px);
  --ew:min(calc(100cqw - 2 * var(--m)),calc((var(--zh) - 2 * var(--m) - 34px) * 16 / 9));
  position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(120% 95% at 16% 0%,#FBF8F2 0%,#F2ECE2 58%,#EAE2D5 100%);
  font-family:var(--s);color:var(--ink);font-size:13px;line-height:1.3;letter-spacing:-.01em;text-align:left;-webkit-font-smoothing:antialiased}
.lv-fl *,.lv-fl *::before,.lv-fl *::after{box-sizing:border-box}
.lv-fl p{margin:0}
.lv-fl.p-clair{--g-fond:#ffffff;--g-tete:#e8e8e8;--g-acc:#4a4a4a;--g-txt:#1A1510;--g-sous:#6E665B;--g-cta:#fff;--g-bande:#1A1510}
.lv-fl.p-dore{--g-fond:#f5f0e8;--g-tete:#ede8df;--g-acc:#9e8c5e;--g-txt:#1A1510;--g-sous:#6E665B;--g-cta:#fff;--g-bande:#1A1510}
.lv-fl.p-sombre{--g-fond:#1a1a1a;--g-tete:#2a2a2a;--g-acc:#555555;--g-txt:#F2EEE8;--g-sous:rgba(242,238,232,.66);--g-cta:#fff;--g-bande:#F2EEE8}
.lv-fl.p-sable{--g-fond:#f0ebe5;--g-tete:#d8d2ca;--g-acc:#9a8a72;--g-txt:#1A1510;--g-sous:#6E665B;--g-cta:#fff;--g-bande:#1A1510}
/* Remise à zéro : aucun fondu à l'envers. */
.lv-fl--net,.lv-fl--net *,.lv-fl--net *::before,.lv-fl--net *::after{transition:none!important;animation:none!important}

/* ── La colonne de l'éditeur (relais : tout le cadre) ── */
.lv-gauche{position:absolute;inset:0;display:flex;flex-direction:column}

/* L'éditeur : la page de la galerie à l'adresse du photographe. */
.lv-ed{position:relative;z-index:1;flex:none;width:var(--ew);margin:auto;overflow:hidden;background:var(--g-fond);border-radius:12px;
  box-shadow:0 0 0 1px rgba(43,24,16,.08),0 30px 60px -34px rgba(43,24,16,.5);
  transition:background-color .4s ease,opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.lv-ed__br{display:flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 10px;background:#FAF8F3;border-bottom:1px solid var(--line)}
.lv-ed__br>i{flex:none;width:9px;height:9px;border-radius:50%;background:#E0D9CC}
.lv-ed__adr{flex:1 1 auto;display:block;min-width:0;margin-left:4px;padding:4px 10px;border:1px solid var(--line);border-radius:100px;background:#fff;
  font:500 12px/1.2 var(--m);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-ed__adr b{color:var(--ink);font-weight:600}
.lv-ed__adr svg,.lv-tel__adr svg{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;fill:#0F7D46;color:#0F7D46}
/* « Copier le lien » puis « Lien copié » : les deux dans la même case, la plus
   large fixe la taille (aucun décalage quand le libellé change). */
.lv-ed__cp{flex:none;display:grid;font:600 12px/1 var(--s);letter-spacing:-.005em;white-space:nowrap}
.lv-ed__cp>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:24px;padding:0 10px 0 8px;border-radius:100px;
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1.3)}
.lv-ed__cp svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lv-ed__cp1{background:var(--ink);color:#fff;opacity:0}
.lv-ed__cp2{background:#E4F4EA;color:#0F6B3D;box-shadow:inset 0 0 0 1px #BCE3CB}
.lv-ed__cp1.pr{transform:scale(.92)}

/* ── La couverture (éditeur, téléphone et copie qui vole) ── */
.lv-cov{position:relative;flex:none;width:100%;aspect-ratio:16/9;overflow:hidden;container:lvc/inline-size;background:var(--g-tete);transition:background-color .4s ease}
.lv-cov>img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:50% 45%;-webkit-user-select:none;user-select:none}
.lv-cov__band{position:absolute;left:0;top:0;bottom:0;width:38%;display:none;background:var(--g-tete);transition:background-color .4s ease}
.lv-cov__scrim{position:absolute;inset:0;background:linear-gradient(rgba(10,8,6,0) 30%,rgba(10,8,6,.74))}
.lv-cov__txt{position:absolute;left:6%;right:6%;bottom:8%;display:flex;flex-direction:column;align-items:flex-start;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.lv-cov__acc{display:block;width:13cqi;height:max(2px,.6cqi);margin-bottom:max(4px,2.4cqi);border-radius:2px;background:var(--g-acc);transition:background-color .4s ease}
.lv-cov__ttl{display:block;font:600 max(12px,7.6cqi)/1.04 var(--s);letter-spacing:-.045em;white-space:nowrap}
.lv-fl.t-classique .lv-cov__ttl{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.02em}
.lv-cov__dt{margin-top:max(4px,1.8cqi);font:500 max(12px,2.3cqi)/1.2 var(--m);letter-spacing:.2em;white-space:nowrap}
.lv-cov__cta{margin-top:max(7px,2.6cqi);padding:max(6px,1.5cqi) max(10px,2.8cqi);border-radius:max(6px,1.3cqi);background:var(--g-acc);color:var(--g-cta);
  font:600 max(12px,2.4cqi)/1 var(--s);letter-spacing:0;white-space:nowrap;text-shadow:none;transition:background-color .4s ease,color .4s ease}
/* Mise en page « Centrée » et « Éditoriale » (la « À gauche » est celle par défaut). */
.lv-fl.m-centree .lv-cov__scrim{background:radial-gradient(72% 64% at 50% 52%,rgba(10,8,6,.52),rgba(10,8,6,.16))}
.lv-fl.m-centree .lv-cov__txt{left:8%;right:8%;top:50%;bottom:auto;align-items:center;text-align:center;transform:translateY(-50%)}
.lv-fl.m-edito .lv-cov__band{display:block}
.lv-fl.m-edito .lv-cov__scrim{display:none}
.lv-fl.m-edito .lv-cov>img{left:38%;width:62%;object-position:62% 50%}
.lv-fl.m-edito .lv-cov__txt{left:4%;right:auto;width:31%;top:50%;bottom:auto;transform:translateY(-50%);color:var(--g-bande);text-shadow:none}
.lv-fl.m-edito .lv-cov__ttl{font-size:max(12px,4.2cqi);white-space:normal}
.lv-fl.m-edito .lv-cov__dt{letter-spacing:.1em;white-space:normal}
@container lvc (max-width:330px){.lv-fl.m-edito .lv-cov__cta{display:none}}
/* Petite couverture (celle du téléphone) : le titre suffit. */
@container lvc (max-width:270px){.lv-cov__cta,.lv-cov__dt{display:none}.lv-cov__txt{bottom:10%}}
/* Le titre qui s'écrit (éditeur seulement), lettre par lettre. */
.lv-cov__ttl .ch{position:relative}

/* ── Les réglages ── */
.lv-pan{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:center;gap:0 7px;height:var(--ph);padding:0 8px;
  background:#fff;border-top:1px solid var(--line)}
.lv-pan__g{flex:none;display:flex;flex-direction:column;gap:6px}
/* Relais : une rangée, sans libellés à l'écran (ils restent pour les lecteurs
   d'écran) ; un filet entre les groupes. */
.lv-pan__l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.lv-pan__g+.lv-pan__g{padding-left:7px;border-left:1px solid var(--line)}
.lv-pan__sw,.lv-pan__ly,.lv-pan__ft{display:flex;gap:4px}
.lv-pan__sw{gap:5px}
.lv-pan button{-webkit-appearance:none;appearance:none;position:relative;margin:0;padding:0;font-family:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.lv-pan button:focus-visible{outline:2px solid var(--acc-t);outline-offset:3px}
.lv-pan__sw button{flex:none;width:27px;height:27px;border-radius:50%;border:1px solid rgba(26,21,16,.18);background:linear-gradient(135deg,var(--c) 52%,var(--a) 52%);
  transition:box-shadow .3s,transform .15s}
/* Zone de toucher agrandie, sans changer le dessin. */
.lv-pan__sw button::before{content:'';position:absolute;inset:-5px;border-radius:50%}
.lv-pan__sw button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.lv-pan__sw button.pr{transform:scale(.86)}
.lv-pan__ly button{flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff}
.lv-ic{position:absolute;inset:5px;overflow:hidden;border-radius:4px;background:#D9D1C3}
.lv-ic::after{content:'';position:absolute;height:4px;border-radius:2px;background:#fff}
.lv-ic--centree::after{left:30%;right:30%;top:calc(50% - 2px)}
.lv-ic--gauche::after{left:12%;width:42%;bottom:18%}
.lv-ic--edito::before{content:'';position:absolute;left:0;top:0;bottom:0;width:40%;background:#F2EEE6}
.lv-ic--edito::after{left:8%;width:24%;top:calc(50% - 2px);background:#9C907F}
.lv-pan__ft button{flex:none;min-width:32px;height:32px;padding:0 5px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:15px;line-height:1}
.lv-pan__ft .f-classique{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.lv-pan__ft .f-moderne{font-family:var(--s);font-weight:600}
.lv-pan__ly button[aria-pressed="true"],.lv-pan__ft button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media(hover:hover){.lv-pan__ly button:hover,.lv-pan__ft button:hover{border-color:#B9AE9E}}
/* Sans JavaScript, les réglages ne répondraient pas : on les cache, et le
   téléphone (relais) ou l'éditeur (côte à côte) reprend leur place. Le
   rapport du cadre par calque vient de sections.js : sans lui, celui du
   calque 01 (le seul affiché) est posé ici. */
html:not(.js) .lv-pan,html:not(.js) .lv-gauche::after{display:none}
html:not(.js) .lv-fl{--ph:0px}
@media(max-width:639px){html:not(.js) #livrer .lv__mock .mock__vp{aspect-ratio:4/5}}
/* Cadre très étroit : la police cède la place (couleurs et mise en page restent). */
@container mock (max-width:339px){.lv-pan__g--t{display:none}}

/* ── Le téléphone des mariés ── */
.lv-tel{position:absolute;z-index:2;left:calc(50% - var(--tw) / 2);top:var(--m);width:var(--tw);height:calc(var(--tw) * 2.1);
  container:lvt/inline-size;padding:calc(var(--tw) * .024);border-radius:calc(var(--tw) * .145);background:#0E0C0A;
  box-shadow:0 50px 90px -40px rgba(43,24,16,.6),inset 0 0 0 2px #2a2622;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.lv-tel__scr{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:12cqi;background:#F2EFE8}
.lv-tel__scr::before{content:'';position:absolute;left:35%;top:3cqi;z-index:3;width:30%;height:7cqi;border-radius:40px;background:#000}
/* L'écran de veille : l'heure, sur un fond sombre et chaud. Il s'efface quand
   le message arrive (b2) ; absent de l'état final. */
.lv-tel__veille{position:absolute;inset:0;z-index:2;display:none;justify-content:center;padding-top:30cqi;
  background:radial-gradient(120% 80% at 50% 0%,#4A3A2E 0%,#241C17 55%,#14110F 100%);transition:opacity .4s ease}
.lv-tel__heure{font:300 max(30px,19cqi)/1 var(--s);letter-spacing:-.03em;color:#F2EEE8;font-variant-numeric:tabular-nums}
.lv-fl.js .lv-tel__veille{display:flex}
.lv-fl.js.b2 .lv-tel__veille{opacity:0}
.lv-tel__hd{flex:none;display:flex;align-items:center;gap:2.6cqi;padding:12cqi 4cqi 2.6cqi;background:#FAF8F3;border-bottom:1px solid var(--line)}
.lv-tel__av{flex:none;display:grid;place-items:center;width:max(20px,10.5cqi);height:max(20px,10.5cqi);border-radius:50%;background:var(--ink)}
.lv-tel__av svg{width:60%;height:60%;fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.lv-tel__hd b{min-width:0;font-size:max(12px,5.8cqi);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-tel__fil{flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:3.4cqi 3.4cqi 3cqi}
/* Le message du photographe, reçu par les mariés : le lien et le mot de passe. */
.lv-tel__bul{position:relative;max-width:100%;padding:2.6cqi 4cqi 2.8cqi;border-radius:5.5cqi 5.5cqi 5.5cqi 1.8cqi;background:#fff;box-shadow:0 8px 22px -16px rgba(0,0,0,.45);
  font-size:max(12px,5.6cqi);line-height:1.3;transform-origin:0 100%;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1.15)}
.lv-tel__lien{color:#B04E00;text-decoration:underline;text-decoration-color:rgba(176,78,0,.35);text-underline-offset:2px;overflow-wrap:anywhere}
.lv-tel__lien b{font-weight:600}
.lv-tel__mdp{font-weight:600}
/* La page ouverte par le lien, sous le message : l'adresse, la couverture, la galerie. */
.lv-tel__pg{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;border-radius:6cqi 6cqi 0 0;background:var(--g-fond);
  box-shadow:0 -12px 26px -20px rgba(0,0,0,.45),0 0 0 1px rgba(43,24,16,.06);transition:background-color .4s ease,opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.lv-tel__adr{flex:none;display:block;padding:1.8cqi 3cqi;background:#FAF8F3;border-bottom:1px solid var(--line);text-align:center;
  font:500 12px/1.2 var(--m);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-tel__adr b{color:var(--ink);font-weight:600}
.lv-tel .lv-cov{transition:background-color .4s ease,opacity .18s ease}
/* La galerie sous la couverture : les moments, puis la grille, pleine. */
.lv-gal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2.4cqi;padding:2.6cqi 2.6cqi 0;overflow:hidden;background:var(--g-fond);transition:background-color .4s ease}
.lv-gal__tabs{flex:none;display:flex;gap:4.4cqi;overflow:hidden;white-space:nowrap;font-size:12px;line-height:1.25;color:var(--g-sous);
  -webkit-mask:linear-gradient(90deg,#000 84%,transparent);mask:linear-gradient(90deg,#000 84%,transparent);transition:color .4s ease}
.lv-gal__tabs .on{color:var(--g-txt);font-weight:600;border-bottom:2px solid var(--g-acc);padding-bottom:2px}
.lv-gal__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4cqi;align-content:start}
.lv-gal__g i{display:block;aspect-ratio:1/1;border-radius:1.6cqi;background:#DDD5C8 url("../photos/anim-livrer-grille.webp") no-repeat;background-size:300% 300%;
  background-position:calc(var(--c) * 50%) calc(var(--l) * 50%);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1.2)}

/* Petits téléphones (relais, cadre étroit) : la première rangée de la grille
   doit rester entière au-dessus des réglages. Les moments laissent la place
   sous 335px de cadre ; la barre d'adresse de la page aussi sous 300px (le
   lien du message montre déjà l'adresse). */
@container mock (max-width:334px){.lv-tel .lv-gal__tabs{display:none}}
@container mock (max-width:299px){.lv-tel__adr{display:none}}

/* La copie de la couverture qui vole de l'éditeur au téléphone (livrer.js). */
.lv-fant{position:absolute;z-index:6;margin:0;border-radius:6px;transform-origin:50% 50%;pointer-events:none;will-change:transform;
  box-shadow:0 28px 54px -22px rgba(20,12,6,.6),0 0 0 1px rgba(255,255,255,.4)}

/* ── La messagerie du photographe (pas Picktur) ── */
.lv-msg{position:absolute;z-index:5;left:max(var(--m),calc(50% - 160px));bottom:8px;width:min(320px,calc(100cqw - 2 * var(--m)));overflow:hidden;
  background:#fff;border-radius:12px;box-shadow:0 26px 56px -22px rgba(20,12,6,.5),0 0 0 1px rgba(26,21,16,.1);
  font-size:12.5px;line-height:1.36;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:50% 100%;
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .45s}
.lv-msg__br{position:relative;display:flex;align-items:center;justify-content:center;height:22px;padding:0 10px;background:#F3F0EA;border-bottom:1px solid var(--line)}
.lv-msg__br>i{position:absolute;top:7px;width:7px;height:7px;border-radius:50%;background:#DDD6C9}
.lv-msg__br>i:nth-child(1){left:9px}.lv-msg__br>i:nth-child(2){left:20px}.lv-msg__br>i:nth-child(3){left:31px}
.lv-msg__br>span{font-size:12px;font-weight:600;color:var(--soft)}
.lv-msg__a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 4px 12px;border-bottom:1px solid var(--line)}
.lv-msg__dest{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--soft)}
.lv-msg__dest b{color:var(--ink);font-weight:600}
.lv-msg__env{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px 0 10px;border-radius:100px;background:var(--ink);color:#fff;
  font-size:12.5px;font-weight:600;transition:transform .15s ease}
.lv-msg__env svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lv-msg__env.pr{transform:scale(.92)}
.lv-msg__t{padding:6px 12px 8px;line-height:1.32}
.lv-msg__lien{color:#B04E00;text-decoration:underline;text-decoration-color:rgba(176,78,0,.35);text-underline-offset:2px;overflow-wrap:anywhere}
.lv-msg__lien b{font-weight:600}

/* Le curseur et l'anneau du clic (pilotés par livrer.js). */
.lv-fl__cur{position:absolute;left:0;top:0;z-index:8;width:24px;height:24px;fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;opacity:0;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.lv-fl__clic{position:absolute;left:0;top:0;z-index:7;width:40px;height:40px;border-radius:50%;border:2px solid var(--acc);opacity:0;pointer-events:none}

/* ── Relais (cadre étroit, par défaut) ──
   La colonne de l'éditeur occupe le cadre : l'éditeur centré au-dessus des
   réglages. État final : le téléphone a pris sa place ; il monte, opaque,
   de sous les réglages, pendant que l'éditeur s'efface (une fois la copie
   de sa couverture partie). Le bas du téléphone passe derrière les réglages. */
.lv-fl .lv-ed{opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:background-color .4s ease,opacity .3s ease .25s,transform .5s cubic-bezier(.2,.8,.2,1) .25s,visibility 0s linear .55s}
.lv-fl.js:not(.b2) .lv-ed{opacity:1;visibility:visible;transform:none;transition:background-color .4s ease,opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.lv-fl.js:not(.b2) .lv-tel{transform:translateY(calc(100cqh + 20px))}
.lv-tel__bul{transition-delay:.34s}
/* Un fondu au ras des réglages : le téléphone continue dessous. */
.lv-gauche::after{content:'';position:absolute;left:0;right:0;bottom:var(--ph);z-index:2;height:18px;pointer-events:none;
  background:linear-gradient(rgba(234,226,213,0),rgba(234,226,213,.85))}

/* ── Côte à côte (cadre large) ── */
@container mock (min-aspect-ratio:13/10) and (min-width:440px){
  .lv-fl{--m:clamp(12px,2.4cqw,24px);--ph:72px;
    /* Le téléphone tient en entier dans la hauteur ; sur un cadre bas, il garde
       au moins 168px de large et le bord du cadre le coupe en bas. */
    --tw:max(min(calc((100cqh - 2 * var(--m)) / 2.1),36cqw,290px),min(36cqw,168px));
    --ew:min(calc(100cqw - var(--tw) - 3 * var(--m)),calc((100cqh - 2 * var(--m) - var(--ph) - 34px) * 16 / 9))}
  .lv-gauche{inset:var(--m) auto var(--m) var(--m);width:var(--ew);justify-content:center}
  .lv-gauche::after{display:none}
  .lv-fl .lv-ed,.lv-fl.js:not(.b2) .lv-ed{width:100%;margin:0;border-radius:12px 12px 0 0;opacity:1;visibility:visible;transform:none;
    box-shadow:0 0 0 1px rgba(43,24,16,.08);transition:background-color .4s ease}
  html:not(.js) .lv-fl .lv-ed{border-radius:12px;box-shadow:0 0 0 1px rgba(43,24,16,.08),0 30px 60px -34px rgba(43,24,16,.5)}
  /* Les réglages forment le bas de la fenêtre de l'éditeur, avec leurs libellés. */
  .lv-pan{gap:0 10px;padding:0 10px;border-radius:0 0 12px 12px;box-shadow:0 0 0 1px rgba(43,24,16,.08),0 30px 60px -34px rgba(43,24,16,.5)}
  .lv-pan__l{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
    font:600 12px/1 var(--m);letter-spacing:.1em;color:var(--soft);white-space:nowrap}
  .lv-pan__g+.lv-pan__g{padding-left:10px}
  .lv-pan__sw{gap:6px}
  .lv-pan__ly,.lv-pan__ft{gap:6px}
  .lv-pan__sw button{width:28px;height:28px}
  .lv-pan__ly button{width:36px;height:30px}
  .lv-pan__ft button{height:30px;min-width:38px;padding:0 7px;font-size:16px}
  .lv-tel{left:auto;right:var(--m);top:max(var(--m),calc((100cqh - var(--tw) * 2.1) / 2))}
  .lv-fl.js:not(.b2) .lv-tel{opacity:1;transform:none}
  .lv-tel__bul{transition-delay:0s}
  /* La messagerie : en bas de la colonne de l'éditeur, contre son bord droit
     (le titre de la couverture, à gauche, reste visible). */
  .lv-msg{left:auto;right:calc(100cqw - var(--m) - var(--ew) + 10px);bottom:6px;width:min(270px,calc(var(--ew) - 20px))}
}
/* Fenêtre d'éditeur étroite : les trois groupes ne tiennent plus côte à côte,
   la police cède la place. */
@container mock (min-aspect-ratio:13/10) and (min-width:440px) and (max-width:649px){
  .lv-pan__g--t{display:none}
}
@container mock (min-aspect-ratio:13/10) and (min-width:440px) and (max-width:559px){
  .lv-pan__sw button{width:24px;height:24px}
  .lv-pan__ly button{width:32px;height:28px}
}

/* ── État de départ (.js) et étapes ── */
/* Le titre : lettres cachées, puis écrites une à une (a1). */
.lv-fl.js:not(.a1) .lv-ed .lv-cov__ttl .ch{opacity:0}
.lv-fl.js.a1 .lv-ed .lv-cov__ttl .ch{animation:lv-lettre 1ms linear calc(var(--k) * 46ms) both}
.lv-fl.js.a1 .lv-ed .lv-cov__ttl .ch::after{content:'';position:absolute;right:-.09em;top:.1em;bottom:.02em;width:max(2px,.07em);border-radius:1px;background:var(--acc);
  opacity:0;animation:lv-caret 46ms steps(1,end) calc(var(--k) * 46ms)}
.lv-fl.js.a1 .lv-ed .lv-cov__ttl .ch:last-child::after{animation:lv-caret-fin 760ms steps(1,end) calc(var(--k) * 46ms)}
@keyframes lv-lettre{from{opacity:0}to{opacity:1}}
@keyframes lv-caret{from,to{opacity:1}}
@keyframes lv-caret-fin{0%,30%,62%{opacity:1}15%,46%,78%,100%{opacity:0}}
/* Filet, date, bouton (a2). */
.lv-ed .lv-cov__acc,.lv-ed .lv-cov__dt,.lv-ed .lv-cov__cta{transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1),background-color .4s ease,color .4s ease}
.lv-ed .lv-cov__dt{transition-delay:.08s}
.lv-ed .lv-cov__cta{transition-delay:.16s,.16s,0s,0s}
.lv-fl.js:not(.a2) .lv-ed .lv-cov__acc,.lv-fl.js:not(.a2) .lv-ed .lv-cov__dt,.lv-fl.js:not(.a2) .lv-ed .lv-cov__cta{opacity:0;transform:translateY(8px)}
.lv-fl.js:not(.a2) .lv-ed .lv-cov__acc{transform:scaleX(.2);transform-origin:0 50%}
.lv-fl.js.m-centree:not(.a2) .lv-ed .lv-cov__acc{transform-origin:50% 50%}
/* « Copier le lien » (b1 : « Lien copié »). */
.lv-fl.js:not(.b1) .lv-ed__cp1{opacity:1}
.lv-fl.js:not(.b1) .lv-ed__cp2{opacity:0;transform:scale(.9)}
/* La messagerie s'ouvre (c1), puis part (c2) vers le téléphone. */
.lv-fl.js.c1 .lv-msg{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.lv-fl.js.c1.c2 .lv-msg{opacity:0;visibility:hidden;transform:translate(14px,-8px) scale(.96);
  transition:opacity .28s ease,transform .4s cubic-bezier(.4,0,.2,1),visibility 0s linear .4s}
/* Le message (b2), la page (b3), la couverture posée et la grille (b4). */
.lv-fl.js:not(.b2) .lv-tel__bul{opacity:0;transform:translateY(14px) scale(.94)}
.lv-fl.js:not(.b3) .lv-tel__pg{opacity:0;transform:translateY(30px)}
.lv-fl.js:not(.b4) .lv-tel .lv-cov{opacity:0}
.lv-fl.js:not(.b4) .lv-tel .lv-gal__g i{opacity:0;transform:scale(.88)}
.lv-gal__g i:nth-child(2){transition-delay:.04s}
.lv-gal__g i:nth-child(3){transition-delay:.08s}
.lv-gal__g i:nth-child(4){transition-delay:.12s}
.lv-gal__g i:nth-child(5){transition-delay:.16s}
.lv-gal__g i:nth-child(6){transition-delay:.2s}
.lv-gal__g i:nth-child(7){transition-delay:.24s}
.lv-gal__g i:nth-child(8){transition-delay:.28s}
.lv-gal__g i:nth-child(9){transition-delay:.32s}

/* ── 03 · Accès client des mariés ─────────────────────────────────────────── */
.lv-cl{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:#FBF8F2;color:var(--ink);
  font-family:var(--s);font-size:max(12px,min(1.9cqw,15px));line-height:1.3;letter-spacing:-.01em;text-align:left;-webkit-user-select:none;user-select:none}
.lv-cl *{box-sizing:border-box}

/* Barre du navigateur : l'adresse reste celle du photographe. */
.lv-cl__br{flex:none;display:flex;align-items:center;gap:7px;height:clamp(30px,7.5cqh,42px);padding:0 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.lv-cl__br>i{flex:none;width:10px;height:10px;border-radius:50%;background:#E0D9CC}
.lv-cl__adr{display:block;min-width:0;margin-left:8px;padding:5px 12px;border:1px solid var(--line);border-radius:100px;background:#fff;font:500 12px/1.2 var(--m);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-cl__adr b{color:var(--ink);font-weight:600}
.lv-cl__adr svg{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;fill:#0F7D46;color:#0F7D46}

/* Barre de la page : les mariés, leur accès client. */
.lv-cl__top{flex:none;display:flex;align-items:center;gap:10px;min-width:0;height:clamp(36px,8.6cqh,50px);padding:0 4.4cqw;border-bottom:1px solid #E8E0D4;white-space:nowrap}
.lv-cl__ret{flex:none;color:var(--soft)}
.lv-cl__top b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:max(13px,min(2.1cqw,17px));font-weight:600;letter-spacing:-.02em}
.lv-cl__lab{flex:none;display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--acc-t)}
.lv-cl__lab::before{content:'';width:4px;height:4px;border-radius:50%;background:#C9BFB0}

/* En-tête : bascule, titre, deux boutons. */
.lv-cl__hero{flex:none;padding:clamp(10px,2.8cqh,22px) 4.4cqw 0}
.lv-cl__sw{display:inline-flex;gap:2px;padding:3px;border:1px solid #E8E0D4;border-radius:8px;background:#fff}
.lv-cl__sw span{padding:5px 10px;border-radius:6px;font:600 12px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:#3D342C}
.lv-cl__sw span.on{background:var(--ink);color:#fff}
.lv-cl__h{margin:clamp(8px,2.2cqh,16px) 0 0;font-size:max(20px,min(5.1cqw,8cqh,40px));font-weight:400;line-height:1.02;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.lv-cl__h span{white-space:nowrap}
.lv-cl__h em{font-style:normal;font-weight:500;color:var(--acc-t)}
.lv-cl__bts{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,2.6cqh,18px)}
.lv-cl__b{position:relative;display:inline-flex;align-items:center;gap:7px;height:max(32px,min(7cqh,40px));padding:0 max(10px,1.8cqw);border-radius:10px;
  font-size:max(12px,min(1.85cqw,14px));font-weight:500;line-height:1;white-space:nowrap}
.lv-cl__b svg{flex:none;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lv-cl__b--1{border:1px solid #DDD3C5;color:var(--ink)}
.lv-cl__b--1 svg circle{fill:#FBF8F2}
/* Texte encre sur l'orange : 6,6:1 (le blanc n'y fait que 2,7:1). */
.lv-cl__b--2{background:var(--acc);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(249,119,8,.3),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s ease}
.lv-cl__b--2 svg{fill:currentColor;stroke:none}
.lv-cl__b--2.pr{transform:scale(.94)}
.lv-cl__onde{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid var(--acc);opacity:0;pointer-events:none}
.lv-cl__b--2.onde .lv-cl__onde{animation:lv-onde .6s ease-out}
@keyframes lv-onde{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(1.8)}}

/* La grille notée : la note de chaque photo, comme dans l'application
   (vert au-dessus de 80, jaune entre 40 et 60), et la coche des retenues. */
.lv-cl__g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:max(7px,1.3cqw);
  padding:clamp(12px,3cqh,22px) 4.4cqw clamp(12px,3.4cqh,26px)}
.lv-cl__t{position:relative;min-width:0;min-height:0;border-radius:8px;background:#EDE8DD center/cover no-repeat;
  transition:box-shadow .35s ease;transition-delay:calc(var(--k,0) * 110ms)}
.lv-cl__t.sel{box-shadow:0 0 0 2px #FBF8F2,0 0 0 4px #16A34A}
.lv-cl__n{position:absolute;left:6px;top:6px;padding:4px 6px;border:1px solid;border-radius:6px;font:700 12px/1 var(--m);letter-spacing:.02em;
  transition:opacity .3s ease,transform .3s ease;transition-delay:calc(var(--i,0) * 70ms)}
.lv-cl__n.n-h{background:#DCFCE7;border-color:#BBF7D0;color:#166534}
.lv-cl__n.n-m{background:#FEF9C3;border-color:#FDE68A;color:#854D0E}
.lv-cl__ok{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;opacity:0;transform:scale(.4);
  background:#15803D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.4);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1.35);transition-delay:calc(var(--k,0) * 110ms)}
.lv-cl__t.sel .lv-cl__ok{opacity:1;transform:none}

/* La pastille : la sélection des mariés remonte chez le photographe. */
.lv-cl__pas{position:absolute;left:50%;bottom:clamp(12px,4.2cqh,28px);z-index:4;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 24px);
  margin:0;padding:9px 15px 9px 12px;border-radius:100px;background:#0F7D46;color:#fff;font-size:max(12px,min(1.8cqw,15px));font-weight:600;line-height:1.2;white-space:nowrap;
  transform:translateX(-50%);box-shadow:0 18px 40px -14px rgba(10,50,30,.6);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.lv-cl__pas i{flex:none;width:8px;height:8px;border-radius:50%;background:#7BE8B0;box-shadow:0 0 0 3px rgba(123,232,176,.28)}

/* Le curseur qui appuie sur « Générer la sélection » (piloté par livrer.js). */
.lv-cl__cur{position:absolute;left:0;top:0;z-index:5;width:24px;height:24px;fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;opacity:0;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))}

/* Avant la démo (JavaScript actif) : notes éteintes, rien de retenu, pas de
   pastille. e1 allume les notes, e3 coche la sélection, e4 pose la pastille.
   Sans JavaScript ou avec « réduire les animations » : l'état final. */
.lv-cl--js:not(.e1) .lv-cl__n{opacity:0;transform:translateY(-4px) scale(.9)}
.lv-cl--js:not(.e3) .lv-cl__t.sel{box-shadow:none}
.lv-cl--js:not(.e3) .lv-cl__t.sel .lv-cl__ok{opacity:0;transform:scale(.4)}
.lv-cl--js:not(.e4) .lv-cl__pas{opacity:0;transform:translate(-50%,140%)}
.lv-cl--net,.lv-cl--net *{transition:none!important;animation:none!important}

/* Cadre étroit (téléphone) : grille 3 × 2, pas de pastilles de fenêtre. */
@container mock (max-width:560px){
  .lv-cl__br>i{display:none}
  .lv-cl__adr{margin-left:0}
  .lv-cl__g{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lv-cl__t:nth-child(n+7){display:none}
  .lv-cl__bts{gap:6px}
  .lv-cl__b{gap:6px;padding:0 10px}
}
/* Cadre bas (moins de 380px de haut) : la bascule laisse la place au titre. */
@container mock (max-height:380px){
  .lv-cl__sw{display:none}
  .lv-cl__h{margin-top:0}
}

@media(prefers-reduced-motion:reduce){
  .lv-cl,.lv-cl *,.lv-fl,.lv-fl *,.lv-fl *::before,.lv-fl *::after{transition:none!important;animation:none!important}
}