/* ============================================================
   Sillage — annuaire du développement personnel
   Feuille de style unique. Aucune dépendance de build.
   ============================================================ */

/* Polices auto-hébergées — aucune requête vers un tiers pour le texte. */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dmsans-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: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-regular-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: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-regular-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-italic-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: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/instrument-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --paper: #FFFFFF;
    --mist: #F5F8FA;
    --ink: #101B28;
    --navy: #0C1B2A;
    --navy-2: #132A40;
    --muted: #5A6B7B;
    --line: #E2E7EC;
    --line-strong: #C6D0D9;
    --sage: #93AC9C;
    --blush: #E4B4A8;
    --sky: #A6C0D8;
    --clay: #B4553B;
    --mint: #E8F0EC;
    --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
    --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --shadow: 0 24px 48px -28px rgba(12, 27, 42, .38);
    --nav-h: 76px;
    --gutter: clamp(20px, 5vw, 72px);
}

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

[hidden] {
    display: none !important;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

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

/* barres de défilement accordées à la palette */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border: 3px solid var(--paper);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
}

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

a {
    color: inherit;
    text-decoration-color: var(--line-strong);
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
}

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

p {
    margin: 0 0 1.1em;
    max-width: 68ch;
}

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

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 400;
    letter-spacing: -.01em;
    text-wrap: balance;
}

h1,
h2 {
    font-family: var(--serif);
    line-height: .98;
}

h1 {
    font-size: clamp(2.9rem, 7vw, 6.2rem);
}

h2 {
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1.04;
}

h3 {
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0;
}

.wrap {
    width: min(1280px, 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.narrow {
    width: min(820px, 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: 14px 22px;
    font-size: .85rem;
}

.skip:focus {
    left: 12px;
    top: 12px;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

.nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: var(--nav-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    margin-right: auto;
}

.brand-mark {
    width: 30px;
    height: 30px;
    flex: none;
}

.brand-name {
    font-family: var(--serif);
    font-size: 1.62rem;
    line-height: 1;
    letter-spacing: -.015em;
}

.brand-name em {
    font-style: italic;
}

.brand-note {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    padding-left: 12px;
    border-left: 1px solid var(--line);
    line-height: 1.2;
}

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

.nav-links a {
    font-size: .87rem;
    text-decoration: none;
    color: var(--ink);
    position: relative;
    padding: 6px 0;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    letter-spacing: .02em;
    padding: 12px 20px;
    border-radius: 2px;
    transition: background .35s ease, transform .35s var(--ease);
}

.nav-cta:hover {
    background: var(--clay);
    transform: translateY(-1px);
}

.nav-cta svg {
    width: 14px;
    height: 14px;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    background: none;
    border-radius: 2px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.burger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    position: relative;
}

.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .35s var(--ease), top .35s var(--ease);
}

.burger span::before {
    top: -6px;
}

.burger span::after {
    top: 6px;
}

body.menu-open .burger span {
    background: transparent;
}

body.menu-open .burger span::before {
    top: 0;
    transform: rotate(45deg);
}

body.menu-open .burger span::after {
    top: 0;
    transform: rotate(-45deg);
}

@media (max-width: 960px) {
    .nav-links {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px var(--gutter) 26px;
        display: none;
        box-shadow: 0 30px 40px -30px rgba(12, 27, 42, .5);
    }

    body.menu-open .nav-links {
        display: flex;
    }

    .nav-links a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-size: 1rem;
    }

    .nav-links a::after {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .brand-note {
        display: none;
    }

    .burger {
        display: inline-flex;
    }
}

/* ------------------------------------------------------------
   Boutons & liens d'action
   ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--sans);
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .01em;
    padding: 15px 26px;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s var(--ease);
}

.btn:hover {
    background: var(--clay);
    border-color: var(--clay);
    transform: translateY(-2px);
}

.btn svg {
    width: 15px;
    height: 15px;
    transition: transform .4s var(--ease);
}

.btn:hover svg {
    transform: translateX(3px);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-ghost:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.btn-light {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

.btn-light:hover {
    background: var(--clay);
    color: #fff;
    border-color: var(--clay);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 3px;
    transition: border-color .35s ease, gap .35s var(--ease);
}

.link-arrow:hover {
    border-color: var(--clay);
    gap: 13px;
}

/* ------------------------------------------------------------
   Héros
   ------------------------------------------------------------ */

.hero {
    position: relative;
    background: var(--navy);
    color: #F2F5F7;
    overflow: hidden;
    isolation: isolate;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 40px;
    align-items: center;
    min-height: 0;
    padding: clamp(44px, 6vw, 76px) 0 clamp(92px, 8vw, 112px);
}

.hero-copy {
    max-width: 620px;
}

.hero h1 {
    color: #fff;
    letter-spacing: -.025em;
}

.hero h1 em {
    font-style: italic;
    color: var(--blush);
}

.hero-lead {
    margin-top: 26px;
    color: #C3D0DC;
    font-size: 1.06rem;
    line-height: 1.7;
    max-width: 48ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.hero-actions .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}

.hero-actions .btn-ghost:hover {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

.hero-link {
    display: inline-flex;
    width: fit-content;
    align-self: center;
    align-items: center;
    font-size: .88rem;
    color: #C3D0DC;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    padding-bottom: 4px;
    transition: color .35s ease, border-color .35s ease;
}

.hero-link:hover {
    color: #fff;
    border-color: var(--blush);
}

.hero-art {
    position: absolute;
    inset: 0 0 0 auto;
    width: 56%;
    z-index: 1;
    pointer-events: none;
}

.hero-art svg {
    width: 100%;
    height: 100%;
}

.hero-art .wash {
    transform-origin: center;
    animation: drift 26s ease-in-out infinite alternate;
}

.hero-art .wash-2 {
    animation-duration: 34s;
    animation-delay: -6s;
}

.hero-art .wash-3 {
    animation-duration: 42s;
    animation-delay: -14s;
}

@keyframes drift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-2.4%, 1.8%, 0) scale(1.05);
    }

    100% {
        transform: translate3d(1.6%, -2.2%, 0) scale(1.02);
    }
}

.hero-meta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding-bottom: 34px;
    color: #8FA3B6;
    font-size: .76rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.hero-meta strong {
    color: #fff;
    font-weight: 500;
}

/* lever de rideau sur les lignes du titre */
.reveal-line {
    display: block;
    overflow: hidden;
}

.reveal-line>span {
    display: block;
}

html.anim .reveal-line>span {
    transform: translateY(105%);
    animation: rise 1.15s var(--ease) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes rise {
    to {
        transform: translateY(0);
    }
}

.hero .fade-up {
    opacity: 0;
    animation: fadeUp 1s var(--ease) forwards;
    animation-delay: var(--d, .35s);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-bottom: clamp(120px, 22vw, 170px);
    }

    .hero-art {
        width: 100%;
        opacity: .62;
        top: auto;
        bottom: -6%;
        height: 62%;
    }

    .hero-meta {
        gap: 8px 18px;
        font-size: .68rem;
    }
}

/* ------------------------------------------------------------
   Barre de recherche posée sur le héros
   ------------------------------------------------------------ */

.search-deck {
    position: relative;
    z-index: 12;
    margin-top: clamp(-76px, -5vw, -58px);
}

.search-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow);
    padding: 22px clamp(18px, 2.4vw, 30px);
}

