/*
Theme Name: Regen'HairSkin
Theme URI: https://regenhairskin.fr
Author: Regen'HairSkin
Description: Thème sur-mesure administrable pour Regen'HairSkin — dermopigmentation & reconstruction capillaire. Couleurs, typographies, logo, menus et coordonnées pilotables depuis l'administration WordPress.
Version: 2.69
Text Domain: regenhairskin
*/

:root{
  --color-muted:#6a7674;
  --color-heading:#20302f;
  --color-link:#2c5057;
  --color-button:#2c5057;
  --font-heading:'Cormorant Garamond', Georgia, serif;
  --font-body:'Jost', sans-serif;
  --font-size-base:17px;
  --font-weight-body:400;
  --line:rgba(44,80,87,0.14);
  --radius:22px;

  /* Échelle des arrondis. Onze valeurs différentes coexistaient — 8, 9,
     10, 11, 12, 14, 16, 18, 20, 24, 26 et 32 px — posées au fil des
     ajouts sans jamais être confrontées entre elles. Deux encadrés
     voisins pouvaient donc afficher des coins visiblement différents.

       --radius      encadrés, cartes, panneaux
       --radius-md   images, boutons, sous-menus
       --radius-sm   éléments internes : puces, listes, tableaux
       --radius-pill boutons en pilule

     Reprendre une de ces valeurs plutôt que d'en inventer une nouvelle. */
  --radius-md:14px;
  --radius-sm:9px;
  --radius-pill:100px;
  --shadow:0 20px 50px -25px rgba(32,48,47,0.35);
  --ivory:#fffdf8;

  /* Teintes sable du bandeau d'avertissement. Elles dérivent du doré
     de la charte, assombri et désaturé : le vert reste ainsi réservé
     aux éléments qui appellent une action, et le sable dit « attention »
     sans la gravité d'un rouge. */
  --sand-bg:#f0e4d4;
  --sand-ink:#5a4326;
  --sand-picto:#8a6236;

  /* Teinte des bandeaux de titres. Elle n'est plus choisie à la main
     mais calculée à partir de la couleur principale : c'est bien votre
     vert, dilué à 9 %, et non un vert voisin plus gris. Elle suit donc
     le Personnalisateur — changer la couleur principale recolore les
     bandeaux d'elle-même.
     La valeur figée sert de repli aux navigateurs anciens. */
  --tint-green:#e8eeec;
  --tint-green:color-mix(in srgb, var(--color-primary) 9%, transparent);
}
*{box-sizing:border-box;
}
html{scroll-behavior:smooth;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-body);
  color:var(--color-ink);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:500;
  margin:0;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--color-heading);
}
/* Couleur du texte courant. Elle était réglée sur la teinte atténuée,
   réservée aux mentions secondaires : les paragraphes d'une page
   ordinaire s'affichaient donc en #6a7674 quand ceux d'un article ou
   d'une expertise étaient en #4c5a58. Deux gris pour une même fonction,
   d'où la disparité visible d'un bloc à l'autre. */
p{margin:0; color:var(--color-ink); line-height:1.7;
}
a{color:var(--color-link); text-decoration:none;
}
img{ display:block;
}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; text-transform:uppercase;
}
.eyebrow::before{content:"✦"; font-size:max(12px, calc(var(--font-size-base) * 0.647)); margin-right:2px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.882); font-weight:500;
  cursor:pointer; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{background:var(--color-button); color:var(--ivory);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(32,48,47,0.55);
}
.btn-outline{background:transparent; color:var(--color-primary); border-color:rgba(44,80,87,0.25);
}
.btn-outline:hover{border-color:var(--color-primary); transform:translateY(-2px);
}
.btn-gold{background:var(--color-secondary); color:var(--color-primary); font-weight:600;
}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(218,174,127,0.6);
}
/* Bouton "Prendre rendez-vous / Réserver un diagnostic"
   Forme rectangle arrondi, fond vert profond, double liseré doré, icône calendrier. */
.btn-booking{
  background:var(--color-primary);
  color:var(--ivory);
  border:1.5px solid var(--color-secondary);
  border-radius:var(--radius-md);
  padding:15px 26px;
  gap:12px;
  box-shadow:0 0 0 3px rgba(218,174,127,.28);
  font-weight:500;
}
.btn-booking:hover{
  background:#1e3d43;
  border-color:var(--color-accent-dark);
  box-shadow:0 0 0 4px rgba(218,174,127,.38), 0 12px 26px -12px rgba(32,48,47,.6);
  transform:translateY(-2px);
}
.btn-booking:active{transform:translateY(0);
}
.btn-booking .btn-icon{flex-shrink:0; color:var(--color-secondary); display:flex;
}

/* HEADER */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,241,234,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:0 auto; gap:24px;
}
.nav-links{display:flex; align-items:center; font-size:calc(var(--font-size-base) * 0.882); list-style:none; margin:0; padding:0;
}
.nav-links li{position:relative;
}
.nav-links a{color:var(--color-primary); position:relative; padding:4px 0; display:block;
}
.nav-links a:hover{color:var(--color-secondary);
}
.nav-links .sub-menu{
  display:none; position:absolute; top:100%; left:0; background:var(--ivory);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:10px; min-width:230px;
  box-shadow:var(--shadow); list-style:none; margin:10px 0 0; z-index:60;
}
.nav-links li:hover > .sub-menu{display:block;
}
.nav-links .sub-menu a{padding:8px 12px; border-radius:var(--radius-sm); font-size:calc(var(--font-size-base) * 0.824);
}
.nav-links .sub-menu a:hover{background:var(--color-bg);
}
.nav-cta{display:flex; align-items:center;
}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;
}
.burger span{width:24px; height:2px; background:var(--color-primary);
}

/* SEARCH */
.site-search{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-pill); padding:6px 14px; gap:8px; background:var(--ivory);
}
.site-search input{border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.794);
}

/* BACK TO TOP */
#back-to-top{
  position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%;
  background:var(--color-primary); color:var(--ivory); border:2px solid var(--color-secondary);
  display:none; align-items:center; justify-content:center; cursor:pointer; z-index:80;
  box-shadow:var(--shadow);
}
#back-to-top.show{display:flex;
}

section{padding:100px 0;
}
.section-head{max-width:640px; margin-bottom:56px;
}
.section-head h2{ margin-top:14px;
}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;
}
.page-header-simple h1{font-size:clamp(25px,2.8vw,30px);
}

/* Les articles n'ont pas d'en-tête dédié : ils héritaient des 100 px
   de remplissage d'une section ordinaire, quand les autres pages sont
   à 24 px depuis la refonte de leur en-tête. */
.single-article{ margin:0 auto;
}
.single-article-section{padding-top:24px;
}
.single-article h1{font-size:clamp(25px,2.8vw,30px); margin-bottom:24px;
}
.single-article .single-thumb{border-radius:var(--radius); overflow:hidden; margin-bottom:36px; aspect-ratio:16/9; background:linear-gradient(150deg,var(--color-primary),#12302f);
}
.single-article .single-thumb img{width:100%; height:100%; object-fit:cover;
}
.single-article .entry-content{font-size:calc(var(--font-size-base) * 0.971); color:var(--color-ink); line-height:1.85;
}
.single-article .entry-content p{color:var(--color-ink); margin-bottom:20px;
}
.back-link{display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; font-size:calc(var(--font-size-base) * 0.824); font-weight:600; color:var(--color-primary);
}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.article-card{background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;
}
.article-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);
}
.article-thumb{aspect-ratio:16/10; background:linear-gradient(150deg,var(--color-primary),#12302f); overflow:hidden;
}
.article-thumb img{width:100%; height:100%; object-fit:cover;
}
.article-body{padding:24px;
}
.article-date{font-size:calc(var(--font-size-base) * 0.706); color:var(--color-secondary); text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}
.article-body h3{font-size:calc(var(--font-size-base) * 1.059); margin:10px 0 10px; font-family:var(--font-body); font-weight:600;
}
.pagination{display:flex; justify-content:center; gap:10px; margin-top:50px;
}
.pagination a, .pagination span{padding:10px 16px; border-radius:var(--radius-pill); border:1px solid var(--line); font-size:calc(var(--font-size-base) * 0.824);
}
.pagination .current{background:var(--color-primary); color:var(--ivory); border-color:var(--color-primary);
}

@media (max-width: 980px){
  .nav-links, .nav-cta .btn-primary, .site-search{display:none;}
  .burger{display:flex;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .foot-grid, .blog-grid{grid-template-columns:1fr;}
  .wrap{padding:0 20px;}
}

/* =========================================================
   PHASE 2 — Expertises, Avant/Après, Témoignages, FAQ, Tarifs
   ========================================================= */

/* --- Grille des expertises --- */
.exp-grid{ grid-template-columns:repeat(4,1fr);
}
.exp-card.is-soon{ cursor:default;
}
.exp-thumb{ margin-bottom:18px;
}
.exp-card h3{font-size:calc(var(--font-size-base) * 1.118); margin-bottom:10px; font-family:var(--font-body); font-weight:600;
}
.exp-card p{font-size:calc(var(--font-size-base) * 0.824); margin-bottom:18px;
}

/* --- Page d'une expertise --- */
.service-layout{display:grid; grid-template-columns:1.6fr .8fr; gap:50px; align-items:start;
}
.service-main .entry-content{font-size:calc(var(--font-size-base) * 0.971); line-height:1.85; color:var(--color-ink);
}
.service-main .entry-content p{color:var(--color-ink); margin-bottom:20px;
}
.benefits-box, .booking-box{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; margin-bottom:24px;
}
.booking-box{background:var(--color-primary); border-color:var(--color-primary);
}
.booking-box h4, .booking-box p{color:var(--ivory);
}
.booking-box p{color:rgba(255,253,248,.72); font-size:calc(var(--font-size-base) * 0.824); margin:10px 0 20px;
}
.benefits-box h4, .booking-box h4{font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.941); font-weight:600;
}
.benefits-box ul{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:12px;
}
.benefits-box li{font-size:calc(var(--font-size-base) * 0.853); padding-left:26px; position:relative; color:var(--color-ink);
}
.benefits-box li::before{
  content:"✓"; position:absolute; left:0; color:var(--color-secondary); font-weight:700;
}

/* --- Filtres de la galerie --- */
.result-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;
}
.filter-btn{
  padding:10px 22px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:transparent; font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.824); cursor:pointer;
  color:var(--color-primary); transition:all .25s ease;
}
.filter-btn:hover{border-color:var(--color-secondary);
}
.filter-btn.is-active{background:var(--color-primary); color:var(--ivory); border-color:var(--color-primary);
}

/* --- Cartes Avant/Après --- */
.result-card.is-hidden{display:none;
}
/* La hauteur se règle dans Options du thème. Elle prime sur la
   proportion : c'est elle qui décide, la largeur suivant la colonne. */
.ba-slider{position:relative; height:var(--ba-height, 300px); aspect-ratio:var(--ba-ratio, auto); overflow:hidden; user-select:none;
}
/* La photo n'est plus étirée au cadre : elle y est posée, déplaçable et
   redimensionnable. Sa largeur et sa position viennent du réglage de
   cadrage, écrit dans l'attribut style de chaque image. */
.ba-slider img{
  position:absolute; inset:auto;
  width:100%; height:auto; max-width:none;
  pointer-events:none;
}
.ba-before-wrap{
  position:absolute; inset:0; width:50%; overflow:hidden; will-change:width;
  /* Fond opaque : la photo « après » occupe toute la surface du cadre, donc
     une photo « avant » réduite laissait apparaître l'après derrière elle.
     On voyait alors deux images se chevaucher au lieu d'une comparaison. */
  background:var(--color-bg, #f5f1ea);
}
.ba-before-wrap .ba-before{width:auto; height:100%; max-width:none;
}
.ba-label{
  position:absolute; bottom:14px; text-transform:uppercase; color:#fff; border-radius:var(--radius-pill); z-index:3;
}
.ba-label-before{left:14px;
}
.ba-label-after{right:14px;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--color-secondary);
  transform:translateX(-50%); z-index:4; pointer-events:none;
}
.ba-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:var(--color-secondary);
  border:2px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.ba-handle span::before, .ba-handle span::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.ba-handle span::before{left:9px; transform:translateY(-50%); border-right:6px solid var(--color-primary);
}
.ba-handle span::after{right:9px; transform:translateY(-50%); border-left:6px solid var(--color-primary);
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0;
}
/* Loupe posée sur la photo, au-dessus du curseur de comparaison : elle
   annonce que le cadre s'agrandit, ce qu'un clic seul ne dit pas. */
.ba-loupe{
  position:absolute; top:10px; right:10px; z-index:6;
  width:34px; height:34px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(32,48,47,.5);
  display:flex; align-items:center; justify-content:center;
  cursor:zoom-in;
  transition:background-color .18s ease, transform .18s ease;
}
.ba-loupe:hover, .ba-loupe:focus-visible{
  background:rgba(32,48,47,.82); transform:scale(1.06);
}
.ba-loupe span{
  position:relative; display:block; width:12px; height:12px;
  border:2px solid #fff; border-radius:50%;
}
.ba-loupe span::after{
  content:""; position:absolute; right:-6px; bottom:-4px;
  width:7px; height:2px; background:#fff;
  border-radius:1px; transform:rotate(45deg);
}
/* Dans la vue agrandie la loupe est retirée, mais on garde la règle au cas
   où une copie subsisterait. */
.result-modal .ba-loupe{display:none;}

/* --- Témoignages --- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testi-card{background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius); padding:30px;
}
.quote-mark{font-family:var(--font-heading); font-size:calc(var(--font-size-base) * 2.4); color:var(--color-accent-light); line-height:1; margin-bottom:8px; display:block;
}
.testi-card .txt{color:var(--color-ink); font-size:calc(var(--font-size-base) * 0.882); margin-bottom:22px;
}
.testi-person{display:flex; align-items:center; gap:12px;
}
.testi-person h5{font-size:calc(var(--font-size-base) * 0.824); margin:0; font-family:var(--font-body); font-weight:600;
}
.avatar{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg,var(--color-accent-light),var(--color-secondary));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); color:var(--color-primary); font-weight:600;
}
.stars{color:var(--color-secondary); font-size:calc(var(--font-size-base) * 0.706); letter-spacing:1px;
}
.testi-date{font-size:calc(var(--font-size-base) * 0.706); color:var(--color-muted);
}

/* --- FAQ --- */
/* La colonne latérale a disparu : les questions occupent toute la
   largeur, bornée à celle des autres contenus du site pour que les
   lignes ne s'étirent pas sur 1 240 px. */
.faq-wrap{max-width:900px;
}
.faq-list details{border-bottom:1px solid var(--line); padding:20px 0;
}
.faq-list summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--font-body); font-weight:500; font-size:calc(var(--font-size-base) * 0.941); color:var(--color-primary);
}
.faq-list summary::-webkit-details-marker{display:none;
}
.faq-list summary::after{content:"+"; font-size:calc(var(--font-size-base) * 1.18); color:var(--color-secondary); transition:transform .3s ease; font-weight:300;
}
.faq-list details[open] summary::after{transform:rotate(45deg);
}
.faq-answer{margin-top:14px; font-size:calc(var(--font-size-base) * 0.853); max-width:640px;
}
.faq-answer p{margin-bottom:12px;
}

/* --- Tarifs --- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.price-card{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; display:flex; flex-direction:column;
}
.price-card.is-highlighted{border:2px solid var(--color-secondary); box-shadow:var(--shadow);
}
.price-card h3{font-size:calc(var(--font-size-base) * 0.97); font-family:var(--font-body); font-weight:600;
}
.price-amount{
  font-family:var(--font-heading); font-size:calc(var(--font-size-base) * 1.75); color:var(--color-primary); margin:14px 0 12px;
}
.price-includes{ flex-direction:column;
}
.price-card .btn{margin-top:auto; justify-content:center;
}

/* --- Bande de réassurance --- */
.trust-grid{display:grid;
}
.trust-item:last-child{border-right:none;
}
.trust-item .icon{color:var(--color-secondary); flex-shrink:0;
}

/* --- Hero --- */
/* Les deux colonnes restent centrées l'une sur l'autre, mais la photo
   étant plus haute que le bloc de texte, le vide se concentrait
   au-dessus du titre. On remonte l'ensemble de 24 px plutôt que de
   passer à un alignement par le haut, qui déséquilibrerait le bas. */
.hero{position:relative; overflow:hidden; padding:56px 0 60px;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
}
.hero h1{ margin-bottom:22px;
}
.hero .lead{font-size:calc(var(--font-size-base) * 1.0); max-width:480px; margin-bottom:30px;
}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;
}
.hero-visual{position:relative; aspect-ratio:1/1;
}
.hero-orb{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 45%),
             linear-gradient(135deg, var(--color-primary), #12302f 70%);
  box-shadow:var(--shadow);
}
.hero-orb svg{position:absolute; inset:0; width:100%; height:100%;
}
.hero-orb img{width:100%; height:100%; object-fit:cover;
}
.hero-orb-ring{position:absolute; inset:-14px; border-radius:50%; border:2px solid var(--color-secondary); opacity:.7;
}

@media (max-width: 980px){
  .exp-grid, .results-grid, .testi-grid, .price-grid, .trust-grid{grid-template-columns:repeat(2,1fr);}
  .service-layout, .faq-wrap, .hero-grid{grid-template-columns:1fr;}
  .hero-visual{max-width:400px; margin:0 auto;}
}
@media (max-width: 560px){
  .exp-grid, .results-grid, .testi-grid, .price-grid, .trust-grid{grid-template-columns:1fr;}
  .trust-item{border-right:none; padding:14px 0; border-bottom:1px solid var(--line);}
}

/* =========================================================
   PHASE 3 — Sections éditables, contact, réservation
   ========================================================= */

/* --- Fonds de section pilotables depuis l'admin --- */
.bg-white{background:#fff;
}
.bg-dark{background:var(--color-primary); border:none;
}
.bg-dark h2, .bg-dark h3, .bg-dark h4{color:var(--ivory);
}
.bg-dark p{color:rgba(255,253,248,.72);
}
.bg-dark .trust-item{border-right-color:rgba(255,255,255,.15);
}
.bg-gold{background:linear-gradient(120deg, var(--color-secondary) 0%, var(--color-accent-light) 100%);
}
.bg-gold h2, .bg-gold h3{color:var(--color-primary);
}
.bg-gold p{color:rgba(32,48,47,.75);
}

/* --- Animations à l'apparition --- */
.anim-fade, .anim-up{opacity:0; transition:opacity .7s ease, transform .7s ease;
}
.anim-up{transform:translateY(28px);
}
.anim-fade.is-visible, .anim-up.is-visible{opacity:1; transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .anim-fade, .anim-up{opacity:1; transform:none; transition:none;}
}

/* --- Bloc Méthode --- */
.method-box{background:var(--color-primary); color:var(--ivory); border-radius:var(--radius); padding:70px 60px;
}
.method-box .eyebrow{color:var(--color-secondary);
}
.method-box h2{color:var(--ivory); max-width:600px; margin:14px 0 16px;
}
.method-box .lead{color:rgba(255,253,248,.72); max-width:600px;
}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:44px;
}
.step-num{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(218,174,127,.5); align-items:center; justify-content:center;
}
.step h4{color:var(--ivory); font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.971); font-weight:600; margin-bottom:8px;
}
.step p{color:rgba(255,253,248,.62); font-size:calc(var(--font-size-base) * 0.794);
}

/* --- Bandeau d'appel à l'action --- */
.cta-banner{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}

/* --- Page contact --- */
.contact-layout{display:grid; grid-template-columns:1.5fr .9fr; gap:50px; align-items:start;
}
.contact-box{background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:24px;
}
.contact-box h4{font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.941); font-weight:600; margin-bottom:16px;
}
.contact-list{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:12px; font-size:calc(var(--font-size-base) * 0.853);
}
.contact-list a:hover{color:var(--color-accent-dark);
}

/* --- Formulaire --- */
.contact-form{max-width:640px;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;
}
.form-row{margin:0 0 20px;
}
.form-row label{display:block; font-size:calc(var(--font-size-base) * 0.824); font-weight:500; margin-bottom:8px; color:var(--color-primary);
}
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"],
.form-row select, .form-row textarea{
  width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.882); background:var(--ivory); color:var(--color-ink);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--color-secondary); outline-offset:1px; border-color:transparent;
}
.form-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}
.form-consent label{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:calc(var(--font-size-base) * 0.794); color:var(--color-muted);
}
.form-consent input{margin-top:3px; flex-shrink:0;
}
.form-feedback{padding:16px 20px; border-radius:var(--radius-md); margin-bottom:24px; font-size:calc(var(--font-size-base) * 0.853);
}
.form-feedback.is-success{background:rgba(44,80,87,.08); border:1px solid var(--color-primary); color:var(--color-primary);
}
.form-feedback.is-error{background:rgba(188,142,95,.12); border:1px solid var(--color-accent-dark); color:var(--color-accent-dark);
}

/* --- Carte & réservation --- */
.map-embed{margin-top:60px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); line-height:0;
}
.map-embed iframe{width:100%; height:420px; border:0; display:block;
}
.booking-embed{min-height:400px;
}
/* Le cadre du module de réservation était limité à 640 pixels de haut : les
   derniers créneaux de la journée se retrouvaient coupés, et rien n'indiquait
   qu'il en existait d'autres. La hauteur suit désormais celle de l'écran,
   avec un plancher confortable. */
.booking-embed iframe{
  width:100%; border:0;
  min-height:min(1100px, max(760px, 95vh));
}
@media (max-width:900px){
  /* Sur téléphone, le calendrier et les créneaux s'empilent : il faut
     davantage de hauteur, pas moins. */
  .booking-embed iframe{min-height:min(1400px, max(900px, 110vh));}
}
.booking-placeholder{
  text-align:center; background:var(--ivory); border:1px solid var(--line);
  border-radius:var(--radius); padding:60px 40px; max-width:620px; margin:0 auto;
}
.booking-placeholder h3{font-size:clamp(18px, 2vw, 20px); margin-bottom:12px;
}

/* --- Accessibilité : lien d'évitement --- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-primary); color:var(--ivory); padding:12px 20px; border-radius:0 0 12px 0;
}
.skip-link:focus{left:0;
}
:focus-visible{outline:2px solid var(--color-secondary); outline-offset:2px;
}

@media (max-width: 980px){
  .contact-layout{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .method-box{padding:44px 28px;}
  .cta-banner{padding:44px 28px;}
}
@media (max-width: 560px){
  .form-grid, .steps{grid-template-columns:1fr;}
}

/* =========================================================
   Section "Vous vous reconnaissez ?" & page À propos
   ========================================================= */

.reco-list{
  list-style:none; padding:0; margin:0 auto; max-width:900px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 34px;
}
.reco-list li{
  display:flex; color:var(--color-ink);
}
.reco-list svg{color:var(--color-secondary); flex-shrink:0; margin-top:4px;
}
.reco-outro{ text-align:center;
  padding-top:32px; border-top:1px solid var(--line);
}

/* --- Page À propos --- */
.about-hero{padding:70px 0 60px;
}
/* Colonnes alignées par le haut : centrées, le texte flottait au
   milieu de la photo sans point d'accroche, et le vide sous le
   bouton s'additionnait à l'espace précédant la section suivante.
   Alignées, elles démarrent ensemble et le vide reste à l'intérieur
   de la section. */
.about-hero-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;
}
.about-photo{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.about-photo::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  border:2px solid var(--color-secondary); pointer-events:none;
  transform:translate(12px,12px);
}
.about-photo img{width:100%; height:auto; display:block;
}
/* Cette phrase porte la légitimité de la praticienne, juste sous son
   nom : elle se lit comme un sous-titre, pas comme une note de bas de
   bloc. La graisse redescend à 500 — à cette taille, 600 alourdirait —
   et l'interlettrage élargi, utile sur du petit texte, n'a plus lieu
   d'être. La marge basse s'ouvre pour détacher le premier paragraphe. */
.about-role{
  color:var(--color-secondary); font-weight:500;
  font-size:calc(var(--font-size-base) * 1.06);
  margin:10px 0 22px; letter-spacing:0;
}
.about-story{ font-size:calc(var(--font-size-base) * 0.971); line-height:1.85; color:var(--color-ink);
}
.about-story p{color:var(--color-ink); margin-bottom:20px;
}

