/* =========================================================================
   READY RELEASE — YOUR FREE RELEASE PLAN / PANNEAU LATERAL          (v123)

   REMPLACE release-plan.v122.css. La v122 dessinait une SECTION de page
   (pleine largeur, entre le process et les packs). La v123 dessine un
   PANNEAU qui entre par la droite au bout de 30 s. Le contenu interne
   (questions, resultat, plan, offre) est le meme et garde les memes
   classes .rpl__* : seul le contenant change.

   Feuille ADDITIVE. Aucune classe existante n'est redefinie, aucune
   couleur ni duree n'est ecrite en dur : tout vient des variables de
   main.v125.css.

   /!\ EMPILEMENT. z-index 94, JUSTE SOUS le bandeau cookies (.cc, z 95)
   et sous l'en-tete fixe (.site-head, z 100). C'est deliberé : si le
   visiteur rouvre « Cookie settings » pendant que le panneau est la, le
   choix de consentement doit rester au-dessus et cliquable. Ne pas
   remonter cette valeur sans relire consent.v117.js.
   ========================================================================= */

/* ===================================================================== 1.
   COQUE

   .rpd est une couche plein ecran SANS fond et sans capture de clic
   (pointer-events:none) : le site derriere reste utilisable, ce qui est
   toute la difference entre ce panneau et une modale. Seul le panneau
   lui-meme reprend les evenements. */
.rpd{position:fixed;inset:0;z-index:94;display:flex;align-items:flex-end;justify-content:flex-end;padding:clamp(0.75rem,2vw,1.75rem);pointer-events:none}
.rpd[hidden]{display:none!important}

.rpd__panel{
  pointer-events:auto;
  position:relative;
  width:360px;max-width:100%;
  max-height:calc(100dvh - 2 * clamp(0.75rem,2vw,1.75rem));
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(18,19,22,0.97),rgba(10,11,13,0.97));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line-strong);
  border-top:2px solid var(--signal);
  border-radius:var(--radius-m);
  box-shadow:0 28px 70px -24px rgba(0,0,0,0.85);
  opacity:0;transform:translate3d(calc(100% + 2.5rem),0,0);
  transition:opacity 0.45s var(--ease),transform 0.75s var(--ease),width 0.45s var(--ease),max-height 0.45s var(--ease);
}
.rpd.is-on .rpd__panel{opacity:1;transform:none}
.rpd.is-out .rpd__panel{opacity:0;transform:translate3d(calc(100% + 2.5rem),0,0)}

/* Ouvert : le panneau s'elargit et se recentre, parce que le resultat
   (score, colonnes, timeline, offre) ne tient pas dans 360 px sans
   devenir une colonne de mots. */
.rpd.is-open{align-items:center}
.rpd.is-open .rpd__panel{width:min(560px,100%);max-height:calc(100dvh - 2 * clamp(0.75rem,2vw,1.75rem))}

.rpd__body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:clamp(1.25rem,2.4vw,1.75rem)}
.rpd__body::-webkit-scrollbar{width:3px}
.rpd__body::-webkit-scrollbar-thumb{background:var(--line-strong)}

/* Fermer : 44 px de cible tactile, visible en permanence. Une croix qui
   n'apparait qu'au survol n'existe pas sur telephone. */
.rpd__x{position:absolute;top:0.25rem;right:0.25rem;z-index:2;width:2.75rem;height:2.75rem;display:grid;place-items:center;font-size:1.25rem;line-height:1;color:var(--ash-dim);background:none;border:0;cursor:pointer;transition:color 0.25s var(--ease)}
.rpd__x:hover{color:var(--bone)}
.rpd__x:focus-visible{outline:2px solid var(--signal);outline-offset:-4px;border-radius:var(--radius-s)}

/* ===================================================================== 2.
   ACCROCHE */
.rpd__teaser{padding-right:1.75rem}
.rpl__kicker{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--signal);margin:0 0 0.75rem}
.rpd__t{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.12;letter-spacing:-0.025em;color:var(--bone);text-wrap:balance}
.rpd__sub{margin-top:0.7rem;font-size:0.9375rem;line-height:1.5;color:var(--ash)}
.rpl__micro{margin-top:0.8rem;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ash-dim)}

