/* ==========================================================================
   gnefe.fr — feuille de style du site public
   Mobile d'abord ; points de rupture : 640, 960 et 1200 px.
   Les jetons de :root sont les seules valeurs de charte : la tâche 16 les
   remplace par les couleurs et polices d'Elisa. Les teintes dérivées
   (fonds alternés, bordures…) sont calculées à partir de ces jetons.

   Palette « Flat UI Canadian ». Le bleu #54a0ff ne contraste qu'à 2,7:1
   avec le blanc : jamais en couleur de texte sur fond clair, ni en fond
   sous un texte blanc. Sur un bouton bleu, le texte est #222f3e (5,1:1).
   Le jaune #feca57 reste une touche décorative (filets, étoile).
   ========================================================================== */

/* --- Polices auto-hébergées ------------------------------------------------
   Fraunces (SIL OFL 1.1, licence : ../fonts/OFL-Fraunces.txt), sous-ensemble
   latin (accents français compris). Le 400 est préchargé par layout.php. */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/fraunces-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --color-primary: #54a0ff;
    --color-primary-hover: #2e86de;
    --color-primary-contrast: #222f3e;
    --color-accent: #feca57;
    --color-bg: #f4f7fa; /* = color-mix(#c8d6e5 20 %, #ffffff) */
    --color-surface: #ffffff;
    --color-border: #c8d6e5;
    --color-text: #222f3e;
    --color-muted: #576574;
    --font-heading: "Fraunces", Georgia, serif;
    --font-body: system-ui, sans-serif;
    --radius: 14px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 5rem;
}

/* --- Teintes dérivées des jetons ---------------------------------------- */
:root {
    --tint-alt: color-mix(in srgb, var(--color-border) 40%, var(--color-surface));
    --tint-primary-soft: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    /* Texte sur le bleu foncé du survol : #222f3e n'y atteint que 3,6:1, ce bleu nuit 4,7:1. */
    --tint-text-deep: color-mix(in srgb, var(--color-text) 50%, #000000);
    --tint-border: var(--color-border);
    --tint-footer-muted: color-mix(in srgb, var(--color-bg) 75%, var(--color-text));
    --tint-deco: color-mix(in srgb, var(--color-primary) 12%, transparent);
    --tint-deco-ring: color-mix(in srgb, var(--color-primary) 35%, transparent);
    --shadow-soft: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent),
        0 8px 24px color-mix(in srgb, var(--color-text) 7%, transparent);
    --shadow-lift: 0 2px 4px color-mix(in srgb, var(--color-text) 6%, transparent),
        0 18px 40px color-mix(in srgb, var(--color-text) 12%, transparent);
    --shadow-primary: 0 8px 20px color-mix(in srgb, var(--color-primary) 30%, transparent);
    /* Dégradés bleus discrets : fonds alternés, tuiles d'icônes, pied de page. */
    --gradient-alt: linear-gradient(180deg, var(--tint-alt), color-mix(in srgb, var(--color-primary) 7%, var(--color-bg)));
    --gradient-icon: linear-gradient(140deg, var(--tint-primary-soft), color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)));
    --gradient-footer: linear-gradient(160deg, var(--color-text), var(--tint-text-deep));
    --radius-lg: calc(var(--radius) * 1.6);
    --header-height: 4.5rem;
}

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

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

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: break-word;
}

img,
iframe {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
    line-height: 1.08;
}

h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
}

p {
    margin: 0 0 var(--space-4);
}

/* Liens : texte foncé, soulignement bleu (le bleu seul serait illisible). */
a {
    color: var(--color-text);
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-text);
    text-decoration-color: var(--color-primary-hover);
    text-decoration-thickness: 3px;
}

/* Anneau de focus en bleu foncé : ≥ 3:1 sur tous les fonds clairs du site. */
:focus-visible {
    outline: 3px solid var(--color-primary-hover);
    outline-offset: 3px;
}

