/* ISOTOPIC.fr */
/* contact@isotopic.fr */
/* merci de contacter l'auteur pour toute demande de reproduction */

/* Feuille de style du site (refonte 2026).
   css/style.css reste en place pour les anciennes pages non migrées. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-latin-var.woff2') format('woff2');
}

/* ─── Variables ─────────────────────────────────────────── */
/* Palette ISOTOPIC : bleu nuit et teal du logo, sur fond blanc et neutres */
:root {
    --encre:        #0d1117;   /* bleu nuit : en-tête, pied de page, titres */
    --encre-2:      #1c2330;
    --texte:        #232b36;
    --texte-doux:   #56616f;
    --filet:        #dde2e8;
    --filet-fort:   #b9c1cb;
    --papier:       #ffffff;
    --papier-2:     #f5f6f8;
    --accent:       #00d9c0;   /* teal du logo : filets, repères, fonds sombres */
    --accent-encre: #00776a;   /* teal assombri, lisible sur fond blanc */
    --erreur:       #b42318;
    --erreur-fond:  #fef3f2;
    --succes-fond:  #ecfdf9;

    --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --rayon: 6px;
    --largeur: 1140px;
    --marge: clamp(1.25rem, 4vw, 2.5rem);
    --section: clamp(3.5rem, 8vw, 6rem);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--texte);
    font-family: var(--police);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--encre);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.12;
}

h2 {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
}

h3 {
    font-size: 1.1875rem;
    line-height: 1.35;
}

p,
ul,
ol,
dl,
blockquote,
figure {
    margin: 0;
}

p + p {
    margin-top: 1em;
}

a {
    color: var(--encre);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: var(--encre);
}

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

:focus-visible {
    outline: 3px solid var(--encre);
    outline-offset: 2px;
    border-radius: 2px;
}

.entete :focus-visible,
.pied :focus-visible,
.bandeau-sombre :focus-visible {
    outline-color: var(--accent);
}

.conteneur {
    width: 100%;
    max-width: calc(var(--largeur) + 2 * var(--marge));
    margin-inline: auto;
    padding-inline: var(--marge);
}

.icone {
    flex-shrink: 0;
    vertical-align: -0.22em;
}

.evitement {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--papier);
    border-radius: var(--rayon);
}

.evitement:focus {
    top: 1rem;
}

.masque {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── Boutons ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding: 0.65rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primaire {
    background: var(--encre);
    color: #ffffff;
}

.btn-primaire:hover {
    background: #2a3445;
}

.btn-secondaire {
    background: var(--papier);
    border-color: var(--filet-fort);
    color: var(--encre);
}

.btn-secondaire:hover {
    border-color: var(--encre);
}

.btn-accent {
    background: var(--accent);
    color: var(--encre);
}

.btn-accent:hover {
    background: #5fe8d7;
}

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
}

.lien-fleche:hover {
    border-bottom-color: var(--encre);
}

.lien-fleche .icone {
    transition: transform 0.15s;
}

.lien-fleche:hover .icone {
    transform: translateX(3px);
}

.lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ─── En-tête ───────────────────────────────────────────── */
.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--encre);
    color: #e6edf3;
}

.entete-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: 4rem;
}

.entete-logo,
.pied-logo {
    display: inline-flex;
    padding: 0.5rem 0;
}

/* Le logo fixe la hauteur de la première ligne : logo et bouton de menu
   restent à la même hauteur, que le menu mobile soit ouvert ou fermé */
.entete-logo {
    align-items: center;
    min-height: 4rem;
}

.logo {
    display: block;
    height: 22px;
    width: auto;
}