.rpl__cta{margin-top:1.25rem;display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;width:100%;padding:0.95rem 1.35rem;border:0;border-radius:var(--radius-s);background:var(--signal-fill);color:var(--void);font-family:var(--body);font-weight:700;font-size:0.9375rem;cursor:pointer;transition:background 0.3s var(--ease),transform 0.3s var(--ease)}
.rpl__cta:hover{background:#F2D56D;transform:translateY(-2px)}
.rpl__cta-arw{transition:transform 0.35s var(--ease)}
.rpl__cta:hover .rpl__cta-arw{transform:translateX(4px)}

/* « Ne plus afficher » : une vraie case, pas un lien gris. Le visiteur
   doit pouvoir couper le rappel definitivement en un clic, comme il
   coupe la mesure d'audience. */
.rpd__never{margin-top:1rem;display:flex;align-items:center;gap:0.55rem;font-size:0.75rem;line-height:1.35;color:var(--ash-dim);cursor:pointer}
.rpd__never input{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;border:1px solid var(--line-strong);border-radius:4px;background:var(--void-2);display:grid;place-items:center;cursor:pointer;transition:background 0.2s var(--ease),border-color 0.2s var(--ease)}
.rpd__never input:checked{background:var(--signal-fill);border-color:var(--signal-fill)}
.rpd__never input::after{content:'';width:4px;height:8px;border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform 0.2s var(--ease);margin-top:-2px}
.rpd__never input:checked::after{transform:rotate(45deg) scale(1)}
.rpd__never input:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.rpd__never:hover{color:var(--ash)}

/* ===================================================================== 3.
   QUESTIONS */
.rpl__bar{display:flex;align-items:center;gap:0.85rem;margin-bottom:1.5rem;padding-right:1.75rem}
.rpl__step{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;color:var(--ash-dim);white-space:nowrap}
.rpl__gauge{flex:1;height:2px;background:var(--line-strong);overflow:hidden}
.rpl__gauge i{display:block;height:100%;width:0;background:var(--signal);transition:width 0.45s var(--ease)}
.rpl__back{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ash-dim);background:none;border:0;padding:0.3rem 0;cursor:pointer;transition:color 0.25s var(--ease)}
.rpl__back:hover{color:var(--bone)}
.rpl__back[hidden]{display:none!important}

.rpl__q{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.15;letter-spacing:-0.02em;color:var(--bone)}
.rpl__hint{margin-top:0.5rem;font-size:0.8125rem;color:var(--ash-dim)}

.rpl__opts{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:0.5rem}
.rpl__opt{width:100%;display:flex;align-items:center;gap:0.85rem;text-align:left;padding:0.85rem 1rem;min-height:48px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--void-2);color:var(--bone);font-family:var(--body);font-size:0.9375rem;line-height:1.35;cursor:pointer;transition:border-color 0.25s var(--ease),background 0.25s var(--ease)}
.rpl__opt:hover{border-color:var(--line-strong);background:var(--surface)}
.rpl__opt[aria-pressed="true"]{border-color:var(--signal);background:rgba(232,197,71,0.10)}
.rpl__box{flex:none;width:20px;height:20px;border-radius:5px;border:1px solid var(--line-strong);display:grid;place-items:center;transition:background 0.25s var(--ease),border-color 0.25s var(--ease)}
.rpl__opt[aria-pressed="true"] .rpl__box{background:var(--signal-fill);border-color:var(--signal-fill)}
.rpl__box::after{content:'';width:5px;height:9px;border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform 0.25s var(--ease);margin-top:-2px}
.rpl__opt[aria-pressed="true"] .rpl__box::after{transform:rotate(45deg) scale(1)}
.rpl__next{margin-top:1.25rem}
.rpl__next:disabled{background:var(--surface-2);color:var(--ash-dim);cursor:not-allowed;transform:none}

/* ===================================================================== 4.
   RESULTAT */
.rpl__res-k{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--signal);padding-right:1.75rem}
.rpl__score{margin-top:0.7rem;font-family:var(--display);font-weight:800;font-size:clamp(1.75rem,4vw,2.4rem);line-height:1.05;letter-spacing:-0.03em;color:var(--bone)}
.rpl__score b{color:var(--signal);font-weight:800}
.rpl__score-s{margin-top:0.7rem;font-size:0.9375rem;line-height:1.5;color:var(--ash)}

.rpl__cols{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.75rem}
.rpl__col h3{font-family:var(--mono);font-size:0.625rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ash-dim);padding-bottom:0.7rem;border-bottom:1px solid var(--line)}
.rpl__col--miss h3{color:var(--signal)}
.rpl__col ul{list-style:none;margin:0.9rem 0 0;padding:0;display:grid;gap:0.55rem}
.rpl__col li{display:flex;align-items:baseline;gap:0.6rem;font-size:0.9375rem;line-height:1.4}
.rpl__col--have li{color:var(--ash)}
.rpl__col--miss li{color:var(--bone)}
.rpl__ic{flex:none;font-family:var(--mono);font-size:0.75rem}
.rpl__col--have .rpl__ic{color:var(--ash-dim)}
.rpl__col--miss .rpl__ic{color:var(--signal)}
.rpl__none{margin-top:0.9rem;font-size:0.9375rem;color:var(--ash-dim)}

