/* ============================================================
   « Chaque chose en son temps » — Aurée Tautil
   Feuille de marque du funnel ado.
   Couleurs et polices relevées sur le mini-guide « Dans la tête de ton ado ».
   ============================================================ */

/* MaryKate, réparée pour le français (accents, ’, œ, …) — voir fonts/LISEZ-MOI.md */
@font-face{
  font-family:"MaryKate";
  src:url("fonts/MaryKate-FR.woff2") format("woff2"),
      url("fonts/MaryKate-FR.ttf")   format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  /* Aquarelle de fond — échantillonnée sur les pages du guide */
  --lavande:#E8D0FE;      --lavande-clair:#F6E3FF;   --ciel:#C5E5F7;    --bleu-pale:#DEEAFC;
  /* Turquoise des cartes du guide */
  --turquoise:#45C8CF;    --turquoise-clair:#6FDCE0; --turquoise-fonce:#2E9CA6;
  --turquoise-nuit:#1F7A85;
  /* Signature */
  --ruban-fond:#DDF2F5;   --ruban-texte:#0097B2;
  /* Accents repris des illustrations */
  --violet:#5C5BDE;       --bulle:#CBC0F2;           --corail:#D84945;  --vert:#52C278;
  /* Encre */
  --encre:#2B2740;        --gris:#6B6584;            --gris-clair:#9C96B0;
  --blanc-casse:#FBFAFF;

  /* Titres : Fredoka, la police de ses visuels Instagram (« Un rituel parent/enfant »).
     Signature : MaryKate, réservée au ruban de marque.
     Phrases d'ado : Comic Sans italique, comme dans le guide. */
  --titre:"Fredoka",-apple-system,"Segoe UI",sans-serif;
  --signature:"MaryKate","Comic Sans MS",cursive;
  --corps:"Quicksand",-apple-system,"Segoe UI",sans-serif;
  --ado:"Comic Sans MS","Comic Neue",cursive;

  --r:26px;  --r-sm:18px;
  --ombre:0 16px 44px rgba(72,45,130,.15);
  --ombre-carte:0 10px 30px rgba(46,156,166,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--encre);font-family:var(--corps);font-size:17px;line-height:1.65;
  font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* L'aquarelle du guide, en fond de page */
body::before{
  content:"";position:fixed;inset:-15%;z-index:-2;
  background:
    radial-gradient(46% 40% at 14% 8%,  #EDD1FF 0%, rgba(237,209,255,0) 100%),
    radial-gradient(44% 38% at 90% 16%, #C5E5F7 0%, rgba(197,229,247,0) 100%),
    radial-gradient(48% 42% at 78% 72%, #DEEAFC 0%, rgba(222,234,252,0) 100%),
    radial-gradient(46% 40% at 10% 86%, #F6E3FF 0%, rgba(246,227,255,0) 100%),
    #F3EAFE;
  animation:respire 26s ease-in-out infinite alternate;
}
@keyframes respire{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,-1.5%)}}

img{max-width:100%;height:auto;display:block}
.wrap{max-width:620px;margin:0 auto;padding:0 20px}
.centre{text-align:center}

/* ---------- Ruban signature ---------- */
.ruban{
  display:inline-block;background:var(--ruban-fond);color:var(--ruban-texte);
  font-family:var(--signature);font-size:1.15rem;letter-spacing:.03em;
  padding:8px 22px 5px;border-radius:10px;transform:rotate(-1deg);
  box-shadow:0 4px 14px rgba(0,151,178,.13);
}
.ruban-zone{text-align:center;padding:26px 0 8px}

/* ---------- Titres ---------- */
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.14;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.2rem,9vw,3.15rem);font-weight:700;margin:12px 0 14px;text-align:center}
h2{font-size:clamp(1.7rem,6vw,2.15rem);margin:0 0 10px;text-align:center}
h3{font-size:1.2rem}
.chapo{font-size:1.1rem;color:var(--gris);text-align:center;margin:0 auto 22px;max-width:27em}
.chapo b{color:var(--encre);font-weight:700}
.intro{text-align:center;color:var(--gris);max-width:27em;margin:0 auto 22px}
.kicker{
  font-family:var(--corps);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--turquoise-nuit);font-weight:700;text-align:center;margin:20px 0 0;
}