.nav-liste,
.nav-sousmenu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-lien {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    color: #e6edf3;
    font: inherit;
    font-size: 0.975rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.nav-lien:hover,
.nav-lien[aria-current="page"] {
    color: var(--accent);
}

.nav-lien .icone {
    transition: transform 0.15s;
}

.nav-lien[aria-expanded="true"] .icone {
    transform: rotate(180deg);
}

.nav-sousmenu a {
    display: block;
    padding: 0.55rem 0 0.55rem 1rem;
    color: #c6d0db;
    font-size: 0.95rem;
    text-decoration: none;
}

.nav-sousmenu a:hover {
    color: var(--accent);
}

.nav-bascule {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border: 1px solid #3a4658;
    border-radius: var(--rayon);
    background: none;
    color: #e6edf3;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
}

/* Hamburger : trois lignes qui pivotent pour former une croix.
   La croix se forme autour de la ligne centrale : l'icône ne change pas de hauteur. */
.hamburger {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 14px;
}

.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.35s ease, opacity 0.2s ease;
}

.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 6px;
}

.hamburger span:nth-child(3) {
    top: 12px;
}

.nav-bascule[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(225deg);
}

.nav-bascule[aria-expanded="true"] .hamburger span:nth-child(2) {
    transform: rotate(180deg);
    opacity: 0;
}

.nav-bascule[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-225deg);
}

/* Petits écrans : menu replié derrière le bouton (ouvert par défaut sans JavaScript) */
@media (max-width: 959px) {
    .nav {
        width: 100%;
        padding-bottom: 1.25rem;
        border-top: 1px solid #2b3545;
    }

    .nav-liste > li {
        border-bottom: 1px solid #2b3545;
    }

    .nav-liste > .nav-action {
        border: 0;
        padding-top: 1.25rem;
    }

    .nav-action .btn {
        width: 100%;
    }

    .nav-sousmenu {
        padding-bottom: 0.5rem;
    }

    .js .nav-bascule {
        display: inline-flex;
    }

    .js .nav:not(.ouvert),
    .js .nav-lien[aria-expanded="false"] + .nav-sousmenu {
        display: none;
    }
}

/* Grands écrans : liens en ligne, sous-menu déroulant */
@media (min-width: 960px) {
    .nav-liste {
        display: flex;
        align-items: center;
        gap: 1.75rem;
    }

    .nav-groupe {
        position: relative;
    }

    .nav-sousmenu {
        position: absolute;
        top: calc(100% + 0.25rem);
        left: -1rem;
        display: none;
        min-width: 19rem;
        padding: 0.5rem 0;
        background: var(--papier);
        border: 1px solid var(--filet);
        border-radius: var(--rayon);
        box-shadow: 0 12px 28px rgba(13, 17, 23, 0.14);
    }

    .nav-lien[aria-expanded="true"] + .nav-sousmenu,
    html:not(.js) .nav-groupe:hover .nav-sousmenu,
    html:not(.js) .nav-groupe:focus-within .nav-sousmenu {
        display: block;
    }

    .nav-sousmenu a {
        padding: 0.55rem 1.1rem;
        color: var(--encre);
    }

    .nav-sousmenu a:hover {
        background: var(--papier-2);
        color: var(--encre);
    }

    .nav-sousmenu a:focus-visible {
        outline-color: var(--encre);
        outline-offset: -3px;
    }

    .nav-sousmenu-tout {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--filet);
    }

    .nav-sousmenu-tout a {
        font-weight: 600;
    }

    .nav-action {
        margin-left: 0.5rem;
    }

    .nav-action .btn {
        min-height: 2.5rem;
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }
}