.search-card form {
    display: grid;
    grid-template-columns: 1.25fr 1fr auto;
    gap: 0;
    align-items: stretch;
}

.search-note {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .8rem;
    line-height: 1.55;
    color: #51636F;
    max-width: 62ch;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 22px 6px 0;
    border-right: 1px solid var(--line);
    min-width: 0;
}

.field + .field {
    padding-left: 22px;
}

.field label {
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #46586A;
    font-weight: 500;
}

.field input,
.field select {
    appearance: none;
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink);
    padding: 2px 0 4px;
    width: 100%;
    border-radius: 0;
    cursor: pointer;
}

.field select {
    padding-right: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A6B7B' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2em center;
    background-size: 11px 8px;
}

.f select {
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A6B7B' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 9px;
    appearance: none;
}

.field input::placeholder {
    color: #64727F;
}

.field input:focus,
.field select:focus {
    outline: none;
    color: var(--ink);
}

.field:focus-within label {
    color: var(--clay);
}

.search-submit {
    align-self: center;
    margin-left: 22px;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .search-card form {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .field {
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
    }

    .field + .field {
        padding-left: 0;
    }

    .search-submit {
        margin: 16px 0 2px;
        width: 100%;
    }
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */

section {
    padding: clamp(64px, 9vw, 122px) 0;
}

.sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: end;
    padding-bottom: clamp(32px, 4vw, 54px);
}

.sec-head p {
    color: var(--muted);
    margin-bottom: 6px;
}

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/* manifeste éditorial */
.manifesto {
    border-top: 1px solid var(--line);
}

.manifesto-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 6vw, 110px);
}

.manifesto h2 {
    max-width: 12ch;
}

.manifesto-body p {
    font-size: 1.06rem;
    color: #2A3A49;
}

.manifesto-body p+p {
    margin-top: 1em;
}

.principles {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.principles li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    align-items: start;
}

.principles svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--clay);
}

.principles b {
    font-weight: 500;
    display: block;
}

.principles span {
    color: #51636F;
    font-size: .9rem;
}

.principles.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(24px, 5vw, 80px);
    margin-top: clamp(34px, 4vw, 52px);
    border-top: 1px solid var(--ink);
}

.manifesto-note {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.32rem);
    line-height: 1.4;
    color: #46586A;
    margin-top: 24px;
    max-width: 28ch;
}

@media (max-width: 760px) {
    .principles.grid2 {
        grid-template-columns: 1fr;
    }
}

/* motifs d'accompagnement — liste éditoriale sur deux colonnes */
.motifs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 5vw, 80px);
    border-top: 1px solid var(--line);
    margin-top: clamp(32px, 4vw, 48px);
}

.motifs > div {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.motifs b {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 400;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}

.motifs span {
    display: block;
    color: #51636F;
    font-size: .93rem;
    line-height: 1.55;
    max-width: 44ch;
}

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

@media (max-width: 860px) {
    .sec-head,
    .manifesto-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   Index des approches
   ------------------------------------------------------------ */

.index-list {
    border-top: 1px solid var(--line);
}

.index-row {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.15fr) 90px;
    gap: clamp(14px, 2vw, 30px);
    align-items: baseline;
    padding: 24px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.index-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mist);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s var(--ease);
    z-index: -1;
}