/* Cibles de focus programmatique (lien d'évitement, contenus chargés au clic). */
[tabindex="-1"]:focus {
    outline: none;
}

[hidden] {
    display: none !important;
}

section[id],
main {
    scroll-margin-top: var(--header-height);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Filet de sécurité : site.js coupe déjà la parallaxe dans ce cas. */
    [data-parallax] {
        transform: none !important;
        will-change: auto !important;
    }
}

@media (min-width: 960px) {
    body {
        font-size: 1.0625rem;
    }
}

/* --- Utilitaires ----------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding-inline: var(--space-5);
    }
}

@media (min-width: 960px) {
    .container {
        padding-inline: var(--space-6);
    }
}

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

/* Textes saisis par Elisa dans l'admin : un mot très long ne doit jamais déborder. */
.testimonial,
.google-rating,
.contact-list,
.regulatory {
    overflow-wrap: anywhere;
}

/* --- Lien d'évitement -------------------------------------------------- */
.skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 600;
    transform: translateY(-300%);
}

.skip-link:focus {
    transform: none;
    color: var(--color-primary-contrast);
}

/* --- Boutons ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    max-width: 100%;
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-5);
    border: 2px solid var(--color-primary);
    border-radius: 999px;
    font: 600 1rem/1.25 var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: var(--shadow-primary);
}

.btn--primary:hover,
.btn--primary:active {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--tint-text-deep);
    box-shadow: var(--shadow-soft);
}

.btn--secondary {
    background: transparent;
    color: var(--color-text);
}

.btn--secondary:hover,
.btn--secondary:active {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* --- En-tête et navigation ------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    border-bottom: 1px solid var(--tint-border);
    backdrop-filter: saturate(1.4) blur(8px);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    min-height: var(--header-height);
    padding-block: var(--space-2);
}

.brand {
    display: grid;
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.25;
}

.brand:hover {
    color: var(--color-text);
}

.brand__name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.brand__role {
    color: var(--color-muted);
    font-size: 0.8125rem;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--tint-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: 600 0.9375rem/1 var(--font-body);
    cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
    display: block;
    width: 1.125rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.nav-toggle__icon {
    position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__icon::before {
    transform: translateY(-6px);
}

.nav-toggle__icon::after {
    transform: translateY(6px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
    transform: rotate(-45deg);
}

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: block;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
}

/* Avec JavaScript, sous 1200 px : panneau déroulant piloté par aria-expanded. */
.js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    background: var(--color-surface);
    border-bottom: 1px solid var(--tint-border);
    box-shadow: var(--shadow-soft);
}

.js .nav-toggle[aria-expanded="true"] + .site-nav {
    display: block;
}

.js .site-nav ul {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding: var(--space-2) var(--space-4) var(--space-4);
}

.js .site-nav li + li {
    border-top: 1px solid var(--tint-border);
}

.js .site-nav a {
    padding: var(--space-3) 0;
}

/* Sans JavaScript : pas de bouton, la navigation reste visible (en-tête non collant, trop haut). */
.no-js .site-header {
    position: static;
}

.no-js .nav-toggle {
    display: none;
}

.no-js .site-nav {
    width: 100%;
}

.no-js .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}

.no-js .site-nav a {
    padding-block: var(--space-1);
}

@media (min-width: 1200px) {
    .nav-toggle,
    .js .nav-toggle {
        display: none;
    }

    .site-nav,
    .js .site-nav,
    .no-js .site-nav {
        display: block;
        position: static;
        width: auto;
        max-height: none;
        overflow: visible;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .site-nav ul,
    .js .site-nav ul,
    .no-js .site-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-5);
        padding: 0;
    }

    .js .site-nav li + li {
        border: 0;
    }

    .site-nav a,
    .js .site-nav a {
        padding: var(--space-2) 0;
        font-size: 0.9375rem;
    }
}

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

.section--alt {
    background: var(--gradient-alt);
}

@media (min-width: 960px) {
    .section {
        padding-block: calc(var(--space-8) + var(--space-4));
    }
}

