/* =============================================================================
   Visionis Sécurité — feuille de style unique
   Direction artistique validée : épuré, premium, professionnel.
   Palette : bleu nuit · ivoire · gris clair · touche cuivre/champagne.
   Aucune ressource externe (police, script, image tierce) : le site reste
   autonome, rapide et sans transfert de données vers un tiers.
   ========================================================================== */

:root {
    --nuit: #0F1A2B;
    --nuit-clair: #1B2A40;
    --nuit-voile: rgba(15, 26, 43, .06);
    --ivoire: #F8F5F0;
    --gris: #E7E3DB;
    --blanc: #FFFFFF;
    --texte: #16202F;
    --texte-doux: #5B6575;
    --cuivre: #B08D57;
    /* Déclinaison assombrie du cuivre, réservée au texte : le cuivre
       d'origine ne passe pas le seuil de contraste WCAG AA sur fond clair. */
    --cuivre-texte: #8A6A3C;
    --cuivre-clair: #C9A87C;
    --champagne: #E4D6BC;

    --shell: 74rem;
    --radius: 4px;
    --radius-lg: 10px;

    --serif: ui-serif, Georgia, "Times New Roman", serif;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --ombre: 0 1px 2px rgba(15, 26, 43, .04), 0 12px 32px rgba(15, 26, 43, .06);
    --ombre-forte: 0 2px 4px rgba(15, 26, 43, .06), 0 24px 60px rgba(15, 26, 43, .12);

    --transition: 240ms cubic-bezier(.22, 1, .36, 1);
}

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

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

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texte);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; }

.shell {
    width: min(var(--shell), 100% - 2.5rem);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--nuit);
    color: var(--blanc);
}

.skip-link:focus { left: 1rem; top: 1rem; }

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

/* --- En-tête ------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gris);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--nuit);
    text-decoration: none;
}

.logo-mark { width: 1.9rem; height: auto; flex: none; }

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }

.brand__name {
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: .01em;
}

.brand__baseline {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cuivre-texte);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    list-style: none;
}

.site-nav a {
    position: relative;
    font-size: .875rem;
    font-weight: 500;
    color: var(--texte-doux);
    text-decoration: none;
    transition: color var(--transition);
}

.site-nav a:hover { color: var(--nuit); }

.site-nav a[aria-current="page"] { color: var(--nuit); }

.site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.45rem;
    height: 2px;
    background: var(--cuivre);
}

.site-nav__cta { white-space: nowrap; }

.nav-burger { display: none; }

/* --- Boutons ------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 550;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}

.btn:hover { transform: translateY(-1px); }

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

.btn--accent:hover { background: var(--nuit-clair); }

/* Sur fond sombre, le bouton principal s'inverse en champagne (12,2:1). */
.hero .btn--accent,
.section--nuit .btn--accent,
.page-head--nuit .btn--accent,
.site-footer .btn--accent {
    background: var(--champagne);
    color: var(--nuit);
}

.hero .btn--accent:hover,
.section--nuit .btn--accent:hover,
.page-head--nuit .btn--accent:hover,
.site-footer .btn--accent:hover { background: var(--blanc); }

.btn--outline {
    border-color: var(--nuit);
    color: var(--nuit);
    background: transparent;
}

.btn--outline:hover { background: var(--nuit); color: var(--blanc); }

.btn--ghost {
    border-color: rgba(255, 255, 255, .35);
    color: var(--blanc);
    background: rgba(255, 255, 255, .04);
}

.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }

.btn--sm { padding: .6rem 1.1rem; font-size: .82rem; }

.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 550;
    color: var(--nuit);
    text-decoration: none;
    border-bottom: 1px solid var(--cuivre);
    padding-bottom: .15rem;
    transition: gap var(--transition);
}

.link-arrow::after { content: "→"; color: var(--cuivre-texte); }

.link-arrow:hover { gap: .75rem; }

.link-arrow--light { color: var(--blanc); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(78vh, 44rem);
    padding: 6rem 0 5rem;
    background: var(--nuit);
    color: var(--blanc);
    overflow: hidden;
}