/* ─── Bandeau défilant : dernier article du blog ────────── */
.defilant {
    display: block;
    overflow: hidden;
    background: var(--accent);
    color: var(--encre);
    font-size: 0.9375rem;
    line-height: 2.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.defilant-piste {
    display: inline-flex;
    animation: defilement 45s linear infinite;
}

.defilant:hover .defilant-piste,
.defilant:focus-visible .defilant-piste {
    animation-play-state: paused;
}

.defilant-texte {
    padding-right: 5rem;
}

.defilant-texte strong {
    margin-right: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    background: var(--encre);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.defilant:focus-visible {
    outline-offset: -3px;
}

@keyframes defilement {
    to {
        transform: translateX(-50%);
    }
}

/* Sans animation (préférence « réduire les mouvements ») : texte fixe, coupé en fin de ligne */
@media (prefers-reduced-motion: reduce) {
    .defilant {
        padding-inline: var(--marge);
        text-overflow: ellipsis;
    }

    .defilant-piste {
        display: inline;
    }

    .defilant-texte[aria-hidden] {
        display: none;
    }
}

/* ─── Sections ──────────────────────────────────────────── */
.section {
    padding-block: var(--section);
}

.section-grise {
    background: var(--papier-2);
}

.section + .section:not(.section-grise),
.section-grise + .section-grise {
    border-top: 1px solid var(--filet);
}

.section-tete {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.surtitre {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--texte-doux);
    font-size: 0.9375rem;
    font-weight: 600;
}

.surtitre::before {
    content: "";
    width: 1.75rem;
    height: 3px;
    background: var(--accent);
}

.chapo {
    margin-top: 1.1rem;
    color: var(--texte);
    font-size: 1.1875rem;
    line-height: 1.6;
}

.section-pied {
    margin-top: 2.5rem;
}

/* ─── Accueil : introduction ────────────────────────────── */
.intro {
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
}

.intro-grille {
    display: grid;
    gap: 3rem;
}

.intro-texte {
    max-width: 40rem;
}

.intro .chapo {
    margin-top: 1.5rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.besoins {
    align-self: end;
    border-top: 3px solid var(--encre);
}

.besoins h2 {
    padding: 1rem 0 0.5rem;
    color: var(--texte-doux);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
}

.besoins ul {
    padding: 0;
    list-style: none;
}

.besoins a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0;
    border-top: 1px solid var(--filet);
    color: var(--encre);
    font-weight: 600;
    text-decoration: none;
}

.besoins a:hover {
    color: var(--accent-encre);
}

.besoins .icone {
    color: var(--accent-encre);
    transition: transform 0.15s;
}

.besoins a:hover .icone {
    transform: translateX(3px);
}

.cadres {
    border-top: 1px solid var(--filet);
    border-bottom: 1px solid var(--filet);
    background: var(--papier-2);
}

.cadres p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.5rem;
    padding-block: 1.1rem;
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.cadres strong {
    color: var(--encre);
    font-weight: 600;
}

@media (min-width: 960px) {
    .intro-grille {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 5rem;
    }
}

/* ─── Principes (trois colonnes numérotées) ─────────────── */
.principes {
    display: grid;
    gap: 2rem;
    padding: 0;
    list-style: none;
    counter-reset: principe;
}

.principes li {
    counter-increment: principe;
    padding-top: 1.25rem;
    border-top: 1px solid var(--encre);
}

.principes li::before {
    content: counter(principe, decimal-leading-zero);
    display: block;
    margin-bottom: 0.75rem;
    color: var(--accent-encre);
    font-size: 0.9375rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.principes h3 {
    margin-bottom: 0.5rem;
}

@media (min-width: 760px) {
    .principes {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* ─── Expertises : liste éditoriale ─────────────────────── */
.expertises {
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--filet-fort);
}

.expertise {
    display: grid;
    gap: 1.25rem;
    padding-block: 2rem;
    border-top: 1px solid var(--filet-fort);
}

.expertise-numero {
    color: var(--accent-encre);
    font-size: 0.9375rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.expertise h3 {
    font-size: 1.375rem;
    line-height: 1.25;
}

.expertise h3 a {
    text-decoration: none;
}

.expertise h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.expertise-principal p {
    margin-top: 0.6rem;
}

.expertise-principal .lien-fleche {
    margin-top: 1.1rem;
    font-size: 0.975rem;
}

.expertise-detail h4,
.liste-titre {
    margin-bottom: 0.5rem;
    color: var(--texte-doux);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
}

.liste-tirets {
    padding: 0;
    list-style: none;
    font-size: 0.975rem;
    line-height: 1.5;
}

.liste-tirets li {
    position: relative;
    padding-left: 1.1rem;
}

.liste-tirets li + li {
    margin-top: 0.4rem;
}

.liste-tirets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 0.5rem;
    height: 2px;
    background: var(--accent);
}

@media (min-width: 760px) {
    .expertise {
        grid-template-columns: 1fr 1fr;
        column-gap: 2.5rem;
    }

    .expertise-numero,
    .expertise-principal {
        grid-column: 1 / -1;
    }

    .expertise-principal {
        max-width: 38rem;
    }
}

@media (min-width: 1040px) {
    .expertise {
        grid-template-columns: 3rem minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 2.5rem;
    }

    .expertise-numero,
    .expertise-principal {
        grid-column: auto;
    }

    .expertise-numero {
        padding-top: 0.3rem;
    }
}

/* ─── Méthodologie : quatre étapes ──────────────────────── */
.etapes {
    display: grid;
    gap: 2rem;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.etapes li {
    position: relative;
    counter-increment: etape;
    padding-left: 3.5rem;
}

.etapes li::before {
    content: counter(etape);
    position: absolute;
    left: 0;
    top: -0.2rem;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1.5px solid var(--encre);
    border-radius: 50%;
    background: var(--papier);
    color: var(--encre);
    font-weight: 650;
}

.etapes h3 {
    margin-bottom: 0.4rem;
}

.etapes p {
    font-size: 0.975rem;
}

@media (min-width: 900px) {
    .etapes-ligne {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.25rem;
    }

    .etapes-ligne li {
        padding: 3.4rem 0 0;
    }

    .etapes-ligne li::before {
        top: 0;
    }

    /* Filet reliant les étapes */
    .etapes-ligne li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.2rem;
        left: 3rem;
        right: -1.65rem;
        height: 1px;
        background: var(--filet-fort);
    }
}

.encart {
    margin-top: 2.5rem;
    padding: 1.1rem 1.4rem;
    border-left: 3px solid var(--accent);
    background: var(--papier);
    max-width: 48rem;
}

.section:not(.section-grise) .encart {
    background: var(--papier-2);
}

/* ─── Fondateur ─────────────────────────────────────────── */
.fondateur {
    display: grid;
    gap: 2.5rem;
}

.fondateur-photo img,
.fondateur-initiales {
    display: block;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--rayon);
}

.fondateur-photo img {
    height: auto;
    object-fit: cover;
    object-position: center top;
}

.fondateur-initiales {
    display: grid;
    place-items: center;
    background: var(--encre);
    color: var(--accent);
    font-size: 3.5rem;
    font-weight: 650;
    letter-spacing: -0.03em;
}

/* Page À propos : portrait (ou initiales) dans un rond parfait */
.page-a-propos .fondateur-photo img,
.page-a-propos .fondateur-initiales {
    aspect-ratio: 1;
    border-radius: 50%;
}

.citation {
    margin-block: 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent);
    color: var(--encre);
    font-size: 1.1875rem;
    line-height: 1.55;
}

.reperes {
    display: grid;
    gap: 0;
    margin-top: 1.75rem;
    border-top: 1px solid var(--filet-fort);
}

.reperes div {
    display: grid;
    gap: 0.15rem 1.5rem;
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--filet);
}

.reperes dt {
    color: var(--texte-doux);
    font-size: 0.9375rem;
    font-weight: 600;
}

.reperes dd {
    margin: 0;
}

@media (min-width: 620px) {
    .reperes div {
        grid-template-columns: 11rem 1fr;
    }
}

@media (min-width: 860px) {
    .fondateur {
        grid-template-columns: 20rem minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }
}

/* ─── Études de cas ─────────────────────────────────────── */
.cas-structure {
    display: grid;
    gap: 0;
    padding: 0;
    list-style: none;
    counter-reset: cas;
    border-top: 1px solid var(--filet-fort);
}

.cas-structure li {
    counter-increment: cas;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--filet);
    font-size: 0.975rem;
}

