/* ===========================================================================
   licenceportailsante.fr
   Charte du site : navy, corail, turquoise. Typographie sans empattement.
   =========================================================================== */

:root {
  /* palette */
  --navy: #01466e;
  --navy-deep: #023554;
  --navy-nuit: #012338;
  --navy-clair: #e6eef4;
  --coral: #f34c4b;
  --coral-light: #fef0f0;
  --coral-fonce: #c92f2e;
  --turquoise: #06b6d4;
  --turquoise-light: #e0f7fa;
  --turquoise-vif: #22d3ee;
  --vert: #16a34a;
  --vert-light: #dcfce7;
  --ambre: #d97706;
  --ambre-light: #fef5e4;

  /* couleurs de section */
  --sec-rose: #e91e8c;      --sec-rose-soft: #fdeaf5;
  --sec-bleu: #5b7ec7;      --sec-bleu-soft: #eaeffa;
  --sec-teal: #0d9488;      --sec-teal-soft: #e0f2f0;
  --sec-vert: #16a34a;      --sec-vert-soft: #dcfce7;
  --sec-mandarine: #f97316; --sec-mandarine-soft: #fff1e6;
  --sec-ambre: #d97706;     --sec-ambre-soft: #fef5e4;

  --bg: #f0f4f8;
  --border: #e2e8f0;
  --border-douce: #eef2f6;
  --muted: #64748b;
  --encre: #0f2231;
  --encre-douce: #334155;
  --white: #fff;

  /* mesures */
  --w-large: 1180px;
  --w-texte: 740px;
  --r: 16px;
  --r-s: 10px;
  --r-xs: 8px;
  --ombre-s: 0 1px 2px rgba(1, 70, 110, .06);
  --ombre: 0 2px 4px rgba(1, 70, 110, .05), 0 12px 28px rgba(1, 70, 110, .07);
  --ombre-l: 0 4px 8px rgba(1, 70, 110, .06), 0 24px 48px rgba(1, 70, 110, .12);

  /* typographie */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

.wrap { width: 100%; max-width: var(--w-large); margin: 0 auto; padding-inline: 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 200;
}
.skip:focus { left: 0; }

a { color: var(--navy); text-underline-offset: 2px; }
a:hover { color: var(--coral); }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; border-radius: 4px; }

/* ⛔ RÈGLE DES BOUTONS SUR FOND SOMBRE
   Un .btn sans déclinaison n'a ni fond ni couleur propre : il hérite, et
   devient invisible sur une surface sombre. Les surfaces sont les mêmes que
   pour les liens, ci-dessous. Toute nouvelle surface sombre va dans les deux
   listes. */
.hero   .btn:not([class*="btn-"]),
.band-sombre .btn:not([class*="btn-"]),
.cta    .btn:not([class*="btn-"]),
.suivre .btn:not([class*="btn-"]) {
  background: #fff; color: var(--navy); border-color: #fff;
}

/* ⛔ RÈGLE DES LIENS SUR FOND SOMBRE
   Le lien par défaut est bleu marine. Posé sur une surface bleu marine, il
   devient ton sur ton et invisible. Toute surface sombre doit donc être
   listée ici. En créer une nouvelle sans l'ajouter à cette liste est un bug.
   Surfaces sombres du site : .hero, .band-sombre, .cta, .suivre,
   .card-illus .card-media, .topbar, .site-footer (ces deux dernières ont
   déjà leur propre couleur de lien, plus discrète, et restent lisibles). */