/* Emplacement de la vidéo d'accueil : remplacer .hero__media par un <video>
   muet, en boucle, poster défini. Conserver le voile pour la lisibilité. */
.hero__media { position: absolute; inset: 0; }

.hero__glow {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 120%;
    background:
        radial-gradient(45rem 30rem at 20% 20%, rgba(176, 141, 87, .22), transparent 65%),
        radial-gradient(40rem 28rem at 85% 80%, rgba(27, 42, 64, .9), transparent 70%);
}

.hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}

.hero__inner { position: relative; }

.hero__title {
    margin-top: 1.25rem;
    font-size: clamp(2.5rem, 6.5vw, 4.6rem);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.hero__title span { display: inline-block; margin-right: .12em; }

.hero__title span:last-child { color: var(--champagne); }

.hero__subtitle {
    max-width: 38rem;
    margin-top: 1.75rem;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: rgba(255, 255, 255, .78);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2.75rem;
}

/* --- Structure des sections ---------------------------------------------- */

.section { padding: 6rem 0; }

.section--tight { padding: 4rem 0; }

.section--ivoire { background: var(--ivoire); }

.section--nuit { background: var(--nuit); color: var(--blanc); }

.section--nuit .section__title { color: var(--blanc); }

.eyebrow {
    margin: 0 0 .9rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cuivre-texte);
}

.eyebrow--light { color: var(--champagne); }

.section__title {
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    color: var(--nuit);
}

.section__head { max-width: 46rem; margin-bottom: 3.25rem; }

.section__head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    max-width: none;
}

.section__intro {
    margin-top: 1.25rem;
    font-size: 1.05rem;
    color: var(--texte-doux);
}

.section--nuit .section__intro { color: rgba(255, 255, 255, .72); }

.section__foot { margin-top: 2.75rem; }

.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
    align-items: start;
}

.split__lead { position: sticky; top: 7rem; }

.lead {
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    line-height: 1.55;
    color: var(--texte);
    letter-spacing: -.01em;
}

/* --- Cartes -------------------------------------------------------------- */

.cards { display: grid; gap: 1.5rem; }

.cards--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.cards--4 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 2rem;
    background: var(--blanc);
    border: 1px solid var(--gris);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre);
    border-color: var(--champagne);
}

.card h3 {
    font-size: 1.15rem;
    color: var(--nuit);
}

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

.card h3 a:hover { color: var(--cuivre); }

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

.card .link-arrow { margin-top: auto; align-self: flex-start; }

.card__index {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-style: italic;
    color: var(--cuivre);
    line-height: 1;
}

.card--dark {
    background: var(--nuit-clair);
    border-color: rgba(255, 255, 255, .1);
}

.card--dark h3 { color: var(--blanc); }

.card--dark p { color: rgba(255, 255, 255, .72); }

.card--dark:hover { border-color: rgba(228, 214, 188, .45); box-shadow: none; }

.card--parcours { border-top: 3px solid var(--cuivre); }

.card--famille { background: var(--ivoire); }

.section--ivoire .card--famille { background: var(--blanc); }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
}

.chips li {
    padding: .3rem .7rem;
    border: 1px solid var(--gris);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--texte-doux);
    background: var(--blanc);
}

.chips--light li {
    background: transparent;
    border-color: rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
}

.chips--light a { text-decoration: none; }

.chips--light a:hover { color: var(--champagne); }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: .9rem 0;
    border-block: 1px solid var(--gris);
}

