/* =====================================================================
   Montserrat servie depuis le site plutot que depuis Google Fonts :
   plus de requete bloquante vers un domaine tiers au chargement, et
   aucune donnee visiteur transmise a Google.
   ===================================================================== */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/montserrat-300-latin.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: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/montserrat-400-latin.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: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/montserrat-500-latin.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: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/montserrat-600-latin.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: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/montserrat-700-latin.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: #72B9C4;
    --color-secondary: #ffffff;
    --color-text: #222222;
    --color-text-muted: #4b5b5e;
    --color-background: #ffffff;
    --color-card: #E8F5F6;
    --color-primary-dark: #3E717C;
    /* Variante assombrie, utilisee sur les fonds teintes (survol navbar)
       pour rester au-dessus du ratio de contraste AA. */
    --color-primary-deep: #2C5A64;
    --color-tag: #FFFFFF;
    --color-tag-border: #DCE3E3;
    --color-footer: #F4F8F8;
    --shadow-primary: 0 12px 24px rgb(114 185 196 / 28%);
    --shadow-contact: 0 12px 24px rgb(34 34 34 / 10%);
    --shadow-card: 0 20px 25px -5px rgb(34 34 34 / 12%), 0 8px 10px -6px rgb(34 34 34 / 10%);
    --glow-primary: 0 0 0 6px rgb(114 185 196 / 18%);
    --color-border: rgb(114 185 196 / 35%);
    --page-padding: clamp(16px, 5vw, 80px);
    /* Largeur du bloc de contenu, partagee par toutes les sections :
       c'est elle qui donne a la page ses bords gauche/droit communs. */
    --content-width: 1000px;
}




/* Styles de base */
html {
    scroll-behavior: smooth;
    /* evite que les ancres passent sous la navbar collante */
    scroll-padding-top: 100px;
}

p {
    line-height: 2.25;
    margin: 0;
    padding: 0;
    font-weight: 300;
}

body {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding-inline: var(--page-padding);
    color: var(--color-text);
    background-color: var(--color-background);
}

/* Les attributs width/height des <img> (utiles pour reserver la place au
   chargement) fixent aussi la hauteur en CSS : sans height:auto, ils
   ecrasent les rapports d'aspect definis plus bas. */
img {
    max-width: 100%;
    height: auto;
}

h3 {
    font-weight: 400;
    color: var(--color-primary-dark);
    margin-top: 60px;
    margin-bottom: 30px;
    font-size: 2rem;
}




/* Composants partages : bouton "Prendre RDV" */
.rdv {
    display: inline-block;
    padding: 13px 22px;
    white-space: nowrap;
    color: var(--color-secondary);
    background-color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 400;
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

    &:hover,
    &:focus-visible {
        background-color: var(--color-primary-deep);
        transform: translateY(-2px);
        box-shadow: var(--shadow-primary);
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary-dark);
        outline-offset: 3px;
    }
}




/* Composants partages : etiquettes */
.payment-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;

    span {
        padding: 10px 22px;
        color: var(--color-primary-dark);
        background-color: var(--color-tag);
        border: 1px solid var(--color-tag-border);
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.4;
    }
}




/* Navbar */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-inline: calc(0px - var(--page-padding));
    padding-inline: var(--page-padding);
    background-color: transparent;
    transition: transform 0.35s ease, background-color 0.3s ease, box-shadow 0.3s ease;

    /* Fond translucide des que l'on quitte le haut de page */
    &.is-scrolled {
        background-color: rgb(255 255 255 / 88%);
        backdrop-filter: blur(12px);
        box-shadow: 0 6px 20px rgb(34 34 34 / 6%);
    }

    /* Masquee au scroll vers le bas, reaffichee au scroll vers le haut */
    &.is-hidden {
        transform: translateY(-100%);
    }

    @media (max-width: 1040px) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 64px;

        .nav-toggle {
            display: flex;
        }

        /* Menu ouvert : la barre prend un fond plein, sinon le panneau
           blanc flotterait sous une barre transparente. */
        &.is-open {
            background-color: var(--color-secondary);
            box-shadow: 0 6px 20px rgb(34 34 34 / 6%);
        }
    }
}

/* Logo dans la barre de navigation */
.nav-logo {
    display: flex;
    align-items: center;
    margin-right: auto;
    padding: 6px 0;
    border-radius: 8px;

    img {
        width: auto;
        height: 42px;
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary-dark);
        outline-offset: 4px;
    }
}

