/* ==========================================================================
   HugOstéo — couche « cabinet calme » (2026-09-23)

   Chargée APRÈS style.css, sur toutes les pages. Elle ne touche ni au texte,
   ni aux liens, ni au suivi : seulement la matière (papier ivoire, pierre,
   vert forêt), la typographie (Fraunces pour les titres, la même que /rdv/)
   et le rythme des sections.

   Retour arrière : retirer la ligne <link ... premium.css> de chaque page.
   ========================================================================== */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fraunces-var.woff2') format('woff2');
}

/* --- Matière --------------------------------------------------------------- */
:root {
    --brand: #1f3b33;
    --brand-700: #15291f;
    --brand-500: #3d5d52;
    --brand-100: #e4ebe5;

    /* Eucalyptus : l'ancien bleu pétrole, désaturé et rapproché du vert */
    --accent: #8fae9f;
    --accent-deep: #2f5f52;
    --accent-soft: #e9eee8;
    --accent-line: #d2ddd3;

    --ink: #1a2520;
    --ink-soft: #5a655e;
    --paper: #fbf9f5;
    --paper-2: #f3eee6;
    --paper-3: #e9e2d6;
    --line: #e7e0d4;
    --line-strong: #d8cebf;
    --card: #ffffff;
    --gold: #a97c3a;

    --ink-700: #37433d;
    --ink-300: #8d948c;

    --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, serif;

    --step-display: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
    --step-h2: clamp(2rem, 1.35rem + 2.4vw, 3.1rem);
    --step-h3: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);

    --section-padding: clamp(72px, 9vw, 136px);

    --shadow-sm: 0 1px 2px rgba(40, 33, 20, .04), 0 4px 12px -6px rgba(40, 33, 20, .06);
    --shadow-md: 0 10px 28px -14px rgba(40, 33, 20, .16), 0 2px 6px -2px rgba(40, 33, 20, .05);
    --shadow-lg: 0 34px 64px -28px rgba(31, 44, 36, .30), 0 12px 24px -16px rgba(31, 44, 36, .14);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
}

/* --- Surfaces du navigateur ---------------------------------------------- */
html {
    background: var(--paper);
    scrollbar-color: var(--line-strong) var(--paper);
    accent-color: var(--brand);
}

body {
    background: var(--paper);
    color: var(--ink-700);
    caret-color: var(--brand);
    font-feature-settings: "cv11", "ss01";
}

::selection {
    background: #dfe7dd;
    color: var(--brand-700);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 4px;
}

/* --- Titres : Fraunces, poids léger, la taille fait la hiérarchie -------- */
h1,
h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-variation-settings: "opsz" 64;
    color: var(--brand-700);
    letter-spacing: -0.022em;
}

h1 {
    line-height: 1.02;
    letter-spacing: -0.03em;
}

h2 {
    line-height: 1.08;
}

/* Fraunces n'existe qu'en 400-500 : les petits titres restent en Inter,
   sinon le navigateur fabrique un faux gras. */
h3,
h4,
h5 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink);
}

strong {
    font-weight: 600;
}

/* --- Boutons : plus calmes, pas de saut au survol ------------------------ */
.btn {
    padding: 15px 28px;
    line-height: 1.3;
    font-weight: 560;
    letter-spacing: 0;
    transition: background-color .35s var(--ease-out), color .35s var(--ease-out),
        border-color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .2s var(--ease-out);
}

.btn-primary {
    background-color: var(--brand);
    box-shadow: 0 1px 1px rgba(21, 41, 31, .2), 0 10px 24px -14px rgba(21, 41, 31, .7);
}

.btn-primary:hover {
    background-color: var(--brand-700);
    transform: none;
    box-shadow: 0 1px 1px rgba(21, 41, 31, .2), 0 16px 30px -16px rgba(21, 41, 31, .75);
}

.btn:active {
    transform: scale(.985);
}

.btn-secondary {
    background: transparent;
    color: var(--brand-700);
    border-color: var(--line-strong);
    box-shadow: none;
}

.btn-secondary:hover {
    background: var(--card);
    border-color: var(--brand-500);
    transform: none;
}

/* --- Bandeau et navigation ----------------------------------------------- */
.topbar {
    background: var(--brand-700);
    font-size: .82rem;
    letter-spacing: .01em;
}

.topbar-inner {
    padding-block: 9px;
}

.navbar {
    background: rgba(251, 249, 245, .86);
    border-bottom-color: transparent;
    transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}

