/* ============================================================================
   TAOTE RADIOLOGUE — feuille de style du site vitrine
   ----------------------------------------------------------------------------
   Direction : la page est mise en page comme un compte rendu. Les intertitres
   reprennent les sections d'un CR (indication, technique, résultats, conclusion),
   le corps est composé en labeur sérif, les libellés techniques en chasse fixe.
   La couleur vient du lagon : clair pour l'édition ITI, profond pour NUI.
   ========================================================================== */

:root {
    /* Papier et encre */
    --papier: #F6F7F5;
    --papier-2: #ECEFEB;
    --feuille: #FFFFFF;
    --encre: #0F1A17;
    --encre-2: #4C5C57;
    --encre-3: #78867F;
    --trait: #D5DCD7;

    /* Lagon : la profondeur porte l'opposition ITI / NUI */
    --lagon: #0E7C7B;
    --lagon-profond: #083F42;
    --lagon-clair: #57ABA4;
    --ecume: #A9DED6;

    /* Signalement, à dose homéopathique */
    --corail: #C2412A;
    --ambre: #9C6B10;

    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --texte: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --largeur: 1180px;
    --marge: clamp(20px, 5vw, 48px);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: var(--lagon-profond); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lagon); }

ul, ol { margin: 0; padding: 0; list-style: none; }

em { font-style: italic; }

.mono { font-family: var(--mono); }

:focus-visible {
    outline: 2px solid var(--lagon);
    outline-offset: 2px;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--lagon-profond);
    color: var(--papier);
    padding: 12px 18px;
    font-family: var(--mono);
    font-size: 12px;
}
.skip-link:focus { left: 0; color: var(--papier); }

/* ── Barre supérieure ─────────────────────────────────────────────────────── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(246, 247, 245, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--trait);
}

.topbar__inner {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 var(--marge);
    height: 66px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 9px;
    text-decoration: none;
    color: var(--encre);
    margin-right: auto;
}

.brand__name {
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.1em;
}

.brand__sub {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--encre-3);
}

.nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav a {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--encre-2);
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--lagon-profond); border-bottom-color: var(--lagon); }

.nav .nav__cta {
    background: var(--lagon-profond);
    color: var(--papier);
    padding: 9px 16px;
    border: 0;
    border-radius: 2px;
}
.nav .nav__cta:hover { background: var(--lagon); color: #fff; border-bottom-color: transparent; }

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid var(--trait);
    border-radius: 2px;
    padding: 9px 14px;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--encre-2);
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    content: '';
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after { position: absolute; top: 5px; }

/* ── Éléments partagés ───────────────────────────────────────────────────── */

.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--lagon);
    margin: 0 0 18px;
}

.eyebrow--section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.eyebrow--section::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--trait);
}

.lede {
    font-size: 1.14rem;
    color: var(--encre-2);
    max-width: 56ch;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--solid { background: var(--lagon-profond); color: var(--papier); }
.btn--solid:hover { background: var(--lagon); color: #fff; }

.btn--ghost { border-color: var(--trait); color: var(--encre); background: transparent; }
.btn--ghost:hover { border-color: var(--lagon); color: var(--lagon-profond); }

.btn--lg { padding: 16px 30px; font-size: 13px; }

.link-arrow { font-family: var(--mono); font-size: 13px; }
.link-arrow::after { content: ' \2192'; }

.prose p:last-child { margin-bottom: 0; }

.ticks li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
}
.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 12px;
    height: 1px;
    background: var(--lagon);
}
.ticks--tight li { margin-bottom: 9px; }

/* ── Sections ─────────────────────────────────────────────────────────────── */

.band {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 100px) var(--marge);
}

.band__title {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    max-width: 22ch;
    margin-bottom: 0.6em;
}

.band__deck {
    color: var(--encre-2);
    max-width: 62ch;
    margin-bottom: 40px;
}

.band__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.band__split h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    margin: 0;
}