/* Filet de titre : trait jaune, interstice, touche bleue. */
.section h2::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    margin-top: var(--space-4);
    border-radius: 3px;
    background: linear-gradient(90deg,
        var(--color-accent) 0 2.25rem,
        transparent 2.25rem 2.6rem,
        var(--color-primary) 2.6rem 100%);
}

.section__inner > p,
.split__text > p,
.about__text > p {
    max-width: 65ch;
}

/* Sections à grille (objectifs, méthode…) : en-tête centré. */
.section__inner--center > h2,
.section__inner--center > .lead {
    max-width: 42rem;
    margin-inline: auto;
    text-align: center;
}

.section__inner--center > h2::after {
    margin-inline: auto;
}

.section__inner--center > p {
    margin-inline: auto;
}

/* --- Apparition douce des sections au défilement ------------------------------
   site.js pose .reveal puis .is-visible ; sans JavaScript ou si le visiteur
   demande moins d'animations, rien n'est masqué. Seules l'opacité et la
   position changent : le contenu reste lisible par les lecteurs d'écran. */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal {
        opacity: 0;
        transform: translateY(1.75rem);
        transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    /* Focus clavier dans un bloc pas encore apparu : visible tout de suite (site.js pose aussi .is-visible). */
    .js .reveal:focus-within {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
    }

    /* Léger décalage entre éléments voisins (titres, cartes d'une même grille). */
    .js .reveal:nth-child(4n+2) {
        transition-delay: 0.1s;
    }

    .js .reveal:nth-child(4n+3) {
        transition-delay: 0.2s;
    }

    .js .reveal:nth-child(4n+4) {
        transition-delay: 0.3s;
    }
}

@media print {
    .js .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

.lead {
    font-size: 1.125rem;
}

@media (min-width: 960px) {
    .lead {
        font-size: 1.25rem;
    }
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--color-primary);
}

/* --- Formes décoratives (parallaxe) ----------------------------------------
   Calque aria-hidden derrière le contenu, rogné par overflow: hidden : une
   forme déplacée ne peut jamais élargir la page. Les remplissages restent
   pâles (≤ 12 % de bleu) pour garder le contraste des textes posés dessus. */
.has-deco {
    position: relative;
    isolation: isolate;
}

