/* ============================================================
   LE FIL D'OR — la feuille. Marbre lumineux, or de la maison.
   ⛔ Aucune boule dorée dessinée : la sphère d'or EST le logo Giri.
   ============================================================ */

:root{
  --clair:#fdfaf2; --pierre:#f4ecda; --or:#c9971b; --or-vif:#e8b93a; --or-lum:#f7e3a4;
  --or-profond:#8a6512; --or-texte:#7a5a10; --encre:#221d15; --texte:#443c31; --doux:#6a6154;
  --trait:rgba(160,120,64,.30); --trait-fort:rgba(160,120,64,.55);
  --logo:url('/img/golden-ball.png');
  --marbre:url('/img/marbre.webp');
  --ombre:0 2px 6px rgba(74,48,12,.10), 0 12px 30px rgba(74,48,12,.13);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --haut:env(safe-area-inset-top,0px); --bas:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:linear-gradient(168deg,#fffdf8 0%,#fdfaf2 46%,#f4ecda 100%);min-height:100%}
body{
  margin:0;background:transparent;             /* ⛔ jamais opaque : ::before est en z-index négatif */
  color:var(--texte);font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:var(--marbre) center center / cover no-repeat;
  background-attachment:scroll;                /* fixed saccade sur mobile */
  filter:contrast(1.16) saturate(1.12);opacity:.9;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,253,248,.34),rgba(255,252,245,.46));
}

h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--encre);margin:0 0 .5em;line-height:1.18;font-variant-numeric:lining-nums}
h1{font-size:clamp(30px,7vw,46px)} h2{font-size:clamp(23px,5vw,32px)} h3{font-size:20px}
a{color:var(--or-texte);text-decoration:none}
b,strong{color:var(--or-texte);font-weight:600}
.nums{font-variant-numeric:lining-nums}

/* ---------- LA MARQUE ---------- */
.boule{width:38px;height:38px;background:var(--logo) center/contain no-repeat;
  filter:drop-shadow(0 3px 7px rgba(120,88,20,.34));flex:0 0 auto}
.marque{display:flex;align-items:center;gap:11px}
.marque .nom{font-family:var(--serif);font-size:22px;color:var(--encre);letter-spacing:.01em}
.eyebrow{font:400 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#a98b45}

/* ---------- LES GESTES (skill bouton — recette exacte, ne pas réinventer) ---------- */
.g-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:.2px;color:#3a2708;
  padding:17px 34px;border-radius:16px;border:1px solid var(--trait-fort);
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  box-shadow:0 2px 6px rgba(74,48,12,.12),0 10px 26px rgba(74,48,12,.18),inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow:0 1px 1px rgba(60,40,4,.24);font-variant-numeric:lining-nums;
  transition:transform .16s ease,box-shadow .16s ease;
}
.g-btn:hover{transform:translateY(-2px);box-shadow:0 3px 9px rgba(74,48,12,.16),0 14px 34px rgba(74,48,12,.22),inset 0 1px 0 rgba(255,255,255,.6)}
.g-btn:active{transform:translateY(0)}
.g-btn[disabled]{opacity:.45;pointer-events:none}
.g-btn.creux{background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88));
  border-color:rgba(160,120,64,.45);color:#4a3520;font-family:var(--sans);font-size:16px;
  text-shadow:none;box-shadow:0 1px 3px rgba(74,48,12,.07)}
.g-btn.nu{background:none;border-color:transparent;box-shadow:none;color:var(--or-texte);
  font-family:var(--sans);font-size:15px;padding:12px 16px;text-shadow:none}