.meta dt {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.meta dd { margin: .2rem 0 0; font-size: .92rem; font-weight: 550; color: var(--nuit); }

/* --- Empilements et panneaux --------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 2.25rem; }

.stack--large { gap: 3.5rem; }

.stack__item h2, .stack__item h3 {
    margin-bottom: .6rem;
    font-size: 1.2rem;
    color: var(--nuit);
}

.stack__item h2 { font-size: 1.5rem; }

.stack__item p { color: var(--texte-doux); }

.stack__item p + p { margin-top: .75rem; }

.stack__item--numbered {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--gris);
}

.stack__index {
    font-family: var(--serif);
    font-size: 2rem;
    font-style: italic;
    color: var(--cuivre);
    line-height: 1;
}

.panel {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 3rem;
    padding: 3.25rem;
    background: var(--ivoire);
    border-radius: var(--radius-lg);
    align-items: center;
}

.panel--dark {
    background: var(--nuit-clair);
    border: 1px solid rgba(255, 255, 255, .1);
}

.panel--dark .section__title { color: var(--blanc); }

.panel--dark p { color: rgba(255, 255, 255, .72); }

.panel__lead p { margin: 1.1rem 0 1.75rem; color: var(--texte-doux); }

.panel__list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }

.panel__list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .95rem;
    color: var(--texte);
}

.panel__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--cuivre);
}

.notice {
    padding: 1.35rem 1.6rem;
    background: var(--ivoire);
    border-left: 3px solid var(--cuivre);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .95rem;
    color: var(--texte-doux);
}

.notice--center {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
    border-left: 0;
    border-top: 3px solid var(--cuivre);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* --- En-tête de page et fil d'Ariane ------------------------------------- */

.breadcrumb {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--gris);
    font-size: .82rem;
    color: var(--texte-doux);
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }

.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--gris); }

.breadcrumb a { text-decoration: none; }

.breadcrumb a:hover { color: var(--cuivre); }

.page-head { padding: 4.5rem 0 3.5rem; }

.page-head h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    color: var(--nuit);
}

.page-head__intro {
    max-width: 42rem;
    margin-top: 1.5rem;
    font-size: 1.08rem;
    color: var(--texte-doux);
}

.page-head--nuit {
    background: var(--nuit);
    color: var(--blanc);
    padding: 5.5rem 0 4.5rem;
}

.page-head--nuit h1 { color: var(--blanc); }

.page-head--nuit .page-head__intro { color: rgba(255, 255, 255, .75); }

.anchors {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .25rem;
}

.anchors a {
    padding: .55rem 1.1rem;
    border: 1px solid var(--gris);
    border-radius: 999px;
    font-size: .84rem;
    color: var(--texte-doux);
    text-decoration: none;
    transition: all var(--transition);
}

.anchors a:hover {
    border-color: var(--cuivre);
    color: var(--nuit);
    background: var(--ivoire);
}

/* --- Fiche formation ----------------------------------------------------- */

.fiche-head { padding: 3.5rem 0; background: var(--ivoire); }

.fiche-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem;
    align-items: center;
}

.fiche-head h1 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    color: var(--nuit);
}

.fiche-head__resume {
    margin-top: 1.25rem;
    font-size: 1.05rem;
    color: var(--texte-doux);
}

/* Emplacement de la photo de la formation. */
.fiche-head__visuel {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(20rem 14rem at 70% 30%, rgba(176, 141, 87, .3), transparent 70%),
        linear-gradient(150deg, var(--nuit), var(--nuit-clair));
}

.fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 3.5rem;
    padding: 3.5rem 0 5rem;
    align-items: start;
}

.anchors--fiche { margin-bottom: 2.5rem; }

.attributs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem;
    padding: 1.75rem 0;
    margin-bottom: 3rem;
    list-style: none;
    border-block: 1px solid var(--gris);
}

.attributs li { display: flex; flex-direction: column; gap: .25rem; }

.attributs__label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cuivre-texte);
}

.attributs__value { font-size: 1rem; font-weight: 600; color: var(--nuit); }

.attributs__detail { font-size: .82rem; color: var(--texte-doux); }

.bloc { margin-bottom: 3.25rem; }

.bloc h2 {
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: var(--nuit);
}

.bloc h3 {
    margin: 2rem 0 .9rem;
    font-size: 1.08rem;
    color: var(--nuit);
}

.bloc p { color: var(--texte-doux); }

.bloc .cards { margin-top: 1.5rem; }

.liste-check, .liste-puces, .liste-numerotee { list-style: none; display: flex; flex-direction: column; gap: .8rem; }

.liste-check li, .liste-puces li {
    position: relative;
    padding-left: 1.9rem;
    color: var(--texte-doux);
}

