/* ══════════════════════════════════════════════════════════════════════
   LA PORTE DE DÉPART — résilier un abonnement Giri en trois gestes.
   Inspiré du parcours Canva (Maha, 25/09/2026) : ① la pause ② ce qu'on
   laisse ③ c'est fait + un mot. Marbre lumineux, or, Inter pour lire.
   ⛔ L215-1-1 : « Poursuivre la résiliation » est TOUJOURS aussi visible
   que l'autre choix, et le départ tient en trois clics depuis l'entrée.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --pierre:#fdfaf2; --lait:#fffdf8; --sable:#f4ecda;
  --or:#c9971b; --or-lum:#f7e3a4; --or-profond:#8a6512; --or-texte:#7a5a10;
  --encre:#241608; --texte:#3d3226; --doux:#5f5446;
  --filet:rgba(201,151,27,.30); --filet-fin:rgba(201,151,27,.16);
  --lire:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --titre:'Cormorant Garamond',Georgia,serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
html[data-taille="2"]{font-size:18.5px}
html[data-taille="3"]{font-size:21px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--texte);font-family:var(--lire);
  background:linear-gradient(158deg,#ffffff 0%,#fffdf7 42%,#fbf5e8 72%,#fffdf8 100%);
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased}
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fond svg{position:absolute;inset:0;width:100%;height:100%}
.fond::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,255,255,.95),transparent 70%),
             radial-gradient(ellipse 50% 40% at 92% 96%,rgba(247,227,164,.28),transparent 68%)}

.page{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:40px 20px 90px}
.entete{display:flex;align-items:center;gap:14px;margin:0 0 34px}
.entete .boule{width:44px;height:44px;background:url('/resilier/static/golden-ball.png') center/contain no-repeat;
  filter:drop-shadow(0 3px 6px rgba(138,101,18,.35))}
.entete .nom{font-family:var(--titre);font-size:1.6rem;font-weight:600;color:var(--encre);letter-spacing:.3px}
.entete .nom small{display:block;font-family:var(--lire);font-size:.8125rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or-texte);margin-top:2px}

/* ── la carte en deux volets (le geste Canva) ── */
.carte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);border-radius:28px;overflow:hidden;
  background:linear-gradient(165deg,#fffdf9,rgba(253,248,238,.96));border:1px solid var(--filet);
  box-shadow:0 2px 6px rgba(74,48,12,.05),0 40px 90px -50px rgba(138,101,18,.55),inset 0 1px 0 #fff;
  min-height:560px}
.second.autres{margin-top:14px}
.carte.seule{display:block;min-height:0;max-width:820px;margin:0 auto}
.volet{padding:48px 44px 42px;display:flex;flex-direction:column}
.vue{position:relative;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(160deg,#fbf3df 0%,#f6e8c8 55%,#efdcb2 100%);border-left:1px solid var(--filet-fin);overflow:hidden}
.vue::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(255,255,255,.75),transparent 60%)}
.vue>*{position:relative}

.etape{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte);margin:0 0 14px;
  display:flex;align-items:center;gap:10px}
.etape .pts{display:inline-flex;gap:5px}
.etape .pts i{width:22px;height:4px;border-radius:3px;background:rgba(201,151,27,.22)}
.etape .pts i.on{background:linear-gradient(90deg,#e8c078,#c9a253)}
h1:focus{outline:none}
h1{font-family:var(--titre);font-weight:600;color:var(--encre);font-size:clamp(2.2rem,4.4vw,2.9rem);line-height:1.08;margin:0 0 18px;letter-spacing:-.2px}
p{font-size:1.25rem;line-height:1.68;margin:0 0 16px;color:var(--texte);max-width:34em}
p.second{font-size:1.0625rem;color:var(--doux);line-height:1.6}
p.note{font-size:.9375rem;color:var(--doux);line-height:1.55;text-align:center;margin:18px auto 0}
strong{color:var(--encre);font-weight:650}

.retour{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;margin:0 0 10px;cursor:pointer;
  font:600 1rem var(--lire);color:var(--or-texte)}
.retour svg{width:18px;height:18px}

/* ── les gestes ── */
.gestes{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:22px}
.g-btn{font-feature-settings:'lnum' 1;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;
  font-family:var(--titre);font-size:1.3125rem;font-weight:600;letter-spacing:.2px;line-height:1.2;color:#3a2708;
  padding:16px 26px;border-radius:16px;cursor:pointer;text-decoration:none;
  border:1px solid rgba(160,120,64,.55);
  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);
  transition:transform .25s ease,box-shadow .25s ease;text-shadow:0 1px 1px rgba(255,240,200,.35)}
.g-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(74,48,12,.14),0 16px 38px rgba(74,48,12,.24),inset 0 1px 0 rgba(255,255,255,.7)}
.g-btn.creux{font-family:var(--lire);font-size:1.1875rem;font-weight:600;color:#4a3520;text-shadow:none;
  background:linear-gradient(158deg,rgba(255,253,249,.97),rgba(248,243,233,.92));border:1.5px solid rgba(160,120,64,.5);
  box-shadow:0 2px 6px rgba(74,48,12,.06)}
