/* ═══════════════════════════════════════════════════════════════════════════
   LA CHARTE AU MARBRE PREMIUM — Giri Family                    [2026-08-26]

   Maha : « fais en sorte que la charte soit dans le thème marbre premium, elle
   est moche au possible ».

   ── CE QUI N'ALLAIT PAS (mesuré au navigateur, pas supposé) ──────────────
   ⛔ `.giri-charter-actions` était en `position:fixed; bottom:0; width:720px`
      sur une carte de 1176 px : la barre « J'accepte / Je rejoins l'espace »
      FLOTTAIT par-dessus le texte et coupait la dernière valeur en plein mot
      (« La gratitude circule naturell… »). Décalée, et elle mangeait le contenu.
   ⛔ La carte était un aplat crème plat : aucune pierre, alors que la maison a
      UNE texture, la même partout.
   ⛔ Sept emojis pleine couleur (🌿🔥💕🔒🌟🌱🌊) hurlaient sur du marbre.
   ⛔ Le bouton d'entrée était un dégradé jaune à deux arrêts — pas l'or Giri.

   ── LA PIERRE ───────────────────────────────────────────────────────────
   `marbre-affiliation.webp`, la texture de la maison (skill `bouton`) — jamais
   des veines CSS, qui rendent un beige plat à l'écran. Là où l'on LIT, elle se
   voile : un voile de lait par-dessus, sinon les veines passent sous le texte.

   ⛔ Chargée APRÈS le <style> de la page, sinon un CSS plus tardif l'écrase.
   ⛔ Bumper ?v= à chaque retouche : Cloudflare cache une semaine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. LE FOND — la pierre, voilée pour qu'on lise dessus ═══════════════ */
html body .giri-charter-gate,
html body .giri-charter-view{
  background:
    linear-gradient(180deg, rgba(28,20,10,.62), rgba(20,14,7,.72)),
    url('/css/textures/marbre-affiliation.webp') center center / cover no-repeat !important;
  background-attachment:scroll !important;   /* fixed saccade sur mobile */
  padding:clamp(14px, 3vw, 30px) !important;
}

/* ═══ 2. LA CARTE — de la pierre, pas un aplat crème ═════════════════════ */
html body .giri-charter-card{
  background:
    linear-gradient(180deg, rgba(255,253,248,.955), rgba(253,250,242,.925)),
    url('/css/textures/marbre-affiliation.webp') center center / cover no-repeat !important;
  border:1px solid rgba(184,142,44,.42) !important;
  border-radius:20px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 60px rgba(30,20,6,.42),
    0 0 0 1px rgba(212,175,55,.14) !important;
  /* ⛔ LA PLACE DE LA BARRE : elle est en position:fixed et recouvrait la fin
     du texte. On lui réserve sa hauteur ici — une barre qui flotte doit
     toujours avoir son creux réservé dessous, sinon elle mange une phrase. */
  padding-bottom:clamp(180px, 22vh, 210px) !important;
}

/* ═══ 3. LE TITRE — Cormorant, l'encre profonde de la maison ═════════════ */
html body .giri-charter-head h2,
html body .giri-charter-card h2{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:clamp(30px, 4vw, 40px) !important;
  font-weight:700 !important; line-height:1.15 !important;
  color:#241d12 !important; -webkit-text-fill-color:#241d12 !important;
}
html body .giri-charter-ver{
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:#7a5f1a !important; -webkit-text-fill-color:#7a5f1a !important;
  background:rgba(255,253,247,.8) !important;
  border:1px solid rgba(184,142,44,.4) !important;
  border-radius:999px !important; padding:5px 12px !important;
}
html body .giri-charter-preamble{
  font-size:16.5px !important; line-height:1.62 !important;
  color:#4a3d28 !important; -webkit-text-fill-color:#4a3d28 !important;
}

/* ═══ 4. LES SEPT REPÈRES — des cartes de marbre, pas des post-it ════════ */
html body .giri-charter-list > *{
  background:
    linear-gradient(180deg, rgba(255,253,248,.9), rgba(250,245,234,.86)),
    url('/css/textures/marbre-affiliation.webp') center center / cover no-repeat !important;
  border:1px solid rgba(184,142,44,.3) !important;
  border-radius:15px !important;
  box-shadow:0 1px 3px rgba(120,95,45,.09), 0 6px 18px rgba(120,95,45,.07) !important;
  padding:15px 16px !important;
}
/* le filet de feuille d'or sur l'arête haute — le geste de la maison */
html body .giri-charter-list > *{ position:relative !important; overflow:hidden !important; }
html body .giri-charter-list > *::after{
  content:'' !important; position:absolute !important;
  left:14px !important; right:14px !important; top:0 !important; height:1.5px !important;
  background:linear-gradient(90deg,
    rgba(201,151,27,0) 0%, rgba(240,215,143,.85) 18%,
    rgba(183,141,44,.95) 50%, rgba(240,215,143,.85) 82%, rgba(201,151,27,0) 100%) !important;
  pointer-events:none !important;
}
/* ⛔ L'emoji garde son sens — on ne le supprime pas, on cesse de le laisser
   crier : posé dans un médaillon ivoire, à peine désaturé. */
