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

    :root {
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #C49A6C;
      --color-accent-light: #D4B48E;
      --color-bg: #F7F4EF;
      --color-bg-alt: #EDE8E0;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-white: #FFFDF9;
      --color-concrete: #3D3A38;
      --font-serif: 'DM Serif Display', Georgia, serif;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --max-width: 1100px;
      --radius: 14px;
    }

    html {
      scroll-behavior: smooth;
    }
    /* Sur mobile, on désactive le smooth scroll : Chrome/iOS mobile ont un bug
       de sous-évaluation sur les longues distances (le scroll s'arrête 100-200px
       AVANT la cible sur des pages longues). Un saut instantané est plus fiable
       ET plus rapide au ressenti, tout en respectant scroll-margin-top. */
    @media (max-width: 800px) {
      html {
        scroll-behavior: auto;
      }
    }

    /* Ancres internes : offset de 80px sous la nav sticky (nav ≈ 72px + marge).
       Convention : les IDs cibles (#au-cabinet, #couple, #cabinet…) sont placés
       sur le <div class="section-header"> à l'INTÉRIEUR de la section, pas sur
       la <section> elle-même. Cela permet au titre de section (span "AU CABINET"
       + h2) d'apparaître nettement sous la nav, sans être masqué par le padding
       de section. */
    [id] {
      scroll-margin-top: 80px;
    }

    /* Fallback : si un ID reste sur une <section> (pages historiques ou landmarks
       comme #accueil, #parcours), on retire le scroll-margin-top pour éviter le
       double décalage : le padding-top: 5rem de la section fait déjà tampon. */
    section[id] {
      scroll-margin-top: 0;
    }

    body {
      font-family: var(--font-sans);
      color: var(--color-text);
      background-color: var(--color-bg);
      line-height: 1.7;
      font-size: 16px;
    }

    /* Navigation */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: rgba(247, 244, 239, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 100;
      border-bottom: 1px solid rgba(180, 170, 155, 0.15);
    }

    .nav-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0.9rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav-logo {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      text-decoration: none;
      line-height: 1;
    }

    .nav-logo-name {
      font-family: var(--font-serif);
      font-size: 1.65rem;
      color: var(--color-text-title);
      line-height: 1;
    }

    .nav-logo-tag {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-accent);
      line-height: 1;
    }

    .nav-links {
      display: flex;
      gap: 1.5rem;
      list-style: none;
      align-items: center;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--color-text-light);
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--color-primary-dark);
    }

    .nav-links a.active {
      color: var(--color-text-title);
      position: relative;
    }

    .nav-links a.active::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--color-accent);
      border-radius: 2px;
    }

    .nav-cta {
      background: var(--color-primary);
      color: #FFFFFF !important;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      transition: background 0.2s !important;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .nav-cta svg {
      width: 15px;
      height: 15px;
    }

    .nav-cta:hover {
      background: var(--color-primary-dark) !important;
    }

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
    }

    .nav-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--color-text);
      margin: 5px 0;
      transition: 0.3s;
    }

    /* Hero */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 6rem 1.5rem 4rem;
      background: var(--color-bg-warm);
      position: relative;
      overflow: hidden;
    }

    .hero.hero-page {
      min-height: auto;
      padding: 8rem 1.5rem 4rem;
    }

    .hero-page .hero-content {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }

    .hero.hero-page h1 {
      font-size: clamp(2.4rem, 5vw, 3.4rem);
      color: var(--color-text-title);
      font-family: var(--font-serif);
      line-height: 1.15;
      margin: 0 auto 1.2rem;
      max-width: 720px;
      white-space: normal;
      text-wrap: balance;
    }

    /* Règle typographique : chaque phrase d'un H1 hero-page sur sa propre ligne.
       Un <span> par phrase dans le HTML, rendu block-level pour rupture aux frontières. */
    .hero.hero-page h1 > span {
      display: block;
    }

    .hero-page p {
      font-size: 1.05rem;
      color: var(--color-text);
      max-width: 580px;
      margin: 0 auto 2rem;
      font-weight: 300;
    }

    .hero-page .hero-buttons {
      justify-content: center;
    }

    .hero-photo-bg {
      position: absolute;
      top: 0;
      right: 0;
      width: 58%;
      height: 100%;
      z-index: 0;
    }

    .hero-photo-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 55% 12%;
      filter: brightness(1.04) saturate(1.04);
    }

    .hero-photo-bg::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 55%;
      height: 100%;
      background: linear-gradient(to right, var(--color-bg-warm) 10%, transparent 100%);
      z-index: 1;
    }

    .hero-photo-bg::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 18%;
      background: linear-gradient(to top, var(--color-bg-warm), transparent);
      z-index: 1;
    }

    .hero-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      width: 100%;
      position: relative;
      z-index: 2;
    }

    .hero-content {
      max-width: 640px;
    }

    .hero-tag {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 1.2rem;
      white-space: nowrap;
    }

    .hero h1 {
      font-family: var(--font-serif);
      font-size: clamp(2.4rem, 5vw, 3.4rem);
      line-height: 1.15;
      color: var(--color-text-title);
      margin-bottom: 1.2rem;
      white-space: nowrap;
    }

    .hero p {
      font-size: 1.1rem;
      color: var(--color-text-light);
      max-width: 480px;
      margin-bottom: 2rem;
      font-weight: 300;
    }

    .hero-buttons {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.8rem;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.25s;
      cursor: pointer;
      border: none;
      font-family: var(--font-sans);
    }

    .btn-primary {
      background: var(--color-primary);
      color: #FFFFFF;
    }

    .btn-primary:hover {
      background: var(--color-primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(26, 107, 125, 0.25);
    }

    .btn-outline {
      background: transparent;
      color: var(--color-text-title);
      border: 1.5px solid var(--color-accent);
    }

    .btn-outline:hover {
      background: var(--color-accent);
      color: var(--color-white);
    }

    /* Bouton "doux" : CTA secondaire bienveillant, entre primary et outline */
    .btn-soft {
      background: rgba(196, 154, 108, 0.12);
      color: var(--color-text-title);
      border: 1px solid rgba(196, 154, 108, 0.45);
    }

    .btn-soft:hover {
      background: rgba(196, 154, 108, 0.22);
      border-color: var(--color-accent);
      transform: translateY(-1px);
    }

    /* Feedback tactile : les hover ne se voient pas sur touch → :active pour retour immédiat */
    .btn:active,
    .btn-primary:active,
    .btn-outline:active,
    .btn-soft:active {
      transform: translateY(0) scale(0.98);
      transition: transform 0.05s;
    }
    .parcours-card:active {
      transform: translateY(0) scale(0.99);
      transition: transform 0.05s;
    }

    /* Hero home — bloc mots-clés en hashtags (Version A) */
    .hero-intro {
      font-size: 1.05rem;
      color: var(--color-text);
      line-height: 1.6;
      margin: 1.4rem 0 1.2rem;
    }

    .hero-keywords {
      font-family: var(--font-serif);
      font-size: clamp(1.4rem, 2.8vw, 2rem);
      color: #1F1B17;
      line-height: 1.35;
      margin: 0 0 1.4rem;
      letter-spacing: -0.015em;
    }
    .hero-keywords span {
      display: inline-block;
      margin-right: 0.7rem;
      white-space: nowrap;
    }
    .hero-keywords .hash {
      color: var(--color-accent);
      font-weight: 400;
      font-family: var(--font-sans);
      font-size: 0.85em;
      margin-right: 0.1em;
      vertical-align: 0.1em;
    }

    .hero-outro {
      font-size: 1.05rem;
      color: var(--color-text);
      line-height: 1.6;
      margin: 1.6rem 0 1.8rem;
      font-weight: 500;
    }

    @media (max-width: 700px) {
      .hero-keywords {
        font-size: clamp(1.2rem, 5vw, 1.55rem);
        line-height: 1.45;
      }
      .hero-keywords span {
        margin-right: 0.55rem;
      }
      .hero-intro, .hero-outro {
        font-size: 1rem;
      }
    }


    /* Step Timeline */
    .step-timeline {
      max-width: 760px;
      margin: 0 auto;
      position: relative;
      padding-left: 3.5rem;
    }

    .step-timeline::before {
      content: '';
      position: absolute;
      left: 15px;
      top: 8px;
      bottom: 8px;
      width: 2px;
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-primary-light));
      opacity: 0.3;
    }

    .step {
      position: relative;
      margin-bottom: 2.5rem;
    }

    .step:last-child {
      margin-bottom: 0;
    }

    .step-number {
      position: absolute;
      left: -3.5rem;
      top: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--color-accent);
      color: var(--color-bg);
      font-size: 0.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .step h3 {
      font-family: var(--font-sans);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--color-text-title);
      margin-bottom: 0.6rem;
      -webkit-font-smoothing: antialiased;
    }

    .step p {
      font-size: 0.92rem;
      color: var(--color-text);
      line-height: 1.7;
      font-weight: 300;
      margin-bottom: 0.5rem;
    }

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

    .step-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-primary);
      text-decoration: none;
      margin-top: 0.4rem;
    }

    .step-link:hover {
      color: var(--color-primary-dark);
    }

    /* Content blocks */
    .content-block {
      max-width: 760px;
      margin: 0 auto 3rem;
    }

    .content-block:last-child {
      margin-bottom: 0;
    }

    .content-block h3 {
      font-family: var(--font-sans);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      -webkit-font-smoothing: antialiased;
      color: var(--color-text-title);
      margin-bottom: 1rem;
    }

    .content-block p {
      font-size: 0.95rem;
      color: var(--color-text);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: 0.8rem;
    }

    .content-block p:last-child {
      margin-bottom: 0;
    }

    /* Benefit grid */
    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      margin-top: 1.5rem;
    }

    .benefit-card {
      background: var(--color-bg-warm);
      border-radius: var(--radius);
      padding: 1.5rem 1.6rem;
      border: 1px solid rgba(196, 154, 108, 0.18);
      text-align: left;
      border-left: 3px solid var(--color-accent);
    }

    .benefit-card h4 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--color-text-title);
      margin-bottom: 0.5rem;
      letter-spacing: -0.005em;
    }

    .benefit-card p {
      font-size: 0.92rem;
      color: var(--color-text);
      font-weight: 400;
      line-height: 1.55;
    }

    /* Photo placeholder for sections */
    .section-photo {
      max-width: 760px;
      margin: 2rem auto;
    }

    .section-photo-frame {
      width: 100%;
      height: 320px;
      background: var(--color-bg-alt);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--color-text-light);
      font-size: 0.9rem;
      overflow: hidden;
      border: 2px dashed rgba(196, 154, 108, 0.3);
      padding: 1.5rem;
      text-align: center;
    }

    .section-photo-frame strong {
      color: var(--color-accent);
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.6rem;
    }

    .section-photo-frame em {
      font-style: normal;
      font-size: 0.85rem;
      color: var(--color-text-light);
      max-width: 480px;
      line-height: 1.5;
    }

    .section-photo img {
      width: 100%;
      height: 320px;
      object-fit: cover;
      border-radius: var(--radius);
    }

    .section-photo-caption {
      font-size: 0.78rem;
      color: var(--color-text-light);
      text-align: center;
      margin-top: 0.6rem;
      font-style: italic;
    }

    /* Section CTA inline */
    .section-cta {
      max-width: 760px;
      margin: 2.5rem auto 0;
      text-align: center;
    }

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

      .step-timeline {
        padding-left: 2.8rem;
      }

      .step-number {
        left: -2.8rem;
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
      }

      .step-timeline::before {
        left: 12px;
      }
    }

    /* Parcours */
    .parcours-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .parcours-card {
      background: var(--color-bg-warm);
      border-radius: var(--radius);
      padding: 2.2rem;
      border: 1px solid rgba(196, 154, 108, 0.12);
      box-shadow: 0 2px 8px rgba(42, 37, 32, 0.04);
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
    }

    .parcours-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(42, 37, 32, 0.08);
      border-color: var(--color-accent);
    }

    .parcours-emoji {
      font-size: 2rem;
      margin-bottom: 1rem;
      line-height: 1;
    }

    .parcours-card h3 {
      font-family: var(--font-sans);
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: var(--color-text-title);
      margin-bottom: 0.6rem;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .parcours-card .parcours-vous {
      font-size: 0.98rem;
      color: var(--color-text);
      margin-bottom: 1rem;
      line-height: 1.6;
      font-weight: 400;
    }

    .parcours-card .parcours-reponse {
      font-size: 0.92rem;
      color: var(--color-text);
      margin-bottom: 1.2rem;
      line-height: 1.6;
      font-weight: 400;
      flex-grow: 1;
    }

    .parcours-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-top: auto;
    }

    .parcours-card:hover .parcours-link {
      color: var(--color-primary-dark);
    }

    .parcours-separator {
      width: 40px;
      height: 2px;
      background: var(--color-accent-light);
      border: none;
      margin: 0.8rem 0;
    }

    /* Sections */
    section {
      padding: 5rem 1.5rem;
    }

    .section-inner {
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .section-header {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .section-tag {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 0.8rem;
    }

    .section-header h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      color: var(--color-text-title);
      margin-bottom: 0.8rem;
    }

    .section-header p {
      color: var(--color-text);
      max-width: 580px;
      margin: 0 auto;
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.6;
    }

    /* Presentation */
    .presentation {
      background: var(--color-bg);
    }

    .presentation-grid {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 4rem;
      align-items: center;
    }

    .presentation-photo {
      width: 100%;
      aspect-ratio: 4/5;
      background: var(--color-bg-alt);
      border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-light);
      font-size: 0.85rem;
      box-shadow: 0 12px 40px rgba(42, 37, 32, 0.1);
      transition: border-radius 0.6s ease;
    }

    .presentation-photo:hover {
      border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%;
    }

    .presentation-text h2 {
      font-family: var(--font-serif);
      font-size: 2rem;
      margin-bottom: 1.5rem;
      color: var(--color-text-title);
    }

    .presentation-text p {
      color: var(--color-text-light);
      margin-bottom: 1rem;
      font-weight: 300;
    }

    .presentation-text p:last-of-type {
      margin-bottom: 1.5rem;
    }

    .diplomas {
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--color-accent-light);
    }

    .diplomas h3 {
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 0.8rem;
      color: var(--color-text-title);
    }

    .diplomas ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .diplomas li {
      font-size: 0.9rem;
      color: var(--color-text-light);
      padding-left: 1.2rem;
      position: relative;
    }

    .diplomas li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.55rem;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-primary);
    }

    /* Domaines */
    .domaine-featured {
      background: var(--color-primary-dark);
      border-radius: var(--radius);
      padding: 2.5rem;
      margin-bottom: 1.5rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
      align-items: center;
      color: #FFFFFF;
    }

    .domaine-featured h3 {
      font-family: var(--font-serif);
      font-size: 1.6rem;
      margin-bottom: 1rem;
      color: #FFFFFF;
    }

    .domaine-featured p {
      font-size: 0.95rem;
      font-weight: 300;
      opacity: 0.9;
      line-height: 1.7;
      margin-bottom: 0.8rem;
    }

    .domaine-featured .tag {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      opacity: 0.75;
      margin-bottom: 0.8rem;
    }

    .domaine-featured-info {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      margin-top: 0.5rem;
    }

    .domaine-featured-info li {
      font-size: 0.9rem;
      font-weight: 300;
      opacity: 0.9;
      padding-left: 1.2rem;
      position: relative;
      list-style: none;
    }

    .domaine-featured-info li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.55rem;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-accent);
    }

    .domaine-featured-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 1rem;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--color-accent-light);
      text-decoration: none;
      transition: color 0.2s;
    }

    .domaine-featured-link:hover {
      color: #FFFFFF;
    }

    .domaines-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .domaine-card {
      background: var(--color-bg-warm);
      border-radius: var(--radius);
      padding: 2rem;
      border: 1px solid rgba(196, 154, 108, 0.15);
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(42, 37, 32, 0.04);
    }

    .domaine-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(42, 37, 32, 0.08);
      border-color: rgba(196, 154, 108, 0.3);
    }

    .domaine-icon {
      width: 48px;
      height: 48px;
      background: var(--color-bg-alt);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.2rem;
      font-size: 1.4rem;
    }

    .domaine-card h3 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 0.6rem;
      color: var(--color-text-title);
    }

    .domaine-card p {
      font-size: 0.9rem;
      color: var(--color-text-light);
      font-weight: 300;
    }

    /* Cabinet */
    .cabinet {
      background: var(--color-bg-warm);
    }

    .cabinet-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }

    .cabinet-info {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .info-block {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .info-icon {
      width: 42px;
      height: 42px;
      min-width: 42px;
      background: var(--color-bg-alt);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }

    .info-block h3 {
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 0.2rem;
      color: var(--color-text-title);
    }

    .info-block p {
      font-size: 0.9rem;
      color: var(--color-text-light);
      font-weight: 300;
    }

    .cabinet-map {
      border-radius: var(--radius);
      overflow: hidden;
      min-height: 380px;
      background: var(--color-bg-alt);
    }

    .cabinet-map iframe {
      width: 100%;
      height: 100%;
      min-height: 380px;
      border: none;
    }

    /* Overlay carte : bloque la capture du scroll par l'iframe sur mobile,
       clic dessus l'active. Injecté par nav.js seulement en tactile. */
    .cabinet-map { position: relative; }
    .cabinet-map-overlay {
      position: absolute;
      inset: 0;
      z-index: 5;
      background: transparent;
      cursor: pointer;
    }
    .cabinet-map-overlay::after {
      content: 'Tapez la carte pour interagir';
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(31, 27, 23, 0.78);
      color: #fff;
      font-size: 0.78rem;
      font-family: var(--font-sans);
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      white-space: nowrap;
      pointer-events: none;
    }

    /* Infos pratiques */
    .infos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

    .info-card {
      background: var(--color-bg-warm);
      border-radius: var(--radius);
      padding: 2rem;
      border: 1px solid rgba(196, 154, 108, 0.15);
      box-shadow: 0 2px 8px rgba(42, 37, 32, 0.04);
    }

    .info-card h3 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--color-text-title);
    }

    .info-card p,
    .info-card li {
      font-size: 0.95rem;
      color: var(--color-text);
      font-weight: 400;
      line-height: 1.6;
    }

    .info-card ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .info-card li {
      padding-left: 1.2rem;
      position: relative;
    }

    .info-card li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.55rem;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--color-accent);
    }

    /* FAQ */
    .faq-list {
      max-width: 760px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .faq-item {
      border-bottom: 1px solid rgba(196, 154, 108, 0.15);
    }

    .faq-item:first-child {
      border-top: 1px solid rgba(196, 154, 108, 0.15);
    }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 1.4rem 2.5rem 1.4rem 0;
      text-align: left;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-text-title);
      position: relative;
      line-height: 1.5;
      transition: color 0.2s;
    }

    .faq-question:hover {
      color: var(--color-primary);
    }

    .faq-question::after {
      content: '+';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.3rem;
      font-weight: 300;
      color: var(--color-accent);
      transition: transform 0.3s;
    }

    .faq-item.open .faq-question::after {
      content: '−';
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      padding: 0 0 0 0;
    }

    .faq-item.open .faq-answer {
      max-height: 1200px;
      padding: 0 0 1.4rem 0;
    }

    .faq-answer p {
      font-size: 0.92rem;
      color: var(--color-text);
      line-height: 1.7;
      font-weight: 300;
    }

    /* CTA */
    .cta-section {
      background: var(--color-primary);
      text-align: center;
      color: #FFFFFF;
    }

    .cta-section h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      margin-bottom: 1rem;
      color: #FFFFFF;
    }

    .cta-section p {
      opacity: 0.85;
      max-width: 480px;
      margin: 0 auto 2rem;
      font-weight: 300;
    }

    .btn-white {
      background: #FFFFFF;
      color: var(--color-primary-dark);
      font-weight: 600;
    }

    .btn-white:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(14, 79, 94, 0.2);
    }

    /* Footer */
    footer {
      background: var(--color-concrete);
      color: rgba(255, 255, 255, 0.65);
      padding: 3rem 1.5rem;
      font-size: 0.85rem;
    }

    .footer-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 3rem;
    }

    .footer-brand {
      font-family: var(--font-sans);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.005em;
      -webkit-font-smoothing: antialiased;
      color: #FFFFFF;
      margin-bottom: 0.8rem;
    }

    footer h4 {
      color: var(--color-accent-light);
      font-size: 0.9rem;
      margin-bottom: 0.8rem;
    }

    footer a {
      color: rgba(255, 255, 255, 0.65);
      text-decoration: none;
      transition: color 0.2s;
    }

    footer a:hover {
      color: var(--color-white);
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .footer-bottom {
      max-width: var(--max-width);
      margin: 2rem auto 0;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
      font-size: 0.8rem;
    }

    .footer-trust {
      font-size: 0.95rem;
      font-style: italic;
      color: var(--color-accent-light);
      margin: 0 0 1rem 0;
      letter-spacing: 0.02em;
      font-weight: 500;
    }

    .footer-legal {
      margin-top: 0.4rem;
      font-size: 0.75rem;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 900px) {
      /* Hero mobile — Option C : photo empilée au-dessus du texte */
      .hero {
        min-height: auto;
        padding: 4.5rem 0 3rem;
        flex-direction: column;
        align-items: stretch;
      }

      /* Photo pleine largeur en haut — les variantes (body.v-canard etc.) ont
         une spécificité (0,2,1) qui gagne sur .hero-photo-bg (0,1,0).
         !important est nécessaire pour battre les width définies par variante. */
      .hero-photo-bg {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 260px !important;
        opacity: 1 !important;
        flex-shrink: 0;
      }

      /* Cadrage photo mobile : centrer horizontalement, visage plus haut
         (cohérent avec la variante C validée : center 20%) */
      .hero-photo-bg img {
        object-position: center 20% !important;
      }

      /* Désactive le fondu latéral desktop (inutile en mobile empilé) */
      .hero-photo-bg::after {
        display: none !important;
      }

      /* Fondu bas photo → transition douce vers le bloc texte */
      .hero-photo-bg::before {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 40px;
        background: linear-gradient(to top, var(--color-bg-warm), transparent);
      }

      .hero-inner {
        padding: 2rem 1.5rem 0.5rem;
        text-align: center;
      }

      .hero-content {
        max-width: 100%;
      }

      /* Force wrap sur le tag (desktop = nowrap pour tenir en 1 ligne)
         et sur h1 (desktop = nowrap pour préserver typographie).
         En mobile, la place manque : on autorise le retour à la ligne. */
      .hero-tag,
      .hero h1 {
        white-space: normal;
      }

      /* H1 hero mobile : taille adaptée pour tenir dans la largeur.
         La clamp desktop min = 2.4rem (~38px), trop pour 390px de large. */
      .hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
        line-height: 1.15;
        text-wrap: balance;
      }

      /* Tag hero mobile : garde une taille lisible sans forcer une longue ligne */
      .hero-tag {
        font-size: 0.68rem;
        line-height: 1.5;
      }

      .hero p {
        margin-left: auto;
        margin-right: auto;
      }

      /* Hashtags en flex-wrap centré (comme variante C validée),
         plutôt que inline-block qui laisse des trous inégaux. */
      .hero-keywords {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.2rem 0.7rem;
      }

      .hero-keywords span {
        margin-right: 0;
      }

      .hero-buttons {
        justify-content: center;
      }

      /* === EXCEPTION : Hero votre-thérapeute (.hero-portrait) ===
         Garde le portrait en fond + overlay ivoire semi-opaque
         pour lisibilité du texte, sans stacking Option C. */
      .hero.hero-portrait {
        padding: 6rem 1.5rem 4rem !important;
        flex-direction: initial;
        align-items: center;
        min-height: 520px;
        position: relative;
      }
      .hero-portrait .hero-photo-bg {
        position: absolute !important;
        top: 60px !important;                     /* décale sous la nav mobile (~60px) */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100% - 60px) !important;
        opacity: 1 !important;
        z-index: 0;
      }
      /* Cadrage : ancrage au haut de l'image pour montrer intégralement la tête */
      .hero-portrait .hero-photo-bg img {
        object-position: center 2% !important;
      }
      /* Overlay ivoire 78% : contraste renforcé pour lisibilité maximale */
      .hero-portrait .hero-photo-bg::after {
        display: block !important;
        content: '';
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(232, 229, 221, 0.78) !important;
        z-index: 1;
      }
      .hero-portrait .hero-photo-bg::before {
        display: none !important;
      }
      .hero-portrait .hero-inner {
        position: relative !important;
        z-index: 2 !important;
        padding: 0 !important;
      }
      /* Texte du hero en bleu canard pour cohérence charte + contraste renforcé */
      .hero-portrait .hero-content,
      .hero-portrait .hero-medaillon-lead,
      .hero-portrait .hero-intro,
      .hero-portrait p {
        color: var(--color-primary) !important;
      }
      .hero-portrait h1 {
        color: var(--color-primary) !important;
      }

      .parcours-grid {
        /* !important nécessaire pour battre les inline styles
           (style="grid-template-columns: repeat(2, 1fr)" sur certaines pages) */
        grid-template-columns: 1fr !important;
      }

      .presentation-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .presentation-photo {
        max-width: 320px;
        margin: 0 auto;
      }

      .domaine-featured {
        grid-template-columns: 1fr;
        padding: 2rem;
      }

      .domaines-grid {
        grid-template-columns: 1fr;
      }

      .cabinet-grid {
        grid-template-columns: 1fr;
      }

      .infos-grid {
        grid-template-columns: 1fr;
      }

      .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
    }

    @media (max-width: 900px) {
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-bg);
        flex-direction: column;
        padding: 0.5rem 1rem 1rem;
        gap: 0;
        border-bottom: 1px solid rgba(180, 170, 155, 0.15);
      }

      .nav-links.active {
        display: flex;
      }

      .nav-links li {
        list-style: none;
        width: 100%;
      }

      .nav-links a {
        display: block;
        padding: 0.95rem 0.5rem;
        font-size: 1rem;
      }

      .nav-toggle {
        display: block;
      }

      .nav-cta {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 0.95rem 1rem;
        margin-top: 0.4rem;
      }
    }

    @media (max-width: 700px) {
      section {
        padding: 3.5rem 1.2rem;
      }
    }
    /* ============================================
       BARRE DE VARIANTES (test)
       ============================================ */
    .variant-bar {
      position: fixed;
      bottom: 1.2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      background: #1A1A1A;
      border-radius: 100px;
      padding: 0.4rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
    }
    /* Outil dev strictement desktop : caché en mobile */
    @media (max-width: 768px) {
      .variant-bar { display: none; }
    }
    .variant-btn {
      padding: 0.55rem 1.2rem;
      border-radius: 100px;
      border: none;
      background: transparent;
      color: rgba(255,255,255,0.55);
      font-size: 0.78rem;
      font-family: var(--font-sans);
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .variant-btn:hover {
      color: #fff;
    }
    .variant-btn.active {
      background: #C49A6C;
      color: #1A1A1A;
    }

    /* ============================================
       VARIANTE 2 : SCANDINAVE — Tapis traditionnel
       ============================================ */
    body.v-scandi {
      --color-primary: #2E6F82;
      --color-primary-light: #4A94A8;
      --color-primary-dark: #1B4F5E;
      --color-accent: #B5503C;
      --color-accent-light: #D4806E;
      --color-bg: #F5F1EB;
      --color-bg-alt: #E8E2D8;
      --color-bg-warm: #EFE9E0;
      --color-text-title: #1E2A2E;
      --color-text: #4A5558;
      --color-text-light: #7A8285;
      --color-concrete: #2A3235;
    }

    body.v-scandi .hero {
      background: var(--color-bg);
    }

    body.v-scandi .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 24px;
      background:
        repeating-linear-gradient(
          90deg,
          var(--color-accent) 0px, var(--color-accent) 6px,
          transparent 6px, transparent 12px,
          var(--color-primary) 12px, var(--color-primary) 18px,
          transparent 18px, transparent 24px,
          var(--color-accent) 24px, var(--color-accent) 30px,
          transparent 30px, transparent 36px
        );
      opacity: 0.2;
    }

    body.v-scandi section:not(.hero):not(.cta-section)::before {
      content: '';
      display: block;
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, var(--color-accent), var(--color-primary), var(--color-accent));
      margin: 0 auto 0;
      position: relative;
      top: -2.5rem;
      opacity: 0.4;
    }

    body.v-scandi .parcours-card {
      border-top: 3px solid transparent;
      background:
        linear-gradient(var(--color-bg-warm), var(--color-bg-warm)) padding-box,
        linear-gradient(90deg, var(--color-accent), var(--color-primary), var(--color-accent)) border-box;
      border-top: 3px solid transparent;
      border-image: linear-gradient(90deg, var(--color-accent), var(--color-primary), var(--color-accent)) 1;
      border-image-slice: 1;
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-radius: 0 0 var(--radius) var(--radius);
    }

    body.v-scandi .parcours-separator {
      background: var(--color-accent);
      opacity: 0.4;
    }

    body.v-scandi .domaine-featured {
      background: var(--color-primary-dark);
      border: 2px solid rgba(181, 80, 60, 0.2);
    }

    body.v-scandi .domaine-card,
    body.v-scandi .info-card {
      border-top: 2px solid var(--color-accent);
      border-radius: 0 0 var(--radius) var(--radius);
    }


    body.v-scandi .btn-primary {
      background: var(--color-accent);
    }
    body.v-scandi .btn-primary:hover {
      background: #9A3F2E;
      box-shadow: 0 6px 20px rgba(181, 80, 60, 0.25);
    }

    body.v-scandi .nav-cta {
      background: var(--color-accent) !important;
    }
    body.v-scandi .nav-cta:hover {
      background: #9A3F2E !important;
    }

    body.v-scandi .cta-section {
      background: var(--color-accent);
    }

    body.v-scandi footer {
      background: var(--color-concrete);
      border-top: 4px solid transparent;
      border-image: repeating-linear-gradient(
        90deg,
        var(--color-accent) 0px, var(--color-accent) 8px,
        transparent 8px, transparent 16px,
        var(--color-primary) 16px, var(--color-primary) 24px,
        transparent 24px, transparent 32px
      ) 4;
    }

    /* ============================================
       VARIANTE 3 : THÉÂTRE — Cabinet comme scène
       ============================================ */
    body.v-theatre {
      --color-primary: #1B5E72;
      --color-primary-light: #3B8EA6;
      --color-primary-dark: #0D3A48;
      --color-accent: #C9975C;
      --color-accent-light: #DDBB8A;
      --color-bg: #0F1C20;
      --color-bg-alt: #1A2C32;
      --color-bg-warm: #142428;
      --color-text-title: #E8E0D4;
      --color-text: #A0978E;
      --color-text-light: #7A746C;
      --color-concrete: #0A1214;
      --color-white: #F5EFE6;
    }

    body.v-theatre {
      background: var(--color-bg);
    }

    body.v-theatre nav {
      background: rgba(15, 28, 32, 0.92);
      border-bottom: 1px solid rgba(201, 151, 92, 0.1);
    }
    body.v-theatre .nav-links a {
      color: var(--color-text);
    }
    body.v-theatre .nav-links a:hover {
      color: var(--color-accent-light);
    }

    body.v-theatre .hero {
      background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(27, 94, 114, 0.12), transparent),
        var(--color-bg);
      border-bottom: 1px solid rgba(201, 151, 92, 0.08);
    }


    body.v-theatre .hero-tag {
      color: var(--color-accent);
    }

    body.v-theatre .btn-primary {
      background: var(--color-accent);
      color: var(--color-bg);
    }
    body.v-theatre .btn-primary:hover {
      background: var(--color-accent-light);
      box-shadow: 0 6px 24px rgba(201, 151, 92, 0.3);
    }

    body.v-theatre .btn-outline {
      border-color: rgba(201, 151, 92, 0.3);
      color: var(--color-accent-light);
    }
    body.v-theatre .btn-outline:hover {
      background: rgba(201, 151, 92, 0.12);
      border-color: var(--color-accent);
      color: var(--color-accent-light);
    }

    body.v-theatre .nav-cta {
      background: var(--color-accent) !important;
      color: var(--color-bg) !important;
    }

    body.v-theatre .presentation {
      background: var(--color-bg-alt);
    }
    body.v-theatre .presentation-photo {
      box-shadow:
        0 0 0 1px rgba(201, 151, 92, 0.12),
        0 12px 40px rgba(0, 0, 0, 0.3);
    }

    body.v-theatre .parcours-card {
      background: var(--color-bg-alt);
      border-color: rgba(201, 151, 92, 0.08);
    }
    body.v-theatre .parcours-card:hover {
      border-color: rgba(201, 151, 92, 0.25);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    body.v-theatre .parcours-separator {
      background: var(--color-accent);
      opacity: 0.3;
    }

    body.v-theatre .section-tag {
      color: var(--color-accent);
    }

    body.v-theatre .section-header h2 {
      color: var(--color-text-title);
    }

    body.v-theatre .domaine-featured {
      background: var(--color-bg-alt);
      border: 1px solid rgba(201, 151, 92, 0.12);
    }
    body.v-theatre #sexologie .domaine-featured {
      background: var(--color-bg-alt) !important;
      border: 1px solid rgba(201, 151, 92, 0.12);
    }

    body.v-theatre .domaine-card,
    body.v-theatre .info-card {
      background: var(--color-bg-alt);
      border-color: rgba(201, 151, 92, 0.08);
    }
    body.v-theatre .domaine-card:hover {
      border-color: rgba(201, 151, 92, 0.2);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    }
    body.v-theatre .domaine-icon {
      background: rgba(201, 151, 92, 0.08);
    }

    body.v-theatre .cabinet {
      background: var(--color-bg);
    }

    body.v-theatre .info-icon {
      background: rgba(201, 151, 92, 0.08);
    }

    body.v-theatre .cta-section {
      background: linear-gradient(135deg, var(--color-bg-alt), var(--color-concrete));
      border-top: 1px solid rgba(201, 151, 92, 0.1);
      border-bottom: 1px solid rgba(201, 151, 92, 0.1);
    }
    body.v-theatre .cta-section h2 {
      color: var(--color-accent-light);
    }
    body.v-theatre .btn-white {
      background: var(--color-accent);
      color: var(--color-bg);
    }
    body.v-theatre .btn-white:hover {
      box-shadow: 0 6px 24px rgba(201, 151, 92, 0.3);
    }

    body.v-theatre footer {
      background: var(--color-concrete);
      border-top: 1px solid rgba(201, 151, 92, 0.08);
    }
    body.v-theatre footer h4 {
      color: var(--color-accent);
    }
    body.v-theatre footer a:hover {
      color: var(--color-accent-light);
    }

    body.v-theatre .footer-bottom {
      border-top-color: rgba(201, 151, 92, 0.08);
    }

    body.v-theatre .cabinet-map iframe {
      filter: invert(0.9) hue-rotate(180deg) saturate(0.3) brightness(0.8);
    }

    body.v-theatre .nav-links.active {
      background: var(--color-bg-alt);
      border-bottom-color: rgba(201, 151, 92, 0.1);
    }

    body.v-theatre .nav-toggle span {
      background: var(--color-accent-light);
    }

    /* ============================================
       VARIANTE 4 : RYA — Tapis danois vintage 70s
       ============================================ */
    body.v-rya {
      --color-primary: #4A6FA5;
      --color-primary-light: #6B9DC7;
      --color-primary-dark: #2E4A75;
      --color-accent: #3A8B7A;
      --color-accent-light: #5BB5A2;
      --color-bg: #1C1824;
      --color-bg-alt: #252030;
      --color-bg-warm: #211C28;
      --color-text-title: #D4CEE4;
      --color-text: #9A93A8;
      --color-text-light: #736D82;
      --color-concrete: #13101A;
      --color-white: #EDE8F4;
    }

    body.v-rya {
      background: var(--color-bg);
    }

    body.v-rya nav {
      background: rgba(28, 24, 36, 0.92);
      border-bottom: 1px solid rgba(74, 111, 165, 0.1);
    }
    body.v-rya .nav-logo {
      color: var(--color-primary-light);
    }
    body.v-rya .nav-links a {
      color: var(--color-text);
    }
    body.v-rya .nav-links a:hover {
      color: var(--color-primary-light);
    }
    body.v-rya .nav-cta {
      background: var(--color-accent) !important;
      color: #fff !important;
    }
    body.v-rya .nav-cta:hover {
      background: #2E7566 !important;
    }

    body.v-rya .hero {
      background:
        radial-gradient(ellipse 350px 350px at 75% 45%, rgba(74, 111, 165, 0.12), transparent),
        radial-gradient(ellipse 250px 250px at 25% 70%, rgba(58, 139, 122, 0.08), transparent),
        radial-gradient(ellipse 180px 180px at 60% 80%, rgba(107, 157, 199, 0.06), transparent),
        var(--color-bg);
    }

    body.v-rya .hero-tag {
      color: var(--color-accent);
    }


    body.v-rya .btn-primary {
      background: var(--color-primary);
      color: #fff;
    }
    body.v-rya .btn-primary:hover {
      background: var(--color-primary-light);
      box-shadow: 0 6px 24px rgba(74, 111, 165, 0.3);
    }
    body.v-rya .btn-outline {
      border-color: rgba(58, 139, 122, 0.4);
      color: var(--color-accent-light);
    }
    body.v-rya .btn-outline:hover {
      background: rgba(58, 139, 122, 0.15);
      border-color: var(--color-accent);
    }

    body.v-rya .section-tag {
      color: var(--color-accent);
    }
    body.v-rya .section-header h2 {
      color: var(--color-text-title);
    }

    body.v-rya .parcours-card {
      background: var(--color-bg-alt);
      border: 1px solid rgba(74, 111, 165, 0.08);
      border-radius: 24px;
      position: relative;
      overflow: hidden;
    }
    body.v-rya .parcours-card::before {
      content: '';
      position: absolute;
      top: -30px;
      right: -30px;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background:
        radial-gradient(circle, rgba(58, 139, 122, 0.15) 0%, rgba(74, 111, 165, 0.08) 50%, transparent 70%);
    }
    body.v-rya .parcours-card:hover {
      border-color: rgba(74, 111, 165, 0.25);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    body.v-rya .parcours-separator {
      background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
      opacity: 0.4;
    }

    body.v-rya .presentation {
      background: var(--color-bg-alt);
    }
    body.v-rya .presentation-photo {
      box-shadow:
        0 0 0 3px rgba(74, 111, 165, 0.12),
        0 0 0 7px rgba(58, 139, 122, 0.06),
        0 12px 40px rgba(0, 0, 0, 0.3);
    }
    body.v-rya .presentation-text h2 {
      color: var(--color-text-title);
    }
    body.v-rya .diplomas {
      border-top-color: rgba(74, 111, 165, 0.15);
    }
    body.v-rya .diplomas li::before {
      background: var(--color-accent);
    }

    body.v-rya .domaine-featured {
      background:
        radial-gradient(ellipse 200px 200px at 90% 20%, rgba(58, 139, 122, 0.15), transparent),
        radial-gradient(ellipse 150px 150px at 10% 80%, rgba(107, 157, 199, 0.1), transparent),
        var(--color-primary-dark);
      border: 1px solid rgba(74, 111, 165, 0.15);
      border-radius: 24px;
    }
    body.v-rya #sexologie .domaine-featured {
      background:
        radial-gradient(ellipse 200px 200px at 10% 20%, rgba(74, 111, 165, 0.15), transparent),
        radial-gradient(ellipse 150px 150px at 90% 80%, rgba(58, 139, 122, 0.12), transparent),
        var(--color-bg-alt) !important;
      border: 1px solid rgba(58, 139, 122, 0.12);
    }
    body.v-rya .domaine-featured-info li::before {
      background: var(--color-accent);
    }
    body.v-rya .domaine-featured-link {
      color: var(--color-accent-light);
    }
    body.v-rya .domaine-featured-link:hover {
      color: #fff;
    }

    body.v-rya .domaine-card,
    body.v-rya .info-card {
      background: var(--color-bg-alt);
      border: 1px solid rgba(74, 111, 165, 0.08);
      border-radius: 24px;
      position: relative;
      overflow: hidden;
    }
    body.v-rya .domaine-card::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: -20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(74, 111, 165, 0.1), transparent 70%);
    }
    body.v-rya .domaine-card:hover {
      border-color: rgba(74, 111, 165, 0.2);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    }
    body.v-rya .domaine-icon {
      background: rgba(58, 139, 122, 0.1);
      border-radius: 50%;
    }

    body.v-rya .info-card h3 {
      color: var(--color-primary-light);
    }

    body.v-rya .cabinet {
      background: var(--color-bg);
    }
    body.v-rya .info-icon {
      background: rgba(74, 111, 165, 0.1);
      border-radius: 50%;
    }

    body.v-rya .cta-section {
      background:
        radial-gradient(ellipse 300px 200px at 30% 50%, rgba(58, 139, 122, 0.15), transparent),
        radial-gradient(ellipse 300px 200px at 70% 50%, rgba(74, 111, 165, 0.12), transparent),
        var(--color-bg-alt);
      border-top: 1px solid rgba(74, 111, 165, 0.08);
      border-bottom: 1px solid rgba(58, 139, 122, 0.08);
    }
    body.v-rya .cta-section h2 {
      color: var(--color-text-title);
    }
    body.v-rya .btn-white {
      background: var(--color-primary);
      color: #fff;
    }
    body.v-rya .btn-white:hover {
      background: var(--color-primary-light);
      box-shadow: 0 6px 24px rgba(74, 111, 165, 0.3);
    }

    body.v-rya footer {
      background: var(--color-concrete);
      border-top: 1px solid rgba(74, 111, 165, 0.06);
    }
    body.v-rya footer h4 {
      color: var(--color-accent);
    }
    body.v-rya footer a:hover {
      color: var(--color-primary-light);
    }
    body.v-rya .footer-bottom {
      border-top-color: rgba(74, 111, 165, 0.08);
    }

    body.v-rya .cabinet-map iframe {
      filter: invert(0.9) hue-rotate(200deg) saturate(0.25) brightness(0.7);
    }

    body.v-rya .nav-links.active {
      background: var(--color-bg-alt);
      border-bottom-color: rgba(74, 111, 165, 0.1);
    }
    body.v-rya .nav-toggle span {
      background: var(--color-primary-light);
    }

    /* ============================================
       VARIANTE 6 : SALON BLEU — Aplats bleu canard profond, contraste doux
       ============================================ */
    body.v-paon {
      --color-primary: #D4A96A;
      --color-primary-light: #E5C394;
      --color-primary-dark: #B08A48;
      --color-accent: #D4A96A;
      --color-accent-light: #E5C394;
      --color-bg: #1A4A55;
      --color-bg-alt: #143E48;
      --color-bg-warm: #205860;
      --color-text-title: #F4E9D2;
      --color-text: #C8B89F;
      --color-text-light: #9DAFAE;
      --color-concrete: #0E2F37;
      --color-white: #F4E9D2;
    }

    body.v-paon {
      background: var(--color-bg);
    }

    body.v-paon nav {
      background: rgba(26, 74, 85, 0.92);
      border-bottom: 1px solid rgba(212, 169, 106, 0.15);
    }
    body.v-paon .nav-logo-name {
      color: var(--color-text-title);
    }
    body.v-paon .nav-links a {
      color: var(--color-text);
    }
    body.v-paon .nav-links a:hover {
      color: var(--color-accent-light);
    }
    body.v-paon .nav-cta {
      background: var(--color-accent) !important;
      color: var(--color-bg) !important;
    }
    body.v-paon .nav-cta:hover {
      background: var(--color-accent-light) !important;
    }

    body.v-paon .hero {
      background: var(--color-bg);
    }

    body.v-paon .hero-tag {
      color: var(--color-accent);
    }

    body.v-paon .btn-primary {
      background: var(--color-accent);
      color: var(--color-bg);
    }
    body.v-paon .btn-primary:hover {
      background: var(--color-accent-light);
      box-shadow: 0 6px 24px rgba(212, 169, 106, 0.3);
    }
    body.v-paon .btn-outline {
      border-color: rgba(212, 169, 106, 0.4);
      color: var(--color-accent-light);
    }
    body.v-paon .btn-outline:hover {
      background: rgba(212, 169, 106, 0.12);
      border-color: var(--color-accent);
      color: var(--color-text-title);
    }

    body.v-paon .section-tag {
      color: var(--color-accent);
    }
    body.v-paon .section-header h2 {
      color: var(--color-text-title);
    }

    body.v-paon .parcours-card {
      background: var(--color-bg-warm);
      border: 1px solid rgba(212, 169, 106, 0.12);
    }
    body.v-paon .parcours-card:hover {
      border-color: rgba(212, 169, 106, 0.3);
      box-shadow: 0 10px 30px rgba(14, 47, 55, 0.4);
    }
    body.v-paon .parcours-card h3 {
      color: var(--color-text-title);
    }
    body.v-paon .parcours-separator {
      background: var(--color-accent);
      opacity: 0.4;
    }
    body.v-paon .parcours-link {
      color: var(--color-accent-light);
    }
    body.v-paon .parcours-card:hover .parcours-link {
      color: var(--color-text-title);
    }

    body.v-paon .presentation {
      background: var(--color-bg-alt);
    }

    body.v-paon .cabinet {
      background: var(--color-bg);
    }
    body.v-paon .info-block h3 {
      color: var(--color-text-title);
    }
    body.v-paon .info-icon {
      background: rgba(212, 169, 106, 0.15);
    }

    body.v-paon .faq-item {
      border-color: rgba(212, 169, 106, 0.15);
    }
    body.v-paon .faq-item:first-child {
      border-top-color: rgba(212, 169, 106, 0.15);
    }
    body.v-paon .faq-question {
      color: var(--color-text-title);
    }
    body.v-paon .faq-question:hover {
      color: var(--color-accent-light);
    }
    body.v-paon .faq-question::after {
      color: var(--color-accent);
    }

    body.v-paon .cta-section {
      background: var(--color-bg-alt);
      border-top: 1px solid rgba(212, 169, 106, 0.15);
      border-bottom: 1px solid rgba(212, 169, 106, 0.15);
    }
    body.v-paon .cta-section h2 {
      color: var(--color-text-title);
    }
    body.v-paon .btn-white {
      background: var(--color-accent);
      color: var(--color-bg);
    }
    body.v-paon .btn-white:hover {
      background: var(--color-accent-light);
      box-shadow: 0 6px 24px rgba(212, 169, 106, 0.3);
    }

    body.v-paon footer {
      background: var(--color-concrete);
      border-top: 1px solid rgba(212, 169, 106, 0.1);
    }
    body.v-paon footer h4 {
      color: var(--color-accent);
    }
    body.v-paon footer a:hover {
      color: var(--color-accent-light);
    }
    body.v-paon .footer-bottom {
      border-top-color: rgba(212, 169, 106, 0.1);
    }

    body.v-paon .cabinet-map iframe {
      filter: invert(0.88) hue-rotate(170deg) saturate(0.4) brightness(0.8);
    }

    body.v-paon .nav-links.active {
      background: var(--color-bg-alt);
      border-bottom-color: rgba(212, 169, 106, 0.15);
    }
    body.v-paon .nav-toggle span {
      background: var(--color-accent-light);
    }

    /* ============================================
       VARIANTE 5 : SOBRE — Photo en ellipse, fondu doux
       ============================================ */
    body.v-sobre .hero-photo-bg {
      width: 55%;
      -webkit-mask-image: radial-gradient(
        ellipse 65% 85% at 78% 50%,
        rgba(0,0,0,1) 28%,
        rgba(0,0,0,0.6) 55%,
        rgba(0,0,0,0) 82%
      );
      mask-image: radial-gradient(
        ellipse 65% 85% at 78% 50%,
        rgba(0,0,0,1) 28%,
        rgba(0,0,0,0.6) 55%,
        rgba(0,0,0,0) 82%
      );
    }

    body.v-sobre .hero-photo-bg::after,
    body.v-sobre .hero-photo-bg::before {
      display: none;
    }

    body.v-sobre .hero-content {
      max-width: 580px;
    }

    body.v-sobre .hero h1 {
      font-size: clamp(2.6rem, 5.5vw, 3.8rem);
    }

    @media (max-width: 900px) {
      body.v-sobre .hero-photo-bg {
        width: 100%;
        opacity: 0.25;
        -webkit-mask-image: radial-gradient(
          ellipse 90% 70% at 50% 30%,
          rgba(0,0,0,1) 30%,
          rgba(0,0,0,0) 80%
        );
        mask-image: radial-gradient(
          ellipse 90% 70% at 50% 30%,
          rgba(0,0,0,1) 30%,
          rgba(0,0,0,0) 80%
        );
      }
    }


    /* ============================================
       VARIANTE 7 : COSY B — Palette enrichie cabinet réel
       ============================================ */
    body.v-cosyb {
      --color-primary: #22536A;
      --color-primary-light: #4B7B92;
      --color-primary-dark: #15384A;
      --color-accent: #D45A2A;
      --color-accent-light: #E88454;
      --color-accent-secondary: #E8B89A;
      --color-accent-wood: #A07355;
      --color-bg: #F4EFE6;
      --color-bg-alt: #EBE2D4;
      --color-bg-warm: #EFE7D8;
      --color-text-title: #1A1812;
      --color-text: #4A4238;
      --color-text-light: #7A6E60;
      --color-concrete: #2E2A24;
      --color-white: #FDFAF4;
    }

    body.v-cosyb .hero-tag {
      color: var(--color-accent);
    }
    body.v-cosyb .section-tag {
      color: var(--color-accent);
    }
    body.v-cosyb .btn-primary {
      background: var(--color-accent);
      color: var(--color-white);
    }
    body.v-cosyb .btn-primary:hover {
      background: var(--color-accent-light);
      box-shadow: 0 6px 24px rgba(212, 90, 42, 0.25);
    }
    body.v-cosyb .btn-outline {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }
    body.v-cosyb .btn-outline:hover {
      background: var(--color-accent);
      color: var(--color-white);
    }
    body.v-cosyb .nav-cta {
      background: var(--color-accent) !important;
      color: var(--color-white) !important;
    }
    body.v-cosyb .nav-cta:hover {
      background: var(--color-accent-light) !important;
    }
    body.v-cosyb .nav-logo-tag {
      color: var(--color-accent);
    }
    body.v-cosyb .nav-links a.active::after {
      background: var(--color-accent);
    }
    body.v-cosyb .domaine-card,
    body.v-cosyb .info-card,
    body.v-cosyb .parcours-card,
    body.v-cosyb .benefit-card {
      border-color: rgba(212, 90, 42, 0.18);
    }
    body.v-cosyb .parcours-card:hover {
      border-color: rgba(212, 90, 42, 0.35);
    }
    body.v-cosyb .parcours-separator {
      background: var(--color-accent);
      opacity: 0.4;
    }
    body.v-cosyb .step-number {
      background: var(--color-accent);
      color: var(--color-white);
    }
    body.v-cosyb .step-timeline::before {
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
      opacity: 0.3;
    }
    body.v-cosyb .step-link,
    body.v-cosyb .parcours-link {
      color: var(--color-accent);
    }
    body.v-cosyb .step-link:hover {
      color: var(--color-accent-light);
    }
    body.v-cosyb .diplomas li::before,
    body.v-cosyb .info-card li::before,
    body.v-cosyb .domaine-featured-info li::before {
      background: var(--color-accent);
    }
    body.v-cosyb .cta-section {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    }
    body.v-cosyb .btn-white {
      background: var(--color-white);
      color: var(--color-accent);
    }
    body.v-cosyb footer {
      background: var(--color-concrete);
    }
    body.v-cosyb footer h4 {
      color: var(--color-accent-light);
    }
    body.v-cosyb .domaine-featured {
      background: var(--color-primary);
      color: var(--color-white);
    }
    body.v-cosyb .domaine-featured h3 {
      color: var(--color-white);
    }
    body.v-cosyb .domaine-featured .tag {
      color: var(--color-accent-light);
    }
    body.v-cosyb .domaine-featured-link {
      color: var(--color-accent-light);
    }
    body.v-cosyb .domaine-featured-link:hover {
      color: var(--color-white);
    }
    body.v-cosyb .faq-question::after {
      color: var(--color-accent);
    }
    body.v-cosyb .faq-item {
      border-bottom-color: rgba(212, 90, 42, 0.2);
    }
    body.v-cosyb .faq-item:first-child {
      border-top-color: rgba(212, 90, 42, 0.2);
    }

    /* Hero photo plus large pour Cosy B + photo riche */
    body.v-cosyb .hero-photo-bg {
      width: 62%;
    }
    body.v-cosyb .hero-photo-bg img {
      object-position: 55% 12%;
      filter: brightness(1.04) saturate(1.06);
    }
    body.v-cosyb .hero-photo-bg::after {
      width: 45%;
      background: linear-gradient(to right, var(--color-bg-warm) 15%, transparent 100%);
    }


    /* ============================================
       VARIANTE 8 : POT ORANGE — accent plus vif (pot cactus)
       ============================================ */
    body.v-orange {
      --color-primary: #22536A;
      --color-primary-light: #4B7B92;
      --color-primary-dark: #15384A;
      --color-accent: #E55A2B;
      --color-accent-light: #F47A4E;
      --color-accent-secondary: #E8B89A;
      --color-accent-wood: #A07355;
      --color-bg: #F4EFE6;
      --color-bg-alt: #EBE2D4;
      --color-bg-warm: #EFE7D8;
      --color-text-title: #1A1812;
      --color-text: #4A4238;
      --color-text-light: #7A6E60;
      --color-concrete: #2E2A24;
      --color-white: #FDFAF4;
    }
    body.v-orange .hero-tag,
    body.v-orange .section-tag,
    body.v-orange .nav-logo-tag,
    body.v-orange .step-link,
    body.v-orange .parcours-link,
    body.v-orange .faq-question::after { color: var(--color-accent); }
    body.v-orange .btn-primary,
    body.v-orange .nav-cta,
    body.v-orange .step-number,
    body.v-orange .nav-links a.active::after { background: var(--color-accent); }
    body.v-orange .btn-primary { color: var(--color-white); }
    body.v-orange .nav-cta { color: var(--color-white) !important; background: var(--color-accent) !important; }
    body.v-orange .btn-primary:hover { background: var(--color-accent-light); box-shadow: 0 6px 24px rgba(229, 90, 43, 0.3); }
    body.v-orange .nav-cta:hover { background: var(--color-accent-light) !important; }
    body.v-orange .btn-outline { border-color: var(--color-accent); color: var(--color-accent); }
    body.v-orange .btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
    body.v-orange .parcours-card,
    body.v-orange .info-card,
    body.v-orange .benefit-card,
    body.v-orange .domaine-card { border-color: rgba(229, 90, 43, 0.18); }
    body.v-orange .parcours-card:hover { border-color: rgba(229, 90, 43, 0.4); }
    body.v-orange .parcours-separator { background: var(--color-accent); opacity: 0.45; }
    body.v-orange .step-timeline::before { background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent)); opacity: 0.35; }
    body.v-orange .diplomas li::before,
    body.v-orange .info-card li::before,
    body.v-orange .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-orange .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-orange .btn-white { background: var(--color-white); color: var(--color-accent); }
    body.v-orange footer { background: var(--color-concrete); }
    body.v-orange footer h4 { color: var(--color-accent-light); }
    body.v-orange .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-orange .domaine-featured h3 { color: var(--color-white); }
    body.v-orange .domaine-featured-link { color: var(--color-accent-light); }
    body.v-orange .hero-photo-bg { width: 62%; }
    body.v-orange .hero-photo-bg img { object-position: 55% 12%; filter: brightness(1.04) saturate(1.06); }
    body.v-orange .hero-photo-bg::after { width: 45%; background: linear-gradient(to right, var(--color-bg-warm) 15%, transparent 100%); }
    body.v-orange .faq-item { border-bottom-color: rgba(229, 90, 43, 0.2); }
    body.v-orange .faq-item:first-child { border-top-color: rgba(229, 90, 43, 0.2); }

    /* ============================================
       VARIANTE 9 : MUR CANARD — couleur exacte du mur
       ============================================ */
    body.v-canard {
      --color-primary: #1B5E72;
      --color-primary-light: #3A7A8C;
      --color-primary-dark: #0F3E4A;
      --color-accent: #C49A6C;
      --color-accent-light: #D4B48E;
      --color-accent-secondary: #E0CFB5;
      --color-accent-wood: #A07355;
      --color-bg: #EFF0EC;
      --color-bg-alt: #E7E8E2;
      --color-bg-warm: #E8E5DD;
      --color-text-title: #1A1F22;
      --color-text: #4A4E50;
      --color-text-light: #6E7274;
      --color-concrete: #1B5E72;
      --color-white: #FAFAF6;
    }
    body.v-canard .hero-tag,
    body.v-canard .section-tag,
    body.v-canard .nav-logo-tag,
    body.v-canard .step-link,
    body.v-canard .parcours-link,
    body.v-canard .faq-question::after { color: var(--color-accent); }
    body.v-canard .btn-primary { background: var(--color-primary); color: var(--color-white); }
    body.v-canard .btn-primary:hover { background: var(--color-primary-light); box-shadow: 0 6px 24px rgba(27, 78, 95, 0.3); }
    body.v-canard .nav-cta { background: var(--color-primary) !important; color: var(--color-white) !important; }
    body.v-canard .nav-cta:hover { background: var(--color-primary-light) !important; }
    body.v-canard .btn-outline { border-color: var(--color-primary); color: var(--color-primary); }
    body.v-canard .btn-outline:hover { background: var(--color-primary); color: var(--color-white); }
    body.v-canard .step-number { background: var(--color-accent); color: var(--color-white); }
    body.v-canard .nav-links a.active::after { background: var(--color-primary); }
    body.v-canard .parcours-card,
    body.v-canard .info-card,
    body.v-canard .benefit-card,
    body.v-canard .domaine-card { border-color: rgba(27, 78, 95, 0.18); }
    body.v-canard .parcours-card:hover { border-color: rgba(27, 78, 95, 0.4); }
    body.v-canard .parcours-separator { background: var(--color-primary); opacity: 0.45; }
    body.v-canard .step-timeline::before { background: linear-gradient(to bottom, var(--color-primary-light), var(--color-primary)); opacity: 0.4; }
    body.v-canard .diplomas li::before,
    body.v-canard .info-card li::before,
    body.v-canard .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-canard .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-canard .btn-white { background: var(--color-white); color: var(--color-primary); }
    body.v-canard footer { background: var(--color-primary-dark); }
    body.v-canard footer h4 { color: var(--color-accent-light); }
    body.v-canard .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-canard .domaine-featured h3 { color: var(--color-white); }
    body.v-canard .domaine-featured-link { color: var(--color-accent-light); }
    body.v-canard .hero-photo-bg { width: 62%; }
    body.v-canard .hero-photo-bg img { object-position: 55% 12%; filter: brightness(1.04) saturate(1.06); }
    body.v-canard .hero-photo-bg::after { width: 45%; background: linear-gradient(to right, var(--color-bg-warm) 15%, transparent 100%); }
    body.v-canard .faq-item { border-bottom-color: rgba(27, 78, 95, 0.2); }
    body.v-canard .faq-item:first-child { border-top-color: rgba(27, 78, 95, 0.2); }

    /* ============================================
       VARIANTE 10 : ÉPONGE — Cosy B + texture velours pull
       ============================================ */
    body.v-eponge {
      --color-primary: #22536A;
      --color-primary-light: #4B7B92;
      --color-primary-dark: #15384A;
      --color-accent: #D45A2A;
      --color-accent-light: #E88454;
      --color-accent-secondary: #E8B89A;
      --color-accent-wood: #A07355;
      --color-bg: #F4EFE6;
      --color-bg-alt: #EBE2D4;
      --color-bg-warm: #EFE7D8;
      --color-text-title: #1A1812;
      --color-text: #4A4238;
      --color-text-light: #7A6E60;
      --color-concrete: #2E2A24;
      --color-white: #FDFAF4;
    }
    body.v-eponge .hero-tag,
    body.v-eponge .section-tag,
    body.v-eponge .nav-logo-tag,
    body.v-eponge .step-link,
    body.v-eponge .parcours-link,
    body.v-eponge .faq-question::after { color: var(--color-accent); }
    body.v-eponge .btn-primary,
    body.v-eponge .nav-cta,
    body.v-eponge .step-number,
    body.v-eponge .nav-links a.active::after { background: var(--color-accent); }
    body.v-eponge .btn-primary { color: var(--color-white); }
    body.v-eponge .nav-cta { color: var(--color-white) !important; background: var(--color-accent) !important; }
    body.v-eponge .btn-primary:hover { background: var(--color-accent-light); box-shadow: 0 6px 24px rgba(212, 90, 42, 0.25); }
    body.v-eponge .nav-cta:hover { background: var(--color-accent-light) !important; }
    body.v-eponge .btn-outline { border-color: var(--color-accent); color: var(--color-accent); }
    body.v-eponge .btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
    body.v-eponge .parcours-card,
    body.v-eponge .info-card,
    body.v-eponge .benefit-card,
    body.v-eponge .domaine-card { border-color: rgba(212, 90, 42, 0.18); }
    body.v-eponge .parcours-card:hover { border-color: rgba(212, 90, 42, 0.4); }
    body.v-eponge .parcours-separator { background: var(--color-accent); opacity: 0.4; }
    body.v-eponge .step-timeline::before { background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent)); opacity: 0.3; }
    body.v-eponge .diplomas li::before,
    body.v-eponge .info-card li::before,
    body.v-eponge .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-eponge .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-eponge .btn-white { background: var(--color-white); color: var(--color-accent); }
    body.v-eponge footer { background: var(--color-concrete); }
    body.v-eponge footer h4 { color: var(--color-accent-light); }
    body.v-eponge .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-eponge .domaine-featured h3 { color: var(--color-white); }
    body.v-eponge .domaine-featured-link { color: var(--color-accent-light); }
    body.v-eponge .hero-photo-bg { width: 62%; }
    body.v-eponge .hero-photo-bg img { object-position: 55% 12%; filter: brightness(1.04) saturate(1.06); }
    body.v-eponge .hero-photo-bg::after { width: 45%; background: linear-gradient(to right, var(--color-bg-warm) 15%, transparent 100%); }
    body.v-eponge .faq-item { border-bottom-color: rgba(212, 90, 42, 0.2); }
    body.v-eponge .faq-item:first-child { border-top-color: rgba(212, 90, 42, 0.2); }

    /* Texture éponge / velours sur la zone texte du hero */
    body.v-eponge .hero {
      background: var(--color-bg-warm);
      background-image:
        radial-gradient(circle at 0% 50%, rgba(232, 184, 154, 0.25), transparent 55%),
        url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/><feColorMatrix values=%220 0 0 0 0.91  0 0 0 0 0.72  0 0 0 0 0.60  0 0 0 0.35 0%22/></filter><rect width=%22240%22 height=%22240%22 filter=%22url(%23n)%22 opacity=%220.5%22/></svg>");
      background-blend-mode: multiply, normal;
    }
    body.v-eponge .hero-photo-bg::after {
      background: linear-gradient(to right, var(--color-bg-warm) 20%, transparent 100%);
    }


    /* ============================================
       GRILLE PHOTO DUO - 2 photos côte-à-côte avec légende
       ============================================ */
    .photo-duo {
      max-width: 900px;
      margin: 2.5rem auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    .photo-duo figure {
      margin: 0;
    }
    .photo-duo img {
      width: 100%;
      height: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(42, 37, 32, 0.10);
      display: block;
    }
    .photo-duo figcaption {
      font-size: 0.82rem;
      color: var(--color-text-light);
      text-align: center;
      margin-top: 0.6rem;
      font-style: italic;
    }
    @media (max-width: 700px) {
      .photo-duo { grid-template-columns: 1fr; gap: 1.5rem; }
    }

    /* Photo solo immersive (entre les sections) */
    .photo-feature {
      max-width: 1100px;
      margin: 3rem auto;
      position: relative;
    }
    .photo-feature img {
      width: 100%;
      max-height: 520px;
      aspect-ratio: 16/10;
      object-fit: cover;
      border-radius: var(--radius);
      box-shadow: 0 12px 32px rgba(42, 37, 32, 0.15);
      display: block;
    }
    .photo-feature .photo-caption-box {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      padding: 1rem 1.5rem;
      background: rgba(255, 253, 249, 0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 8px;
      max-width: 480px;
    }
    .photo-feature.photo-feature-right .photo-caption-box {
      left: auto;
      right: 1.5rem;
    }
    .photo-feature .photo-caption-box strong {
      display: block;
      font-family: var(--font-sans);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
      color: var(--color-text-title);
      margin-bottom: 0.3rem;
    }
    .photo-feature .photo-caption-box em {
      font-style: normal;
      font-size: 0.85rem;
      color: var(--color-text);
    }
    @media (max-width: 700px) {
      .photo-feature .photo-caption-box {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: 100%;
      }
    }


    /* ============================================
       VARIANTE K : ÉNERGIE — Cosy A + accent jaune curry
       ============================================ */
    body.v-energie {
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #C9A22A;
      --color-accent-light: #DFBE56;
      --color-bg: #F7F4EF;
      --color-bg-alt: #F0EDE6;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-concrete: #3D3A38;
      --color-white: #FFFDF9;
    }
    body.v-energie .hero-tag,
    body.v-energie .section-tag,
    body.v-energie .nav-logo-tag,
    body.v-energie .step-link,
    body.v-energie .parcours-link,
    body.v-energie .faq-question::after { color: var(--color-accent); }
    body.v-energie .btn-outline {
      border-color: var(--color-accent);
      color: var(--color-accent);
    }
    body.v-energie .btn-outline:hover {
      background: var(--color-accent);
      color: var(--color-white);
    }
    body.v-energie .step-number { background: var(--color-accent); color: var(--color-white); }
    body.v-energie .nav-links a.active::after { background: var(--color-accent); }
    body.v-energie .parcours-card,
    body.v-energie .info-card,
    body.v-energie .benefit-card,
    body.v-energie .domaine-card { border-color: rgba(201, 162, 42, 0.22); }
    body.v-energie .parcours-card:hover { border-color: rgba(201, 162, 42, 0.45); }
    body.v-energie .parcours-separator { background: var(--color-accent); opacity: 0.4; }
    body.v-energie .step-timeline::before {
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
      opacity: 0.35;
    }
    body.v-energie .diplomas li::before,
    body.v-energie .info-card li::before,
    body.v-energie .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-energie .cta-section {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    }
    body.v-energie .btn-white {
      background: var(--color-white);
      color: var(--color-accent);
    }
    body.v-energie footer { background: var(--color-concrete); }
    body.v-energie footer h4 { color: var(--color-accent-light); }
    body.v-energie .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-energie .domaine-featured h3 { color: var(--color-white); }
    body.v-energie .domaine-featured-link { color: var(--color-accent-light); }
    body.v-energie .faq-item { border-bottom-color: rgba(201, 162, 42, 0.25); }
    body.v-energie .faq-item:first-child { border-top-color: rgba(201, 162, 42, 0.25); }

    /* ============================================
       VARIANTES L, M, N, O — Alternatives accent énergie
       ============================================ */

    /* L · CORAIL VIF #F25F4C */
    body.v-corail {
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #F25F4C;
      --color-accent-light: #F58575;
      --color-bg: #F7F4EF;
      --color-bg-alt: #F0EDE6;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-concrete: #3D3A38;
      --color-white: #FFFDF9;
    }
    body.v-corail .hero-tag, body.v-corail .section-tag, body.v-corail .nav-logo-tag,
    body.v-corail .step-link, body.v-corail .parcours-link,
    body.v-corail .faq-question::after { color: var(--color-accent); }
    body.v-corail .btn-outline { border-color: var(--color-accent); color: var(--color-accent); }
    body.v-corail .btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
    body.v-corail .step-number { background: var(--color-accent); color: var(--color-white); }
    body.v-corail .nav-links a.active::after { background: var(--color-accent); }
    body.v-corail .parcours-card, body.v-corail .info-card, body.v-corail .benefit-card,
    body.v-corail .domaine-card { border-color: rgba(242, 95, 76, 0.22); }
    body.v-corail .parcours-card:hover { border-color: rgba(242, 95, 76, 0.45); }
    body.v-corail .parcours-separator { background: var(--color-accent); opacity: 0.4; }
    body.v-corail .step-timeline::before {
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
      opacity: 0.35;
    }
    body.v-corail .diplomas li::before, body.v-corail .info-card li::before,
    body.v-corail .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-corail .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-corail .btn-white { background: var(--color-white); color: var(--color-accent); }
    body.v-corail footer { background: var(--color-concrete); }
    body.v-corail footer h4 { color: var(--color-accent-light); }
    body.v-corail .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-corail .domaine-featured h3 { color: var(--color-white); }
    body.v-corail .domaine-featured-link { color: var(--color-accent-light); }
    body.v-corail .faq-item { border-bottom-color: rgba(242, 95, 76, 0.25); }
    body.v-corail .faq-item:first-child { border-top-color: rgba(242, 95, 76, 0.25); }

    /* M · FRAMBOISE #D43F75 */
    body.v-framboise {
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #D43F75;
      --color-accent-light: #E26890;
      --color-bg: #F7F4EF;
      --color-bg-alt: #F0EDE6;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-concrete: #3D3A38;
      --color-white: #FFFDF9;
    }
    body.v-framboise .hero-tag, body.v-framboise .section-tag, body.v-framboise .nav-logo-tag,
    body.v-framboise .step-link, body.v-framboise .parcours-link,
    body.v-framboise .faq-question::after { color: var(--color-accent); }
    body.v-framboise .btn-outline { border-color: var(--color-accent); color: var(--color-accent); }
    body.v-framboise .btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
    body.v-framboise .step-number { background: var(--color-accent); color: var(--color-white); }
    body.v-framboise .nav-links a.active::after { background: var(--color-accent); }
    body.v-framboise .parcours-card, body.v-framboise .info-card, body.v-framboise .benefit-card,
    body.v-framboise .domaine-card { border-color: rgba(212, 63, 117, 0.22); }
    body.v-framboise .parcours-card:hover { border-color: rgba(212, 63, 117, 0.45); }
    body.v-framboise .parcours-separator { background: var(--color-accent); opacity: 0.4; }
    body.v-framboise .step-timeline::before {
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
      opacity: 0.35;
    }
    body.v-framboise .diplomas li::before, body.v-framboise .info-card li::before,
    body.v-framboise .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-framboise .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-framboise .btn-white { background: var(--color-white); color: var(--color-accent); }
    body.v-framboise footer { background: var(--color-concrete); }
    body.v-framboise footer h4 { color: var(--color-accent-light); }
    body.v-framboise .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-framboise .domaine-featured h3 { color: var(--color-white); }
    body.v-framboise .domaine-featured-link { color: var(--color-accent-light); }
    body.v-framboise .faq-item { border-bottom-color: rgba(212, 63, 117, 0.25); }
    body.v-framboise .faq-item:first-child { border-top-color: rgba(212, 63, 117, 0.25); }

    /* N · ROUILLE SAUMON #E8765A */
    body.v-rouille {
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #E8765A;
      --color-accent-light: #F09782;
      --color-bg: #F7F4EF;
      --color-bg-alt: #F0EDE6;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-concrete: #3D3A38;
      --color-white: #FFFDF9;
    }
    body.v-rouille .hero-tag, body.v-rouille .section-tag, body.v-rouille .nav-logo-tag,
    body.v-rouille .step-link, body.v-rouille .parcours-link,
    body.v-rouille .faq-question::after { color: var(--color-accent); }
    body.v-rouille .btn-outline { border-color: var(--color-accent); color: var(--color-accent); }
    body.v-rouille .btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
    body.v-rouille .step-number { background: var(--color-accent); color: var(--color-white); }
    body.v-rouille .nav-links a.active::after { background: var(--color-accent); }
    body.v-rouille .parcours-card, body.v-rouille .info-card, body.v-rouille .benefit-card,
    body.v-rouille .domaine-card { border-color: rgba(232, 118, 90, 0.22); }
    body.v-rouille .parcours-card:hover { border-color: rgba(232, 118, 90, 0.45); }
    body.v-rouille .parcours-separator { background: var(--color-accent); opacity: 0.4; }
    body.v-rouille .step-timeline::before {
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
      opacity: 0.35;
    }
    body.v-rouille .diplomas li::before, body.v-rouille .info-card li::before,
    body.v-rouille .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-rouille .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-rouille .btn-white { background: var(--color-white); color: var(--color-accent); }
    body.v-rouille footer { background: var(--color-concrete); }
    body.v-rouille footer h4 { color: var(--color-accent-light); }
    body.v-rouille .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-rouille .domaine-featured h3 { color: var(--color-white); }
    body.v-rouille .domaine-featured-link { color: var(--color-accent-light); }
    body.v-rouille .faq-item { border-bottom-color: rgba(232, 118, 90, 0.25); }
    body.v-rouille .faq-item:first-child { border-top-color: rgba(232, 118, 90, 0.25); }

    /* O · OLIVE VIF #94A229 */
    body.v-olive {
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #94A229;
      --color-accent-light: #B0BA5C;
      --color-bg: #F7F4EF;
      --color-bg-alt: #F0EDE6;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-concrete: #3D3A38;
      --color-white: #FFFDF9;
    }
    body.v-olive .hero-tag, body.v-olive .section-tag, body.v-olive .nav-logo-tag,
    body.v-olive .step-link, body.v-olive .parcours-link,
    body.v-olive .faq-question::after { color: var(--color-accent); }
    body.v-olive .btn-outline { border-color: var(--color-accent); color: var(--color-accent); }
    body.v-olive .btn-outline:hover { background: var(--color-accent); color: var(--color-white); }
    body.v-olive .step-number { background: var(--color-accent); color: var(--color-white); }
    body.v-olive .nav-links a.active::after { background: var(--color-accent); }
    body.v-olive .parcours-card, body.v-olive .info-card, body.v-olive .benefit-card,
    body.v-olive .domaine-card { border-color: rgba(148, 162, 41, 0.22); }
    body.v-olive .parcours-card:hover { border-color: rgba(148, 162, 41, 0.45); }
    body.v-olive .parcours-separator { background: var(--color-accent); opacity: 0.4; }
    body.v-olive .step-timeline::before {
      background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent));
      opacity: 0.35;
    }
    body.v-olive .diplomas li::before, body.v-olive .info-card li::before,
    body.v-olive .domaine-featured-info li::before { background: var(--color-accent); }
    body.v-olive .cta-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
    body.v-olive .btn-white { background: var(--color-white); color: var(--color-accent); }
    body.v-olive footer { background: var(--color-concrete); }
    body.v-olive footer h4 { color: var(--color-accent-light); }
    body.v-olive .domaine-featured { background: var(--color-primary); color: var(--color-white); }
    body.v-olive .domaine-featured h3 { color: var(--color-white); }
    body.v-olive .domaine-featured-link { color: var(--color-accent-light); }
    body.v-olive .faq-item { border-bottom-color: rgba(148, 162, 41, 0.25); }
    body.v-olive .faq-item:first-child { border-top-color: rgba(148, 162, 41, 0.25); }

    /* ============================================
       VARIANTE P : IMMERSIVE — Photo Maud sur 2/3 de l'écran
       ============================================ */
    body.v-immersive {
      /* Hérite de Cosy A pour les couleurs */
      --color-primary: #1A6B7D;
      --color-primary-light: #3A8D9E;
      --color-primary-dark: #0E4F5E;
      --color-accent: #C49A6C;
      --color-accent-light: #D4B48E;
      --color-bg: #F7F4EF;
      --color-bg-alt: #F0EDE6;
      --color-bg-warm: #F2EDE5;
      --color-text-title: #2A2520;
      --color-text: #5C5650;
      --color-text-light: #6E6862;
      --color-concrete: #3D3A38;
      --color-white: #FFFDF9;
    }

    /* Photo prend les 2/3 de l'écran */
    body.v-immersive .hero-photo-bg {
      width: 67%;
    }

    /* Dégradé adouci sur la zone texte (gauche) */
    body.v-immersive .hero-photo-bg::after {
      width: 50%;
      background: linear-gradient(to right, var(--color-bg-warm) 8%, rgba(247, 244, 239, 0.4) 60%, transparent 100%);
    }

    /* Léger fondu en bas pour cohérence */
    body.v-immersive .hero-photo-bg::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 12%;
      background: linear-gradient(to top, var(--color-bg-warm), transparent);
      z-index: 1;
    }

    /* Texte un peu plus compact pour laisser respirer */
    body.v-immersive .hero-content {
      max-width: 460px;
    }

    /* Mobile : photo en background semi-transparent comme avant */
    @media (max-width: 900px) {
      body.v-immersive .hero-photo-bg {
        width: 100%;
        opacity: 0.25;
      }
      body.v-immersive .hero-photo-bg::after {
        width: 100%;
        background: linear-gradient(to top, var(--color-bg-warm) 30%, transparent 90%);
      }
    }

    /* ============================================
       LAYOUT PHOTO-SIDE : photo + texte côte à côte
       ============================================ */
    .photo-side {
      max-width: 1000px;
      margin: 3rem auto;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 3rem;
      align-items: center;
    }
    .photo-side-img {
      /* Réserve l'espace vertical avant le chargement de l'image (photos 3:4 vertical).
         Placé sur le CONTAINER (pas l'img) pour être indépendant de la taille naturelle
         de l'img : évite le layout shift qui décalait les ancres comme #au-cabinet. */
      width: 100%;
      aspect-ratio: 3 / 4;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 12px 32px rgba(42, 37, 32, 0.14);
    }
    .photo-side-img img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    .photo-side-content h3 {
      font-family: var(--font-sans);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      -webkit-font-smoothing: antialiased;
      color: var(--color-text-title);
      margin-bottom: 0.9rem;
      line-height: 1.3;
    }
    .photo-side-content p {
      font-size: 1rem;
      color: var(--color-text);
      line-height: 1.65;
      font-weight: 400;
      margin-bottom: 0.8rem;
    }
    .photo-side-content p:last-child {
      margin-bottom: 0;
    }
    /* Variante : photo à droite */
    .photo-side.photo-side-reverse {
      grid-template-columns: 7fr 5fr;
    }
    .photo-side.photo-side-reverse .photo-side-content { order: -1; }
    @media (max-width: 800px) {
      .photo-side, .photo-side.photo-side-reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }
      .photo-side-img {
        max-width: 400px;
        margin: 0 auto;
      }
      .photo-side.photo-side-reverse .photo-side-content { order: 0; }
    }

    /* ============================================
       HOVER BLEU + ICONS pour les cartes parcours
       ============================================ */
    .parcours-header {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-bottom: 0.6rem;
    }
    .parcours-header h3 {
      margin-bottom: 0 !important;
      flex: 1;
    }
    .parcours-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      color: var(--color-accent);
      transition: color 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: center;
    }
    .parcours-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .parcours-card {
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    /* Animation icône au hover : léger soulèvement doux (sans rotation) */
    @keyframes icon-soft-rise {
      0%   { transform: translateY(0) scale(1); }
      50%  { transform: translateY(-3px) scale(1.06); }
      100% { transform: translateY(0) scale(1); }
    }
    a.parcours-card:hover .parcours-icon,
    .parcours-card.has-icon-hover:hover .parcours-icon {
      animation: icon-soft-rise 0.9s ease-in-out;
    }
    .parcours-card.has-icon-hover {
      cursor: default;
    }
    a.parcours-card:hover,
    .parcours-card.has-icon-hover:hover {
      background: var(--color-primary);
      border-color: var(--color-primary);
      box-shadow: 0 12px 40px rgba(26, 107, 125, 0.25);
      transform: translateY(-4px);
    }
    a.parcours-card:hover h3,
    a.parcours-card:hover .parcours-vous,
    a.parcours-card:hover .parcours-reponse,
    a.parcours-card:hover .parcours-vous strong,
    a.parcours-card:hover .parcours-reponse strong,
    a.parcours-card:hover .parcours-link,
    .parcours-card.has-icon-hover:hover h3,
    .parcours-card.has-icon-hover:hover .parcours-vous,
    .parcours-card.has-icon-hover:hover .parcours-reponse,
    .parcours-card.has-icon-hover:hover .parcours-vous strong,
    .parcours-card.has-icon-hover:hover .parcours-reponse strong,
    .parcours-card.has-icon-hover:hover .parcours-link {
      color: #FFFDF9;
    }
    a.parcours-card:hover .parcours-vous,
    a.parcours-card:hover .parcours-reponse,
    .parcours-card.has-icon-hover:hover .parcours-vous,
    .parcours-card.has-icon-hover:hover .parcours-reponse {
      color: rgba(255, 253, 249, 0.88);
    }
    a.parcours-card:hover .parcours-separator,
    .parcours-card.has-icon-hover:hover .parcours-separator {
      background: rgba(255, 253, 249, 0.35);
    }
    a.parcours-card:hover .parcours-icon,
    .parcours-card.has-icon-hover:hover .parcours-icon {
      color: #FFFDF9;
    }

    /* ============================================
       HERO MÉDAILLON — Page Votre thérapeute
       Photo circulaire centrée sur le visage, texte à gauche,
       backdrop subtil terre cuite, anneau accent fin.
       ============================================ */
    .hero-medaillon {
      padding: 5rem 3rem 6rem;
      background: var(--color-bg);
      overflow: hidden;
      position: relative;
    }
    .hero-medaillon-inner {
      max-width: var(--max-width);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .hero-medaillon-content {
      display: flex;
      flex-direction: column;
      gap: 1.3rem;
      width: 100%;
    }
    .hero-medaillon-content .hero-tag {
      margin-bottom: 0.2rem;
    }
    .hero-medaillon-content h1 {
      margin: 0 0 0.4rem;
    }
    .hero-medaillon-lead {
      font-size: 1.05rem;
      line-height: 1.65;
      color: var(--color-text);
      max-width: 520px;
      margin: 0;
    }
    .hero-medaillon-content .hero-buttons {
      margin-top: 1.4rem;
    }

    /* Photo dans sa cellule grid, aspect-ratio vertical, fondu décoratif à gauche */
    .hero-medaillon-photo {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5;
      overflow: hidden;
    }
    .medaillon-frame {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .medaillon-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 55% 22%;
      display: block;
    }
    .medaillon-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--color-bg) 0%, transparent 40%);
      pointer-events: none;
    }

    /* ---- Mobile ---- */
    @media (max-width: 900px) {
      .hero-medaillon {
        padding: 3rem 1.5rem 3.5rem;
      }
      .hero-medaillon-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .hero-medaillon-photo {
        order: -1;
        aspect-ratio: 4 / 3;
      }
      .medaillon-frame::after {
        display: none;
      }
    }

    /* ---- Cohérence avec variantes existantes ---- */
    /* Sur fond sombre (immersive, theatre) : backdrop plus chaud, anneau plus visible */
    body.v-immersive .hero-medaillon,
    body.v-theatre .hero-medaillon {
      background: var(--color-bg);
    }
    body.v-immersive .medaillon-frame::after,
    body.v-theatre .medaillon-frame::after {
      opacity: 0.7;
    }

    /* ============================================
       ENGAGEMENTS — Section "Trois engagements pour vous accueillir"
       Magazine éditorial sobre, grands chiffres en accent
       (remplace l'ancienne section "Pourquoi Maud Masson ?")
       ============================================ */
    .engagements {
      background: var(--color-bg);
      padding: 6rem 1.5rem;
    }
    .engagements-inner {
      max-width: 1100px;
      margin: 0 auto;
    }
    .engagements-header {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 4rem;
    }
    .engagements-tag {
      display: block;
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 1.2rem;
    }
    .engagements-title {
      font-family: var(--font-serif);
      font-size: clamp(2rem, 4vw, 2.8rem);
      color: var(--color-text-title);
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin: 0;
    }
    .engagements-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3.5rem;
    }
    .engagement-pillar { position: relative; }
    .engagement-number {
      font-family: var(--font-serif);
      font-size: clamp(3rem, 5vw, 4.5rem);
      color: var(--color-accent);
      line-height: 1;
      margin-bottom: 1.2rem;
      letter-spacing: -0.04em;
    }
    .engagement-title {
      font-family: var(--font-sans);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--color-text-title);
      margin-bottom: 0.8rem;
      line-height: 1.3;
      -webkit-font-smoothing: antialiased;
    }
    .engagement-text {
      font-size: 0.98rem;
      color: var(--color-text);
      line-height: 1.65;
    }
    @media (max-width: 800px) {
      .engagements { padding: 4rem 1.5rem; }
      .engagements-header { margin-bottom: 3rem; }
      .engagements-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    }

    /* Point discret d'accès à l'espace privé Maud (footer) */
    .footer-bullet {
      display: inline-block;
      color: var(--color-text-light);
      opacity: 0.35;
      font-size: 1.4rem;
      line-height: 1;
      text-decoration: none;
      margin-left: 0.8rem;
      vertical-align: middle;
      transition: opacity 0.3s;
    }
    .footer-bullet:hover {
      opacity: 0.7;
    }

    /* Lien discret Administration (footer) */
    .footer-admin-link {
      display: inline-block;
      margin-left: 0.8rem;
      font-family: var(--font-sans);
      font-size: 0.75rem;
      color: var(--color-text-light);
      opacity: 0.55;
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: opacity 0.3s, color 0.3s;
    }
    .footer-admin-link:hover {
      opacity: 1;
      color: var(--color-primary);
      text-decoration: underline;
    }

    /* ============================================
       PAGE /votre-therapeute — structure titre-manifest définitive
       Photo lunettes en hero, titre "Mon histoire de femme,
       au cœur de ma pratique de soin." + signature H1 "— Maud Masson"
       + credentials "Kinésithérapeute D.E. depuis plus de 25 ans"
       ============================================ */

    /* Hauteur du hero-portrait réduite en desktop : min-height 70vh au lieu de 100vh.
       Cadrage photo lunettes : décalage minimal vers le haut pour montrer
       intégralement la tête (la règle générale 55% 12% coupait le crâne). */
    @media (min-width: 901px) {
      .hero.hero-portrait {
        min-height: 70vh;
      }
      /* Décale la photo sous la nav fixed (qui masque les ~72 premiers pixels).
         Sans ce décalage, la tête de Maud (haut de l'image) est cachée par la nav. */
      .hero-portrait .hero-photo-bg {
        top: 72px !important;
        height: calc(100% - 72px) !important;
      }
      /* Ancrage au haut de l'image pour montrer intégralement la tête */
      .hero-portrait .hero-photo-bg img {
        object-position: 55% 8% !important;
      }
    }

    /* Titre-manifest dominant : la phrase-histoire prend la place du H1 visuel.
       Taille identique au H1 home ("Et si on en parlait ?").
       Sémantiquement <p>, visuellement dominant.
       !important nécessaire pour battre `.hero p` (spécificité 0,1,1 qui écrase 0,1,0). */
    .hero-title-story {
      font-family: var(--font-serif) !important;
      font-style: normal !important;
      font-size: clamp(2.04rem, 4.25vw, 2.89rem) !important;
      font-weight: 700 !important;
      line-height: 1.15 !important;
      color: var(--color-text-title) !important;
      margin: 0 0 1.2rem !important;
      max-width: 680px !important;
      text-wrap: balance;
    }

    /* Signature H1 (SEO) : le nom en signature discrète, comme un auteur d'article.
       Le tiret cadratin est dans le HTML (pas ::before) pour rester dans le H1. */
    .hero-title-name {
      font-family: var(--font-serif) !important;
      font-style: italic !important;
      font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
      font-weight: 400 !important;
      line-height: 1.4 !important;
      color: var(--color-primary) !important;
      margin: 0 0 1.2rem !important;
      white-space: normal !important;
      letter-spacing: 0.01em;
    }

    /* Ligne de crédibilité factuelle discrète, sous la signature */
    .hero-credentials {
      font-family: var(--font-sans);
      font-size: 0.85rem;
      color: var(--color-text-light);
      letter-spacing: 0.03em;
      margin: 0 0 2rem;
      font-weight: 500;
    }

    @media (max-width: 700px) {
      .hero-title-story {
        font-size: clamp(1.53rem, 6.8vw, 2.04rem) !important;
        margin: 0 auto 0.9rem !important;
        text-align: center;
      }
      .hero-title-name {
        text-align: center;
        margin: 0 auto 0.9rem !important;
      }
      .hero-credentials {
        text-align: center;
        margin: 0 auto 1.8rem;
        font-size: 0.78rem;
      }
    }

    /* Mobile hero-portrait : les 3 éléments texte prennent la couleur bleu canard
       pour être lisibles par-dessus l'overlay ivoire 78% de la photo plein cadre. */
    @media (max-width: 900px) {
      .hero-portrait .hero-title-story,
      .hero-portrait .hero-title-name,
      .hero-portrait .hero-credentials {
        color: var(--color-primary) !important;
      }
    }

    /* ============================================
       FAQ CENTRALE — page /faq.html
       Table des matières + CTA "Toutes les questions" sur home/fiches
       Ajouté 2026-07-26
       ============================================ */

    /* Table des matières — grille 3 col desktop, 1 col mobile */
    .faq-toc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem;
      margin-top: 1.5rem;
    }
    .faq-toc-card {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      padding: 1.4rem 1.2rem;
      background: var(--color-bg-warm);
      border: 1px solid rgba(196, 154, 108, 0.15);
      border-radius: var(--radius);
      text-decoration: none;
      color: inherit;
      transition: all 0.25s;
    }
    .faq-toc-card:hover {
      border-color: var(--color-accent);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(42, 37, 32, 0.06);
    }
    .faq-toc-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-primary);
      color: #FFFFFF;
      border-radius: 50%;
      font-family: var(--font-serif);
      font-size: 1rem;
      line-height: 1;
    }
    .faq-toc-card h3 {
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-text-title);
      margin: 0 0 0.35rem;
    }
    .faq-toc-card p {
      font-size: 0.85rem;
      color: var(--color-text-light);
      line-height: 1.5;
      margin: 0;
    }
    @media (max-width: 900px) {
      .faq-toc-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .faq-toc-grid {
        grid-template-columns: 1fr;
      }
    }

    /* CTA "Voir toutes les questions" (fin FAQ home + fiches soin) */
    .faq-more-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 2rem;
      padding: 0.75rem 1.4rem;
      background: transparent;
      color: var(--color-primary);
      border: 1.5px solid var(--color-primary);
      border-radius: 10px;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      transition: all 0.2s;
    }
    .faq-more-link:hover {
      background: var(--color-primary);
      color: #FFFFFF;
    }
    .faq-more-link::after {
      content: '→';
      font-weight: 400;
    }