/* Le filet n'apparaît qu'une fois la page défilée. Sans prise en charge des
   animations liées au défilement, la barre reste sans filet : rien ne casse. */
@keyframes navbar-settle {
    to {
        border-bottom-color: var(--line);
        background-color: rgba(251, 249, 245, .94);
    }
}

@supports (animation-timeline: scroll()) {
    .navbar {
        animation: navbar-settle linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
}

/* Le logo est un JPEG sur fond blanc : multiply le fond dans l'ivoire */
.logo img {
    mix-blend-mode: multiply;
    height: 50px;
}

.nav-link {
    color: var(--ink-700);
    font-weight: 500;
}

.nav-link::after {
    height: 1px;
    bottom: 1px;
    background: var(--brand-700);
}

.nav-menu .btn {
    padding: 11px 20px;
}

.lang-switch {
    border-color: var(--line-strong);
}

.lang-switch a {
    color: var(--ink-soft);
    font-weight: 600;
}

.lang-switch a:hover {
    background: var(--paper-2);
}

/* --- Héros ----------------------------------------------------------------- */
.hero {
    padding: clamp(40px, 5.5vw, 84px) 0 clamp(72px, 8vw, 112px);
    background:
        radial-gradient(900px 560px at 84% 18%, rgba(233, 222, 203, .75), transparent 66%),
        var(--paper);
    border-bottom: 0;
}

@media (min-width: 981px) {
    .hero-container {
        grid-template-columns: 1.12fr .88fr;
        gap: clamp(40px, 6vw, 96px);
    }
}

/* « Ostéopathe diplômé » est déjà dans la bande d'informations juste dessous */
.hero .eyebrow {
    display: none;
}

.hero-title {
    font-size: var(--step-display);
    margin-bottom: var(--s5);
    max-width: 12ch;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 1.04rem + .3vw, 1.26rem);
    font-weight: 400;
    color: var(--ink-700);
    line-height: 1.55;
    max-width: 38ch;
    margin-bottom: var(--s3);
}

.hero-text {
    color: var(--ink-soft);
    margin-bottom: var(--s6);
}

.hero-buttons {
    margin-bottom: var(--s4);
}

.hero-reassurance {
    color: var(--ink-soft);
    margin-bottom: var(--s6);
}

.hero-reassurance i {
    color: var(--accent-deep);
}

/* L'adresse : deux lignes sous un filet, plus d'encadré */
.hero-location {
    display: flex;
    background: none;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
    box-shadow: none;
    padding: var(--s4) 0 0;
    color: var(--ink-700);
    max-width: 46ch;
}

.hero-location i {
    color: var(--accent-deep);
}

.hero-image {
    margin-bottom: 0;
    justify-content: flex-end;
}

.hero-image::before {
    display: none;
}

/* Cadre en arche : tête et épaules dans l'ouverture, bas du portrait droit */
.hero-image img {
    max-width: 480px;
    border-radius: 240px 240px 18px 18px;
    box-shadow: var(--shadow-lg);
}

/* Filet décalé autour de l'arche : un passe-partout, pas une lueur */
.hero-image::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -14px;
    bottom: 22px;
    right: -14px;
    width: min(100%, 480px);
    border: 1px solid var(--line-strong);
    border-radius: 254px 254px 24px 24px;
    pointer-events: none;
    transform: translate(0, 0);
}

/* À gauche, sur la veste : la broderie « HugOstéo » reste visible à droite */
.hero-caption {
    left: -28px;
    right: auto;
    bottom: 44px;
    transform: none;
    background: var(--card);
    border: 0;
    border-radius: 12px;
    padding: 12px 18px 12px 18px;
    text-align: left;
    box-shadow: var(--shadow-md);
}

.hero-caption strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
    color: var(--brand-700);
}

.hero-caption span {
    font-size: .8rem;
    color: var(--ink-soft);
}

/* Le seul moment mis en scène : la photo « fait le point » à l'arrivée */
.hero-image.reveal {
    transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), filter 1.3s var(--ease-out);
}

.hero-image.reveal-hidden {
    opacity: 0;
    transform: translateY(14px) scale(.99);
    filter: blur(10px) saturate(.8);
}

.hero-image.reveal.active {
    filter: none;
}

/* --- Bande d'informations -------------------------------------------------- */
.trust-strip {
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: var(--s6) 0;
}

.trust-item i {
    color: var(--accent-deep);
    font-size: 1.45rem;
}

.trust-item strong {
    color: var(--ink);
    font-weight: 600;
}