/* ⛔ LA CLASSE : les puces des sept repères sont `.giri-charter-pic` —
   `.giri-charter-icon` est l'étoile du TITRE. Ma première règle visait la
   mauvaise, et les emojis criaient encore. Vu à l'écran, pas déduit. */
html body .giri-charter-list .giri-charter-pic{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:38px !important; height:38px !important; flex:0 0 38px !important;
  border-radius:50% !important; font-size:18px !important; line-height:1 !important;
  background:linear-gradient(152deg,#fdf6e4 0%,#f4e7c8 62%,#fbf3dd 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(186,150,74,.5), inset 0 1px 0 rgba(255,255,255,.7),
             0 1px 3px rgba(120,95,45,.16) !important;
  filter:saturate(.78) contrast(.94) !important;
}
/* la puce et le texte sur la même ligne d'appui */
html body .giri-charter-list li{ align-items:flex-start !important; gap:13px !important; }

html body .giri-charter-icon{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:36px !important; height:36px !important; margin-bottom:9px !important;
  border-radius:50% !important; font-size:17px !important; line-height:1 !important;
  background:linear-gradient(152deg,#fdf6e4 0%,#f4e7c8 62%,#fbf3dd 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(186,150,74,.5), inset 0 1px 0 rgba(255,255,255,.7),
             0 1px 3px rgba(120,95,45,.16) !important;
  filter:saturate(.82) !important;
}
html body .giri-charter-list h3,
html body .giri-charter-list strong{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:18.5px !important; font-weight:700 !important; line-height:1.2 !important;
  color:#241d12 !important; -webkit-text-fill-color:#241d12 !important;
}
html body .giri-charter-list p{
  font-size:14.5px !important; line-height:1.5 !important;
  color:#544636 !important; -webkit-text-fill-color:#544636 !important;
}

/* ═══ 5. L'ENGAGEMENT — le mot qui compte, sur son parchemin ═════════════ */
html body .giri-charter-foot{
  background:rgba(250,242,222,.72) !important;
  border:1px solid rgba(184,142,44,.34) !important;
  border-left:3px solid rgba(184,142,44,.75) !important;
  border-radius:13px !important;
  padding:14px 16px !important;
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:16px !important; font-style:italic !important; line-height:1.55 !important;
  color:#54452a !important; -webkit-text-fill-color:#54452a !important;
}
html body .giri-charter-intention label{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:16.5px !important; color:#3c3020 !important; -webkit-text-fill-color:#3c3020 !important;
}
html body .giri-charter-intention input{
  background:rgba(255,254,249,.96) !important;
  border:1px solid rgba(184,142,44,.42) !important;
  border-radius:12px !important; min-height:50px !important;
  color:#2b2318 !important;
}
html body .giri-charter-intention input:focus{
  outline:none !important; border-color:rgba(184,142,44,.85) !important;
  box-shadow:0 0 0 3px rgba(201,151,27,.16) !important;
}

/* ═══ 6. LA BARRE DU BAS — elle ne mange plus le texte ═══════════════════ */
/* ⛔ ANCRAGE : la règle d'origine est `.giri-charter-gate .giri-charter-actions`
   avec !important partout (spécificité 0,2,0). `html body .giri-charter-actions`
   (0,1,2) perdait — mesuré : la barre restait à 720 px et recouvrait le texte.
   On reprend le MÊME ancrage, préfixé, pour passer devant. */
/* ⛔ TROIS feuilles se disputent cette barre au MÊME ancrage (bloc-giri-premium,
   mobile-verite, et une troisième qui posait un dégradé transparent → opaque).
   À spécificité égale, c'est l'ordre de chargement qui tranche, et il n'est pas
   fiable. On double la classe : plus personne ne passe devant. */
html body .giri-charter-gate .giri-charter-actions.giri-charter-actions{
  left:50% !important; right:auto !important;
  transform:translateX(-50%) !important;
  width:min(1180px, calc(100% - 28px)) !important;
  max-width:1180px !important;
  box-sizing:border-box !important;
  padding:15px clamp(16px, 3vw, 30px) calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius:18px 18px 0 0 !important;
  border-top:1px solid rgba(184,142,44,.5) !important;
  /* opaque : on ne lit pas un engagement au travers d'un texte */
  background:
    linear-gradient(180deg, rgba(255,253,248,.985), rgba(252,247,236,.985)),
    url('/css/textures/marbre-affiliation.webp') center center / cover no-repeat !important;
  box-shadow:0 -6px 26px rgba(40,28,8,.22) !important;
  gap:12px !important;
}
html body .giri-charter-gate .giri-charter-actions.giri-charter-actions .giri-charter-check{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:17px !important; color:#3c3020 !important; -webkit-text-fill-color:#3c3020 !important;
  min-height:44px !important;   /* une vraie cible pour le doigt */
}
html body .giri-charter-check input[type=checkbox]{
  width:24px !important; height:24px !important; accent-color:#b78d2c !important;
}

/* ═══ 7. LE LINGOT — la recette « L'Affilié », sans l'améliorer ══════════ */
html body .giri-charter-gate .giri-charter-accept,
html body #giriCharterAccept{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-size:21px !important; font-weight:500 !important; letter-spacing:.2px !important;
  font-variant-numeric:lining-nums !important;
  color:#3a2708 !important; -webkit-text-fill-color:#3a2708 !important;
  padding:18px 34px !important; min-height:58px !important;
  border-radius:16px !important;
  border:1px solid rgba(160,120,64,.55) !important;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%) !important;
  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) !important;
  text-shadow:0 1px 1px rgba(60,40,4,.28) !important;
}
html body .giri-charter-gate .giri-charter-accept:hover:not(:disabled){
  transform:translateY(-2px) !important;
  box-shadow:0 4px 10px rgba(74,48,12,.16), 0 14px 32px rgba(74,48,12,.24),
             inset 0 1px 0 rgba(255,255,255,.6) !important;
}
html body .giri-charter-gate .giri-charter-accept:disabled{ opacity:.5 !important; transform:none !important; }