/* Bouton burger : visible uniquement sous 1040px */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-height: 44px;
    padding: 10px 14px;
    color: var(--color-primary-dark);
    background-color: transparent;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;

    &:hover,
    &:focus-visible {
        background-color: rgb(114 185 196 / 26%);
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary-dark);
        outline-offset: 2px;
    }

    /* Les trois barres : la barre centrale est l'element, les deux autres
       ses pseudo-elements. */
    .nav-toggle-lines {
        position: relative;
        display: block;
        width: 22px;
        height: 2px;
        background-color: currentColor;
        border-radius: 2px;
        transition: background-color 0.2s ease;

        &::before,
        &::after {
            content: "";
            position: absolute;
            left: 0;
            width: 22px;
            height: 2px;
            background-color: currentColor;
            border-radius: 2px;
            transition: transform 0.25s ease;
        }

        &::before {
            top: -7px;
        }

        &::after {
            top: 7px;
        }
    }
}

/* Menu ouvert : les barres se croisent. */
.site-nav.is-open .nav-toggle .nav-toggle-lines {
    background-color: transparent;

    &::before {
        transform: translateY(7px) rotate(45deg);
    }

    &::after {
        transform: translateY(-7px) rotate(-45deg);
    }
}

.navbar {
    list-style: none;
    margin: 0;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 10px;

    /* Le bouton .rdv garde son style de composant partage :
       on n'habille ici que les liens simples. */
    a:not(.rdv) {
        color: inherit;
        text-decoration: none;
        font-weight: 300;

        /* Pastille teintee au survol. Le padding est reserve des le repos
           pour que les liens ne se decalent pas au hover.
           Le fond est exprime en turquoise translucide : il reste lisible
           aussi bien sur le blanc que sur le halo teinte du haut de page. */
        /* La pastille visible reste fine (36px), mais la zone cliquable est
           etendue a 44px par le pseudo-element ci-dessous : confortable au
           doigt sur grand ecran tactile, sans alourdir le survol. */
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 8px 14px;
        border-radius: 999px;
        background-color: transparent;
        white-space: nowrap;
        transition: background-color 0.2s ease, color 0.2s ease;

        /* Zone tactile invisible, debordant de 5px en haut et en bas. */
        &::after {
            content: "";
            position: absolute;
            inset: -5px 0;
        }

        &:hover,
        &:focus-visible {
            color: var(--color-primary-deep);
            background-color: rgb(114 185 196 / 26%);
        }

        &:focus-visible {
            outline: 2px solid var(--color-primary-dark);
            outline-offset: 3px;
        }
    }

    /* Sous 1040px, la liste devient un panneau deroulant sous la barre. */
    @media (max-width: 1040px) {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 12px var(--page-padding) 20px;
        background-color: var(--color-secondary);
        box-shadow: 0 16px 28px rgb(34 34 34 / 10%);

        .site-nav.is-open & {
            display: flex;
        }

        a:not(.rdv) {
            display: block;
            padding: 14px 16px;
            font-size: 1.05rem;
        }

        .rdv {
            display: block;
            margin-top: 10px;
            padding-block: 14px;
            text-align: center;
        }
    }
}

@media (prefers-reduced-motion: reduce) {

    .site-nav,
    .navbar a,
    .rdv {
        transition: none;
    }

    .rdv:hover,
    .rdv:focus-visible {
        transform: none;
    }
}