.hero a:not(.btn):not(.badge),
.band-sombre a:not(.btn),
.cta a:not(.btn),
.suivre a:not(.btn),
.card-illus .card-media a:not(.btn) {
  color: var(--turquoise-vif);
  text-decoration-color: rgba(34, 211, 238, .55);
}
.hero a:not(.btn):not(.badge):hover,
.band-sombre a:not(.btn):hover,
.cta a:not(.btn):hover,
.suivre a:not(.btn):hover,
.card-illus .card-media a:not(.btn):hover {
  color: #fff;
  text-decoration-color: #fff;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ============================================================ bandeau d'état */

.topbar {
  background: var(--navy-nuit); color: #a7c7d8; font-size: 13.5px;
}
.topbar .wrap { display: flex; align-items: center; gap: 10px; padding-block: 9px; flex-wrap: wrap; }
.topbar .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none;
  box-shadow: 0 0 0 4px rgba(243, 76, 75, .22);
}
.topbar b { color: #fff; font-weight: 600; }
.topbar a { color: var(--turquoise-vif); margin-left: auto; white-space: nowrap; font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: var(--turquoise-vif); }

/* ==================================================================== en-tête */

.site-header {
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.header-inner { display: flex; align-items: center; gap: 20px; padding-block: 13px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }
.brand svg { flex: none; }
.brand-logo { flex: none; width: 52px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--display); font-size: 25px; font-weight: 700;
  letter-spacing: .2px; text-transform: uppercase; color: var(--navy);
}
.brand-text small { color: var(--muted); font-size: 11.5px; letter-spacing: .1px; }

.burger {
  display: none; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 9px 13px; cursor: pointer; line-height: 1; color: var(--navy);
}

.site-nav { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; }
.site-nav a {
  color: var(--encre-douce); text-decoration: none; padding: 9px 13px;
  border-radius: var(--r-xs); white-space: nowrap; transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--bg); color: var(--navy); }
.site-nav a[aria-current="page"] { color: var(--navy); background: var(--navy-clair); font-weight: 600; }
.site-nav .nav-highlight {
  background: var(--coral); color: #fff; font-weight: 600; margin-left: 8px;
  box-shadow: 0 6px 16px rgba(243, 76, 75, .3);
}
.site-nav .nav-highlight:hover { background: var(--coral-fonce); color: #fff; }
.site-nav .nav-highlight[aria-current="page"] { background: var(--coral-fonce); color: #fff; }

@media (max-width: 980px) {
  .burger { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 10px 24px 18px; box-shadow: var(--ombre);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 12px; }
  .site-nav .nav-highlight { margin: 10px 0 0; text-align: center; }
  .site-header { position: static; }
}

/* =============================================================== boutons */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; text-decoration: none; border: 1.5px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--coral); color: #fff; box-shadow: 0 8px 22px rgba(243, 76, 75, .32); }
.btn-principal:hover { background: var(--coral-fonce); color: #fff; box-shadow: 0 10px 26px rgba(243, 76, 75, .4); }
.btn-secondaire { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-secondaire:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-sombre { background: var(--navy); color: #fff; }
.btn-sombre:hover { background: var(--navy-deep); color: #fff; }
.btn-ligne { background: var(--white); color: var(--navy); border-color: var(--border); }
.btn-ligne:hover { border-color: var(--navy); background: var(--navy-clair); color: var(--navy); }

/* ================================================================== héros */

.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 500px at 78% 6%, rgba(6, 182, 212, .30), transparent 62%),
    radial-gradient(700px 420px at 4% 96%, rgba(243, 76, 75, .24), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 55%, var(--navy-nuit) 100%);
  padding-block: 66px 74px;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .5;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(6, 182, 212, .18); color: var(--turquoise-vif);
  border: 1px solid rgba(34, 211, 238, .38);
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}

.hero h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(42px, 6vw, 72px); line-height: .98; letter-spacing: 0;
  margin: 0 0 20px; color: #fff;
}
.hero h1 em { font-style: normal; color: var(--turquoise-vif); }
.hero-chapo { font-size: 19px; line-height: 1.65; color: #bcd3e0; margin: 0 0 30px; max-width: 34em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 24px; font-size: 13.5px; color: #8fb0c2; }
.hero-illus { display: block; width: 100%; max-width: 520px; margin-inline: auto; }

/* fiche d'identité */

.fiche {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r); backdrop-filter: blur(6px); overflow: hidden;
}
.fiche h2 {
  margin: 0; padding: 15px 22px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.1px;
  font-family: var(--sans); font-weight: 600; color: #fff; background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.fiche dl { margin: 0; padding: 8px 22px 20px; }
.fiche dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .9px; color: var(--turquoise-vif); margin-top: 17px; font-weight: 600; }
.fiche dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: #fff; }
.fiche dd small { display: block; font-weight: 400; font-size: 13.5px; color: #9bbccd; margin-top: 2px; line-height: 1.5; }

/* ========================================================= bandes de section */

.band { padding-block: 78px; }
.band-alt { background: var(--bg); }
.band-sombre { background: var(--navy-deep); color: #c3d8e3; }
.band-sombre h2, .band-sombre h3 { color: #fff; }

.band-head { max-width: 46em; margin-bottom: 40px; }
.band-head .surtitre {
  display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--turquoise); margin-bottom: 10px;
}
.band-sombre .band-head .surtitre { color: var(--turquoise-vif); }
.band-head h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.04; margin: 0 0 12px; color: var(--navy);
}
.band-sombre .band-head h2 { color: #fff; }
.band-head p { margin: 0; color: var(--muted); font-size: 17.5px; }
.band-sombre .band-head p { color: #9fbccb; }

/* compteurs */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stats > div {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r); padding: 28px 24px; position: relative; overflow: hidden;
}
.stats > div::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--turquoise);
}
.stats > div:nth-child(even)::before { background: var(--coral); }
.stats b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 54px; line-height: .9; color: #fff;
}
.stats span { display: block; font-size: 14px; color: #9fbccb; margin-top: 12px; line-height: 1.5; }

/* cartes */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.card {
  --c: var(--navy);
  --c-soft: var(--navy-clair);
  display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 28px 26px; box-shadow: var(--ombre-s);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--c); transform: scaleX(1); transform-origin: left;
}
.card::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 150px; height: 150px;
  border-radius: 50%; background: var(--c-soft); opacity: .6; transition: transform .35s;
}
a.card:hover { border-color: var(--c); box-shadow: var(--ombre-l); transform: translateY(-4px); color: inherit; }
a.card:hover::after { transform: scale(1.35); }
.card > * { position: relative; z-index: 1; }