.page-head {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 84px) var(--marge) 0;
}
.page-head h1 {
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    margin-bottom: 0.4em;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: clamp(44px, 7vw, 92px) var(--marge) clamp(48px, 7vw, 88px);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.hero__title {
    font-size: clamp(2.2rem, 5vw, 3.85rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin-bottom: 0.5em;
}
.hero__title em {
    display: block;
    font-family: var(--texte);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--lagon-profond);
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0 40px;
}

.hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--trait);
}
.hero__facts div { margin: 0; }
.hero__facts dt {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--encre-3);
    margin-bottom: 6px;
}
.hero__facts dd {
    margin: 0;
    font-family: var(--display);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
}

/* ── Signature : le compte rendu qui se corrige ───────────────────────────── */

.cr {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.cr__rail {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--encre-3);
    background: var(--feuille);
    border: 1px solid var(--trait);
    border-radius: 2px;
    padding: 7px 11px;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--trait);
    transition: background-color 0.25s ease;
}
.chip.is-active {
    color: var(--lagon-profond);
    border-color: var(--lagon);
    background: rgba(14, 124, 123, 0.08);
}
.chip.is-active::before { background: var(--lagon); }
.chip.is-done { color: var(--encre-2); border-color: var(--lagon-clair); }
.chip.is-done::before { background: var(--lagon-clair); }

.cr__sheet {
    background: var(--feuille);
    border: 1px solid var(--trait);
    border-radius: 3px;
    padding: 28px clamp(20px, 3vw, 32px);
    box-shadow: 0 26px 60px -34px rgba(8, 63, 66, 0.5);
}

.cr__head {
    border-bottom: 1px dashed var(--trait);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.cr__exam {
    font-family: var(--display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}
.cr__meta {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre-3);
    margin: 0;
}

.cr__body p {
    font-size: 15px;
    line-height: 1.66;
    margin-bottom: 13px;
}
.cr__body p:last-child { margin-bottom: 0; }

.cr__label {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--lagon-profond);
    margin-right: 7px;
}
.cr__label--added { display: block; color: var(--lagon); margin-bottom: 6px; }

.fix { transition: color 0.3s ease, background-color 0.5s ease; }
.fix.is-before {
    color: var(--corail);
    text-decoration: underline wavy var(--corail);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.fix.is-fixed {
    background: rgba(87, 171, 164, 0.28);
    box-shadow: 0 0 0 2px rgba(87, 171, 164, 0.28);
}

.cr__added {
    border-left: 2px solid var(--lagon-clair);
    padding-left: 15px;
    margin-top: 18px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.cr__added p:last-child { margin-bottom: 0; font-size: 14.5px; line-height: 1.62; }
.cr__added.is-pending {
    opacity: 0;
    transform: translateY(8px);
}

.cr figcaption {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.55;
    color: var(--encre-3);
    margin-top: 14px;
}

/* ── Indication ───────────────────────────────────────────────────────────── */

.band--indication { border-top: 1px solid var(--trait); }

/* ── Technique : trois temps ─────────────────────────────────────────────── */

.band--technique {
    max-width: none;
    background: var(--papier-2);
    border-top: 1px solid var(--trait);
    border-bottom: 1px solid var(--trait);
}
.band--technique > * {
    /* Largeur utile d'une bande normale = --largeur moins ses deux marges.
       Sans ce calcul, le contenu des bandes pleine largeur se décale à gauche. */
    max-width: calc(var(--largeur) - var(--marge) * 2);
    margin-left: auto;
    margin-right: auto;
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
}
.steps li { border-top: 2px solid var(--lagon-profond); padding-top: 18px; }
.steps__rank {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--lagon);
    margin: 0 0 10px;
}
.steps h3 { font-size: 1.18rem; margin-bottom: 0.5em; }
.steps p:last-child { color: var(--encre-2); font-size: 16px; margin: 0; }

/* ── Résultats : la grille de fonctions ──────────────────────────────────── */

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--trait);
    border: 1px solid var(--trait);
    border-radius: 3px;
    overflow: hidden;
}
.card {
    background: var(--papier);
    padding: 26px 24px;
}
.card h3 {
    font-size: 1.06rem;
    margin-bottom: 0.45em;
}
.card p { margin: 0; font-size: 15.5px; color: var(--encre-2); }
.card .mono { font-size: 13.5px; }

/* ── Éditions : la profondeur du lagon ───────────────────────────────────── */