.cas-structure li::before {
    content: counter(cas);
    color: var(--accent-encre);
    font-weight: 650;
}

.cas-structure strong {
    color: var(--encre);
}

.deux-colonnes {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .deux-colonnes {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4.5rem;
        align-items: start;
    }
}

.cas {
    padding-block: 2rem;
    border-top: 1px solid var(--filet-fort);
}

.cas dl {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.cas dt {
    color: var(--texte-doux);
    font-size: 0.9375rem;
    font-weight: 600;
}

.cas dd {
    margin: 0;
}

/* ─── Ressources ────────────────────────────────────────── */
.ressources {
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--filet-fort);
}

.ressource {
    display: grid;
    gap: 0.3rem 2rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--filet-fort);
}

.ressource-theme {
    color: var(--texte-doux);
    font-size: 0.875rem;
    font-weight: 600;
}

.ressource h3 a {
    text-decoration: none;
}

.ressource h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.ressource p {
    color: var(--texte-doux);
    font-size: 0.975rem;
}

@media (min-width: 760px) {
    .ressource {
        grid-template-columns: 9rem minmax(0, 1fr);
    }

    .ressource-corps {
        grid-column: 2;
    }
}

.ressources-colonnes {
    display: grid;
    gap: 3rem;
}

@media (min-width: 900px) {
    .ressources-colonnes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4.5rem;
    }
}