/* Header */
header {
    position: relative;
    /* Juste assez haut pour respirer : au-dela, le bas du header se
       remplissait de blanc avant la bande de citation. */
    min-height: min(74svh, 520px);
    /* Respiration avant la bande de citation. En padding (et non en marge
       sur la bande) pour que le halo du header descende avec. */
    padding-bottom: clamp(24px, 5vw, 72px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);

    /* Halo pleine largeur derriere le header (et derriere la navbar
       transparente qui le surplombe au chargement). */
    &::before {
        content: "";
        position: absolute;
        inset: -140px calc(0px - var(--page-padding)) 0;
        z-index: -1;
        background:
            radial-gradient(70% 60% at 18% 12%, rgb(114 185 196 / 16%), transparent 70%),
            radial-gradient(55% 55% at 92% 78%, rgb(114 185 196 / 12%), transparent 72%),
            linear-gradient(180deg, var(--color-card) 0%, rgb(255 255 255 / 0%) 88%);
        pointer-events: none;
    }

    .header-media {
        position: relative;
        justify-self: center;
        display: flex;
        justify-content: center;
        /* Se cale sur la largeur de la photo pour que la pastille
           decorative reste collee a l'image, pas a la colonne. */
        width: min(100%, 420px);

        /* Pastille decorative decalee derriere la photo */
        &::before {
            content: "";
            position: absolute;
            inset: 18px -18px -18px 18px;
            border-radius: 28px;
            border: 1px solid var(--color-border);
            background-color: rgb(114 185 196 / 10%);
        }
    }

    img {
        position: relative;
        width: 100%;
        height: auto;
        border-radius: 24px;
        box-shadow: var(--shadow-card);
    }

    .header-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;

        .metier,
        .lieu {
            color: var(--color-primary-dark);
            font-weight: 300;
        }

        .lieu {
            font-style: italic;
        }

        .header-eyebrow {
            margin: 0;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--color-primary-dark);
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            line-height: 1.4;

            &::before {
                content: "";
                width: 32px;
                height: 1px;
                background-color: var(--color-primary);
            }
        }

        .name {
            margin: 0;
            color: var(--color-primary-dark);
            font-size: clamp(2rem, 4.5vw, 3rem);
            font-weight: 500;
            line-height: 1.15;
            letter-spacing: 0.01em;
        }

        .sous-titre {
            color: var(--color-primary-dark);
            font-size: clamp(1.15rem, 2vw, 1.5rem);
            font-weight: 300;
            line-height: 1.8;
            text-wrap: balance;
            margin: 0;
        }

        .header-tags {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 6px 0 0;
            padding: 0;

            li {
                padding: 8px 18px;
                color: var(--color-primary-dark);
                background-color: var(--color-tag);
                border: 1px solid var(--color-tag-border);
                border-radius: 999px;
                font-size: 0.9rem;
                font-weight: 500;
                line-height: 1.4;
            }
        }

        .header-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px 24px;
            margin-top: 22px;
        }
    }

    @media (max-width: 860px) {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-block: 32px clamp(28px, 7vw, 44px);
        text-align: center;

        .header-content {
            align-items: center;
        }

        .header-tags,
        .header-actions {
            justify-content: center;
        }

        .header-media {
            order: -1;

            &::before {
                inset: 14px -14px -14px 14px;
            }
        }

        .header-media {
            width: min(100%, 320px);
        }
    }
}




/* Citation */
.citation-banner {
    margin-top: 0;
    margin-left: calc(0px - var(--page-padding));
    margin-right: calc(0px - var(--page-padding));
    /* Bande de transition en tons clairs : elle ponctue la page sans
       l'aplat fonce qui tirait l'oeil plus que le texte. */
    /* Plus d'air au-dessus de la citation qu'en dessous : le guillemet
       attaque haut, il lui faut de la marge pour respirer. */
    padding: clamp(60px, 8vw, 92px) var(--page-padding) clamp(44px, 6vw, 68px);
    background-color: var(--color-card);
    text-align: center;

    .citation-figure {
        width: min(100%, 900px);
        margin: 0 auto;
    }

    .citation-mark {
        display: block;
        margin-bottom: 14px;
        color: var(--color-primary);
        font-size: 3rem;
        font-weight: 700;
        line-height: 0.6;
        user-select: none;
    }

    .citation {
        margin: 0;

        p {
            margin: 0;
            color: var(--color-primary-dark);
            font-size: clamp(1.1rem, 1.9vw, 1.4rem);
            font-weight: 300;
            font-style: italic;
            line-height: 1.6;
            text-wrap: pretty;
        }
    }

    .auteur {
        margin-top: 16px;
        color: var(--color-text-muted);
        font-size: 0.95rem;
        font-weight: 400;

        .source {
            font-style: italic;
            font-weight: 300;
            font-size: 0.88rem;
        }
    }
}




/* Pourquoi consulter */
#pourquoi-consulter {
    padding-block: clamp(36px, 6vw, 56px) clamp(48px, 8vw, 88px);

    .section-header {
        width: min(100%, var(--content-width));
        margin-inline: auto;
    }

    h2 {
        margin: 0 0 18px;
        color: var(--color-primary-dark);
        font-size: 2rem;
        font-weight: 400;
    }

    .section-intro {
        margin: 0;
        font-size: 1.0625rem;
        line-height: 1.85;
    }

    /* Les motifs de consultation, en etiquettes : la section se lit d'un
       coup d'oeil au lieu d'occuper un ecran entier. */
    .reason-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: min(100%, var(--content-width));
        margin: 32px auto 0;
        padding: 0;
        list-style: none;

        li {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            color: var(--color-primary-dark);
            background-color: var(--color-card);
            border-radius: 999px;
            font-size: 0.975rem;
            font-weight: 500;
            line-height: 1.4;
            transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

            &:hover {
                background-color: rgb(114 185 196 / 30%);
                transform: translateY(-2px);
                box-shadow: 0 8px 16px rgb(114 185 196 / 26%);
            }
        }

        .reason-icon {
            flex: none;
            width: 20px;
            height: 20px;
            overflow: visible;
            color: var(--color-primary);
            transition: transform 0.2s ease, color 0.2s ease;
        }

        li:hover .reason-icon {
            color: var(--color-primary-dark);
            transform: scale(1.12);
        }
    }

    @media (max-width: 800px) {
        .section-header {
            text-align: center;
        }

        .reason-tags {
            justify-content: center;
        }
    }
}