.liste-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .42em;
    width: 1rem;
    height: .55rem;
    border-left: 2px solid var(--cuivre);
    border-bottom: 2px solid var(--cuivre);
    transform: rotate(-45deg);
}

.liste-puces li::before {
    content: "";
    position: absolute;
    left: .3rem;
    top: .65em;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--cuivre);
}

.liste-numerotee { counter-reset: etape; }

.liste-numerotee li {
    position: relative;
    padding-left: 2.4rem;
    color: var(--texte-doux);
    counter-increment: etape;
}

.liste-numerotee li::before {
    content: counter(etape, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: .95rem;
    color: var(--cuivre-texte);
}

.tarif {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--nuit) !important;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
}

.encadre {
    padding: 1.75rem 2rem;
    margin-bottom: 3.25rem;
    background: var(--ivoire);
    border-radius: var(--radius-lg);
}

.encadre h2 { font-size: 1rem; margin-bottom: .9rem; color: var(--nuit); }

.encadre ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.encadre li { font-size: .9rem; color: var(--texte-doux); }

.fiche__aside { position: sticky; top: 6.5rem; }

/* --- Formulaires --------------------------------------------------------- */

.form-card {
    padding: 2rem;
    background: var(--blanc);
    border: 1px solid var(--gris);
    border-radius: var(--radius-lg);
    box-shadow: var(--ombre);
}

.form-card--wide { padding: 2.75rem; }

.form-card h2 { font-size: 1.2rem; color: var(--nuit); }

.form-card__intro {
    margin: .75rem 0 1.75rem;
    font-size: .88rem;
    color: var(--texte-doux);
}

.form { display: flex; flex-direction: column; gap: 1.1rem; }

.form__row--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form div > label,
.form label {
    display: block;
    margin-bottom: .4rem;
    font-size: .82rem;
    font-weight: 550;
    color: var(--nuit);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
    width: 100%;
    padding: .75rem .9rem;
    font-family: inherit;
    font-size: .92rem;
    color: var(--texte);
    background: var(--blanc);
    border: 1px solid var(--gris);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--cuivre);
    box-shadow: 0 0 0 3px rgba(176, 141, 87, .15);
}

.form textarea { resize: vertical; min-height: 7rem; }

.form .help-text, .form small {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--texte-doux);
}

/* Le thème de formulaire par défaut place le label avant la case : on rétablit
   l'ordre attendu (case puis libellé) sans toucher au markup. */
.form div:has(> input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: .65rem;
}

.form div:has(> input[type="checkbox"]) label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--texte-doux);
}

.form input[type="checkbox"] {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .18rem 0 0;
    accent-color: var(--cuivre);
}

.form ul li {
    list-style: none;
    font-size: .8rem;
    color: #B3261E;
    margin-top: .35rem;
}

.form__error-summary {
    padding: .9rem 1.1rem;
    background: #FDF2F1;
    border-left: 3px solid #B3261E;
    font-size: .87rem;
    color: #8C1D18;
}

.form__rgpd { font-size: .78rem; color: var(--texte-doux); }

.form__rgpd a { color: var(--nuit); }

/* Piège à robots : invisible et hors du flux de tabulation. */
.form-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.infos-card {
    padding: 2rem;
    background: var(--ivoire);
    border-radius: var(--radius-lg);
}

.infos-card h2 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--nuit); }

.infos-card h3 { margin: 1.75rem 0 .6rem; font-size: .95rem; color: var(--nuit); }

.infos-card p { font-size: .9rem; color: var(--texte-doux); }

.infos-card__pending {
    padding: .9rem 1.1rem;
    background: var(--blanc);
    border-left: 3px solid var(--champagne);
    font-size: .87rem !important;
}

.infos-card .liste-numerotee li { font-size: .9rem; }

/* --- Confirmation -------------------------------------------------------- */

.confirmation { padding: 7rem 0; }

.confirmation__inner { max-width: 34rem; margin-inline: auto; text-align: center; }

.confirmation__icon { width: 4rem; color: var(--gris); }

.confirmation h1 { margin-top: 1.75rem; font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--nuit); }

.confirmation__text { margin-top: 1.25rem; color: var(--texte-doux); }

.confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 2.5rem;
}