.band--editions {
    max-width: none;
    background: var(--lagon-profond);
    color: #E4EDEA;
}
.band--editions > * {
    /* Largeur utile d'une bande normale = --largeur moins ses deux marges.
       Sans ce calcul, le contenu des bandes pleine largeur se décale à gauche. */
    max-width: calc(var(--largeur) - var(--marge) * 2);
    margin-left: auto;
    margin-right: auto;
}
.band--editions .eyebrow { color: var(--ecume); }
.band--editions .eyebrow--section::after { background: rgba(255, 255, 255, 0.22); }
.band--editions h2 { color: #FFFFFF; max-width: 26ch; }
.band--editions .band__deck { color: rgba(228, 237, 234, 0.78); }
.band--editions a { color: var(--ecume); }
.band--editions a:hover { color: #FFFFFF; }

.ti { color: var(--lagon-clair); }
.tn { color: var(--ecume); }

.editions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.edition {
    border-radius: 3px;
    padding: 30px 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.edition--iti { background: rgba(255, 255, 255, 0.07); }
.edition--nui { background: rgba(0, 0, 0, 0.26); border-color: rgba(169, 222, 214, 0.42); }

.edition__tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ecume);
    margin: 0 0 12px;
}
.edition h3 {
    font-size: 1.35rem;
    color: #FFFFFF;
    margin-bottom: 0.3em;
}
.edition__for {
    color: rgba(228, 237, 234, 0.72);
    font-size: 15.5px;
    margin-bottom: 22px;
}
.edition .ticks { margin-bottom: 22px; }
.edition .ticks li::before { background: var(--lagon-clair); }
.edition .ticks li { font-size: 15.5px; }
.edition__note {
    font-size: 14px;
    color: rgba(228, 237, 234, 0.68);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 16px;
    margin: 0;
}

/* ── Compatibilité ───────────────────────────────────────────────────────── */

.band--compat {
    max-width: none;
    background: var(--papier-2);
    border-bottom: 1px solid var(--trait);
}
.band--compat > * {
    /* Largeur utile d'une bande normale = --largeur moins ses deux marges.
       Sans ce calcul, le contenu des bandes pleine largeur se décale à gauche. */
    max-width: calc(var(--largeur) - var(--marge) * 2);
    margin-left: auto;
    margin-right: auto;
}

.matrix {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.matrix th, .matrix td {
    padding: 15px 0;
    border-bottom: 1px solid var(--trait);
    vertical-align: baseline;
}
.matrix thead th {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--encre-3);
    padding-bottom: 10px;
}
.matrix tbody th {
    font-family: var(--display);
    font-weight: 500;
    font-size: 16px;
    width: 45%;
}

/* Volontairement pas inline-flex : la largeur d'un conteneur flex en ligne se
   calcule sur le texte non replié, ce qui déborderait sur écran étroit. */
.state {
    font-family: var(--mono);
    font-size: 12.5px;
}
.state::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 1px;
    background: currentColor;
    margin-right: 9px;
}
.state--ok { color: var(--lagon); }
.state--wip { color: var(--ambre); }
.state--no { color: var(--encre-3); }

/* ── Conclusion ──────────────────────────────────────────────────────────── */

.closing {
    border: 1px solid var(--trait);
    border-left: 3px solid var(--lagon-profond);
    border-radius: 3px;
    background: var(--feuille);
    padding: clamp(30px, 5vw, 52px);
    max-width: 760px;
}
.closing h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.closing p { color: var(--encre-2); max-width: 52ch; }
.closing .btn { margin-top: 12px; }

/* ── Formulaire de support ───────────────────────────────────────────────── */

/* Le chapô de la page tient déjà lieu de respiration : on resserre au-dessus du
   formulaire, sinon le champ « Nom » tombe sous la ligne de flottaison. */
.band--form,
.band--recu,
.band--legal { padding-top: clamp(28px, 4vw, 44px); }

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: start;
}

.form fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 36px;
}
.form legend {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    width: 100%;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--trait);
    margin-bottom: 22px;
}
.legend__opt {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre-3);
    margin-left: 8px;
}