.card-num {
  position: absolute; z-index: 1; right: 22px; top: 18px;
  font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1;
  color: var(--c); opacity: .3;
}
.card-icone {
  width: 50px; height: 50px; border-radius: 14px;
  background: var(--c); color: #fff; border: 0;
  display: grid; place-items: center; margin-bottom: 20px;
  box-shadow: 0 8px 18px rgba(1, 35, 56, .18);
}
.card h3 { margin: 0 0 9px; font-size: 20.5px; color: var(--navy); font-weight: 650; }
.card p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.card .fleche {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  font-size: 14.5px; font-weight: 700; color: var(--c);
  transition: gap .18s;
}
a.card:hover .fleche { gap: 11px; }

/* déclinaisons de couleur, une par carte */
.c-turquoise { --c: var(--turquoise);      --c-soft: var(--turquoise-light); }
.c-navy      { --c: var(--navy);           --c-soft: var(--navy-clair); }
.c-rose      { --c: var(--sec-rose);       --c-soft: var(--sec-rose-soft); }
.c-bleu      { --c: var(--sec-bleu);       --c-soft: var(--sec-bleu-soft); }
.c-corail    { --c: var(--coral);          --c-soft: var(--coral-light); }
.c-vert      { --c: var(--sec-vert);       --c-soft: var(--sec-vert-soft); }
.c-teal      { --c: var(--sec-teal);       --c-soft: var(--sec-teal-soft); }
.c-mandarine { --c: var(--sec-mandarine);  --c-soft: var(--sec-mandarine-soft); }
.c-ambre     { --c: var(--sec-ambre);      --c-soft: var(--sec-ambre-soft); }


/* L'étiquette d'une carte prend la couleur de la carte, pas le turquoise
   du bandeau d'accueil. On assombrit le texte pour garder le contraste
   lisible sur les teintes claires (mandarine, ambre). */