/* Qui suis-je ? */
#qui-suis-je {
    padding-block: clamp(36px, 6vw, 56px) clamp(48px, 8vw, 88px);
    color: var(--color-text);
    /* Meme principe que la grille de "Pourquoi consulter" : un bloc de
       largeur limitee et centre, plutot qu'un texte plafonne a gauche
       avec du vide a droite. */
    --about-content-width: var(--content-width);

    h2 {
        width: min(100%, var(--about-content-width));
        margin: 0 auto 40px;
        color: var(--color-primary-dark);
        font-size: 2rem;
        font-weight: 400;
    }

    .about-layout {
        width: min(100%, var(--about-content-width));
        margin-inline: auto;
        display: grid;
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        align-items: start;
        gap: clamp(32px, 4vw, 56px);
    }

    .portrait {
        position: relative;
        width: 100%;

        /* Bloc teinte decale derriere la photo : c'est lui qui porte la
           couleur de la section, plutot qu'un aplat pleine largeur. */
        &::before {
            content: "";
            position: absolute;
            inset: 22px -22px -22px 22px;
            border-radius: 28px;
            background-color: var(--color-card);
        }

        img {
            position: relative;
            display: block;
            width: 100%;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            object-position: 55% 50%;
            border-radius: 24px;
        }
    }

    .about-content {
        /* La largeur de lecture est desormais tenue par --about-content-width. */
        max-width: none;

        .about-title {
            margin: 0;
            color: var(--color-primary-dark);
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 1.4;
        }

        .ville {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 16px 0 28px;
            padding: 8px 16px;
            color: var(--color-primary-dark);
            background-color: var(--color-card);
            border-radius: 999px;
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.4;

            .location-icon {
                width: 1.15em;
                height: 1.15em;
                flex: 0 0 auto;
            }
        }

        p:not(.ville) {
            font-size: 1.0625rem;
            line-height: 1.9;
        }

        /* Phrase d'accroche un peu plus presente que la suite */
        .ville + p {
            font-size: 1.15rem;
        }

        p + p:not(.ville) {
            margin-top: 18px;
        }
    }

    @media (max-width: 900px) {
        .about-layout {
            grid-template-columns: 1fr;
            gap: 44px;
            justify-items: center;
        }

        .portrait {
            width: min(100%, 320px);

            /* Le bloc decale deborderait de la page sur petit ecran */
            &::before {
                display: none;
            }
        }

        .about-content {
            max-width: none;
        }
    }
}




/* Le cabinet */
#le-cabinet {
    padding-block: clamp(36px, 6vw, 56px) clamp(48px, 8vw, 88px);

    h2 {
        width: min(100%, var(--content-width));
        margin: 0 auto 32px;
        color: var(--color-primary-dark);
        font-size: 2rem;
        font-weight: 400;
    }

    /* Texte a gauche, photo a droite : l'inverse de "Qui suis-je ?",
       pour que les deux sections illustrees ne se repetent pas. */
    .cabinet-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
        align-items: center;
        gap: clamp(32px, 4vw, 56px);
        width: min(100%, var(--content-width));
        margin-inline: auto;
    }

    .cabinet-text {
        p {
            font-size: 1.0625rem;
            line-height: 1.9;
        }

        p + p {
            margin-top: 20px;
        }
    }

    /* Deux visuels empiles dans la colonne de droite. */
    .cabinet-gallery {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .cabinet-photo {
        margin: 0;

        /* Le bouton n'ajoute aucune apparence : il rend la photo cliquable
           et accessible au clavier. */
        .photo-zoom {
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            background: none;
            border-radius: 24px;
            cursor: zoom-in;

            &:focus-visible {
                outline: 2px solid var(--color-primary-dark);
                outline-offset: 4px;
            }
        }

        img {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            border-radius: 24px;
            object-fit: cover;
            transition: box-shadow 0.4s ease, transform 0.4s ease;

            &:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow-primary);
            }
        }
    }

    /* La photo des cartes de visite : format plus bas, elle accompagne
       la photo principale sans lui faire concurrence. */
    .cabinet-photo--carte img {
        aspect-ratio: 16 / 9;
        border-radius: 20px;
    }

    @media (max-width: 860px) {
        .cabinet-layout {
            grid-template-columns: 1fr;
            gap: 32px;
        }

        .cabinet-photo img {
            aspect-ratio: 16 / 10;
        }
    }
}