.index-row:hover::before {
    transform: scaleY(1);
}

.index-row .num {
    font-size: .72rem;
    letter-spacing: .12em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.index-row .name {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.1;
    transition: transform .5s var(--ease);
}

.index-row:hover .name {
    transform: translateX(6px);
}

.index-row .def {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
    padding-right: 10px;
}

.index-row .state {
    justify-self: end;
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.index-row .state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
}

.index-row .state.on {
    color: var(--ink);
}

.index-row .state.on::before {
    background: var(--sage);
}

@media (max-width: 860px) {
    .index-row {
        grid-template-columns: 34px minmax(0, 1fr);
        row-gap: 6px;
    }

    .index-row .def {
        grid-column: 2;
    }

    .index-row .state {
        grid-column: 2;
        justify-self: start;
        margin-top: 6px;
    }
}

/* ------------------------------------------------------------
   Praticiens — lignes éditoriales
   ------------------------------------------------------------ */

.pract-list {
    border-top: 1px solid var(--line);
}

.pract-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1.25fr) minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 44px);
    align-items: center;
    padding: 30px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: padding-left .5s var(--ease);
}

.pract-row::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width .6s var(--ease);
}

.pract-row:hover {
    padding-left: 14px;
}

.pract-row:hover::after {
    width: 100%;
}

.avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: var(--mist);
    border: 1px solid var(--line);
    flex: none;
}

.avatar svg {
    width: 100%;
    height: 100%;
}

.avatar .initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 1.7rem;
    color: #26394B;
    letter-spacing: .02em;
}

.pract-row h3 {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    line-height: 1.05;
    font-weight: 400;
}

.pract-row .where {
    color: var(--muted);
    font-size: .92rem;
    margin-top: 6px;
}

.pract-row .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    font-size: .74rem;
    letter-spacing: .02em;
    color: #2E4152;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 5px 12px;
    white-space: nowrap;
}

.pract-row .go {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: background .4s ease, border-color .4s ease, color .4s ease;
}

.pract-row:hover .go {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.pract-row .go svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 860px) {
    .pract-row {
        grid-template-columns: 64px 1fr auto;
        row-gap: 12px;
        padding: 24px 0;
    }

    .avatar {
        width: 64px;
        height: 64px;
    }

    .avatar .initials {
        font-size: 1.3rem;
    }

    .pract-row .tags {
        grid-column: 2 / 4;
    }

    .pract-row .go {
        width: 36px;
        height: 36px;
    }
}

/* ------------------------------------------------------------
   Bandeau sombre (citation / appel)
   ------------------------------------------------------------ */

.band {
    background: var(--navy);
    color: #E8EEF3;
    position: relative;
    overflow: hidden;
}

.band::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -180px;
    top: -260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 180, 168, .22), transparent 62%);
}

.band-inner {
    position: relative;
    z-index: 1;
}

.quote {
    max-width: 22ch;
    font-family: var(--serif);
    font-size: clamp(1.9rem, 4.2vw, 3.4rem);
    line-height: 1.12;
}

.quote em {
    color: var(--blush);
    font-style: italic;
}

.quote-source {
    display: block;
    margin-top: 26px;
    font-family: var(--sans);
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8FA3B6;
}

.split-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(26px, 5vw, 80px);
    align-items: center;
}

.split-cta h2 {
    color: #fff;
}

.split-cta p {
    color: #B9C8D5;
}

.check-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.check-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    font-size: .95rem;
    color: #CBD7E2;
    align-items: start;
}

.check-list svg {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--sage);
}

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

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

.foot {
    background: var(--navy);
    color: #A9BAC9;
    padding: clamp(48px, 6vw, 76px) 0 26px;
    font-size: .9rem;
}

.foot-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .7fr));
    gap: 36px;
    padding-bottom: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.foot .brand-name {
    color: #fff;
}

.foot p {
    color: #8FA3B6;
    font-size: .88rem;
    max-width: 34ch;
    margin-top: 16px;
}

.foot h4 {
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6F8497;
    margin-bottom: 16px;
    font-weight: 500;
}

.foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.foot a {
    text-decoration: none;
    color: #CFDCE6;
}

.foot a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--blush);
}

.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: space-between;
    padding-top: 24px;
    font-size: .78rem;
    color: #6F8497;
}

@media (max-width: 900px) {
    .foot-top {
        grid-template-columns: 1fr 1fr;
    }

    .foot-top>div:first-child {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------
   Pages intérieures
   ------------------------------------------------------------ */

.page-head {
    background: var(--navy);
    color: #fff;
    padding: clamp(46px, 7vw, 84px) 0 clamp(40px, 5vw, 58px);
    position: relative;
    overflow: hidden;
}

.page-head::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -140px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(166, 192, 216, .18), transparent 65%);
}

.page-head-inner {
    position: relative;
    z-index: 1;
}

.page-head h1 {
    font-size: clamp(2.4rem, 5.4vw, 4.4rem);
    color: #fff;
}

.page-head p {
    color: #B9C8D5;
    margin-top: 18px;
    max-width: 56ch;
    font-size: 1rem;
}

.crumbs {
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7E93A6;
    margin-bottom: 18px;
}