.deco {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.deco__shape {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.deco__shape--disc {
    background: var(--tint-deco);
}

.deco__shape--ring {
    border: 2px solid var(--tint-deco-ring);
}

.deco__shape--soft {
    background: color-mix(in srgb, var(--color-border) 45%, transparent);
}

.deco__shape--dot {
    background: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

.deco--hero .deco__shape--disc {
    top: -6rem;
    right: -6rem;
    width: 18rem;
    height: 18rem;
}

.deco--hero .deco__shape--ring {
    bottom: 2rem;
    left: -4rem;
    width: 10rem;
    height: 10rem;
}

.deco--hero .deco__shape--dot {
    top: 1.25rem;
    right: 0.25rem; /* dans la gouttière : ne passe pas sous le texte */
    width: 0.875rem;
    height: 0.875rem;
}

.deco--approche .deco__shape--ring {
    top: 1rem;
    right: -5rem;
    width: 14rem;
    height: 14rem;
}

.deco--approche .deco__shape--soft {
    bottom: -4rem;
    left: -3rem;
    width: 8rem;
    height: 8rem;
}

.deco--methode .deco__shape--disc {
    top: -3rem;
    left: -6rem;
    width: 14rem;
    height: 14rem;
}

.deco--methode .deco__shape--ring {
    bottom: -5.5rem;
    right: 8%;
    width: 9rem;
    height: 9rem;
}

.deco--avis .deco__shape--soft {
    top: 2rem;
    left: -5rem;
    width: 16rem;
    height: 16rem;
}

.deco--avis .deco__shape--ring {
    right: -3rem;
    bottom: 3rem;
    width: 11rem;
    height: 11rem;
}

.deco--avis .deco__shape--dot {
    top: 4.5rem;
    right: 20%;
    width: 0.75rem;
    height: 0.75rem;
}

/* Motifs fins (fichiers SVG servis en masque : la couleur reste un jeton). */
.deco__lines,
.deco__dots {
    position: absolute;
    display: block;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.deco__lines {
    right: 0;
    bottom: 0;
    width: min(26rem, 80vw);
    height: min(26rem, 80vw);
    background: var(--tint-deco-ring);
    -webkit-mask-image: url("/assets/img/deco/lignes.svg");
    mask-image: url("/assets/img/deco/lignes.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.deco__dots {
    top: var(--space-7);
    right: 6%;
    width: 9rem;
    height: 7rem;
    background: var(--tint-deco-ring);
    -webkit-mask-image: url("/assets/img/deco/points.svg");
    mask-image: url("/assets/img/deco/points.svg");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

@media (min-width: 960px) {
    .deco--hero .deco__shape--disc {
        top: -8rem;
        right: -4rem;
        width: 28rem;
        height: 28rem;
    }

    .deco--hero .deco__shape--dot {
        top: 30%;
        right: 46%;
    }

    .deco--approche .deco__shape--ring {
        right: 4%;
        width: 18rem;
        height: 18rem;
    }
}

/* --- Accueil (hero) ------------------------------------------------------ */
.hero {
    padding-block: var(--space-7);
    background:
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 45%),
        radial-gradient(circle at 5% 95%, color-mix(in srgb, var(--color-border) 45%, transparent), transparent 40%),
        var(--color-bg);
}

.hero__inner {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.hero__text .lead {
    max-width: 38rem;
    color: var(--color-text);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
}

/* Photo d'ambiance en arche ; le fond reste visible tant que l'image charge. */
.hero__photo,
.portrait {
    position: relative;
    width: 100%;
    max-width: 18rem;
    aspect-ratio: 4 / 5;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--color-border) 70%, var(--color-bg)),
            color-mix(in srgb, var(--color-primary) 45%, var(--color-bg)));
    box-shadow: 1rem 1rem 0 color-mix(in srgb, var(--color-primary) 22%, transparent), var(--shadow-lift);
}

.hero__photo img,
.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Portrait d'Elisa : cadré sur le visage. */
.portrait img {
    object-position: 50% 30%;
}

@media (min-width: 640px) {
    .hero__photo,
    .portrait {
        max-width: 22rem;
    }
}

@media (min-width: 960px) {
    .hero {
        padding-block: var(--space-8) var(--space-7);
    }

    .hero__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .hero__photo {
        max-width: 26rem;
        margin-inline: auto 0;
    }
}

/* Bandeau de réassurance sous l'accroche. */
.assurances {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-7) 0 0;
    padding: var(--space-5);
    list-style: none;
    border: 1px solid var(--tint-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.assurances__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.assurances__icon,
.card__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: var(--gradient-icon);
}

.assurances__text {
    display: grid;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.assurances__text strong {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
}

@media (min-width: 960px) {
    .assurances {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
        padding: var(--space-5) var(--space-6);
    }

    .assurances__item + .assurances__item {
        padding-left: var(--space-5);
        border-left: 1px solid var(--tint-border);
    }
}

/* --- Pictogrammes en ligne ------------------------------------------------- */
.icon {
    display: block;
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon .icon__accent {
    stroke: var(--color-primary-hover);
}

.icon .icon__dot {
    fill: var(--color-accent);
    stroke: none;
}

/* --- Texte et photo côte à côte (Mon approche) -------------------------- */
.split {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

@media (min-width: 960px) {
    .split {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: var(--space-8);
    }
}

/* Cadre photo : coins arrondis, aplat bleu décalé et trame de points. */
.photo-frame {
    position: relative;
    isolation: isolate;
    margin: 0;
}

.photo-frame img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--tint-alt);
    box-shadow: var(--shadow-lift);
}

.photo-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -0.75rem;
    bottom: -0.75rem;
    width: 70%;
    height: 70%;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.photo-frame::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1.25rem;
    left: -0.5rem;
    width: 6rem;
    height: 4.5rem;
    background: color-mix(in srgb, var(--color-primary) 45%, transparent);
    -webkit-mask: url("/assets/img/deco/points.svg") 0 0 / 12px 12px repeat;
    mask: url("/assets/img/deco/points.svg") 0 0 / 12px 12px repeat;
}

@media (min-width: 640px) {
    .photo-frame::before {
        right: -1.25rem;
        bottom: -1.25rem;
    }

    .photo-frame::after {
        left: -1.5rem;
    }
}

/* --- Cartes -------------------------------------------------------------- */
.cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.section__inner--center > .cards {
    margin-top: var(--space-7);
}

.card {
    position: relative;
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lift);
}

.card__icon {
    margin-bottom: var(--space-4);
}

/* Solutions : sans pictogramme, un filet bleu et jaune en tête de carte. */
.card--solution {
    padding-top: calc(var(--space-5) + var(--space-3));
}

.card--solution::before {
    content: "";
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    width: 2rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0 70%, var(--color-accent) 70% 100%);
}

.card h3 {
    margin-bottom: var(--space-2);
}

.card p {
    margin: 0;
    color: var(--color-muted);
}

@media (min-width: 640px) {
    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .card {
        padding: var(--space-6);
    }

    .card--solution {
        padding-top: calc(var(--space-6) + var(--space-3));
    }

    .card--solution::before {
        top: var(--space-6);
        left: var(--space-6);
    }
}

@media (min-width: 960px) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .cards--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cards--four .card {
        padding: var(--space-5);
    }
}