/* EMDR */
#EMDR {
    padding-block: clamp(36px, 6vw, 56px) clamp(48px, 8vw, 88px);

    /* Meme gabarit que "Ma pratique" et "Qui suis-je" : un bloc de largeur
       limitee, centre dans la page, mais dont le texte est cale a gauche. */
    .emdr-header {
        width: min(100%, var(--content-width));
        margin-inline: auto;
    }

    h2 {
        margin: 0 0 8px;
        color: var(--color-primary-dark);
        font-size: 2rem;
        font-weight: 400;
    }

    .sous-titre {
        /* Pas de largeur bridee : la ligne tient d'un seul tenant tant que
           la place le permet, et se coupe naturellement ensuite. */
        margin: 0;
        color: var(--color-primary-dark);
        /* 1.05rem au lieu de 1.1 : a 1.1rem la ligne reclamait 1007px pour
           un bloc de contenu de 1000px, et basculait sur deux lignes. */
        font-size: 1.05rem;
        font-weight: 300;
        line-height: 1.6;
        font-style: italic;
        text-wrap: pretty;

        /* Les initiales de l'acronyme EMDR, mises en evidence. */
        b {
            font-weight: 600;
        }
    }

    /* Stimulation bilaterale : un point qui fait l'aller-retour sur un
       chemin dont les extremites s'estompent. */
    .bilateral-visual {
        position: relative;
        /* Meme largeur que le texte de la section. */
        width: min(100%, var(--content-width));
        height: 24px;
        margin: 40px auto;

        /* Le chemin : un filet fin, plus dense au centre. */
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            border-radius: 2px;
            transform: translateY(-50%);
            background: linear-gradient(90deg,
                    rgb(114 185 196 / 0%) 0%,
                    rgb(114 185 196 / 45%) 10%,
                    rgb(114 185 196 / 45%) 90%,
                    rgb(114 185 196 / 0%) 100%);
        }

        .bilateral-point {
            position: absolute;
            top: 50%;
            left: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--color-primary) 62%);
            box-shadow:
                0 0 0 6px rgb(114 185 196 / 16%),
                0 0 18px 4px rgb(114 185 196 / 45%);
            transform: translate(-50%, -50%);

            /* Deux animations : le trajet (aller-retour) et un battement
               qui tombe a chaque extremite. */
            animation:
                bilateral-motion 2.2s ease-in-out infinite alternate,
                bilateral-pulse 1.1s ease-in-out infinite;

            /* Le sillage, etire dans le sens de la marche. */
            &::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 54px;
                height: 6px;
                border-radius: 999px;
                transform: translate(-50%, -50%);
                background: linear-gradient(90deg,
                        rgb(114 185 196 / 0%) 0%,
                        rgb(114 185 196 / 28%) 50%,
                        rgb(114 185 196 / 0%) 100%);
                filter: blur(2px);
                z-index: -1;
            }

            @media (prefers-reduced-motion: reduce) {
                animation: none;
                left: 50%;

                &::before {
                    display: none;
                }
            }
        }
    }

    .emdr-lead {
        width: min(100%, var(--content-width));
        margin-inline: auto;
        font-size: 1.0625rem;
        line-height: 1.9;
    }

    .emdr-closing {
        width: min(100%, var(--content-width));
        box-sizing: border-box;
        margin: 40px auto 0;
        padding: clamp(28px, 4vw, 40px);
        background-color: var(--color-card);
        border-radius: 24px;

        p {
            margin: 0;
            line-height: 1.8;
        }

        .emdr-note {
            margin-top: 16px;
            color: var(--color-text-muted);
            font-size: 0.95rem;
            line-height: 1.75;
        }
    }
}