.ressources-colonnes h3.liste-titre {
    margin-bottom: 0;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.ressources-simple {
    padding: 0;
    list-style: none;
}

.ressources-simple li {
    padding-block: 1rem;
    border-top: 1px solid var(--filet-fort);
}

.ressources-simple a {
    font-weight: 600;
    text-decoration: none;
}

.ressources-simple a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

.ressources-simple p {
    margin-top: 0.2rem;
    color: var(--texte-doux);
    font-size: 0.95rem;
}

/* ─── FAQ ───────────────────────────────────────────────── */
.faq {
    max-width: 50rem;
    border-bottom: 1px solid var(--filet-fort);
}

.faq details {
    border-top: 1px solid var(--filet-fort);
}

.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.15rem;
    color: var(--encre);
    font-size: 1.0938rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--accent-encre);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.1;
}

.faq details[open] summary::after {
    content: "–";
}

.faq summary:hover {
    color: var(--accent-encre);
}

.faq-reponse {
    max-width: 44rem;
    padding-bottom: 1.4rem;
}

/* ─── Contact et formulaire ─────────────────────────────── */
.contact-grille {
    display: grid;
    gap: 3rem;
}

.contact-coordonnees {
    margin-top: 2rem;
    padding: 0;
    list-style: none;
}

.contact-coordonnees li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.8rem;
    border-top: 1px solid var(--filet-fort);
}

.contact-coordonnees li:last-child {
    border-bottom: 1px solid var(--filet-fort);
}

.contact-coordonnees .icone {
    color: var(--accent-encre);
}

@media (min-width: 960px) {
    .contact-grille {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 5rem;
        align-items: start;
    }
}

.formulaire,
.message-succes {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--papier);
    border: 1px solid var(--filet-fort);
    border-radius: var(--rayon);
}

.champs-2 {
    display: grid;
    gap: 0 1.25rem;
}

@media (min-width: 620px) {
    .champs-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.champ {
    margin-bottom: 1.15rem;
}

.champ label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--encre);
    font-size: 0.9375rem;
    font-weight: 600;
}

.champ input,
.champ select,
.champ textarea {
    display: block;
    width: 100%;
    min-height: 2.875rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #8a94a1;
    border-radius: var(--rayon);
    background: var(--papier);
    color: var(--encre);
    font: inherit;
    font-size: 1rem;
}

.champ textarea {
    resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: 3px solid var(--accent);
    outline-offset: 0;
    border-color: var(--encre);
}

.champ [aria-invalid="true"] {
    border-color: var(--erreur);
    border-width: 2px;
}

.champ-erreur {
    margin-top: 0.35rem;
    color: var(--erreur);
    font-size: 0.9rem;
    font-weight: 500;
}

.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulaire-note {
    margin-bottom: 1.25rem;
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.formulaire .btn[aria-disabled="true"] {
    opacity: 0.7;
    cursor: progress;
}

.message {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rayon);
}