/* --- Bloc certification --- */
.certif-box{
  display:grid; grid-template-columns:1fr .9fr; gap:48px; align-items:center;
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius); padding:44px;
}
.certif-list{list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:14px;
}
.certif-list li{
  display:flex; gap:16px; align-items:baseline; font-size:calc(var(--font-size-base) * 0.853);
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.certif-list li:last-child{border-bottom:none; padding-bottom:0;
}
.certif-list strong{
  min-width:130px; flex-shrink:0; color:var(--color-primary);
  font-family:var(--font-body); font-weight:600; font-size:calc(var(--font-size-base) * 0.765);
  text-transform:uppercase; letter-spacing:.06em;
}
.certif-list span{color:var(--color-muted);
}
.certif-image{ display:block; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); transition:transform .3s ease;
}
.certif-image:hover{transform:translateY(-4px);
}
.certif-image img{width:100%; height:auto; display:block;
}
.certif-zoom{
  position:absolute; bottom:12px; right:12px;
  background:rgba(32,48,47,.75); color:#fff; font-size:max(12px, calc(var(--font-size-base) * 0.676));
  padding:6px 14px; border-radius:var(--radius-pill); letter-spacing:.04em;
}

/* --- Galerie cabinet --- */
.cabinet-gallery{display:grid; grid-template-columns:repeat(3,1fr);
}
.cabinet-gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
}

@media (max-width: 980px){
  .reco-list{grid-template-columns:1fr;}
  .about-hero-grid, .certif-box{grid-template-columns:1fr;}
  .certif-box{padding:30px;}
  .cabinet-gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .cabinet-gallery{grid-template-columns:1fr;}
  .certif-list li{flex-direction:column; gap:4px;}
  .certif-list strong{min-width:0;}
}

/* =========================================================
   REFONTE VISUELLE — typographie, boutons, sections
   ========================================================= */

/* --- Titres : rendu proche de la maquette --- */
h1,h2,h3{font-weight:400; letter-spacing:-0.005em;
}
h1{line-height:1.08;
}
h2{line-height:1.15;
}
.section-head h2{font-size:clamp(22px,2.4vw,26px);
}
.hero h1{font-size:clamp(28px,3.5vw,40px);
}

/* --- Sur-titres : teinte assombrie pour meilleure lisibilité --- */
.eyebrow{color:var(--color-accent-dark); font-weight:600; letter-spacing:0.16em; font-size:calc(var(--font-size-base) * 0.706);
}

/* --- Logo agrandi, sans texte --- */
.site-header .site-title, .site-header .site-description{display:none;
}
.nav{padding:14px 32px;
}

/* --- Bouton "Découvrir la méthode" --- */
.btn-method{
  background:var(--ivory);
  color:var(--color-primary);
  border:1.5px solid var(--color-secondary);
  border-radius:var(--radius-md);
  padding:15px 26px;
  gap:14px;
  box-shadow:0 0 0 3px rgba(218,174,127,.18);
  font-weight:500;
}
.btn-method::after{content:"\2192"; font-size:calc(var(--font-size-base) * 1.0); color:var(--color-primary); transition:transform .25s ease;
}
.btn-method:hover{
  border-color:var(--color-accent-dark);
  box-shadow:0 0 0 4px rgba(218,174,127,.3), 0 12px 26px -14px rgba(32,48,47,.4);
  transform:translateY(-2px);
}
.btn-method:hover::after{transform:translateX(4px);
}

/* --- Icône dans un cercle doré --- */
.icon-circle{
  width:64px; height:64px; border-radius:50%;
  border:1.5px solid var(--color-secondary);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-primary); flex-shrink:0;
  background:transparent;
}

/* --- Indications sous les boutons du hero --- */
.hero-badges{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px;
  margin-top:36px; font-size:calc(var(--font-size-base) * 0.853); color:var(--color-primary);
}
.hero-badge{display:inline-flex; align-items:center; gap:11px;
}
.badge-icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--color-primary); color:var(--color-secondary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.badge-sep{width:1px; height:22px; background:var(--line);
}

/* --- Bande de points forts (cercle + texte, centrée) --- */
.trust{ border:none;
}
.trust-grid{padding:0; gap:30px;
}
.trust-item{
  display:flex;
  padding:0 10px; border-right:none; text-align:left;
}
.trust-item h4{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.941); font-weight:600;
  color:var(--color-ink); margin-bottom:5px;
}
.trust-item p{font-size:calc(var(--font-size-base) * 0.794); line-height:1.55;
}

/* --- Cartes d'expertises --- */
.exp-grid{display:grid; gap:26px;
}
.exp-grid.cols-1{grid-template-columns:minmax(0,380px);
}
.exp-grid.cols-2{grid-template-columns:repeat(2,1fr);
}
.exp-grid.cols-3{grid-template-columns:repeat(3,1fr);
}
.exp-grid.cols-4{grid-template-columns:repeat(4,1fr);
}
.exp-card{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:0; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
}
.exp-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);
}
.exp-thumb{position:relative; aspect-ratio:4/3; overflow:hidden; margin:0; border-radius:0;
}
.exp-thumb img{width:100%; height:100%; object-fit:cover;
}
.exp-thumb-placeholder{
  position:absolute; inset:0;
  background:linear-gradient(150deg, var(--color-accent-light), var(--color-secondary) 70%);
}
.exp-badge{
  position:absolute; left:22px; bottom:-24px;
  width:52px; height:52px; border-radius:50%;
  background:var(--color-primary); color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--ivory); z-index:2;
}
.exp-body{padding:40px 24px 26px; display:flex; flex-direction:column; flex:1;
}
.exp-body h3{font-family:var(--font-heading); font-size:calc(var(--font-size-base) * 0.97); font-weight:500; margin-bottom:10px;
}
.exp-body p{font-size:calc(var(--font-size-base) * 0.824); line-height:1.6; margin-bottom:22px;
}
.exp-link{
  margin-top:auto; font-size:calc(var(--font-size-base) * 0.794); font-weight:600; color:var(--color-primary);
  display:inline-flex; align-items:center; gap:8px;
}
.exp-card:hover .exp-link{color:var(--color-accent-dark);
}
.exp-link.is-soon{color:var(--color-muted);
}
.exp-card.is-soon{opacity:.6;
}
.exp-card.is-soon:hover{transform:none; box-shadow:none;
}

/* --- Section Méthode : 2 colonnes --- */
.method-intro p{font-size:calc(var(--font-size-base) * 0.882);
}
.method-step .icon-circle{margin:0 auto 14px;
}
.step-num{
  display:block; font-family:var(--font-heading); font-size:calc(var(--font-size-base) * 0.882);
  color:var(--color-accent-dark); letter-spacing:.08em; margin-bottom:8px;
}
.step-link{
  align-self:start; margin-top:31px; width:34px; height:1px;
  background:linear-gradient(90deg, var(--color-secondary), transparent);
  position:relative;
}
.step-link::after{
  content:""; position:absolute; right:0; top:-2px;
  width:5px; height:5px; border-radius:50%; background:var(--color-secondary);
}

/* --- Bande d'informations (fond vert, arcs dorés) --- */
.infobar{
  position:relative; overflow:hidden;
  background:var(--color-primary); margin:0;
}
.infobar-arc{
  position:absolute; top:50%; width:300px; height:300px;
  border-radius:50%; border:1.5px solid rgba(218,174,127,.28);
  transform:translateY(-50%); pointer-events:none;
}
.infobar-arc::before{
  content:""; position:absolute; inset:26px; border-radius:50%;
  border:1.5px solid rgba(218,174,127,.18);
}
.infobar-arc-left{left:-150px;
}
.infobar-arc-right{right:-150px;
}
.infobar-grid{ position:relative; z-index:2;
}
.infobar-item{
  display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--ivory);
  position:relative;
}
/* Le trait était une bordure, donc haute de toute la colonne, marges
   comprises. Il commençait au sommet de l'icône et finissait au bas du
   texte, alors que le vide autour restait à 52 px : l'œil comparait les
   deux et lisait un contenu décentré. En pseudo-élément, il peut se
   mettre en retrait et cesse de servir de repère de hauteur. */
.infobar-item::after{
  content:""; position:absolute; right:0; top:10px; bottom:10px;
  width:1px; background:rgba(218,174,127,.28);
}
.infobar-item:last-child::after{display:none;
}
.infobar-item svg{color:var(--color-secondary);
}
.infobar-small{ line-height:1.45;
}

/* --- Section "Vous vous reconnaissez ?" retravaillée --- */
.recognition .reco-list{
  grid-template-columns:repeat(2,1fr); gap:16px; max-width:960px;
}
.reco-list li{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; gap:16px; align-items:flex-start;
  font-size:calc(var(--font-size-base) * 0.882); line-height:1.55;
}
.reco-list li svg{
  color:var(--color-primary); margin-top:1px;
  background:var(--color-accent-light); border-radius:50%;
  padding:5px; width:28px; height:28px; box-sizing:border-box; flex-shrink:0;
}

@media (max-width: 980px){
  .method-layout{grid-template-columns:1fr; gap:44px; padding:40px 28px;}
  .method-steps.steps-3, .method-steps.steps-4{grid-template-columns:1fr 1fr;}
  .step-link{display:none;}
  .method-step{margin-bottom:26px;}
  .infobar-grid{grid-template-columns:repeat(2,1fr) !important; gap:32px 0;}
  .infobar-item:nth-child(2n){border-right:none;}
  .exp-grid.cols-3, .exp-grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:1fr !important; gap:24px;}
  .recognition .reco-list{grid-template-columns:1fr;}
  .brand img, .custom-logo{height:50px;}
}
@media (max-width: 560px){
  .exp-grid.cols-2, .exp-grid.cols-3, .exp-grid.cols-4{grid-template-columns:1fr;}
  .method-steps.steps-3, .method-steps.steps-4{grid-template-columns:1fr;}
  .infobar-grid{grid-template-columns:1fr !important;}
  .infobar-item{padding-bottom:26px;}
  .infobar-item::after{display:none;}
  .hero-badges{gap:12px;}
  .badge-sep{display:none;}
}

/* =========================================================
   CORRECTIFS — hero plein écran, méthode, points forts
   ========================================================= */

/* --- Bandeau avec image de fond pleine largeur --- */
.hero-bg{
  background-repeat:no-repeat;
  display:flex;
  position:relative;
}
.hero-bg-grid{display:block; width:100%;
}
.hero-bg .hero-content{
  position:relative; z-index:2;
}
/* Voile clair pour garantir la lisibilité du texte sur l'image */
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(245,241,234,.94) 0%, rgba(245,241,234,.82) 34%, rgba(245,241,234,0) 58%);
  pointer-events:none;
}

/* --- Points forts : toujours sur une ligne jusqu'au format tablette --- */
.trust-grid{grid-template-columns:repeat(3,1fr);
}
.trust-item{align-items:flex-start; gap:16px; justify-content:flex-start;
}
.trust-item-text{padding-top:4px;
}

/* --- Cartes "Vous vous reconnaissez" : plus de mouvement au survol --- */
.reco-list li{transition:border-color .25s ease;
}
.reco-list li:hover{border-color:var(--color-secondary); transform:none;
}

/* --- Section Méthode : alignement corrigé --- */
.method-steps{ align-items:start;
}
/* Rangée d'icônes : le trait de liaison part du centre du cercle */
.method-step-icon .icon-circle{width:66px; height:66px; margin:0;
}
/* Numéro : simple texte doré, sans cercle (correction du conflit de styles) */
.method-step-num{
  display:block; font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.765); font-weight:500;
  letter-spacing:.14em; color:var(--color-accent-dark);
  margin-bottom:10px; width:auto; height:auto; border:none; background:none;
}
.method-step h4{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.853); font-weight:600;
  color:var(--color-ink); margin-bottom:10px; line-height:1.35; min-height:2.7em;
}
.method-step p{font-size:calc(var(--font-size-base) * 0.735); line-height:1.6; color:var(--color-muted);
}

@media (max-width: 1100px){
  .hero-bg .hero-content{max-width:min(520px, 56%);}
}
@media (max-width: 900px){
  .hero-bg{
    padding:60px 0 0; min-height:0; display:block;
    background-position:center bottom; background-size:100% auto;
  }
  .hero-bg::before{background:linear-gradient(180deg, rgba(245,241,234,.96) 0%, rgba(245,241,234,.9) 45%, rgba(245,241,234,0) 100%);}
  /* Le bandeau retrouve ici son propre remplissage : la marge posée plus
     haut pour décaler le texte s'y ajouterait sans raison. */
  .hero-bg .wrap{padding-top:0;}
  .hero-bg .hero-content{max-width:100%; padding-bottom:56vw;}
  .trust-grid{grid-template-columns:repeat(3,1fr) !important; gap:20px;}
  .trust-item{flex-direction:column; text-align:center; align-items:center;}
  .method-steps.steps-3, .method-steps.steps-4{grid-template-columns:repeat(3,1fr);}
  .method-step .step-link{display:block;}
}
@media (max-width: 620px){
  .trust-grid{grid-template-columns:1fr !important;}
  .method-steps.steps-3, .method-steps.steps-4{grid-template-columns:1fr; gap:32px 0;}
  .method-step .step-link{display:none;}
  .method-step h4{min-height:0;}
}

/* =========================================================
   CORRECTIF — dimensionnement du bandeau en image de fond
   ========================================================= */

/* La hauteur suit la largeur de l'écran pour respecter les proportions
   de l'image (16/9) : plus de zoom excessif sur grand écran. */
.hero-bg{
  min-height:0;
  height:clamp(520px, 50vw, 880px);
  padding:0;
  background-position:center right;
  background-size:cover;
  /* Le texte était calé au centre exact d'un bandeau haut de 880 px, ce
     qui creusait un grand vide au-dessus du titre. Il se cale désormais
     un peu plus haut : la photo garde son cadrage, seul le bloc de texte
     se déplace. La hauteur du bandeau n'est pas touchée — la rogner pour
     gagner cet espace aurait coûté 160 px d'image, qui est le premier
     argument de la page. */
  align-items:flex-start;
}
.hero-bg .wrap{width:100%; padding-top:clamp(90px, 20vh, 200px);
}
.hero-bg .hero-content{max-width:min(520px, 44%);
}
.hero-bg h1{font-size:clamp(25px,2.6vw,36px); margin-bottom:18px;
}
.hero-bg .lead{font-size:clamp(calc(var(--font-size-base) * 0.824), 1.05vw, calc(var(--font-size-base) * 1.0)); max-width:440px; margin-bottom:26px;
}
.hero-bg .hero-cta{gap:14px;
}
.hero-bg .hero-badges{margin-top:26px; font-size:calc(var(--font-size-base) * 0.794); gap:14px;
}
.hero-bg .badge-icon{width:34px; height:34px;
}

@media (max-width: 1100px){
  .hero-bg{height:clamp(460px, 54vw, 640px);}
  .hero-bg .hero-content{max-width:min(460px, 52%);}
}
@media (max-width: 900px){
  /* Sur mobile : image en bas, texte au-dessus, aucun recouvrement */
  .hero-bg{
    height:auto; display:block;
    padding:56px 0 0;
    background-position:center bottom;
    background-size:130% auto;
  }
  .hero-bg .hero-content{max-width:100%; padding-bottom:62vw;}
  .hero-bg h1{font-size:clamp(24px,4.7vw,30px);}
}

/* =========================================================
   CORRECTIF FINAL — bande de points forts toujours horizontale
   ========================================================= */

/* Flexbox plutôt que grille : la disposition horizontale ne peut plus
   être annulée par une règle antérieure ou par un style en ligne. */
.trust .trust-grid{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(20px, 3vw, 56px);
  padding:0;
}
.trust .trust-item{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  text-align:left;
  gap:16px;
  border:none;
  max-width:340px;
}
.trust .trust-item .icon-circle{width:58px; height:58px; flex-shrink:0;
}
.trust .trust-item-text{padding-top:6px;
}
.trust .trust-item h4{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.912); font-weight:600;
  color:var(--color-ink); margin-bottom:6px; line-height:1.3;
}
.trust .trust-item p{font-size:calc(var(--font-size-base) * 0.794); line-height:1.55; margin:0;
}

/* Tablette : on reste sur une ligne, en réduisant les écarts */
@media (max-width: 900px){
  .trust .trust-grid{gap:18px;}
  .trust .trust-item{flex-direction:column; align-items:center; text-align:center; gap:12px;}
  .trust .trust-item .icon-circle{width:52px; height:52px;}
}

/* Téléphone uniquement : passage en colonne */
@media (max-width: 600px){
  .trust .trust-grid{flex-direction:column !important; align-items:center; gap:26px;}
  .trust .trust-item{max-width:100%; flex-direction:row; text-align:left; align-items:flex-start;}
}

/* =========================================================
   PIED DE PAGE — bande horizontale, mentions légales
   ========================================================= */

.site-footer{
  padding:0;
}
.footer-logo img{height:52px; width:auto; max-width:210px; object-fit:contain;
}

@media (max-width: 1100px){
  .footer-bar{justify-content:center; text-align:center;}
  .footer-infos{gap:28px;}
}
@media (max-width: 780px){
  .footer-bar{flex-direction:column; gap:26px; padding:32px 0 22px;}
  .footer-infos{flex-direction:column; align-items:flex-start; gap:20px; width:100%; max-width:340px; margin:0 auto;}
  .footer-info{width:100%;}
  .footer-legal{justify-content:center; text-align:center; gap:14px; flex-direction:column;}
}

/* =========================================================
   GARANTIES RESPONSIVE — s'appliquent à toute page,
   présente ou créée ultérieurement, sans intervention
   ========================================================= */

/* Aucun élément ne peut provoquer de défilement horizontal */
html, body{overflow-x:hidden; max-width:100%;
}

/* Tout média reste dans son conteneur, quelle que soit la page */
img, video, iframe, embed, object, canvas, svg{max-width:100%; height:auto;
}
iframe, video{display:block;
}

/* Les tableaux insérés dans une page deviennent défilables sur mobile */
.entry-content table{width:100%; border-collapse:collapse; display:block; overflow-x:auto;
}
.entry-content table th, .entry-content table td{
  padding:10px 14px; border:1px solid var(--line); font-size:calc(var(--font-size-base) * 0.853); text-align:left;
}
.entry-content table th{background:var(--ivory); font-family:var(--font-body); font-weight:600;
}

/* Les mots très longs (URL, e-mails) ne débordent jamais */
.entry-content, .entry-content p, .entry-content li, .entry-content a{
  overflow-wrap:break-word; word-wrap:break-word;
}