.crumbs a {
    color: #7E93A6;
    text-decoration: none;
}

.crumbs a:hover {
    color: #fff;
}

.crumbs span {
    padding: 0 8px;
    opacity: .5;
}

/* ------------------------------------------------------------
   Annuaire
   ------------------------------------------------------------ */

.dir-bar {
    position: sticky;
    top: var(--nav-h);
    z-index: 60;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
}

.dir-bar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr) auto;
    align-items: center;
    gap: 0;
    padding: 10px 0;
}

.dir-bar .field {
    padding: 4px 20px 4px 0;
}

.dir-bar .field + .field {
    padding-left: 20px;
}

.dir-bar .field input,
.dir-bar .field select {
    font-size: .95rem;
}

.dir-reset {
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-family: var(--sans);
    font-size: .78rem;
    padding: 9px 14px;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 18px;
    transition: color .3s, border-color .3s;
}

.dir-reset:hover {
    color: var(--ink);
    border-color: var(--line-strong);
}

.dir-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    padding: clamp(34px, 4vw, 52px) 0 clamp(60px, 8vw, 100px);
}

.dir-count {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ink);
}

.dir-count .n {
    font-family: var(--serif);
    font-size: 1.5rem;
}

.dir-count .n b {
    font-weight: 400;
}

.dir-count .hint {
    font-size: .78rem;
    color: var(--muted);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 0 6px;
}

.chip {
    border: 1px solid var(--line-strong);
    background: none;
    color: #2E4152;
    font-family: var(--sans);
    font-size: .78rem;
    padding: 7px 14px;
    border-radius: 100px;
    cursor: pointer;
    transition: background .3s, color .3s, border-color .3s;
}

.chip:hover {
    border-color: var(--ink);
}

.chip[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.card-list {
    display: grid;
    gap: 0;
}

/* ---------- carte de France cliquable ---------- */

.carte-section {
    background: var(--mist);
    padding: clamp(52px, 7vw, 96px) 0;
}

.carte-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(26px, 4.5vw, 64px);
    align-items: start;
}

.carte-bar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
}

#deptLabel {
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.2;
}

#deptReset {
    border: 0;
    background: none;
    font-family: var(--sans);
    font-size: .76rem;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
}

#deptReset:hover:not(:disabled) {
    color: var(--ink);
    border-bottom-color: var(--line-strong);
}

#deptReset:disabled {
    display: none;
}

.carte-map {
    position: sticky;
    top: calc(var(--nav-h) + 20px);
}

.france-map svg {
    width: 100%;
    height: auto;
    display: block;
}

.france-map path.dept {
    fill: #DCE4EA;
    stroke: #FFFFFF;
    stroke-width: 1.1;
    cursor: pointer;
    transition: fill .25s ease, stroke-width .25s ease;
}

.france-map path.dept.has {
    fill: #9FBEA9;
}

.france-map path.dept:hover {
    fill: #6F9683;
}

.france-map path.dept:hover,
.france-map path.dept:focus-visible {
    stroke-width: 1.8;
}

.carte-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 16px;
    font-size: .82rem;
    color: #34485A;
}

.carte-legende span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.carte-legende i {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #DCE4EA;
    display: inline-block;
}

.carte-legende i.on {
    background: #9FBEA9;
}

.carte-legende i.pin {
    background: var(--navy);
    border-radius: 50%;
    width: 9px;
    height: 9px;
    margin: 0 1.5px;
}

.carte-legende i.sel {
    background: var(--navy);
}

.france-map path.dept.sel {
    fill: var(--navy);
    stroke: var(--navy);
}

.france-map path.dept:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 1px;
}

.france-map circle.pin {
    fill: var(--navy);
    stroke: #FFFFFF;
    stroke-width: 2;
    pointer-events: none;
}

.carte-section .empty {
    border-bottom: 0;
    padding-top: 28px;
}

.carte-section .empty strong {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.25rem;
}

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

    .carte-map {
        position: static;
        order: 2;
    }

    .carte-liste {
        order: 1;
    }
}

.p-card {
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
}

.p-card .avatar {
    width: 72px;
    height: 72px;
}

.p-card h3 {
    font-family: var(--serif);
    font-size: 1.55rem;
    font-weight: 400;
}

.p-card .line {
    color: var(--muted);
    font-size: .9rem;
    margin: 4px 0 10px;
}

.p-card .addr {
    font-size: .88rem;
    color: #34485A;
    margin: 0 0 12px;
}

.p-card .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.p-card .mini {
    font-size: .78rem;
    text-decoration: none;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    padding: 8px 13px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    transition: background .3s, color .3s, border-color .3s;
}

.p-card .mini:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.p-card .mini svg {
    width: 13px;
    height: 13px;
}

.map-col {
    position: sticky;
    top: calc(var(--nav-h) + 88px);
}

#map {
    height: min(62vh, 560px);
    min-height: 340px;
    border: 1px solid var(--line);
    background: var(--mist);
    position: relative;
}

.map-note {
    font-size: .76rem;
    color: var(--muted);
    margin-top: 10px;
    line-height: 1.6;
}

.pin {
    width: 26px;
    height: 26px;
}

.empty {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
}

.empty h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 8px;
}

.empty p {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 18px;
}

@media (max-width: 900px) {
    .dir-bar-inner {
        grid-template-columns: 1fr auto;
        gap: 0;
    }

    .dir-bar .field:nth-child(2),
    .dir-bar .field:nth-child(3) {
        display: none;
    }

    .dir-layout {
        grid-template-columns: 1fr;
    }

    .map-col {
        position: static;
        order: -1;
    }

    #map {
        height: 340px;
    }

    .p-card {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .p-card .tags {
        grid-column: 2;
        flex-direction: row !important;
        align-items: flex-start !important;
        flex-wrap: wrap;
        margin-top: 4px;
    }

    .p-card .avatar {
        width: 56px;
        height: 56px;
    }

    .p-card .avatar .initials {
        font-size: 1.1rem;
    }
}

/* ------------------------------------------------------------
   Fiche praticien
   ------------------------------------------------------------ */

.fiche {
    padding: clamp(40px, 6vw, 76px) 0 clamp(64px, 8vw, 100px);
}

.fiche-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
}

.fiche-grid>aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
}

.fiche h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
}

.fiche .loc {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.fiche .lede {
    font-size: 1.1rem;
    color: #2A3A49;
    margin-top: 18px;
    max-width: 54ch;
}

.fiche h2 {
    font-size: 1.05rem;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0;
    margin: 40px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.contact-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.contact-lines li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    font-size: .95rem;
}

.contact-lines svg {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--muted);
}

.contact-lines a {
    text-decoration: none;
}

.contact-lines a:hover {
    text-decoration: underline;
    text-decoration-color: var(--clay);
}

.side-box {
    background: var(--mist);
    border: 1px solid var(--line);
    padding: 26px;
    border-radius: 3px;
}

.side-box h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 6px;
}

.side-box p {
    font-size: .86rem;
    color: var(--muted);
    margin-bottom: 18px;
}

.side-box .btn {
    width: 100%;
    padding: 13px 18px;
    font-size: .84rem;
}

.side-box .btn + .btn {
    margin-top: 10px;
}

.fiche-map {
    height: 320px;
    border: 1px solid var(--line);
    margin-top: 30px;
    background: var(--mist);
}

.next-prev {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding-top: 30px;
    margin-top: 50px;
}

.next-prev a {
    text-decoration: none;
}

.next-prev .k {
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 8px;
}

.next-prev .v {
    font-family: var(--serif);
    font-size: 1.35rem;
}

.next-prev a:last-child {
    text-align: right;
}

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

    .next-prev {
        grid-template-columns: 1fr;
    }

    .next-prev a:last-child {
        text-align: left;
    }
}

/* ------------------------------------------------------------
   Pages éditoriales (approches, démarche, inscription)
   ------------------------------------------------------------ */

.prose {
    max-width: 72ch;
}

.prose p {
    font-size: 1.06rem;
    color: #2A3A49;
}

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

.prose h2 {
    margin-top: 2.2em;
}

.prose h3 {
    margin: 2em 0 .5em;
    font-weight: 500;
}

.approach-list {
    border-top: 1px solid var(--line);
    margin-top: 34px;
}

.approach {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(18px, 4vw, 60px);
    padding: 34px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 20px);
}

.approach h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
}

.approach h2 em {
    display: block;
    font-size: .78rem;
    font-family: var(--sans);
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 10px;
}

.approach p {
    color: #34485A;
    font-size: .98rem;
}

.approach .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-top: 16px;
    font-size: .82rem;
    color: var(--muted);
}

.approach .meta a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 2px;
}

.approach .meta a:hover {
    border-color: var(--clay);
}

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

.steps {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.steps li {
    display: grid;
    grid-template-columns: minmax(0, .4fr) minmax(0, 1fr);
    gap: clamp(16px, 4vw, 60px);
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
}

.steps .t {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.steps .d {
    font-size: .96rem;
    color: #34485A;
}

@media (max-width: 720px) {
    .steps li {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* formulaire */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 26px;
    margin-top: 30px;
}

.form-grid .full {
    grid-column: 1 / -1;
}

.f {
    display: grid;
    gap: 7px;
}

.f label {
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #46586A;
    font-weight: 500;
}

.f input,
.f select,
.f textarea {
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    padding: 12px 14px;
    width: 100%;
    transition: border-color .3s, box-shadow .3s;
}

.f input:focus,
.f select:focus,
.f textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(12, 27, 42, .08);
}

.f textarea {
    min-height: 130px;
    resize: vertical;
}

.f .err {
    font-size: .76rem;
    color: var(--clay);
    display: none;
}

.f.invalid input,
.f.invalid select,
.f.invalid textarea {
    border-color: var(--clay);
}

.f.invalid .err {
    display: block;
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color .3s, background .3s;
}

.checks label:hover {
    border-color: var(--ink);
}

.checks input {
    accent-color: var(--navy);
    width: 14px;
    height: 14px;
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
}

.form-status {
    font-size: .88rem;
    color: var(--muted);
}

.form-status.ok {
    color: #2C6B4F;
}

.intro-box {
    background: var(--mist);
    border: 1px solid var(--line);
    padding: 24px 26px;
    border-radius: 3px;
    font-size: .92rem;
    color: #34485A;
    margin-top: 26px;
}

.intro-box b {
    font-weight: 500;
}

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

/* ------------------------------------------------------------
   Révélations au défilement
   ------------------------------------------------------------ */

.r {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .95s var(--ease), transform .95s var(--ease);
    transition-delay: var(--d, 0s);
}

.r.in {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------
   Préférences système
   ------------------------------------------------------------ */

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

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .r {
        opacity: 1;
        transform: none;
    }

    .reveal-line>span {
        transform: none;
    }

    .hero .fade-up {
        opacity: 1;
    }
}

/* impression */
@media print {

    .nav,
    .foot,
    .search-deck,
    .dir-bar,
    .map-col {
        display: none !important;
    }

    body {
        font-size: 11pt;
    }

    .hero,
    .page-head,
    .band {
        background: #fff !important;
        color: #000 !important;
    }
}


/* ============================================================
   v2 — direction « respiration »
   Ajout en fin de feuille : surcharge volontairement l'existant.
   ============================================================ */

:root {
    --ink-2: #0B1724;
    --wash-sage: #DCE9E3;
    --wash-rose: #F1DCD5;
    --wash-sky: #DBE6F0;
}

body {
    border-top: 0;
}

/* grain de papier discret sur toute la page */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1 {
    font-size: clamp(3.1rem, 8vw, 8rem);
    line-height: .88;
    letter-spacing: -.035em;
}

h2 {
    letter-spacing: -.025em;
}

.btn,
.btn-ghost,
.btn-light,
.nav-cta,
.chip,
.tag {
    border-radius: 999px;
}

.btn {
    padding: 16px 26px 16px 30px;
}

/* ---------- barre de progression ---------- */

.scroll-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    pointer-events: none;
}

.scroll-line i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--clay);
    transition: width .12s linear;
}

/* ---------- héros « respiration » ---------- */

.hero2 {
    position: relative;
    background: var(--navy);
    color: #F2F5F7;
    overflow: hidden;
    isolation: isolate;
}

#ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(58% 52% at 80% 34%, rgba(228, 180, 168, .22), transparent 70%),
        radial-gradient(48% 46% at 90% 74%, rgba(147, 172, 156, .2), transparent 72%),
        radial-gradient(46% 40% at 66% 88%, rgba(166, 192, 216, .16), transparent 70%);
}

.hero2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 15% 20%, rgba(10, 24, 38, .55), transparent 60%),
        linear-gradient(90deg, rgba(10, 24, 38, .92) 0%, rgba(10, 24, 38, .55) 46%, transparent 72%);
}

.hero2-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
    min-height: min(72vh, 640px);
    padding: clamp(44px, 6vw, 84px) 0 clamp(120px, 10vw, 150px);
}

.hero2-copy {
    max-width: min(980px, 100% - 340px);
}

@media (max-width: 1180px) {
    .hero2-copy {
        max-width: 1000px;
    }
}

/* colonne de mots à droite du héros — trois entrées enlacées dans une boucle continue */
.hero2-side {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    width: 240px;
    height: 541px;
    color: var(--blush);
}

.hero2-side .loop8 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease) forwards;
    animation-delay: .3s;
}

.hero2-side .loop8 path {
    stroke-dasharray: 1956;
    stroke-dashoffset: 1956;
    animation: loopDraw 2.6s cubic-bezier(.4, 0, .2, 1) forwards;
    animation-delay: .4s;
}

.side-word {
    position: absolute;
    right: 22px;
    transform: translateY(-50%);
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1.55vw, 1.38rem);
    line-height: 1.2;
    letter-spacing: .015em;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
    opacity: 0;
    animation: fadeUp .9s var(--ease) forwards;
    animation-delay: var(--d, .4s);
}

.side-word.w1 {
    top: 138px;
}

.side-word.w2 {
    top: 270px;
}

.side-word.w3 {
    top: 402px;
}

html:not(.anim) .side-word,
html:not(.anim) .hero2-side .loop8 {
    opacity: 1;
    animation: none;
}

html:not(.anim) .hero2-side .loop8 path {
    stroke-dashoffset: 0;
    animation: none;
}

@keyframes loopDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 1180px) {
    .hero2-side {
        display: none;
    }
}

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

    .side-word,
    .hero2-side .loop8 {
        opacity: 1;
        animation: none;
    }

    .hero2-side .loop8 path {
        stroke-dashoffset: 0;
        animation: none;
    }
}




.hero2 h1 {
    color: #fff;
    max-width: none;
    font-size: clamp(2.6rem, 7.9vw, 7.6rem);
    line-height: .9;
    letter-spacing: -.035em;
}

.hero2-lead {
    column-gap: 40px;
}

.hero2 h1 em {
    font-style: italic;
    color: var(--blush);
}

.hero2-lead {
    margin-top: 28px;
    max-width: 46ch;
    font-size: 1.06rem;
    line-height: 1.7;
    color: #C6D3DE;
}

.hero2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 34px;
}

.hero2-meta {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding-bottom: 30px;
    color: #8FA3B6;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.hero2-meta strong {
    color: #fff;
    font-weight: 500;
}

/* ---------- orbe de respiration ---------- */

.pause-band {
    background: var(--navy);
    color: #F2F5F7;
    padding: clamp(40px, 5vw, 68px) 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.pause-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(24px, 3.4vw, 48px);
    align-items: center;
    max-width: 1040px;
}

.pause-band h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}