.message-erreur {
    border: 1px solid #f0b4ae;
    border-left: 4px solid var(--erreur);
    background: var(--erreur-fond);
    color: #7a1a12;
}

.message-succes {
    margin: 0;
    border-left: 4px solid var(--accent);
    background: var(--succes-fond);
}

.message-succes h3 {
    margin-bottom: 0.5rem;
}

/* ─── Bandeau d'appel à l'action (pages intérieures) ────── */
.bandeau-sombre {
    background: var(--encre);
    color: #c6d0db;
}

.bandeau-sombre h2 {
    color: #ffffff;
}

.bandeau-sombre .conteneur {
    display: grid;
    gap: 1.75rem;
    padding-block: clamp(2.75rem, 6vw, 4rem);
}

.bandeau-sombre p {
    max-width: 38rem;
    margin-top: 0.75rem;
}

.bandeau-sombre .surtitre {
    margin-top: 0;
    color: #aab6c3;
}

.bandeau-sombre a:not(.btn) {
    color: #ffffff;
}

@media (min-width: 860px) {
    .bandeau-sombre .conteneur {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 3rem;
    }
}

/* ─── Pages intérieures ─────────────────────────────────── */
.page-tete {
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--filet);
}

.page-tete h1 {
    max-width: 48rem;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.page-tete .chapo {
    max-width: 44rem;
}

.fil {
    margin-bottom: 1.75rem;
    color: var(--texte-doux);
    font-size: 0.9rem;
}

.fil ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0;
    list-style: none;
}

.fil li + li::before {
    content: "/";
    margin-right: 0.5rem;
    color: var(--filet-fort);
}

.fil a {
    color: var(--texte-doux);
    text-decoration: none;
}

.fil a:hover {
    color: var(--encre);
    text-decoration: underline;
}

.page-corps {
    display: grid;
    gap: 3rem;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.page-corps > * {
    min-width: 0;
}

.bloc + .bloc {
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

.bloc > h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.375rem, 2.4vw, 1.625rem);
}

.bloc > p,
.bloc > .liste-tirets {
    max-width: 44rem;
}

.bloc > p + .liste-tirets {
    margin-top: 1.25rem;
}

.bloc .etapes {
    max-width: 44rem;
    gap: 1.6rem;
}

.bloc .faq {
    max-width: none;
}

.liste-grande {
    font-size: 1.0625rem;
}

.liste-grande li + li {
    margin-top: 0.65rem;
}

.marge {
    display: grid;
    gap: 2rem;
    align-content: start;
}

.marge-bloc {
    padding-top: 1.1rem;
    border-top: 3px solid var(--encre);
}

.marge-bloc h2 {
    margin-bottom: 0.9rem;
    font-size: 1.0625rem;
    letter-spacing: 0;
}

.marge-bloc p {
    font-size: 0.975rem;
}

.marge-bloc .btn {
    width: 100%;
    margin-top: 1.1rem;
}

.marge-liens {
    padding: 0;
    list-style: none;
    font-size: 0.975rem;
}

.marge-liens li {
    padding-block: 0.6rem;
    border-top: 1px solid var(--filet);
    line-height: 1.45;
}

.marge-liens li:first-child {
    border-top: 0;
    padding-top: 0;
}

@media (min-width: 980px) {
    .page-corps {
        grid-template-columns: minmax(0, 1fr) 19rem;
        gap: 5rem;
    }

    .marge {
        position: sticky;
        top: 6rem;
    }
}

