/* Charte commune des outils (12/10/2026) : la même allure que l'accueil et que naimazzouz.fr.
   Crème, bleu nuit, Bodoni Moda pour les titres, Jost pour le texte, cadres droits.
   Une seule page, deux allures : vitrine sur ordinateur (grand dessin, cadre blanc),
   liste compacte sur téléphone (dessin en bandeau, l'outil tout de suite).
   Chargée en dernier : elle ne touche ni aux données ni à la logique des outils. */
@font-face{font-family:'Jost';src:url(/fonts/jost.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(/fonts/bodoni-moda.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(/fonts/bodoni-moda-italique.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}

:root{
 --creme:#f4f1ea;--nuit:#0b1b3a;--encre:#3d4e75;--gris:#4a5470;--trait:#ddd7c9;--trait-doux:#ece7dc;
 --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;--sans:'Jost','Futura','Avenir Next','Segoe UI',sans-serif;
 /* Jetons des outils ramenés à la charte */
 --ink:var(--nuit);--bg:var(--creme);--line:var(--trait);--mute:var(--gris);--card:#fff;--acc:var(--nuit);--soft:var(--trait-doux)
}
html body{background:var(--creme);color:var(--nuit);font-family:var(--sans);font-weight:400}
a,a:visited{color:var(--nuit)}
a:hover{color:var(--encre)}

/* En-tête : celui de l'accueil, en plus petit */
html body header.entete{display:flex;align-items:center;justify-content:space-between;gap:6px 20px;padding:12px max(16px,calc((100vw - 1328px)/2));background:#fff;border-bottom:1px solid #e4e0d6;border-top:4px solid var(--outil,var(--nuit))}
html body header.entete .site{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:2px 0;border:0;background:none;min-height:44px;justify-content:center;text-decoration:none}
html body header.entete .site .lg{display:none}
html body header.entete .site .nom{display:flex;flex-direction:column}
html body header.entete .site b{font:400 26px/1.1 var(--serif);color:var(--nuit)}
html body header.entete .site small{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
html body header.entete a.r{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.menu-outils summary{border:1px solid var(--trait)!important;border-radius:0!important;font-size:13px;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase}
.menu-outils[open] summary{border-color:var(--nuit)!important}
.menu-outils nav{border-radius:0!important;border-color:var(--trait)!important}
.menu-outils li a{border-radius:0!important}
.menu-outils li a b{font:400 18px/1.25 var(--serif)}

/* Titres et texte */
html body h1{font:400 clamp(30px,4vw,46px)/1.12 var(--serif);letter-spacing:-.005em;text-wrap:balance;color:var(--nuit)}
html body h2{font:400 clamp(22px,2.4vw,27px)/1.2 var(--serif);color:var(--nuit)}
html body h3{font-family:var(--serif);font-weight:400}
html body .lead{font-size:18px;font-weight:300;line-height:1.6;color:var(--gris)}
html body .msg,html body .m,html body .note,html body .note-v{color:var(--gris)}
html body b,html body strong{font-weight:500}

/* Étapes numérotées : cadres blancs droits, numéro dans la couleur de l'outil */
html body .step{background:#fff;border:1px solid var(--trait);border-radius:0;padding:20px 22px;margin:16px 0;box-shadow:none}
html body .n,html body .num{border-radius:0;width:30px;height:30px;font:500 15px/1 var(--sans)}

/* Boutons, puces, champs : rectangles, bleu nuit pour le choix fait */
html body .btn,html body .chip,html body .dom,html body .sug button,html body input[type=text],html body input[type=search],html body select,
html body .fo,html body .li .btn,html body #map,html body .note,html body .note-v,html body .tag,html body .ty,html body .panne,
html body .partage-recherche button,html body .vign-titre,html body .illu-msg>img,html body .dom .e img{border-radius:0}
html body .btn{font-weight:500;letter-spacing:.02em}
html body .btn[aria-pressed=true],html body .btn:not(.light):not([aria-pressed=false]){background:var(--nuit);color:#fff}
html body .btn.light,html body .btn[aria-pressed=false]{background:#fff;border:1px solid var(--trait);color:var(--nuit)}
html body .chip{border-width:1px;border-color:var(--trait)}
html body .chip[aria-pressed=true]{border-color:var(--nuit);background:var(--trait-doux)}
html body .dom{border-width:1px}
html body input[type=text],html body input[type=search],html body select{border:1px solid #8a8f99!important;background:#fff}
html body .fo{border-color:var(--trait)}
html body .fo h3{font-size:21px}
html body .ty{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding:3px 8px}
html body .note,html body .note-v{background:var(--trait-doux)}

/* Couleur de l'outil : reconnue aussi par le dessin du bandeau (la vignette du titre n'est plus là). */
:root:has(.ouverture-outil [data-vign-l="stage"]){--outil:#C2410C;--outil-fond:#FFF0E6}
:root:has(.ouverture-outil [data-vign-l="apres-3e"]){--outil:#15803D;--outil-fond:#E7F6EC}
:root:has(.ouverture-outil [data-vign-l="formation"]){--outil:#1D4ED8;--outil-fond:#E8EEFD}
:root:has(.ouverture-outil [data-vign-l="aide"]){--outil:#7C3AED;--outil-fond:#F1EAFE}
:root:has(.ouverture-outil [data-vign-l="lycee"]){--outil:#0F766E;--outil-fond:#E3F4F1}

/* Bandeau illustré en tête d'outil (dessin Canva de l'outil) */
.ouverture-outil{position:relative;margin:0 auto 8px;background:var(--nuit)}
.ouverture-outil>img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.cadre-outil{background:#fff;display:flex;flex-direction:column;gap:8px}
.cadre-outil .capitales{margin:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--outil,var(--gris))}
html body .cadre-outil h1{margin:0}
html body .cadre-outil .lead{margin:0}
.cadre-outil p:not(.lead):not(.capitales){margin:0}
/* Ordinateur : vitrine, le cadre blanc posé sur le dessin */
@media (min-width:701px){
 html body main:has(>.ouverture-outil){max-width:none;padding-top:0}
 html body main:has(>.ouverture-outil)>*:not(.ouverture-outil){max-width:900px;margin-left:auto!important;margin-right:auto!important}
 .ouverture-outil{max-width:1280px;margin:24px auto 32px;min-height:clamp(22rem,34vw,460px);display:flex;align-items:flex-end;justify-content:flex-start;padding:0 0 32px 32px}
 .ouverture-outil>img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:50% 40%}
 .cadre-outil{position:relative;max-width:560px;padding:26px 28px 24px}
}
/* Téléphone : bandeau étroit, puis le titre sur le fond crème */
@media (max-width:700px){
 html body header.entete .site b{font-size:22px}
 .ouverture-outil{margin:-18px -16px 0;background:none}
 .ouverture-outil>img{aspect-ratio:5/2;object-position:50% 40%}
 .cadre-outil{background:none;padding:16px 16px 4px}
 /* Sur le crème (sans cadre blanc), couleur de l'outil foncée pour garder le contraste AA. */
 .cadre-outil .capitales{color:color-mix(in srgb,var(--outil,var(--gris)) 82%,#000)}
 html body .cadre-outil h1{font-size:30px}
 html body .cadre-outil .lead{font-size:16px}
 html body .step{padding:16px}
}

/* Panneau « Tu habites où ? » des pages d'académie : sous le bandeau, sans second dessin, cadres droits. */
main:has(>.ouverture-outil) .ac-illu{display:none}
html body .ac-picker{border-radius:0;border-color:var(--trait);padding:20px 22px}
html body .ac-picker button,html body .ac-picker input,html body .ac-options,html body .ac-suggestions,html body .ac-options button,html body .ac-suggestions button{border-radius:0}
html body .ac-options,html body .ac-suggestions{background:#fff}
@media (max-width:700px){html body .ac-picker{padding:16px}}

/* Derniers coins arrondis (12/10/2026) : bouton « changer » d'académie, lien d'évitement,
   et toutes les cartes Leaflet (bulle, zoom), comme sur Trouve ton stage. */
html body .doms .changer,html body button.changer,html body .skip-link{border-radius:0}
html body .leaflet-popup-content-wrapper,html body .leaflet-bar,html body .leaflet-bar a{border-radius:0}

/* Pied de page */
html body footer{color:var(--gris);border-top:1px solid var(--trait)}
html body [data-pied-commun] a{color:var(--nuit)}