.pause-band p {
    color: #B7C7D4;
    font-size: .95rem;
    margin-top: 10px;
    max-width: 46ch;
}

.pause-band .orb-wrap {
    justify-self: end;
}

.pause-band .orb {
    width: clamp(160px, 17vw, 210px);
}

.pause-band .orb-caption {
    text-align: center;
    margin-inline: auto;
}

.pause-band .orb-phase {
    font-size: 1.08rem;
}

.pause-band .orb-sub {
    font-size: .56rem;
    letter-spacing: .16em;
}

.pause-band .orb-play {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
}

.pause-band .orb-play svg {
    width: 8px;
    height: 10px;
}

.pause-band .orb-words {
    font-size: 1rem;
    min-height: 1.5em;
}

.pause-band .orb-caption {
    font-size: .74rem;
    max-width: 30ch;
}

@media (max-width: 900px) {
    .pause-inner {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .pause-band .orb-wrap {
        justify-self: start;
        align-items: flex-start;
    }

    .pause-band .orb-words,
    .pause-band .orb-caption {
        text-align: left;
    }
}

.orb-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-self: center;
}

.orb {
    position: relative;
    width: clamp(230px, 25vw, 330px);
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    background: none;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    -webkit-tap-highlight-color: transparent;
}

.orb:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 10px;
}

.orb svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.orb .ring {
    fill: none;
    stroke: #FFFFFF;
    stroke-opacity: .18;
    stroke-width: 1;
    transform-origin: 50% 50%;
}

.orb .ring--rose {
    stroke: var(--blush);
    stroke-opacity: .55;
}

.orb .ring--sage {
    stroke: var(--sage);
    stroke-opacity: .4;
}

.orb .core {
    transform-origin: 50% 50%;
}

.orb::before {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 180, 168, .28), rgba(228, 180, 168, 0) 68%);
    filter: blur(14px);
    z-index: 0;
}

.orb .halo {
    animation: pulse 5.5s ease-in-out infinite;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

@keyframes pulse {
    0%, 100% {
        opacity: .35;
        transform: scale(.97);
    }

    50% {
        opacity: .7;
        transform: scale(1.04);
    }
}

.orb .orb-phase {
    color: #FFFFFF;
    text-shadow: 0 1px 24px rgba(6, 16, 26, .55);
}

.orb .orb-sub {
    color: #C6D3DE;
}

.orb:hover .ring--rose {
    stroke-opacity: .95;
    transition: stroke-opacity .5s;
}

.orb-text {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    pointer-events: none;
}

.orb-play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, .06);
    transition: background .35s, border-color .35s, transform .35s var(--ease);
}

.orb-play svg {
    width: 11px;
    height: 13px;
    margin-left: 2px;
}

.orb:hover .orb-play {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .7);
    transform: scale(1.06);
}

.orb.is-running .orb-play {
    display: none;
}

.orb-phase {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1;
    color: #fff;
}

.orb-sub {
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #A8BCCD;
}

.orb-words {
    margin: 0;
    min-height: 1.9em;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.4rem);
    line-height: 1.4;
    color: var(--blush);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    letter-spacing: .01em;
}

.orb-words.in {
    opacity: 1;
    transform: none;
}

.tt-note {
    margin-top: 26px;
    font-size: .82rem;
    color: #5A6B7B;
    max-width: 64ch;
}

.orb-caption {
    font-size: .84rem;
    line-height: 1.6;
    color: #B7C7D4;
    max-width: 32ch;
    text-align: center;
    margin: 0;
    min-height: 3.2em;
}

/* ---------- recherche (ajustée) ---------- */

.search-card {
    box-shadow: 0 30px 60px -40px rgba(12, 27, 42, .55), 0 0 0 1px rgba(12, 27, 42, .04);
    border-radius: 18px;
    padding: 26px clamp(20px, 2.4vw, 32px);
}

/* ---------- besoins : mots interactifs ---------- */

.needs {
    position: relative;
    padding: clamp(64px, 9vw, 118px) 0;
    background: linear-gradient(180deg, #FFFFFF, var(--mist));
    transition: background .7s ease;
}

.needs h2 {
    max-width: 20ch;
}

.need-words {
    display: flex;
    flex-wrap: wrap;
    gap: .06em .34em;
    font-family: var(--serif);
    font-size: clamp(2.3rem, 6.2vw, 5.2rem);
    line-height: .98;
    letter-spacing: -.03em;
    margin: clamp(28px, 4vw, 44px) 0 0;
    max-width: 20ch;
}

.need-words button {
    all: unset;
    color: #8D9CA8;
    cursor: pointer;
    position: relative;
    transition: color .4s ease;
    padding-bottom: .04em;
}

.need-words button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .06em;
    height: 2px;
    background: var(--clay);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.need-words button:hover,
.need-words button:focus-visible,
.need-words button.on {
    color: var(--ink);
    outline: none;
}

.need-words button.on::after {
    transform: scaleX(1);
}

.needs.has-active button:not(.on) {
    color: #8D9CA8;
}

.need-line {
    margin: clamp(24px, 3vw, 36px) 0 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: #33465A;
    max-width: 46ch;
    min-height: 3.4em;
}

.need-line span {
    display: inline;
}

.need-hint {
    font-size: .78rem;
    color: #6A7B89;
    margin-top: 8px;
}

/* ---------- bandeau citation ---------- */

.citation {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: clamp(56px, 7.5vw, 104px) 0;
}

.citation .wrap {
    position: relative;
}

.citation blockquote {
    position: relative;
    padding-top: 6px;
}

.citation-mark {
    display: block;
    font-family: var(--serif);
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: .5;
    color: var(--blush);
    margin-bottom: 18px;
    user-select: none;
}

.citation blockquote {
    margin: 0;
    min-width: 0;
}

.citation p {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.6vw, 3.1rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--ink);
    max-width: 26ch;
    margin: 0;
    text-wrap: pretty;
}