/* ═══ 8. Au doigt ════════════════════════════════════════════════════════ */
@media (max-width:700px){
  html body .giri-charter-card{ padding-bottom:clamp(190px, 26vh, 230px) !important; }
  html body .giri-charter-gate .giri-charter-accept,
html body #giriCharterAccept{ width:100% !important; font-size:19px !important; }
  html body .giri-charter-head h2{ font-size:27px !important; }
}
@media (prefers-reduced-motion:reduce){
  html body .giri-charter-gate .giri-charter-accept,
html body #giriCharterAccept{ transition:none !important; }
}


/* ═══ 9. LA CASE À COCHER — elle était sur un fond NOIR au milieu du marbre ══
   Un correctif du 14/08 lui avait donné `rgba(11,10,6,.94)` pour qu'on ne lise
   plus le texte au travers. Le besoin était juste : c'est la COULEUR qui ne
   l'est plus une fois la barre passée au marbre. Opaque, mais en pierre. */
html body .giri-charter-gate .giri-charter-actions.giri-charter-actions .giri-charter-check{
  background:rgba(255,253,247,.92) !important;
  border:1px solid rgba(184,142,44,.4) !important;
  border-radius:13px !important;
  padding:12px 14px !important;
  color:#3c3020 !important; -webkit-text-fill-color:#3c3020 !important;
}
/* la place réservée sous la liste, en plus de celle de l'enveloppe */
html body .giri-charter-gate .giri-charter-list,
html body .giri-charter-view .giri-charter-list{
  padding-bottom:clamp(150px, 20vh, 200px) !important;
}


/* ═══ 10. LE MODE LECTURE — la même charte, sans la barre d'engagement ════
   `_openCharterView()` rouvre la charte à qui l'a déjà acceptée (bouton
   « 📜 Charte de la communauté »). Elle mérite la même pierre : c'est le même
   texte, il ne devient pas moins beau parce qu'on le relit. */
html body .giri-charter-view .giri-charter-card{
  padding-bottom:clamp(28px, 4vw, 40px) !important;   /* pas de barre ici */
}
html body .giri-charter-view .giri-charter-list{ padding-bottom:0 !important; }
html body .giri-charter-view .giri-charter-close-x{
  background:linear-gradient(152deg,#fdf6e4 0%,#f4e7c8 62%,#fbf3dd 100%) !important;
  border:1px solid rgba(184,142,44,.5) !important;
  color:#6b5426 !important; -webkit-text-fill-color:#6b5426 !important;
  width:46px !important; height:46px !important;
  box-shadow:0 2px 8px rgba(80,60,20,.24) !important;
}