/* Ma pratique */
#ma-pratique {
    padding-block: clamp(36px, 6vw, 56px) clamp(48px, 8vw, 88px);

    h2 {
        width: min(100%, var(--content-width));
        margin: 0 auto 32px;
        color: var(--color-primary-dark);
        font-size: 2rem;
        font-weight: 400;
    }

    p {
        width: min(100%, var(--content-width));
        margin-inline: auto;
        font-size: 1.0625rem;
        line-height: 1.9;
    }

    /* Les approches citees dans le paragraphe, reprises en etiquettes :
       la section devient lisible d'un coup d'oeil. */
    .tool-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: min(100%, var(--content-width));
        margin: 28px auto 0;
        padding: 0;
        list-style: none;

        li {
            padding: 10px 22px;
            color: var(--color-primary-dark);
            background-color: var(--color-card);
            border-radius: 999px;
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.4;
        }
    }
}




/* Tarifs et horaires */
#tarif {
    box-sizing: border-box;
    width: calc(100% + (2 * var(--page-padding)));
    margin-inline: calc(0px - var(--page-padding));

    .pricing-panel {
        padding: 64px var(--page-padding);
        background-color: var(--color-card);

        h2 {
            width: min(100%, var(--content-width));
            margin: 0 auto 40px;
            color: var(--color-primary-dark);
            font-size: 2rem;
            font-weight: 400;
            text-align: center;
        }

        @media (max-width: 560px) {
            padding: 44px var(--page-padding);
        }
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 24px;
        width: min(100%, var(--content-width));
        margin-inline: auto;

        @media (max-width: 800px) {
            grid-template-columns: 1fr;
        }
    }

    /* Cartes blanches posees sur le bandeau teinte : meme principe que
       les pastilles d'icones de "Pourquoi consulter". */
    .pricing-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* La carte "Horaires" est plus courte que la carte "Tarif" :
           son contenu se centre au lieu de rester colle en haut. */
        justify-content: center;
        gap: 10px;
        padding: 36px 28px;
        background-color: var(--color-secondary);
        border-radius: 24px;
        text-align: center;

        h3 {
            margin: 0 0 4px;
            color: var(--color-primary-dark);
            font-size: 1.35rem;
            font-weight: 600;
        }

        p {
            line-height: 1.6;
        }

        /* Le prix devient le point d'accroche de la carte. */
        .price {
            margin: 0;
            color: var(--color-primary-dark);
            font-size: 2.75rem;
            font-weight: 600;
            line-height: 1.1;
        }

        .price-detail {
            color: var(--color-text-muted);
            font-size: 0.975rem;
        }

        .payment-tags {
            margin-top: 24px;

            span {
                background-color: var(--color-card);
                border-color: transparent;
            }
        }
    }

    .opening-hours {
        display: flex;
        align-items: stretch;
        gap: 16px;
        width: 100%;
        margin-top: 6px;

        .day-block {
            flex: 1 1 0;
            min-width: 0;
            padding: 16px 18px;
            background-color: var(--color-card);
            border-radius: 16px;
        }

        @media (max-width: 480px) {
            flex-direction: column;
        }

        .day {
            color: var(--color-primary-dark);
            font-weight: 600;
        }

        .hours {
            color: var(--color-text-muted);
            font-size: 0.975rem;
        }
    }
}