/* Confort de lecture et espacements adaptés aux petits écrans */
@media (max-width: 900px){
  section{padding:64px 0;}
  .section-head{margin-bottom:38px;}
  .entry-content{font-size:calc(var(--font-size-base) * 0.941);}
}
@media (max-width: 600px){
  section{padding:48px 0;}
  .wrap{padding:0 18px;}
  .section-head{margin-bottom:30px;}
  .btn{width:100%; justify-content:center;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .cta-banner{flex-direction:column; align-items:flex-start; text-align:left;}
  .cta-banner .btn{width:100%;}
  /* Cible tactile confortable pour tous les liens et boutons */
  .nav-links a, .footer-legal-links a{padding:8px 0;}
}

/* Impression : mise en page lisible sur papier */
@media print{
  .site-header, .site-footer, #back-to-top, .hero-cta, .site-search{display:none;}
  body{background:#fff; color:#000;}
  .wrap{max-width:100%; padding:0;}
}

/* =========================================================
   EN-TÊTE PLEINE LARGEUR — réglable depuis le Customizer
   ========================================================= */

:root{--logo-height:60px;
}

/* Spécificité alignée sur celle de la règle « header.site-header »
   déclarée plus haut. Sans le sélecteur « header », cette remise à
   « relative » perdait l'arbitrage et le bandeau restait figé même
   lorsque la case du Personnalisateur était décochée. */
header.site-header{position:relative; top:auto;
}
header.site-header.is-sticky{position:sticky; top:0;
}

/* La barre noire d'administration est fixée par-dessus la page sur
   ordinateur : sans décalage, elle recouvrait les 32 premiers pixels
   du bandeau figé, qui paraissait rogné. Invisible pour les visiteurs,
   ce défaut ne concernait que les sessions connectées. */
body.admin-bar header.site-header.is-sticky{top:32px;
}
/* Sous 783 px, WordPress ne fixe plus sa barre : elle défile avec la
   page. Le décalage n'a donc plus lieu d'être. */
@media (max-width:782px){
  body.admin-bar header.site-header.is-sticky{top:0;}
}

/* Mode pleine largeur : la barre occupe tout l'écran,
   ce qui libère de la place pour les rubriques du menu. */
.site-header.is-full .nav{
  max-width:none;
  width:100%;
  padding:12px clamp(20px, 3vw, 56px);
}
/* Mode centré : alignement classique sur la largeur du contenu */
.site-header.is-contained .nav{max-width:1240px; margin:0 auto;
}

.brand img, .custom-logo{
  height:var(--logo-height);
  width:auto; max-width:260px; object-fit:contain;
}

/* Les rubriques ne se coupent plus sur deux lignes */
.nav-links{
  flex:1 1 auto;
  justify-content:center;
  gap:clamp(14px, 1.8vw, 34px);
  flex-wrap:nowrap;
}
.nav-links > li > a{
  white-space:nowrap;
  font-size:clamp(calc(var(--font-size-base) * 0.824), 1.05vw, calc(var(--font-size-base) * 0.912));
}
.nav-links .sub-menu a{white-space:nowrap;
}
.nav-cta{flex-shrink:0; gap:clamp(12px, 1.4vw, 22px);
}
.site-search input{width:clamp(90px, 9vw, 150px);
}

/* Écrans intermédiaires : on resserre avant de basculer en menu mobile */
@media (max-width: 1280px){
  .site-header.is-full .nav{padding:12px 24px;}
  .nav-links{gap:16px;}
  .site-search{display:none;}
}
@media (max-width: 1080px){
  .nav-links > li > a{font-size:calc(var(--font-size-base) * 0.794);}
  .nav-links{gap:12px;}
}
@media (max-width: 980px){
  .site-header.is-full .nav{padding:12px 18px;}
  .brand img, .custom-logo{height:calc(var(--logo-height) * 0.78);}
}

/* =========================================================
   MENU MOBILE & TABLETTE — panneau déroulant
   ========================================================= */

@media (max-width: 980px){

  .site-header .nav{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:10px 18px;
  }

  /* Le menu devient un panneau qui se déplie sous le bandeau */
  .site-header .nav-links{
    display:flex !important;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    gap:0; flex:none; flex-wrap:wrap;
    background:var(--ivory);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -22px rgba(32,48,47,.4);
    padding:6px 0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .32s ease, opacity .22s ease;
  }
  .site-header.menu-open .nav-links{
    max-height:min(78vh, 620px); overflow-y:auto;
    opacity:1; visibility:visible;
  }

  .site-header .nav-links > li{
    position:relative;
    border-bottom:1px solid var(--line);
  }
  .site-header .nav-links > li:last-child{border-bottom:none;}
  .site-header .nav-links > li > a{
    display:block; padding:15px 22px; font-size:calc(var(--font-size-base) * 0.941);
    white-space:normal;
  }

  /* Sous-menus dépliables au clic */
  .site-header .nav-links .sub-menu{
    display:none; position:static; box-shadow:none; border:none;
    background:rgba(218,174,127,.08); border-radius:0;
    margin:0; padding:4px 0 8px; min-width:0;
  }
  .site-header .nav-links li.submenu-open > .sub-menu{display:block;}
  .site-header .nav-links li:hover > .sub-menu{display:none;}
  .site-header .nav-links li.submenu-open:hover > .sub-menu{display:block;}
  .site-header .nav-links .sub-menu a{padding:11px 34px; font-size:calc(var(--font-size-base) * 0.853);}

  .submenu-toggle{
    display:flex;
    position:absolute; top:4px; right:10px;
    width:44px; height:44px;
    background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .submenu-toggle span{
    width:9px; height:9px;
    border-right:1.8px solid var(--color-primary);
    border-bottom:1.8px solid var(--color-primary);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s ease;
  }
  .submenu-open > .submenu-toggle span{transform:rotate(-135deg) translate(-2px,-2px);}

  /* Bouton burger : cible tactile confortable */
  .burger{
    display:flex !important;
    width:44px; height:44px;
    align-items:center; justify-content:center;
    gap:5px; flex-direction:column;
  }
  .burger span{transition:transform .25s ease, opacity .25s ease;}
  .menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-open .burger span:nth-child(2){opacity:0;}
  .menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Le bouton de rendez-vous reste visible : c'est l'action principale */
  .nav-cta{gap:8px;}
  .nav-cta .btn-booking{
    display:inline-flex; padding:11px 16px; font-size:calc(var(--font-size-base) * 0.794);
    border-radius:var(--radius-md); gap:8px;
  }
}

@media (max-width: 600px){
  .site-header .nav{padding:9px 14px;}
  .brand img, .custom-logo{height:calc(var(--logo-height) * 0.62); max-width:150px;}
  .nav-cta .btn-booking{padding:10px 13px; font-size:calc(var(--font-size-base) * 0.735);}
  .nav-cta .btn-booking .btn-icon{display:none;}
}

/* Très petits écrans : le bouton devient une icône seule */
@media (max-width: 400px){
  .nav-cta .btn-booking{
    font-size:0; padding:11px; width:42px; height:42px;
    justify-content:center; border-radius:var(--radius-md);
  }
  .nav-cta .btn-booking .btn-icon{display:flex;}
}

/* =========================================================
   CARROUSEL AVANT / APRÈS
   ========================================================= */

.results-carousel{
  position:relative; overflow:hidden;
  margin:0 calc(-1 * clamp(18px, 3vw, 40px));
  padding:6px 0 10px;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.results-track{
  display:flex; gap:22px; width:max-content;
  padding:0 clamp(18px, 3vw, 40px);
}
.results-carousel.is-ready .results-track{
  animation:rhs-scroll linear infinite;
}
.results-carousel.is-paused .results-track{animation-play-state:paused;
}

@keyframes rhs-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Cartes carrées dans le carrousel */
.results-track .result-card{
  flex:0 0 auto;
  transition:transform .3s ease, box-shadow .3s ease;
}
.results-carousel.is-paused .result-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}
.results-track .result-body h3{font-size:calc(var(--font-size-base) * 0.941);
}
.results-track .result-meta{font-size:calc(var(--font-size-base) * 0.735);
}

/* Indication discrète au premier affichage */
.results-carousel::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
}

/* Respect de la préférence système "réduire les animations" */
@media (prefers-reduced-motion: reduce){
  .results-carousel.is-ready .results-track{animation:none;}
  .results-carousel{
    overflow-x:auto; -webkit-mask-image:none; mask-image:none;
    scroll-snap-type:x mandatory;
  }
  .results-track .result-card{scroll-snap-align:center;}
}

@media (max-width: 600px){
  .results-track .result-card{width:76vw;}
  .results-carousel{
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .results-track .result-card{scroll-snap-align:center;}
}

/* =========================================================
   POINT 1 — MENU : logo à gauche, rubriques sur une ligne
   ========================================================= */

.site-header.is-full .nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(14px, 2vw, 34px);
}
.brand{margin-right:auto;
}
.site-header.is-full .nav-links{
  flex:0 1 auto;
  justify-content:flex-end;
  margin-left:auto;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.site-header.is-full .nav-links > li{flex-shrink:0;
}
.site-header.is-full .nav-links > li > a{
  white-space:nowrap;
  font-size:clamp(calc(var(--font-size-base) * 0.794), 0.95vw, calc(var(--font-size-base) * 0.912));
  letter-spacing:0;
}
.site-header.is-full .nav-cta{margin-left:0;
}

@media (max-width: 1400px){
  .site-header.is-full .nav{gap:16px;}
  .site-header.is-full .nav-links{gap:clamp(10px, 1.2vw, 20px);}
}
@media (max-width: 1240px){
  .site-search{display:none;}
  .site-header.is-full .nav-links > li > a{font-size:calc(var(--font-size-base) * 0.765);}
}

/* =========================================================
   POINT 5 — BANDE VERTE : texte agrandi, courbes du logo
   ========================================================= */
.infobar-deco{
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(220px, 22vw, 380px);
  aspect-ratio:1/1;
  background-image:url('assets/images/logo_symbol_gold.png');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.16; pointer-events:none;
}
.infobar-deco-left{left:clamp(-160px, -9vw, -70px);
}
.infobar-deco-right{right:clamp(-160px, -9vw, -70px); transform:translateY(-50%) scaleX(-1);
}

@media (max-width: 980px){
  .infobar-deco{width:200px; opacity:.12;}
  .infobar-big{font-size:calc(var(--font-size-base) * 1.18); max-width:13ch;}
}
@media (max-width: 600px){
  .infobar{padding:36px 0 52px;}
  .infobar-deco{display:none;}
  .infobar-big{font-size:calc(var(--font-size-base) * 1.18); max-width:none;}
}

/* =========================================================
   CORRECTIFS FINAUX — bande verte, menu, icônes
   ========================================================= */

/* --- Bande verte : quatre colonnes maintenues, hauteur resserrée --- */
/* Centrage optique. L'icône et le texte forment un bloc empilé, centré
   dans la bande : géométriquement, c'est juste. Mais l'icône est plus
   haute et plus dense que le texte, si bien que le centre visuel de
   l'ensemble se situe au-dessus de son centre réel — et le texte, lui,
   paraît tomber trop bas.

   On remonte donc le bloc de 10 px en ouvrant davantage le bas que le
   haut. C'est un ajustement de perception, pas de géométrie : la bande
   conserve sa hauteur totale et s'adapte toujours à son contenu, ce que
   ne permettrait pas de sortir l'icône du flux. */
.infobar{padding:42px 0 62px;
}
.infobar-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  align-items:center;
}
.infobar-item{
  gap:12px;
  padding:0 clamp(10px, 1.6vw, 26px);
  justify-content:center;
}
.infobar-item svg{
  width:clamp(26px, 2.2vw, 34px);
  height:clamp(26px, 2.2vw, 34px);
  stroke-width:1.7;
}
.infobar-big{
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.18);
  font-weight:400;
  line-height:1.25;
  color:var(--ivory);
  max-width:none;
  text-wrap:balance;
}
.infobar-small{font-size:calc(var(--font-size-base) * 0.735); color:rgba(255,253,248,.68);
}

/* Formats intermédiaires : on réduit le texte plutôt que casser la grille */
@media (max-width: 1100px){
  .infobar-grid{grid-template-columns:repeat(4,1fr) !important;}
  .infobar-item{padding:0 10px;}
  .infobar-big{font-size:clamp(calc(var(--font-size-base) * 0.794), 1.8vw, calc(var(--font-size-base) * 1.0));}
  .infobar-item svg{width:26px; height:26px;}
}
@media (max-width: 820px){
  .infobar-big{font-size:calc(var(--font-size-base) * 0.794);}
  .infobar-item{padding:0 7px; gap:9px;}
  .infobar-item svg{width:23px; height:23px;}
}

/* Téléphone : une seule colonne, séparateurs horizontaux */
@media (max-width: 620px){
  .infobar{padding:30px 0 42px;}
  .infobar-grid{grid-template-columns:1fr !important; gap:0;}
  .infobar-item{
    border-right:none;
    border-bottom:1px solid rgba(218,174,127,.28);
    padding:20px 10px;
  }
  .infobar-item:last-child{border-bottom:none;}
  .infobar-big{font-size:calc(var(--font-size-base) * 1.118);}
}

/* --- Icônes en cercle : tracé plus lisible --- */
.icon-circle svg{stroke-width:1.7;
}
.trust-item .icon-circle{width:60px; height:60px;
}
.trust-item .icon-circle svg{width:27px; height:27px;
}
.method-step-icon .icon-circle svg{width:28px; height:28px;
}

/* --- Menu : la bascule est pilotée par le Customizer (voir inc/customizer.php).
   On neutralise ici l'ancien seuil fixe pour éviter tout conflit. --- */
@media (min-width: 981px) and (max-width: 1400px){
  .site-header.is-full .nav-links{gap:clamp(10px, 1.3vw, 24px);}
}

/* =========================================================
   REFONTE VISUELLE — cartes résultats, méthode, FAQ, CTA, footer
   ========================================================= */

/* ---------- 1 & 2 : CARTES DE RÉSULTATS ---------- */
.results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.result-card{
  background:var(--ivory);
  border:1.5px solid var(--color-secondary);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 0 0 3px rgba(218,174,127,.14);
  transition:transform .3s ease, box-shadow .3s ease;
  /* Les cartes d'une rangée prennent la hauteur de la plus grande. Le
     bandeau vert, lui, s'arrêtait à son contenu : une fiche sans
     renseignements laissait donc voir le fond crème sous son bandeau,
     alors que sa voisine allait jusqu'en bas. Il occupe désormais la place
     restante. */
  display:flex;
  flex-direction:column;
}
.result-card:hover{
  transform:translateY(-5px);
  box-shadow:0 0 0 4px rgba(218,174,127,.24), 0 18px 36px -20px rgba(32,48,47,.45);
}
.result-card .ba-slider{flex:0 0 auto; height:var(--ba-height, 300px); aspect-ratio:var(--ba-ratio, auto);
}

/* Bandeau de texte : fond vert, texte ivoire */
.result-body{
  background:var(--color-primary);
  color:var(--ivory);
  padding:16px 20px;
  border-top:1.5px solid var(--color-secondary);
  flex:1 1 auto;
}
.result-body h3{
  font-family:var(--font-body);
  font-size:calc(var(--font-size-base) * 0.912); font-weight:600;
  color:var(--ivory); margin-bottom:6px;
}
.result-meta{font-size:calc(var(--font-size-base) * 0.735); color:rgba(255,253,248,.72); margin:0;
}

/* Étiquettes avant / après, plus discrètes sur la photo */
.ba-label{
  background:rgba(32,48,47,.6);
  font-size:max(12px, calc(var(--font-size-base) * 0.588)); padding:4px 10px; letter-spacing:.08em;
}
.ba-handle span{width:38px; height:38px;
}

/* Carrousel : mêmes cartes, largeur réduite */
.results-track .result-card{width:clamp(230px, 21vw, 300px);
}
.results-track .result-card .ba-slider{aspect-ratio:1/1;
}
.results-track .result-body{padding:14px 18px;
}

@media (max-width: 1000px){
  .results-grid{grid-template-columns:repeat(2,1fr); gap:20px;}
}
@media (max-width: 620px){
  .results-grid{grid-template-columns:1fr;}
  .results-track .result-card{width:76vw;}
}

/* ---------- 3 : BANDE DES POINTS FORTS ---------- */
.trust{
  background:#fff;
  border-top:1px solid rgba(218,174,127,.4);
  border-bottom:1px solid rgba(218,174,127,.4);
  padding:44px 0;
}
.trust .trust-item{
  position:relative;
  padding:0 clamp(16px, 2.4vw, 40px);
}
/* Séparateurs verticaux dorés, en écho à la bande verte */
.trust .trust-item::after{
  content:""; position:absolute; right:0; top:6px; bottom:6px;
  width:1px; height:auto;
  background:rgba(218,174,127,.5);
}
.trust .trust-item:last-child::after{display:none;
}

@media (max-width: 900px){
  .trust{padding:34px 0;}
  .rhs-section + .rhs-section.trust{padding-top:34px;}
  .trust .trust-item::after{height:44px;}
}
@media (max-width: 600px){
  .trust .trust-item::after{
    right:auto; left:50%; top:auto; bottom:-13px;
    transform:translateX(-50%);
    width:60px; height:1px;
  }
}

/* ---------- 4 : SECTION MÉTHODE ---------- */
.method-section{
  margin:0;
}
.method-deco{
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(200px, 20vw, 340px); aspect-ratio:1/1;
  background-size:contain; background-repeat:no-repeat; background-position:center; pointer-events:none;
}
.method-deco-left{left:-8%;
}
.method-deco-right{right:-8%; transform:translateY(-50%) scaleX(-1);
}

/* Parcours en étapes */
.method-steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0;
}
.method-steps.steps-2{grid-template-columns:repeat(2,1fr);
}
.method-steps.steps-3{grid-template-columns:repeat(3,1fr);
}
.method-steps.steps-4{grid-template-columns:repeat(4,1fr);
}
.method-step{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 clamp(6px, 1vw, 16px);
}
.method-step-icon{
  position:relative; width:100%;
  display:flex; justify-content:center; margin-bottom:20px;
}
.step-circle{
  position:relative; aspect-ratio:1/1;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.step-badge{
  position:absolute; bottom:-9px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.765); font-weight:600;
}
.method-step .step-link{
  position:absolute; top:50%; transform:translateY(-50%);
  left:calc(50% + clamp(40px, 3.6vw, 52px));
  right:calc(-50% + clamp(40px, 3.6vw, 52px));
  height:1px;
  width:auto; margin:0;
}
.method-step .step-link::after{
  content:""; position:absolute; right:0; top:-2.5px;
  width:6px; height:6px; border-radius:50%;
  background:var(--color-secondary); opacity:.9;
}
.method-step-body h4{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.882); font-weight:600; margin-bottom:9px; line-height:1.3;
}
.method-step-body p{
  font-size:calc(var(--font-size-base) * 0.765); line-height:1.6;
}

@media (max-width: 1000px){
  .method-layout{grid-template-columns:1fr; gap:40px; text-align:center;}
  .method-intro{max-width:560px; margin:0 auto;}
  .method-text{margin-left:auto; margin-right:auto;}
  .method-deco{width:190px; opacity:.08;}
}
@media (max-width: 700px){
  .method-steps.steps-3, .method-steps.steps-4{grid-template-columns:1fr; gap:30px;}
  .method-step .step-link{display:none;}
  .method-step{flex-direction:row; text-align:left; gap:18px; align-items:flex-start;}
  .method-step-icon{width:auto; margin-bottom:0;}
  .step-circle{width:58px;}
  .method-deco{display:none;}
}

/* ---------- 6 : FAQ DEUX COLONNES ---------- */
.faq-columns .faq-list{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 clamp(28px, 4vw, 60px);
  align-items:start;
}
.faq-columns details{
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.faq-columns summary{font-size:calc(var(--font-size-base) * 0.912); gap:16px;
}
.faq-columns .faq-answer{font-size:calc(var(--font-size-base) * 0.853); max-width:none;
}

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

/* ---------- 6 : APPEL À L'ACTION ---------- */
.cta-banner{
  background:var(--color-primary);
  border:1.5px solid var(--color-secondary);
  box-shadow:0 0 0 4px rgba(218,174,127,.16);
  border-radius:var(--radius);
  padding:clamp(36px, 4.5vw, 56px);
  color:var(--ivory);
  align-items:center;
}
.cta-banner h3{
  color:var(--ivory);
  font-size:clamp(22px, 2.4vw, 26px);
  max-width:520px; line-height:1.18;
}
.cta-banner p{
  color:rgba(255,253,248,.72);
  margin-top:12px; max-width:480px; font-size:calc(var(--font-size-base) * 0.912);
}
.cta-banner .btn-primary,
.cta-banner .btn-booking{
  background:var(--color-secondary);
  color:var(--color-primary);
  border-color:var(--color-secondary);
  box-shadow:none; font-weight:600;
}
.cta-banner .btn-booking .btn-icon{color:var(--color-primary);
}
.cta-banner .btn-primary:hover,
.cta-banner .btn-booking:hover{
  background:var(--color-accent-dark); border-color:var(--color-accent-dark);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.5);
}

@media (max-width: 780px){
  .cta-banner{flex-direction:column; align-items:flex-start; gap:26px;}
  .cta-banner .btn{width:100%; justify-content:center;}
}

/* Espacements resserrés en bas de page d'accueil */
#faq{padding-bottom:56px;
}
#faq + section{padding-top:0;
}

/* ---------- 7 : PIED DE PAGE EN VERT ---------- */
.footer-icon{
  border-color:rgba(218,174,127,.6);
}
.footer-social .social-icons a{
  border-color:rgba(255,255,255,.24);
}

/* Le filtre n'est appliqué qu'au logo personnalisé, pas à la version claire fournie */
.footer-logo img.is-inverted{filter:brightness(0) invert(1); opacity:.95;
}

/* =========================================================
   FORMATS INTERMÉDIAIRES — fenêtre non maximisée
   ========================================================= */

/* Entre 1000 et 1250 px : on resserre sans casser les grilles */
@media (max-width: 1250px) and (min-width: 1001px){
  .method-layout{gap:34px;}
  .method-text{font-size:calc(var(--font-size-base) * 0.853);}
  .method-step-body h4{font-size:calc(var(--font-size-base) * 0.824);}
  .method-step-body p{font-size:calc(var(--font-size-base) * 0.735);}
  .step-circle{width:64px;}
  .faq-columns .faq-list{gap:0 32px;}
  .footer-infos{gap:26px;}
}

/* Entre 780 et 1000 px : la méthode passe en pile, tout reste lisible */
@media (max-width: 1000px) and (min-width: 781px){
  .results-grid{grid-template-columns:repeat(2,1fr);}
  .cta-banner h3{font-size:clamp(22px, 2.4vw, 26px);}
  .footer-bar{flex-wrap:wrap; justify-content:center; gap:24px;}
  .footer-infos{width:100%; justify-content:space-around;}
}

/* Tablette et téléphone : vérifications finales */
@media (max-width: 780px){
  .method-section{padding:48px 0;}
  .method-intro h2{font-size:clamp(22px, 4vw, 26px);}
  .method-subtitle{font-size:calc(var(--font-size-base) * 1.118);}
  .result-body{padding:14px 16px;}
  .result-body h3{font-size:calc(var(--font-size-base) * 0.882);}
  .faq-columns summary{font-size:calc(var(--font-size-base) * 0.882);}
  #faq{padding-bottom:40px;}
}

@media (max-width: 600px){
  .method-section{padding:40px 0;}
  .method-step{padding:0;}
  .step-circle{width:54px;}
  .step-badge{width:23px; height:23px; font-size:calc(var(--font-size-base) * 0.706);}
  .method-step-body h4{font-size:calc(var(--font-size-base) * 0.853);}
  .cta-banner{border-radius:var(--radius);}
  .cta-banner h3{font-size:clamp(18px, 2vw, 20px);}
  .footer-bar{padding:28px 0 22px;}
  .footer-logo img{max-width:180px;}
  .results-track .result-card{width:80vw;}
}

/* =========================================================
   BLOCS ISOLÉS — chaque bloc a ses propres variables.
   Modifier un bloc n'affecte jamais les autres.
   ========================================================= */

/* ---------- LOGO COMPOSÉ (symbole + texte séparés) ---------- */
.logo-compose{display:inline-flex; align-items:center;
}
.logo-compose img{display:block; width:auto;
}
.logo-compose.logo-header{gap:var(--logo-gap-header);
}
.logo-compose.logo-header .logo-symbol{height:var(--logo-sym-header);
}
.logo-compose.logo-header .logo-text{height:var(--logo-txt-header);
}
.logo-compose.logo-footer{gap:var(--logo-gap-footer);
}
.logo-compose.logo-footer .logo-symbol{height:var(--logo-sym-footer);
}
.logo-compose.logo-footer .logo-text{height:var(--logo-txt-footer);
}
.logo-custom.logo-header{height:var(--logo-sym-header); width:auto; max-width:250px; object-fit:contain;
}
.logo-custom.logo-footer{height:var(--logo-sym-footer); width:auto; max-width:220px; object-fit:contain;
}
.logo-fallback{height:var(--logo-sym-header); width:auto;
}

@media (max-width: 780px){
  .logo-compose.logo-header .logo-symbol{height:calc(var(--logo-sym-header) * .78);}
  .logo-compose.logo-header .logo-text{height:calc(var(--logo-txt-header) * .78);}
}
@media (max-width: 480px){
  .logo-compose.logo-header .logo-text{display:none;}
}