/* ---------- La carte turquoise du guide ---------- */
.carte{
  background:linear-gradient(158deg,var(--turquoise-clair),var(--turquoise) 42%,var(--turquoise-fonce));
  border:3px solid rgba(255,255,255,.55);border-radius:var(--r);
  padding:28px 24px;color:#fff;box-shadow:var(--ombre-carte);margin:20px 0;
}
.carte h2,.carte h3{color:#fff}
.carte p{color:rgba(255,255,255,.96)}

/* Carte blanche (variante lisible pour les longs textes) */
.carte-blanche{
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);
  padding:26px 22px;box-shadow:var(--ombre);margin:20px 0;
}

/* ---------- La phrase de l'ado ---------- */
.ado-dit{font-family:var(--ado);font-style:italic;font-size:1.22rem;line-height:1.45}
.trad{font-family:var(--ado);font-style:italic;font-size:1.06rem;line-height:1.5;opacity:.97}

/* ---------- Formulaire ---------- */
label{
  display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 7px;color:rgba(255,255,255,.9);
}
input{
  width:100%;font:inherit;font-family:var(--corps);font-weight:600;font-size:1.06rem;
  padding:15px 17px;border:2px solid rgba(255,255,255,.5);border-radius:15px;
  background:rgba(255,255,255,.96);color:var(--encre);margin-bottom:15px;
  transition:border-color .16s,box-shadow .16s;
}
input::placeholder{color:var(--gris-clair);font-weight:500}
input:focus{outline:0;border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.32)}
.pot{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.btn{
  display:block;width:100%;border:0;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--titre);font-weight:600;font-size:1.12rem;color:#fff;
  background:linear-gradient(135deg,#7A79E8,#5C5BDE 60%,#4746C4);
  padding:18px 20px;border-radius:99px;position:relative;overflow:hidden;
  box-shadow:0 10px 26px rgba(92,91,222,.4);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.22,1,.36,1);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(92,91,222,.48)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn small{display:block;font-weight:600;font-size:.8rem;opacity:.93;margin-top:2px}
.btn-clair{
  background:#fff;color:var(--turquoise-nuit);box-shadow:0 10px 26px rgba(31,122,133,.28);
}
.btn-clair:hover{box-shadow:0 18px 36px rgba(31,122,133,.36)}

.rgpd{text-align:center;font-size:.78rem;line-height:1.55;margin:13px 0 0;color:rgba(255,255,255,.85)}
.msg{margin-top:11px;font-size:.95rem;font-weight:700;text-align:center;min-height:1.2em}
.msg.err{color:#FFE2E0}
.msg.ok{color:#EAFFF3}

/* ---------- Divers ---------- */
section{padding:16px 0}
.foot{
  text-align:center;color:var(--gris);font-size:.79rem;padding:30px 0 46px;line-height:1.85;
}
.foot a{color:var(--turquoise-nuit)}

/* ---------- Pages légales ---------- */
.legal{max-width:720px}
.legal h1{font-size:clamp(1.9rem,7vw,2.5rem);text-align:left;margin:10px 0 6px}
.legal .maj{color:var(--gris);font-size:.86rem;margin:0 0 26px}
.legal h2{
  font-size:1.28rem;text-align:left;margin:30px 0 10px;color:var(--turquoise-nuit);
  padding-top:22px;border-top:1px solid rgba(107,101,132,.16)
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:1.02rem;margin:20px 0 6px}
.legal p,.legal li{color:#443E58;font-size:.98rem;line-height:1.7}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin:0 0 7px}
.legal a{color:var(--turquoise-nuit)}
.legal dl{margin:0 0 16px}
.legal dt{font-weight:700;font-size:.86rem;color:var(--gris);margin-top:12px}
.legal dd{margin:2px 0 0;font-size:.98rem;color:#443E58}
.legal table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.93rem}
.legal th,.legal td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(107,101,132,.16);vertical-align:top}
.legal th{color:var(--gris);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
/* Ce qui reste à compléter par Aurée — volontairement voyant */
.aremplir{
  background:#FFF3CD;border:1.5px dashed #E0A800;border-radius:8px;
  padding:2px 9px;color:#7A5C00;font-weight:700;font-size:.9rem;
  font-family:var(--corps);white-space:nowrap
}
.avert{
  background:#FFF3CD;border:1px solid #E0A800;border-radius:14px;
  padding:16px 18px;margin:0 0 24px;font-size:.93rem;color:#6B5200
}
.avert b{color:#4A3800}
.retour{
  display:inline-block;margin:0 0 4px;font-size:.9rem;font-weight:700;
  color:var(--turquoise-nuit);text-decoration:none
}
.retour:hover{text-decoration:underline}

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