/* --- Contenus longs ------------------------------------------------------ */

.prose p { color: var(--texte-doux); }

.prose p + p { margin-top: 1.15rem; }

.prose--legal { max-width: 44rem; }

.prose--legal h2 {
    margin: 2.75rem 0 1rem;
    font-size: 1.2rem;
    color: var(--nuit);
}

.prose--legal .notice { margin-bottom: 1rem; }

/* Emplacement du portrait de la fondatrice. */
.portrait {
    margin-top: 2rem;
    aspect-ratio: 3 / 4;
    max-width: 18rem;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(14rem 12rem at 60% 25%, rgba(176, 141, 87, .28), transparent 70%),
        linear-gradient(160deg, var(--nuit), var(--nuit-clair));
}

/* --- Appel à l'action ---------------------------------------------------- */

.cta { padding: 5rem 0; background: var(--ivoire); border-top: 1px solid var(--gris); }

.cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--nuit); }

.cta p { margin-top: .75rem; color: var(--texte-doux); }

.cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.cta .btn--ghost { border-color: var(--nuit); color: var(--nuit); background: transparent; }

.cta .btn--ghost:hover { background: var(--nuit); color: var(--blanc); }

/* --- Pied de page -------------------------------------------------------- */

.site-footer {
    padding: 4.5rem 0 2rem;
    background: var(--nuit);
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 3rem;
}

.brand--footer { color: var(--blanc); }

.site-footer__signature {
    margin: 1.25rem 0 1.75rem;
    color: var(--champagne);
    font-size: .88rem;
    letter-spacing: .01em;
}

.site-footer__title {
    margin-bottom: 1.1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blanc);
}

.site-footer__list { list-style: none; display: flex; flex-direction: column; gap: .65rem; }

.site-footer__list a { text-decoration: none; transition: color var(--transition); }

.site-footer__list a:hover { color: var(--champagne); }

.site-footer__mentions {
    margin-top: 1.75rem;
    font-size: .76rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .45);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .78rem;
    color: rgba(255, 255, 255, .45);
}

/* --- Animations discrètes au scroll -------------------------------------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            animation: reveal linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 22%;
        }
    }
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
}

/* --- Adaptatif ----------------------------------------------------------- */

@media (max-width: 60rem) {
    .split, .fiche, .fiche-head__inner, .panel { grid-template-columns: 1fr; gap: 2.5rem; }
    .split__lead, .fiche__aside { position: static; }
    .fiche-head__visuel { display: none; }
    .section__head--row { flex-direction: column; align-items: flex-start; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .panel { padding: 2.25rem; }
}

/* Bascule en menu déroulant : le menu horizontal ne tient plus en dessous. */
@media (max-width: 64rem) {
    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: .35rem;
        width: 2.5rem;
        height: 2.5rem;
        padding: .5rem;
        cursor: pointer;
    }

    .nav-burger span {
        display: block;
        height: 2px;
        background: var(--nuit);
        transition: transform var(--transition), opacity var(--transition);
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.5rem 1.25rem 2rem;
        background: var(--blanc);
        border-bottom: 1px solid var(--gris);
        box-shadow: var(--ombre-forte);
    }

    .nav-toggle:checked ~ .site-nav { display: flex; }

    .nav-toggle:checked ~ .nav-burger span:first-child { transform: translateY(.6rem) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:last-child { transform: translateY(-.55rem) rotate(-45deg); }

    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }

    .site-nav li { border-bottom: 1px solid var(--gris); }

    .site-nav ul a { display: block; padding: .8rem 0; font-size: .95rem; }

    .site-nav a[aria-current="page"]::after { display: none; }

}

@media (max-width: 52rem) {
    .section { padding: 4.5rem 0; }

    .hero { min-height: auto; padding: 4.5rem 0 4rem; }

    .hero__actions .btn { width: 100%; }

    .form__row--duo { grid-template-columns: 1fr; }

    .stack__item--numbered { grid-template-columns: 1fr; gap: .75rem; }

    .site-footer__grid { grid-template-columns: 1fr; }

    .form-card--wide { padding: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .btn:hover { transform: none; }
}