/* Scienc'élite : la structure de soutien scolaire. Le cahier français (réglure Seyès, marge rouge), l'encre bleue
   du stylo, le crayon à papier. Titres Bitter, comme un manuel ; texte Atkinson Hyperlegible, conçue pour bien lire
   (elle aide aussi les élèves dys). Le logo vient de la console. Surcharge le moteur commun (sites/_moteur/site.css). */
:root{
  --ink:#1d2433; --soft:#4f5869; --label:#1f4fa3; --paper:#ffffff;
  --encre:#1f4fa3; --encre-f:#173b7a; --marge:#d6453d; --crayon:#5b6270; --papier:#fdfdfb;
  --sand:#eef1f8; --sand-2:#cdd5e8; --cream:#f8f9fc; --line:#e2e6ef;
  --display:"Bitter",Georgia,serif; --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --seyes:linear-gradient(rgba(96,118,200,.30) 1px,transparent 1px) 0 0/100% 32px,
          repeating-linear-gradient(transparent 0 7px,rgba(150,165,225,.20) 7px 8px),
          linear-gradient(90deg,rgba(96,118,200,.20) 1px,transparent 1px) 0 0/32px 100%;
  --x-marge:max(10px,calc((100vw - 1160px) / 2 - 6px));
}
body{background:var(--paper);color:var(--ink);font:17.5px/1.7 var(--body)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--encre);outline-offset:3px}

/* Bandeau, en-tête, menu */
.util{background:var(--encre-f);color:#e5ebf7}
.util .wrap{justify-content:center}
.util a{border-bottom-color:rgba(229,235,247,.45)}
header{border-bottom:1px solid var(--line)}
.brand{flex-shrink:0}
.brand img{height:62px;width:auto}
.brand-nom{font:700 28px/1 var(--display);color:var(--encre-f)}
.menu a{color:var(--soft)}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--encre-f);border-bottom:2px solid var(--marge)}
.menu a.btn{color:#fff;border:0}

/* Titres */
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.01em}
h1{line-height:1.1}
h3{font-size:22px}
.lead,.soft{color:var(--soft)}
.kicker{font:italic 500 17px/1.3 var(--display);letter-spacing:0;text-transform:none;color:var(--marge)}
.kicker::before{display:none}

/* Boutons */
.btn{border:1px solid var(--encre);background:var(--encre);color:#fff;border-radius:3px;font-weight:700}
.btn:hover{background:var(--encre-f);border-color:var(--encre-f);color:#fff}
.btn.line{background:#fff;color:var(--encre-f);border-color:var(--encre)}
.btn.line:hover{background:var(--encre);color:#fff}

/* Accueil : une page de cahier, avec sa marge rouge */
.hero{position:relative;background:var(--seyes),var(--papier);border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;top:0;bottom:0;left:var(--x-marge);width:2px;background:var(--marge);opacity:.75}
.hero h1{font-size:clamp(40px,5.6vw,68px)}
.hero .lead{background:rgba(253,253,251,.82)}
.hero-grid:has(> .panel:not(.has-photo)){grid-template-columns:minmax(0,1fr)}
.hero-grid > .panel:not(.has-photo){display:none}
.hero-grid .panel.est-logo{background:#fff;border:1px solid var(--line);aspect-ratio:1;box-shadow:6px 6px 0 var(--sand-2);border-radius:2px}
.hero-grid .panel.est-logo img{padding:10%}
.facts{border-top:2px solid var(--ink)}
.facts b{font-family:var(--display);font-weight:700;font-size:28px;color:var(--encre-f)}

/* Cartes : des fiches bristol */
.panel{background:var(--sand);border:1px solid var(--line);border-radius:2px}
.cards-photos{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.box{border:1px solid var(--line);border-radius:2px;background:#fff;box-shadow:4px 4px 0 var(--sand);border-top:3px solid var(--encre)}
.cards-photos .box:nth-child(2n){border-top-color:var(--marge)}
.box a.more{color:var(--encre)}
.facts-i{border-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.facts-i li,.facts-i li.avec-icone{display:grid;grid-template-columns:1fr;gap:8px;align-content:start;border:1px solid var(--line);padding:22px;background:#fff;box-shadow:4px 4px 0 var(--sand)}
.facts-i li .soft{grid-column:auto}
.facts-i b{font:700 20px/1.3 var(--display);color:var(--ink)}
.icone{width:44px;height:44px;border:0;border-radius:50%;background:var(--sand);color:var(--encre)}
.rows{border-top:2px solid var(--ink)}
.rows li{position:relative}
.rows li h3{font-size:21px;color:var(--encre-f)}
.curs{border-top:2px solid var(--ink)}
.curs div{border-color:var(--line)!important}
.notes div{border-top:3px solid var(--encre)}
.notes b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:20px}

/* En-têtes de pages : la même page de cahier */
.phead{position:relative;background:var(--seyes),var(--papier)}
.phead::before{content:"";position:absolute;top:0;bottom:0;left:var(--x-marge);width:2px;background:var(--marge);opacity:.75}
.subnav{gap:6px 22px}
.subnav a{border:0;padding:4px 0;background:none;color:var(--encre-f);text-decoration:underline;text-decoration-color:var(--marge);text-decoration-thickness:2px;text-underline-offset:5px}
.subnav a:hover{color:var(--marge)}
section[id]{scroll-margin-top:110px}

/* Inscriptions, bandeau d'appel, tableaux */
.sign{border:1px solid var(--line);border-top:3px solid var(--encre);border-radius:2px;box-shadow:4px 4px 0 var(--sand)}
.band,.band .inner{background:var(--encre-f)}
.band h2{color:#fff}
.band .btn{background:#fff;color:var(--encre-f);border-color:#fff}
.band .btn:hover{background:var(--marge);border-color:var(--marge);color:#fff}
.news{border-top-color:var(--ink)}
.news .when{color:var(--marge)}
.tw{border:1px solid var(--line);background:#fff}
th{background:var(--sand);color:var(--encre-f);font-weight:700}
td,th{border-color:var(--line)!important}
td.lv{font-family:var(--display);font-weight:700;color:var(--encre-f)}
.qualif{border-radius:2px;border-top:3px solid var(--encre)}
.cgrid div{border-top:2px solid var(--ink)}
input,textarea,select{border-radius:3px}
input:focus,textarea:focus{border-color:var(--encre)}

/* Pied de page bleu encre */
footer{background:var(--encre-f);color:#cfd8ea;border-top:0}
footer h4{color:#fff;letter-spacing:.04em;text-transform:none;font-size:15px}
footer a{color:#e5ebf7}
footer a:hover{color:#fff}
footer .brand-nom{color:#fff}
footer .legal{border-top-color:rgba(255,255,255,.16)!important;color:#a9b8d3}
.flogos img{height:90px;background:#fff;padding:8px;border-radius:2px}

@media (max-width:860px){.hero::before,.phead::before{display:none}}
@media (max-width:640px){.hero-grid .panel.est-logo{width:min(220px,64%);margin:0 auto}.facts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.btn{width:100%;justify-content:center}.ctas{display:grid}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}