/* Contact */
#contact {
    padding-block: clamp(36px, 6vw, 56px) clamp(48px, 8vw, 88px);

    h2 {
        width: min(100%, var(--content-width));
        margin: 0 auto 40px;
        color: var(--color-primary-dark);
        font-size: 2rem;
        font-weight: 400;
    }

    /* Deux cartes de meme poids visuel, cote a cote et de meme hauteur :
       avant, une carte a ombre faisait face a du texte nu. */
    .contact-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 24px;
        width: min(100%, var(--content-width));
        margin-inline: auto;

        @media (max-width: 860px) {
            grid-template-columns: 1fr;
        }
    }

    .contact-card,
    .consultation-modes {
        box-sizing: border-box;
        padding: 36px 32px;
        background-color: var(--color-card);
        border-radius: 24px;
    }

    .contact-card {
        display: flex;
        align-items: center;
        gap: 28px;

        @media (max-width: 560px) {
            flex-direction: column;
            text-align: center;
        }
    }

    .contact-avatar {
        flex: none;

        img {
            display: block;
            width: 112px;
            height: 112px;
            border-radius: 50%;
            object-fit: cover;
            transition: transform 200ms ease;
        }

        &:hover img {
            transform: scale(1.05);
        }
    }

    .contact-details {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;

        h3 {
            margin: 0 0 2px;
            color: var(--color-primary-dark);
            font-size: 1.35rem;
            font-weight: 600;
        }

        a {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            /* Zone tactile confortable au doigt. */
            min-height: 44px;
            color: var(--color-text);
            text-decoration: none;
            font-size: 0.975rem;

            .icon {
                flex: none;
                color: var(--color-primary);
            }

            .link-text {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -2px;
                    width: 0;
                    height: 2px;
                    background-color: var(--color-primary-dark);
                    transition: width 150ms ease;
                }
            }

            &:hover .link-text,
            &:focus-visible .link-text {
                color: var(--color-primary-dark);
            }

            &:hover .link-text::after,
            &:focus-visible .link-text::after {
                width: 100%;
            }

            @media (max-width: 560px) {
                justify-content: center;
            }
        }
    }

    .consultation-modes {
        display: flex;
        flex-direction: column;
        gap: 14px;

        .consultation-intro {
            margin: 0 0 6px;
            color: var(--color-primary-dark);
            font-size: 1.05rem;
            font-weight: 500;
            line-height: 1.5;
        }

        p {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 0;
            line-height: 1.5;
        }

        /* Meme pastille blanche que les icones de "Pourquoi consulter".
           overflow:visible est indispensable : un <svg> est en overflow
           hidden par defaut, et le border-radius rognerait alors le trace. */
        .icon {
            box-sizing: border-box;
            flex: none;
            width: 44px;
            height: 44px;
            padding: 10px;
            overflow: visible;
            color: var(--color-primary);
            background-color: var(--color-secondary);
            border-radius: 50%;
        }
    }

    .contact-cta {
        display: block;
        width: fit-content;
        margin: 40px auto 0;
    }
}




/* FAQ */
#faq {
    padding-block: 0 clamp(48px, 8vw, 88px);

    h2 {
        box-sizing: border-box;
        width: calc(100% + (2 * var(--page-padding)));
        margin: 0;
        margin-inline: calc(0px - var(--page-padding));
        padding: 48px var(--page-padding);
        color: var(--color-secondary);
        background-color: var(--color-primary-dark);
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        font-weight: 400;
        letter-spacing: 0.01em;
        text-align: center;
    }

    .faq-list {
        max-width: 768px;
        margin-inline: auto;
        padding-top: 56px;

        details {
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid var(--color-border);

            &:first-child {
                margin-top: 0;
                border-top: 0;
            }

            summary {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 24px;
                min-height: 48px;
                padding: 8px 0;
                cursor: pointer;
                color: var(--color-text);
                font-size: 1.125rem;
                font-weight: 500;
                line-height: 1.45;
                list-style: none;
                /* La question sert de bouton : on evite que des clics
                   repetes surlignent son texte. La reponse, elle, reste
                   selectionnable et copiable. */
                -webkit-user-select: none;
                user-select: none;
                transition: color 0.2s ease;

                &:hover,
                &:focus-visible {
                    color: var(--color-primary-dark);
                }

                &:hover .faq-chevron {
                    color: var(--color-secondary);
                    background-color: var(--color-primary);
                }

                &::-webkit-details-marker {
                    display: none;
                }

                .faq-chevron {
                    display: flex;
                    flex: none;
                    align-items: center;
                    justify-content: center;
                    width: 32px;
                    height: 32px;
                    color: var(--color-primary-dark);
                    background-color: var(--color-card);
                    border-radius: 50%;
                    transition: transform 300ms ease, background-color 0.2s ease, color 0.2s ease;
                }

                @media (max-width: 560px) {
                    gap: 16px;
                }
            }

            p {
                margin-top: 12px;
                padding-right: 56px;
                color: var(--color-text-muted);
                line-height: 1.8;

                @media (max-width: 560px) {
                    padding-right: 0;
                }
            }

            &[open] .faq-chevron {
                transform: rotate(-180deg);
            }
        }
    }
}




