/* Résultats d'examens — design propre à la section (05/10/2026), indépendant du site de la ville. */
:root{
  --encre:#0f172a; --texte:#334155; --doux:#64748b; --fond:#f5f7fb; --carte:#fff; --bord:#e2e8f0;
  --indigo:#4f46e5; --indigo-f:#312e81; --cyan:#06b6d4; --vert:#10b981; --ambre:#f59e0b;
  --rayon:18px; --ombre:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--texte);background:var(--fond);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--encre);line-height:1.2;letter-spacing:-.02em}
.cadre{max-width:1180px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sauter{position:absolute;left:-999px}.sauter:focus{left:10px;top:10px;z-index:99;background:#fff;padding:.5rem}

/* En-tête */
.entete{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--bord)}
.entete-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.marque{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;color:var(--encre)}
.marque:hover{text-decoration:none}
.marque-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--indigo),var(--cyan));box-shadow:0 6px 16px rgba(79,70,229,.35)}
.marque-logo svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.marque-an{font-weight:600;color:var(--doux)}
.menu{display:flex;gap:.25rem}
.menu a{padding:.45rem .8rem;border-radius:10px;color:var(--texte);font-weight:600;font-size:.94rem;white-space:nowrap}
.menu a:hover{background:#eef2ff;color:var(--indigo);text-decoration:none}

/* Bandeau */
.heros{color:#e0e7ff;padding:2.6rem 0 2.4rem;
  background:radial-gradient(900px 420px at 85% -10%,rgba(6,182,212,.35),transparent 60%),
             radial-gradient(700px 380px at 0% 110%,rgba(16,185,129,.22),transparent 60%),
             linear-gradient(135deg,#1e1b4b 0%,#312e81 55%,#3730a3 100%)}
.heros-accueil{padding:3.6rem 0 3rem}
.heros-court{padding:4rem 0}
.heros h1{color:#fff;font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:800;margin:.35rem 0 .8rem}
.chapo{font-size:1.1rem;max-width:64ch;margin:0;color:#c7d2fe}
.surtitre{margin:0;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:#a5f3fc}
.drapeau{font-size:1.35em;line-height:1;vertical-align:-.12em}
.ariane{font-size:.88rem;margin-bottom:1.1rem;color:#a5b4fc}
.ariane a{color:#e0e7ff}.ariane span{margin:0 .45rem;opacity:.5}

.recherche{display:flex;align-items:center;gap:.6rem;margin:1.8rem 0 1rem;max-width:620px;background:#fff;border-radius:999px;
  padding:.35rem .35rem .35rem 1.1rem;box-shadow:0 18px 40px rgba(15,23,42,.35)}
.recherche svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--doux);stroke-width:2.2;stroke-linecap:round}
.recherche input{flex:1;border:0;outline:0;font:inherit;font-size:1.02rem;padding:.75rem .2rem;color:var(--encre);background:transparent;min-width:0}
.puces{display:flex;flex-wrap:wrap;gap:.5rem}
.puce{font:inherit;font-size:.9rem;font-weight:600;padding:.45rem .95rem;border-radius:999px;cursor:pointer;color:#e0e7ff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);transition:background .15s}
.puce:hover{background:rgba(255,255,255,.16)}
.puce.actif{background:#fff;color:var(--indigo-f);border-color:#fff}
.chiffres{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem;font-size:.95rem;color:#c7d2fe}
.chiffres strong{color:#fff;font-size:1.15rem}

.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.8rem}
.tuile{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:.9rem 1rem}
.tuile-et{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:#a5b4fc;margin-bottom:.25rem}
.tuile strong{color:#fff;font-weight:600;font-size:.98rem;line-height:1.4}

/* Accueil : régions et cartes */
.region{margin:2.4rem 0}
.region h2{font-size:1.35rem;margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.region h2::before{content:"";width:6px;height:22px;border-radius:3px;background:linear-gradient(var(--indigo),var(--cyan))}
.cartes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:start}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:1.1rem 1.2rem;box-shadow:var(--ombre);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.carte:hover{transform:translateY(-3px);border-color:#c7d2fe;box-shadow:0 14px 34px rgba(79,70,229,.13)}
.carte-tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.carte-tete h3{margin:0;font-size:1.06rem;flex:1}
.pastille{font-size:.75rem;font-weight:700;color:var(--indigo);background:#eef2ff;border-radius:999px;padding:.1rem .55rem}
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:.28rem 0 .28rem 1.15rem;position:relative;border-top:1px solid #f1f5f9}
.liste li:first-child{border-top:0}
.liste li::before{content:"";position:absolute;left:0;top:.85em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.liste a{color:var(--encre);font-weight:500}
.liste a:hover{color:var(--indigo)}
.vide{text-align:center;color:var(--doux);padding:2rem 0}

/* Page d'examen */
.colonnes{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start;padding-top:1.6rem;padding-bottom:2rem}
.texte h2{font-size:1.4rem;margin:2.2rem 0 1rem}
.etapes{list-style:none;margin:0;padding:0;counter-reset:e}
.etapes li{counter-increment:e;position:relative;background:var(--carte);border:1px solid var(--bord);border-radius:14px;min-height:3.9rem;
  padding:1rem 1.1rem 1rem 3.6rem;margin:.7rem 0;box-shadow:var(--ombre)}
.etapes li::before{content:counter(e);position:absolute;left:1rem;top:1rem;width:1.85rem;height:1.85rem;border-radius:50%;
  display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--indigo),var(--cyan))}
.etapes strong{display:block;color:var(--encre)}
.etapes span{color:var(--doux);font-size:.95rem}
.encart{border-radius:14px;padding:1rem 1.2rem;margin:1.6rem 0;font-size:.97rem}
.encart-info{background:#ecfeff;border:1px solid #a5f3fc;color:#155e75}
.encart-alerte{background:#fffbeb;border:1px solid #fde68a;color:#78350f}
.faq details{background:var(--carte);border:1px solid var(--bord);border-radius:14px;margin:.6rem 0;padding:0 1.1rem;box-shadow:var(--ombre)}
.faq summary{cursor:pointer;font-weight:700;color:var(--encre);padding:.95rem 0;list-style:none;position:relative;padding-right:1.5rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:.8rem;font-size:1.3rem;color:var(--indigo)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 1rem;color:var(--texte)}
.cote{display:grid;gap:1rem;position:sticky;top:84px}
.boite{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:1.1rem 1.2rem;box-shadow:var(--ombre)}
.boite-titre{margin:0 0 .5rem;font-weight:800;color:var(--encre)}

.bouton{display:inline-block;font-weight:700;padding:.8rem 1.2rem;border-radius:12px;background:#fff;color:var(--indigo-f)}
.bouton:hover{text-decoration:none;filter:brightness(.97)}
.bouton-plein{display:block;text-align:center;color:#fff;background:linear-gradient(135deg,var(--indigo),#4338ca);box-shadow:0 10px 22px rgba(79,70,229,.3)}
.pub{margin:1.8rem 0;min-height:100px}

/* Pied de page */
.pied{margin-top:3rem;background:#0f172a;color:#94a3b8;padding-top:2.4rem;font-size:.94rem}
.pied a{color:#cbd5e1}
.pied-grille{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.pied-titre{color:#fff;font-weight:800;margin:0 0 .5rem}
.pied ul{list-style:none;margin:0;padding:0;columns:2}
.pied li{margin:.2rem 0}
.pied-bas{border-top:1px solid #1e293b;margin-top:2rem;padding:1rem 20px;font-size:.85rem}

@media (max-width:900px){
  .colonnes{grid-template-columns:1fr}
  .cote{position:static}
  .tuiles{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr}
}
@media (max-width:560px){
  .marque-an{display:none}
  .menu a{padding:.4rem .5rem;font-size:.88rem}
  .menu a:first-child{display:none}
  .heros-accueil{padding:2.4rem 0 2.2rem}
  .chiffres{gap:.9rem}
}
.texte > p{font-size:1.04rem;margin:0 0 1rem;color:var(--texte)}