/* ============================================
       MOBILE-FIRST — Manoir Cap-Santé
       Stratégie : base = mobile, enhance via min-width
       ============================================ */

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
    }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    button { font: inherit; cursor: pointer; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    :focus-visible { outline: 3px solid var(--rouge); outline-offset: 2px; border-radius: 4px; }
    /* Sur fonds rouges/foncés, l'outline rouge devient invisible : on bascule sur crème */
    .btn-rouge:focus-visible,
    .nav-cta:focus-visible,
    .mcb-visit:focus-visible,
    .back-to-top:focus-visible,
    .hero :focus-visible,
    .region-band :focus-visible { outline-color: var(--creme); }

    /* ── VARIABLES ── */
    :root {
      /* Polices (tokenisées) */
      --font-body:    'Nunito', sans-serif;
      --font-display: 'Vollkorn', Georgia, serif;

      /* Palette */
      --rouge:     #B8392A;
      --rouge-dk:  #9B2F22;
      --rouge-lt:  #FFD4C8;
      --teal:      #4A7B7A;
      --teal-lt:   #D6EDEC;
      --teal-dk:   var(--teal-dk);
      --brun:      #2E2016;
      --brun-md:   #7A6050;
      --brun-lt:   #806451;  /* assombri : ~5,1:1 sur crème → conforme WCAG AA texte normal */
      --creme:     #FDF8F3;
      --creme-2:   #F5EDE6;
      --blanc:     #FFFFFF;
      --border:    #F0E8DF;

      /* Tints réutilisables (utilisées par les icônes ronds, avatars, badges) */
      --rouge-soft:  rgba(184,57,42,0.12);
      --teal-soft:   rgba(74,123,122,0.12);
      --sable-soft:  rgba(200,168,112,0.15);
      --sable-ink:   #8A6A40;

      /* Rayons */
      --r-sm:      12px;
      --r-md:      14px;
      --r-card:    16px;
      --r-page:    20px;
      --r-pill:    999px;

      /* Échelle d'empilement (z-index) */
      --z-back-top:  997;
      --z-call-bar:  998;
      --z-menu:      999;
      --z-nav:      1000;
      --z-overlay:  2000;
      --z-modal:    3000;

      /* Layout fluide — padding latéral = max(16px, gouttière qui centre 1180px) */
      --container: 1180px;
      --pad-x:     max(16px, calc((100vw - var(--container)) / 2));
      --pad-x-tight: max(14px, calc((100vw - var(--container)) / 2));

      /* Espacements fluides */
      --gap-xs:    clamp(6px, 1vw, 10px);
      --gap-sm:    clamp(8px, 1.4vw, 14px);
      --gap-md:    clamp(12px, 2vw, 20px);
      --gap-lg:    clamp(20px, 3vw, 32px);
      --section-py: clamp(56px, 7vw + 1rem, 104px);
      --section-py-hero: clamp(44px, 5vw + 0.5rem, 68px);

      /* Typographie fluide */
      --fs-body:    clamp(15px, 0.9rem + 0.2vw, 16px);
      --fs-small:   clamp(12.5px, 0.78rem + 0.1vw, 13.5px);
      --fs-h1-hero: clamp(2rem, 1.2rem + 4vw, 4rem);    /* 32 → 64 */
      --fs-h2:      clamp(1.5rem, 1.05rem + 1.8vw, 2.4rem); /* 24 → 38 */
      --fs-h2-cta:  clamp(1.65rem, 1.1rem + 2.2vw, 2.75rem); /* 26 → 44 */
      --fs-h3:      clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
      --fs-brand:   clamp(14px, 0.8rem + 0.8vw, 22px);
      --fs-tag:     clamp(10.5px, 0.62rem + 0.2vw, 12px);

      /* Touch targets minimum (WCAG / iOS / Material) */
      --tap:        48px;

      /* Motion */
      --t-fast:    150ms;
      --t-med:     250ms;
      --t-slow:    400ms;
      --easing:    cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    /* ── BASE ── */
    body {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: var(--fs-body);
      line-height: 1.65;
      color: var(--brun);
      background: var(--creme);
      overflow-x: hidden;
      /* iOS safe areas */
      padding-bottom: env(safe-area-inset-bottom);
    }

    .page {
      max-width: none;
      margin: 0;
      padding: 0;
      display: block;
    }

    /* Quand la barre d'appel mobile est visible, on évite qu'elle masque le contenu */
    @media (max-width: 899px) {
      body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    }

    /* ── BOUTONS (mobile-first, touch ≥48px) ── */
    .btn,
    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: var(--tap);
      padding: 12px 22px;
      font-family: var(--font-body);
      font-size: 0.92rem;
      font-weight: 700;
      border-radius: var(--r-pill);
      cursor: pointer;
      border: none;
      text-decoration: none;
      line-height: 1;
      transition: background var(--t-med) var(--easing),
                  color var(--t-med) var(--easing),
                  transform var(--t-fast) var(--easing),
                  opacity var(--t-fast);
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .btn:active,
    .nav-cta:active { transform: scale(0.97); }

    .btn-rouge  { background: var(--rouge); color: var(--blanc); }
    .btn-rouge:hover { background: var(--rouge-dk); }

    .btn-white  { background: var(--blanc); color: var(--rouge); }
    .btn-white:hover { background: var(--creme); }

    /* ── EN-TÊTE / NAV (mobile-first) ── */
    /* Lien d'évitement (skip link) : masqué, révélé au focus clavier */
    .skip-link {
      position: absolute;
      left: 8px;
      top: -60px;
      z-index: 5000;
      background: var(--rouge);
      color: var(--blanc);
      padding: 12px 18px;
      border-radius: 0 0 8px 8px;
      font-weight: 700;
      transition: top var(--t-fast) var(--easing);
    }
    .skip-link:focus { top: 0; }

    /* Le sticky est porté par <header> (conteneur = body) pour rester collant sur toute la page */
    .site-header {
      position: sticky;
      top: 0;
      z-index: var(--z-nav);
    }
    .site-nav {
      background: var(--blanc);
      border-bottom: 1px solid var(--border);
      padding: 12px var(--pad-x);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 64px;
      transition: padding var(--t-med) var(--easing), box-shadow var(--t-med);
    }
    .site-nav.is-scrolled {
      padding-top: 8px;
      padding-bottom: 8px;
      box-shadow: 0 4px 18px rgba(46,32,22,0.06);
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: var(--tap);
      flex: 1 1 auto;
      min-width: 0;
    }
    .nav-logo {
      height: clamp(32px, 4vw, 44px);
      width: auto;
      flex-shrink: 0;
    }
    .nav-brand-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      line-height: 1;
      min-width: 0;
    }
    .brand-main {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: clamp(5px, 0.8vw, 8px);
      line-height: 1;
    }
    .nav-brand .manoir,
    .nav-brand .capsante {
      font-family: var(--font-display);
      font-size: var(--fs-brand);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      line-height: 1;
    }
    .nav-brand .manoir   { color: var(--rouge); }
    .nav-brand .capsante { color: var(--teal); }
    .brand-tagline {
      display: inline-block; /* visible partout, mobile inclus */
      font-family: var(--font-body);
      font-size: clamp(8px, 0.5rem + 0.15vw, 9.5px);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--brun-md);
      font-weight: 700;
      line-height: 1;
      margin-top: 4px;
      text-align: center;
      align-self: center;
    }

    /* nav-links et nav-cta = cachés sur mobile, visibles ≥900px */
    .nav-links { display: none; }
    .nav-cta   { display: none; }
    .nav-social { display: none; }

    /* Icône social simple (Facebook) avec séparateur */
    .nav-social {
      align-items: center;
      justify-content: center;
      width: var(--tap);
      height: var(--tap);
      color: var(--brun-md);
      font-size: 20px;
      background: transparent;
      border: none;
      border-left: 1px solid var(--border);
      padding-left: 4px;
      transition: color var(--t-fast);
      text-decoration: none;
      flex-shrink: 0;
    }
    .nav-social:hover,
    .nav-social:focus-visible { color: var(--rouge); }

    /* HAMBURGER */
    .nav-toggle {
      /* Reste AU-DESSUS de l'overlay du menu mobile (z 999) pour que le X
         (hamburger transforme) soit visible ET cliquable quand le menu est ouvert. */
      position: relative;
      z-index: calc(var(--z-menu) + 1);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: var(--tap);
      height: var(--tap);
      background: transparent;
      border: none;
      padding: 0;
      flex-shrink: 0;
      border-radius: var(--r-sm);
      transition: background var(--t-fast);
    }
    .nav-toggle:hover { background: var(--creme-2); }
    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: var(--brun);
      border-radius: 2px;
      transition: transform var(--t-med) var(--easing),
                  opacity var(--t-fast),
                  width var(--t-fast);
    }
    .nav-toggle.is-open span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg);
    }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-open span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg);
    }

    /* ── MENU MOBILE OVERLAY ── */
    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: var(--z-menu);
      background: var(--creme);
      padding: calc(64px + env(safe-area-inset-top)) clamp(20px, 6vw, 40px)
               calc(40px + env(safe-area-inset-bottom));
      display: flex;
      flex-direction: column;
      gap: 24px;
      overflow-y: auto;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity var(--t-med) var(--easing),
                  transform var(--t-med) var(--easing);
    }
    .mobile-menu.is-open {
      opacity: 1;
      transform: translateY(0);
    }
    .mobile-menu[hidden] { display: none; }
    .mobile-menu-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 24px;
    }
    .mobile-menu-list a {
      display: flex;
      align-items: center;
      min-height: 56px;
      padding: 12px 16px;
      font-family: var(--font-display);
      font-size: clamp(22px, 5vw, 28px);
      font-weight: 500;
      color: var(--brun);
      border-bottom: 1px solid var(--border);
      transition: color var(--t-fast), padding-left var(--t-med) var(--easing);
    }
    .mobile-menu-list a:hover,
    .mobile-menu-list a.active {
      color: var(--rouge);
      padding-left: 22px;
    }
    .mobile-menu-cta {
      align-self: stretch;
      margin-top: 12px;
      padding: 16px 24px;
      font-size: 1rem;
    }
    .mobile-menu-social {
      text-align: center;
      margin-top: 4px;
    }
    .mobile-menu-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--brun-md);
      min-height: var(--tap);
      min-width: var(--tap);
      padding: 0 12px;
      transition: color var(--t-fast);
    }
    .mobile-menu-social a:hover,
    .mobile-menu-social a:focus-visible { color: var(--rouge); }
    .mobile-menu-social i { font-size: 22px; }
    .mobile-menu-social span { display: none; }

    /* ── BARRE D'APPEL STICKY MOBILE ── */
    .mobile-call-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: var(--z-call-bar);
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      background: var(--blanc);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 18px rgba(46,32,22,0.08);
      padding-bottom: env(safe-area-inset-bottom);
    }
    .mcb-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 56px;
      font-family: var(--font-body);
      font-size: 14.5px;
      font-weight: 700;
      text-decoration: none;
      transition: background var(--t-fast);
    }
    .mcb-btn i { font-size: 19px; }
    .mcb-visit {
      background: var(--rouge);
      color: var(--blanc);
    }
    .mcb-visit:hover { background: var(--rouge-dk); }

    /* Masquée sur desktop */
    @media (min-width: 900px) {
      .mobile-call-bar { display: none; }
    }

    /* ── BACK TO TOP BUTTON ── */
    .back-to-top {
      position: fixed;
      right: clamp(14px, 2vw, 28px);
      bottom: calc(72px + 14px + env(safe-area-inset-bottom)); /* au-dessus mobile-call-bar */
      z-index: var(--z-back-top);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--rouge);
      color: var(--blanc);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(184,57,42,0.35);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: opacity var(--t-med) var(--easing),
                  transform var(--t-med) var(--easing),
                  visibility var(--t-med),
                  background var(--t-fast);
    }
    .back-to-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .back-to-top:hover {
      background: var(--rouge-dk);
      transform: translateY(-4px);
    }
    .back-to-top:active {
      transform: translateY(0) scale(0.94);
    }

    /* Sur desktop : plus de mobile-call-bar, le bouton se cale en bas */
    @media (min-width: 900px) {
      .back-to-top {
        bottom: clamp(20px, 2.5vw, 32px);
      }
    }

    /* ── HERO (mobile-first) ── */
    .hero {
      background: var(--rouge);
      padding: var(--section-py-hero) var(--pad-x);
      position: relative;
      overflow: hidden;
      color: var(--blanc);
    }

    .hero-circle-1,
    .hero-circle-2,
    .hero-circle-3 {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-circle-1 {
      top: -90px; right: -90px;
      width: clamp(200px, 30vw, 380px);
      height: clamp(200px, 30vw, 380px);
      background: rgba(255,255,255,0.07);
    }
    .hero-circle-2 {
      bottom: -90px;
      right: 18%;
      width: clamp(140px, 20vw, 240px);
      height: clamp(140px, 20vw, 240px);
      background: rgba(255,255,255,0.05);
    }
    .hero-circle-3 {
      top: 35%; left: -30px;
      width: clamp(80px, 12vw, 120px);
      height: clamp(80px, 12vw, 120px);
      background: rgba(255,255,255,0.04);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,0.16);
      color: var(--rouge-lt);
      border-radius: var(--r-pill);
      padding: 7px 14px;
      font-size: clamp(11px, 0.6rem + 0.2vw, 13px);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: clamp(14px, 2vw, 20px);
      position: relative;
      z-index: 2;
      text-decoration: none;
      width: fit-content;
      justify-self: start;
      transition: background var(--t-fast), color var(--t-fast);
    }
    a.hero-badge:hover,
    a.hero-badge:focus-visible {
      background: rgba(255,255,255,0.26);
      color: var(--blanc);
    }

    .hero h1 {
      font-family: var(--font-display);
      font-size: var(--fs-h1-hero);
      font-weight: 500;
      color: var(--blanc);
      line-height: 1.05;
      letter-spacing: -0.01em;
      margin-bottom: clamp(14px, 1.5vw, 20px);
      max-width: 26ch;
      position: relative;
      z-index: 2;
    }
    .hero h1 em {
      font-style: italic;
      font-weight: 400;
      color: var(--rouge-lt);
    }
    .hero h1 .hero-kw {
      display: block;
      font-family: var(--font-body);
      font-size: clamp(15px, 0.8rem + 0.5vw, 20px);
      font-weight: 600;
      font-style: normal;
      color: rgba(255,255,255,0.9);
      line-height: 1.3;
      letter-spacing: 0;
      margin-top: clamp(12px, 1.4vw, 18px);
    }

    .hero-sub {
      font-size: clamp(15px, 0.9rem + 0.2vw, 16.5px);
      color: rgba(255,255,255,0.85);
      line-height: 1.6;
      max-width: 50ch;
      margin-bottom: clamp(18px, 2.2vw, 26px);
      font-weight: 400;
      position: relative;
      z-index: 2;
    }

    .hero-ctas {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      position: relative;
      z-index: 2;
    }
    .hero-ctas .btn { width: 100%; }

    /* Stats : mobile = grille flex flexible */
    .hero-stats {
      position: static;
      transform: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: clamp(20px, 2.5vw, 28px);
      position: relative;
      z-index: 2;
    }
    .stat-pill {
      flex: 1 1 calc(33.333% - 7px);
      min-width: 92px;
      background: rgba(255,255,255,0.14);
      border: 1.5px solid rgba(255,255,255,0.18);
      border-radius: var(--r-md);
      padding: 14px 12px;
      text-align: center;
    }
    .stat-pill .n {
      font-family: var(--font-display);
      font-size: clamp(22px, 1.2rem + 1vw, 32px);
      font-weight: 500;
      color: var(--blanc);
      line-height: 1;
      letter-spacing: -0.01em;
      font-variant-numeric: lining-nums tabular-nums;
      font-feature-settings: "lnum" 1, "tnum" 1;
    }
    .stat-pill .l {
      font-size: clamp(9.5px, 0.6rem + 0.1vw, 11px);
      color: rgba(255,255,255,0.75);
      margin-top: 4px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── HERO VISUAL (blob photo + dots) — visible partout ── */
    .hero-visual {
      position: relative;
      width: 100%;
      max-width: 380px; /* léger ajustement pour le ratio plus large */
      aspect-ratio: 1.25 / 1; /* plus large que haut → voit tout le monde */
      margin: clamp(28px, 5vw, 44px) auto 0;
      z-index: 2;
    }

    .hero-visual-blob {
      position: relative;
      width: 100%;
      height: 100%;
      max-width: none;
      aspect-ratio: auto;
      /* Forme organique blob via border-radius asymétrique */
      border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%;
      overflow: hidden;
      box-shadow: 0 30px 60px rgba(46,32,22,0.32);
      z-index: 2;
      animation: blob-morph 14s ease-in-out infinite alternate;
    }
    .hero-visual-blob picture { display: block; width: 100%; height: 100%; }
    .hero-visual-blob img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 55%; /* centre + léger biais vers le bas pour montrer le bâtiment */
      display: block;
    }

    /* Anneau organique derrière l'image */
    .hero-visual-ring {
      position: absolute;
      inset: -18px -22px -10px -14px;
      border: 2px dashed rgba(255,255,255,0.45);
      border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%;
      pointer-events: none;
      z-index: 1;
      animation: blob-morph-reverse 18s ease-in-out infinite alternate;
    }

    /* Pattern de petits dots autour */
    .hero-visual-dots {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(255,212,200,0.45) 2.5px, transparent 3px);
      background-size: 22px 22px;
      mask-image: radial-gradient(ellipse at center, transparent 38%, #000 75%, transparent 95%);
      -webkit-mask-image: radial-gradient(ellipse at center, transparent 38%, #000 75%, transparent 95%);
      pointer-events: none;
      z-index: 0;
    }

    @keyframes blob-morph {
      0%   { border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; }
      50%  { border-radius: 45% 55% 38% 62% / 60% 40% 60% 40%; }
      100% { border-radius: 55% 45% 65% 35% / 40% 55% 45% 60%; }
    }
    @keyframes blob-morph-reverse {
      0%   { border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; }
      50%  { border-radius: 50% 50% 60% 40% / 55% 45% 55% 45%; }
      100% { border-radius: 55% 45% 65% 35% / 40% 55% 45% 60%; }
    }

    /* ── SECTION WRAPPER ── */
    .section {
      background: var(--blanc);
      padding: var(--section-py) var(--pad-x);
    }
    .section--alt { background: var(--creme); }

    .section-label {
      font-size: var(--fs-tag);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--teal);
      font-weight: 700;
      margin-bottom: 8px;
    }

    .section-title {
      font-family: var(--font-display);
      font-size: var(--fs-h2);
      font-weight: 500;
      color: var(--brun);
      margin-bottom: clamp(24px, 3vw, 40px);
      line-height: 1.18;
      letter-spacing: -0.005em;
      max-width: 24ch;
    }

    /* ── SOINS (auto-fit fluid) ── */
    .soins-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: var(--gap-md);
    }

    .soin-card {
      background: var(--blanc);
      border-radius: var(--r-card);
      padding: clamp(20px, 2.5vw, 28px);
      border: 1.5px solid var(--border);
      transition: border-color var(--t-med),
                  box-shadow var(--t-med),
                  transform var(--t-med) var(--easing);
    }
    .soin-card:hover {
      border-color: rgba(184,57,42,0.3);
      box-shadow: 0 10px 30px rgba(184,57,42,0.08);
      transform: translateY(-4px);
    }
    .soin-card.pop {
      border-color: var(--teal);
      background: var(--teal-lt);
    }
    .soin-card.pop:hover {
      border-color: var(--teal);
      box-shadow: 0 10px 30px rgba(74,123,122,0.14);
    }
    .section--alt .soin-card { background: var(--blanc); }
    .section--alt .soin-card.pop { background: var(--teal-lt); }

    .pop-tag {
      display: inline-block;
      background: var(--teal);
      color: var(--blanc);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: var(--r-pill);
      margin-bottom: 14px;
    }
    .soin-icon {
      width: 52px; height: 52px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin-bottom: 18px;
    }
    .tint-teal   { background: var(--teal-soft);  color: var(--teal); }
    .tint-rouge  { background: var(--rouge-soft); color: var(--rouge); }
    .tint-sable  { background: var(--sable-soft); color: var(--sable-ink); }
    .soin-card h3 {
      font-family: var(--font-body);
      font-size: var(--fs-h3);
      font-weight: 700;
      color: var(--brun);
      margin-bottom: 8px;
    }
    .soin-card > p {
      font-size: clamp(13px, 0.78rem + 0.1vw, 14px);
      color: var(--brun-md);
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .soin-list li {
      font-size: 13px;
      color: var(--brun-md);
      padding: 7px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
    }
    .soin-list li:last-child { border-bottom: none; }
    .soin-list li i { color: var(--teal); font-size: 15px; flex-shrink: 0; }

    /* ── SERVICES (liste calme, pas de cartes — rompt le rythme avec les soins) ── */
    .services-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      border-top: 1px solid var(--border);
    }
    .svc-item {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 4px;
      border-bottom: 1px solid var(--border);
      transition: padding-left var(--t-med) var(--easing),
                  color var(--t-fast);
    }
    .svc-item:hover { padding-left: 10px; }
    .svc-item:hover .svc-text p { color: var(--rouge); }
    .svc-icon {
      width: 44px; height: 44px;
      background: var(--rouge-soft);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--rouge);
      font-size: 20px;
      transition: background var(--t-fast);
    }
    .svc-item:nth-child(even) .svc-icon {
      background: var(--teal-soft);
      color: var(--teal);
    }
    .svc-item:hover .svc-icon { background: var(--rouge); color: var(--blanc); }
    .svc-item:nth-child(even):hover .svc-icon { background: var(--teal); color: var(--blanc); }
    .svc-text p {
      font-size: clamp(14.5px, 0.88rem + 0.15vw, 15.5px);
      font-weight: 700;
      color: var(--brun);
      margin-bottom: 2px;
      transition: color var(--t-fast);
    }
    .svc-text span {
      font-size: clamp(12.5px, 0.78rem + 0.05vw, 13px);
      color: var(--brun-lt);
      line-height: 1.5;
    }

    /* ── DOCS TÉLÉCHARGEABLES (sous Services) ── */
    .services-docs {
      margin-top: clamp(36px, 4vw, 56px);
      padding-top: clamp(28px, 3vw, 40px);
      border-top: 1px solid var(--border);
    }
    .services-docs h3 {
      font-family: var(--font-display);
      font-size: clamp(18px, 1.05rem + 0.3vw, 21px);
      font-weight: 500;
      color: var(--brun);
      margin-bottom: clamp(16px, 2vw, 22px);
      letter-spacing: 0.005em;
    }
    .docs-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .doc-card {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 22px;
      background: var(--blanc);
      border: 1.5px solid var(--border);
      border-radius: var(--r-card);
      text-decoration: none;
      transition: border-color var(--t-med),
                  transform var(--t-med) var(--easing),
                  box-shadow var(--t-med);
    }
    .doc-card:hover,
    .doc-card:focus-visible {
      border-color: rgba(74,123,122,0.45);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(46,32,22,0.08);
    }
    .section--alt .doc-card { background: var(--blanc); }
    .doc-icon {
      width: 52px;
      height: 52px;
      border-radius: var(--r-md);
      background: var(--teal-soft);
      color: var(--teal);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      flex-shrink: 0;
    }
    .doc-card:nth-child(even) .doc-icon {
      background: var(--rouge-soft);
      color: var(--rouge);
    }
    .doc-info {
      flex: 1 1 auto;
      min-width: 0;
    }
    .doc-info strong {
      font-family: var(--font-body);
      font-size: clamp(14.5px, 0.88rem + 0.15vw, 15.5px);
      font-weight: 700;
      color: var(--brun);
      display: block;
      margin-bottom: 3px;
    }
    .doc-info span {
      font-size: 12.5px;
      color: var(--brun-lt);
      display: block;
      letter-spacing: 0.02em;
    }
    .doc-arrow {
      font-size: 22px;
      color: var(--brun-lt);
      flex-shrink: 0;
      transition: color var(--t-fast), transform var(--t-fast) var(--easing);
    }
    .doc-card:hover .doc-arrow,
    .doc-card:focus-visible .doc-arrow {
      color: var(--teal);
      transform: translateY(2px);
    }
    .doc-card:nth-child(even):hover .doc-arrow,
    .doc-card:nth-child(even):focus-visible .doc-arrow {
      color: var(--rouge);
    }

    @media (min-width: 768px) {
      .docs-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ── RÉGION ── */
    .region-band {
      background: var(--teal);
      padding: var(--section-py) var(--pad-x);
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(28px, 4vw, 48px);
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .region-band::before,
    .region-band::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .region-band::before {
      width: clamp(180px, 25vw, 320px);
      height: clamp(180px, 25vw, 320px);
      top: -90px; right: -90px;
      background: rgba(255,255,255,0.06);
    }
    .region-band::after {
      width: clamp(140px, 18vw, 220px);
      height: clamp(140px, 18vw, 220px);
      bottom: -80px; left: -40px;
      background: rgba(255,255,255,0.04);
    }
    .region-band > * { position: relative; z-index: 2; }
    .region-band .section-label { color: rgba(255,255,255,0.72); }
    .region-band .section-title { color: var(--blanc); margin-bottom: 18px; }
    .region-band > div > p {
      font-size: clamp(14px, 0.85rem + 0.2vw, 15.5px);
      color: rgba(255,255,255,0.85);
      line-height: 1.7;
      max-width: 50ch;
    }
    /* ── GALERIE PHOTOS RÉGION (1 main + 3 thumbs) ── */
    .region-visual {
      position: relative;
      width: 100%;
    }
    .region-gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* mobile : vignettes lisibles + cibles tactiles correctes */
      gap: 8px;
    }
    .gallery-item {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-card);
      box-shadow: 0 12px 28px rgba(46,32,22,0.25);
      margin: 0;
      background: var(--teal-lt);
      aspect-ratio: 1;
      cursor: pointer;
    }
    .gallery-item-main {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--t-slow) var(--easing);
    }
    .gallery-item:hover img,
    .gallery-item:focus-visible img { transform: scale(1.06); }
    .gallery-item figcaption {
      position: absolute;
      left: 10px;
      bottom: 10px;
      background: rgba(46,32,22,0.78);
      color: var(--blanc);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 10px;
      border-radius: var(--r-pill);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity var(--t-fast), transform var(--t-fast) var(--easing);
    }
    .gallery-item:hover figcaption,
    .gallery-item:focus-visible figcaption {
      opacity: 1;
      transform: translateY(0);
    }
    /* ── PERSONNEL PRÉSENT (tableau complet — Annexe 19 section 6.6.2) ── */
    .region-staff {
      grid-column: 1 / -1;
      margin-top: clamp(22px, 2.8vw, 36px);
      padding-top: clamp(18px, 2.2vw, 28px);
      border-top: 1px solid rgba(255,255,255,0.18);
      position: relative;
      z-index: 2;
    }
    .staff-header {
      text-align: center;
      max-width: 56ch;
      margin: 0 auto clamp(14px, 1.8vw, 22px);
    }
    .region-staff h3 {
      font-family: var(--font-display);
      font-size: clamp(17px, 1rem + 0.3vw, 21px);
      font-weight: 400;
      font-style: italic;
      color: var(--blanc);
      margin: 0 auto 6px;
      line-height: 1.25;
      letter-spacing: -0.005em;
    }
    .staff-header > p {
      font-size: 12.5px;
      color: rgba(255,255,255,0.75);
      line-height: 1.5;
      max-width: 52ch;
      margin: 0 auto;
    }

    .staff-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .staff-period-block {
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.20);
      border-radius: var(--r-card);
      padding: clamp(12px, 1.5vw, 16px) clamp(14px, 1.6vw, 18px);
    }
    .staff-period-title {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 500;
      color: var(--blanc);
      margin-bottom: 8px;
      text-align: center;
      letter-spacing: -0.005em;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    .staff-period-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }
    .staff-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2px 4px;
      text-align: center;
    }
    .staff-cell i {
      font-size: 18px;
      color: var(--rouge-lt);
      margin-bottom: 4px;
    }
    .staff-cell strong {
      font-family: var(--font-body);
      font-size: clamp(22px, 1.4rem + 0.5vw, 28px);
      font-weight: 700;
      color: var(--blanc);
      line-height: 1;
      letter-spacing: -0.01em;
      margin-bottom: 2px;
      font-variant-numeric: lining-nums tabular-nums;
      font-feature-settings: "lnum" 1, "tnum" 1;
    }
    .staff-cell span {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.65);
    }

    .staff-footnotes {
      margin: clamp(12px, 1.6vw, 18px) auto 0;
      max-width: 64ch;
      list-style: none;
      padding: 0;
    }
    .staff-footnotes li {
      font-size: 11.5px;
      color: rgba(255,255,255,0.55);
      line-height: 1.55;
      letter-spacing: 0.005em;
      padding-left: 14px;
      position: relative;
      margin-bottom: 4px;
    }
    .staff-footnotes li::before {
      content: "—";
      position: absolute;
      left: 0;
      color: rgba(255,255,255,0.4);
    }
    .staff-footnotes li:last-child { margin-bottom: 0; }

    .staff-doc-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: clamp(14px, 1.6vw, 20px);
      padding: 10px 18px;
      background: rgba(255,255,255,0.08);
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: var(--r-pill);
      color: var(--blanc);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: background var(--t-fast),
                  border-color var(--t-fast),
                  transform var(--t-fast) var(--easing);
    }
    .staff-doc-link:hover,
    .staff-doc-link:focus-visible {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.55);
      transform: translateY(-1px);
    }
    .staff-doc-link i { font-size: 17px; }
    .staff-doc-link i:first-child { color: var(--rouge-lt); }
    .staff-doc-wrap {
      text-align: center;
      margin-top: 8px;
    }

    @media (min-width: 768px) {
      .staff-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ── EMPLOI / RECRUTEMENT ── */
    .emploi-section {
      background: var(--creme-2);
      padding: clamp(40px, 5vw, 64px) var(--pad-x);
    }
    .emploi-card {
      max-width: 760px;
      margin: 0 auto;
      background: var(--blanc);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      padding: clamp(28px, 4vw, 44px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
      box-shadow: 0 12px 32px rgba(46,32,22,0.08);
    }
    .emploi-icon {
      width: clamp(56px, 7vw, 68px);
      height: clamp(56px, 7vw, 68px);
      border-radius: 50%;
      background: var(--teal-soft);
      color: var(--teal);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(28px, 3vw, 34px);
      margin-bottom: 14px;
      flex-shrink: 0;
    }
    .emploi-content .section-label {
      text-align: center;
      margin-bottom: 8px;
    }
    .emploi-content .section-title {
      text-align: center;
      max-width: none;
      margin: 0 auto 14px;
    }
    .emploi-content > p {
      font-size: clamp(14px, 0.85rem + 0.2vw, 15.5px);
      color: var(--brun-md);
      line-height: 1.7;
      max-width: 56ch;
      margin: 0 auto 10px;
    }
    .emploi-content > p:last-of-type { margin-bottom: 0; }
    .emploi-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 24px;
    }

    /* ── CONTACT (tout compressé en une zone claire) ── */
    .contact-section {
      background: var(--creme);
      padding: var(--section-py) var(--pad-x);
    }
    .contact-header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto clamp(28px, 3.5vw, 44px);
    }
    .contact-header h2 {
      font-family: var(--font-display);
      font-size: var(--fs-h2);
      font-weight: 500;
      color: var(--brun);
      line-height: 1.15;
      letter-spacing: -0.005em;
      margin-bottom: 12px;
    }
    .contact-header h2 em {
      font-style: italic;
      font-weight: 400;
      color: var(--rouge);
    }
    .contact-header > p {
      font-size: clamp(14px, 0.85rem + 0.2vw, 15.5px);
      color: var(--brun-md);
      line-height: 1.7;
      max-width: 52ch;
      margin: 0 auto;
    }

    /* Actions rapides : 3 cartons (Appeler / Écrire / Brochure) sur une ligne */
    .contact-quick-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 4px;
    }
    .quick-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 10px;
      background: var(--blanc);
      border: 1.5px solid var(--border);
      border-radius: var(--r-card);
      cursor: pointer;
      text-decoration: none;
      font-family: var(--font-body);
      min-height: 88px;
      transition: border-color var(--t-fast),
                  background var(--t-fast),
                  transform var(--t-med) var(--easing),
                  box-shadow var(--t-med);
    }
    .quick-action:hover,
    .quick-action:focus-visible {
      border-color: rgba(184,57,42,0.35);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(184,57,42,0.08);
    }
    .quick-action i {
      font-size: 22px;
      color: var(--rouge);
      transition: color var(--t-fast);
    }
    .quick-action:nth-child(2) i { color: var(--teal); }
    .quick-action:nth-child(2):hover { border-color: rgba(74,123,122,0.4); box-shadow: 0 8px 20px rgba(74,123,122,0.10); }
    .quick-action span {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--brun);
      letter-spacing: 0.02em;
      text-align: center;
    }
    .quick-action-email span {
      font-size: 11.5px;
      letter-spacing: 0;
      word-break: break-all;
      line-height: 1.3;
    }
    /* Bandeau horizontal pleine largeur quand il ne reste qu'un seul carton
       (ex. brochure cachée). S'annule tout seul dès qu'un 2e bouton revient. */
    .contact-quick-row:has(.quick-action:only-child) {
      grid-template-columns: 1fr;
    }
    .quick-action:only-child {
      flex-direction: row;
      min-height: 64px;
      padding: 14px 18px;
      gap: 14px;
    }
    .quick-action:only-child i {
      font-size: 26px;
    }
    .quick-action-email:only-child span {
      font-size: 15px;
      word-break: normal;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(20px, 3vw, 32px);
      max-width: var(--container);
      margin: 0 auto;
    }

    /* Colonne infos */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .contact-address-card {
      display: block;
      background: var(--blanc);
      border-radius: var(--r-card);
      border: 1px solid var(--border);
      overflow: hidden;
      text-align: center;
      box-shadow: 0 10px 28px rgba(46,32,22,0.10);
    }
    .contact-address-map {
      aspect-ratio: 4 / 3;
      background: var(--teal-lt);
      position: relative;
      overflow: hidden;
    }
    .contact-address-map iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      filter: grayscale(0.45) saturate(0.7) brightness(0.98);
      transition: filter var(--t-slow) var(--easing);
    }
    .contact-address-map:hover iframe,
    .contact-address-map:focus-within iframe { filter: none; }

    /* Adresse en bandeau teal — ligne unique cliquable */
    .contact-address-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 18px;
      background: var(--teal);
      color: var(--blanc);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: clamp(12.5px, 0.78rem + 0.15vw, 14px);
      font-weight: 700;
      letter-spacing: 0.02em;
      text-align: center;
      min-height: var(--tap);
      transition: background var(--t-fast), padding var(--t-fast) var(--easing);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .contact-address-button:hover,
    .contact-address-button:focus-visible {
      background: var(--teal-dk);
    }
    .contact-address-button .pin {
      font-size: 16px;
      flex-shrink: 0;
    }
    .contact-address-button .arrow {
      font-size: 14px;
      flex-shrink: 0;
      transition: transform var(--t-fast) var(--easing);
    }
    .contact-address-button:hover .arrow,
    .contact-address-button:focus-visible .arrow {
      transform: translateX(3px);
    }
    .contact-address-button .addr-text {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Colonne formulaire */
    .contact-form {
      background: var(--blanc);
      border-radius: var(--r-card);
      padding: clamp(24px, 3vw, 36px);
      box-shadow: 0 14px 36px rgba(46,32,22,0.10);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .contact-form h3 {
      font-family: var(--font-display);
      font-size: clamp(20px, 1.1rem + 0.5vw, 24px);
      font-weight: 500;
      color: var(--brun);
      margin-bottom: 4px;
      letter-spacing: 0.005em;
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .field label {
      font-size: 13px;
      font-weight: 700;
      color: var(--brun);
      letter-spacing: 0.02em;
    }
    .field input,
    .field textarea {
      font-family: var(--font-body);
      font-size: 14.5px;
      color: var(--brun);
      background: var(--creme);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      width: 100%;
      min-height: var(--tap);
      transition: border-color var(--t-fast), background var(--t-fast);
    }
    .field textarea {
      resize: vertical;
      min-height: 130px;
      line-height: 1.6;
    }
    .field input::placeholder,
    .field textarea::placeholder {
      color: var(--brun-lt);
    }
    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: var(--rouge);
      background: var(--blanc);
    }
    /* Anneau de focus net au clavier (a11y : ne pas masquer l'outline) */
    .field input:focus-visible,
    .field textarea:focus-visible,
    .field select:focus-visible {
      outline: 3px solid var(--rouge);
      outline-offset: 1px;
    }
    /* Select stylé comme les inputs */
    .field select {
      font-family: var(--font-body);
      font-size: 14.5px;
      color: var(--brun);
      background: var(--creme);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 12px 40px 12px 14px;
      width: 100%;
      min-height: var(--tap);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A6050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      transition: border-color var(--t-fast), background-color var(--t-fast);
    }
    .field select:invalid { color: var(--brun-lt); }
    /* Champ fichier (CV) */
    .field input[type="file"] {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--brun-md);
      background: var(--creme);
      border: 1.5px dashed var(--border);
      border-radius: var(--r-sm);
      padding: 12px 14px;
      width: 100%;
      cursor: pointer;
    }
    .field input[type="file"]::file-selector-button {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--blanc);
      background: var(--teal);
      border: none;
      border-radius: var(--r-pill);
      padding: 8px 14px;
      margin-right: 12px;
      cursor: pointer;
      transition: background var(--t-fast);
    }
    .field input[type="file"]::file-selector-button:hover { background: var(--teal-dk); }
    .field input[type="file"]:focus {
      outline: none;
      border-color: var(--teal);
      border-style: solid;
    }
    .field-hint {
      font-size: 11.5px;
      color: var(--brun-lt);
      margin-top: 2px;
    }
    .field-cv[hidden] { display: none; }
    .contact-submit {
      margin-top: 6px;
      width: 100%;
      padding: 16px 22px;
      font-size: 15px;
    }
    .contact-submit[disabled] {
      opacity: 0.7;
      cursor: wait;
    }

    /* État de succès après envoi (caché par défaut via attribut hidden) */
    .contact-form-success[hidden] { display: none !important; }
    .contact-form-success {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      padding: clamp(20px, 3vw, 28px);
      background: var(--teal-soft);
      border: 1.5px solid var(--teal);
      border-radius: var(--r-card);
      animation: success-fade-in var(--t-med) var(--easing);
    }
    .contact-form-success i {
      font-size: 38px;
      color: var(--teal);
      margin-bottom: 4px;
    }
    .contact-form-success strong {
      font-family: var(--font-display);
      font-size: clamp(17px, 1rem + 0.3vw, 19px);
      font-weight: 500;
      color: var(--brun);
      letter-spacing: 0.005em;
    }
    .contact-form-success span {
      font-size: 13.5px;
      color: var(--brun-md);
      line-height: 1.55;
      max-width: 36ch;
    }
    /* Message d'erreur d'envoi (formulaires contact + modale) */
    .form-error[hidden] { display: none !important; }
    .form-error {
      margin-top: 10px;
      padding: 11px 14px;
      background: var(--rouge-soft);
      border: 1.5px solid var(--rouge);
      border-radius: var(--r-md);
      color: var(--brun);
      font-size: 13.5px;
      line-height: 1.5;
      text-align: center;
    }
    .form-error a { color: var(--rouge); font-weight: 700; text-decoration: underline; }
    /* Bandeau de consentement aux témoins (cookies) */
    .cookie-consent[hidden] { display: none !important; }
    .cookie-consent {
      position: fixed;
      left: 12px; right: 12px;
      bottom: calc(12px + env(safe-area-inset-bottom));
      z-index: var(--z-overlay);
      max-width: 720px;
      margin: 0 auto;
      background: var(--blanc);
      border: 1px solid var(--border);
      border-radius: var(--r-card);
      box-shadow: 0 10px 34px rgba(0,0,0,0.18);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .cookie-text { font-size: 13px; line-height: 1.5; color: var(--brun-md); }
    .cookie-text a { color: var(--rouge); font-weight: 700; text-decoration: underline; }
    .cookie-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .cookie-btn {
      padding: 9px 18px;
      min-height: var(--tap);
      border-radius: var(--r-pill);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13.5px;
      cursor: pointer;
      border: 1.5px solid var(--border);
      background: var(--blanc);
      color: var(--brun);
      transition: background var(--t-fast), border-color var(--t-fast);
    }
    .cookie-refuse:hover { background: var(--creme-2); }
    .cookie-accept { background: var(--rouge); border-color: var(--rouge); color: #fff; }
    .cookie-accept:hover { background: var(--rouge-fonce, #9c2f22); }
    @media (min-width: 640px) {
      .cookie-consent { flex-direction: row; align-items: center; }
      .cookie-text { flex: 1; }
      .cookie-actions { flex-shrink: 0; }
    }
    @keyframes success-fade-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Champs en erreur (validation) */
    .contact-form .field input:invalid:not(:placeholder-shown),
    .contact-form .field textarea:invalid:not(:placeholder-shown) {
      border-color: var(--rouge);
      background: rgba(184,57,42,0.04);
    }

    /* Desktop : 2 colonnes */
    @media (min-width: 900px) {
      .contact-grid {
        grid-template-columns: 0.85fr 1fr;
        gap: clamp(28px, 3vw, 40px);
        align-items: start;
      }
      .form-row { grid-template-columns: 1fr 1fr; }
    }

    /* ── MODAL « Planifier une visite » ── */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 4vw, 32px);
      overflow-y: auto;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--t-med);
    }
    .modal.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    .modal[hidden] { display: none; }
    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(46,32,22,0.55);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .modal-content {
      position: relative;
      background: var(--blanc);
      border-radius: var(--r-page);
      max-width: 480px;
      width: 100%;
      margin: auto;
      padding: clamp(28px, 4vw, 40px) clamp(22px, 3.5vw, 34px);
      box-shadow: 0 24px 64px rgba(46,32,22,0.32);
      transform: translateY(20px) scale(0.96);
      transition: transform var(--t-med) var(--easing);
    }
    .modal.is-open .modal-content { transform: translateY(0) scale(1); }
    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: var(--creme);
      color: var(--brun);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      transition: background var(--t-fast), color var(--t-fast);
    }
    .modal-close:hover,
    .modal-close:focus-visible { background: var(--rouge); color: var(--blanc); }
    .modal-header {
      margin-bottom: 22px;
      padding-right: 44px;
    }
    .modal-header h3 {
      font-family: var(--font-display);
      font-size: clamp(20px, 1.2rem + 0.4vw, 24px);
      font-weight: 500;
      color: var(--teal);
      margin-bottom: 8px;
      letter-spacing: 0.005em;
      line-height: 1.2;
    }
    .modal-header p {
      font-size: 13.5px;
      color: var(--brun-md);
      line-height: 1.6;
    }
    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    /* display:flex prime sur l'attribut [hidden] : on force le masquage après envoi réussi */
    .modal-form[hidden] { display: none !important; }
    .modal-form .field-group {
      border: none;
      padding: 0;
      margin: 0;
    }
    .modal-form .field-group legend,
    .modal-form .field label {
      font-size: 13px;
      font-weight: 700;
      color: var(--teal);
      letter-spacing: 0.02em;
      margin-bottom: 8px;
      padding: 0;
    }
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .radio-pill {
      flex: 1 1 0;
      min-width: 100px;
      cursor: pointer;
      position: relative;
    }
    .radio-pill input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .radio-pill span {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      min-height: 44px;
      background: var(--creme);
      border: 1.5px solid var(--border);
      border-radius: var(--r-pill);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--brun-md);
      text-align: center;
      transition: background var(--t-fast),
                  border-color var(--t-fast),
                  color var(--t-fast);
    }
    .radio-pill:hover span { border-color: var(--rouge); color: var(--rouge); }
    .radio-pill input:checked + span {
      background: var(--rouge);
      border-color: var(--rouge);
      color: var(--blanc);
    }
    .radio-pill input:focus-visible + span {
      outline: 3px solid var(--rouge);
      outline-offset: 2px;
    }
    .modal-submit {
      margin-top: 6px;
      width: 100%;
      padding: 16px 22px;
      font-size: 15px;
    }
    .modal-fineprint {
      font-size: 12px;
      color: var(--brun-lt);
      text-align: center;
      line-height: 1.6;
      margin: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .modal,
      .modal-content { transition: none; }
    }

    /* ── LIGHTBOX GALERIE ── */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--t-med);
    }
    .lightbox.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    .lightbox[hidden] { display: none; }
    .lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(46,32,22,0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
      position: absolute;
      z-index: 5;
      background: rgba(255,255,255,0.10);
      color: var(--blanc);
      border: 1.5px solid rgba(255,255,255,0.28);
      border-radius: 50%;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      cursor: pointer;
      transition: background var(--t-fast),
                  border-color var(--t-fast),
                  transform var(--t-fast) var(--easing);
    }
    .lightbox-close:hover,
    .lightbox-close:focus-visible {
      background: var(--rouge);
      border-color: var(--rouge);
      transform: scale(1.08);
    }
    .lightbox-close {
      top: 18px;
      right: 18px;
    }
    .lightbox-prev {
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
    }
    .lightbox-next {
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
    }
    .lightbox-prev:hover,
    .lightbox-prev:focus-visible,
    .lightbox-next:hover,
    .lightbox-next:focus-visible {
      background: rgba(255,255,255,0.22);
      border-color: rgba(255,255,255,0.55);
      transform: translateY(-50%) scale(1.08);
    }
    .lightbox-content {
      position: relative;
      z-index: 3;
      max-width: 92vw;
      max-height: 86vh;
      margin: 0;
      padding: 0 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform var(--t-med) var(--easing);
    }
    .lightbox-img {
      max-width: 100%;
      max-height: 78vh;
      border-radius: var(--r-card);
      box-shadow: 0 24px 64px rgba(0,0,0,0.55);
      background: #1a1410;
      display: block;
    }
    .lightbox-caption {
      margin-top: 16px;
      color: var(--blanc);
      font-family: var(--font-display);
      font-size: 16px;
      font-style: italic;
      text-align: center;
      letter-spacing: 0.005em;
      opacity: 0.95;
    }
    .lightbox-counter {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      color: rgba(255,255,255,0.6);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .lightbox-counter strong {
      color: var(--blanc);
      font-weight: 700;
    }

    @media (max-width: 768px) {
      .lightbox-prev, .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 18px;
      }
      .lightbox-prev { left: 8px; }
      .lightbox-next { right: 8px; }
      .lightbox-content { padding: 0 56px; }
      .lightbox-close { top: 12px; right: 12px; }
    }

    /* Clavier focus sur les vignettes galerie */
    .gallery-item:focus-visible {
      outline: 3px solid var(--rouge);
      outline-offset: 4px;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--brun);
      padding: clamp(36px, 4.5vw, 52px) var(--pad-x) 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(20px, 2.5vw, 32px);
      color: rgba(255,255,255,0.65);
    }
    .footer-brand .manoir {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 500;
      color: var(--blanc);
      letter-spacing: 0.02em;
      display: block;
      margin-bottom: 2px;
    }
    .footer-brand .capsante {
      font-size: 9.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--rouge-lt);
      font-weight: 700;
      display: block;
      margin-bottom: 10px;
    }
    .footer-brand p {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      line-height: 1.55;
      max-width: 50ch;
    }
    .footer-col h4 {
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--blanc);
      font-weight: 700;
      margin-bottom: 10px;
    }
    .footer-col li { margin-bottom: 0; }
    .footer-col a {
      font-size: 13.5px;
      color: rgba(255,255,255,0.6);
      font-weight: 500;
      transition: color var(--t-fast);
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      padding: 2px 0;
      line-height: 1.45;
    }
    .footer-col a:hover { color: var(--rouge-lt); }
    .footer-bottom {
      grid-column: 1 / -1;
      border-top: 1px solid rgba(255,255,255,0.10);
      margin-top: 6px;
      padding: 14px 0 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: center;
      justify-content: space-between;
      align-items: center;
      font-size: 11.5px;
      color: rgba(255,255,255,0.5);
    }
    .footer-bottom .cert { color: var(--rouge-lt); font-weight: 700; }

    /* ============================================
       MEDIA QUERIES — min-width (mobile-first)
       ============================================ */

    /* ≥ 640px : petit tablette portrait */
    @media (min-width: 640px) {
      footer { gap: 36px; }
    }

    /* ≥ 768px : grandes tablettes */
    @media (min-width: 768px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: clamp(24px, 3vw, 48px);
      }
      .services-grid .svc-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
      .services-grid .svc-item:last-child,
      .services-grid .svc-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
      .region-gallery { grid-template-columns: repeat(5, 1fr); }
      footer {
        grid-template-columns: 1.6fr 1fr 1fr;
        gap: 40px;
      }
      .footer-bottom {
        flex-direction: row;
        text-align: left;
      }
    }

    /* ≥ 900px : desktop / nav complète */
    @media (min-width: 900px) {
      /* NAV desktop */
      .nav-toggle { display: none; }
      .nav-links {
        display: flex;
        gap: clamp(12px, 1.5vw, 22px);
      }
      .nav-links a {
        font-size: 14px;
        font-weight: 500;
        color: var(--brun-md);
        min-height: var(--tap);
        display: flex;
        align-items: center;
        padding: 0 2px;
        white-space: nowrap;
        transition: color var(--t-fast);
        position: relative;
      }
      .nav-links a::after {
        content: "";
        position: absolute;
        bottom: 8px;
        left: 4px; right: 4px;
        height: 2px;
        background: var(--rouge);
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--t-med) var(--easing);
      }
      .nav-links a:hover,
      .nav-links a.active { color: var(--rouge); }
      .nav-links a:hover::after,
      .nav-links a.active::after { transform: scaleX(1); }

      .nav-social {
        display: inline-flex;
        width: 38px;
        margin-left: clamp(4px, 0.7vw, 10px);
      }
      .nav-cta {
        display: inline-flex;
        background: var(--rouge);
        color: var(--blanc);
        padding: 10px 18px;
        min-height: 42px;
        font-size: 13.5px;
        white-space: nowrap;
        margin-left: clamp(8px, 1vw, 14px);
      }
      .nav-cta:hover { background: var(--rouge-dk); }

      /* Pas de mobile-menu sur desktop, au cas où JS planté */
      .mobile-menu { display: none !important; }
    }

    /* ≥ 1024px : layouts plus larges */
    @media (min-width: 1024px) {
      .services-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(28px, 3vw, 56px);
      }
      .services-grid .svc-item:nth-last-child(-n+3) { border-bottom: none; }
      .region-band {
        grid-template-columns: 1fr auto;
        gap: 48px;
      }
      .region-visual { width: clamp(360px, 42vw, 520px); min-width: 360px; }

      .hero-ctas { flex-direction: row; align-items: center; }
      .hero-ctas .btn { width: auto; }

      .section-title { margin-bottom: 36px; }
    }

    /* ≥ 1024px : hero passe en 2 colonnes (texte | visuel) */
    @media (min-width: 1024px) {
      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        column-gap: clamp(32px, 4vw, 64px);
        row-gap: 0;
        align-items: center;
      }
      .hero > .hero-circle-1,
      .hero > .hero-circle-2,
      .hero > .hero-circle-3 { grid-column: 1 / -1; } /* décor n'affecte pas grid */
      .hero-badge,
      .hero h1,
      .hero-sub,
      .hero-ctas,
      .hero-stats { grid-column: 1; }
      .hero-visual {
        grid-column: 2;
        grid-row: 1 / span 5;
        margin: 0;
        justify-self: center;
        align-self: center;
        max-width: 460px; /* ajusté pour le nouveau ratio */
      }
      .hero h1 { max-width: 24ch; }
      .hero-sub { max-width: 46ch; }
      .hero-stats {
        margin-top: clamp(18px, 2.2vw, 26px);
      }
    }

    /* ≥ 1200px : visuel plus généreux */
    @media (min-width: 1200px) {
      .hero-visual { max-width: 500px; }
    }

    /* Réduit les animations pour utilisateurs avec préférence */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }