/* ============================================================
   site.css : feuille de style de base
   ============================================================
   Les trois couleurs de la charte (--primaire, --secondaire, --texte) sont
   injectées dans le <head> depuis config/site.php : ce fichier n'a donc pas à
   être modifié d'un client à l'autre, seules les couleurs changent.

   Sommaire
     1. Réglages et jetons
     2. Base
     3. Mise en page
     4. Titres et texte
     5. Boutons
     6. En-tête et navigation
     7. Bandeau d'accueil
     8. Cartes
     9. Formulaires
    10. Alertes
    11. Galerie
    12. Contact
    13. Pied de page
    14. Accessibilité et impression
   ============================================================ */

/* ============ 1. RÉGLAGES ET JETONS ============ */
:root {
    /* --primaire, --secondaire, --texte viennent du <head> (config/site.php) */
    --fond:        #ffffff;
    --fond-doux:   #f6f7f9;
    --bord:        #e4e7eb;
    --texte-doux:  #5a6270;
    --blanc:       #ffffff;
    --erreur:      #c0392b;
    --succes:      #1e7e46;

    /* Échelle d'espacement */
    --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
    --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4.5rem;

    --rayon:       10px;
    --rayon-petit: 6px;
    --ombre:       0 1px 2px rgb(0 0 0 / .05), 0 4px 16px rgb(0 0 0 / .06);
    --ombre-forte: 0 4px 24px rgb(0 0 0 / .12);

    --largeur:       1200px;
    --largeur-texte: 46rem;

    --police: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transition: .18s ease;
}

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

/* ============ 2. BASE ============ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--police);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texte);
    background: var(--fond);
    /* Empêche tout débordement horizontal, cause n°1 des « sites qui bougent »
       sur mobile. */
    overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ 3. MISE EN PAGE ============ */
.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--e4);
}
.conteneur--texte { max-width: var(--largeur-texte); }

.section { padding-block: var(--e8); }
.section--alt { background: var(--fond-doux); }
.section--centree { text-align: center; }

.section__intro {
    font-size: 1.125rem;
    color: var(--texte-doux);
    max-width: var(--largeur-texte);
}
.section--centree .section__intro { margin-inline: auto; }
.section__fin { margin-top: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e3); }
.section--centree .section__fin { justify-content: center; }

/* ============ 4. TITRES ET TEXTE ============ */
h1, h2, h3, h4 {
    margin: 0 0 var(--e4);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -.015em;
    text-wrap: balance;
}
/* Tailles fluides : plus de media queries à maintenir pour la typographie. */
h1 { font-size: clamp(1.85rem, 4.5vw, 2.85rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

/* Le gras, déclaré explicitement plutôt que laissé au navigateur.
 *
 * Le défaut du navigateur est `font-weight: bolder`, qui est RELATIF au
 * parent : depuis un corps en 400 il donne bien 700, mais depuis un corps en
 * 300 (ce que font beaucoup de thèmes soignés), il ne monte qu'à 400, et le
 * gras devient invisible sans que rien ne le signale. Le cas s'est présenté
 * en vrai sur le premier site porté sur ce socle.
 *
 * Cette ligne est donc là pour le thème que le prochain intégrateur écrira
 * par-dessus : qu'il allège la graisse du corps sans y penser, le gras
 * restera du gras.
 */
strong, b { font-weight: 600; }

.section__titre { margin-bottom: var(--e5); }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--e2); }

code {
    background: var(--fond-doux);
    padding: .1em .4em;
    border-radius: var(--rayon-petit);
    font-size: .9em;
}

.code-erreur {
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--bord);
    margin: 0;
}

/* ============ 5. BOUTONS ============ */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    padding: .7rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-weight: 550;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); }
.bouton:active { transform: none; }

.bouton--primaire   { background: var(--primaire); color: var(--blanc); }
.bouton--primaire:hover { filter: brightness(1.12); color: var(--blanc); }