.g-btn.petit{font-size:16px;padding:12px 22px;border-radius:13px}
.g-btn.large{width:100%}
.g-btn.grave{background:linear-gradient(158deg,#f6ece4,#efe0d3);border-color:rgba(150,90,60,.4);
  color:#7d4425;font-family:var(--sans);font-size:15px;text-shadow:none;box-shadow:none}
@media(max-width:600px){.g-btn:not(.med):not(.petit):not(.nu){width:100%}}

/* ---------- LES MÉDAILLONS DU POUCE ---------- */
/* ⛔ le pouce a une hauteur PROPRE : sans elle, la boule d'or de 86 px passait
   sous la barre du bas et se retrouvait coupée à l'écran (vu, corrigé). */
.pouce{display:flex;align-items:center;justify-content:center;gap:18px;flex:0 0 auto;height:106px}
.med{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(160,120,64,.42);
  background:linear-gradient(158deg,rgba(255,253,249,.97),rgba(246,240,228,.93));
  box-shadow:0 3px 10px rgba(74,48,12,.14),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .15s ease,box-shadow .15s ease}
.med:active{transform:scale(.93)}
.med svg{width:26px;height:26px;display:block}
.med.majeur{width:86px;height:86px;border:0;box-shadow:none;
  background:var(--logo) center/contain no-repeat;filter:drop-shadow(0 5px 14px rgba(120,88,20,.4))}
.med.majeur:active{transform:scale(.94)}
.med[disabled]{opacity:.35;pointer-events:none}
.med .compte{position:absolute}

/* ---------- LES SURFACES ---------- */
.panneau{
  background:linear-gradient(180deg,rgba(255,253,248,.90),rgba(253,250,242,.84));
  border:1px solid var(--trait);border-radius:20px;box-shadow:var(--ombre);
  backdrop-filter:blur(3px)}
.voile{background:linear-gradient(180deg,rgba(255,253,248,.62),rgba(253,250,242,.58))}
.filet{height:1px;background:linear-gradient(90deg,transparent,var(--or),transparent);
  width:54px;margin:14px auto;opacity:.75}

/* ---------- LA CHARPENTE ---------- */
.entete{position:sticky;top:0;z-index:40;padding:calc(10px + var(--haut)) 16px 10px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,rgba(253,250,242,.94),rgba(253,250,242,.72) 70%,transparent);
  backdrop-filter:blur(8px)}
.scene{max-width:560px;margin:0 auto;padding:0 16px 96px;min-height:60vh}
.large-scene{max-width:1080px}

.barre{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  padding:6px 8px calc(6px + var(--bas));gap:2px;
  background:linear-gradient(180deg,rgba(253,250,242,.80),rgba(250,245,234,.97));
  border-top:1px solid var(--trait);backdrop-filter:blur(10px)}
.barre a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;
  font:400 11px/1 var(--sans);color:#8d8375;border-radius:12px;position:relative}
.barre a svg{width:23px;height:23px}
.barre a.on{color:var(--or-texte)}
.barre a.on svg{filter:drop-shadow(0 2px 4px rgba(160,120,40,.35))}
.pastille{position:absolute;top:4px;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:linear-gradient(135deg,#E8C078,#A07840);color:#2b1c04;
  font:600 10px/17px var(--sans);text-align:center;font-variant-numeric:lining-nums}

/* ---------- LE DECK ---------- */
/* La scène du deck se répartit en flex : plus aucune hauteur devinée à la soustraction. */
.scene-deck{display:flex;flex-direction:column;max-width:440px;margin:0 auto;padding:0 16px 0;
  height:calc(100dvh - var(--haut) - var(--bas) - 138px);min-height:420px}
.deck{position:relative;flex:1;min-height:0;margin:2px 0 0}
.carte{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#efe6d2;
  box-shadow:0 6px 20px rgba(74,48,12,.16),0 24px 60px rgba(74,48,12,.20);
  border:1px solid var(--trait);will-change:transform;touch-action:pan-y;user-select:none}
.carte .photo{position:absolute;inset:0;background-size:cover;background-position:center 22%;
  background-repeat:no-repeat}
/* ⛔ On FLOUTE, on ne coupe pas : le cadre est rempli par la même image en fond, jamais
   par un rognage du visage. (Deux coupes successives décapitaient les portraits.) */
.carte .fond-floute{position:absolute;inset:-24px;background-size:cover;background-position:center;
  filter:blur(26px) saturate(1.15) brightness(.92);transform:scale(1.08)}
.carte .ombre{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,4,.18) 0%,rgba(20,14,4,0) 26%,rgba(20,14,4,.34) 60%,rgba(16,11,3,.90) 100%)}
.carte .rubans{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px}
.carte .rubans i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.34)}
.carte .rubans i.on{background:linear-gradient(90deg,#F4D58A,#E8C078)}
.carte .dit{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 22px;color:#fff}
.carte .dit .qui{font-family:var(--serif);font-size:30px;line-height:1.1;
  text-shadow:0 2px 10px rgba(0,0,0,.5);font-variant-numeric:lining-nums}
.carte .dit .qui em{font-style:normal;opacity:.86;font-size:24px}
.carte .dit .ou{font-size:13.5px;opacity:.92;margin-top:4px;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.carte .dit .mots{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}
.carte .dit .mot{font-size:12px;padding:5px 11px;border-radius:11px;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(4px)}
.carte .dit .mot.fort{background:linear-gradient(135deg,rgba(244,213,138,.94),rgba(200,155,70,.92));
  color:#2b1c04;border-color:rgba(255,255,255,.5);font-weight:600}
.carte .verifie{display:inline-flex;vertical-align:middle;margin-left:7px}
.carte .verifie svg{width:19px;height:19px}
.carte .plus{position:absolute;right:14px;bottom:132px;z-index:6;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.34);display:grid;place-items:center;
  backdrop-filter:blur(6px)}
.carte .plus svg{width:19px;height:19px}

.tampon{position:absolute;top:34px;padding:9px 18px;border-radius:12px;font-family:var(--serif);
  font-size:26px;letter-spacing:.06em;opacity:0;pointer-events:none;text-transform:uppercase;
  border:2.5px solid;background:rgba(255,255,255,.14);backdrop-filter:blur(3px)}
.tampon.oui{left:22px;transform:rotate(-13deg);color:#F4D58A;border-color:#F4D58A;
  text-shadow:0 2px 8px rgba(0,0,0,.4)}
.tampon.non{right:22px;transform:rotate(13deg);color:#f2e3d6;border-color:#e6cbb4;
  text-shadow:0 2px 8px rgba(0,0,0,.4)}
.tampon.or{left:50%;top:42%;transform:translate(-50%,-50%);color:#fff;border-color:#F4D58A;
  background:linear-gradient(135deg,rgba(232,192,120,.88),rgba(160,120,64,.88));font-size:22px}

/* ---------- LES LISTES ---------- */
.ligne{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:16px;cursor:pointer;
  border:1px solid transparent;transition:background .15s}
.ligne:hover{background:rgba(255,253,248,.6);border-color:var(--trait)}
.ligne .vignette{width:56px;height:56px;border-radius:50%;flex:0 0 auto;background-size:cover;
  background-position:center;background-color:#efe6d2;box-shadow:0 2px 8px rgba(74,48,12,.16)}
.ligne .txt{flex:1;min-width:0}
.ligne .txt .n{font-family:var(--serif);font-size:19px;color:var(--encre)}
.ligne .txt .d{font-size:14px;color:var(--doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne .txt .d.gras{color:var(--encre);font-weight:600}

/* ---------- LA CONVERSATION ---------- */
.fil{display:flex;flex-direction:column;gap:8px;padding:14px 0 8px}
.bulle{max-width:78%;padding:11px 15px;border-radius:18px;font-size:15.5px;line-height:1.5;
  word-break:break-word;box-shadow:0 1px 3px rgba(74,48,12,.09)}
.bulle.eux{align-self:flex-start;background:rgba(255,253,248,.95);border:1px solid var(--trait);
  border-bottom-left-radius:6px;color:var(--texte)}
.bulle.moi{align-self:flex-end;color:#2b1c04;border-bottom-right-radius:6px;
  background:linear-gradient(135deg,#F4D58A,#E4BA75);border:1px solid var(--trait-fort)}
.bulle.retire{opacity:.5;font-style:italic}
.horodate{font-size:11px;color:#9c9280;text-align:center;margin:8px 0}
.ecrire{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;
  padding:10px 0 calc(10px + var(--bas));
  background:linear-gradient(180deg,transparent,rgba(250,245,234,.96) 24%)}
.ecrire textarea{flex:1;resize:none;max-height:120px;padding:12px 15px;border-radius:18px;
  border:1px solid var(--trait);background:rgba(255,253,248,.95);font:400 16px/1.45 var(--sans);
  color:var(--texte);outline:none}
.ecrire textarea:focus{border-color:var(--trait-fort)}
/* ---------- LA CONVERSATION TIENT LA HAUTEUR (31/08) ---------- */
/* ⛔ VU À L'ÉCRAN DE MAHA. Sur un grand écran, une conversation de trois
   messages laissait le champ d'écriture flotter AU MILIEU de la page, avec la
   moitié de l'écran en marbre vide dessous. Cause : `position:sticky;bottom:0`
   ne colle en bas que si le contenu dépasse DÉJÀ la fenêtre — sur téléphone
   c'était le cas, sur un écran d'ordinateur jamais. Une conversation doit
   occuper la hauteur, même quand elle est presque vide. */
.scene.conversation{display:flex;flex-direction:column;
  min-height:calc(100dvh - 96px - var(--haut) - var(--bas))}
.scene.conversation .fil{flex:0 0 auto;min-height:0;padding-bottom:14px}
/* ⛔ Le conseil portait un `style="margin-top:14px"` INLINE, qui bat toute
   règle de feuille : la marge automatique ne s'appliquait jamais et le bloc
   restait cloué en haut. L'inline a été retiré du gabarit. */
.scene.conversation .surete-pliable{margin-top:auto}
/* ⛔ TOUT le contenu se colle en bas — conseil de sûreté compris. Ne pousser
   que les messages laissait 400 px de marbre nu ENTRE le conseil resté en haut
   et la conversation restée en bas : deux îlots et un désert au milieu.
   La marge automatique sur le premier enfant se résorbe d'elle-même quand la
   conversation s'allonge, là où `justify-content:flex-end` rendrait les plus
   anciens messages inatteignables. */
.scene.conversation > *:first-child{margin-top:auto}
/* ⛔ Le champ montrait une barre de défilement dès le premier caractère : sa
   hauteur est pilotée par le script, il ne doit jamais défiler lui-même. */
.ecrire textarea{overflow-y:hidden}
.ecrire textarea:focus{border-color:var(--trait-fort)}
.envoyer{width:46px;height:46px;border-radius:50%;border:1px solid var(--trait-fort);flex:0 0 auto;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px rgba(74,48,12,.2)}
.envoyer svg{width:21px;height:21px}

/* ---------- LES FORMULAIRES ---------- */
label{display:block;font:500 13px/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:#9a8558;margin:20px 0 8px}
input[type=text],input[type=email],input[type=date],input[type=number],
input[type=password],input[type=search],input[type=tel],select,textarea{
  width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--trait);
  background:rgba(255,253,248,.9);font:400 16px/1.45 var(--sans);color:var(--texte);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--trait-fort);
  box-shadow:0 0 0 3px rgba(201,151,27,.12)}
textarea{min-height:110px;resize:vertical}
.aide{font-size:13.5px;color:var(--doux);margin-top:7px;line-height:1.5}
.choix{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.choix button{cursor:pointer;font:400 14.5px/1 var(--sans);padding:11px 16px;border-radius:13px;
  border:1px solid var(--trait);background:rgba(255,253,248,.85);color:var(--texte);
  transition:all .14s ease}
.choix button[aria-pressed=true]{color:#2b1c04;border-color:var(--trait-fort);font-weight:600;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 46%,#C9A253 100%);
  box-shadow:0 2px 8px rgba(74,48,12,.16)}
.cartouche{padding:15px 17px;border-radius:16px;border:1px solid var(--trait);
  background:rgba(255,253,248,.72);margin:12px 0}
.cartouche.doux{border-color:rgba(160,120,64,.2);background:rgba(255,252,244,.6)}

/* ---------- LES PHOTOS DU PROFIL ---------- */
.grille-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}
.case-photo{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px dashed var(--trait);background:rgba(255,253,248,.6);display:grid;place-items:center;
  cursor:pointer;background-size:cover;background-position:center}
.case-photo.pleine{border-style:solid}
.case-photo .attente{position:absolute;inset:0;background:rgba(34,29,21,.52);color:#fff;
  display:grid;place-items:center;text-align:center;font-size:11.5px;padding:8px;line-height:1.35}
.case-photo .oter{position:absolute;top:5px;right:5px;width:25px;height:25px;border-radius:50%;
  background:rgba(20,14,4,.62);display:grid;place-items:center;border:0;cursor:pointer}
.case-photo .oter svg{width:12px;height:12px}
.case-photo .plus-svg{width:26px;height:26px;opacity:.42}

/* ---------- LES ÉTATS ---------- */
.vide{text-align:center;padding:52px 22px}
.vide .boule{width:64px;height:64px;margin:0 auto 20px;opacity:.9}
.vide h3{font-size:24px;margin-bottom:9px}
.vide p{color:var(--doux);max-width:330px;margin:0 auto 20px;font-size:15.5px}
.fileuse{width:26px;height:26px;border:2.5px solid rgba(160,120,64,.22);border-top-color:var(--or);
  border-radius:50%;animation:tourne .8s linear infinite;margin:34px auto}
@keyframes tourne{to{transform:rotate(360deg)}}

.souffle{position:fixed;left:50%;bottom:calc(84px + var(--bas));transform:translateX(-50%);z-index:90;
  padding:13px 22px;border-radius:15px;max-width:min(92vw,420px);
  background:linear-gradient(158deg,rgba(255,253,248,.98),rgba(248,243,233,.96));
  border:1px solid var(--trait-fort);box-shadow:var(--ombre);font-size:14.5px;color:var(--texte);
  text-align:center;animation:monte .3s ease}
.souffle.dur{background:linear-gradient(158deg,#f8ece4,#f2e0d0);border-color:rgba(150,90,60,.4);color:#7d4425}
@keyframes monte{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- LE FIL QUI SE NOUE ---------- */
.noeud{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse at center,rgba(253,250,242,.97),rgba(244,236,218,.99))}
.noeud .dedans{text-align:center;max-width:400px;animation:monte .45s ease}
.noeud .deux{display:flex;align-items:center;justify-content:center;gap:-14px;margin-bottom:26px}
.noeud .deux .v{width:112px;height:112px;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid #fdfaf2;box-shadow:0 6px 22px rgba(74,48,12,.26)}
.noeud .deux .v:last-child{margin-left:-22px}
.noeud h2{font-size:34px;margin-bottom:8px}
.noeud p{color:var(--doux);margin-bottom:26px}

.modale{position:fixed;inset:0;z-index:110;display:grid;place-items:end center;
  background:rgba(34,29,21,.42);backdrop-filter:blur(2px);padding:0}
.modale .feuille{width:100%;max-width:520px;max-height:88dvh;overflow:auto;
  border-radius:24px 24px 0 0;padding:22px 20px calc(24px + var(--bas));
  background:linear-gradient(180deg,rgba(255,253,248,.99),rgba(252,248,238,.99));
  border:1px solid var(--trait);box-shadow:0 -8px 40px rgba(74,48,12,.22);animation:monte .28s ease}
.modale .poignee{width:44px;height:4px;border-radius:3px;background:var(--trait);margin:0 auto 16px}

.retour{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--or-texte);
  cursor:pointer;padding:9px 4px}
.retour svg{width:17px;height:17px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ⛔ une en-tête à max-width dessine une bande qui coupe le marbre :
   le fond reste pleine largeur, seul le contenu se centre. */
.entete.large{padding-left:0;padding-right:0}
.entete.large > .dedans{max-width:1000px;margin:0 auto;padding:0 16px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ⛔ un SVG inline sans dimension rend à 300×150 ou à 0 : le bouton réglages
   était INVISIBLE dans l'en-tête. Toute icône de bouton a une taille imposée. */
.g-btn svg{width:23px;height:23px;flex:0 0 auto}
.g-btn.nu svg{width:24px;height:24px}
.retour svg{width:17px;height:17px}

/* ---------- CORRECTIFS VUS À L'ÉCRAN (24/08) ---------- */
/* ⛔ .vignette n'existait que dans .ligne : hors d'une ligne (en-tête de conversation,
   fils muets) elle rendait un carré gris sans rayon. Classe autonome désormais. */
.vignette{width:56px;height:56px;border-radius:50%;flex:0 0 auto;background-size:cover;
  background-position:center;background-color:#efe6d2;box-shadow:0 2px 8px rgba(74,48,12,.16)}
/* ⛔ <button class="retour"> héritait du fond gris natif du navigateur. */
.retour{background:none;border:0;font-family:var(--sans)}
/* ⛔ le textarea du fil héritait du min-height:110px global : le champ mangeait l'écran. */
.ecrire textarea{min-height:0;height:46px}
/* Là où l'on écrit longtemps, on voit ce qu'on écrit. */
textarea#bio{min-height:170px}
/* Le conseil de sûreté se lit, puis se replie — il ne doit pas repousser la conversation. */
.surete-pliable summary{cursor:pointer;list-style:none;font:400 12px/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:#a98b45}
.surete-pliable summary::-webkit-details-marker{display:none}
.surete-pliable ul{margin:12px 0 0;padding-left:19px;font-size:14px;line-height:1.7}
/* Le souffle peut porter un geste (annuler) : il s'aligne alors sur une ligne. */
.souffle{display:flex;align-items:center;justify-content:center;gap:10px}

/* ---------- LA FICHE PROFIL (en savoir plus) — couverture + mots d'abord ---------- */
.fiche .couv{position:relative;height:46vh;min-height:290px;max-height:440px;border-radius:18px;
  overflow:hidden;background-size:cover;background-position:center 22%;background-repeat:no-repeat;margin-bottom:2px}
.fiche .couv[data-vide]{background:linear-gradient(135deg,#efe6d2,#e0d2bd)}
.fiche .couv-ombre{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,4,0) 42%,rgba(16,11,3,.84) 100%)}
.fiche .couv-dit{position:absolute;left:17px;right:17px;bottom:15px;color:#fff}
.fiche .couv-dit .qui{font-family:var(--serif);font-size:31px;line-height:1.08;
  text-shadow:0 2px 12px rgba(0,0,0,.55);font-variant-numeric:lining-nums}
.fiche .couv-dit .qui em{font-style:normal;opacity:.86;font-size:24px}
.fiche .couv-dit .ou{font-size:14px;opacity:.94;margin-top:3px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.fiche .couv-dit .verifie{display:inline-flex;vertical-align:middle;margin-left:6px}
.fiche .couv-dit .verifie svg{width:20px;height:20px}
.fiche .bloctitre{margin:22px 0 10px}
.fiche .invite .rep{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--encre)}
.fiche .faits{display:flex;flex-direction:column;margin-top:6px}
.fiche .fait{display:flex;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--trait)}
.fiche .fait span{color:var(--doux)}
.fiche .fait b{color:var(--encre);text-align:right}
.fiche .galerie{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fiche .galerie .vig{width:100%;aspect-ratio:3/4;border-radius:14px;background-size:cover;
  background-position:center 22%;background-repeat:no-repeat;border:1px solid var(--trait)}

/* ---------- LE RECADREUR — chacun cadre sa photo en 3:4 (26/08) ---------- */
.case-photo .recadrer{position:absolute;top:5px;left:5px;width:25px;height:25px;border-radius:50%;
  border:none;background:rgba(34,29,21,.5);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.case-photo .recadrer svg{width:13px;height:13px}
.modale.recadreur{place-items:center}
.recadreur .cadreur{max-width:440px;width:calc(100% - 28px);border-radius:24px;padding:22px 20px calc(20px + var(--bas))}
.recadreur .cadre{position:relative;width:100%;max-width:340px;margin:0 auto;border-radius:16px;overflow:hidden;
  background:#20180d;touch-action:none;cursor:grab;user-select:none;box-shadow:0 10px 34px rgba(74,48,12,.28)}
.recadreur .cadre:active{cursor:grabbing}
.recadreur .cadre img{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:none;max-width:none}
.recadreur .masque{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.recadreur .masque .tiers{position:absolute;background:rgba(255,255,255,.22)}
.recadreur .masque .h1{left:0;right:0;top:33.33%;height:1px}
.recadreur .masque .h2{left:0;right:0;top:66.66%;height:1px}
.recadreur .masque .v1{top:0;bottom:0;left:33.33%;width:1px}
.recadreur .masque .v2{top:0;bottom:0;left:66.66%;width:1px}
.recadreur .reglage{display:flex;align-items:center;gap:12px;margin:18px 4px 6px}
.recadreur .loupe{font-size:22px;color:var(--or-texte);width:20px;text-align:center;flex:0 0 auto}
.recadreur input[type=range]{flex:1;accent-color:#c9a24a;height:26px}