/* ==========================================================================
   RACONTINO — base.css
   Feuille de style commune à TOUTES les pages.
   Modifier ici = modifier partout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS — couleurs, polices. C'est ici qu'on change l'identité visuelle.
   -------------------------------------------------------------------------- */
:root{
  /* couleurs de marque */
  --ink:#241B47;          /* violet nuit — fond du bloc d'accueil, texte */
  --ink-deep:#150E30;     /* violet très sombre — pied de page */
  --cream:#FFF6E9;        /* crème — fond général */
  --tangerine:#FF6B2C;    /* orange — accent principal, boutons d'achat */
  --sun:#FFC53D;          /* jaune — boutons, badges */
  --mint:#16C4A8;         /* menthe */
  --pink:#FF4D8D;         /* rose */
  --sky:#4DA3FF;          /* bleu */
  --sage:#3FA796;         /* vert doux — page grands-parents */
  --rose:#F2856D;         /* corail — page grands-parents */

  /* halo du ciel de nuit */
  --halo:#3B2A70;

  /* polices */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Nunito",system-ui,sans-serif;
}

/* --------------------------------------------------------------------------
   2. RÉGLAGES GÉNÉRAUX
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:800px;margin:0 auto;padding:0 26px}
section{padding:88px 0}

h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.08;
  letter-spacing:-.02em;
}
h3{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.2}

/* --------------------------------------------------------------------------
   3. SYSTÈME "STICKER" — bordure épaisse + ombre franche décalée.
      C'est la signature visuelle de la marque.
   -------------------------------------------------------------------------- */
.sticker,
.card{
  background:#fff;
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:8px 8px 0 var(--ink);
}
.card{padding:34px 30px}
.card p{margin-top:12px}

.tag{
  display:inline-block;
  font-family:var(--display);
  font-weight:800;
  font-size:14px;
  padding:6px 15px;
  border-radius:100px;
  border:2px solid var(--ink);
  margin-bottom:16px;
}

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:800;
  font-size:18px;
  text-decoration:none;
  color:var(--ink);
  background:var(--sun);
  border:3px solid var(--ink);
  border-radius:100px;
  padding:16px 34px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--tangerine);outline-offset:3px}