.bouton--secondaire { background: var(--secondaire); color: #241f00; }
.bouton--secondaire:hover { filter: brightness(1.08); }

.bouton--fantome    { background: transparent; color: var(--primaire); border-color: currentColor; }
.bouton--fantome:hover { background: var(--primaire); color: var(--blanc); }

.bouton--grand { padding: .95rem 1.8rem; font-size: 1.0625rem; }

/* ============ 6. EN-TÊTE ET NAVIGATION ============ */
.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--fond) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bord);
}
.entete__interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
    min-height: 4.5rem;
}

.marque { display: flex; flex-direction: column; text-decoration: none; color: var(--texte); }
.marque:hover { text-decoration: none; }
.marque__nom { font-weight: 700; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em; }
.marque__accroche { font-size: .78rem; color: var(--texte-doux); line-height: 1.3; }

.menu__liste { display: flex; gap: var(--e5); list-style: none; margin: 0; padding: 0; }
.menu__liste li { margin: 0; }
.menu__liste a {
    color: var(--texte);
    font-size: .95rem;
    font-weight: 500;
    padding-block: .4rem;
    border-bottom: 2px solid transparent;
}
.menu__liste a:hover { text-decoration: none; border-bottom-color: var(--bord); }
.menu__liste a.is-active { color: var(--primaire); border-bottom-color: var(--primaire); }

.entete__actions { display: flex; align-items: center; gap: var(--e3); }

.langues { display: flex; gap: var(--e1); }
.langues__item {
    padding: .25rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--rayon-petit);
    color: var(--texte-doux);
}
.langues__item:hover { background: var(--fond-doux); text-decoration: none; }
.langues__item.is-active { background: var(--primaire); color: var(--blanc); }

/* Bouton hamburger : masqué au-dessus de 900 px */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--bord);
    border-radius: var(--rayon-petit);
    cursor: pointer;
}
.burger span {
    display: block;
    width: 1.15rem;
    height: 2px;
    margin-inline: auto;
    background: var(--texte);
    transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
    display: none;
    flex-direction: column;
    gap: var(--e2);
    padding: var(--e4);
    background: var(--fond);
    border-top: 1px solid var(--bord);
    border-bottom: 1px solid var(--bord);
    /* Dans l'en-tête collant : sur un écran bas (téléphone en paysage), le
       panneau défile en interne au lieu de pousser la page. */
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
}
.menu-mobile a {
    padding: var(--e3);
    color: var(--texte);
    font-weight: 550;
    border-radius: var(--rayon-petit);
}
.menu-mobile a:hover, .menu-mobile a.is-active { background: var(--fond-doux); text-decoration: none; }
.menu-mobile .bouton { margin-top: var(--e2); }
.menu-mobile[hidden] { display: none; }

@media (max-width: 900px) {
    .menu, .entete__tel { display: none; }
    .burger { display: flex; }
    .menu-mobile:not([hidden]) { display: flex; }
}

/* ============ 7. BANDEAU D'ACCUEIL ============ */
.heros {
    padding-block: clamp(3rem, 10vw, 7rem);
    background:
        radial-gradient(90rem 40rem at 12% -12%,
            color-mix(in srgb, var(--primaire) 13%, transparent), transparent 62%),
        var(--fond-doux);
}
.heros__titre { margin-bottom: var(--e3); }
.heros__accroche {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    color: var(--texte-doux);
    max-width: 40rem;
}
.heros__actions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e6); }
.heros__avis { margin-top: var(--e5); font-size: .95rem; color: var(--texte-doux); }

/* ============ 8. CARTES ============ */
.cartes {
    display: grid;
    /* auto-fit + minmax : la grille se réorganise seule, sans media query */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--e5);
    margin-top: var(--e6);
}
.carte {
    padding: var(--e5);
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    transition: box-shadow var(--transition), transform var(--transition);
}
.carte:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); }
.carte__titre { font-size: 1.1rem; margin-bottom: var(--e2); }
.carte__texte { color: var(--texte-doux); margin: 0; }

.bandeau-cta {
    background: var(--primaire);
    color: var(--blanc);
    text-align: center;
}
.bandeau-cta h2, .bandeau-cta p { color: var(--blanc); }
.bandeau-cta__interieur { display: grid; gap: var(--e4); justify-items: center; }

/* ============ 9. FORMULAIRES ============ */
.champ { margin-bottom: var(--e5); }