/* ─── Articles et pages de texte ────────────────────────── */
.texte {
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.texte > * {
    max-width: 44rem;
}

/* Articles du blog : titre et colonne de texte élargis sur ordinateur */
@media (min-width: 980px) {
    article.texte > *,
    .page-article .page-tete h1,
    .page-article .page-tete .chapo {
        max-width: 60rem;
    }

    /* Le titre remplit la ligne avant de passer à la suivante */
    .page-article .page-tete h1 {
        text-wrap: wrap;
    }
}

.texte h2 {
    margin: 2.5rem 0 1rem;
    font-size: clamp(1.375rem, 2.4vw, 1.625rem);
}

.texte h3 {
    margin: 2rem 0 0.75rem;
}

.texte > :first-child {
    margin-top: 0;
}

.texte p + p,
.texte p + ul,
.texte ul + p,
.texte p + ol,
.texte ol + p {
    margin-top: 1em;
}

.texte ul,
.texte ol {
    padding-left: 1.4rem;
}

.texte li + li {
    margin-top: 0.35rem;
}

.texte li > ul,
.texte ul > ul {
    margin-block: 0.35rem;
}

.texte ul .num {
    list-style-type: decimal;
}

.texte table {
    width: 100%;
    margin-block: 1.5rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.texte th,
.texte td {
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--filet);
    text-align: left;
    vertical-align: top;
}

.texte th {
    border-bottom: 2px solid var(--encre);
    color: var(--encre);
    font-weight: 600;
}

.texte tfoot td {
    border-top: 2px solid var(--encre);
    font-weight: 600;
}

.tableau-defilant {
    overflow-x: auto;
}

.texte hr {
    margin-block: 2.5rem;
    border: 0;
    border-top: 1px solid var(--filet-fort);
}

/* Classes héritées des articles existants */
.texte .glow-plus,
.page-tete .glow-plus {
    color: inherit;
}

.texte p .glow-plus,
.texte li .glow-plus {
    color: var(--encre);
    font-weight: 600;
}

.texte .question {
    color: var(--encre);
    font-weight: 600;
}

.texte .retrait {
    padding-left: 1.5rem;
}

.texte .centre {
    text-align: center;
}

.texte .nowrap {
    white-space: nowrap;
}

.texte .sup,
.page-tete .sup {
    position: relative;
    top: -0.4em;
    font-size: 0.7em;
}

.article-meta {
    margin-top: 1.25rem;
    color: var(--texte-doux);
    font-size: 0.9375rem;
}

.a-completer {
    padding: 0.05em 0.35em;
    background: #fff3c4;
    color: #5c4400;
    font-weight: 600;
}

/* ─── Pied de page ──────────────────────────────────────── */
.pied {
    background: var(--encre);
    color: #aab6c3;
    font-size: 0.95rem;
}

.pied a,
.pied .lien-bouton {
    color: #e6edf3;
    text-decoration: none;
}

.pied a:hover,
.pied .lien-bouton:hover {
    color: var(--accent);
    text-decoration: underline;
}

.pied-grille {
    display: grid;
    gap: 2.5rem;
    padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}

.pied-presentation p {
    max-width: 22rem;
    margin-top: 0.9rem;
}

.pied-titre {
    margin-bottom: 0.9rem;
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
}

.pied ul {
    padding: 0;
    list-style: none;
}

.pied-grille li + li {
    margin-top: 0.5rem;
}

.pied-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding-block: 1.5rem;
    border-top: 1px solid #2b3545;
    font-size: 0.875rem;
}

.pied-bas ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 620px) {
    .pied-grille {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 980px) {
    .pied-grille {
        grid-template-columns: 1.6fr 1.3fr 1fr 1fr;
        gap: 3rem;
    }
}

/* ─── Bandeau de consentement ───────────────────────────── */
.cookies {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 30rem;
    padding: 1.1rem 1.25rem;
    background: var(--papier);
    border: 1px solid var(--filet-fort);
    border-radius: var(--rayon);
    box-shadow: 0 12px 28px rgba(13, 17, 23, 0.16);
    font-size: 0.925rem;
    line-height: 1.5;
}

.cookies[hidden] {
    display: none;
}

.cookies-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.cookies-actions .btn {
    flex: 1;
    min-height: 2.5rem;
    padding-block: 0.4rem;
    font-size: 0.95rem;
}

/* ─── Divers ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

@media print {

    .entete,
    .pied,
    .cookies,
    .bandeau-sombre,
    .nav-bascule {
        display: none;
    }
}