.card .badge {
  margin-bottom: 14px;
  color: var(--c);
  color: color-mix(in srgb, var(--c) 72%, #01223a);
  background: var(--c-soft);
  border-color: var(--c);
  border-color: color-mix(in srgb, var(--c) 34%, transparent);
}

.card-blocs::after { display: none; }
.card-blocs .ects { position: relative; z-index: 1; }
.card-blocs .ects {
  font-family: var(--display); font-weight: 700; font-size: 44px; color: var(--navy);
  line-height: 1; margin: 0 0 6px;
}
.card-blocs .ects small { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 8px; font-weight: 500; letter-spacing: .6px; }

.card-illus { padding: 0; overflow: hidden; }
.card-illus .card-media {
  background: linear-gradient(140deg, var(--navy), var(--navy-deep));
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.card-illus .card-media h3 { color: #fff; margin: 0; font-size: 22px; }
.card-illus .card-media .an {
  font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--turquoise-vif); line-height: 1;
}
.card-illus .card-corps { padding: 22px 26px 26px; }

/* frise */

.frise { list-style: none; margin: 0; padding: 0; position: relative; }
.frise::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.frise li { position: relative; padding: 0 0 30px 38px; }
.frise li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--border);
}
.frise li.fait::before { border-color: var(--turquoise); background: var(--turquoise); box-shadow: 0 0 0 4px var(--turquoise-light); }
.frise li.encours::before { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 4px var(--coral-light); }
.frise .quand { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--turquoise); }
.frise li.avenir .quand { color: var(--muted); }
.frise .quoi { display: block; font-size: 17.5px; font-weight: 600; margin-top: 3px; color: var(--encre); }
.frise .note { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

/* La frise sur deux colonnes : le rail devient porté par chaque jalon,
   sinon le trait unique de l'<ol> ne suivrait pas le découpage en colonnes. */
.frise--duo { columns: 2; column-gap: 54px; }
.frise--duo::before { display: none; }
.frise--duo li { break-inside: avoid; -webkit-column-break-inside: avoid; }
.frise--duo li::after {
  content: ""; position: absolute; left: 9px; top: 30px; bottom: -4px;
  width: 2px; background: var(--border);
}
.frise--duo li:last-child::after { display: none; }

/* Les points ouverts, posés sous la frise sur toute la largeur. */
.liste-duo { columns: 2; column-gap: 46px; }
.liste-duo li { break-inside: avoid; margin-bottom: 7px; }

@media (max-width: 760px) {
  .frise--duo, .liste-duo { columns: 1; }
}

/* appel à l'action */

.cta {
  position: relative; overflow: hidden; border-radius: 22px; padding: 46px 48px;
  color: #fff;
  background:
    radial-gradient(700px 300px at 88% 10%, rgba(6, 182, 212, .34), transparent 60%),
    linear-gradient(140deg, var(--navy), var(--navy-nuit));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
}
.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .45;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 {
  margin: 0 0 10px; color: #fff; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; font-size: 36px; line-height: 1.02;
}
.cta p { margin: 0; color: #b6d0dd; font-size: 16.5px; max-width: 40em; }

/* ======================================================= pages de contenu */

.article-shell {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 60px;
  max-width: 1080px; margin: 0 auto; padding: 0 24px 90px;
}
.article-shell.sans-sommaire { grid-template-columns: minmax(0, 1fr); max-width: 800px; }

.toc { position: sticky; top: 96px; align-self: start; padding-top: 38px; }
.toc h2 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
  margin: 0 0 14px; font-weight: 700;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 2px; }
.toc a {
  display: block; padding: 7px 12px; font-size: 14.5px; line-height: 1.45;
  color: var(--encre-douce); text-decoration: none;
  border-left: 2px solid var(--border); border-radius: 0 var(--r-xs) var(--r-xs) 0;
  transition: color .15s, background .15s, border-color .15s;
}
.toc a:hover { color: var(--navy); background: var(--bg); border-left-color: var(--turquoise); }

@media (max-width: 980px) {
  .article-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc {
    position: static; padding: 0; margin: 26px 0 0;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  }
  .toc > div { padding: 18px 20px; }
}

.breadcrumb { font-size: 13.5px; color: var(--muted); padding-block: 24px 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb .sep { margin-inline: 9px; color: var(--border); }

.page { padding-block: 12px 0; min-width: 0; }

.page-head h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(36px, 5.2vw, 56px); line-height: 1.0; margin: 12px 0 0; color: var(--navy);
}
.chapo { font-size: 19.5px; line-height: 1.6; color: var(--encre-douce); margin: 20px 0 0; }
.updated {
  font-size: 13px; color: var(--muted); margin: 22px 0 0;
  padding-top: 18px; border-top: 1px solid var(--border-douce);
}

.page h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 32px; line-height: 1.08; margin: 58px 0 16px; scroll-margin-top: 110px; color: var(--navy);
}
.page h3 { font-size: 20px; margin: 36px 0 8px; font-weight: 650; color: var(--encre); }
.page h4 { font-size: 16.5px; margin: 26px 0 6px; color: var(--navy); font-weight: 600; }