/* ---------- BANDE D'APPEL À L'ACTION (au-dessus du pied de page) ---------- */
.cta-band{
  --band-bg:var(--color-primary);
  --band-title:var(--ivory);
  --band-text:rgba(255,253,248,.72);
  --band-accent:var(--color-secondary);
  background:var(--band-bg);
  padding:30px 0;
  margin:0;
}
.cta-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px, 3vw, 40px); flex-wrap:wrap;
}
.cta-band-content{display:flex; align-items:center; gap:20px; flex:1 1 auto; min-width:0;
}
.cta-band-icon{
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid var(--band-accent); color:var(--band-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cta-band-title{
  font-family:var(--font-heading);
  font-size:clamp(18px, 2vw, 20px);
  color:var(--band-title); line-height:1.25; margin:0;
}
.cta-band-text{
  font-size:calc(var(--font-size-base) * 0.794); color:var(--band-text); margin:6px 0 0;
}
.btn-band{
  background:var(--color-bg); color:var(--color-primary);
  border:1.5px solid var(--band-accent); border-radius:var(--radius-md);
  padding:13px 22px; font-weight:500; font-size:calc(var(--font-size-base) * 0.824);
  flex-shrink:0; box-shadow:none;
}
.btn-band .btn-icon{color:var(--color-accent-dark);
}
.btn-band:hover{
  background:var(--ivory); border-color:var(--color-accent-dark);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.5);
}

@media (max-width: 820px){
  .cta-band-inner{flex-direction:column; align-items:stretch; gap:20px;}
  .cta-band-content{gap:16px;}
  .cta-band-icon{width:46px; height:46px;}
  .btn-band{width:100%; justify-content:center;}
}
@media (max-width: 520px){
  .cta-band{padding:26px 0;}
  .cta-band-icon{display:none;}
  .cta-band-title{font-size:calc(var(--font-size-base) * 1.059);}
}

/* ---------- PIED DE PAGE CLAIR, HORIZONTAL ---------- */
.site-footer{
  --foot-bg:var(--ivory);
  --foot-text:var(--color-ink);
  --foot-muted:var(--color-muted);
  --foot-accent:var(--color-secondary);
  background:var(--foot-bg);
  border-top:1px solid var(--line);
  color:var(--foot-text);
  margin-top:0;
}
.footer-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px, 2.6vw, 40px);
  padding:22px 0 18px;
  border-bottom:1px solid rgba(44,80,87,.1);
  flex-wrap:nowrap;
}
.footer-logo{flex-shrink:0;
}
.footer-logo img{filter:none; opacity:1;
}
.footer-infos{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(16px, 2.4vw, 40px);
  flex:1 1 auto; flex-wrap:nowrap; min-width:0;
}
.footer-info{display:flex; align-items:center; gap:11px; min-width:0;
}
.footer-icon{
  width:34px; height:34px; border-radius:50%;
  border:1.3px solid var(--foot-accent); color:var(--color-accent-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.footer-info-text{display:flex; flex-direction:column; gap:2px; line-height:1.35; min-width:0;
}
.footer-info-text strong{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.765); font-weight:600;
  color:var(--foot-text); white-space:nowrap;
}
.footer-info-text strong a{color:inherit;
}
.footer-info-text strong a:hover{color:var(--color-accent-dark);
}
.footer-info-text span{font-size:calc(var(--font-size-base) * 0.706); color:var(--foot-muted); white-space:nowrap;
}
.footer-social{flex-shrink:0;
}
.footer-social .social-icons{margin:0; gap:8px;
}
.footer-social .social-icons a{
  width:34px; height:34px;
  border:1.3px solid rgba(44,80,87,.2); color:var(--color-primary);
}
.footer-social .social-icons a:hover{
  background:var(--color-primary); border-color:var(--color-primary); color:var(--ivory);
}
.footer-legal{
  display:flex; align-items:center; justify-content:flex-end;
  gap:14px; flex-wrap:wrap; padding:12px 0 18px; font-size:max(12px, calc(var(--font-size-base) * 0.676));
}
.footer-legal-links{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.footer-legal-links a{color:var(--foot-muted);
}
.footer-legal-links a:hover{color:var(--color-accent-dark); text-decoration:underline;
}
.legal-sep{color:rgba(44,80,87,.25);
}
.footer-copy{color:var(--foot-muted);
}

@media (max-width: 1150px){
  .footer-infos{gap:20px;}
  .footer-info-text strong{font-size:calc(var(--font-size-base) * 0.735);}
  .footer-info-text span{font-size:max(12px, calc(var(--font-size-base) * 0.676));}
  .footer-icon{width:31px; height:31px;}
}
@media (max-width: 940px){
  .footer-bar{flex-wrap:wrap; justify-content:center; gap:20px; padding:24px 0 18px;}
  .footer-infos{width:100%; order:3; justify-content:space-between; gap:14px;}
}
@media (max-width: 700px){
  .footer-infos{flex-direction:column; align-items:flex-start; gap:16px; max-width:320px; margin:0 auto;}
  .footer-info-text strong, .footer-info-text span{white-space:normal;}
  .footer-legal{justify-content:center; flex-direction:column; gap:10px; text-align:center;}
}

/* ---------- BLOC DE CONCLUSION « VOUS N'ÊTES PAS SEUL » ---------- */
.reco-outro{
  --outro-bg:var(--ivory);
  --outro-border:var(--color-secondary);
  --outro-text:var(--color-primary);
  background:var(--outro-bg);
  color:var(--outro-text);
  border:1.5px solid var(--outro-border);
  box-shadow:0 0 0 3px rgba(218,174,127,.14);
  border-radius:var(--radius);
  padding:28px 36px;
  max-width:820px; margin:40px auto 0;
  font-size:calc(var(--font-size-base) * 0.941); line-height:1.7;
}

@media (max-width: 600px){
  .reco-outro{padding:22px; font-size:calc(var(--font-size-base) * 0.882); border-radius:var(--radius);}
}

/* ---------- MÉTHODE REGENX — caractère sans fond vert ---------- */
.method-section{
  --meth-bg:transparent;
  --meth-card:var(--ivory);
  --meth-border:var(--color-secondary);
  --meth-title:var(--color-primary);
  --meth-accent:var(--color-accent-dark);
  background:var(--meth-bg);
  padding:clamp(52px, 5.5vw, 84px) 0;
  position:relative; overflow:hidden;
}
.method-deco{
  opacity:.06;
  background-image:url('assets/images/logo_symbol_gold.png');
}
.method-layout{
  background:var(--meth-card);
  border:1.5px solid var(--meth-border);
  box-shadow:0 0 0 4px rgba(218,174,127,.12);
  border-radius:var(--radius);
  padding:clamp(32px, 3.6vw, 52px);
  display:grid; grid-template-columns:.82fr 1.18fr;
  gap:clamp(30px, 3.6vw, 56px); align-items:center;
  position:relative; z-index:2;
}
.method-intro .eyebrow{color:var(--meth-accent);
}
.method-intro h2{color:var(--meth-title); font-size:clamp(22px, 2.4vw, 26px); margin:12px 0 8px;
}
.method-subtitle{
  font-family:var(--font-heading); font-size:clamp(18px, 2vw, 20px);
  color:var(--meth-accent); margin-bottom:16px; font-weight:400;
}
.method-text{color:var(--color-ink); font-size:calc(var(--font-size-base) * 0.882); max-width:380px; margin-bottom:24px;
}

/* Cercles d'étapes : vert plein, icônes dorées */
.step-circle{
  background:var(--color-primary);
  border:none;
  color:var(--color-secondary);
  width:clamp(60px, 5.6vw, 76px);
}
.step-badge{
  background:var(--color-secondary); color:var(--color-primary);
  border:2.5px solid var(--meth-card);
}
.method-step .step-link{background:var(--color-secondary); opacity:.55;
}
.method-step-body h4{color:var(--color-ink);
}
.method-step-body p{color:var(--color-ink);
}
.method-btn .btn-gold{background:var(--color-primary); color:var(--ivory);
}
.method-btn .btn-gold:hover{background:var(--color-accent-dark);
}

@media (max-width: 1000px){
  .method-layout{grid-template-columns:1fr; gap:36px; text-align:center;}
  .method-intro{max-width:560px; margin:0 auto;}
  .method-text{margin-left:auto; margin-right:auto;}
}
@media (max-width: 700px){
  .method-layout{padding:28px 22px; border-radius:var(--radius);}
}

/* ---------- PAGE À PROPOS — engagements en cartes ---------- */
.values-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.value-card{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--ivory); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px;
  transition:border-color .25s ease;
}
.value-card:hover{border-color:var(--color-secondary);
}
.value-check{
  width:30px; height:30px; border-radius:50%;
  background:var(--color-accent-light); color:var(--color-primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.value-body h4{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.912); font-weight:600;
  color:var(--color-ink); margin-bottom:7px;
}
.value-body p{font-size:calc(var(--font-size-base) * 0.824); line-height:1.6; margin:0;
}

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

/* ---------- GALERIE DE DIPLÔMES ---------- */
.diplomas-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.diploma-card{
  background:var(--ivory); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.diploma-card:hover{
  transform:translateY(-5px);
  border-color:var(--color-secondary);
  box-shadow:var(--shadow);
}
.diploma-thumb{ display:block;
  aspect-ratio:4/3; overflow:hidden; background:var(--color-bg);
}
.diploma-thumb img{width:100%; height:100%; object-fit:cover;
}
.diploma-zoom{
  position:absolute; bottom:10px; right:10px;
  background:rgba(32,48,47,.75); color:#fff;
  font-size:max(12px, calc(var(--font-size-base) * 0.647)); padding:5px 12px; border-radius:var(--radius-pill);
  opacity:0; transition:opacity .25s ease;
}
.diploma-card:hover .diploma-zoom{opacity:1;
}
.diploma-body{padding:18px 20px;
}
.diploma-body h3{
  font-family:var(--font-body); font-size:calc(var(--font-size-base) * 0.912); font-weight:600;
  color:var(--color-ink); margin-bottom:5px;
}
.diploma-body p{font-size:calc(var(--font-size-base) * 0.765); color:var(--color-ink); margin:0;
}

@media (max-width: 900px){
  .diplomas-grid{grid-template-columns:repeat(2,1fr); gap:18px;}
}
@media (max-width: 560px){
  .diplomas-grid{grid-template-columns:1fr;}
  .diploma-zoom{opacity:1;}
}

/* ---------- ESPACEMENTS RESSERRÉS ---------- */
.rhs-section + .rhs-section{padding-top:clamp(48px, 5vw, 76px);
}
section.bg-white + section.bg-white{padding-top:0;
}

/* =========================================================
   BANDE DES POINTS FORTS SUR FOND VERT
   ========================================================= */

.trust.bg-dark{
  --tr-bg:var(--color-primary);
  --tr-title:var(--ivory);
  --tr-text:rgba(255,253,248,.7);
  --tr-accent:var(--color-secondary);
  background:var(--tr-bg);
  border-top:none;
  border-bottom:none;
  padding:48px 0;
  position:relative;
}
.trust.bg-dark .icon-circle{
  border-color:var(--tr-accent);
  color:var(--tr-accent);
  background:transparent;
}
.trust.bg-dark .trust-item h4{color:var(--tr-title);
}
.trust.bg-dark .trust-item p{color:var(--tr-text);
}
.trust.bg-dark .trust-item::after{background:rgba(218,174,127,.35);
}

/* La bande verte des points forts reste distincte de la bande d'infos :
   elle porte des icônes en cercle et un texte descriptif. */
.trust.bg-dark + .infobar,
.infobar + .trust.bg-dark{
  border-top:1px solid rgba(218,174,127,.25);
}

@media (max-width: 900px){
  .trust.bg-dark{padding:36px 0;}
}

/* =========================================================
   LOGO EN CASSE NORMALE — ajustement des proportions
   ========================================================= */
:root{
  --logo-sym-header:56px; --logo-txt-header:24px; --logo-gap-header:13px;
  --logo-sym-footer:48px; --logo-txt-footer:21px; --logo-gap-footer:11px;
}

/* =========================================================
   VÉRIFICATIONS FINALES — tablette et téléphone
   ========================================================= */

/* Les boutons à libellé long ne débordent jamais */
.btn{white-space:normal; text-align:center;
}
.nav-cta .btn-booking{white-space:nowrap;
}

@media (max-width: 980px){
  .nav-cta .btn-booking{
    white-space:normal;
    max-width:190px;
    line-height:1.25;
    text-align:left;
  }
}
@media (max-width: 600px){
  .btn{
    width:100%; justify-content:center;
    padding-left:16px; padding-right:16px;
    word-break:break-word;
  }
  .nav-cta .btn-booking{width:auto; max-width:150px; font-size:calc(var(--font-size-base) * 0.706);}
}

/* Élément décoratif de l'ancienne bande : masqué sur petits écrans */
.infobar-arc{max-width:40vw;
}
@media (max-width: 900px){
  .infobar-arc{display:none;}
}

/* Aucun bloc ne peut dépasser la largeur de l'écran */
.cta-band, .site-footer, .method-section, .trust, .infobar,
.results-carousel, .footer-bar, .footer-infos{max-width:100%;
}

/* Le carrousel reste manipulable au doigt */
@media (hover: none){
  .results-carousel .results-track{animation-play-state:paused;}
  .results-carousel{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .ba-range{touch-action:pan-y;}
}

/* Cibles tactiles conformes aux recommandations d'accessibilité (44px) */
@media (pointer: coarse){
  .nav-links > li > a,
  .footer-legal-links a,
  .filter-btn,
  .faq-list summary{min-height:44px; display:flex; align-items:center;}
  .faq-list summary{justify-content:space-between;}
  .social-icons a{width:44px; height:44px;}
}

/* Protection visuelle des diplômes : empêche la sélection et le glisser-déposer.
   Le filigrane intégré à l'image reste la protection principale. */
.diploma-thumb img, .certif-image img{
  -webkit-user-select:none; user-select:none;
  -webkit-user-drag:none; -webkit-touch-callout:none;
  pointer-events:none;
}
.diploma-thumb, .certif-image{position:relative;
}
.diploma-thumb::before, .certif-image::before{
  content:""; position:absolute; inset:0; z-index:2;
}

/* =========================================================
   TYPOGRAPHIE DES PAGES DE CONTENU
   Alignement à gauche, bord droit naturel.
   La justification a été retirée en 2.2 : sans césure, elle
   étirait les espaces entre les mots et rejetait des mots
   isolés en fin de ligne. Elle empêchait aussi tout centrage,
   une règle directe sur p l'emportant sur l'héritage.
   ========================================================= */

.entry-content p,
.about-story p,
.single-article .entry-content p{
  text-align:left;
  -webkit-hyphens:none;
  word-spacing:normal;
  margin:0 0 20px;
  line-height:1.8;
}

/* Respiration entre un paragraphe et le titre qui suit */
.entry-content h2,
.about-story h2,
.single-article .entry-content h2{
  margin:38px 0 16px;
  font-size:clamp(18px, 2vw, 20px);
  line-height:1.25;
  text-align:left;
}
.entry-content h2:first-child,
.about-story h2:first-child{margin-top:0;
}

.entry-content h3,
.about-story h3,
.single-article .entry-content h3{
  margin:34px 0 14px;
  font-size:clamp(17px, 1.6vw, 18px);
  font-family:var(--font-body); font-weight:600;
  text-align:left;
}

/* Les paragraphes qui commencent par un intitulé en gras
   (« Ce n'est pas une greffe. », « 1. Le diagnostic. »)
   restent alignés à gauche : trop courts pour être justifiés. */
.entry-content p:has(> strong:first-child),
.about-story p:has(> strong:first-child){
  text-align:left;
  margin-bottom:16px;
}

/* Un passage en italique reste du texte courant : l'éclaircir le
   faisait paraître moins important que ce qui l'entoure, alors que
   l'italique sert précisément à souligner. */
.entry-content em, .about-story em{color:inherit;
}

/* Écrans étroits : la justification créerait des trous disgracieux */
@media (max-width: 700px){
  .entry-content p,
  .about-story p,
  .single-article .entry-content p{text-align:left;}
  .entry-content h2, .about-story h2{margin:36px 0 14px;}
}

/* Le titre de page ne colle plus au contenu */
.page-header-simple{padding:70px 0 0;
}
/* Le titre de page ne garde plus de marge basse et la section qui
   suit ouvre à 24 px : les deux réglages s'additionnaient, ce qui
   creusait une cinquantaine de pixels entre le titre et la première
   phrase. Vaut pour toutes les pages bâties sur ce gabarit. */
.page-header-simple + section{padding-top:24px;
}

/* =========================================================
   LARGEUR DES PAGES DE CONTENU
   Bloc centré, largeur élargie tout en restant confortable
   à la lecture (environ 80 caractères par ligne).
   ========================================================= */

.entry-content,
.about-story,
.single-article .entry-content{
  margin-left:auto;
  margin-right:auto;
}

/* Le titre de page s'aligne sur le bloc de texte */

/* Le conteneur des pages simples est centré, plus large */
.single-article{ margin-left:auto; margin-right:auto;
}

/* Sur très grand écran, on autorise un peu plus de largeur */
@media (min-width: 1500px){
  .entry-content,
  .about-story,
  .single-article,
  .single-article .entry-content,
  .page-header-simple .wrap > *{max-width:980px;}
}

/* Écrans intermédiaires : le bloc occupe la largeur disponible */
@media (max-width: 1000px){
  .entry-content,
  .about-story,
  .single-article,
  .single-article .entry-content,
  .page-header-simple .wrap > *{max-width:100%;}
}

/* =========================================================
   PAGE TARIFS
   ========================================================= */

.price-families{
  --pr-card:var(--ivory);
  --pr-border:rgba(44,80,87,.14);
  --pr-accent:var(--color-secondary);
  max-width:820px; margin:0 auto;
}

.price-family-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:10px; margin-bottom:14px;
  border-bottom:1px solid var(--pr-accent);
}
.price-family-icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--color-primary); color:var(--pr-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.price-family-head h3{
  font-family:var(--font-heading);
  font-size:clamp(18px, 2vw, 20px);
  font-weight:400; color:var(--color-primary); margin:0;
}

.price-cure{
  background:var(--pr-card);
  border:1px solid var(--pr-border);
  border-radius:var(--radius-md);
  display:grid;
  transition:border-color .25s ease;
}
.price-cure:hover{border-color:var(--pr-accent);
}
.price-cure.is-highlighted{
  border:1.5px solid var(--pr-accent);
  box-shadow:0 0 0 3px rgba(218,174,127,.12);
}
.price-cure-head h4{
  font-family:var(--font-body); font-weight:600;
  color:var(--color-ink); margin:0;
}
.price-zone{ color:var(--color-muted);
}
.price-cure-amount{text-align:right; line-height:1.25;
}
.price-value{
  display:block; font-family:var(--font-heading);
  color:var(--color-primary); font-weight:500;
}
.price-sessions{display:block; color:var(--color-muted); margin-top:2px;
}

.btn-price{
  background:var(--color-primary); color:var(--ivory);
  border:1px solid var(--pr-accent); border-radius:var(--radius-sm);
  padding:9px 16px; font-size:calc(var(--font-size-base) * 0.735); font-weight:500;
  white-space:nowrap; box-shadow:none;
}
.btn-price:hover{
  background:var(--color-accent-dark); border-color:var(--color-accent-dark);
  transform:translateY(-1px);
}

/* --- Encadrés de compléments --- */
.price-box{
  max-width:820px;
  background:var(--ivory);
  border:1px solid rgba(44,80,87,.14);
  border-radius:var(--radius-md);
}
.price-box.is-highlighted{
  border:1.5px solid var(--color-secondary);
  box-shadow:0 0 0 3px rgba(218,174,127,.12);
}
.price-box-head{display:flex; align-items:center; gap:11px;
}
.price-box-icon{
  width:34px; height:34px; border-radius:50%;
  border:1.4px solid var(--color-secondary); color:var(--color-accent-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.price-box.is-highlighted .price-box-icon{
  background:var(--color-primary); border-color:var(--color-primary);
  color:var(--color-secondary);
}
.price-box-head h3{
  font-family:var(--font-heading); font-size:calc(var(--font-size-base) * 1.059); font-weight:400;
  color:var(--color-primary); margin:0;
}
.price-box-head p{font-size:calc(var(--font-size-base) * 0.735); color:var(--color-muted); margin:2px 0 0;
}

/* Le nom de la zone est annoncé une seule fois, en tête de groupe : les
   tuiles n'ont plus à le répéter, ce qui leur évitait de se couper sur
   trois lignes. Les filets de part et d'autre centrent l'intitulé sans
   ajouter de trait plein. */
.price-box-zone{
  display:flex; align-items:center; gap:10px;
  margin:16px 0 8px;
}
.price-box-zone::before,
.price-box-zone::after{
  content:""; flex:1; height:0;
  border-top:1px solid rgba(218,174,127,.45);
}
.price-box-zone span{
  font-size:calc(var(--font-size-base) * 0.647);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-accent-dark);
}
.price-box-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.price-box-tile{
  display:block; text-align:center; text-decoration:none;
  background:rgba(218,174,127,.09);
  border:1px solid rgba(218,174,127,.28);
  border-radius:var(--radius-sm);
  padding:9px 6px;
  transition:border-color .18s ease, background-color .18s ease;
}
.price-box-tile:hover,
.price-box-tile:focus-visible{
  background:rgba(218,174,127,.16);
  border-color:var(--color-secondary);
}
.price-tile-label{
  display:block; min-height:2.5em;
  font-size:calc(var(--font-size-base) * 0.82); line-height:1.3;
  color:var(--color-heading);
}
.price-tile-amount{
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.118);
  color:var(--color-button);
}
.price-box-cta{text-align:center; margin:14px 0 0;
}

.price-note{
  max-width:820px;
  text-align:center; font-size:calc(var(--font-size-base) * 0.765); line-height:1.65;
  color:var(--color-muted);
  border:1px dashed rgba(44,80,87,.16); border-radius:var(--radius-md);
}

@media (max-width: 760px){
  .price-cure{grid-template-columns:1fr auto; gap:8px 14px;}
  .btn-price{grid-column:1 / -1; justify-content:center; width:100%;}
  .price-box-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 520px){
  .price-cure{grid-template-columns:1fr;}
  .price-cure-amount{text-align:left;}
  /* Sur téléphone, la tuile s'étale sur la largeur : le nom à gauche, le
     montant à droite, comme une ligne de liste. */
  .price-box-grid{grid-template-columns:1fr;}
  .price-box-tile{display:flex; justify-content:space-between; align-items:center; text-align:left; gap:12px;}
  .price-tile-label{min-height:0;}
}

/* =========================================================
   ENCADRÉ DIAGNOSTIC — tête de la page Tarifs
   ========================================================= */

.diag-box{
  --dg-bg:var(--color-primary);
  --dg-accent:var(--color-secondary);
  --dg-text:var(--ivory);
  max-width:820px;
  background:var(--dg-bg);
  border:1.5px solid var(--dg-accent);
  box-shadow:0 0 0 4px rgba(218,174,127,.16);
  border-radius:var(--radius);
}
.diag-head{display:flex; align-items:center; gap:13px;
}
.diag-icon{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--dg-accent); color:var(--dg-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.diag-head h3{
  font-family:var(--font-heading); font-size:clamp(18px, 2vw, 20px);
  font-weight:400; color:var(--dg-text); margin:0;
}
.diag-head p{
  font-size:var(--fs-ui); color:rgba(255,253,248,.72); margin:3px 0 0;
}

.diag-list{
  list-style:none; padding:0; margin:0 0 18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.diag-list li{
  background:rgba(255,253,248,.07);
  border:1px solid rgba(218,174,127,.3);
  border-radius:var(--radius-md);
  text-align:center;
  transition:background .25s ease, border-color .25s ease;
}
.diag-list li:has(a):hover{
  background:rgba(255,253,248,.13);
  border-color:var(--dg-accent);
}
.diag-list li > *{display:block;
}
.diag-list li > a > *{display:block;
}
.diag-label{
  font-family:var(--font-body); font-size:var(--fs-ui);
  color:rgba(255,253,248,.72); margin-bottom:4px;
}
.diag-price{
  font-family:var(--font-heading); font-size:calc(var(--font-size-base) * 1.118); color:var(--dg-accent);
}
.diag-cta{text-align:center; margin:0;
}
.btn-diag{
  background:var(--dg-accent); color:var(--color-primary);
  border:1.5px solid var(--dg-accent); border-radius:var(--radius-md);
  padding:12px 24px; font-weight:600; box-shadow:none;
}
.btn-diag .btn-icon{color:var(--color-primary);
}
.btn-diag:hover{
  background:var(--color-accent-dark); border-color:var(--color-accent-dark);
  color:var(--ivory);
}
.btn-diag:hover .btn-icon{color:var(--ivory);
}

@media (max-width: 620px){
  .diag-box{padding:20px; border-radius:var(--radius-md);}
  .diag-list{grid-template-columns:1fr; gap:8px;}
  .diag-list li{display:flex;}
  .diag-list li > a{display:flex; justify-content:space-between; align-items:center; width:100%;}
  .diag-list li > span{flex:1;}
  .diag-label{margin-bottom:0;}
  .btn-diag{width:100%; justify-content:center;}
}

/* =========================================================
   ESPACEMENTS DE LA PAGE TARIFS — resserrés
   ========================================================= */

.page-tarifs section, .page-template-page-tarifs section{padding-top:24px;
}

/* =========================================================
   LARGEUR DES PAGES DE CONTENU — élargie
   ========================================================= */

.entry-content,
.about-story,
.single-article,
.single-article .entry-content,
.page-header-simple .wrap > *{
  max-width:1080px;
}

@media (min-width: 1500px){
  .entry-content,
  .about-story,
  .single-article,
  .single-article .entry-content,
  .page-header-simple .wrap > *{max-width:1140px;}
}
@media (max-width: 1150px){
  .entry-content,
  .about-story,
  .single-article,
  .single-article .entry-content,
  .page-header-simple .wrap > *{max-width:100%;}
}

/* =========================================================
   PAGE TARIFS — cartes compactes, espacements resserrés
   ========================================================= */

/* La carte tient sur une seule ligne : plus de bandeau détaché en dessous */
.price-desc{font-size:calc(var(--font-size-base) * 0.735); color:var(--color-muted); margin:3px 0 0;
}

/* Mention « produits inclus » : discrète, sur la même carte */
.price-includes-inline{
  font-size:max(12px, calc(var(--font-size-base) * 0.676)); color:var(--color-muted);
  margin:4px 0 0; padding-left:15px; position:relative;
  line-height:1.4;
}
.price-includes-inline::before{
  content:"\2713"; position:absolute; left:0;
  color:var(--color-secondary); font-weight:700; font-size:max(12px, calc(var(--font-size-base) * 0.647));
}

.price-value{font-size:calc(var(--font-size-base) * 1.18);
}
.price-sessions{font-size:max(12px, calc(var(--font-size-base) * 0.647));
}

/* Encadrés de compléments plus compacts */
.price-box{margin-top:16px; padding:18px 22px;
}
.price-box-head{margin-bottom:12px;
}
.price-box-zone{margin:13px 0 7px;
}
.price-box-cta{margin-top:12px;
}
.price-note{margin-top:16px; padding:12px 20px;
}

/* Encadré diagnostic : marge basse réduite */
.diag-box{margin-bottom:22px; padding:20px 24px;
}
.diag-head{margin-bottom:13px;
}
.diag-list{margin-bottom:14px;
}
.diag-list li > *, .diag-list li > a{padding:11px 14px;
}

@media (max-width: 520px){
  .price-cure{grid-template-columns:1fr; gap:8px;}
  .price-cure-amount{text-align:left;}
}

/* =========================================================
   PAGE TARIFS — structure d'origine, espaces entre catégories réduits
   ========================================================= */

/* Cartes : retour à la présentation en trois lignes */
.price-cure{
  grid-template-columns:1fr auto;
  padding:14px 18px;
  gap:6px 18px;
  align-items:center;
}
.price-cure-head h4{font-size:calc(var(--font-size-base) * 0.853);
}
.price-zone{font-size:calc(var(--font-size-base) * 0.765); margin:2px 0 0;
}
.price-includes-inline{display:none;
}

.price-cure-detail{
  grid-column:1 / -1;
  padding-top:10px;
  margin-top:2px;
  border-top:1px dashed rgba(44,80,87,.14);
}
.price-cure-detail p{font-size:calc(var(--font-size-base) * 0.765); margin:0 0 6px;
}
.price-includes{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:4px 18px;
}
.price-includes li{
  font-size:calc(var(--font-size-base) * 0.735); color:var(--color-muted);
  padding-left:18px; position:relative;
}
.price-includes li::before{
  content:"\2713"; position:absolute; left:0;
  color:var(--color-secondary); font-weight:700;
}

/* L'espace entre catégories est le seul à réduire */

/* Sections : plus de padding hérité qui gonfle les écarts */
.tarifs-section{padding-top:24px; padding-bottom:48px;
}

/* =========================================================
   PAGE TARIFS — espacements définitifs
   Règle unique : neutralise toutes les marges héritées.
   ========================================================= */

.price-families{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.price-family{margin:0 !important; padding:0 !important;
}
.price-family:last-child{margin-bottom:0 !important;
}

.price-family-head{
  padding:0 0 8px !important;
  margin:0 0 10px !important;
}

.price-cures{
  display:flex; flex-direction:column;
  gap:7px;
  margin:0 !important;
}
.price-cure{margin:0 !important;
}

/* Les encadrés de compléments suivent le même rythme */
.price-box{margin:14px auto 0 !important;
}
.price-note{margin:14px auto 0 !important;
}
.diag-box{margin:0 auto 18px !important;
}

/* La section elle-même ne rajoute pas de marge superflue */
.tarifs-section{padding:20px 0 44px !important;
}

/* =========================================================
   PAGE TARIFS — séparation des séances à l'unité
   ========================================================= */

/* Le bloc s'aligne désormais sur la largeur des trois colonnes, et son
   titre est un titre de section comme les autres. Il était auparavant
   posé en absolu sur un filet de séparation, en petites capitales :
   ce traitement le faisait paraître flotter à l'intérieur de l'encadré
   qui le suit. */
.price-extras{
  margin:0 !important;
  padding-top:0;
  border-top:none;
  position:static;
}

/* Les encadrés de compléments prennent un fond légèrement distinct */
/* Séance supplémentaire et séance d'entretien côte à côte : ce sont
   deux informations de même nature, que le visiteur compare. */
.price-extras-grid{
  display:grid; gap:13px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.price-extras .price-box{
  background:var(--card,#fffdf8);
  margin:0 !important;
}
.price-extras .price-box:last-child{margin-bottom:0 !important;
}

@media (max-width: 620px){
  .price-extras{margin-top:30px !important; padding-top:26px;}
  .price-extras-title{font-size:max(12px, calc(var(--font-size-base) * 0.618));}
}

/* =========================================================
   PAGE À PROPOS — bloc « Le cabinet » pleine largeur
   ========================================================= */

.cabinet-head{
  max-width:100% !important;
  margin-bottom:30px;
}
.cabinet-text{
  max-width:100%;
  margin-top:14px;
  font-size:calc(var(--font-size-base) * 0.941);
  line-height:1.75;
  text-align:left;
}

/* Cohérence avec la galerie qui suit */
.cabinet-gallery{gap:18px;
}

/* =========================================================
   EN-TÊTE DE PAGE — alignement à gauche
   Le sous-titre suit l'alignement du titre, sans décalage.
   ========================================================= */

.page-header-simple .wrap > *{
  margin-left:0 !important;
  margin-right:auto !important;
}
.page-header-simple p{
  text-align:left !important;
  margin-top:14px;
  max-width:860px;
  font-size:calc(var(--font-size-base) * 0.971);
  line-height:1.7;
  color:var(--color-ink);
}
.page-header-simple h1{margin-bottom:0;
}

/* Page d'une expertise : même alignement */
.single-rhs_service .page-header-simple p{margin-left:0;
}

/* =========================================================
   MIGRATION 2.1 — PAGE EXPERTISE (option A)
   Colonne latérale nourrie + collante, encadré « Le déroulé »,
   progression capillaire à curseur, styles de citation.
   Bloc ajouté en fin de fichier : il prime sur les règles
   antérieures sans avoir à les modifier.
   ========================================================= */

/* --- Colonne latérale collante ---------------------------
   Le bloc de réservation suit la lecture au lieu de dispa-
   raître dès le deuxième paragraphe. Désactivé sous 1024 px
   (la colonne passe alors sous le texte) et sur les écrans
   peu hauts, où un bloc collant masquerait le contenu. */
@media (min-width:1024px){
  .single-rhs_service .service-aside{
    position:sticky;
    top:110px;
    align-self:start;
  }
}
@media (max-height:760px){
  .single-rhs_service .service-aside{position:static;}
}

/* --- Encadré « Le déroulé » ------------------------------ */
.process-box{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  margin-bottom:24px;
}
.process-box h4{
  font-family:var(--font-body);
  font-size:calc(var(--font-size-base) * 0.941);
  font-weight:600;
  margin:0;
}
.process-box ul{
  list-style:none;
  padding:0;
  margin:16px 0 0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.process-box li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  font-size:calc(var(--font-size-base) * 0.853);
  padding-bottom:11px;
  border-bottom:1px solid var(--line);
}
.process-box li:last-child{border-bottom:0; padding-bottom:0;
}
.process-label{color:var(--color-muted);
}
.process-value{color:var(--color-ink); font-weight:500; text-align:right;
}

/* --- Progression capillaire (curseur piloté) -------------
   La commande est placée SOUS l'image, jamais dessus :
   le défilement vertical de la page reste libre au pouce. */
.rhs-prog{margin:56px 0 8px;
}
.rhs-prog-title{
  font-family:var(--font-heading);
  font-size:clamp(18px, 2vw, 20px);
  margin:0 0 20px;
}
.rhs-prog-scene{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ivory);
  aspect-ratio:4/3;
}
.rhs-prog-scene img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.rhs-prog-top{opacity:0;
}
.rhs-prog-mention{
  position:absolute;
  left:0; right:0; bottom:0;
  margin:0;
  padding:10px 18px;
  font-size:calc(var(--font-size-base) * 0.735);
  font-style:italic;
  color:rgba(255,253,248,.94);
  background:linear-gradient(to top,rgba(32,48,47,.66),rgba(32,48,47,0));
}

.rhs-prog-command{margin-top:22px;
}
.rhs-prog-track{
  position:relative;
  height:44px;
  display:flex;
  align-items:center;
  touch-action:pan-y;
}
.rhs-prog-track::before{
  content:"";
  position:absolute;
  left:0; right:0;
  height:3px;
  background:var(--line);
  border-radius:2px;
}
.rhs-prog-fill{
  position:absolute;
  left:0;
  height:3px;
  width:0;
  background:var(--color-secondary);
  border-radius:2px;
}
.rhs-prog-track input[type=range]{
  position:relative;
  width:100%;
  height:44px;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  touch-action:pan-y;
  cursor:grab;
}
.rhs-prog-track input[type=range]:active{cursor:grabbing;
}
/* Poignée de 44 px : seuil de confort tactile */
.rhs-prog-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:44px; height:44px;
  border-radius:50%;
  background:#fffdf8;
  border:1px solid var(--color-accent-dark);
  box-shadow:0 6px 18px -8px rgba(32,48,47,.5);
  cursor:grab;
}
.rhs-prog-track input[type=range]::-moz-range-thumb{
  width:42px; height:42px;
  border-radius:50%;
  background:#fffdf8;
  border:1px solid var(--color-accent-dark);
  cursor:grab;
}
.rhs-prog-track input[type=range]:focus-visible{outline:none;
}
.rhs-prog-track input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 3px rgba(218,174,127,.6);
}
.rhs-prog-track input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 3px rgba(218,174,127,.6);
}
.rhs-prog-labels{
  display:flex;
  justify-content:space-between;
  margin:2px 0 0;
  font-size:calc(var(--font-size-base) * 0.824);
  color:var(--color-muted);
}
.rhs-prog-labels span:last-child{color:var(--color-ink); font-weight:500;
}
.rhs-prog-hint{
  text-align:center;
  font-size:calc(var(--font-size-base) * 0.765);
  color:var(--color-muted);
  margin:14px 0 0;
  transition:opacity .4s ease;
}
.rhs-prog-hint.is-hidden{opacity:0;
}

@media (max-width:640px){
  .rhs-prog{margin:40px 0 4px;}
  .rhs-prog-title{font-size:clamp(18px, 2vw, 20px);}
  .rhs-prog-scene{aspect-ratio:1/1;}
}

/* --- Citation en exergue (bloc « Citation en exergue ») ---
   Remplace les gros filets pleine largeur de WordPress par
   deux filets dorés courts, et resserre l'espacement. */
.entry-content .wp-block-pullquote{
  margin:40px 0;
  padding:0;
  border:0;
  background:transparent;
  text-align:center;
}
.entry-content .wp-block-pullquote blockquote{
  margin:0;
  padding:0;
  border:0;
}
.entry-content .wp-block-pullquote p{
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.18);
  line-height:1.4;
  font-weight:500;
  color:var(--color-primary);
  margin:0;
}
.entry-content .wp-block-pullquote::before,
.entry-content .wp-block-pullquote::after{
  content:"";
  display:block;
  width:56px;
  height:1px;
  margin:0 auto 24px;
  background:var(--color-secondary);
}
.entry-content .wp-block-pullquote::after{margin:24px auto 0;
}
/* La source vide ne réserve plus d'espace */
.entry-content .wp-block-pullquote cite:empty,
.entry-content .wp-block-quote cite:empty{display:none;
}
.entry-content .wp-block-pullquote cite{
  display:block;
  margin-top:14px;
  font-family:var(--font-body);
  font-size:calc(var(--font-size-base) * 0.794);
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-muted);
}

/* Bloc « Citation » simple : filet doré à gauche */
.entry-content .wp-block-quote{
  margin:34px 0;
  padding:4px 0 4px 26px;
  border-left:2px solid var(--color-secondary);
  border-right:0;
  background:transparent;
}
.entry-content .wp-block-quote p{
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.06);
  line-height:1.5;
  color:var(--color-primary);
  margin:0;
}

@media (max-width:640px){
  .entry-content .wp-block-pullquote{margin:24px 0;}
  .entry-content .wp-block-pullquote p{font-size:calc(var(--font-size-base) * 1.12);}
  .entry-content .wp-block-pullquote::before{margin-bottom:18px;}
  .entry-content .wp-block-pullquote::after{margin-top:18px;}
  .entry-content .wp-block-quote p{font-size:calc(var(--font-size-base) * 1.118);}
}

/* =========================================================
   MIGRATION 2.2 — TYPOGRAPHIE, CENTRAGE, PROGRESSION EN TÊTE
   ========================================================= */

/* --- Centrage effectif de la citation en exergue ----------
   Cible le paragraphe lui-même : une règle directe sur p
   l'emporte sur toute valeur héritée du bloc parent. */
.entry-content .wp-block-pullquote p,
.entry-content .wp-block-pullquote blockquote p{
  text-align:center !important;
}
.entry-content .wp-block-quote p{
  text-align:left !important;
}

/* Respect des alignements choisis dans l'éditeur */
.entry-content p.has-text-align-center{text-align:center !important;
}
.entry-content p.has-text-align-right{text-align:right !important;
}
.entry-content p.has-text-align-left{text-align:left !important;
}

/* Titres : évite un mot seul sur la dernière ligne */
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,
.about-story h2,.about-story h3{
  text-wrap:balance;
}
/* Les listes étaient laissées en drapeau, et surtout en text-wrap:pretty.
   Ce réglage demande au navigateur d'éviter qu'une dernière ligne se
   réduise à un mot isolé : pour y parvenir, il raccourcit les lignes
   précédentes et renvoie des mots vers le bas. D'où ces lignes qui
   s'arrêtaient loin de la marge droite.

   Les puces sont du texte de lecture comme les paragraphes : elles
   suivent désormais la même justification, et le navigateur remplit
   chaque ligne jusqu'au bout. */
.entry-content li{text-wrap:auto;
}

/* --- Neutralisation des polices collées -------------------
   Word, Google Docs et les pages web injectent une police en
   style « en ligne » sur le texte collé. Ces déclarations
   l'emportent normalement sur le thème : on les annule.
   Les classes has-*-font-family, posées par l'éditeur quand
   VOUS choisissez une police, sont exclues et restent
   respectées. */
.entry-content [style*="font-family"]:not([class*="has-"]),
.about-story [style*="font-family"]:not([class*="has-"]){
  font-family:var(--font-body) !important;
}
.entry-content h1[style*="font-family"]:not([class*="has-"]),
.entry-content h2[style*="font-family"]:not([class*="has-"]),
.entry-content h3[style*="font-family"]:not([class*="has-"]),
.entry-content h4[style*="font-family"]:not([class*="has-"]){
  font-family:var(--font-heading) !important;
}
/* Couleurs et fonds hérités d'un collage */
.entry-content [style*="background-color"]:not([class*="has-"]):not(.wp-block-group){
  background:transparent !important;
}

/* --- Progression capillaire en tête de page ---------------
   Le composant remplace l'image mise en avant : il est le
   premier élément visuel de la colonne. */
.rhs-prog--lead{margin:0 0 30px;
}
.rhs-prog--lead .rhs-prog-scene{aspect-ratio:auto;
}
.rhs-prog--lead .rhs-prog-scene img{
  position:static;
  height:auto;
  object-fit:contain;
}
/* La seconde image se superpose à la première, qui donne la hauteur */
.rhs-prog--lead .rhs-prog-scene .rhs-prog-top{
  position:absolute;
  inset:0;
  height:100%;
}
.rhs-prog-title--under{
  font-family:var(--font-heading);
  font-size:clamp(18px, 2vw, 20px);
  margin:22px 0 0;
  text-align:center;
}

/* --- Crédit affiché sous une image ------------------------ */
.media-credit{
  margin:10px 0 0;
  font-size:calc(var(--font-size-base) * 0.735);
  font-style:italic;
  line-height:1.6;
  color:var(--color-muted);
  text-align:left;
}

/* =========================================================
   MIGRATION 2.3 — GLOSSAIRE, EN-TÊTES DE PAGE
   ========================================================= */

/* --- Infobulle sur un terme technique ---------------------
   Pointillé doré discret. Survol sur ordinateur, toucher sur
   mobile (la classe is-open est posée par main.js). */
.rhs-term{
  position:relative;
  border-bottom:1px dotted var(--color-accent-dark);
  cursor:help;
  color:inherit;
}
.rhs-term:focus-visible{
  outline:2px solid var(--color-secondary);
  outline-offset:2px;
  border-radius:2px;
}
.rhs-bulle{
  position:absolute;
  left:0;
  bottom:calc(100% + 10px);
  width:270px;
  max-width:min(270px,72vw);
  background:var(--color-primary);
  color:#fffdf8;
  padding:13px 15px;
  border-radius:var(--radius-md);
  font-family:var(--font-body);
  font-size:calc(var(--font-size-base) * 0.794);
  line-height:1.55;
  font-weight:400;
  font-style:normal;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease;
  z-index:60;
  box-shadow:0 16px 38px -20px rgba(32,48,47,.7);
  pointer-events:none;
}
.rhs-bulle b{
  display:block;
  font-weight:500;
  font-size:calc(var(--font-size-base) * 0.706);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:5px;
}
.rhs-bulle::after{
  content:"";
  position:absolute;
  left:22px;
  top:100%;
  border:7px solid transparent;
  border-top-color:var(--color-primary);
}
.rhs-term:hover .rhs-bulle,
.rhs-term:focus .rhs-bulle,
.rhs-term.is-open .rhs-bulle{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Bulle recalée quand le terme est trop près d'un bord */
.rhs-term.bulle-droite .rhs-bulle{left:auto; right:0;
}
.rhs-term.bulle-droite .rhs-bulle::after{left:auto; right:22px;
}

/* Bulle sous le terme quand il n'y a pas la place au-dessus */
.rhs-term.bulle-dessous .rhs-bulle{
  bottom:auto;
  top:calc(100% + 10px);
}
.rhs-term.bulle-dessous .rhs-bulle::after{
  top:auto;
  bottom:100%;
  border-top-color:transparent;
  border-bottom-color:var(--color-primary);
}

@media (max-width:640px){
  .rhs-bulle{
    width:min(300px,86vw);
    max-width:86vw;
    font-size:calc(var(--font-size-base) * 0.765);
  }
}

/* --- Surtitre doré des pages ------------------------------ */
.page-header-simple .eyebrow{
  display:block;
  margin-bottom:14px;
}
.page-header-simple .eyebrow + h1{margin-top:0;
}

/* --- Hiérarchie des titres de contenu ---------------------
   Le Titre 2 devient le niveau naturel des sections. */
.entry-content h2,
.about-story h2{
  font-family:var(--font-heading);
  font-size:clamp(18px,2vw,20px);
  font-weight:500;
  line-height:1.2;
  margin:38px 0 16px;
}
.entry-content h3,
.about-story h3{
  font-family:var(--font-heading);
  font-size:clamp(17px, 1.6vw, 18px);
  font-weight:500;
  line-height:1.25;
  margin:30px 0 12px;
  color:var(--color-primary);
}
.entry-content h4{
  font-family:var(--font-body);
  font-size:calc(var(--font-size-base) * 1.0);
  font-weight:500;
  margin:26px 0 10px;
  color:var(--color-primary);
}
.entry-content > *:first-child{margin-top:0;
}


/* =========================================================
   MIGRATION 2.4 — FIL D'ARIANE ET SOUS-MENU
   ========================================================= */

/* --- Fil d'Ariane ---------------------------------------- */
.rhs-fil{margin:0 0 22px;}
.rhs-fil ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:calc(var(--font-size-base) * 0.765);
  color:var(--color-muted);
}
.rhs-fil li{display:flex; align-items:center; gap:8px; min-width:0;}
.rhs-fil li + li::before{
  content:"›";
  color:var(--color-accent-dark);
  font-size:calc(var(--font-size-base) * 0.882);
  line-height:1;
}
.rhs-fil a{
  color:var(--color-muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.rhs-fil a:hover{
  color:var(--color-primary);
  border-bottom-color:var(--color-secondary);
}
.rhs-fil span[aria-current]{color:var(--color-ink);}

/* Sur petit écran, le libellé courant est tronqué plutôt que de
   faire passer le fil sur trois lignes. */
@media (max-width:640px){
  .rhs-fil{margin-bottom:14px;}
  .rhs-fil ol{flex-wrap:nowrap; font-size:calc(var(--font-size-base) * 0.735);}
  .rhs-fil li:last-child{overflow:hidden;}
  .rhs-fil li:last-child span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* --- Sous-menu des expertises ----------------------------
   Aligné sur le bord gauche de l'élément parent, largeur
   ajustée au contenu, icône de chaque expertise à gauche. */
.site-header .nav-links > li{position:relative;}

.site-header .nav-links .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  margin:0;
  padding:7px 0;
  min-width:186px;
  width:max-content;
  max-width:280px;
  list-style:none;
  background:#fffdf8;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:0 18px 40px -22px rgba(32,48,47,.4);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  z-index:70;
}
.site-header .nav-links > li:hover > .sub-menu,
.site-header .nav-links > li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.site-header .nav-links .sub-menu > li{border:0;}
.site-header .nav-links .sub-menu > li > a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 18px;
  font-size:calc(var(--font-size-base) * 0.853);
  color:var(--color-muted);
  white-space:nowrap;
  border-left:2px solid transparent;
  transition:color .18s ease, background .18s ease;
}
.site-header .nav-links .sub-menu > li > a:hover{
  color:var(--color-ink);
  background:rgba(218,174,127,.14);
}
.site-header .nav-links .sub-menu .sous-icone{
  display:flex;
  align-items:center;
  color:var(--color-accent-dark);
  flex-shrink:0;
}
.site-header .nav-links .sub-menu .sous-icone svg{width:17px; height:17px;}

/* Page courante : filet doré et texte plus soutenu */
.site-header .nav-links .sub-menu > li.current-menu-item > a{
  color:var(--color-ink);
  border-left-color:var(--color-secondary);
}

/* Chevron indiquant qu'un sous-menu existe */
.site-header .nav-links > li.menu-item-has-children > a::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  opacity:.6;
}

/* Sous le point de bascule, le sous-menu devient une liste
   dépliée dans le menu replié : pas de survol au doigt. */
@media (max-width:1150px){
  .site-header .nav-links .sub-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:rgba(44,80,87,.04);
    min-width:0;
    width:auto;
    max-width:none;
    padding:2px 0;
  }
  .site-header .nav-links .sub-menu > li > a{
    padding:12px 22px 12px 40px;
    font-size:calc(var(--font-size-base) * 0.882);
    white-space:normal;
  }
  .site-header .nav-links > li.menu-item-has-children > a::after{display:none;}
}