@media (min-width: 901px) {
    .trust-item + .trust-item {
        border-left: 1px solid var(--line);
        padding-left: clamp(20px, 3vw, 40px);
    }
}

/* --- Sections : titre à gauche, chapeau à droite -------------------------- */
.section-alt {
    background-color: var(--paper-2);
}

.section-title {
    max-width: none;
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: clamp(32px, 6vw, 96px);
    align-items: end;
    margin: 0 0 clamp(44px, 5.5vw, 76px);
}

.section-title h2 {
    margin: 0;
    max-width: 18ch;
}

.section-title p {
    margin: 0;
    max-width: 44ch;
    justify-self: end;
    color: var(--ink-soft);
    font-size: clamp(1.02rem, 1rem + .2vw, 1.12rem);
    line-height: 1.6;
}

@media (max-width: 860px) {
    .section-title {
        grid-template-columns: 1fr;
        row-gap: var(--s4);
    }

    .section-title p {
        justify-self: start;
    }
}

/* Petites lignes centrées en pied de section : alignées sur le titre */
.section .container > div[style*="text-align: center"] {
    text-align: left !important;
}

/* --- Pourquoi consulter ---------------------------------------------------- */
.feature-card {
    border-top-color: var(--line-strong);
    padding-top: var(--s6);
}

.feature-icon,
.card-icon,
.motif-icon {
    background: none;
    width: auto;
    height: auto;
    justify-content: flex-start;
    color: var(--accent-deep);
    font-size: 1.55rem;
    border-radius: 0;
}

.feature-icon {
    margin-bottom: var(--s5);
}

.feature-card h3 {
    font-size: 1.08rem;
    margin-bottom: var(--s3);
}

.feature-card p {
    color: var(--ink-soft);
    line-height: 1.7;
}

/* --- Hugo ------------------------------------------------------------------ */
/* La photo est un détourage posé sur #f6f6f4 : on lui donne un plateau de
   la même teinte, sinon le rectangle se verrait sur la pierre. */
.about-image {
    background: #f6f6f4;
    border-radius: var(--radius-lg);
    padding: clamp(12px, 2vw, 28px);
    box-shadow: inset 0 0 0 1px rgba(40, 33, 20, .05);
}

.about-image img {
    border-radius: 0;
}

.about-eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--accent-deep);
    margin-bottom: var(--s4);
}

.about-content h2 {
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
}

.patients-list {
    background: none;
    border: 0;
    border-top: 1px solid var(--line-strong);
    border-radius: 0;
    box-shadow: none;
    padding: var(--s5) 0 0;
}

.patients-list h3 {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: var(--step-small);
}

.patients-list li i {
    color: var(--accent-deep) !important;
}

/* --- Pour qui : les cartes sont des liens, elles restent des cartes ------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: var(--s6) var(--s6) var(--s5);
    transition: border-color .35s var(--ease-out), box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.card h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.55rem;
    letter-spacing: -0.015em;
    color: var(--brand-700);
    margin-bottom: var(--s4);
}

.card-icon {
    margin-bottom: var(--s5);
}

.card-list li {
    color: var(--ink-soft);
}

.card-list li::before {
    width: 10px;
    height: 1px;
    border-radius: 0;
    top: .78em;
    left: 0;
    background: var(--accent);
}

.card-more {
    color: var(--brand-700);
    border-top-color: var(--line);
    font-weight: 560;
}

/* --- Motifs ---------------------------------------------------------------- */
.motifs-grid,
.motif-card {
    border-color: var(--line-strong);
}

.motif-icon {
    font-size: 1.4rem;
    align-self: start;
    padding-top: 1px;
}

.motif-card h3 {
    font-size: 1.05rem;
}

.motif-card p {
    color: var(--ink-soft);
}

/* --- Déroulement ----------------------------------------------------------- */
.process-step::before {
    height: 1px;
    background: var(--line-strong);
}

.step-number {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    color: var(--brand-700);
    font-weight: 400;
    font-size: 1.55rem;
    font-variation-settings: "opsz" 64;
    box-shadow: 0 0 0 8px var(--paper);
    line-height: 52px;
}

.section-alt .step-number {
    background: var(--paper-2);
    box-shadow: 0 0 0 8px var(--paper-2);
}

.process-step p {
    color: var(--ink-soft);
}

.process-duration {
    color: var(--ink-soft);
}

.prep-note {
    max-width: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 3.4vw, 40px);
}

.prep-note h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--brand-700);
}

.prep-note li i {
    color: var(--accent-deep);
}

