/* Ogrelo · pages de présentation (parents, brevet, profs, lycée). Tuiles colorées à ombre pleine, aéré, mobile d'abord.
   Palette calme : vert de l'ogre pour l'action, tons doux pour les tuiles ; le rouge est réservé aux erreurs (aucun ici). */
:root{
  --bg:#FBF7EE;--card:#FFFFFF;--ink:#22261F;--soft:#59614F;--line:#E7E1D3;
  --ogre:#58A847;--ogre-d:#3E7F31;--ogre-dd:#2F6326;--sun:#F6C445;
  --c-bleu:#3F86D8;--c-violet:#8466D6;--c-jaune:#E3A72F;--c-vert:#3E9F5A;--c-sarcelle:#2A9C93;--c-orange:#E5873A;--c-rose:#D46F9C;
  --display:"Baloo 2",system-ui,sans-serif;--texte:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;--ombre:5px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141813;--card:#1D221C;--ink:#ECEFE8;--soft:#B1BAAA;--line:#323A30;--ogre:#5FB34D;--ogre-d:#3E7F31;--ogre-dd:#2C5E23}}
:root[data-theme="dark"]{--bg:#141813;--card:#1D221C;--ink:#ECEFE8;--soft:#B1BAAA;--line:#323A30;--ogre:#5FB34D;--ogre-d:#3E7F31;--ogre-dd:#2C5E23}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--texte);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--ogre-d)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) a{color:#8FD07E}}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2rem,8.4vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.55rem,6vw,2.25rem);font-weight:800}
h3{font-size:1.18rem;font-weight:800}
p{margin:0}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute;left:12px;top:-60px;background:var(--card);padding:10px 14px;border-radius:12px;z-index:60}
.saut:focus{top:12px}
:focus-visible{outline:3px solid var(--c-bleu);outline-offset:3px;border-radius:8px}

.cont{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
.tete-section{max-width:680px;margin:0 0 30px}
.tete-section p{color:var(--soft);margin-top:12px;font-size:1.05rem}
.etiquette{display:inline-flex;align-items:center;gap:8px;font:800 .82rem/1 var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--ogre-d);margin-bottom:12px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .etiquette{color:#8FD07E}}


/* bouton principal : vert, ombre pleine, on appuie et il descend */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:14px 26px;border:0;border-radius:18px;background:var(--ogre);color:#fff!important;
  font:800 1.16rem/1.2 var(--display);text-decoration:none;text-align:center;box-shadow:0 var(--ombre) 0 var(--ogre-dd);transition:transform .08s ease,box-shadow .08s ease;cursor:pointer}
.btn:hover{background:color-mix(in srgb,var(--ogre) 92%,#000)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ogre-dd)}
.btn .ico{width:22px;height:22px;stroke-width:2.6}
.btn-second{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink)!important;
  font:800 1.02rem/1.2 var(--display);text-decoration:none;box-shadow:0 4px 0 var(--line);cursor:pointer}
.btn-second:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.sous-cta{color:var(--soft);font-size:.92rem;margin-top:12px}

/* en-tête de page */
.hero{padding:34px 0 46px}
.hero .cont{display:grid;gap:28px;align-items:center}
@media (min-width:880px){.hero .cont{grid-template-columns:1.25fr .9fr;gap:48px}.hero{padding:64px 0 72px}}
.pastille{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--ogre) 13%,var(--card));color:var(--ogre-d);border:2px solid color-mix(in srgb,var(--ogre) 30%,var(--line));
  border-radius:999px;padding:6px 14px;font-weight:800;font-size:.9rem;margin-bottom:18px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pastille{color:#A6DD97}}
.pastille .ico{width:18px;height:18px}
.hero h1 .surligne{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--sun) 50%,transparent) 64%);padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero h1 .surligne{background:linear-gradient(transparent 70%,color-mix(in srgb,var(--sun) 32%,transparent) 70%)}}
.hero .chapo{font-size:1.14rem;color:var(--soft);margin:18px 0 26px;max-width:560px}
.hero .actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;max-width:440px}
@media (min-width:520px){.hero .actions{align-items:flex-start}}
.puces{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.puces li{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:999px;padding:6px 13px 6px 10px}
.puces .ico{width:18px;height:18px;color:var(--ogre-d)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .puces .ico{color:#8FD07E}}

/* l'ogre et sa bulle */
.scene{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.medaillon{width:min(70vw,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#FFF8E6 0 55%,#F7E2AE 100%);border:4px solid #fff;
  box-shadow:0 8px 0 color-mix(in srgb,var(--sun) 55%,var(--line));display:grid;place-items:center;overflow:hidden}
.medaillon img{width:88%;height:88%;object-fit:contain;margin-top:10%}
.bulle{position:relative;background:var(--ink);color:var(--bg);font:800 1.06rem/1.35 var(--display);border-radius:20px;padding:12px 18px;max-width:300px;text-align:center}
.bulle::after{content:"";position:absolute;left:50%;top:-16px;margin-left:-10px;border:10px solid transparent;border-bottom-color:var(--ink);border-top:0;border-width:0 10px 16px}

/* tuiles */
.grille{display:grid;gap:18px}
@media (min-width:640px){.grille.g2,.grille.g3{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.grille.g3{grid-template-columns:1fr 1fr 1fr}}
.tuile{--c:var(--c-vert);position:relative;background:color-mix(in srgb,var(--c) 7%,var(--card));border:2px solid color-mix(in srgb,var(--c) 32%,var(--line));border-radius:var(--r);
  box-shadow:0 var(--ombre) 0 color-mix(in srgb,var(--c) 42%,var(--line));padding:22px 20px 22px;margin-bottom:var(--ombre)}
.tuile .pic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#000);margin-bottom:16px}
.tuile .pic .ico{width:27px;height:27px;stroke-width:2.2}
.tuile h3{margin-bottom:8px}
.tuile p{color:var(--soft)}
.c-bleu{--c:var(--c-bleu)}.c-violet{--c:var(--c-violet)}.c-jaune{--c:var(--c-jaune)}.c-vert{--c:var(--c-vert)}.c-sarcelle{--c:var(--c-sarcelle)}.c-orange{--c:var(--c-orange)}.c-rose{--c:var(--c-rose)}

/* étapes numérotées */
.etapes{display:grid;gap:18px;counter-reset:e;padding:0;margin:0;list-style:none}
@media (min-width:860px){.etapes{grid-template-columns:repeat(3,1fr)}}
.etapes li{counter-increment:e;display:flex;gap:16px;align-items:flex-start}
.etapes li::before{content:counter(e);flex-shrink:0;width:46px;height:46px;border-radius:14px;background:var(--sun);color:#3A2C00;font:800 1.4rem/46px var(--display);text-align:center;box-shadow:0 4px 0 #C99A1E}
.etapes h3{margin:4px 0 6px}
.etapes p{color:var(--soft)}

/* bande de couleur douce */
.doux{background:color-mix(in srgb,var(--ogre) 7%,var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* rapport du dimanche (maquette, compte de démonstration) */
.duo{display:grid;gap:30px;align-items:center}
@media (min-width:880px){.duo{grid-template-columns:1fr 1fr;gap:56px}}
.rapport{background:var(--card);border:2px solid var(--line);border-radius:24px;box-shadow:0 6px 0 var(--line);padding:22px;max-width:460px}
.rapport .ent{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.rapport .ent svg{width:40px;height:40px;border-radius:12px}
.rapport .ent b{font:800 1.08rem/1.2 var(--display);display:block}
.rapport .ent small{color:var(--soft)}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 16px}
.chiffres div{background:color-mix(in srgb,var(--c-bleu) 9%,var(--card));border:2px solid color-mix(in srgb,var(--c-bleu) 25%,var(--line));border-radius:14px;padding:10px;text-align:center}
.chiffres b{display:block;font:800 1.5rem/1.1 var(--display)}
.chiffres span{font-size:.8rem;color:var(--soft)}
.rapport ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.rapport li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem}
.rapport li .ico{width:20px;height:20px;color:var(--c-vert);margin-top:3px}
.rapport .exemple{margin-top:14px;font-size:.8rem;color:var(--soft)}
.liste-ok{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.liste-ok li{display:flex;gap:12px;align-items:flex-start}
.liste-ok .ico{color:var(--ogre-d);margin-top:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .liste-ok .ico{color:#8FD07E}}

/* chiffres officiels (brevet) */
.stat{--c:var(--c-bleu)}
.stat b.grand{display:block;font:800 clamp(2.6rem,12vw,3.6rem)/1 var(--display);color:color-mix(in srgb,var(--c) 85%,var(--ink));margin-bottom:8px}
.source{display:block;margin-top:12px;font-size:.84rem;color:var(--soft)}

/* prix */
.prix{display:grid;gap:22px}
@media (min-width:820px){.prix{grid-template-columns:1fr 1.15fr;align-items:stretch}}
.offre{background:var(--card);border:2px solid var(--line);border-radius:24px;box-shadow:0 6px 0 var(--line);padding:26px 22px}
.offre.complet{border-color:color-mix(in srgb,var(--ogre) 55%,var(--line));box-shadow:0 6px 0 color-mix(in srgb,var(--ogre) 60%,var(--line))}
.offre h3{font-size:1.3rem}
.offre .montant{font:800 2.3rem/1 var(--display);margin:14px 0 4px}
.offre .montant small{font-size:1rem;color:var(--soft);font-weight:700}
.offre .essai{display:inline-block;background:color-mix(in srgb,var(--sun) 35%,var(--card));border-radius:10px;padding:3px 10px;font-weight:800;font-size:.92rem;margin:6px 0 4px}
.offre ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.offre li{display:flex;gap:10px;align-items:flex-start}
.offre li .ico{width:20px;height:20px;color:var(--ogre-d);margin-top:3px}
.mention{font-size:.86rem;color:var(--soft);margin-top:18px}

/* commencer (QR code vers l'appli) */
.commencer{display:grid;gap:26px;align-items:center}
@media (min-width:860px){.commencer{grid-template-columns:1.2fr .8fr}}
.qr{background:#fff;border:2px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 6px 0 var(--line);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:280px;margin:0 auto}
.qr svg{width:200px;height:200px}
.qr p{color:#41483B;font-size:.9rem;text-align:center}
.boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* questions fréquentes */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line);padding:0 18px}
.faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;font:800 1.06rem/1.35 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:3px solid var(--soft);border-bottom:3px solid var(--soft);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .rep{padding:0 0 18px;color:var(--soft)}
.faq .rep p+p{margin-top:10px}

/* appel final */
.final{text-align:center}
.final .cont{display:flex;flex-direction:column;align-items:center;gap:14px}
.final .medaillon{width:150px}
.final p{color:var(--soft);max-width:560px}

/* pied de page */
footer{border-top:1px solid var(--line);padding:34px 0 120px;color:var(--soft);font-size:.92rem}
footer .cont{display:grid;gap:18px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:var(--soft);font-weight:700}
footer button.lien-btn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--soft);text-decoration:underline;cursor:pointer}

/* bandeau de consentement : deux boutons identiques, aucun pré-choix */
.cc{position:fixed;left:10px;right:10px;bottom:10px;z-index:50;max-width:560px;margin:0 auto;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.18),0 5px 0 var(--line);padding:14px 16px 14px}
.cc[hidden]{display:none}
.cc h2{font-size:1.05rem;margin-bottom:4px}
.cc p{font-size:.86rem;line-height:1.45;color:var(--soft)}
.cc .cc-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.cc-btn{min-height:46px;border-radius:14px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:800 1rem/1.2 var(--display);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.cc-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.cc a{font-weight:700}

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