.champ label {
    display: block;
    margin-bottom: var(--e2);
    font-size: .93rem;
    font-weight: 550;
}

.champ input, .champ textarea, .champ select {
    width: 100%;
    padding: .7rem .85rem;
    font: inherit;
    color: var(--texte);
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon-petit);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { resize: vertical; min-height: 8rem; }

.champ input:focus, .champ textarea:focus, .champ select:focus {
    outline: none;
    border-color: var(--primaire);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 22%, transparent);
}

/* Champ en erreur : signalé par la couleur ET par le message, jamais par la
   couleur seule : 8 % des hommes ne distinguent pas le rouge du vert. */
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ__erreur { margin: var(--e2) 0 0; font-size: .87rem; font-weight: 500; color: var(--erreur); }
.champ__aide   { margin: var(--e2) 0 0; font-size: .85rem; color: var(--texte-doux); }

.champ--case label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e3);
    align-items: start;
    font-weight: 400;
    cursor: pointer;
}
.champ--case input { width: 1.15rem; height: 1.15rem; margin-top: .25rem; accent-color: var(--primaire); }
.champ--case .champ__aide { display: block; }

.requis { color: var(--erreur); }
.formulaire__note { font-size: .85rem; color: var(--texte-doux); }

/* Pot de miel : hors écran, invisible, mais rempli par les robots.
   display:none serait détecté par les robots les plus sérieux. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ============ 10. ALERTES ============ */
.alerte {
    padding: var(--e4);
    margin-bottom: var(--e5);
    border-radius: var(--rayon-petit);
    border-left: 4px solid;
    font-weight: 500;
}
.alerte--erreur {
    color: var(--erreur);
    background: color-mix(in srgb, var(--erreur) 8%, transparent);
    border-color: var(--erreur);
}
.alerte--succes {
    color: var(--succes);
    background: color-mix(in srgb, var(--succes) 9%, transparent);
    border-color: var(--succes);
}

/* ============ 11. GALERIE ============ */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--e4);
    margin-top: var(--e6);
}
.galerie__item { margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--fond-doux); }
.galerie__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .3s ease;
}
.galerie__item:hover img { transform: scale(1.04); }

/* ============ 12. CONTACT ============ */
.contact__grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--e8);
    align-items: start;
}
@media (max-width: 860px) {
    .contact__grille { grid-template-columns: 1fr; gap: var(--e7); }
}

.contact__liste { list-style: none; margin: var(--e6) 0 0; padding: 0; }
.contact__liste li { margin-bottom: var(--e5); }
.contact__etiquette {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-doux);
    margin-bottom: var(--e1);
}
.contact__liste address { font-style: normal; }
.contact__sous-titre { font-size: 1.05rem; margin-top: var(--e6); }

.contact__formulaire {
    padding: var(--e6);
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}
@media (max-width: 560px) {
    .contact__formulaire { padding: var(--e4); }
}

.horaires {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--e1) var(--e4);
    margin: 0;
    font-size: .93rem;
}
.horaires dt { color: var(--texte-doux); }
.horaires dd { margin: 0; }