.g-btn.creux:hover{border-color:rgba(160,120,64,.8)}
.g-btn[disabled]{opacity:.6;cursor:wait;transform:none}
.g-btn svg{width:20px;height:20px;flex:none}
.g-btn:focus-visible,.pastille:focus-visible,input:focus-visible,textarea:focus-visible,.retour:focus-visible{outline:3px solid #b8860b;outline-offset:3px}

/* ── étape 1 : la durée de pause ── */
.durees{display:flex;gap:10px;margin:6px 0 4px;flex-wrap:wrap}
.pastille{flex:1 1 0;min-width:92px;padding:13px 10px;border-radius:14px;cursor:pointer;
  font:600 1.0625rem var(--lire);color:#4a3520;background:#fffdf8;border:1.5px solid rgba(160,120,64,.35)}
.pastille[aria-pressed="true"]{background:linear-gradient(135deg,#F4D58A 0%,#E8C078 50%,#C9A253 100%);border-color:rgba(160,120,64,.7);color:#2d1d05;
  box-shadow:0 4px 12px rgba(74,48,12,.16)}

/* ── étape 1 : la frise ── */
.frise{list-style:none;margin:0;padding:0;position:relative}
.frise li{position:relative;padding:0 0 30px 58px}
.frise li:last-child{padding-bottom:0}
.frise li::before{content:"";position:absolute;left:19px;top:40px;bottom:2px;width:2px;
  background:linear-gradient(180deg,rgba(160,120,64,.55),rgba(160,120,64,.18))}
.frise li:last-child::before{display:none}
.frise .rond{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#fffdf8;border:1.5px solid rgba(160,120,64,.45);box-shadow:0 3px 10px rgba(74,48,12,.10)}
.frise li:first-child .rond{background:linear-gradient(135deg,#F4D58A,#C9A253);border-color:rgba(138,101,18,.6)}
.frise .rond svg{width:20px;height:20px;color:#6b4c12}
.frise .quand{font:700 1.1875rem/1.35 var(--lire);color:var(--encre);margin:6px 0 4px}
.frise .quoi{font-size:1.0625rem;line-height:1.55;color:var(--texte);margin:0}

/* ── étape 2 : les trésors ── */
.tresors{display:flex;flex-direction:column;gap:12px;margin:4px 0 6px}
.tresor{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(255,253,248,.92);
  border:1px solid rgba(160,120,64,.26);box-shadow:0 2px 8px rgba(74,48,12,.05)}
.tresor .ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#fbeec9,#eed39a);border:1px solid rgba(160,120,64,.35)}
.tresor .ico svg{width:26px;height:26px;color:#6b4c12}
.tresor .t{font:650 1.1875rem/1.3 var(--lire);color:var(--encre);margin:0 0 6px}
.badge{display:inline-block;font:700 .875rem/1 var(--lire);letter-spacing:.02em;color:#fdf5e2;padding:6px 10px;border-radius:999px;
  background:linear-gradient(176deg,#b8934a 0%,#9e7229 64%,#936823 100%);box-shadow:inset 0 1px 0 rgba(255,243,208,.34)}
.chemin{text-align:center}
.chemin .grand{font-family:var(--titre);font-weight:600;color:var(--encre);font-size:clamp(4.2rem,9vw,6rem);line-height:1;margin:6px 0 4px}
.chemin .sous{font:700 .875rem var(--lire);letter-spacing:.16em;text-transform:uppercase;color:var(--or-texte);margin:0 0 26px}
.chemin .sous.haut{margin:0 0 6px}
.chemin blockquote{margin:0 auto;max-width:24em;font-family:var(--titre);font-style:italic;font-size:1.625rem;line-height:1.4;color:#3a2a12}
.chemin cite{display:block;margin-top:14px;font:600 1rem var(--lire);font-style:normal;color:var(--or-texte)}

/* ── étape 3 : le mot ── */
textarea,input[type=email],input[type=text]{width:100%;font:1.1875rem/1.55 var(--lire);color:var(--encre);background:#fffdf8;
  border:1.5px solid rgba(160,120,64,.4);border-radius:16px;padding:15px 18px}
textarea{min-height:150px;resize:vertical}
input.code{letter-spacing:.5em;text-align:center;font-weight:700;font-size:1.625rem}
label.lbl{display:block;font:650 1.0625rem var(--lire);color:var(--encre);margin:0 0 8px}
h2{font-family:var(--titre);font-weight:600;font-size:1.75rem;color:var(--encre);margin:22px 0 8px}
.vue.portrait{padding:0;justify-content:flex-end;background:linear-gradient(170deg,#f8ecd0 0%,#ecd6a4 100%)}
.vue.portrait img{display:block;width:100%;max-width:470px;margin:150px auto 0;height:auto;object-fit:contain}
.vue.portrait .mot{position:absolute;left:28px;right:28px;top:30px;text-align:center}
.vue.portrait .mot p{font-family:var(--titre);font-style:italic;font-size:1.625rem;line-height:1.35;color:#3a2a12;margin:0 auto;max-width:17em}
.vue.portrait .mot span{display:block;margin-top:8px;font:600 1rem var(--lire);color:var(--or-texte)}
.merci{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:rgba(255,253,248,.95);border:1px solid rgba(160,120,64,.3);
  font-size:1.0625rem;line-height:1.5;color:var(--texte)}
.merci svg{flex:none;width:26px;height:26px;color:#8a6512}

/* ── l'entrée : la liste ── */
.abos{display:flex;flex-direction:column;gap:14px;margin:8px 0 0}
.abo{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:20px;background:rgba(255,253,248,.95);border:1px solid rgba(160,120,64,.3)}
.abo .q{flex:1;min-width:0}
.abo .n{font:650 1.1875rem/1.3 var(--lire);color:var(--encre);margin:0 0 4px}
.abo .d{font-size:1.0625rem;color:var(--doux);margin:0;line-height:1.5}
.abo .g-btn{width:auto;min-height:52px;font-size:1.0625rem;padding:12px 20px;flex:none}
.etat{display:inline-block;font:700 .8125rem var(--lire);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:8px;
  background:#f3e6c4;color:#6b4c12;margin-left:6px;vertical-align:2px}
.erreur{color:#8a2a12;font-size:1.0625rem;margin:10px 0 0;min-height:1.5em}
.cache{display:none!important}
.aa{position:fixed;right:18px;bottom:18px;z-index:5;width:60px;height:60px;border-radius:50%;cursor:pointer;
  font:600 1.375rem var(--titre);color:#3a2708;border:1px solid rgba(160,120,64,.55);
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);box-shadow:0 8px 20px rgba(74,48,12,.22)}
.pied{margin:26px auto 0;text-align:center;font-size:.9375rem;color:var(--doux);line-height:1.6;max-width:44em}
.pied a{color:var(--or-texte)}
.apercu{position:fixed;left:14px;bottom:14px;z-index:5;font:700 .8125rem var(--lire);letter-spacing:.12em;text-transform:uppercase;
  padding:8px 12px;border-radius:10px;background:#3a2708;color:#f7e3a4}

@media (max-width:860px){
  .page{padding:22px 16px 100px}
  .carte{grid-template-columns:1fr;min-height:0;border-radius:24px}
  .volet{padding:30px 22px 26px}
  .vue{padding:30px 22px;border-left:0;border-top:1px solid var(--filet-fin)}
  .vue.portrait{padding:0}
  .vue.portrait{min-height:0}
  .vue.portrait .mot{position:static;padding:26px 20px 0}
  .vue.portrait img{max-width:260px;margin-top:14px}
  p{font-size:1.25rem}
  .abo{flex-direction:column;align-items:stretch}
  .abo .g-btn{width:100%}
  .entete{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.apparait{animation:apparait .45s ease both}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── LUMIÈRE DU SOIR — giriacademie.com injecte sa charte (charte-ga/theme.js) et son
   bouton nuit : html[data-theme="dark"]. Sans ces règles, le volet droit restait crème
   et le « 214 » passait en gris sur crème. On accorde la porte à la nuit du site. ── */
html[data-theme="dark"] .vue{background:linear-gradient(160deg,#1b2742 0%,#141e35 60%,#101829 100%);border-color:rgba(232,192,120,.18)}
html[data-theme="dark"] .vue::before{background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(232,192,120,.10),transparent 60%)}
html[data-theme="dark"] .frise .quand,html[data-theme="dark"] .chemin .grand{color:#f3ead8}
html[data-theme="dark"] .frise .quoi,html[data-theme="dark"] .chemin blockquote{color:#d6dbe6}
html[data-theme="dark"] .chemin .sous,html[data-theme="dark"] .chemin cite,html[data-theme="dark"] .vue.portrait .mot span{color:#e8c078}
html[data-theme="dark"] .frise .rond{background:#1f2b47;border-color:rgba(232,192,120,.45)}
html[data-theme="dark"] .frise .rond svg{color:#e8c078}
html[data-theme="dark"] .frise li:first-child .rond svg{color:#3a2708}
html[data-theme="dark"] .vue.portrait{background:linear-gradient(170deg,#1b2742 0%,#2a2a33 100%)}
html[data-theme="dark"] .vue.portrait .mot p{color:#f3ead8}
html[data-theme="dark"] .retour,html[data-theme="dark"] .retour svg{color:#e8c078;background:none}
html[data-theme="dark"] .tresor,html[data-theme="dark"] .abo,html[data-theme="dark"] .merci{background:rgba(255,255,255,.04);border-color:rgba(232,192,120,.28);color:#d6dbe6}
html[data-theme="dark"] .tresor .t,html[data-theme="dark"] .abo .n{color:#f3ead8}
html[data-theme="dark"] .abo .d,html[data-theme="dark"] p.second,html[data-theme="dark"] p.note,html[data-theme="dark"] .pied{color:#c3cad8}
html[data-theme="dark"] .pied a{color:#e8c078}
html[data-theme="dark"] .erreur{color:#ffb4a2}
html[data-theme="dark"] .carte{background:linear-gradient(165deg,#16213a,#111a2e);border-color:rgba(232,192,120,.3)}