/* --- Étapes de la méthode -------------------------------------------------- */
/* Pastille-pictogramme, numéro en badge jaune, fil pointillé entre les étapes. */
.steps {
    --step-icon: 4rem;
    --step-gap: var(--space-6);
    display: grid;
    gap: var(--step-gap);
    max-width: 40rem;
    margin: var(--space-7) auto 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step {
    position: relative;
    min-height: var(--step-icon);
    padding-left: calc(var(--step-icon) + var(--space-5));
    counter-increment: step;
}

.step__icon {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--step-icon);
    height: var(--step-icon);
    border: 1px solid var(--tint-border);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.step__icon .icon {
    width: 2.125rem;
    height: 2.125rem;
}

.step::before {
    content: counter(step);
    position: absolute;
    z-index: 1;
    top: -0.25rem;
    left: calc(var(--step-icon) - 1.35rem);
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text);
    font: 700 0.8125rem/1.35rem var(--font-body);
    text-align: center;
}

/* Fil reliant les étapes. */
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--step-icon) + var(--space-2));
    bottom: calc(-1 * var(--step-gap) + var(--space-2));
    left: calc(var(--step-icon) / 2 - 1px);
    width: 2px;
    background: repeating-linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary) 55%, transparent) 0 6px,
        transparent 6px 12px);
}

.step h3 {
    margin: var(--space-3) 0 var(--space-1);
}

.step p {
    margin: 0;
    color: var(--color-muted);
}

@media (min-width: 960px) {
    .steps {
        --step-gap: var(--space-5);
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: none;
    }

    .step {
        padding: calc(var(--step-icon) + var(--space-4)) 0 0;
        text-align: center;
    }

    .step__icon {
        left: calc(50% - var(--step-icon) / 2);
    }

    .step::before {
        left: calc(50% + var(--step-icon) / 2 - 1.35rem);
    }

    .step:not(:last-child)::after {
        top: calc(var(--step-icon) / 2 - 1px);
        bottom: auto;
        left: calc(50% + var(--step-icon) / 2 + var(--space-3));
        width: calc(100% + var(--step-gap) - var(--step-icon) - 2 * var(--space-3));
        height: 2px;
        background: repeating-linear-gradient(90deg,
            color-mix(in srgb, var(--color-primary) 55%, transparent) 0 6px,
            transparent 6px 12px);
    }
}