.page p, .page li { font-size: 17px; }
.page ul, .page ol { padding-left: 22px; }
.page li { margin-bottom: 8px; }
.page strong { font-weight: 650; color: var(--encre); }

/* ================================================================== blocs */

.status-banner {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--coral-light); border: 1px solid #fbd5d4; border-left: 4px solid var(--coral);
  border-radius: var(--r-s); padding: 17px 19px; margin: 32px 0 0;
}
.status-banner p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--encre-douce); }
.status-pill {
  flex: none; background: var(--coral); color: #fff;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
  padding: 5px 10px; border-radius: 999px; margin-top: 2px;
}
@media (max-width: 620px) {
  .status-banner { flex-direction: column; gap: 10px; }
  .status-pill { align-self: flex-start; }
}

.encadre {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px 26px; margin: 32px 0;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
.encadre h3 { margin-top: 0; font-size: 18.5px; color: var(--navy); }
.encadre--cle { background: var(--turquoise-light); border-color: #b9e8f2; }
.encadre--alerte { background: var(--coral-light); border-color: #fbd5d4; }
.encadre--ok { background: var(--vert-light); border-color: #bbe9cb; }

.etiquette {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.etiquette--confirme { background: var(--vert-light); color: #15803d; }
.etiquette--projet { background: var(--ambre-light); color: var(--ambre); }
.etiquette--inconnu { background: var(--coral-light); color: var(--coral-fonce); }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; margin: 32px 0; }
.chiffre {
  background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--turquoise);
  border-radius: var(--r-s); padding: 20px; box-shadow: var(--ombre-s);
}
.chiffre:nth-child(even) { border-top-color: var(--coral); }
.chiffre b { display: block; font-family: var(--display); font-weight: 700; font-size: 40px; line-height: .95; color: var(--navy); }
.chiffre span { display: block; font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

.tableau-conteneur {
  overflow-x: auto; margin: 28px 0;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--white);
}
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 17px; border-bottom: 1px solid var(--border-douce); vertical-align: top; }
thead th {
  background: var(--bg); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .9px; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

blockquote {
  margin: 30px 0; padding: 22px 26px; background: var(--navy-clair);
  border-left: 4px solid var(--coral); border-radius: 0 var(--r-s) var(--r-s) 0;
  color: var(--navy); font-size: 19px; font-weight: 500;
}
blockquote p { margin: 0; }

.illustration { margin: 34px 0; text-align: center; }
.illustration img { width: 100%; max-width: 620px; }
.illustration figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; }

/* ======================================================= liens connexes */

.connexes { margin: 64px 0 0; padding-top: 36px; border-top: 1px solid var(--border); }
.connexes h2 {
  margin-top: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 28px; color: var(--navy);
}
.connexes ul { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.connexes li { margin: 0; }

.connexes a {
  --c: var(--turquoise); --c-soft: var(--turquoise-light);
  position: relative; overflow: hidden; display: block; height: 100%;
  padding: 24px 24px 22px; text-decoration: none;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--encre); box-shadow: var(--ombre-s);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.connexes a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--c);
}
.connexes a::after {
  content: ""; position: absolute; right: -46px; top: -46px; width: 130px; height: 130px;
  border-radius: 50%; background: var(--c-soft); opacity: .6; transition: transform .35s;
}
.connexes a:hover { border-color: var(--c); box-shadow: var(--ombre-l); transform: translateY(-4px); }
.connexes a:hover::after { transform: scale(1.35); }
.connexes a b, .connexes a span { position: relative; z-index: 1; }
.connexes a b { display: block; color: var(--navy); font-size: 17.5px; margin-bottom: 6px; }
.connexes a span { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.connexes a b::after {
  content: " \2192"; color: var(--c); font-weight: 700; display: inline-block;
  transition: transform .18s;
}
.connexes a:hover b::after { transform: translateX(4px); }

/* une couleur par carte, en rotation */
.connexes li:nth-child(4n+1) a { --c: var(--turquoise);      --c-soft: var(--turquoise-light); }
.connexes li:nth-child(4n+2) a { --c: var(--coral);          --c-soft: var(--coral-light); }
.connexes li:nth-child(4n+3) a { --c: var(--sec-bleu);       --c-soft: var(--sec-bleu-soft); }
.connexes li:nth-child(4n+4) a { --c: var(--sec-mandarine);  --c-soft: var(--sec-mandarine-soft); }

/* liens externes dans le corps du texte */
.page p a[target="_blank"]::after,
.page li a[target="_blank"]::after,
.page td a[target="_blank"]::after {
  content: "\00a0\2197"; font-size: .78em; opacity: .55; text-decoration: none;
}
.sources a[target="_blank"]::after { content: none; }

/* ============================================================== questions */

.faq { margin-top: 64px; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 12px;
  background: var(--white); overflow: hidden; transition: border-color .15s;
}
.faq-item:hover { border-color: #cfe4ee; }
.faq-item summary {
  cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none;
  display: flex; align-items: flex-start; gap: 14px; font-size: 16.5px; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--turquoise-light); color: var(--navy);
  display: grid; place-items: center; font-weight: 700; font-size: 17px; line-height: 1;
}
.faq-item[open] summary { background: var(--bg); }
.faq-item[open] summary::before { content: "−"; background: var(--coral); color: #fff; }
.faq-answer { padding: 6px 20px 20px 58px; }
.faq-answer p { margin: 0; color: var(--encre-douce); }

/* ================================================================ sources */

.sources {
  margin-top: 64px; padding: 26px 28px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
}
.sources h2 { margin: 0 0 14px; font-size: 19px; color: var(--navy); font-family: var(--sans); font-weight: 700; text-transform: none; }
.sources ul { font-size: 14.5px; margin: 0; padding-left: 20px; }
.sources li { margin-bottom: 7px; }
.sources a { word-break: break-word; }

/* =========================================================== pied de page */

.site-footer {
  background: var(--navy-nuit); color: #a6c2d1; padding-block: 60px 34px; font-size: 14.5px;
  border-top: 4px solid var(--coral);
}
.footer-top { display: grid; grid-template-columns: minmax(210px, 260px) repeat(auto-fit, minmax(155px, 1fr)); gap: 32px 30px; }
@media (max-width: 1120px) { .footer-top { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.footer-brand img { display: block; width: 64px; height: auto; margin-bottom: 14px; }
.footer-brand { grid-column: span 1; }
.footer-brand strong {
  display: block; color: #fff; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; font-size: 26px; margin-bottom: 10px;
}
.footer-brand p { margin: 0; color: #86a8bb; font-size: 14px; line-height: 1.65; }
.site-footer h3 { color: #fff; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.1px; margin: 0 0 14px; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #a6c2d1; text-decoration: none; }
.site-footer a:hover { color: var(--turquoise-vif); }
.disclosure { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); color: #7b9cae; font-size: 13px; max-width: 72em; }
.copyright { color: #7b9cae; font-size: 13px; margin: 10px 0 0; }

/* ============================================================== réactif */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-illus { max-width: 440px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta { grid-template-columns: minmax(0, 1fr); padding: 34px 30px; }
  .band { padding-block: 56px; }
  .hero { padding-block: 46px 52px; }
}

@media (max-width: 540px) {
  body { font-size: 16.5px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats b { font-size: 44px; }
  .wrap, .article-shell { padding-inline: 18px; }
  .card { padding: 22px; }
  .cta h2 { font-size: 28px; }
}

@media print {
  .topbar, .site-header, .site-footer, .breadcrumb, .toc, .connexes { display: none; }
  .article-shell { grid-template-columns: 1fr; }
  body { font-size: 12pt; }
}

/* ============================================================== repères */

.reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--white); box-shadow: var(--ombre-s); }
.repere { padding: 24px 24px; border-right: 1px solid var(--border-douce); }
.repere:last-child { border-right: 0; }
.repere dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--turquoise); font-weight: 700; }
.repere dd { margin: 7px 0 0; font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.05; color: var(--navy); text-transform: uppercase; }
.repere p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 860px) { .repere { border-right: 0; border-bottom: 1px solid var(--border-douce); } .repere:last-child { border-bottom: 0; } }

/* bande illustrée en deux colonnes */

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.duo img { width: 100%; }
@media (max-width: 960px) { .duo { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

/* =============================================== nous suivre (Instagram) */

.suivre {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 38px; align-items: center;
  background: var(--navy); color: #fff; border-radius: var(--r-l);
  padding: 34px 38px; margin: 46px 0;
  background-image:
    radial-gradient(420px 260px at 100% 0%, rgba(6,182,212,.28), transparent 65%),
    radial-gradient(320px 220px at 0% 100%, rgba(243,76,75,.18), transparent 60%);
}
.suivre h2 { color: #fff; margin: 0 0 12px; border: 0; padding: 0; }
.suivre p { color: #c3dbe8; margin: 0 0 14px; }
.suivre-sur {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--turquoise-vif); margin-bottom: 8px !important;
}
.btn-instagram { background: var(--turquoise-vif); color: var(--navy-nuit); border: 0; }
.btn-instagram:hover { background: #fff; color: var(--navy-nuit); }
.suivre-qr { margin: 0; text-align: center; max-width: 182px; }
.suivre-qr svg { display: block; width: 158px; height: 158px; background: #fff;
  border-radius: var(--r-s); padding: 9px; }
.suivre-qr svg path { fill: var(--navy); }
.suivre-qr figcaption { font-size: 12px; color: #9fc0d2; margin-top: 10px; line-height: 1.4; }

@media (max-width: 640px) {
  .suivre { grid-template-columns: 1fr; justify-items: start; padding: 26px 22px; }
  .suivre-qr { max-width: none; }
}

/* ============================== lien Instagram, en-tête et pied de page */

.ig-lien {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-weight: 600; white-space: nowrap;
}
.ig-lien .ig-glyphe { flex: none; }

.ig-lien--entete {
  order: 3; color: var(--navy); font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 13px 6px 10px; margin-left: 6px;
  transition: border-color .15s, color .15s, background .15s;
}
.ig-lien--entete:hover {
  color: #c13584; border-color: #e6a9cd; background: #fdf3f8;
}

.site-nav { order: 2; }
.burger { order: 4; }

/* L'en-tête est chargé : sous 1340 px, le pictogramme suffit, il est connu. */
@media (max-width: 1340px) {
  .ig-lien--entete span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .ig-lien--entete { padding: 8px 10px; }
}

.ig-lien--pied { color: #a6c2d1; font-weight: 500; }
.ig-lien--pied:hover { color: var(--turquoise-vif); }

/* ========================================= appel à contribution et formulaire */

.btn-petit { font-size: 14.5px; padding: 10px 17px; gap: 8px; }
.appel-fac { margin: 16px 0 0; }
.hero .appel-fac .btn-ligne {
  color: var(--navy-nuit); background: var(--turquoise-vif); border-color: var(--turquoise-vif);
}
.hero .appel-fac .btn-ligne:hover {
  color: var(--navy-nuit); background: #67e8f9; border-color: #67e8f9;
}

.formulaire { margin: 26px 0 10px; }
.champs-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 22px; }
.champ { margin: 0 0 18px; }
.champ label { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.facultatif { font-weight: 400; color: var(--muted); font-size: 13px; }
.formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--encre);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 11px 13px;
}
.formulaire input:focus-visible { border-color: var(--turquoise); }
.formulaire input:disabled { background: #f4f7fa; color: #9bb0bf; cursor: not-allowed; }

.bloc-champ { border: 0; padding: 0; margin: 0 0 24px; }
.bloc-champ legend {
  padding: 0; font-size: 14.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px;
}
.aide { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.55; }

.case { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 15px; }
.case input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--turquoise); }
.case input:disabled { cursor: not-allowed; }
.case small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 10px 26px; }

.cases-facs {
  columns: 3; column-gap: 26px;
  border: 1px solid var(--border); border-radius: var(--r-s);
  background: var(--white); padding: 18px 20px; max-height: 340px; overflow-y: auto;
}
.cases-facs .case { break-inside: avoid; margin-bottom: 11px; }
.champ--consentement { margin-bottom: 22px; }

@media (max-width: 860px) { .cases-facs { columns: 2; } }
@media (max-width: 560px) { .cases-facs { columns: 1; } }

/* ============================================= pastille de suivi flottante */

.flotte {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: stretch; gap: 0;
  background: var(--navy); color: #fff; border-radius: 999px;
  box-shadow: 0 14px 38px rgba(1, 35, 56, .34);
  opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s;
}
.flotte.on { opacity: 1; transform: none; }
.flotte-lien {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px 12px 20px; text-decoration: none; color: #fff;
}
.flotte-lien b { display: block; font-size: 15.5px; font-weight: 650; }
.flotte-lien small { display: block; font-size: 12.5px; color: #a8cde0; margin-top: 1px; }
.flotte-point {
  width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none;
  box-shadow: 0 0 0 5px rgba(243, 76, 75, .25);
}
.flotte-fermer {
  background: none; border: 0; color: #7ea6bd; cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 16px 0 10px; border-radius: 0 999px 999px 0;
}
.flotte-fermer:hover { color: #fff; }
.flotte:hover { box-shadow: 0 18px 44px rgba(1, 35, 56, .42); }

@media (max-width: 560px) {
  .flotte { right: 12px; left: 12px; bottom: 12px; }
  .flotte-lien { flex: 1; }
}
@media print { .flotte { display: none; } }

/* Les places d'entrée, présentées en pastilles pour ne pas être confondues
   avec le tableau des capacités d'accueil en deuxième année. */
.chiffres-cases { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 20px; }
.chiffre-case {
  flex: 1 1 170px; background: var(--navy-clair); border: 1px solid #c9dced;
  border-radius: var(--r-s); padding: 16px 20px;
}
.chiffre-case b {
  display: block; font-family: var(--display); font-size: 40px; line-height: 1;
  font-weight: 700; color: var(--navy);
}
.chiffre-case span { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.chiffres-titre {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--turquoise); margin: 22px 0 -4px;
}

/* Le champ piège : hors écran, jamais masqué par display:none, qu'un robot
   détecterait. Un humain ne le voit ni ne l'atteint au clavier. */
.piege { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.actions-formulaire { margin: 4px 0 0; }
.reponse-formulaire {
  margin: 16px 0 0; padding: 14px 18px; border-radius: var(--r-s);
  font-size: 15.5px; line-height: 1.55; border: 1px solid transparent;
}
.reponse--ok     { background: var(--vert-light);  border-color: #bbe9cb; color: #15803d; }
.reponse--erreur { background: var(--coral-light); border-color: #fbd5d4; color: var(--coral-fonce); }