.citation p em {
    font-style: italic;
    color: var(--clay);
}

.citation footer {
    margin-top: 30px;
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #46586A;
}

.citation footer::before {
    content: "—";
    margin-right: 10px;
    color: var(--clay);
}


/* ---------- marque : trois maillons ---------- */

.brand .brand-mark {
    color: var(--ink);
    transition: color .35s var(--ease);
}

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

.foot .brand .brand-mark {
    color: var(--blush);
}

.foot .brand:hover .brand-mark {
    color: #fff;
}

/* ---------- rail horizontal des approches ---------- */

.rail-section {
    padding: clamp(60px, 8vw, 110px) 0 clamp(50px, 6vw, 80px);
    overflow: hidden;
}

.rail-head {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 40px;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: clamp(24px, 3vw, 38px);
}

.rail-head h2 {
    max-width: 16ch;
}

.rail-head p {
    color: #51636F;
    max-width: 40ch;
    margin: 0;
    font-size: .98rem;
}

.rail-nav {
    display: flex;
    gap: 10px;
}

.rail-nav button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: none;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}

.rail-nav button:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    transform: translateY(-2px);
}

.rail-nav button:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
    background: none;
    color: var(--ink);
    border-color: var(--line);
}

.rail-nav svg {
    width: 16px;
    height: 16px;
}

.rail {
    display: flex;
    gap: clamp(14px, 1.8vw, 24px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 6px var(--gutter) 8px;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar {
    display: none;
}

.rail.dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.rail-card {
    flex: 0 0 clamp(250px, 27vw, 330px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease);
}

.rail-card:hover,
.rail-card:focus-visible {
    border-color: var(--line-strong);
    transform: translateY(-4px);
    box-shadow: 0 24px 40px -32px rgba(12, 27, 42, .5);
    outline: none;
}

.rail-bloom {
    position: relative;
    height: 138px;
    overflow: hidden;
    background: var(--mist);
}

.rail-bloom::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    width: 190px;
    height: 190px;
    margin: -95px 0 0 -95px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, var(--bloom-a), var(--bloom-b) 70%);
    filter: blur(18px);
    opacity: .85;
    transform: scale(.86);
    transition: transform .7s var(--ease), opacity .5s;
}

.rail-card:hover .rail-bloom::before {
    transform: scale(1.12);
    opacity: 1;
}

.rail-bloom span {
    position: absolute;
    left: 20px;
    bottom: 12px;
    font-family: var(--serif);
    font-size: 1.05rem;
    color: rgba(12, 27, 42, .5);
    letter-spacing: .02em;
}

.rail-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rail-body h3 {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.01em;
}

.rail-body p {
    font-size: .9rem;
    line-height: 1.55;
    color: #51636F;
    margin: 0;
    flex: 1;
}

.rail-body .rail-state {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6A7B89;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rail-body .rail-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
}

.rail-body .rail-state.on {
    color: var(--ink);
}

.rail-body .rail-state.on::before {
    background: var(--sage);
}

.rail-progress {
    width: min(1280px, 100% - var(--gutter) * 2);
    margin: 6px auto 0;
    height: 2px;
    background: var(--line);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.rail-progress i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12%;
    background: var(--navy);
    border-radius: 2px;
    transition: width .15s linear, transform .15s linear;
}

/* ---------- bandeau praticiens / citation ---------- */

.band-ink {
    position: relative;
    overflow: hidden;
}

.band-ink svg {
    position: absolute;
    inset: auto 0 -2px 0;
    width: 100%;
    height: 140px;
    opacity: .5;
}

/* ---------- pied de page : grand mot ---------- */

.mini,
.dir-reset,
.p-card .mini {
    border-radius: 999px;
    background: none;
    appearance: none;
    font-family: var(--sans);
    cursor: pointer;
}

.p-card .mini:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.foot-big {
    font-family: var(--serif);
    font-size: clamp(4rem, 17vw, 15rem);
    line-height: .74;
    letter-spacing: -.05em;
    color: rgba(255, 255, 255, .1);
    text-align: center;
    margin-top: 44px;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .hero2-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-bottom: clamp(110px, 16vw, 150px);
    }

    .orb-wrap {
        order: -1;
        margin-bottom: 8px;
    }

    .orb {
        width: clamp(170px, 44vw, 220px);
    }

    .hero2 h1 {
        max-width: none;
    }

    .need-words {
        font-size: clamp(2.1rem, 11vw, 3.4rem);
        max-width: none;
    }

    .rail-card {
        flex-basis: 78vw;
    }

    .rail-head {
        padding-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .need-words button::after {
        transition: none;
    }

    .rail-bloom::before {
        transition: none;
    }
}