/* ============ 13. PIED DE PAGE ============ */
.pied {
    margin-top: var(--e8);
    background: var(--fond-doux);
    border-top: 1px solid var(--bord);
    font-size: .93rem;
}
.pied__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--e6);
    padding-block: var(--e7);
}
.pied__nom { font-weight: 700; font-size: 1.05rem; margin-bottom: var(--e1); }
.pied__accroche { color: var(--texte-doux); }
.pied__adresse { font-style: normal; color: var(--texte-doux); margin-top: var(--e3); }
.pied__titre {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texte-doux);
    margin-bottom: var(--e3);
}
.pied__liste { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.pied__liste li { margin-bottom: var(--e2); }
.pied__liste a { color: var(--texte); }
.pied__liste a:hover { color: var(--primaire); }
.pied__liste--legal { margin-top: var(--e4); }
.pied__note { margin-top: var(--e3); font-size: .85rem; color: var(--texte-doux); }

.pied__bas { border-top: 1px solid var(--bord); padding-block: var(--e4); }
.pied__bas .conteneur {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    justify-content: space-between;
    align-items: center;
}
.pied__bas p { margin: 0; color: var(--texte-doux); font-size: .87rem; }

/* ============ 14. ACCESSIBILITÉ ET IMPRESSION ============ */

/* Lien d'évitement : caché jusqu'à la première tabulation. Il permet à qui
   navigue au clavier de sauter le menu sans le parcourir à chaque page. */
.lien-evitement {
    position: absolute;
    left: var(--e4);
    top: -4rem;
    z-index: 100;
    padding: var(--e3) var(--e4);
    background: var(--primaire);
    color: var(--blanc);
    border-radius: var(--rayon-petit);
    transition: top var(--transition);
}
.lien-evitement:focus { top: var(--e3); text-decoration: none; }

/* Contour de focus visible uniquement au clavier : indispensable à la
   navigation sans souris, et invisible au clic. */
:focus-visible {
    outline: 3px solid var(--primaire);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respecte le réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .entete, .menu-mobile, .pied__bas, .bouton, .lien-evitement { display: none !important; }
    body { color: #000; background: #fff; }
    a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ============================================================
   THÈME DU CABINET ERIC MARIN : blocs de la page unique
   ============================================================
   Ajoutés à la feuille de base du framework, qui reste inchangée au-dessus.
   ============================================================ */

/* ---- Bandeau d'accueil avec photo ---- */
.heros--photo {
    position: relative;
    isolation: isolate;
    padding-block: clamp(4rem, 14vw, 9rem);
    background: var(--primaire);
    color: #fff;
    overflow: hidden;
}
.heros__fond {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: saturate(1.04);
}

/* Voile directionnel, calé sur l'emprise réelle du texte : dense à gauche où
   le titre se lit, effacé sur le dernier tiers de la photo. */
.heros--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg,
            rgb(8 30 27 / .82) 0%,
            rgb(8 30 27 / .72) 34%,
            rgb(8 30 27 / .40) 54%,
            rgb(8 30 27 / .10) 68%,
            rgb(8 30 27 / 0)   78%),
        linear-gradient(180deg, rgb(8 30 27 / .28) 0%, rgb(8 30 27 / 0) 22%);
}

/* Sur mobile le texte occupe toute la largeur : le voile passe en vertical,
   sinon la moitié droite de chaque ligne deviendrait illisible. */
@media (max-width: 760px) {
    .heros--photo::after {
        background: linear-gradient(180deg,
            rgb(8 30 27 / .40) 0%,
            rgb(8 30 27 / .58) 42%,
            rgb(8 30 27 / .74) 100%);
    }
}

.heros--photo .heros__titre {
    color: #fff;
    max-width: 18ch;
    text-shadow: 0 1px 18px rgb(4 20 18 / .55), 0 1px 3px rgb(4 20 18 / .40);
}
.heros--photo .heros__accroche {
    color: rgb(255 255 255 / .95);
    max-width: 32rem;
    text-shadow: 0 1px 14px rgb(4 20 18 / .50);
}

.bouton--clair {
    background: rgb(8 30 27 / .48);
    color: #fff;
    border-color: rgb(255 255 255 / .55);
    backdrop-filter: blur(4px);
}
.bouton--clair:hover { background: #fff; color: var(--primaire); border-color: #fff; }

/* Le numéro dans le bouton d'appel : redondant sur mobile (le bouton compose
   déjà le numéro), utile sur ordinateur pour le composer ailleurs.
   Masqué sur petit écran, insécable partout où il s'affiche. */
.heros__numero { white-space: nowrap; }

/* Le panorama de la vue s'affiche entier, à son ratio naturel : en fond
   recadré (cover), on n'en voyait qu'une tranche. Le bandeau garde son
   propre fond sombre sous le bloc de texte.

   Le bas est réduit par rapport aux 9rem de .heros--photo : sans le padding du
   haut, que l'image remplace, un bas à pleine hauteur ouvrait sous la maxime un
   vide deux fois plus grand que l'espace qui sépare l'image du titre. */
.heros--panorama {
    padding-top: 0;
    padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
}

/* Le bandeau occupe toute la largeur, a son ratio naturel de 716 x 305.
 *
 * LA LARGEUR MAXIMALE DE 716 px A ETE RETIREE le 18/09/2026, a la demande du
 * porteur. Elle bornait l'image a sa definition d'origine pour lui garder un
 * texte incruste net, mais le resultat etait une vignette posee au centre
 * d'une bande vide, sans rapport avec les bandeaux pleine largeur de
 * Lanfonnet et du Collet.
 *
 * L'ETIREMENT ET LE FLOU SONT ASSUMES. Sur un ecran large, cette image de
 * 716 px est agrandie deux a trois fois et son texte incruste devient flou.
 * C'est voulu : le cabinet doit le voir, c'est ce qui ouvre la conversation
 * sur l'original en haute definition. Ne pas retablir de max-width et ne pas
 * agrandir le fichier par un traitement : les deux masqueraient le defaut.
 *
 * PAS DE « background-size: cover » ICI, contrairement aux deux autres sites.
 * Un fond recadre couperait le nom en haut et la bande de photos en bas, qui
 * sont justement ce que le cabinet a demande de conserver. C'est la raison
 * pour laquelle ce bandeau reste une balise <img> et non un .heros__fond. */
.heros__panorama {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 clamp(2rem, 6vw, 3.5rem);
}

/* Le texte à gauche, les appels à droite.
 *
 * EMPILÉS, ils n'occupaient que la moitié gauche du bloc vert : une colonne de
 * vide sur toute la droite, et une hauteur telle que les deux boutons
 * tombaient sous la ligne de flottaison. La grille les met face à face.
 *
 * La bascule se fait à 900 px, le point de rupture du menu, déjà dans cette
 * feuille. En dessous, deux colonnes rendraient le texte et les boutons
 * également étroits, et la pile reprend la main.
 *
 * LA COLONNE DES ACTIONS SE MESURE SUR SON CONTENU (max-content), et c'est ce
 * qui la rend stable : à 21rem, le bouton d'appel manquait de 13 px et son
 * numéro passait à la ligne. Une valeur fixe rejouerait ce défaut au moindre
 * changement de libellé. Le max-width de 26rem borne quand même la piste, la
 * contribution intrinsèque d'un élément tenant compte de son max-width. */
@media (min-width: 901px) {
    .heros--panorama .heros__interieur {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(15rem, max-content);
        grid-template-areas:
            "texte  actions"
            "maxime actions";
        column-gap: clamp(2rem, 5vw, 4rem);
        row-gap: 0;
    }
    .heros--panorama .heros__texte  { grid-area: texte; }
    .heros--panorama .heros__maxime { grid-area: maxime; max-width: 40rem; }

    /* Les boutons l'un sous l'autre, à la largeur de leur colonne, et centrés
       sur la hauteur du texte plutôt que posés en haut. */
    .heros--panorama .heros__actions {
        grid-area: actions;
        align-self: center;
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
        max-width: 26rem;
    }

    /* La mesure de ligne est désormais tenue par la colonne : la borne de 32rem
       héritée de .heros--photo rouvrirait un vide à l'intérieur de la colonne. */
    .heros--panorama .heros__accroche { max-width: none; }
}

/* La maxime du cabinet, discrète sous les actions du bandeau. */
.heros__maxime {
    margin: var(--e6) 0 0;
    font-style: italic;
    font-size: .98rem;
    line-height: 1.5;
    color: rgb(255 255 255 / .82);
    max-width: 34rem;
    text-shadow: 0 1px 10px rgb(0 0 0 / .45);
}
.heros__maxime-auteur {
    display: block;
    margin-top: .2rem;
    font-style: normal;
    font-size: .8rem;
    letter-spacing: .04em;
    color: rgb(255 255 255 / .60);
}
@media (max-width: 600px) {
    .heros__numero { display: none; }
}

/* ---- Chiffres clés ---- */
.chiffres {
    background: var(--primaire);
    color: #fff;
    padding-block: var(--e5);
}
.chiffres__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(50%, 10rem), 1fr));
    gap: var(--e5);
    text-align: center;
}
.chiffre b {
    display: block;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--secondaire);
}
.chiffre span { font-size: .88rem; color: rgb(255 255 255 / .85); }
.chiffre__petit { font-size: .6em; opacity: .6; }