/* =========================================================
   MIGRATION 2.5 — MENU, JUSTIFICATION, LISTE D'ARTICLES
   ========================================================= */

/* --- Sous-menu : une seule règle d'affichage --------------
   Deux règles concurrentes coexistaient : l'une masquait par
   display:none, l'autre par opacity. Le panneau était donc
   partiellement rendu, ce qui laissait apparaître un petit
   trait sous « Nos expertises ». On repasse à un affichage
   franc, sans rendu résiduel possible. */
.site-header .nav-links .sub-menu{
  display:none;
  opacity:1;
  visibility:visible;
  transform:none;
  margin:0;
}
.site-header .nav-links > li:hover > .sub-menu,
.site-header .nav-links > li:focus-within > .sub-menu,
.site-header .nav-links > li.sous-ouvert > .sub-menu{
  display:block;
}

/* Aucun soulignement sur les entrées de premier niveau : un
   indicateur ne doit jamais déplacer le texte qu'il souligne. */
.site-header .nav-links > li > a{
  border-bottom:0;
  text-decoration:none;
}

/* Page courante : filet posé en absolu, hors du flux */
.site-header .nav-links > li.current-menu-item > a::before,
.site-header .nav-links > li.current-menu-ancestor > a::before{
  content:"";
  position:absolute;
  left:0;
  right:14px;
  bottom:-3px;
  height:1.5px;
  background:var(--color-secondary);
  border-radius:2px;
}
.site-header .nav-links > li.current-menu-item:not(.menu-item-has-children) > a::before{right:0;}

/* --- Bouton de dépliage du sous-menu ---------------------
   CAUSE DU PETIT TRAIT GRIS SOUS « NOS EXPERTISES ».
   assets/main.js injecte un bouton .submenu-toggle dans chaque
   entrée possédant un sous-menu, quelle que soit la taille de
   l'écran. Or ses styles n'étaient déclarés QUE dans la requête
   média mobile : sur ordinateur, le bouton s'affichait donc avec
   l'apparence par défaut du navigateur, un petit rectangle gris.
   On le masque explicitement hors du format mobile. */
.submenu-toggle{display:none;}

/* --- Justification avec mots courts protégés --------------
   Les mots de deux lettres sont liés au mot suivant par une
   espace insécable, posée à l'affichage par inc/typographie.php :
   ils ne restent jamais seuls en fin de ligne. */
/* Les textes de la page À propos vivent hors de .entry-content et de
   .about-story : chacun a sa propre classe, et tous avaient échappé à
   la justification appliquée partout ailleurs. */
.entry-content p,
.entry-content li,
.about-story p,
.about-intro-lead p,
.section-head-intro p,
.cabinet-text p,
.single-article .entry-content p,
.single-article .entry-content li{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
  -webkit-hyphens:none;
}
/* Les blocs centrés ou cités gardent leur alignement */
.entry-content .wp-block-pullquote p,
.entry-content .wp-block-pullquote blockquote p{text-align:center !important;}
.entry-content .wp-block-quote p{text-align:left !important;}
.entry-content p.has-text-align-center{text-align:center !important;}
.entry-content p.has-text-align-right{text-align:right !important;}
.entry-content p.has-text-align-left{text-align:left !important;}

/* Sur petit écran la justification abîme la lecture :
   la colonne est trop étroite pour répartir les blancs. */
@media (max-width:640px){
  .entry-content p,
  .entry-content li,
  .about-story p,
  .about-intro-lead p,
  .section-head-intro p,
  .cabinet-text p,
  .value-body p,
  .single-article .entry-content p,
  .single-article .entry-content li{text-align:left;}
}

/* --- Liste d'articles, mise en page sobre ---------------- */
.blog-liste{
  max-width:760px;
  margin:0 auto;
  list-style:none;
  padding:0;
}
.blog-liste li{border-bottom:1px solid var(--line);}
.blog-liste li:last-child{border-bottom:0;}
.blog-liste a{
  display:block;
  padding:26px 0;
  text-decoration:none;
  transition:opacity .18s ease;
}
.blog-liste a:hover{opacity:.72;}
.blog-liste .article-date{
  display:block;
  font-size:max(12px, calc(var(--font-size-base) * 0.676));
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--color-accent-dark);
  margin-bottom:7px;
}
.blog-liste h2{
  font-family:var(--font-heading);
  font-size:clamp(18px,2vw,20px);
  font-weight:500;
  line-height:1.25;
  color:var(--color-primary);
  margin:0 0 7px;
  text-wrap:pretty;
}
.blog-liste p{
  font-size:calc(var(--font-size-base) * 0.882);
  line-height:1.7;
  color:var(--color-ink);
  margin:0;
  text-align:left;
  text-wrap:pretty;
}
@media (max-width:640px){
  .blog-liste a{padding:20px 0;}
}