@media (min-width: 900px) {
    .prep-note ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Services et FAQ : titre à gauche, liste à droite --------------------- */
@media (min-width: 980px) {
    .section > .container:has(> .services-grid),
    .section > .container:has(> .faq-list) {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        column-gap: clamp(40px, 6vw, 96px);
        align-items: start;
    }

    .section > .container:has(> .services-grid) > .section-title,
    .section > .container:has(> .faq-list) > .section-title {
        grid-template-columns: 1fr;
        row-gap: var(--s4);
        margin: 0;
        position: sticky;
        top: calc(var(--header-height) + 32px);
    }

    .section > .container:has(> .services-grid) > .section-title p,
    .section > .container:has(> .faq-list) > .section-title p {
        justify-self: start;
    }

    .section > .container:has(> .faq-list) > :not(.section-title),
    .section > .container:has(> .services-grid) > :not(.section-title) {
        grid-column: 2;
    }
}

.services-grid {
    max-width: none;
    margin: 0;
    border-top: 1px solid var(--line-strong);
}

.service-item {
    border-bottom-color: var(--line-strong);
    font-size: 1rem;
    padding: 18px 0;
}

.service-item i {
    color: var(--accent-deep);
}

.faq-list {
    max-width: none;
    margin: 0;
    border-top-color: var(--line-strong);
}

.faq-item {
    border-bottom-color: var(--line-strong);
}

.faq-item summary {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.06rem;
    padding: 24px 48px 24px 0;
    color: var(--ink);
}

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

/* Un « + » qui devient « − », plus posé qu'un chevron */
.faq-item summary::after,
.faq-item summary::before {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 1.5px;
    border: 0;
    background: var(--brand-700);
    transform: translateY(-50%);
    transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}

.faq-item summary::before {
    transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] summary::after {
    transform: translateY(-50%);
}

.faq-item[open] summary::before {
    transform: translateY(-50%) rotate(0deg);
    opacity: 0;
}

.faq-answer {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.7;
    padding-bottom: var(--s6);
}

.faq-answer a {
    color: var(--brand-700);
    border-bottom-color: var(--accent-line);
}

/* --- Avis -------------------------------------------------------------------- */
.rating-summary {
    margin: 0 0 clamp(28px, 3.5vw, 44px);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.rating-score {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 2.4rem;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 64;
}

.review-stars {
    color: var(--gold);
    letter-spacing: 3px;
}

.reviews-grid {
    gap: var(--s5);
}

.review-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.review-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
}

.review-text {
    color: var(--ink-700);
}

/* Initiales dans la gamme du site, pas en rouge / violet / vert vif */
.review-avatar {
    background: var(--paper-2);
    color: var(--brand-700);
    box-shadow: inset 0 0 0 1px var(--line);
    font-weight: 600;
}

.review-more {
    color: var(--brand-700);
    border-bottom-color: var(--line-strong);
}

/* --- Cabinet ------------------------------------------------------------------ */
.cabinet-info {
    background: var(--card);
    border-color: var(--line);
    box-shadow: none;
}

.cabinet-info h3 i,
.hours-list + p a,
.cabinet-info p a {
    color: var(--accent-deep);
}

.cabinet-info h3 i {
    color: var(--accent-deep);
}

.hours-list,
.hours-list li {
    border-color: var(--line);
}

.map-placeholder,
.cabinet-map iframe {
    border-radius: var(--radius-lg) !important;
}

.map-placeholder {
    background: var(--paper);
    border-color: var(--line);
    box-shadow: none;
}

/* --- Tarifs : une ligne de carte, pas quatre boîtes ------------------------- */
.pricing-grid {
    gap: 0;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}

.pricing-card {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 28px);
}

.pricing-card:first-child {
    padding-left: 0;
}

@media (min-width: 1001px) {
    .pricing-card + .pricing-card {
        border-left: 1px solid var(--line);
    }
}

@media (max-width: 1000px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-card {
        padding-left: 0;
        border-bottom: 1px solid var(--line);
    }

    .pricing-card:last-child {
        border-bottom: 0;
    }
}

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

.pricing-card h3 {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: var(--step-small);
}

.price {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.2rem, 1.7rem + 1.3vw, 2.9rem);
    white-space: nowrap;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 64;
    color: var(--brand-700);
    line-height: 1.1;
    margin-bottom: var(--s3);
}

.price-unit {
    font-size: .9rem;
    color: var(--ink-soft);
    margin-left: 4px;
}