/* Footer */
footer {
    margin-inline: calc(0px - var(--page-padding));
    padding: clamp(44px, 7vw, 64px) var(--page-padding) 32px;
    color: var(--color-text);
    background-color: var(--color-footer);
    text-align: center;

    .footer-logo {
        width: auto;
        height: 58px;
        margin-bottom: 14px;
    }

    .footer-name {
        margin: 0;
        color: var(--color-primary-dark);
        font-size: 1.25rem;
        font-weight: 600;
    }

    .footer-contact {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* gap vertical genereux : l'adresse est sur sa propre ligne. */
        gap: 18px 36px;
        margin-top: 28px;
        font-style: normal;

        a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            /* Zone tactile d'au moins 44px de haut (le texte n'en fait que 20). */
            min-height: 44px;
            padding-block: 6px;
            color: var(--color-text);
            text-decoration: none;
            font-size: 0.975rem;
            transition: color 0.2s ease;

            /* Meme soulignement qui se deploie que dans la section Contact. */
            span {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -2px;
                    width: 0;
                    height: 2px;
                    background-color: var(--color-primary-dark);
                    transition: width 150ms ease;
                }
            }

            &:hover,
            &:focus-visible {
                color: var(--color-primary-dark);
            }

            &:hover span::after,
            &:focus-visible span::after {
                width: 100%;
            }

            &:focus-visible {
                outline: 2px solid var(--color-primary-dark);
                outline-offset: 3px;
                border-radius: 4px;
            }
        }

        /* L'adresse occupe sa propre ligne, sous le telephone et l'e-mail. */
        .footer-address {
            flex-basis: 100%;
            justify-content: center;
        }

        .icon {
            flex: none;
            overflow: visible;
            color: var(--color-primary);
        }

        @media (max-width: 700px) {
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
    }

    .footer-copyright {
        margin-top: 40px;
        font-size: 0.9rem;
    }
}




/* Visionneuse de la photo du cabinet */
.lightbox {
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;

    &::backdrop {
        background-color: rgb(20 45 50 / 72%);
        backdrop-filter: blur(3px);
    }

    &[open] {
        animation: lightbox-in 0.22s ease-out;
    }

    .lightbox-inner {
        position: relative;
        line-height: 0;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 92vh;
        object-fit: contain;
        border-radius: 20px;
    }

    .lightbox-close {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        color: var(--color-primary-dark);
        background-color: rgb(255 255 255 / 92%);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease;

        &:hover,
        &:focus-visible {
            background-color: var(--color-secondary);
            transform: scale(1.06);
        }

        &:focus-visible {
            outline: 2px solid var(--color-secondary);
            outline-offset: 2px;
        }
    }
}

@keyframes lightbox-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    #pourquoi-consulter .reason-tags li,
    #pourquoi-consulter .reason-tags .reason-icon {
        transition: none;
    }

    #pourquoi-consulter .reason-tags li:hover {
        transform: none;
    }

    #pourquoi-consulter .reason-tags li:hover .reason-icon {
        transform: none;
    }

    .footer-contact a span::after {
        transition: none;
    }

    .lightbox[open] {
        animation: none;
    }

    .lightbox .lightbox-close {
        transition: none;
    }

    .lightbox .lightbox-close:hover,
    .lightbox .lightbox-close:focus-visible {
        transform: none;
    }
}




/* Sur mobile, les titres de section sont centres : les mises en page a
   deux colonnes sont deja empilees a cette largeur, un titre cale a gauche
   au-dessus d'un contenu centre paraissait bancal. */
@media (max-width: 800px) {

    #qui-suis-je h2,
    #ma-pratique h2,
    #EMDR h2,
    #le-cabinet h2,
    #contact h2 {
        text-align: center;
    }

    #EMDR .sous-titre {
        margin-inline: auto;
        text-align: center;
    }

    /* Le trait du mouvement bilateral se recentre avec le titre. */
    #EMDR .bilateral-visual {
        margin-inline: auto;
    }
}




/* Navigateur sans JavaScript : le bouton ne peut pas ouvrir le panneau,
   on deplie donc la navigation. Double securite avec le <noscript> du
   fichier HTML, les deux mecanismes etant inoffensifs s'ils coexistent. */
@media (scripting: none) {
    .nav-toggle {
        display: none !important;
    }

    @media (max-width: 1040px) {
        .site-nav .navbar {
            position: static;
            display: flex !important;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            padding: 10px 0;
            background-color: transparent;
            box-shadow: none;
        }

        .site-nav .navbar a:not(.rdv) {
            padding: 10px 12px;
            font-size: 0.95rem;
        }

        .site-nav .navbar .rdv {
            display: inline-block;
            margin-top: 0;
        }
    }
}




/* Animations */
@keyframes bilateral-motion {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

/* Battement du halo : il culmine a chaque extremite du trajet. */
@keyframes bilateral-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 7px rgb(114 185 196 / 20%),
            0 0 22px 5px rgb(114 185 196 / 50%);
    }

    50% {
        box-shadow:
            0 0 0 3px rgb(114 185 196 / 10%),
            0 0 12px 2px rgb(114 185 196 / 30%);
    }
}