/* =========================================================
   MIGRATION 2.6 — ESPACEMENTS DE L'EN-TÊTE DE PAGE
   ========================================================= */

/* L'espace au-dessus du fil était calibré pour un en-tête à
   deux niveaux. Le fil en ajoutant un troisième, l'ensemble
   descendait trop bas dans l'écran. On resserre au-dessus et
   on aère en dessous, pour que le fil se lise comme un outil
   de navigation et non comme le début du titre. */
.page-header-simple{padding-top:26px;}

.rhs-fil{
  margin:0 0 22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.about-hero .rhs-fil{margin-bottom:26px;}

.page-header-simple .eyebrow{margin-bottom:10px;}

@media (max-width:640px){
  .page-header-simple{padding-top:18px;}
  .rhs-fil{
    margin-bottom:16px;
    padding-bottom:12px;
  }
}


/* =========================================================
   MIGRATION 2.7 — LARGEUR DE LECTURE, EN-TÊTE D'ARTICLE, TABLEAUX
   ========================================================= */

/* --- Largeur de lecture : correction d'une régression -----
   Le nettoyage de la 2.4 a retiré deux déclarations de
   max-width en les jugeant redondantes avec une troisième.
   Or elles ne visaient pas les mêmes éléments : les articles
   et la page À propos s'étalaient depuis sur toute la
   largeur, soit environ 130 caractères par ligne. */
.single-article{max-width:760px; margin:0 auto;}
.about-story{max-width:760px;}
.entry-content,
.single-article .entry-content{max-width:760px;}

/* Un tableau a besoin de plus de place que du texte courant */
.entry-content .wp-block-table,
.entry-content > table{max-width:none;}

/* --- En-tête d'article -----------------------------------
   La date servant de surtitre était collée au titre. */
.single-article .eyebrow{
  display:block;
  margin-bottom:14px;
}
.single-article .eyebrow + h1{margin-top:0;}

/* --- Tableaux de contenu ---------------------------------
   En-tête en vert profond, intitulés de lignes en gras,
   première colonne assez large pour ne pas couper les
   libellés courts. */
.entry-content table{
  border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.entry-content table th{
  background:var(--color-primary);
  color:#fffdf8;
  font-family:var(--font-body);
  font-weight:500;
  font-size:calc(var(--font-size-base) * 0.824);
  letter-spacing:.02em;
  text-align:center;
  padding:13px 14px;
  border-color:rgba(255,253,248,.18);
}
.entry-content table td{
  padding:12px 14px;
  border:1px solid var(--line);
  vertical-align:top;
}
/* Colonne des intitulés : mise en évidence et largeur minimale */
.entry-content table tbody td:first-child{
  font-weight:500;
  color:var(--color-primary);
  background:var(--ivory);
  min-width:150px;
  white-space:nowrap;
}
.entry-content table tbody tr:last-child td{border-bottom:0;}

@media (max-width:760px){
  /* Le tableau redevient défilable horizontalement plutôt que
     de comprimer les colonnes jusqu'à l'illisible. */
  .entry-content table{display:block; overflow-x:auto;}
  .entry-content table th,
  .entry-content table td{font-size:calc(var(--font-size-base) * 0.794); padding:10px 12px;}
  .entry-content table tbody td:first-child{min-width:120px;}
}


/* =========================================================
   MIGRATION 2.8 — LARGEUR ET ALIGNEMENT DE LA LECTURE
   ========================================================= */

/* Trois comportements coexistaient : texte aligné à gauche sur
   les pages, liste d'articles centrée, article entièrement
   centré. D'où une impression de flottement d'une page à
   l'autre. Tout est désormais aligné à gauche, sous le titre.

   Largeur portée de 760 à 820 px : environ 85 caractères par
   ligne, contre 78. On gagne de l'espace sans franchir le
   seuil de 90 au-delà duquel la lecture se dégrade. */

.single-article,
.about-story,
.entry-content,
.single-article .entry-content,
.blog-liste{
  max-width:820px;
  margin-left:0;
  margin-right:0;
}

/* Les tableaux gardent toute la largeur disponible :
   ils en ont besoin, contrairement au texte courant. */
.entry-content .wp-block-table,
.entry-content > table{max-width:none;}

/* --- Tableaux : répartition des colonnes -----------------
   La première colonne, celle des intitulés, était trop large
   et volait de la place aux colonnes de contenu. Répartition
   fixe pour que les colonnes restantes soient strictement
   égales, quel que soit leur nombre. */
.entry-content table{table-layout:fixed;}
.entry-content table th:first-child,
.entry-content table tbody td:first-child{
  width:120px;
  min-width:120px;
}
.entry-content table th:not(:first-child),
.entry-content table td:not(:first-child){width:auto;}

@media (max-width:760px){
  .entry-content table{table-layout:auto;}
  .entry-content table th:first-child,
  .entry-content table tbody td:first-child{
    width:auto;
    min-width:112px;
  }
}


/* =========================================================
   MIGRATION 2.9 — TYPOGRAPHIE UNIFIÉE
   ---------------------------------------------------------
   Trois problèmes distincts se cumulaient et donnaient
   l'impression d'un site « à l'écriture trop petite » et
   incohérent d'une page à l'autre.

   1. La variable --color-ink n'était définie NULLE PART côté
      site. Elle n'existait que pour l'éditeur de blocs. Or
      une trentaine de règles écrivaient color:var(--color-ink).
      Une variable inconnue rend la déclaration invalide : le
      texte retombait sur la couleur héritée, donc du noir pur.
      Résultat : les paragraphes des pages de contenu étaient
      noirs, ceux des encadrés gris clair. D'où la différence
      de couleur d'une page à l'autre.

   2. Les tailles étaient figées en pixels dans chaque bloc,
      systématiquement SOUS la taille de base. Le curseur de
      Personnaliser › Typographie ne pilotait donc presque rien.

   3. Le gris des paragraphes était trop clair sur fond ivoire.

   On définit ici une échelle unique, calculée à partir de la
   taille de base. Modifier le curseur fait désormais bouger
   l'ensemble du site de façon proportionnée.
   ========================================================= */

:root{
  --color-ink:#4c5a58;
  --color-muted:#4c5a58;
  --color-soft:#6a7674;

  --fs-body:var(--font-size-base);
  --fs-lead:calc(var(--font-size-base) * 1.06);
  --fs-ui:calc(var(--font-size-base) * 0.88);
  --fs-note:calc(var(--font-size-base) * 0.82);
  --fs-mini:calc(var(--font-size-base) * 0.74);
}

/* --- Corps de texte : une seule taille partout -------------
   Page de contenu, article, page expertise et page À propos
   utilisaient trois valeurs différentes. */
.entry-content,
.single-article .entry-content,
.service-main .entry-content,
.about-story,
.page-header-simple p{
  font-size:var(--fs-body);
  line-height:1.8;
  color:var(--color-ink);
}
.entry-content p,
.single-article .entry-content p,
.about-story p{
  color:var(--color-ink);
}

/* --- Encadrés, listes et cartes ---------------------------
   Un cran en dessous du corps de texte, mais proportionnel. */
.benefits-box li,
.faq-answer,
.contact-list,
.certif-list li,
.testi-card .txt,
.exp-card p,
.exp-body p,
.method-intro p,
.form-feedback{
  font-size:var(--fs-ui);
}
/* « Le déroulé » était le seul titre d'encadré absent de cette liste :
   il restait à 0,941 × base quand tous les autres passaient à --fs-ui.
   Un point d'écart, visible dès que deux encadrés se suivent. */
.benefits-box h4,
.booking-box h4,
.contact-box h4,
.process-box h4,
.faq-list summary,
.step h4,
.trust-item h4{
  font-size:var(--fs-ui);
}
.booking-box p,
.step p,
.trust-item p,
.form-consent label,
.article-body h3{
  font-size:var(--fs-note);
}
.form-row label,
.form-row input,
.form-row textarea,
.form-row select,
.back-link,
.pagination a,
.pagination span{
  font-size:var(--fs-note);
}
.hero .lead{font-size:var(--fs-lead);
}
.exp-card h3{font-size:calc(var(--font-size-base) * 1.06);
}

/* --- Mentions discrètes -----------------------------------
   Dates, légendes et crédits gardent un gris plus léger :
   ce sont des informations secondaires, pas du texte à lire. */
.testi-date,
.rhs-prog figcaption,
.service-image-credit{
  color:var(--color-soft);
  font-size:var(--fs-mini);
}

/* --- Surtitre doré ----------------------------------------
   Il collait au grand titre. On l'aère, sur tous les gabarits. */
.page-header-simple .eyebrow,
.about-hero .eyebrow,
.single-article .eyebrow{
  display:block;
  margin-bottom:20px;
}
@media (max-width:640px){
  .page-header-simple .eyebrow,
  .about-hero .eyebrow,
  .single-article .eyebrow{margin-bottom:16px;}
}

/* --- Page À propos ----------------------------------------
   L'en-tête rejoint le gabarit commun : fil d'Ariane, surtitre
   et titre alignés à gauche comme partout ailleurs. La photo
   et le texte d'introduction forment le bloc du dessous.

   Si aucune photo n'est déposée, la colonne de gauche ne reste
   plus vide : le texte occupe toute la largeur. */
.about-hero-grid.no-photo{grid-template-columns:1fr;
}
.about-hero-grid.no-photo .about-photo{display:none;
}
.about-hero{padding-top:0;
}
.about-intro-lead{font-size:var(--fs-lead); line-height:1.75; color:var(--color-ink);
}

/* --- Lien d'avis Google du pied de page -------------------- */
.footer-review{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:14px; font-size:var(--fs-mini);
  color:var(--color-primary); font-weight:600;
  letter-spacing:.02em;
}
.footer-review:hover{color:var(--color-accent-dark);
}
.footer-review svg{flex:none;
}

/* --- Bloc de localisation cliquable ------------------------
   Le lien reprend exactement l'apparence du texte statique :
   rien ne change à l'œil tant qu'on ne survole pas. */
a.footer-info-link{
  display:flex; align-items:center; gap:11px; min-width:0;
  color:inherit; text-decoration:none;
}
.footer-info.is-link:hover .footer-info-text strong{
  color:var(--color-accent-dark);
}
.footer-info.is-link .footer-info-text strong{
  transition:color .2s ease;
}


/* =========================================================
   MIGRATION 2.10 — AGRANDISSEMENT GÉNÉRAL
   ---------------------------------------------------------
   La 2.9 avait rendu relatives les tailles des principaux
   blocs, mais une centaine de déclarations restaient figées
   en pixels : menu, boutons, pied de page, cartes, tableaux,
   formulaires, encadrés. L'agrandissement passait donc
   inaperçu, puisque la majorité du texte n'était pas concernée.

   Toutes les tailles inférieures à 20 px sont désormais
   calculées à partir de --font-size-base, en conservant
   exactement les proportions d'origine : le rapport entre
   un texte courant et une légende est inchangé, c'est
   l'ensemble qui grandit ou rétrécit d'un bloc.

   Les grands titres (20 px et plus) gardent leurs valeurs :
   ils étaient déjà à la bonne échelle et suivent leur propre
   logique d'adaptation à la largeur de l'écran.

   Conséquence pratique : le curseur de Personnaliser ›
   Typographie › Taille de texte de base pilote maintenant
   réellement la totalité du site.
   ========================================================= */

/* Le menu principal suit la même échelle que le reste.
   Sa taille était réécrite en dur par le code du Customizer. */
.site-header .nav-links > li > a{
  font-size:calc(var(--font-size-base) * 0.88);
}


/* =========================================================
   MIGRATION 2.11 — COLONNE COLLANTE, ÉCHELLE, RESPIRATION
   ========================================================= */

/* --- Pourquoi la colonne latérale ne collait pas ----------
   Ce n'était pas la hauteur des encadrés, contrairement à ce
   que je supposais. La règle de garantie responsive posait
   overflow-x:hidden sur html et body. Or un élément en
   overflow masqué devient le conteneur de défilement de ses
   descendants. Un position:sticky cherche alors à se caler
   sur un conteneur qui, lui, ne défile pas : il ne se
   déclenche jamais.

   overflow-x:clip produit le même effet visuel — aucun
   défilement horizontal possible — sans créer de conteneur
   de défilement. Le collant redevient opérant.

   La règle d'origine est conservée pour les navigateurs qui
   ne connaissent pas encore clip : ils retrouvent simplement
   le comportement actuel, sans régression. */
@supports (overflow-x:clip){
  html, body{overflow-x:clip;}
}

/* Le garde-fou sur les écrans peu hauts était calé à 760 px,
   ce qui désactivait l'effet sur la plupart des portables une
   fois la barre du navigateur déduite. */
@media (max-height:760px){
  .single-rhs_service .service-aside{position:sticky;}
}
@media (max-height:620px){
  .single-rhs_service .service-aside{position:static;}
}

/* --- Sous-titre d'une expertise ---------------------------
   Sa taille était écrite en dur dans le gabarit, en style en
   ligne. Un style en ligne l'emporte sur toute feuille de
   style : ce sous-titre est donc resté à 17 px pendant que
   le reste du site passait à 20. Il suit maintenant l'échelle
   générale, avec une taille d'accroche. */
.service-subtitle{
  max-width:620px;
  margin-top:16px;
  font-size:var(--fs-lead);
  line-height:1.7;
  color:var(--color-ink);
}

/* --- Page de contact : mêmes tailles en dur retirées ------ */
.contact-form-title{margin-bottom:24px;
}
.contact-hours{
  white-space:pre-line;
  font-size:var(--fs-note);
}

/* --- Crédit sous une image --------------------------------
   Il n'avait aucune marge basse et se retrouvait collé au
   titre suivant, dont la marge haute est neutralisée. */
.media-credit{margin:12px 0 34px;
}


/* =========================================================
   MIGRATION 2.12 — MARGES D'IMAGE, LISERÉ, LISIBILITÉ
   ========================================================= */

/* --- Image mise en avant d'une expertise ------------------
   La seule règle de marge sous une image était écrite pour
   « .single-article .single-thumb », c'est-à-dire les articles
   de blog. Sur une page expertise, le conteneur parent est
   « .service-main » : la règle ne s'appliquait donc jamais, et
   l'image touchait directement le titre suivant — d'autant
   que la marge haute du premier titre du contenu est
   volontairement neutralisée.

   On ne reprend QUE la marge et l'arrondi. Le cadrage forcé
   en 16/9 des articles reste écarté : les montages avant /
   après sont en format libre et doivent garder leurs
   proportions réelles. */
.service-main .single-thumb{
  margin-bottom:36px;
  border-radius:var(--radius);
  overflow:hidden;
}
.service-main .single-thumb img{
  width:100%; height:auto; display:block;
}
/* Quand un crédit suit l'image, c'est lui qui porte la marge :
   sans cela les deux s'additionnent et l'écart double. */
.service-main .single-thumb:has(+ .media-credit){
  margin-bottom:0;
}

/* --- Liseré doré de la photo À propos ---------------------
   Le liseré était décalé de 12 px vers le bas et la droite,
   pour un effet de cadre en léger décalage. Mais son conteneur
   rogne tout ce qui dépasse : le cadre se retrouvait coupé sur
   deux côtés et enfermé dans la photo, donnant l'impression
   d'un encadrement mal centré.

   On le pose désormais à l'intérieur, à distance égale des
   quatre bords. */
.about-photo::after{
  inset:12px;
  border-width:1.5px;
  border-radius:calc(var(--radius) - 8px);
  transform:none;
}

/* --- Sous-titre de la page À propos -----------------------
   Il utilisait le doré clair, soit un contraste de 1,8 pour 1
   sur fond ivoire — très en dessous du minimum lisible de 4,5.
   Le doré du surtitre n'aurait donné que 2,6. Le vert profond
   de la charte monte à 7,8 : la ligne reste distincte du texte
   courant par sa graisse, mais devient lisible d'un coup d'œil. */
.about-role{
  color:var(--color-primary);
}


/* =========================================================
   MIGRATION 2.13 — ESPACEMENT, ICÔNES, ENCADRÉ DE CONTACT
   ========================================================= */

/* --- Page À propos : écart sous la photo ------------------
   En remontant l'en-tête au gabarit commun (2.9), la marge
   haute du bloc photo avait été neutralisée, mais sa marge
   basse de 60 px est restée. Elle s'ajoutait aux 100 px que
   le thème pose entre deux sections : environ 160 px de vide
   avant « Pourquoi j'ai choisi ce métier », contre 100 partout
   ailleurs. On laisse l'espacement normal faire son travail. */
.about-hero{padding-bottom:0;
}

/* --- Icônes de réseaux sociaux ----------------------------
   Aucune taille de référence n'existait : seul le pied de page
   en définissait une. Ailleurs — encadré Coordonnées de la page
   Contact — les icônes n'avaient que la taille de leur dessin,
   16 px, sans pastille. D'où deux traitements très différents
   d'un endroit à l'autre du site.

   40 px correspond au minimum confortable pour une cible que
   l'on vise au doigt ; la règle tactile à 44 px reste active
   sur les appareils sans souris. */
.social-icons{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.social-icons a{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1.3px solid rgba(44,80,87,.22);
  color:var(--color-primary);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.social-icons a:hover{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--ivory);
}
.social-icons a svg{width:18px; height:18px;
}
.footer-social .social-icons a{width:40px; height:40px;
}

/* --- Encadré « Prendre rendez-vous » de la page Contact ----
   Le gabarit lui donne deux classes : contact-box et
   booking-box. La règle de fond vert vise booking-box, mais
   contact-box, définie plus loin dans la feuille, imposait le
   fond ivoire et l'emportait. Le titre et l'accroche, écrits
   en blanc, devenaient donc invisibles sur fond blanc — ce qui
   donnait l'impression d'un encadré vide surmontant le bouton.

   On tranche explicitement le conflit. */
.contact-box.booking-box{
  background:var(--color-primary);
  border-color:var(--color-primary);
}
.contact-box.booking-box h4{color:var(--ivory);
}
.contact-box.booking-box p{color:rgba(255,253,248,.72);
}


/* =========================================================
   MIGRATION 2.14 — ALIGNEMENT, ÉCHELLE DES TARIFS
   ========================================================= */

/* --- Progression capillaire en tête de colonne ------------
   Le composant est écrit avec une balise <section>. Or le thème
   pose 100 px de remplissage haut et bas sur TOUTE section, pour
   rythmer les grandes bandes de la page d'accueil. Imbriquée
   dans une colonne, cette règle décalait l'image de 100 px vers
   le bas, pendant que la colonne d'encadrés démarrait en haut.

   La règle « .rhs-prog--lead » posait bien une marge nulle, mais
   une marge ne neutralise pas un remplissage : les deux
   coexistaient. D'où un composant qui paraissait mal aligné sur
   la seule page où il est actif. */
section.rhs-prog{padding:0;
}

/* --- Échelle de la page Tarifs ----------------------------
   Cette page avait été dessinée avec ses propres tailles,
   systématiquement plus basses que le reste du site : le nom
   d'une cure s'affichait un cran sous le texte courant, la zone
   et la description deux crans, le nombre de séances trois.

   La conversion en unités relatives (2.10) a fidèlement
   conservé ces rapports — c'était son principe — mais ils
   étaient trop serrés au départ. Or un tarif se lit vite,
   souvent sur téléphone, et c'est la page où l'on compare des
   chiffres. On la ramène à l'échelle commune.

   Les montants eux-mêmes ne bougent pas : ils sont déjà traités
   comme des titres et s'adaptent à la largeur de l'écran. */
.price-cure-head h4{font-size:var(--fs-body);
}
.price-zone{font-size:var(--fs-ui);
}
.price-desc{font-size:var(--fs-ui);
}
.price-sessions{font-size:var(--fs-mini);
}
.btn-price{font-size:var(--fs-note);
}


/* =========================================================
   MIGRATION 2.15 — CADRAGE, TAILLES D'IMAGE, RYTHME
   ========================================================= */

/* --- Bandeau d'accueil : cadrage réglable -----------------
   Le calage vertical vient désormais du champ « Cadrage
   vertical de l'image de fond », sur la page d'accueil. La
   règle ci-dessous ne sert plus que de repli si aucun choix
   n'a encore été enregistré. */
.hero-bg{background-position:right center;
}

/* --- Taille des images sur les pages d'expertise ----------
   On limite la HAUTEUR et non la largeur. Les trois images
   n'ont pas les mêmes proportions : portrait pour les cheveux
   et les sourcils, montage large pour la barbe. À largeur
   égale, leurs hauteurs iraient du simple au double.

   L'image reste centrée dans la colonne et conserve ses
   proportions : ni déformation, ni recadrage. */
.service-main .single-thumb.is-sm img{max-height:320px;
}
.service-main .single-thumb.is-md img{max-height:440px;
}
.service-main .single-thumb.is-lg img{max-height:600px;
}
.service-main .single-thumb.is-sm,
.service-main .single-thumb.is-md,
.service-main .single-thumb.is-lg{
  display:flex; justify-content:center;
}
.service-main .single-thumb.is-sm img,
.service-main .single-thumb.is-md img,
.service-main .single-thumb.is-lg img{
  width:auto; max-width:100%; height:auto; object-fit:contain;
}

/* --- Bande de points forts de la page d'accueil -----------
   Les trois colonnes étaient de largeur égale, mais leur
   contenu calé à gauche. Comme les trois textes n'ont pas la
   même longueur, chaque groupe occupait une portion différente
   de sa colonne et l'ensemble semblait glisser vers la gauche.

   On centre chaque groupe dans sa colonne ; le texte, lui,
   reste aligné à gauche sous son titre, où il se lit mieux. */
.trust-item{justify-content:center;
}
.trust-item-text{text-align:left;
}
@media (max-width:900px){
  .trust-item{justify-content:flex-start;}
}

/* --- Rythme vertical de la page À propos ------------------
   Les sections portaient « padding-top:0 » en style en ligne.
   Ce réglage supprime bien le remplissage haut d'une section,
   mais laisse intact celui du bas de la section précédente :
   les deux ne se compensent pas. S'y ajoutait la marge du
   dernier élément du bloc précédent, d'où 130 à 160 px de vide
   avant chaque surtitre doré, contre 100 ailleurs sur le site.

   Un style en ligne étant impossible à corriger depuis une
   feuille de style, ils ont été retirés du gabarit et remplacés
   par cette classe, qui pose un rythme unique. */
.about-flow{padding-top:0; padding-bottom:72px;
}
.about-flow--end{padding-bottom:100px;
}
@media (max-width:900px){
  .about-flow{padding-bottom:52px;}
}


/* =========================================================
   MIGRATION 2.16 — RYTHME DE LA PAGE À PROPOS
   ========================================================= */

/* --- Espace sous la photo ---------------------------------
   Régression de ma part en 2.15 : la 2.13 avait mis à zéro le
   remplissage bas du bloc photo, la 2.15 a mis à zéro celui du
   haut de toutes les sections suivantes. Les deux se cumulant,
   il ne restait plus rien entre la photo et le premier titre.

   La correction de 2.16 visait « .about-flow:first-of-type ».
   Or :first-of-type désigne le premier élément de son TYPE DE
   BALISE parmi ses frères, non le premier portant la classe.
   Le premier <section> de la page étant le bloc photo lui-même,
   aucun .about-flow ne pouvait correspondre : la règle ne
   s'appliquait à rien.

   On vise donc la section qui suit le bloc photo, ce qui reste
   juste quelle que soit celle qui arrive après. */
.about-hero + .about-flow{padding-top:52px;
}
@media (max-width:900px){
  .about-hero + .about-flow{padding-top:44px;}
}

/* --- Espace entre les sections ----------------------------
   72 px restaient trop généreux : la marge basse du dernier
   paragraphe s'y ajoute. On resserre, et on neutralise cette
   marge résiduelle pour que l'écart soit celui qu'on croit
   régler. */
.about-flow{padding-bottom:52px;
}
.about-flow .about-story > *:last-child,
.about-flow .wrap > *:last-child{margin-bottom:0;
}
/* Le pied de page contient lui aussi une balise <section> : le
   sélecteur :last-of-type visait donc la bande d'appel du pied
   de page, jamais la dernière section de la page. On nomme
   explicitement la section concernée. */
.about-flow--end{padding-bottom:90px;
}
@media (max-width:900px){
  .about-flow{padding-bottom:40px;}
}

/* --- Intitulé de section « Formations » -------------------
   Cette section était centrée alors que toutes les autres de
   la page sont alignées à gauche. Le style en ligne de son
   paragraphe d'introduction est également passé en classe. */
.section-head-intro{margin-top:14px;
}


/* =========================================================
   MIGRATION 2.18 — MENU, FRISE, EN-TÊTES DE PAGE
   ========================================================= */

/* --- Entrée « Accueil » masquée sur ordinateur ------------
   Le logo ramène à l'accueil, et le fil d'Ariane l'affiche en
   tête de chaque page intérieure : le chemin de retour existe
   déjà deux fois. L'entrée est en revanche conservée dans le
   menu déroulant mobile, où le logo est plus petit, donc plus
   difficile à viser au doigt, et où une entrée de plus ne coûte
   aucune place.

   WordPress ajoute de lui-même la classe menu-item-home à
   l'entrée pointant vers la page d'accueil : rien à faire dans
   Apparence › Menus, l'entrée doit simplement y rester. */
@media (min-width:981px){
  .nav-links > li.menu-item-home{display:none;}
}

/* --- Haut de page resserré --------------------------------
   Le fil d'Ariane, le surtitre, le titre et le sous-titre
   occupaient chacun leur espace propre, sans que l'ensemble
   soit pensé comme un bloc. On resserre l'enchaînement sans
   toucher à la taille du titre, qui donne sa respiration au
   haut de page. */
.page-header-simple{padding-top:20px;
}
.page-header-simple .rhs-fil{margin-bottom:14px;
}
.page-header-simple .eyebrow{margin-bottom:14px;
}
.page-header-simple h1{margin-bottom:0;
}
.page-header-simple p,
.service-subtitle{margin-top:10px;
}
@media (max-width:640px){
  .page-header-simple{padding-top:14px;}
  .page-header-simple .eyebrow{margin-bottom:10px;}
}

/* --- Frise d'étapes ---------------------------------------
   Contenu séquentiel : quatre temps se saisissent mieux d'un
   coup d'œil qu'en lecture suivie. Les blocs s'adaptent au
   nombre d'étapes saisies, sans jamais descendre sous une
   largeur lisible. */
.rhs-steps-block{margin:52px 0 8px;
}
.rhs-steps-title{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(18px,2vw,20px); color:var(--color-heading);
  margin:0 0 28px;
}
.rhs-steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px; list-style:none; margin:0; padding:0; counter-reset:none;
}
.rhs-step{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 18px 20px;
  position:relative;
}
.rhs-step-num{
  width:38px; height:38px; border-radius:50%;
  background:var(--color-bg);
  border:1.5px solid var(--color-secondary);
  color:var(--color-accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:600;
  font-size:calc(var(--font-size-base) * 0.85);
  margin:0 0 14px;
}
.rhs-step-body h3,
.entry-content .rhs-step-body h3{
  font-family:var(--font-heading); font-weight:600;
  font-size:calc(var(--font-size-base) * 0.97);
  color:var(--color-primary); margin:0 0 8px; line-height:1.3;
}
.rhs-step-body p{
  font-size:var(--fs-ui); line-height:1.6;
  color:var(--color-ink); margin:0 0 10px;
}
/* Même motif que les cartes de zones : les colonnes de la frise sont
   trop étroites pour un texte justifié. */
.rhs-step-texte p,
.entry-content .rhs-step-texte p{
  text-align:left;
  font-size:var(--fs-ui); line-height:1.6;
  color:var(--color-ink); margin:0 0 10px;
}
.entry-content .rhs-step-texte p:first-child{margin-top:0;
}
.rhs-step-texte p:last-child{margin-bottom:0;
}
.rhs-step-body strong{font-weight:600; color:var(--color-primary);
}

/* Trait de liaison entre les étapes, uniquement quand elles
   sont réellement côte à côte. */
@media (min-width:900px){
  .rhs-step:not(:last-child)::after{
    content:""; position:absolute; top:41px; right:-18px;
    width:18px; height:1px; background:var(--color-secondary); opacity:.55;
  }
}

/* Sur téléphone, le numéro passe à gauche du texte : la frise
   reste lisible sans occuper toute la hauteur de l'écran. */
@media (max-width:560px){
  .rhs-steps{grid-template-columns:1fr; gap:12px;}
  .rhs-step{display:flex; gap:14px; align-items:flex-start; padding:16px;}
  .rhs-step-num{flex:none; margin:0;}
}


/* =========================================================
   MIGRATION 2.19 — IMAGES, FAQ, POINTS FORTS
   ========================================================= */

/* --- Bande de points forts : centrage vertical ------------
   Le remplissage de la bande était bien symétrique, mais le
   bloc de texte portait un décalage vers le bas de 6 px. Il
   avait été ajouté pour aligner la première ligne du titre sur
   le centre de l'icône, à l'époque où les textes tenaient sur
   une seule ligne. Depuis qu'ils en font deux, ce décalage
   n'aligne plus rien : il déséquilibre l'ensemble. */
.trust-item-text{padding-top:0;
}

/* --- Images des pages d'expertise -------------------------
   Trois corrections liées.

   La hauteur est pilotée en pixels depuis l'administration,
   et non plus par trois paliers : l'écart entre « compacte » et
   « moyenne » était trop grossier pour trouver le bon rendu.

   L'image est alignée à gauche sur le texte. Centrée, elle
   laissait deux marges vides de part et d'autre dès qu'on la
   réduisait, et semblait flotter au milieu de la colonne.

   Les angles sont arrondis et bordés d'un liseré discret, comme
   les encadrés, les cartes et la photo de la page À propos. */
.service-main .single-thumb.is-sized,
.single-rhs_service .rhs-prog-scene{
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
}
.service-main .single-thumb.is-sized{
  display:block; width:max-content; max-width:100%;
  margin-left:0; margin-right:auto;
}
.service-main .single-thumb.is-sized img{
  display:block;
  height:var(--rhs-media-h,440px);
  width:auto; max-width:100%;
  object-fit:contain;
}
/* La progression à curseur suit le même réglage. Ses deux images
   étant superposées, la hauteur est portée par la scène. */
.single-rhs_service .rhs-prog--lead .rhs-prog-scene{
  height:var(--rhs-media-h,440px);
  width:max-content; max-width:100%;
}
.single-rhs_service .rhs-prog--lead .rhs-prog-scene img{
  height:100%; width:auto; max-width:none; object-fit:cover;
}
@media (max-width:640px){
  .service-main .single-thumb.is-sized img,
  .single-rhs_service .rhs-prog--lead .rhs-prog-scene{
    height:auto; width:100%;
  }
  .single-rhs_service .rhs-prog--lead .rhs-prog-scene img{
    height:auto; width:100%;
  }
}

/* --- Lien vers la FAQ complète ---------------------------- */
.faq-more{margin:34px 0 0; text-align:center;
}
.faq-more a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-ui); font-weight:600;
  color:var(--color-primary);
}
.faq-more a:hover{color:var(--color-accent-dark);
}

/* --- Filtres de la page FAQ -------------------------------
   Les boutons restent masqués tant que le script ne les a pas
   révélés : sans JavaScript ils seraient inutilisables, alors
   que toutes les questions, elles, restent affichées. */
.faq-filters{
  display:flex; flex-wrap:wrap; gap:9px; margin:0 0 26px;
}
.faq-filters[hidden]{display:none;
}
.faq-filter{
  border:1px solid var(--line); background:var(--card, #fffdf8);
  color:var(--color-ink); border-radius:var(--radius-pill);
  padding:8px 16px; font-family:var(--font-body);
  font-size:var(--fs-note); cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.faq-filter:hover{border-color:var(--color-secondary);
}
.faq-filter.is-active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--ivory);
}
.faq-empty{
  font-size:var(--fs-ui); color:var(--color-soft); font-style:italic;
}
.faq-empty[hidden]{display:none;
}
.faq-list details[hidden]{display:none;
}


/* =========================================================
   MIGRATION 2.20 — BLOCS DE CONTENU, LIENS, POINTS FORTS
   ========================================================= */

/* --- Bande de points forts : centrage réel ----------------
   Deux décalages vers le bas se cumulaient sur le bloc de
   texte, hérités de l'époque où les libellés tenaient sur une
   seule ligne. Plutôt que d'en ajouter un troisième pour
   compenser, on les annule et on centre icône et texte l'un par
   rapport à l'autre. La bande est légèrement resserrée. */
/* Espacement symétrique, indépendamment de ce qui précède.
   La règle générale « .rhs-section + .rhs-section » ajoute jusqu'à 76
   pixels en haut de toute section suivant une autre section. Le fond blanc
   de cette bande couvrant aussi cet espacement, le cadre commençait bien
   plus haut que le texte alors qu'il s'arrêtait à 34 pixels en bas : le
   contenu paraissait posé trop bas. Cette bande a ses propres filets dorés
   en haut et en bas, elle n'a donc pas besoin de l'espacement de
   séparation prévu pour les autres sections. */
.trust{padding:34px 0;
}
.rhs-section + .rhs-section.trust{padding-top:34px;
}
/* Colonnes alignées par le haut. Centrées, chaque bloc se calait sur
   sa propre hauteur : les icônes ne tombaient pas sur la même ligne
   d'une colonne à l'autre, et le séparateur — lui centré sur la hauteur
   commune de la grille — devenait le seul repère. Trois textes de
   longueurs inégales suffisaient à faire lire un défaut d'alignement. */
.trust .trust-item{align-items:flex-start;
}
.trust .trust-item-text,
.trust-item-text{padding-top:0;
}

/* --- Liens dans les contenus ------------------------------
   Rien ne les distinguait du texte courant : un lien posé en
   fin de paragraphe passait inaperçu. Soulignement discret au
   repos, couleur affirmée au survol. */
.entry-content a:not(.btn):not(.rhs-zone-lien),
.about-story a:not(.btn){
  color:var(--color-primary);
  text-decoration:underline;
  text-decoration-color:var(--color-secondary);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.entry-content a:not(.btn):not(.rhs-zone-lien):hover,
.about-story a:not(.btn):hover{
  color:var(--color-accent-dark);
  text-decoration-color:var(--color-accent-dark);
}

/* --- Frise : quatre étapes sur une seule ligne ------------
   La grille automatique plaçait trois blocs par ligne et
   renvoyait le quatrième seul en dessous. On répartit les
   étapes en parts égales tant que la largeur le permet. */
@media (min-width:900px){
  .rhs-steps{
    grid-template-columns:repeat(var(--rhs-steps-count,4), minmax(0,1fr));
  }
}
@media (min-width:620px) and (max-width:899px){
  .rhs-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* --- Les trois zones --------------------------------------
   Un seul balisage, deux rendus. Le script ouvre tous les
   panneaux au-delà de 900 px et pose la classe is-cards ; la
   mise en forme fait le reste. */
.rhs-zones-block{margin:44px 0;
}
.rhs-zones-title{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(18px,2vw,20px); color:var(--color-heading);
  margin:0 0 26px;
}
.rhs-zones{display:grid; gap:12px;
}
.rhs-zone{
  background:var(--card,#fffdf8);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.rhs-zone-head{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:13px;
  padding:14px 16px;
  font-family:var(--font-heading); font-weight:600;
  font-size:calc(var(--font-size-base) * 0.97);
  color:var(--color-primary);
}
.rhs-zone-head::-webkit-details-marker{display:none;
}
.rhs-zone-media{
  width:44px; height:44px; border-radius:var(--radius-sm);
  flex:none; overflow:hidden; background:var(--color-bg);
}
.rhs-zone-media img{width:100%; height:100%; object-fit:cover; display:block;
}
.rhs-zone-titre{flex:1; display:flex; align-items:center; gap:10px;
}
.rhs-zone-chev{
  width:9px; height:9px; flex:none;
  border-right:1.5px solid var(--color-secondary);
  border-bottom:1.5px solid var(--color-secondary);
  transform:rotate(45deg); transition:transform .2s ease;
}
.rhs-zone[open] .rhs-zone-chev{transform:rotate(-135deg);
}
.rhs-zone-body{padding:0 16px 16px;
}
.rhs-zone-body p{
  font-size:var(--fs-ui); line-height:1.6;
  color:var(--color-ink); margin:0 0 12px;
}
/* Le contenu des pages est justifié ; une colonne de carte est trop
   étroite pour répartir les blancs et la justification y creuse des
   trous entre les mots. Le thème désactive déjà la justification sous
   640 px pour cette raison : la même logique vaut ici. */
/* Justification rétablie à 17 px de base : la ligne compte environ 15 %
   de caractères de plus qu'à 20 px, ce qui laisse au navigateur de quoi
   répartir les blancs. La coupure des mots est ce qui fait la
   différence en colonne étroite — « diagnostic » peut être coupé plutôt
   que renvoyé entier en creusant un trou. Le thème la désactive partout
   ailleurs, à raison : elle n'a d'intérêt que sur des colonnes courtes. */
.rhs-zone-texte p,
.entry-content .rhs-zone-texte p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-size:var(--fs-ui); line-height:1.6;
  color:var(--color-ink); margin:0 0 12px;
}
/* Sur téléphone, la carte devient un panneau pleine largeur mais reste
   étroite : la justification y abîmerait la lecture, comme ailleurs. */
@media (max-width:640px){
  .rhs-zone-texte p,
  .entry-content .rhs-zone-texte p{text-align:left; hyphens:none; -webkit-hyphens:none;}
}
.entry-content .rhs-zone-texte p:first-child{margin-top:0;
}
.rhs-zone-texte p:last-child{margin-bottom:0;
}
.rhs-zone-texte strong{font-weight:600; color:var(--color-primary);
}
.rhs-zone-lien{
  display:inline-block;
  font-size:max(12px, calc(var(--font-size-base) * 0.625)); font-weight:600;
  color:var(--color-primary); text-decoration:none;
  border-bottom:1px solid var(--color-secondary);
  padding-bottom:2px;
}
.rhs-zone-lien:hover{color:var(--color-accent-dark);
}

/* Rendu en cartes, à partir de 900 px. Le chevron disparaît et
   l'image passe en bandeau : plus rien n'évoque un panneau
   repliable, puisqu'il ne l'est plus. */
.rhs-zones-block.is-cards .rhs-zones{
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.rhs-zones-block.is-cards .rhs-zone{display:flex; flex-direction:column;
}
.rhs-zones-block.is-cards .rhs-zone-head{
  flex-direction:column; align-items:stretch; gap:0;
  padding:0; cursor:default;
  background:var(--color-primary);
}
.rhs-zones-block.is-cards .rhs-zone-media{
  width:100%; height:120px; border-radius:0;
}
.rhs-zones-block.is-cards .rhs-zone-titre{
  padding:15px 22px; flex:none;
  font-size:calc(var(--font-size-base) * 0.97);
  color:var(--ivory);
  display:flex; align-items:center; gap:10px;
}
/* Le rond doré reprend le motif des surtitres et des filets du site.
   Sur le vert profond, un doré plein serait trop dur : la pastille
   reste transparente et seule l'icône est claire. */
.rhs-zone-icone{
  flex:none; width:27px; height:27px; border-radius:50%;
  background:rgba(218,174,127,0.22);
  color:var(--color-accent-light);
  display:flex; align-items:center; justify-content:center;
}
.rhs-zone-icone svg{width:16px; height:16px; display:block;
}
.rhs-zones-block.is-cards .rhs-zone-chev{display:none;
}
.rhs-zones-block.is-cards .rhs-zone-body{
  display:flex; flex-direction:column; flex:1;
  padding:22px;
}
/* Interligne plus généreux et lien décollé du texte : c'est ce qui
   donne le plus de respiration une fois les marges élargies. */
.rhs-zones-block.is-cards .rhs-zone-texte p{line-height:1.75; margin-bottom:18px;
}
.rhs-zones-block.is-cards .rhs-zone-texte p:last-child{margin-bottom:0;
}
/* Chrome enveloppe depuis fin 2024 le contenu d'un <details> dans une
   couche interne, ::details-content. La demande d'étirement adressée au
   corps de la carte ne l'atteignait donc plus : c'est cette couche qui
   décide de la hauteur. On la rend transparente à la mise en page.
   Les navigateurs sans ce mode de rendu ignorent la règle, où la chaîne
   fonctionnait déjà. */
.rhs-zones-block.is-cards .rhs-zone::details-content{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0;
}
/* Le texte absorbe l'espace libre de la carte : le lien se retrouve
   plaqué en bas, à la même hauteur dans les trois cartes, quelle que
   soit la longueur des textes. */
.rhs-zones-block.is-cards .rhs-zone-texte{flex:1 1 auto;
}
/* 24 px : un peu plus que l'interligne du texte. En dessous, le lien
   paraît accroché à la dernière ligne ; au-dessus, il flotte. C'est un
   minimum, l'écart réel étant plus grand dans les cartes au texte court. */
.rhs-zones-block.is-cards .rhs-zone-texte p:last-child{margin-bottom:24px;
}
/* En mode cartes, la largeur est connue : le lien tient sur une ligne.
   L'empêcher de se couper évite qu'une flèche seule tombe en dessous et
   décale la ligne d'une carte par rapport aux deux autres. La règle ne
   s'applique pas aux panneaux pleine largeur du format téléphone, où la
   coupure est sans conséquence. */
.rhs-zones-block.is-cards .rhs-zone-lien{margin-top:auto; align-self:flex-start;
  white-space:nowrap;
}

/* --- Ce que la méthode n'est pas -------------------------- */
/* Variante retenue : un cadre à contour vert, le titre intégré dans un
   bandeau plein en tête. Le titre remonté dans le cadre évite la
   redondance d'un intitulé extérieur suivi d'un bandeau intérieur, et
   donne au bloc un point d'ancrage — une bordure seule sur 500 px de
   haut paraît vide en son sommet.

   Le filet doré sous le titre a disparu : le bandeau joue ce rôle. */
.rhs-excl-block{margin:44px 0;
}
.rhs-excl-block .rhs-excl-cadre{
  background:var(--card,#fffdf8);
  border:1.5px solid var(--color-primary);
  border-radius:var(--radius);
  overflow:hidden;
}
.rhs-excl-title{
  background:var(--color-primary);
  color:var(--ivory);
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(18px,2vw,20px);
  line-height:1.3;
  margin:0; padding:15px 26px;
}
.rhs-excl{display:block; padding:0 26px;
}
.rhs-excl-item{
  display:flex; align-items:flex-start;
  gap:clamp(16px, 2vw, 26px);
  padding:18px 0;
  border-top:1px solid rgba(44,80,87,0.3);
}
.rhs-excl-item:first-child{border-top:none;
}
/* Colonne assez large pour « Ce n'est pas une tricopigmentation » sur
   une seule ligne : la négation fait partie du sens, on ne l'ampute pas.
   Le texte de droite conserve largement la place nécessaire. */
.rhs-excl-item h3,
.entry-content .rhs-excl-item h3{
  flex:0 0 clamp(210px, 25%, 290px);
  font-family:var(--font-heading); font-weight:500;
  font-size:calc(var(--font-size-base) * 0.97);
  color:var(--color-primary);
  margin:0; line-height:1.4;
  display:flex; gap:9px; align-items:baseline;
}
.rhs-excl-tiret{color:var(--color-accent-dark); flex:none;
}
.rhs-excl-texte{flex:1 1 auto; min-width:0;
}
.rhs-excl-item p,
.entry-content .rhs-excl-item p{
  font-size:var(--fs-ui); line-height:1.7;
  color:var(--color-ink); margin:0 0 10px;
  text-align:left;
}
.entry-content .rhs-excl-item p:first-child{margin-top:0;
}
.rhs-excl-item p:last-child{margin-bottom:0;
}
.rhs-excl-item strong{font-weight:600; color:var(--color-primary);
}

/* Sous 780 px, la colonne de titre deviendrait trop étroite pour
   « Ce n'est pas une solution pour tout le monde » : le titre repasse
   au-dessus du texte, sur toute la largeur. */
@media (max-width:780px){
  .rhs-excl-item{flex-direction:column; gap:8px;}
  .rhs-excl-item h3{flex:none;}
}

/* --- Liseré doré sur les images d'expertise ---------------
   Le liseré livré en 2.19 utilisait la variable de bordure
   générale, un vert à 14 % d'opacité : lisible sur un encadré
   blanc, invisible sur une photo. Le doré de la charte ressort
   sur l'ivoire et fait écho au cadre de la photo À propos. */
.service-main .single-thumb.is-sized,
.single-rhs_service .rhs-prog-scene{
  border-color:var(--color-secondary);
}

/* =========================================================
   SYMBOLE DE MARQUE DÉPOSÉE
   Posé sur la ligne de base et au corps du texte, ® pèse
   autant qu'une lettre dans une police à fort contraste.
   Réduit à 60 % et remonté, il redevient ce qu'il doit être :
   une mention, pas un mot. Le balisage est ajouté à
   l'affichage par inc/typographie.php — la saisie reste ®.
   ========================================================= */
.rhs-reg{
  font-size:0.6em;
  vertical-align:0.42em;
  line-height:0;
  letter-spacing:0.02em;
}
/* Sur le bandeau vert des cartes et le bandeau des exclusions,
   le symbole hérite de la couleur claire du titre : rien à
   déclarer, mais on évite qu'un survol de lien le recolore. */
a .rhs-reg{color:inherit;
}

/* =========================================================
   ÉCHELLE UNIFIÉE DES TROIS BLOCS DE CONTENU
   Cartes de zones, cadre des exclusions et frise d'étapes
   avaient chacun leur propre échelle, réglée à des moments
   différents et jamais confrontée aux deux autres : intitulés
   à 14,5, 16,0 et 17,9 px pour un même niveau de lecture, et
   un titre de carte plus petit que le texte courant — une
   hiérarchie inversée.

   Trois niveaux, une seule valeur par niveau :
     titre du bloc     26 px    (clamp, suit la largeur d'écran)
     intitulé interne  0,97 × base
     texte interne     0,88 × base  (--fs-ui)

   Les citations, elles, étaient figées en pixels et ne
   suivaient plus la taille de base réglée dans le
   Personnalisateur. Elles sont désormais calculées comme
   le reste.
   ========================================================= */

/* =========================================================
   ÉCHELLE TYPOGRAPHIQUE DU SITE — RÉFÉRENCE
   Toutes les tailles de titres passent par cette échelle.
   Aucune n'est plus figée en pixels : elles suivent soit la
   largeur de l'écran (clamp), soit la taille de base réglée
   dans le Personnalisateur.

     Bandeau d'accueil     28 → 40 px
     Titre de page         25 → 30 px
     Grand titre de section 22 → 26 px
     Titre de section      18 → 20 px
     Sous-titre            17 → 18 px
     Titre de carte        0,97 × base
     Texte courant         1,00 × base
     Texte des blocs       0,88 × base

   COULEURS
     Titres de page et de section  --color-heading
     Titres internes de cartes     --color-primary
     Titres sur fond sombre        --ivory

   Avant d'ajouter une taille de titre ailleurs, reprendre
   une de ces valeurs plutôt que d'en inventer une nouvelle :
   c'est la dispersion qui avait produit sept échelles
   différentes pour trois niveaux de lecture.
   ========================================================= */

/* =========================================================
   GRAISSE DU GRAS
   Le thème charge ses polices jusqu'à 600. <strong> réclame
   700 par défaut : faute de disposer de cette graisse, le
   navigateur fabrique un faux gras en épaississant les
   contours de la 400. Le résultat est plus lourd et plus
   noir qu'un vrai gras dessiné, au point de faire croire à
   un changement de taille ou de couleur du texte.

   On demande donc la graisse réellement disponible.
   ========================================================= */
strong, b,
.entry-content strong, .entry-content b,
.about-story strong, .about-story b{
  font-weight:600;
}
/* Dans un titre, déjà en 500, un gras supplémentaire n'a pas
   de sens : le titre est sa propre mise en valeur. */
h1 strong, h2 strong, h3 strong, h4 strong,
h1 b, h2 b, h3 b, h4 b{
  font-weight:inherit;
}

/* =========================================================
   BLOC « CONTRE-INDICATIONS »  [contre-indications]
   Filet doré latéral plutôt que cadre vert plein : celui-ci
   est réservé au bloc « Ce que la méthode n'est pas », sur
   Notre approche. Deux encadrés identiques sur des pages
   différentes brouilleraient la lecture. Le filet signale
   une mise en garde sans hausser le ton.
   ========================================================= */
.rhs-ci-block{margin:40px 0;
}
.rhs-ci-cadre{
  background:var(--card,#fffdf8);
  border:1px solid rgba(44,80,87,0.16);
  border-radius:var(--radius-md);
  overflow:hidden;
}
/* Bandeau sable : le vert plein reste réservé au bloc « Ce que la
   méthode n'est pas » et aux cartes de zones. Deux bandeaux verts sur
   des pages différentes brouilleraient la hiérarchie. */
.rhs-ci-head{
  background:var(--sand-bg);
  display:flex; align-items:center; gap:10px;
  padding:13px clamp(18px, 2.4vw, 24px);
  margin:0;
}
.rhs-ci-picto{
  flex:none; width:25px; height:25px; border-radius:50%;
  background:rgba(138,98,54,0.16);
  color:var(--sand-picto);
  display:flex; align-items:center; justify-content:center;
}
.rhs-ci-picto svg{width:15px; height:15px; display:block;
}
.rhs-ci-title,
.entry-content .rhs-ci-title{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(17px, 1.9vw, 19px);
  color:var(--sand-ink);
  margin:0; line-height:1.3;
}
.rhs-ci-corps{padding:22px clamp(18px, 2.4vw, 24px);
}
/* Taille du corps de page, et non celle des éléments d'interface.
   Ce bloc porte les contre-indications médicales : c'est l'information la
   plus lourde de conséquences de la page, et c'était la seule écrite en
   plus petit que le reste. Un lecteur pressé la survolait. La couleur,
   elle, était déjà la même que celle des paragraphes courants — c'est la
   taille seule qui donnait cette impression d'écriture plus pâle. */
.rhs-ci-texte p,
.entry-content .rhs-ci-texte p,
.rhs-ci-chute p,
.entry-content .rhs-ci-chute p{
  font-size:var(--font-size-base); line-height:1.8;
  color:var(--color-ink); margin:0 0 16px;
  text-align:left;
}
.rhs-ci-texte p:last-child,
.rhs-ci-chute p:last-child{margin-bottom:0;
}
.rhs-ci-texte strong,
.rhs-ci-chute strong{color:var(--color-primary);
}
/* La conclusion n'est pas une contre-indication de plus : c'est
   ce que la praticienne en fait. Le filet lui donne sa portée. */
.rhs-ci-chute{
  border-top:1px solid rgba(44,80,87,0.12);
  margin:16px 0 0; padding:14px 0 0;
}
@media (max-width:640px){
  .rhs-ci-head{align-items:flex-start;}
}

/* =========================================================
   BANDEAUX DES TITRES DE SECTION
   Les pages d'expertise comptent jusqu'à neuf titres de
   section. Beaucoup de visiteurs ne lisent pas de bout en
   bout : ils cherchent la partie qui les concerne. Un fond
   teinté leur donne des points de repère.

   Variante retenue : teinte seule, sans filet doré. Répété
   neuf fois, un filet deviendrait envahissant et entrerait
   en concurrence avec celui de l'encadré des
   contre-indications, qui doit rester le plus visible.
   ========================================================= */
.entry-content h2,
.about-story h2,
.single-article .entry-content h2{
  background:var(--tint-green);
  border-radius:var(--radius-md);
  padding:11px clamp(14px, 1.8vw, 18px);
  /* Le bandeau déborde de chaque côté exactement de sa marge
     intérieure : le titre retombe ainsi sur la même verticale que le
     texte des paragraphes, au lieu d'être décalé vers la droite. */
  margin-left:calc(-1 * clamp(14px, 1.8vw, 18px));
  margin-right:calc(-1 * clamp(14px, 1.8vw, 18px));
  color:var(--color-primary);
}
/* Le titre du bloc « Ce que la méthode n'est pas » vit dans son
   propre bandeau vert plein : il ne doit pas en recevoir un second. */
/* Ces deux titres vivent dans leur propre cadre. Le titre des exclusions
   garde le bandeau clair, qui convient ; il fallait seulement annuler le
   débordement latéral appliqué aux titres de section — sans quoi son
   texte se retrouvait collé au bord du cadre au lieu d'être en retrait. */
.entry-content .rhs-excl-title{
  border-radius:0;
  padding:15px 26px;
  margin-left:0; margin-right:0;
}
.entry-content .rhs-ci-title{
  background:none; border-radius:0;
  padding:0; margin-left:0; margin-right:0;
}

/* =========================================================
   STYLE DE PARAGRAPHE « ACCROCHE »
   Une phrase qui doit ressortir sans être un titre. Le titre
   déclare une section : cette déclaration est lue par Google
   et par les lecteurs d'écran, indépendamment de l'apparence.
   On ne s'en sert donc pas pour grossir du texte.

   La rupture vient de la police à empattements plus que de la
   taille. Pas de gras : combiné au corps supérieur, il
   produirait un second titre.
   ========================================================= */
.entry-content .is-style-accroche,
.about-story .is-style-accroche{
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.18);
  font-weight:400;
  line-height:1.45;
  color:var(--color-primary);
  margin:22px 0 16px;
  text-align:left;
}

/* =========================================================
   CONTENEURS DE TEXTE ENRICHI
   En 2.32, les champs passés en éditeur enrichi ont vu leur
   balise d'affichage passer de <p> à <div> : un texte enrichi
   contient déjà ses propres paragraphes, qu'on ne peut pas
   imbriquer dans un autre.

   Conséquence non anticipée : toutes les règles écrites pour
   « p.lead », « p.txt » et consorts ont cessé de s'appliquer.
   Le chapeau du bandeau d'accueil avait ainsi perdu sa taille,
   sa largeur maximale et sa marge basse.

   Les sélecteurs ci-dessus ne mentionnent plus la balise. Il
   reste à neutraliser les marges des paragraphes intérieurs,
   qui s'ajouteraient à celles du conteneur.
   ========================================================= */
.lead > p,
.txt > p,
.method-text > p,
.reco-outro > p,
.cabinet-text > p,
.about-intro-lead > p,
.section-head-intro > p,
.trust-item-text > p,
.faq-answer > p{
  margin:0 0 10px;
  font-size:inherit; line-height:inherit; color:inherit;
  text-align:inherit; max-width:none;
}
.lead > p:last-child,
.txt > p:last-child,
.method-text > p:last-child,
.reco-outro > p:last-child,
.cabinet-text > p:last-child,
.about-intro-lead > p:last-child,
.section-head-intro > p:last-child,
.trust-item-text > p:last-child,
.faq-answer > p:last-child{margin-bottom:0;
}

/* =========================================================
   PAGE FAQ — CHAPEAU, QUESTION OUVERTE, RAPPEL DE FIN
   ========================================================= */
.faq-intro{margin-bottom:26px;
}
.faq-filters{margin-bottom:8px;
}
/* Rien ne signalait quelle question était dépliée. La même teinte que
   les bandeaux de titres suffit à la distinguer. */
.faq-list details[open]{
  background:var(--tint-green);
  border-radius:var(--radius-md);
  padding-left:16px; padding-right:16px;
  margin-left:-16px; margin-right:-16px;
}
/* Rappel de fin de page : le bouton reprend son sens une fois les
   questions lues. La phrase qui l'accompagne lui donne sa raison d'être. */
.faq-cta{
  background:var(--color-primary);
  border-radius:var(--radius);
  padding:24px clamp(20px, 2.6vw, 30px);
  margin-top:40px;
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
.faq-cta-title{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(18px, 2vw, 20px);
  color:var(--ivory); margin:0 0 5px; line-height:1.3;
}
.faq-cta-sub{
  font-size:var(--fs-ui); color:rgba(255,253,248,.75); margin:0;
}
@media (max-width:640px){
  .faq-cta{flex-direction:column; align-items:flex-start;}
}

/* =========================================================
   PAGE TARIFS — PARCOURS EN COLONNES
   Les zones étaient empilées : il fallait faire défiler pour
   comparer, et l'offre n'apparaissait jamais d'un seul coup
   d'oeil. Elles passent côte à côte, avec un pied aligné sur
   les trois cartes pour que la comparaison soit immédiate
   malgré des contenus de longueurs inégales.
   ========================================================= */
.price-courses-title,
.price-extras-title,
.entry-content .price-courses-title,
.entry-content .price-extras-title{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(18px, 2vw, 21px);
  letter-spacing:0; text-transform:none;
  color:var(--color-heading);
  margin:36px 0 16px;
  background:none; padding:0;
  position:static; transform:none; white-space:normal;
}
.price-courses{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width:900px){
  .price-courses.cols-3{grid-template-columns:repeat(3, minmax(0,1fr));}
  .price-courses.cols-2{grid-template-columns:repeat(2, minmax(0,1fr));}
  .price-courses.cols-4{grid-template-columns:repeat(4, minmax(0,1fr));}
}
.price-course{
  background:var(--card,#fffdf8);
  border:1px solid rgba(44,80,87,0.14);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.price-course-head{
  background:var(--color-primary);
  padding:14px clamp(14px, 1.8vw, 18px);
}
.price-course-zone{
  display:block;
  font-size:max(11px, calc(var(--font-size-base) * 0.6));
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent-light);
  margin:0 0 3px;
}
.price-course-head h3,
.entry-content .price-course-head h3{
  font-family:var(--font-heading); font-weight:500;
  font-size:calc(var(--font-size-base) * 0.97);
  color:var(--ivory); margin:0; line-height:1.3;
  background:none; padding:0;
}
.price-course-body{
  padding:15px clamp(14px, 1.8vw, 18px);
  flex:1 1 auto;
}
/* Le trait sépare les paliers ; le premier n'en a pas besoin. */
.price-tier{padding:11px 0; border-top:1px solid rgba(44,80,87,0.12);
}
.price-tier:first-child{padding-top:0; border-top:none;
}
.price-tier:last-child{padding-bottom:0;
}
.price-tier-name{
  font-size:var(--fs-body); font-weight:600;
  color:var(--color-primary); margin:0 0 2px;
}
.price-tier-zone{
  font-size:var(--fs-ui);
  color:var(--color-ink); margin:0 0 5px;
}
.price-tier-amount{
  margin:0; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
}
/* La mention reste une précision : c'est le montant qui doit retenir
   l'oeil. Elle est donc plus petite que le texte descriptif, et grise. */
.price-tier-from{
  font-family:var(--font-body);
  font-size:calc(var(--font-size-base) * 0.706);
  color:var(--color-muted); font-weight:400;
}
/* Le montant se détache par la couleur autant que par la taille : le vert
   de la charte le sort du gris du texte courant sans écraser la carte. */
.price-tier-value{
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.3);
  line-height:1.15;
  color:var(--color-button);
}
.price-tier-desc p{
  font-size:var(--fs-ui);
  line-height:1.6; color:var(--color-ink);
  margin:6px 0 0; text-align:left;
}
.price-course-foot{
  padding:12px clamp(14px, 1.8vw, 18px) 15px;
  border-top:1px solid rgba(44,80,87,0.12);
  background:rgba(44,80,87,0.03);
}
.price-course-foot p{
  font-size:var(--fs-ui);
  color:var(--color-ink); margin:0 0 3px;
}
.price-course-foot p:last-child{margin-bottom:0;
}
/* Mention de bas de page : même motif que l'encadré des
   contre-indications, pour que toutes les mises en garde du
   site se reconnaissent au premier coup d'oeil. */
.price-note{
  background:var(--card,#fffdf8);
  border:1px solid rgba(44,80,87,0.16);
  border-left:4px solid var(--color-secondary);
  border-radius:10px;
  padding:14px clamp(16px, 2vw, 20px);
  margin:26px 0 0;
}
.price-note p{
  font-size:var(--fs-body); line-height:1.65;
  color:var(--color-ink); margin:0; text-align:left;
}
.price-note strong{color:var(--color-primary);
}
.diag-reassure{
  font-size:max(12px, calc(var(--font-size-base) * 0.66));
  color:rgba(255,253,248,.6);
  text-align:center; margin:9px 0 0;
}

/* Zones concernées, sous le titre d'un article. Le même vocabulaire
   que les filtres de la page Résultats : le lecteur reconnaît le
   classement d'une page à l'autre. */
.post-zones{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;
}
.post-zone{
  display:inline-block;
  font-size:max(12px, calc(var(--font-size-base) * 0.68));
  color:var(--color-primary); text-decoration:none;
  background:var(--tint-green);
  border-radius:var(--radius-pill);
  padding:5px 14px;
  transition:background .18s ease;
}
.post-zone:hover{background:color-mix(in srgb, var(--color-primary) 16%, transparent);
}


/* Le bandeau du bloc des exclusions vit dans son propre cadre : il ne
   doit hériter ni du débordement latéral des titres de section, ni de
   leur marge intérieure réduite. Le sélecteur passe par le cadre pour
   l'emporter quel que soit l'ordre des règles. */
.entry-content .rhs-excl-cadre .rhs-excl-title{
  border-radius:0;
  padding:15px 26px;
  margin-left:0; margin-right:0;
}

/* =========================================================
   RÉSULTATS — VUE AGRANDIE
   La carte reste sobre ; la description attend ici, où l'on
   prend le temps de lire.
   ========================================================= */
.result-loupe{
  display:inline-block; margin:10px 0 0;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-body);
  font-size:var(--fs-ui); font-weight:600;
  color:var(--color-accent-light);
  border-bottom:1px solid var(--color-secondary);
}
.result-detail{display:none;
}
.result-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(32,48,47,.82);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px, 4vw, 48px);
  overflow-y:auto;
}
.result-modal-inner{
  position:relative;
  background:var(--card,#fffdf8);
  border-radius:var(--radius);
  /* La largeur est posée par le script, d'après la photo : le panneau
     épouse l'image au lieu d'imposer une largeur fixe. La valeur ci-dessous
     ne sert que de repli. */
  max-width:min(820px, 100%);
  width:auto;
  overflow:hidden;
  /* La vue était figée en 4/3 sur 820 pixels de large, soit 615 pixels de
     haut, plus le bloc de texte : sur un écran d'ordinateur portable,
     l'ensemble dépassait la fenêtre. Elle se contraint désormais à la
     hauteur disponible, et se partage entre la photo et le texte. */
  max-height:calc(100dvh - 2 * clamp(16px, 4vw, 48px));
  display:flex;
  flex-direction:column;
}
.result-modal-media{
  flex:0 0 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
/* Le cadre prend la forme de la photo et se limite à la place restante : la
   photo entière est visible, quelle que soit la taille de l'écran.
   Sa largeur et sa hauteur sont posées en pixels par le script, car le
   contenu du cadre est en position absolue : une largeur « auto » se
   calculait donc sur un contenu de largeur nulle, et le cadre disparaissait.
   Les valeurs ci-dessous ne servent que de repli. */
.result-modal-media .ba-slider{
  width:100%; height:auto;
  max-width:100%;
  aspect-ratio:4/3;
}
.result-modal-media .ba-slider img{max-width:none;
}
.result-modal-body{
  padding:clamp(18px, 2.4vw, 26px);
  flex:0 1 auto; max-height:32dvh; overflow-y:auto;
}
.result-modal-body h3{
  font-family:var(--font-heading); font-weight:500;
  font-size:clamp(18px, 2vw, 21px);
  color:var(--color-heading); margin:0 0 6px;
  background:none; padding:0;
}
.result-modal-body .result-meta{
  font-size:var(--fs-ui); color:var(--color-ink); margin:0 0 14px;
}
.result-modal-desc p{
  font-size:var(--fs-body); line-height:1.7;
  color:var(--color-ink); margin:0 0 10px; text-align:left;
}
.result-modal-desc p:last-child{margin-bottom:0;
}
.result-modal-close{
  /* Au-dessus du curseur de comparaison, qui la recouvrait et rendait la
     fermeture impossible autrement qu'en cliquant à côté. */
  position:absolute; top:10px; right:12px; z-index:20;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,253,248,.92); border:1px solid var(--line);
  font-size:22px; line-height:1; color:var(--color-heading);
  cursor:pointer;
}

/* Mention sous le bouton du diagnostic : la plus petite de l'encadré,
   mais elle doit rester lisible. */
.diag-reassure{font-size:var(--fs-note);
}

/* =========================================================
   SOMMAIRE DES PAGES D'EXPERTISE  [rhs-toc]
   Même aspect sur les trois expertises ; seules les lignes
   changent. Fermé par défaut : seule la question est visible.
   ========================================================= */
.rhs-toc{
  margin:calc(var(--font-size-base) * 1.4) 0 calc(var(--font-size-base) * 2.4);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--ivory);
}
.rhs-toc summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1.2em;
  padding:1em 1.3em;
  font-family:var(--font-body); font-weight:500;
  font-size:calc(var(--font-size-base) * 0.941);
  color:var(--color-primary);
}
.rhs-toc summary::-webkit-details-marker{display:none;}
.rhs-toc summary::after{
  content:"+"; font-weight:300;
  font-size:calc(var(--font-size-base) * 1.18);
  color:var(--color-secondary);
  transition:transform .3s ease;
}
.rhs-toc details[open] summary::after{transform:rotate(45deg);}
.rhs-toc summary:focus-visible{outline:2px solid var(--color-secondary); outline-offset:2px; border-radius:var(--radius-md);}

.rhs-toc-liste{
  margin:0; padding:0 1.3em 1.1em 1.3em;
  list-style:none;
  border-top:1px solid var(--line);
}
.rhs-toc-liste li{margin:0; padding:0;}
.rhs-toc-liste a{
  display:block;
  padding:.65em 0;
  font-size:calc(var(--font-size-base) * 0.9);
  line-height:1.45;
  color:var(--color-link);
  text-decoration:none;
}
.rhs-toc-liste li + li a{border-top:1px solid var(--line);}
.rhs-toc-liste a:hover,
.rhs-toc-liste a:focus-visible{color:var(--color-secondary);}

/* Le titre atteint s'arrête sous l'en-tête fixe (hauteur mesurée
   par assets/main.js), avec un peu d'air. */
.single-rhs_service .entry-content h2[id]{
  scroll-margin-top:calc(var(--rhs-entete, 6em) + 1em);
}

/* =========================================================
   « VOUS AVEZ ENCORE UNE QUESTION ? »  [rhs-more-q]
   ========================================================= */
.rhs-more-q{
  margin-top:calc(var(--font-size-base) * 3);
  padding-top:calc(var(--font-size-base) * 1.6);
  border-top:1px solid var(--line);
}
.rhs-more-q-titre{
  margin:0 0 .4em;
  font-family:var(--font-heading);
  font-size:calc(var(--font-size-base) * 1.35);
  color:var(--color-heading);
}
.rhs-more-q-lien{
  font-weight:500;
  color:var(--color-link);
  text-decoration:none;
}
.rhs-more-q-lien:hover,
.rhs-more-q-lien:focus-visible{color:var(--color-secondary);}

/* =========================================================
   VERSION 2.68 — TÉLÉPHONE : HÉROS, EN-TÊTE, RÉSULTATS, FAQ
   ========================================================= */

/* --- Héros : photo à part, nette, au-dessus du texte ------ */
.hero-mobile-media{display:none;}
.lead-mobile{display:none;}

@media (max-width: 900px){
  .hero-bg{
    background-image:none !important;
    height:auto; min-height:0; display:block;
    padding:calc(var(--font-size-base) * 0.9) 0 calc(var(--font-size-base) * 2.2);
  }
  .hero-bg::before{display:none;}
  .hero-mobile-media{
    display:block;
    margin:0 clamp(16px, 4vw, 32px) calc(var(--font-size-base) * 1.4);
    border-radius:var(--radius);
    overflow:hidden;
    aspect-ratio:4/3;
    background:var(--tint-green);
  }
  .hero-mobile-media img{
    display:block; width:100%; height:100%;
    object-fit:cover;
    /* Le sujet est placé à droite de la photo panoramique. */
    object-position:78% 30%;
  }
  .hero-bg .wrap{padding-top:0;}
  .hero-bg .hero-content{max-width:100%; padding-bottom:0;}
  .hero-bg h1{
    font-size:clamp(calc(var(--font-size-base) * 1.25), 6.4vw, calc(var(--font-size-base) * 1.6));
    line-height:1.2; margin-bottom:calc(var(--font-size-base) * 0.7);
  }
  .hero-bg .lead{
    font-size:calc(var(--font-size-base) * 0.9);
    line-height:1.6; margin-bottom:calc(var(--font-size-base) * 1.3);
  }
  .hero-bg .lead-desktop{display:none;}
  .hero-bg .lead-mobile{display:block;}
  .hero-bg .hero-cta{flex-direction:column; align-items:stretch; gap:calc(var(--font-size-base) * 0.6);}
  .hero-bg .hero-cta .btn{justify-content:center;}
  .hero-bg .hero-badges{
    margin-top:calc(var(--font-size-base) * 1.2);
    gap:8px 14px; font-size:calc(var(--font-size-base) * 0.72);
  }
  .hero-bg .badge-sep{display:none;}
  .hero-bg .badge-icon{width:calc(var(--font-size-base) * 1.4); height:calc(var(--font-size-base) * 1.4);}
}

/* --- En-tête : intitulé court sur petit écran ------------- */
.nav-cta .btn-label-short{display:none;}
@media (max-width: 600px){
  .nav-cta .btn-booking .btn-label-long{display:none;}
  .nav-cta .btn-booking .btn-label-short{display:inline; white-space:nowrap;}
}
@media (max-width: 400px){
  .nav-cta .btn-booking .btn-label-short{display:none;}
}

/* --- Résultats : points et indication de geste ------------ */
@media (max-width: 600px){
  .results-carousel.is-touch .results-track > [aria-hidden="true"]{display:none;}
  .results-carousel.is-touch{scroll-behavior:smooth;}
}
.results-dots{
  display:flex; justify-content:center; flex-wrap:wrap; gap:calc(var(--font-size-base) * 0.45);
  margin-top:calc(var(--font-size-base) * 0.8);
}
.results-dots button{
  width:calc(var(--font-size-base) * 0.45); height:calc(var(--font-size-base) * 0.45);
  padding:0; border:0; border-radius:50%;
  background:var(--line); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.results-dots button.is-active{background:var(--color-secondary); transform:scale(1.25);}
.results-dots button:focus-visible{outline:2px solid var(--color-secondary); outline-offset:3px;}
.results-swipe{
  text-align:center; margin:calc(var(--font-size-base) * 0.5) 0 0;
  font-size:calc(var(--font-size-base) * 0.72); color:var(--color-muted);
  transition:opacity .4s ease;
}
.results-swipe.is-gone{opacity:0;}

/* --- FAQ : bouton « Afficher plus de questions » ---------- */
.faq-more-wrap{text-align:center; margin:calc(var(--font-size-base) * 1.8) 0 0;}
.faq-more-wrap[hidden]{display:none;}

/* =========================================================
   VERSION 2.69 — RÉPARTITION DES POLICES
   Règle unique : la police de titres (à empattements) est
   réservée aux grands titres — titre de page, titres de
   section, titre du bandeau, citations. Tout le reste passe
   dans la police du texte : titres de cartes, prix, chiffres,
   intitulés d'encadrés. Une carte n'a ainsi plus qu'une seule
   police, et les prix gardent des chiffres alignés, que
   Cormorant ne fournit pas.
   ========================================================= */

/* Titres de cartes et d'encadrés */
.exp-body h3,
.price-family-head h3,
.price-box-head h3,
.diag-head h3,
.price-course-head h3, .entry-content .price-course-head h3,
.rhs-step-body h3, .entry-content .rhs-step-body h3,
.rhs-excl-item h3, .entry-content .rhs-excl-item h3,
.rhs-zone-head,
.rhs-ci-title, .entry-content .rhs-ci-title,
.result-modal-body h3,
.rhs-more-q-titre{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:0;
}

/* Petits titres intermédiaires (« Nos parcours », « Après votre parcours ») */
.price-courses-title, .price-extras-title,
.entry-content .price-courses-title, .entry-content .price-extras-title{
  font-family:var(--font-body);
  font-weight:500;
  letter-spacing:.01em;
}

/* Prix, montants et chiffres : police du texte, chiffres alignés */
.price-amount,
.price-value,
.price-tile-amount,
.price-tier-value,
.diag-price,
.step-num,
.avatar{
  font-family:var(--font-body);
  font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
}