.rpl__blk{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.rpl__blk-t{font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.2;letter-spacing:-0.02em;color:var(--bone)}
.rpl__blk-p{margin-top:0.7rem;font-size:0.9375rem;line-height:1.55;color:var(--ash)}

/* ------------------------------------------------------------ timeline */
.rpl__tl{list-style:none;margin:1.4rem 0 0;padding:0 0 0 1.35rem;position:relative;display:grid;gap:1.35rem}
.rpl__tl::before{content:'';position:absolute;left:0;top:0.55rem;bottom:0.55rem;width:1px;background:linear-gradient(180deg,var(--signal),var(--line-strong) 24%,var(--line))}
.rpl__ph{position:relative}
.rpl__ph::before{content:'';position:absolute;left:calc(-1.35rem - 2px);top:0.55em;width:5px;height:5px;background:var(--void);box-shadow:0 0 0 1px var(--line-strong)}
.rpl__ph:first-child::before{background:var(--signal);box-shadow:none}
.rpl__ph-k{font-family:var(--mono);font-size:0.625rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--signal)}
.rpl__ph:not(:first-child) .rpl__ph-k{color:var(--ash-dim)}
.rpl__ph ul{list-style:none;margin:0.6rem 0 0;padding:0;display:grid;gap:0.35rem}
.rpl__ph li{position:relative;padding-left:0.9rem;font-size:0.875rem;line-height:1.5;color:var(--bone)}
.rpl__ph li::before{content:'';position:absolute;left:0;top:0.68em;width:5px;height:1px;background:var(--ash-dim)}

/* ------------------------------------------------------------ email */
.rpl__mail{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.rpl__field{display:flex;flex-direction:column;gap:0.6rem;margin-top:1rem}
.rpl__in{width:100%;background:var(--void-2);border:1px solid var(--line-strong);border-radius:var(--radius-s);color:var(--bone);font:inherit;font-size:0.9375rem;padding:0.85rem 1rem}
.rpl__in::placeholder{color:var(--ash-dim)}
.rpl__in:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.rpl__field .rpl__cta{margin-top:0}
.rpl__err{margin-top:0.6rem;min-height:1.2em;font-size:0.8125rem;color:#E8837D}
.rpl__err.is-ok{color:var(--signal)}
.rpl__legal{margin-top:0.8rem;font-size:0.75rem;line-height:1.5;color:var(--ash-dim)}
.rpl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------ offre */
.rpl__offer{margin-top:1.9rem;padding:1.25rem;border:1px solid var(--signal-dim);border-radius:var(--radius-m);background:radial-gradient(110% 130% at 10% 0%,rgba(232,197,71,0.08),transparent 66%),var(--surface)}
.rpl__lines{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:0.45rem}
.rpl__line{display:flex;justify-content:space-between;gap:1rem;font-size:0.875rem;color:var(--ash);padding-bottom:0.45rem;border-bottom:1px solid var(--line)}
.rpl__line b{color:var(--bone);font-weight:500}
.rpl__line span{font-family:var(--display);color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.rpl__total{display:flex;justify-content:space-between;gap:1rem;margin-top:0.8rem;font-family:var(--display);font-weight:700;font-size:1.125rem;letter-spacing:-0.02em;color:var(--bone)}
.rpl__offer .rpl__cta{margin-top:1.1rem;text-decoration:none}
.rpl__offer-note{margin-top:0.85rem;font-size:0.75rem;line-height:1.5;color:var(--ash-dim)}
.rpl__restart{margin-top:1.5rem;background:none;border:0;padding:0;font-family:var(--mono);font-size:0.625rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ash-dim);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.rpl__restart:hover{color:var(--bone)}

/* ===================================================================== 5.
   TELEPHONE

   Le panneau reste une CARTE posee en bas, pas un interstitiel plein
   ecran : Google penalise les interstitiels mobiles qui recouvrent le
   contenu, et un encart qui laisse voir la page derriere se ferme sans
   colere. Il s'agrandit seulement apres un clic volontaire, et meme la
   il garde ses marges. */
@media (max-width:719px){
  .rpd{padding:0.75rem;align-items:flex-end}
  .rpd__panel{width:100%;max-height:min(58dvh,30rem)}
  .rpd.is-open .rpd__panel{width:100%;max-height:calc(100dvh - 1.5rem)}
  .rpd__t{font-size:1.15rem}
  .rpd__sub{font-size:0.875rem}
}

/* Ecrans courts : le resultat doit rester defilable, pas deborder. */
@media (max-height:560px){
  .rpd.is-open .rpd__panel{max-height:calc(100dvh - 1rem)}
}

@media (prefers-reduced-motion:reduce){
  .rpd__panel{transition:opacity 0.2s linear}
  .rpd__panel,.rpd.is-out .rpd__panel{transform:none}
  .rpl__cta,.rpl__opt,.rpl__box,.rpl__box::after,.rpl__gauge i{transition:none}
  .rpl__cta:hover{transform:none}
}

@media (forced-colors:active){
  .rpd__panel{border:1px solid CanvasText}
}