/* --- Qui suis-je ------------------------------------------------------------ */
.about {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

@media (min-width: 960px) {
    .about {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: var(--space-8);
    }

    .portrait {
        margin-inline: 0;
    }
}

/* --- Bandeau photo avant la prise de rendez-vous -------------------------- */
.photo-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Mobile : la photo se découvre au-dessus de la carte. */
    padding-block: 13rem var(--space-6);
    background: var(--tint-alt);
}

.photo-band__image {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 75%;
}

/* Voile bleu léger : le texte est posé sur une carte opaque, pas sur la photo. */
.photo-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--color-primary) 30%, transparent),
        color-mix(in srgb, var(--color-primary) 6%, transparent) 60%);
}

.photo-band__card {
    max-width: 30rem;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lift);
}

.photo-band__card p {
    color: var(--color-muted);
}

.photo-band__card .photo-band__title {
    margin-bottom: var(--space-3);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.photo-band__card .btn {
    margin-top: var(--space-2);
}

@media (min-width: 640px) {
    .photo-band {
        padding-block: var(--space-8);
    }

    .photo-band__card {
        padding: var(--space-7) var(--space-6);
    }
}

@media (min-width: 960px) {
    .photo-band {
        padding-block: calc(var(--space-8) + var(--space-5));
    }
}

/* --- Partenaires --------------------------------------------------------- */
.partners {
    margin-top: var(--space-7);
    text-align: center;
}

.partners__title {
    margin-bottom: var(--space-5);
    font-size: 1.35rem;
}

.partners__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.partners__item {
    flex: 0 1 12rem;
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.partners__item a {
    display: block;
    border-radius: calc(var(--radius) / 2);
}

.partners__item img {
    width: 100%;
    max-width: 160px;
    height: 80px;
    margin-inline: auto;
    object-fit: contain;
}

/* --- Avis clients -------------------------------------------------------- */
.google-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    max-width: 100%;
    margin: var(--space-5) 0;
}

.section__inner--center > .google-rating {
    justify-content: center;
}

.testimonial figure,
.post-card {
    text-align: left;
}

.google-rating__score {
    font-family: var(--font-heading);
    font-size: 1.35rem;
}

.google-rating__score::before {
    content: "★ ";
    color: var(--color-accent);
    /* Liseré foncé : l'étoile jaune reste visible sur fond clair. */
    -webkit-text-stroke: 1px var(--color-text);
}

.google-rating__count {
    color: var(--color-muted);
}

.carousel {
    max-width: 52rem;
    margin: var(--space-6) auto 0;
}

/* Sans JavaScript (ou un seul avis) : simple liste empilée. */
.carousel__track {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.testimonial figure {
    position: relative;
    height: 100%;
    margin: 0;
    padding: var(--space-7) var(--space-5) var(--space-5);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.testimonial figure::before {
    content: "\201C";
    position: absolute;
    top: var(--space-2);
    left: var(--space-5);
    color: var(--color-primary-hover);
    font-family: var(--font-heading);
    font-size: 4.5rem;
    line-height: 1;
}

.testimonial blockquote {
    margin: 0;
}

.testimonial blockquote p {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.6;
}

.testimonial figcaption {
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--tint-border);
}

.testimonial__author {
    font-weight: 700;
}

.testimonial__context {
    color: var(--color-muted);
    font-size: 0.9375rem;
}

@media (min-width: 640px) {
    .testimonial figure {
        padding: var(--space-7) var(--space-7) var(--space-6);
    }

    .testimonial figure::before {
        left: var(--space-7);
    }
}

/* Carrousel activé par site.js. */
.carousel--ready .carousel__viewport {
    overflow: hidden;
    border-radius: var(--radius);
}

.carousel--ready .carousel__track {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
    transition: transform 0.5s ease;
}

.carousel--ready .testimonial {
    flex: 0 0 100%;
    min-width: 0;
}

.carousel__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.carousel__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.carousel__button,
.carousel__dot {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.carousel__button {
    border: 2px solid var(--color-primary);
    background: var(--color-surface);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.carousel__button:hover {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* Chevrons et icônes dessinés en CSS (aucune police d'icônes). */
.carousel__button--prev::before,
.carousel__button--next::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.carousel__button--prev::before {
    margin-left: 0.2rem;
    transform: rotate(-135deg);
}

.carousel__button--next::before {
    margin-right: 0.2rem;
    transform: rotate(45deg);
}

.carousel__button--pause::before {
    content: "";
    width: 0.7rem;
    height: 0.8rem;
    border-inline: 3px solid currentColor;
}

.carousel__button--pause[data-paused="true"]::before {
    width: 0;
    height: 0;
    margin-left: 0.2rem;
    border-block: 0.45rem solid transparent;
    border-inline: 0.7rem solid currentColor;
    border-right-width: 0;
}

.carousel__dot::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    /* Bleu foncé : le contour d'un contrôle doit atteindre 3:1 sur le fond alterné. */
    border: 2px solid var(--color-primary-hover);
    border-radius: 999px;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.carousel__dot[aria-current="true"]::before {
    width: 1.5rem;
    background: var(--color-primary);
}

/* --- Actualité : cartes d'aperçu des posts (rien n'est chargé depuis le réseau social) --- */
.post-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.post-cards > li {
    display: flex;
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 23rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
    overflow-wrap: anywhere;
}

.post-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    background: var(--tint-alt);
}

.post-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

/* Extrait saisi en texte brut : ses sauts de ligne sont conservés. */
.post-card__excerpt {
    margin: 0;
    white-space: pre-line;
}

.post-card__link {
    align-self: flex-start;
    margin-top: auto;
}

/* --- Contenus tiers chargés au clic --------------------------------------- */
.embed {
    margin-top: var(--space-6);
}

.embed__placeholder {
    max-width: 42rem;
    margin-inline: auto;
    padding: var(--space-6) var(--space-5);
    border: 2px dashed color-mix(in srgb, var(--color-primary) 35%, transparent);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.embed__placeholder p {
    color: var(--color-muted);
}

.embed__placeholder .btn {
    margin-top: var(--space-2);
}

.embed__link {
    margin: var(--space-4) 0 0;
    text-align: center;
}

.no-js [data-calendly-load] {
    display: none;
}

.calendly-inline-widget {
    width: 100%;
    min-width: 0;
    height: 700px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
}

/* --- Contact ------------------------------------------------------------- */
.contact {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

@media (min-width: 960px) {
    .contact {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
        gap: var(--space-7);
    }

    .contact > :only-child {
        grid-column: 1 / -1;
    }
}

.contact-form {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, var(--color-surface));
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.contact__photo {
    margin-bottom: var(--space-7);
}

.contact__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (min-width: 640px) {
    .contact-form {
        padding: var(--space-6);
    }
}

.form-note {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.field {
    display: grid;
    gap: var(--space-1);
}

.field label {
    font-weight: 600;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-muted);
    border-radius: calc(var(--radius) / 2);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.field textarea {
    resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
    outline-offset: 1px;
}

.field--consent {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
}

.field--consent input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.2rem 0 0;
    accent-color: var(--color-primary-hover);
}

.field--consent label {
    font-weight: 400;
}

.contact-form .btn {
    justify-self: start;
}

.form-result {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-muted);
    border-radius: calc(var(--radius) / 2);
    background: var(--tint-primary-soft);
    font-weight: 600;
}

.form-result:empty {
    display: none;
}

.form-result--ok {
    border-left-color: var(--color-primary);
}

.form-result--error {
    border-left-color: var(--color-text);
}

.field__error {
    margin: 0;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.field__error:empty {
    display: none;
}

.field__error::before {
    content: "Erreur : ";
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: var(--color-text);
    border-width: 2px;
}

.field--consent .field__error {
    grid-column: 2;
}

.contact-form button:disabled {
    cursor: progress;
    opacity: 0.7;
}

/* Piège à robots : hors de l'écran, jamais affiché ni annoncé. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.contact-list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list__label {
    display: block;
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Pied de page ---------------------------------------------------------- */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-8) var(--space-5);
    border-top: 3px solid var(--color-accent);
    background: var(--gradient-footer);
    color: var(--color-bg);
    font-size: 0.9375rem;
}

/* Arcs fins en filigrane, dans l'angle. */
.site-footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -4rem;
    right: -4rem;
    width: 24rem;
    height: 24rem;
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    -webkit-mask: url("/assets/img/deco/lignes.svg") 0 0 / 100% 100% no-repeat;
    mask: url("/assets/img/deco/lignes.svg") 0 0 / 100% 100% no-repeat;
    transform: rotate(180deg);
}

.site-footer__role {
    color: var(--tint-footer-muted);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
    color: var(--tint-footer-muted);
    font-size: 0.875rem;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer a {
    color: var(--color-bg);
}

.site-footer a:hover {
    color: var(--color-bg);
    text-decoration-color: var(--color-accent);
}

.site-footer :focus-visible {
    outline-color: var(--color-accent);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-6);
}

.site-footer__name {
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.site-footer__name::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-top: var(--space-3);
    border-radius: 3px;
    background: var(--color-accent);
}

.site-footer .contact-list__label,
.site-footer .regulatory dt {
    color: var(--tint-footer-muted);
}

.site-footer__legal ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.regulatory {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
}

.regulatory dt {
    color: var(--color-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.regulatory dd {
    margin: 0;
}

/* --- Pages légales ------------------------------------------------------- */
.legal {
    padding-block: var(--space-7);
}

.legal > * {
    max-width: 70ch;
}

.legal section {
    margin-top: var(--space-6);
}

.legal .contact-list {
    margin-bottom: var(--space-4);
}

/* --- Pages d'erreur (404, 500) ----------------------------------------------- */
.error-page {
    padding-block: var(--space-8);
    text-align: center;
}

.error-page__code {
    margin: 0;
    color: var(--color-primary-hover); /* grand texte : 3,5:1 ≥ 3:1 */
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
}

.error-page > p {
    max-width: 52ch;
    margin-inline: auto;
}

.error-page__detail {
    max-width: 100%;
    margin: var(--space-6) auto 0;
    padding: var(--space-4);
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.8125rem;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Bandeau d'aperçu (site non publié, vu par un compte admin) ---------------- */
.preview-banner {
    background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 70%, var(--color-text));
    color: var(--color-text); /* 12:1 sur ce jaune pâle */
    font-size: 0.9375rem;
}

.preview-banner__inner {
    margin-block: 0;
    padding-block: var(--space-2);
}

.preview-banner a {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --- Page « bientôt en ligne » (site non publié) --------------------------------
   Même charte que l'accueil : fond dégradé clair, titre en Fraunces, portrait en arche. */
.coming-soon-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 45%),
        radial-gradient(circle at 5% 95%, color-mix(in srgb, var(--color-border) 55%, transparent), transparent 45%),
        linear-gradient(180deg, var(--color-surface), var(--color-bg));
}

.coming-soon {
    display: flex;
    flex: 1;
    align-items: center;
    padding-block: var(--space-7);
}

.coming-soon__inner {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.coming-soon__text .lead {
    max-width: 36rem;
}

.coming-soon__identity {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-6) 0 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-primary);
}

.coming-soon__name {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    line-height: 1.2;
}

.coming-soon__role {
    color: var(--color-muted); /* 6:1 sur le fond */
}

.coming-soon__actions {
    margin: var(--space-6) 0 0;
}

.coming-soon__footer {
    padding-block: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

.coming-soon__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.coming-soon__legal a {
    color: var(--color-text);
}

@media (min-width: 960px) {
    .coming-soon__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}