/* ---- Liste à puces cochées ---- */
.liste-cochee { list-style: none; padding: 0; margin: var(--e4) 0 0; }
.liste-cochee li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: var(--e3);
    line-height: 1.5;
}
.liste-cochee li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45em;
    width: .95rem;
    height: .55rem;
    border-left: 2.5px solid var(--primaire);
    border-bottom: 2.5px solid var(--primaire);
    transform: rotate(-45deg);
}

/* ---- Petites prestations ---- */
.services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--e4);
    list-style: none;
    padding: 0;
    margin: var(--e6) 0 0;
}
.service {
    margin: 0;
    padding: var(--e4) var(--e5);
    background: var(--fond);
    border: 1px solid var(--bord);
    border-left: 3px solid var(--secondaire);
    border-radius: var(--rayon-petit);
}
.service__nom { display: block; font-weight: 600; }
.service__detail { display: block; margin-top: .15rem; font-size: .85rem; color: var(--texte-doux); }

/* ---- Encadré prise en charge ---- */
.encadre {
    margin-top: var(--e5);
    padding: var(--e5) var(--e6);
    background: color-mix(in srgb, var(--secondaire) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--secondaire) 40%, transparent);
    border-radius: var(--rayon);
}
.encadre__titre { font-size: 1.1rem; margin-bottom: var(--e2); }
.encadre__note { margin: var(--e4) 0 0; font-size: .9rem; color: var(--texte-doux); }