.pricing-note {
    text-align: left;
    margin: var(--s6) 0 0;
    color: var(--ink-soft);
}

/* --- Pages voisines et fil d'Ariane ----------------------------------------- */
.related-grid {
    justify-content: flex-start;
}

.related-link {
    background: var(--card);
    border-color: var(--line);
    box-shadow: none;
}

.related-link i {
    color: var(--accent-deep);
}

.related-link:hover {
    border-color: var(--line-strong);
    color: var(--brand-700);
    transform: none;
    box-shadow: var(--shadow-sm);
}

.breadcrumb ol {
    list-style: none;
}

.breadcrumb {
    background: var(--paper);
    border-bottom-color: var(--line);
}

/* --- Dernier appel : une bande vert forêt ------------------------------------ */
main > .section[style*="text-align: center"] {
    background: var(--brand-700);
    color: rgba(244, 239, 230, .78);
    padding-block: clamp(80px, 10vw, 144px);
}

main > .section[style*="text-align: center"] h2 {
    color: #f4efe6;
    font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem);
    max-width: 18ch;
    margin: 0 auto var(--s4);
}

main > .section[style*="text-align: center"] p,
main > .section[style*="text-align: center"] .hero-reassurance {
    color: rgba(244, 239, 230, .74);
}

main > .section[style*="text-align: center"] .hero-reassurance i {
    color: var(--accent);
}

main > .section[style*="text-align: center"] .btn-primary {
    background: #f4efe6;
    color: var(--brand-700);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .6);
}

main > .section[style*="text-align: center"] .btn-primary:hover {
    background: #ffffff;
}

main > .section[style*="text-align: center"] .btn-primary .doctolib-chip {
    box-shadow: none;
}

main > .section[style*="text-align: center"] .btn-secondary {
    color: #f4efe6;
    border-color: rgba(244, 239, 230, .3);
}

main > .section[style*="text-align: center"] .btn-secondary:hover {
    background: rgba(244, 239, 230, .08);
    border-color: rgba(244, 239, 230, .6);
}

main > .section[style*="text-align: center"] a:focus-visible {
    outline-color: #f4efe6;
}

/* --- Pied de page ------------------------------------------------------------- */
footer {
    background: #111f18;
    color: rgba(244, 239, 230, .7);
    border-top: 1px solid rgba(244, 239, 230, .08);
}

.footer-col h3 {
    color: #f4efe6;
    font-weight: 600;
}

.footer-links i {
    color: var(--accent);
}

.footer-links a:hover {
    color: #f4efe6;
}

.copyright {
    color: rgba(244, 239, 230, .5);
    border-top-color: rgba(244, 239, 230, .1);
}

/* --- Pages légales ------------------------------------------------------------ */
.legal h2 {
    border-top-color: var(--line-strong);
}

.legal-table th {
    background: var(--paper-2);
}

/* --- Mouvement : révélations plus lentes et plus douces ---------------------- */
.reveal {
    transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
}

.reveal-hidden {
    transform: translateY(14px);
}

/* --- Tablette / mobile ---------------------------------------------------------- */
@media (max-width: 980px) {
    .hero-image {
        justify-content: center;
    }

    .hero-image::after {
        right: 50%;
        transform: translateX(calc(50% + 14px));
    }

    .hero-title {
        max-width: 14ch;
    }
}

@media (max-width: 768px) {
    .hero {
        text-align: left;
        padding-top: var(--s6);
    }

    .hero-title {
        font-size: clamp(2.5rem, 1.6rem + 5vw, 3.2rem);
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-image img {
        max-width: min(100%, 380px);
        border-radius: 190px 190px 16px 16px;
    }

    .hero-image::after {
        width: min(100%, 380px);
        border-radius: 204px 204px 22px 22px;
        top: -10px;
        bottom: 26px;
        transform: translateX(calc(50% + 10px));
    }

    .hero-caption {
        right: auto;
        left: 50%;
        bottom: -22px;
        transform: translateX(-50%);
        text-align: center;
    }

    .hero-image {
        margin-bottom: 30px;
    }

    .about-container,
    .section-title {
        text-align: left;
    }

    .about-content p {
        margin-left: 0;
    }

    .card {
        padding: var(--s5);
    }

    .nav-menu {
        background: var(--paper);
    }

    .mobile-cta {
        background: rgba(251, 249, 245, .94);
        border-top-color: var(--line);
    }

    main > .section[style*="text-align: center"] .hero-buttons .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-image.reveal,
    .hero-image.reveal-hidden {
        filter: none !important;
    }
}