/* NIC .ht : feuille de style unique. Jetons d'abord, composants ensuite.
   Règles de forme : boutons et champs 6 px, cartes 12 px. Un seul accent (vert). */

:root {
  --ink-900: #001335;
  --brand-700: #10316b;
  --brand-500: #33569c;
  --brand-100: #e6eef9;
  --brand-50: #f2f6fc;
  --accent-700: #176028;
  --accent-600: #1e7a34;
  --accent-500: #339933;
  --accent-300: #23cf5f;
  --sky-300: #99ccff;
  --gray-700: #3a4453;
  --gray-600: #4b5565;
  --gray-300: #d6dce6;
  --gray-100: #f3f5f8;
  --danger-600: #b42318;
  --warning-600: #b54708;
  --focus: #ffbf47;

  --bg: #ffffff;
  --bg-soft: var(--gray-100);
  --bg-tint: var(--brand-50);
  --text: var(--gray-700);
  --text-strong: var(--ink-900);
  --text-muted: var(--gray-600);
  --link: var(--brand-700);
  --link-hover: var(--accent-700);
  --line: var(--gray-300);
  --card: #ffffff;
  --btn-bg: var(--accent-600);
  --btn-bg-hover: var(--accent-700);
  --btn-text: #ffffff;
  --band: var(--ink-900);
  --band-text: #ffffff;

  --font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius-s: 6px;
  --radius-l: 12px;
  --shadow: 0 1px 2px rgb(0 19 53 / .06), 0 4px 14px rgb(0 19 53 / .06);
  --container: 1200px;
  --gutter: 16px;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --bg-soft: #101a2e;
    --bg-tint: #0f1c36;
    --text: #d3dae6;
    --text-strong: #ffffff;
    --text-muted: #a5b0c2;
    --link: #9cc3ff;
    --link-hover: #7be39a;
    --line: #26344f;
    --card: #101a2e;
    --btn-bg: #2fa24c;
    --btn-bg-hover: #3cb85b;
    --btn-text: #02150a;
    --band: #06101f;
    --danger-600: #ff9a8f; /* lisible sur fond sombre (contraste > 7:1) */
    --warning-600: #ffb86b;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light dark; scroll-padding-top: 88px; }
a, button, select, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: rgb(51 86 156 / .2); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.65 var(--font); text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink-900); border-radius: 2px; }
h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
code, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--bg-soft); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--ink-900); color: #e8eefc; padding: 16px; border-radius: var(--radius-s); overflow-x: auto; }
pre code { background: none; padding: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--ink-900); color: #fff; padding: 10px 16px; border-radius: var(--radius-s); z-index: 100; }
.skip-link:focus { top: 8px; color: #fff; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Bandeau d'avis ---- */
.notice { padding: 10px 0; font-size: .97rem; border-bottom: 1px solid transparent; }
.notice--info { background: var(--brand-100); color: var(--ink-900); border-color: #c7d6ee; }
.notice--warning { background: #fff1d6; color: #4a2a00; border-color: #f1d19a; }
.notice--critical { background: #fde4e1; color: #5c0f08; border-color: #f1b3ac; }
.notice a { color: inherit; font-weight: 600; }
.notice__label { font-weight: 700; margin-right: .5rem; }

/* ---- Barre utilitaire et en-tête ---- */
.utility { background: var(--band); color: #c9d4ea; font-size: .88rem; }
.utility .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.utility a { color: #fff; }
.utility__tag { margin: 0; }
.lang-switch { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.lang-switch a { display: inline-block; padding: 6px 10px; border-radius: var(--radius-s); text-decoration: none; color: #c9d4ea; min-height: 32px; }
.lang-switch a:hover { background: rgb(255 255 255 / .12); color: #fff; }
.lang-switch a[aria-current="true"] { background: #fff; color: var(--ink-900); font-weight: 650; }

.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-strong); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; }
.brand:hover { color: var(--text-strong); }
.brand svg, .brand img { width: 40px; height: 40px; flex: none; }
.brand b { color: var(--accent-600); font-weight: 700; }
.nav-toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--text-strong); padding: 10px 14px; border-radius: var(--radius-s); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.primary-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-s); text-decoration: none; color: var(--text-strong); font-weight: 520; font-size: .98rem; white-space: nowrap; }
.primary-nav a:hover { background: var(--bg-soft); color: var(--link); }
.primary-nav a[aria-current="page"] { color: var(--link); box-shadow: inset 0 -3px 0 var(--accent-500); border-radius: 0; }
.header-cta { flex: none; }

@media (max-width: 1100px) {
  .js .nav-toggle { display: inline-block; }
  .js .primary-nav, .js .header-cta { display: none; }
  .js .site-header.is-open .primary-nav, .js .site-header.is-open .header-cta { display: block; }
  .site-header .container { flex-wrap: wrap; padding-block: 8px; }
  .primary-nav, .header-cta { width: 100%; margin: 0; }
  .primary-nav ul { flex-direction: column; }
  .header-cta { padding-bottom: 12px; }
  .header-cta .btn { width: 100%; }
  /* Menu ouvert plus haut que l'écran (téléphone en paysage) : il défile au lieu d'être coupé */
  .js .site-header.is-open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 600px) and (max-width: 1100px) {
  .primary-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
}

/* ---- Boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: 10px 22px; border-radius: var(--radius-s); border: 2px solid transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .08s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-text); }
.btn--secondary { background: transparent; color: var(--link); border-color: var(--link); }
.btn--secondary:hover { background: var(--bg-soft); color: var(--link-hover); border-color: var(--link-hover); }
.btn--light { background: #fff; color: var(--ink-900); }
.btn--light:hover { background: var(--brand-100); color: var(--ink-900); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / .6); }
.btn--outline-light:hover { background: rgb(255 255 255 / .12); color: #fff; border-color: #fff; }
.btn--small { min-height: 38px; padding: 6px 14px; font-size: .95rem; }
.link-arrow::after { content: " →"; }
/* Flèche discrète sur les liens qui s'ouvrent dans un nouvel onglet (le texte alternatif vide évite la double lecture) */
a[target="_blank"]:not(.btn):not(.badge)::after { content: "\2197"; content: "\2197" / ""; font-size: .8em; margin-left: .2em; text-decoration: none; display: inline-block; }

/* ---- Hero ---- */
.hero { background: var(--band) url("../img/hero-citadelle-1600.67bd3acde692.jpg") 60% center / cover no-repeat; color: var(--band-text); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 19 53 / .78), rgb(0 19 53 / .5) 60%, rgb(0 19 53 / .7)); }
@media (min-width: 960px) { .hero::before { background: linear-gradient(90deg, rgb(0 19 53 / .9) 0%, rgb(0 19 53 / .6) 55%, rgb(0 19 53 / .3) 100%); } }
.hero__art { display: none; }
.hero .container { position: relative; display: grid; gap: 28px; padding-block: 48px 56px; grid-template-areas: "intro" "search" "actions"; }
.hero__intro { grid-area: intro; } .hero__search { grid-area: search; } .hero__actions { grid-area: actions; }
@media (min-width: 960px) { .hero .container { grid-template-columns: 1.35fr 1fr; grid-template-areas: "intro search" "actions search"; align-items: center; padding-block: 72px 80px; column-gap: 64px; row-gap: 0; } .hero__intro { align-self: end; } .hero__actions { align-self: start; } }
.hero h1 { color: #fff; max-width: 16ch; margin-bottom: .4em; }
.hero__lead { font-size: 1.2rem; color: #d3deef; max-width: 52ch; margin-bottom: 1.4rem; }
.hero__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 20px 0 0; }
.hero__links a { color: #fff; font-weight: 550; }
.hero__links a:hover { color: var(--accent-300); }
.search-box { background: var(--card); color: var(--text); border-radius: var(--radius-l); padding: 24px; box-shadow: 0 10px 40px rgb(0 0 0 / .35); }
.search-box h2 { font-size: 1.3rem; margin-bottom: .3em; color: var(--text-strong); }
.search-box p { font-size: .97rem; color: var(--text-muted); }
.search-box { container-type: inline-size; }
.search-row { display: grid; gap: 4px 12px; }
.search-row .btn { width: 100%; }
@container (min-width: 520px) { .search-row { grid-template-columns: minmax(0, 1fr) 150px auto; align-items: end; } .search-row .field { margin-bottom: 0; } .search-row .btn { width: auto; } }
.domain-result { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-soft); }
.domain-result[hidden] { display: none; }
.domain-result strong { color: var(--text-strong); word-break: break-all; }
.domain-result--available { border-color: var(--accent-600); background: #e9f6ec; color: #0f3d1b; }
.domain-result--available strong { color: #0f3d1b; }
.domain-result--registered { border-color: var(--warning-600); background: #fff3e6; color: #4a2a00; }
.domain-result--registered strong { color: #4a2a00; }
.domain-result--error { border-color: var(--danger-600); background: #fdecea; color: #5c0f08; }
.domain-result--error strong { color: #5c0f08; }
.domain-result .btn { margin-top: 10px; }

/* ---- Sections ---- */
.section { padding-block: 56px; }
@media (min-width: 768px) { .section { padding-block: 80px; } }
.section--tint { background: var(--bg-tint); }
.section--soft { background: var(--bg-soft); }
.section__head { max-width: 62ch; margin-bottom: 32px; }
.section__head p { color: var(--text-muted); }
.section__row { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section__row h2 { margin: 0; }

/* ---- Page intérieure ---- */
.page-hero { background: var(--bg-tint); border-bottom: 1px solid var(--line); padding-block: 36px 32px; }
.page-hero h1 { margin-bottom: .25em; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-hero p { color: var(--text-muted); max-width: 66ch; font-size: 1.12rem; margin: 0; }
.breadcrumb { font-size: .92rem; margin-bottom: 14px; color: var(--text-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb [aria-current] { color: var(--text-strong); font-weight: 550; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 40px 72px; }  /* minmax(0, 1fr) : sans lui, un tableau large élargit la colonne au-delà de l'écran du téléphone */
@media (min-width: 960px) { .layout--side { grid-template-columns: 260px minmax(0, 1fr); } .layout--side-right { grid-template-columns: minmax(0, 1fr) 280px; } }
.sidenav { font-size: .97rem; }
.sidenav h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }
.sidenav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.sidenav a { display: block; padding: 7px 14px; text-decoration: none; color: var(--text); margin-left: -2px; border-left: 2px solid transparent; }
.sidenav a:hover { color: var(--link); background: var(--bg-soft); }
.sidenav a[aria-current="page"] { color: var(--link); font-weight: 650; border-left-color: var(--accent-500); }
@media (min-width: 960px) { .sidenav--sticky { position: sticky; top: 90px; align-self: start; } }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
@media (max-width: 559px) { .prose table { display: block; position: relative; max-width: 100%; overflow-x: auto; } }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; }
.prose th, .prose td { text-align: left; border: 1px solid var(--line); padding: 8px 12px; vertical-align: top; }
.prose th { background: var(--bg-soft); color: var(--text-strong); }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--accent-500); color: var(--text-strong); }
.prose img { border-radius: var(--radius-s); }
.prose--wide { max-width: none; }
.prose .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-body h2 { font-size: 1.35rem; }
.doc-body h3 { font-size: 1.1rem; }

/* ---- Cartes et grilles ---- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 22px; position: relative; }
.card h3 { margin-bottom: .35em; font-size: 1.15rem; }
.card p:last-child { margin-bottom: 0; }
.card--link { transition: border-color .15s, box-shadow .15s; }
.card--link:hover, .card--link:focus-within { border-color: var(--brand-500); box-shadow: var(--shadow); }
.card--link h3 a { text-decoration: none; color: var(--text-strong); }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.card__meta { font-size: .9rem; color: var(--text-muted); margin-bottom: .5rem; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--brand-100); color: var(--brand-700); border: 1px solid #c7d6ee; }
.badge--ok { background: #e3f4e7; color: #0f4a20; border-color: #b7dfc1; }
.badge--warn { background: #fff1d6; color: #5a3300; border-color: #f1d19a; }
.badge--off { background: #eceef2; color: #3a4453; border-color: var(--line); }
.logo-tile { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px; margin-bottom: 14px; min-height: 58px; }
.logo-tile img { display: block; height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.logo-tile--lg img { height: 54px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0 1.2rem; }
.tags a { text-decoration: none; }

/* Actualités : une à la une + liste */
.news-feature { display: grid; gap: 28px; }
@media (min-width: 960px) { .news-feature { grid-template-columns: 1.4fr 1fr; } }
.news-lead { display: flex; flex-direction: column; gap: 14px; }
.news-lead__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: var(--radius-l); background: var(--brand-100); }
.news-lead h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0; }
.news-lead h3 a, .news-item h3 a { color: var(--text-strong); text-decoration: none; }
.news-lead h3 a:hover, .news-item h3 a:hover { color: var(--link); text-decoration: underline; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
.news-item { padding: 18px 0; border-top: 1px solid var(--line); }
.news-item:first-child { border-top: 0; padding-top: 0; }
.news-item h3 { font-size: 1.12rem; margin: 4px 0 0; }
.news-cover { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: var(--radius-s); margin-bottom: 14px; background: var(--brand-100); }
.date { font-size: .9rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Étapes */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 3px solid var(--ink-900); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.steps li { counter-increment: step; padding: 20px 18px 24px 0; position: relative; }
@media (min-width: 900px) { .steps li { padding-right: 24px; } }
.steps li::before { content: counter(step); display: block; font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--accent-600); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 1.1rem; margin-bottom: .3em; }
.steps p { font-size: .97rem; color: var(--text-muted); margin: 0; }
.steps--detail { grid-template-columns: 1fr; border-top: 0; gap: 20px; }
.steps--detail li { display: grid; grid-template-columns: 64px 1fr; gap: 8px 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--card); }
.steps--detail li::before { grid-row: span 2; font-size: 3rem; }

/* Cycle de vie */
.lifecycle { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .lifecycle { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.lifecycle li { background: var(--card); border: 1px solid var(--line); padding: 16px; }
@media (min-width: 800px) { .lifecycle li { border-left-width: 0; } .lifecycle li:first-child { border-left-width: 1px; border-radius: var(--radius-l) 0 0 var(--radius-l); } .lifecycle li:last-child { border-radius: 0 var(--radius-l) var(--radius-l) 0; } }
.lifecycle b { display: block; font-size: 1.5rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lifecycle .phase--ok { box-shadow: inset 0 4px 0 var(--accent-500); }
.lifecycle .phase--warn { box-shadow: inset 0 4px 0 var(--warning-600); }
.lifecycle .phase--stop { box-shadow: inset 0 4px 0 var(--danger-600); }

/* Chiffres clés */
.figures { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.figure { background: var(--card); padding: 24px 22px; }
.figure b { display: block; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--link); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.figure span { display: block; margin-top: 8px; color: var(--text-strong); font-weight: 550; }
.figure small { display: block; color: var(--text-muted); margin-top: 4px; font-size: .86rem; }
.hero-figure { border-top: 1px solid rgb(255 255 255 / .25); padding-top: 18px; margin-top: 8px; }
.hero-figure b { display: block; font-size: 3rem; line-height: 1; color: #fff; font-weight: 600; }
.hero-figure span { color: #c9d4ea; }

/* ---- Formulaires ---- */
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; color: var(--text-strong); }
.field .hint { display: block; font-size: .9rem; color: var(--text-muted); margin-top: 4px; font-weight: 400; }
.req { color: var(--danger-600); }
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], select, textarea {
  width: 100%; min-height: 52px; padding: 10px 14px; font: inherit; color: var(--text-strong); background: var(--bg);
  border: 2px solid #6b7587; border-radius: var(--radius-s);
}
@media (prefers-color-scheme: dark) { input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], select, textarea { border-color: #7f8aa0; background: #0b1220; } }
textarea { min-height: 140px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink-900); }
.checkbox { display: flex; gap: 10px; align-items: flex-start; }
.checkbox input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--accent-600); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--danger-600); }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--danger-600); font-weight: 600; font-size: .95rem; }
.alert { padding: 14px 18px; border-radius: var(--radius-s); border: 1px solid var(--line); margin-bottom: 20px; background: var(--bg-soft); }
.alert--error { border-color: var(--danger-600); background: #fdecea; color: #5c0f08; }
.alert--ok { border-color: var(--accent-600); background: #e9f6ec; color: #0f3d1b; }
.alert--warn { border-color: var(--warning-600); background: #fff3e6; color: #4a2a00; }
.alert--info { border-color: var(--brand-500); background: var(--brand-100); color: var(--ink-900); }
.alert a { color: inherit; }
.filters { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 18px; margin-bottom: 28px; }
.filters form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
.filters .field { margin: 0; }
.filters__actions { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
.results-count { color: var(--text-muted); margin-bottom: 14px; }

/* ---- Tableaux ---- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }  /* position: relative : les textes « visually-hidden » (position absolue) d'un tableau large ne doivent pas s'échapper et élargir la page */
.table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.table caption { text-align: left; padding: 12px 16px; font-weight: 650; color: var(--text-strong); caption-side: top; }
.table th, .table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { background: var(--bg-soft); color: var(--text-strong); font-weight: 650; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .badge { white-space: nowrap; }
.table td:first-child, .table th:first-child { min-width: 11em; }
/* Téléphone : un tableau à plusieurs colonnes devient une pile de fiches (chaque cellule porte son intitulé dans data-label) */
@media (max-width: 640px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td, .table--stack th { display: block; }
  .table--stack tr { padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td, .table--stack th { border: 0 !important; padding: 3px 0; min-width: 0 !important; }
  .table--stack tbody th { font-size: 1.05rem; padding-bottom: 6px; }
  .table--stack caption { display: block; }
  .table--stack td[data-label] { margin-top: 6px; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: .85rem; line-height: 1.3; color: var(--text-muted); }
  .table--stack td p:last-child { margin-bottom: 0; }
  .prose table.table--stack { overflow: visible; border: 1px solid var(--line); border-radius: var(--radius-s); }
  .prose table.table--stack tr { background: var(--bg); }
  .prose table.table--stack tbody th { background: transparent; color: var(--text-strong); }
  .table--stack td.num { text-align: left; }
}

/* ---- Accordéon (FAQ) ---- */
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:first-of-type { border-top: 1px solid var(--line); }
.accordion summary { cursor: pointer; padding: 16px 40px 16px 0; font-weight: 600; color: var(--text-strong); list-style: none; position: relative; font-size: 1.08rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 8px; top: 12px; font-size: 1.6rem; font-weight: 300; color: var(--accent-600); }
.accordion details[open] summary::after { content: "−"; }
.accordion .answer { padding: 0 0 18px; max-width: 70ch; }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 32px; list-style: none; padding: 0; }
.pagination a, .pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-s); text-decoration: none; }
.pagination a:hover { background: var(--bg-soft); }
.pagination [aria-current="page"] { background: var(--ink-900); color: #fff; border-color: var(--ink-900); font-weight: 650; }

/* ---- Graphiques ---- */
.chart { margin: 8px 0 24px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart text { fill: var(--text-muted); font: 12px var(--font); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--brand-500); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--bg); stroke: var(--brand-500); stroke-width: 2.5; }
.chart .bar { fill: var(--brand-500); }
.chart .bar--alt { fill: var(--accent-600); }
.chart .val { fill: var(--text-strong); font-weight: 600; }
.chart .lbl { fill: var(--text-strong); }
details.data-table { margin-top: 8px; }
details.data-table summary { cursor: pointer; color: var(--link); font-weight: 550; }

/* ---- Pied de page ---- */
.site-footer { background: var(--band); color: #c9d4ea; padding-block: 56px 28px; margin-top: 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--accent-300); }
.site-footer h2 { color: #fff; font-size: 1rem; text-transform: none; margin-bottom: .8em; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-brand { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 10px; display: block; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .15); margin-top: 40px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .92rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; }

/* ---- Divers ---- */
.cta-band { background: var(--ink-900) url("../img/bandeau-bassin-bleu-800.4d441b6d0227.jpg") center / cover no-repeat; color: #fff; border-radius: var(--radius-l); padding: 36px; display: grid; gap: 20px; align-items: center; position: relative; isolation: isolate; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 19 53 / .9), rgb(0 19 53 / .62)); }
@media (min-width: 800px) { .cta-band { background-image: url("../img/bandeau-bassin-bleu-1600.54ca114c313d.jpg"); } }
@media (min-width: 800px) { .cta-band { grid-template-columns: 1fr auto; padding: 44px; } }
.cta-band h2 { color: #fff; margin: 0 0 .25em; }
.cta-band p { margin: 0; color: #d3deef; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: 10px; }
.contact-list b { display: block; color: var(--text-strong); }
.logo-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); list-style: none; padding: 0; }
.logo-grid li { border: 1px solid var(--line); border-radius: var(--radius-l); padding: 16px; display: grid; place-items: center; min-height: 100px; text-align: center; background: var(--card); }
.person { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.person img, .person .person__ph { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--brand-100); display: grid; place-items: center; color: var(--brand-700); font-weight: 650; font-size: 1.6rem; }
.dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0; }
.dl dt { color: var(--text-muted); }
.dl dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.rss-link { font-size: .95rem; }
.tag-fallback { font-size: .9rem; }
.print-only { display: none; }

/* ---- Écrans étroits, tablettes, écrans tactiles ---- */
@media (min-width: 560px) and (max-width: 899px) {
  .steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 24px; }
  .lifecycle { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 559px) {
  .btn { white-space: normal; text-align: center; }
  .hero__actions { display: grid; gap: 10px; }
  .cta-band { padding: 28px 22px; }
  .cta-band .btn { width: 100%; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dl dt { margin-top: 12px; font-size: .9rem; }
  .card { padding: 18px; }
  .search-box { padding: 20px 18px; }
  .filters__actions .btn { flex: 1 1 140px; }
  .prose h2 { font-size: 1.4rem; }
}
@media (max-width: 420px) {
  .person { grid-template-columns: 72px 1fr; gap: 12px; }
  .person img, .person .person__ph { width: 72px; height: 72px; font-size: 1.2rem; }
  .steps--detail li { grid-template-columns: 48px 1fr; padding: 18px; }
  .steps--detail li::before { font-size: 2.2rem; }
  .utility__tag { font-size: .84rem; }
}
/* Écrans tactiles : cibles de 40 à 44 px pour les liens courts */
@media (pointer: coarse) {
  .site-footer li a, .site-footer address a, .contact-list a, .rss-link, .tags a { padding-block: 9px; }
  .breadcrumb a { padding-block: 8px; }
  .sidenav a { padding-block: 11px; }
  .lang-switch a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 12px; }
  .accordion summary { padding-block: 18px; }
  .accordion summary::after { top: 14px; }
}
@media print { .utility, .site-header, .site-footer, .filters, .skip-link, .btn { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } a { color: #000; } .print-only { display: block; } }
.hint--inline{display:inline!important}
.section--flush-top{padding-top:0}
.h-small{font-size:1rem;margin-top:24px}
.related{padding-bottom:64px}

/* Cibles d'au moins 24 px (WCAG 2.5.8) pour les liens isolés */
.link-arrow, .site-footer li a, .site-footer address a, .contact-list a, .rss-link, .tags a, .breadcrumb a { display: inline-block; padding-block: 2px; }
.sidenav a { min-height: 32px; }
.checkbox input { width: 24px; height: 24px; }
.permalink { display: inline-block; min-width: 24px; text-align: center; text-decoration: none; color: var(--text-muted); font-weight: 400; }
.permalink:hover, .permalink:focus-visible { color: var(--link); }