.field { margin-bottom: 20px; }
.field label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--encre-2);
    margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: var(--texte);
    font-size: 16px;
    color: var(--encre);
    background: var(--feuille);
    border: 1px solid var(--trait);
    border-radius: 2px;
    padding: 12px 14px;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--lagon);
    outline-offset: 1px;
    border-color: var(--lagon);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.field__hint {
    font-size: 14px;
    color: var(--encre-3);
    margin: 0;
}

.field__error {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--corail);
    margin-top: 7px;
}
.field__error:empty { display: none; }

.field--check { margin: 28px 0; }
/* Deux classes : doit l'emporter sur « .field label », qui met les libellés en
   chasse fixe et en capitales. Une phrase de consentement se lit en labeur. */
.field--check .check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--texte);
    font-size: 15.5px;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--encre-2);
    margin: 0;
}
.field--check .check input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: none;
    accent-color: var(--lagon-profond);
}

.form__summary { margin-bottom: 20px; }
.form__summary:not(:has(li)) { display: none; }
.form__summary ul {
    border-left: 3px solid var(--corail);
    background: rgba(194, 65, 42, 0.06);
    padding: 14px 18px;
}
.form__summary li { font-size: 15px; color: var(--corail); }

.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-aside {
    border-left: 1px solid var(--trait);
    padding-left: clamp(20px, 3vw, 34px);
}
.form-aside h2 {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--lagon);
    margin-bottom: 24px;
}
.form-aside h3 {
    font-size: 1rem;
    margin-bottom: 0.35em;
}
.form-aside p {
    font-size: 15px;
    color: var(--encre-2);
    margin-bottom: 22px;
}

.receipt {
    border: 1px solid var(--trait);
    border-left: 3px solid var(--lagon);
    border-radius: 3px;
    background: var(--feuille);
    padding: clamp(28px, 4vw, 44px);
    max-width: 640px;
}
.receipt h2 { font-size: 1.5rem; }
.receipt__ref { font-size: 1.15rem; color: var(--lagon-profond); letter-spacing: 0.04em; }
.receipt .btn { margin-top: 8px; }

/* ── Pages de texte ──────────────────────────────────────────────────────── */

.legal { max-width: 72ch; }
.legal h2 {
    font-size: 1.3rem;
    margin-top: 2.2em;
    padding-top: 1.1em;
    border-top: 1px solid var(--trait);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p, .legal li { color: var(--encre-2); }

/* ── Pied de page ────────────────────────────────────────────────────────── */

.footer {
    background: var(--encre);
    color: rgba(246, 247, 245, 0.72);
    margin-top: 0;
}
.footer__inner {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 56px var(--marge);
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 32px;
}
.footer .brand__name { color: #FFFFFF; display: block; margin-bottom: 12px; }
.footer__brand p { max-width: 46ch; font-size: 15px; margin: 0; }
.footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.footer__links a {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(246, 247, 245, 0.72);
    text-decoration: none;
}
.footer__links a:hover { color: #FFFFFF; text-decoration: underline; }
.footer__meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 22px;
    margin: 8px 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(246, 247, 245, 0.5);
}

/* ── Apparition au défilement (activée seulement si JS est là) ───────────── */

.js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Adaptation ──────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .hero { grid-template-columns: minmax(0, 1fr); }
    .band__split { grid-template-columns: minmax(0, 1fr); }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-layout { grid-template-columns: minmax(0, 1fr); }
    .form-aside { border-left: 0; border-top: 1px solid var(--trait); padding-left: 0; padding-top: 32px; }
}

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .nav {
        display: none;
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--papier);
        border-bottom: 1px solid var(--trait);
        padding: 12px var(--marge) 20px;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 13px 0; border-bottom: 1px solid var(--trait); }
    .nav .nav__cta { margin-top: 14px; text-align: center; padding: 13px 16px; }
}

@media (max-width: 700px) {
    body { font-size: 16.5px; }
    .grid { grid-template-columns: minmax(0, 1fr); }
    .editions { grid-template-columns: minmax(0, 1fr); }
    .hero__facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .footer__inner { grid-template-columns: minmax(0, 1fr); }
    .matrix tbody th { width: 50%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    .js .reveal { opacity: 1; transform: none; }
}