/* ---- Trois colonnes d'infos pratiques ---- */
.colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--e6);
    margin-top: var(--e6);
}
.colonne__titre {
    font-size: .8rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--primaire);
    padding-bottom: var(--e2);
    border-bottom: 2px solid color-mix(in srgb, var(--primaire) 25%, transparent);
}

/* ---- Contact ---- */
.contact__grand { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.horaires-simple { font-size: 1.05rem; font-weight: 550; margin-bottom: var(--e1); }

/* Le formulaire de la page unique reste lisible : colonne bornée. */
#contact form { max-width: 34rem; }

/* ---- Bande photo pleine largeur ---- */
.bande-photo {
    margin: 0;
    line-height: 0;
}
.bande-photo img {
    width: 100%;
    height: clamp(11rem, 26vw, 21rem);
    object-fit: cover;
    /* Les pieds des marcheurs sont dans le tiers haut de la photo : le
       recadrage de la bande doit les garder, pas les rochers seuls. */
    object-position: center 30%;
}

/* ---- Ancres : le titre ne doit pas passer sous l'en-tête collant ---- */
:target { scroll-margin-top: 6rem; }
section[id] { scroll-margin-top: 5.5rem; }

/* ---- Impression : le fond photo n'apporte rien au papier ---- */
@media print {
    .heros__fond { display: none !important; }
}

/* ---- Sous-blocs de la section soins ---- */
.sous-bloc__titre {
    margin-top: var(--e7);
    padding-top: var(--e5);
    border-top: 1px solid var(--bord);
}

/* ---- Légendes des photos d'équipement ---- */
.galerie__item figcaption {
    padding: var(--e3) var(--e4);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--texte-doux);
}

/* ---- Liens utiles sous les conseils ---- */
.conseils__liens {
    margin-top: var(--e6);
    font-size: .9rem;
    color: var(--texte-doux);
}

/* ---- Contact : formulaire et carte du cabinet côte à côte ---- */
.contact__duo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--e6);
    align-items: stretch;
    margin-top: var(--e5);
}
.carte-cabinet {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    background: var(--fond);
}
.carte-cabinet iframe {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 22rem;
    border: 0;
}
.carte-cabinet figcaption {
    padding: var(--e3) var(--e4);
    border-top: 1px solid var(--bord);
    font-size: .9rem;
    color: var(--texte-doux);
}
@media (max-width: 860px) {
    .contact__duo { grid-template-columns: 1fr; }
    .carte-cabinet iframe { min-height: 18rem; }
}