.btn--hot{background:var(--tangerine);color:#fff}
.btn--ghost{
  background:transparent;
  color:var(--cream);
  border-color:var(--cream);
  box-shadow:5px 5px 0 rgba(255,246,233,.35);
}
.btn--ghost:hover{box-shadow:2px 2px 0 rgba(255,246,233,.35)}

/* --------------------------------------------------------------------------
   5. ÉTIQUETTE DE SECTION (le petit texte encadré au-dessus des titres)
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.06em;
  padding:7px 16px;
  border-radius:100px;
  border:2px solid currentColor;
}

/* --------------------------------------------------------------------------
   6. BLOC D'ACCUEIL + CIEL DE NUIT
      .halo = les grands ronds bleu-violet flous qui donnent la profondeur.
      Pour n'en garder qu'un : mettre display:none sur .h2x
   -------------------------------------------------------------------------- */
.hero{
  background:var(--ink);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  padding:64px 0 130px;
}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{color:var(--sun)}
.hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(40px,6.6vw,74px);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:22px 0 0;
  max-width:15ch;
}
.hero p.lede{font-size:20px;max-width:46ch;margin:22px 0 0;color:#E6DDF5}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.trustline{margin-top:26px;font-size:14.5px;color:#B9AFD4}

.night{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.halo{position:absolute;border-radius:50%;background:var(--halo);opacity:.55}
.h1x{width:440px;height:440px;top:-170px;right:-130px}
.h2x{width:300px;height:300px;bottom:-120px;left:-110px}

/* étoiles scintillantes */
/* width par défaut : garde-fou. Sans lui, une étoile sans règle .stN
   s'affiche à la taille par défaut d'un SVG, environ 300px. */
.star{position:absolute;width:13px;animation:twinkle 3.6s ease-in-out infinite}
.st1{top:15%;left:2%;width:22px;animation-delay:.2s}
.st2{top:3%;left:63%;width:14px;animation-delay:1.4s}
.st3{top:38%;left:31%;width:11px;animation-delay:.8s}
.st4{top:62%;left:9%;width:16px;animation-delay:2.1s}
.st5{top:24%;right:31%;width:13px;animation-delay:1.1s}
.st6{bottom:16%;right:12%;width:24px;animation-delay:.5s}
.st7{bottom:31%;left:47%;width:12px;animation-delay:1.8s}
.st8{top:52%;right:5%;width:15px;animation-delay:2.6s}
/* Les pages en comptent seize. Celles-ci restent en périphérie, pour ne
   jamais passer derrière le titre ni les boutons. */
.st9{top:11%;right:9%;width:18px;animation-delay:3.1s}
.st10{top:45%;left:2%;width:12px;animation-delay:.9s}
.st11{bottom:20%;left:21%;width:15px;animation-delay:2.4s}
.st12{top:6%;left:17%;width:10px;animation-delay:1.6s}
.st13{bottom:8%;right:33%;width:13px;animation-delay:.35s}
.st14{top:71%;right:19%;width:11px;animation-delay:2.9s}
.st15{top:29%;right:14%;width:16px;animation-delay:1.25s}
.st16{bottom:7%;left:35%;width:9px;animation-delay:3.4s}
@keyframes twinkle{
  0%,100%{opacity:.3;transform:scale(.8)}
  50%{opacity:1;transform:scale(1)}
}

/* vague de transition entre le bloc d'accueil et le corps de page */
.wave{display:block;width:100%;height:60px;margin-top:-1px}

/* --------------------------------------------------------------------------
   7. LISTES À COCHES
   -------------------------------------------------------------------------- */
.check{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--tangerine);
  color:#fff;
  font-size:13px;font-weight:800;
  display:grid;place-items:center;
  margin-top:2px;
}

/* --------------------------------------------------------------------------
   8. QUESTIONS FRÉQUENTES (accordéon)
   -------------------------------------------------------------------------- */
.faq{margin-top:40px}
.q{
  border:3px solid var(--ink);
  border-radius:16px;
  background:#fff;
  margin-bottom:14px;
  overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
}
.q button{
  width:100%;
  text-align:left;
  background:none;border:none;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:17.5px;
  color:var(--ink);
  padding:20px 22px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.q button:focus-visible{outline:3px solid var(--tangerine);outline-offset:-3px}
.q .sign{font-size:24px;flex:0 0 auto;transition:transform .18s ease}
.q.open .sign{transform:rotate(45deg)}
.q .a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.q .a p{padding:0 22px 22px;font-size:16px}

/* --------------------------------------------------------------------------
   9. BLOC DE PRIX
   -------------------------------------------------------------------------- */
.pricing{
  background:var(--ink);
  color:var(--cream);
  border-radius:32px;
  padding:56px 40px;
  position:relative;
  overflow:hidden;
}
.pricing .inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:44px;align-items:center;
}
.pricing h2{color:var(--cream);max-width:14ch}
.pricing p{color:#E6DDF5;margin-top:16px;font-size:18px;max-width:40ch}

.price-tag{
  background:var(--sun);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:22px;
  padding:30px;
  box-shadow:8px 8px 0 var(--tangerine);
  text-align:center;
}
.price-num{font-family:var(--display);font-weight:800;font-size:64px;line-height:1;letter-spacing:-.03em}
.price-sub{font-size:15px;margin-top:6px;font-weight:700}
.price-list{list-style:none;margin:22px 0 0;text-align:left}
.price-list li{font-size:15px;padding:6px 0;display:flex;gap:9px}

/* --------------------------------------------------------------------------
   10. BLOC FINAL + PIED DE PAGE
   -------------------------------------------------------------------------- */
.final{text-align:center;padding:96px 0;border-top:3px solid var(--ink)}
.final h2{max-width:18ch;margin:0 auto}
.final p{margin:20px auto 30px;max-width:44ch;font-size:19px}

footer{background:var(--ink-deep);color:#B9AFD4;padding:40px 0;font-size:14.5px;text-align:center}
footer a{color:var(--sun)}
footer strong{color:var(--cream);font-family:var(--display)}

/* masque un texte à l'écran tout en le laissant lisible par les lecteurs d'écran */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   14. CONSENTEMENT — cases à cocher requises avant le paiement
       (droit de rétractation, article L.221-28 du Code de la consommation)
   -------------------------------------------------------------------------- */
.consent-box{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:14px 16px;
  margin-top:20px;
  text-align:left;
}
.consent-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  line-height:1.4;
  cursor:pointer;
}
.consent-line + .consent-line{margin-top:10px}
.consent-check{
  flex:0 0 auto;
  width:18px;height:18px;
  margin-top:2px;
  accent-color:var(--tangerine);
  cursor:pointer;
}
.consent-legal,
.pricing .consent-legal,
.price-tag .consent-legal{
  font-size:12.5px;
  color:#584E77;
  margin-top:10px;
  text-align:center;
  line-height:1.45;
}
.consent-legal a,
.pricing .consent-legal a,
.price-tag .consent-legal a{color:#C24500;font-weight:700}

/* le bouton reste visuellement actif mais ne déclenche rien tant que
   les deux cases ne sont pas cochées — voir script.js */
/* Bouton verrouillé : gris franc, sans couleur de marque. Il doit être
   évident qu'il ne s'agit pas encore d'un bouton actif. */
.consent-gate[aria-disabled="true"]{
  background:#D6D2E0;
  color:#7A719B;
  border-color:#A9A2BF;
  box-shadow:5px 5px 0 #A9A2BF;
  cursor:not-allowed;
}
.consent-gate[aria-disabled="true"]:hover{
  transform:none;
  box-shadow:5px 5px 0 #A9A2BF;
}

/* Bouton déverrouillé : l'orange plein, et une pulsation discrète une seule
   fois, pour signaler que l'achat vient de s'ouvrir. */
.consent-gate[aria-disabled="false"]{
  background:var(--tangerine);
  color:#fff;
  border-color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  animation:consentOuvert .45s ease-out 1;
}
.consent-gate[aria-disabled="false"]:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink);
}
@keyframes consentOuvert{
  0%{transform:scale(.97)}
  55%{transform:scale(1.035)}
  100%{transform:scale(1)}
}

/* Message affiché quand on clique sans avoir coché.
   Sélecteurs préfixés : sur certaines pages, une règle « .pricing p » plus
   spécifique repeignait ce texte en clair et le rendait illisible. */
.consent-alerte,
.pricing .consent-alerte,
.price-tag .consent-alerte{
  display:none;
  margin-top:12px;
  padding:9px 12px;
  border:2px solid var(--tangerine);
  border-radius:10px;
  background:#FFE7DA;
  color:#8A2E00;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-align:center;
}
.consent-alerte[data-visible="true"],
.pricing .consent-alerte[data-visible="true"],
.price-tag .consent-alerte[data-visible="true"]{display:block}
.consent-box[data-alerte="true"]{
  border-color:var(--tangerine);
  animation:consentSecousse .4s ease-in-out 1;
}
@keyframes consentSecousse{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

@media (prefers-reduced-motion:reduce){
  .consent-gate[aria-disabled="false"],
  .consent-box[data-alerte="true"]{animation:none}
}

/* --------------------------------------------------------------------------
   11. ENCADRÉ D'AVERTISSEMENT (à supprimer une fois le contenu réel en place)
   -------------------------------------------------------------------------- */
.placeholder-note{
  margin-top:34px;
  background:#FFE9E9;
  border:3px dashed var(--ink);
  border-radius:16px;
  padding:18px 22px;
  font-size:15px;
}

/* --------------------------------------------------------------------------
   12. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  section{padding:64px 0}
  .hero{padding:48px 0 100px}
  .pricing .inner{grid-template-columns:1fr}
  .price-tag{transform:none}
  .st2,.st7{display:none}
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITÉ — respect du réglage système "réduire les animations"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}