/* ── Formes des images ────────────────────────────────────────────────────
   Une forme se mérite par la rareté. Une découpe sculptée porte quand
   l'image est seule et grande ; répétée dans une grille de vignettes, elle
   cesse d'être un geste et devient un défaut. D'où la règle :

     seule et grande   → forme travaillée
     en grille         → rectiligne

   Trois traitements seulement, et chacun a un rôle distinct :
     --forme-signature  le héros : quatre courbes différentes, une fois par site
     --forme-geste      les images de tête : UN seul grand arrondi, trois coins
                        francs. Il répond au héros sans le répéter.
     --forme-douce      les images isolées secondaires : un arrondi régulier,
                        discret, qui ne cherche rien.
   Les grilles n'ont pas de jeton : elles restent droites. */
:root{
  --forme-signature:9% 48% 13% 44% / 7% 33% 11% 39%;
  --forme-douce:10px;

  /* Les photos des pages intérieures sont des rectangles nets. La seule
     forme sculptée du site est celle du héros de l'accueil : c'est ce qui
     lui donne son poids. Ailleurs, c'est la composition — le filet doré,
     le blanc, la typographie — qui fait le travail, pas la découpe.
     Trois tentatives ont montré qu'un coin coupé sur une photo de page
     intérieure se lit comme un défaut, pas comme une intention. */
  --forme-geste:0;
}
/* On ne redéclare PAS border-radius ici. Les images de tête sont visées par
   des règles très spécifiques (`body.family-approach .subhero-art .main-photo`)
   qu'une classe simple ne peut pas surpasser — le piège `.family-*` de ce
   projet. On redéfinit donc le JETON sur l'élément : une propriété
   personnalisée se résout au moment de l'usage, et la spécificité du sélecteur
   qui écrit `border-radius:var(--forme-geste)` n'entre plus en jeu. */
:root{--echelle:1;--ink:#24211d;--muted:#6f685f;--gold:#b78a32;--gold-text:#876527;--gold-soft:#d9c28f;--gold-pale:#f4eee1;--off-white:#faf9f6;--sand:#f6f2e9;--sand-deep:#e8dfcf;--line:#e9e4dc;--paper:#fff;--soft:#faf9f6;--night:#23201b;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Baskerville,Georgia,serif;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ease:cubic-bezier(.2,.75,.25,1);--shell:min(1280px,calc(100vw - 72px));--subhero-cols:.92fr 1.08fr;--header-h:95px;}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:#fff} body{margin:0;background:#fff;color:var(--ink);font:16.5px/1.66 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;width:100%;height:100%;object-fit:cover} button{font:inherit;color:inherit} figure{margin:0} .shell{width:var(--shell);margin:auto} .serif{font-family:var(--serif)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.progress{position:fixed;z-index:150;top:0;left:0;width:100%;height:2px;transform:scaleX(var(--scroll,0));transform-origin:left;background:linear-gradient(90deg,#8e6a2b,#d8bd7d)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:140;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.topline{height:34px;border-bottom:1px solid #f1ede6;color:#787166;font-size:12px;letter-spacing:.045em;display:flex;align-items:center} .topline .shell{display:flex;justify-content:space-between;gap:24px}
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);border-bottom:1px solid rgba(230,224,213,.78)} .nav{height:94px;display:flex;align-items:center;gap:34px} .brand{display:flex;flex-direction:column;min-width:226px} .brand strong{font:500 24px/1 var(--serif);letter-spacing:.005em} .brand-line{width:168px;height:1px;background:var(--gold);margin:9px 0 7px} .brand small{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#6f695f}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:13.5px} .navlinks>a,.drop>.drop-link{position:relative;border:0;background:none;padding:15px 0;cursor:pointer} .navlinks>a:after,.drop>.drop-link:after{content:"";position:absolute;left:0;bottom:7px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:.27s var(--ease)} .navlinks>a:hover:after,.drop:hover>.drop-link:after,.drop.open>.drop-link:after{transform:scaleX(1);transform-origin:left}
.drop{position:relative;display:flex;align-items:center;gap:2px}
/* Le libellé mène à la page, le chevron ouvre le panneau. Un seul bouton pour
   les deux obligeait à passer par le panneau pour atteindre la page. */
.drop-toggle{display:flex;align-items:center;justify-content:center;width:26px;height:44px;
  padding:0;border:0;background:none;cursor:pointer;color:inherit}
.drop-chevron{display:block;width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .24s var(--ease);opacity:.8}
.drop-toggle:hover .drop-chevron{opacity:1}
.drop.open .drop-chevron{transform:translateY(1px) rotate(-135deg);opacity:1} /* Panneau resserré et centré sous son onglet. L'ancien faisait 720 px pour
    deux colonnes inégales : un grand vide en bas à droite, et un lien
    « Voir tous » orphelin sous la seule colonne de gauche. */
 .mega{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(8px);
   width:min(600px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);
   box-shadow:0 30px 76px rgba(43,35,22,.13);padding:30px 32px 0;
   display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-content:start;border-radius:6px;
   opacity:0;visibility:hidden;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s} .drop.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s} .mega-label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#876527;margin-bottom:10px} /* Plus de filet sous chaque entrée : cela faisait tableau. L'espace et la
    couleur au survol suffisent, et le panneau perd 100 px de hauteur. */
 .mega a{display:block;padding:6px 0;font:500 16px/1.35 var(--serif);color:var(--ink);
   transition:color .18s var(--ease),transform .18s var(--ease)} .mega a:hover{color:#8b682a;transform:translateX(3px)}
.cta,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid var(--ink);border-radius:9px;font-size:11.5px;letter-spacing:.075em;text-transform:uppercase;transition:.28s var(--ease);color:var(--ink)} .cta,.btn.gold{background:#8f6f2a;border-color:#8f6f2a;color:#fff;box-shadow:0 8px 22px rgba(120,92,36,.13);border-radius:9px} .btn.white{background:#fff;border-color:#d9d0bf;color:var(--ink)} .btn:hover{transform:translateY(-2px)} .btn.white:hover{border-color:var(--ink)} .menu{display:none;margin-left:auto;border:0;background:none;font-size:24px;width:44px;height:44px;align-items:center;justify-content:center;padding:0;cursor:pointer}
.mobile-panel{position:fixed;z-index:95;top:var(--header-h);left:0;right:0;bottom:0;background:#fff;padding:30px 30px max(40px,env(safe-area-inset-bottom));overflow:auto;-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s} .mobile-panel.open{visibility:visible;opacity:1;transform:none;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s} .mobile-panel a{display:block;padding:11px 0;border-bottom:1px solid var(--line);font:500 17px var(--serif)} .mobile-panel a.btn{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;border-bottom:0;display:flex;align-items:center;justify-content:center;text-align:center} .mobile-group{margin:22px 0 4px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#876527} .mobile-group:first-of-type{margin-top:16px}
.hero{position:relative;padding:88px 0 100px;min-height:760px;overflow:hidden} .hero:before{content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(177,138,68,.12);border-radius:50%;right:-250px;top:-180px}  .hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:72px;align-items:center;position:relative;z-index:2} .eyebrow{display:flex;align-items:center;gap:11px;font-size:11.5px;font-weight:650;letter-spacing:.15em;text-transform:uppercase;color:#876527} .eyebrow:before{content:"";width:34px;height:1px;background:var(--gold)}
.hero h1{font:400 clamp(38px,3.6vw,54px)/1 var(--serif);letter-spacing:-.032em;margin:18px 0 9px} .hero-sub{font:400 clamp(21px,1.8vw,28px)/1.14 var(--serif);color:#94723b;margin-bottom:24px} .lead{font:400 18px/1.78 var(--serif);color:#5e5952;max-width:620px} .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px} .mini-proof{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;margin-top:36px;color:#6b655d;font-size:12.5px} .mini-proof span{display:flex;align-items:center;gap:8px} .mini-proof i{width:5px;height:5px;background:var(--gold);border-radius:50%}
.hero-art{position:relative;height:540px} /* Une seule photo, en portrait. Le médaillon rond qui la chevauchait a été
    retiré : deux photos qui se coupent ne font pas une composition. */
 /* Fenêtre sculptée : quatre courbes différentes, aucune symétrie verticale.
    Haut gauche presque franc, haut droit largement ouvert, bas gauche la
    courbe la plus généreuse, bas droit un petit rayon. Ni arche, ni œuf, ni
    blob. Les huit valeurs sont horizontales / verticales, réglées à l'œil. */
 .hero-main{position:absolute;right:0;top:0;width:74%;max-width:430px;height:492px;overflow:hidden;
   border-radius:var(--forme-signature);
   box-shadow:0 30px 68px rgba(42,33,19,.14),0 5px 14px rgba(42,33,19,.05)} .hero-main img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transform:scale(1.03);transition:transform 1.2s var(--ease)} .hero-main:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.26);border-radius:inherit;pointer-events:none}
 /* Un seul filet doré, décalé de 15 px, strictement décoratif et plat. */
 .hero-outline{position:absolute;right:15px;top:-15px;width:74%;max-width:430px;height:492px;
   border:1px solid rgba(177,138,68,.42);border-radius:var(--forme-signature);
   pointer-events:none;z-index:0}
 /* Un vrai cercle : largeur et hauteur identiques, rayon 50 %. L'ancien
    médaillon était un ovale à quatre rayons, et son cadre de 9 px pesait. */
 /* Portrait vertical, pas un médaillon : format 3/4, forme asymétrique sobre,
    posé en bas à gauche et légèrement superposé à la grande photo. */
 .hero-portrait{position:absolute;right:calc(min(74%,430px) - 52px);bottom:14px;
   width:156px;height:208px;overflow:hidden;z-index:4;
   border-radius:10% 42% 12% 36% / 7% 30% 9% 26%;
   border:4px solid #fff;box-shadow:0 18px 40px rgba(42,33,19,.16)}
 .hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%} .hero-detail{position:absolute;right:4%;bottom:4px;width:27%;height:178px;border:7px solid #fff;border-radius:2px;box-shadow:0 18px 46px rgba(42,33,19,.09);z-index:5;overflow:hidden} /* Le filet accompagne la photo au lieu de flotter à l'autre bout de la colonne. */
 .hero-caption{display:none} .hero-mark{display:none}
.signature-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:78px;display:flex;align-items:center;overflow:hidden;background:#fff} .signature-strip{overflow:hidden}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-track{display:flex;align-items:center;gap:52px;white-space:nowrap;font:italic 19px var(--serif);color:#635e57;width:max-content;animation:marquee 34s linear infinite}
/* Le survol ralentit la lecture au lieu de l'arrêter net : plus élégant
   qu'une coupure brutale, et ça reste perceptible comme un vrai contrôle. */

 .strip-track i{width:36px;height:1px;background:var(--gold);display:inline-block} 
.section{padding:84px 0;position:relative} .section.soft{background:var(--soft)} .section-head{display:grid;grid-template-columns:1.08fr .7fr;gap:56px;align-items:end;margin-bottom:44px} .kicker{font:400 clamp(29px,2.7vw,39px)/1.1 var(--serif);letter-spacing:-.022em;margin:13px 0 0} .section-head .lead{font-size:17px;margin:0}
.intro-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:92px} .intro-sticky{position:sticky;top:155px;align-self:start} .quote-note{margin-top:33px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:italic 17px/1.62 var(--serif);color:#716b62} .problem-list{border-top:1px solid #dad3c6} .problem{display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px;min-height:88px;padding:17px 0;border-bottom:1px solid #dfd8cc;transition:.28s var(--ease);position:relative} .problem:before{content:"";position:absolute;left:-20px;top:50%;width:0;height:1px;background:var(--gold);transition:.3s var(--ease)} .problem:hover{padding-left:18px;color:#7f6028} .problem:hover:before{width:18px} .problem h3{font:500 21px/1.14 var(--serif);margin:0 0 5px} .problem > b{font:400 15px/1 var(--sans);color:#a98b53;font-weight:400} .problem p{margin:0;color:#756f66;font-size:14px} .problem b{font:400 22px var(--serif);color:#a18146}

.approach-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px} .approach{position:relative;min-height:0;cursor:pointer} .approach-featured{grid-column:1/-1;display:grid;grid-template-columns:.46fr .54fr;gap:40px;align-items:center;padding-bottom:34px;border-bottom:1px solid var(--line)} .approach-media{height:208px;overflow:hidden;box-shadow:0 14px 34px rgba(44,35,20,.08);border-radius:2px} .approach-media img{transition:1s var(--ease)} .approach:hover img{transform:scale(1.035)} .approach-copy{position:relative} .approach-copy:before{content:"";display:block;width:44px;height:1px;background:var(--gold);margin-bottom:18px} .approach-copy h3{font:400 27px/1.12 var(--serif);margin:8px 0 12px} .approach-copy p{color:#6e6860;margin-bottom:14px;font-size:14.5px;line-height:1.6;max-width:42ch} .textlink{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#876527}
.approach-featured .approach-media{height:258px;border-radius:var(--forme-douce)} .approach-featured .approach-copy h3{font-size:29px} .approach-featured .approach-copy p{font-size:15px;max-width:46ch} .approach:not(.approach-featured) .approach-media{height:152px;border-radius:2px} .approach:not(.approach-featured) .approach-copy{margin-top:15px} .approach:not(.approach-featured) .approach-copy h3{font-size:21px;margin:6px 0 9px} .approach:not(.approach-featured) .approach-copy p{font-size:13.5px;line-height:1.58;max-width:none} .approach:not(.approach-featured) .approach-copy:before{width:32px;margin-bottom:13px}
@media(max-width:1080px){.approach-featured .approach-media{height:230px;border-radius:2px}}
.about{overflow:hidden} .about-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:64px;align-items:center} /* Portrait circulaire, sans décor construit autour. Le cadre doré et le
   cercle en fil qui l'entouraient dessinaient plus que la photo. */
.portrait-composition{position:relative;display:flex;justify-content:center;align-items:center;padding:8px 0} .portrait-composition .main{position:relative;width:min(100%,258px);aspect-ratio:4/5;height:auto;overflow:hidden;
  box-shadow:0 22px 52px rgba(42,33,19,.13),0 4px 12px rgba(42,33,19,.05);border-radius:var(--forme-douce)}
.portrait-composition .main img{width:100%;height:100%;object-fit:cover;object-position:center 20%} .portrait-composition .detail{display:none}   .about-copy h2{font:400 clamp(32px,3vw,44px)/1.1 var(--serif);letter-spacing:-.024em;margin:14px 0 22px} .big-quote{font:italic 22px/1.44 var(--serif);padding-left:22px;border-left:1px solid var(--gold);color:#4d4943;margin:24px 0} .credentials{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:26px} .credential{border-top:1px solid var(--line);padding-top:14px} .credential strong{display:block;font:500 15px var(--serif)} .credential span{font-size:11.5px;color:#736b61}
.about-cta{display:inline-block;margin-top:30px}
.reviews{padding:74px 0;background:var(--off-white);color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .reviews:before{content:"";position:absolute;width:640px;height:640px;border:1px solid rgba(177,138,68,.16);border-radius:50%;right:-290px;top:-250px} .review-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:40px;position:relative;z-index:2} .reviews .eyebrow{color:#876527} .reviews .kicker{color:var(--ink);max-width:760px} .score{display:flex;gap:18px;align-items:center} .score strong{font:400 42px var(--serif)} .stars{color:#8a6a26;letter-spacing:.13em} /* --- Avis Google : rail défilant en continu, mis en pause au survol ------ */








.review-top{display:flex;align-items:center;gap:12px;margin-bottom:16px} .review-avatar{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:rgba(216,183,105,.14);color:#e3c583;font:400 16px var(--serif)} .review-who strong{display:block;font:500 14.5px var(--sans);color:#f6f1e8} .review-who span{display:block;margin-top:2px;font-size:11.5px;letter-spacing:.04em;color:#9a9389} .review blockquote{margin:14px 0 0;font:italic 20px/1.42 var(--serif);color:#f6f1e8} .review cite{font-style:normal;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#d8d2c8}
.practical-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:56px;margin-top:44px;padding-top:38px;border-top:1px solid var(--line)}
.practical-label{display:block;font:600 11.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-text);margin-bottom:14px}
.practical-value{display:block;font:400 21px/1.4 var(--serif);margin-bottom:10px}
.practical-col p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.practical-list{list-style:none;margin:0;padding:0}
.practical-list li{padding:11px 0;border-top:1px solid var(--line)}
.practical-list li:first-child{border-top:0;padding-top:0}
.practical-list strong{display:block;font-size:14.5px;margin-bottom:2px}
.practical-list span{display:block;font-size:12.5px;color:var(--muted)}
.practical-col.accent{padding-left:32px;border-left:1px solid var(--gold-soft)}
.practical-col.accent .btn{margin-top:20px;width:100%}
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .article{border-top:1px solid var(--gold-soft);padding-top:16px;transition:.28s var(--ease)} .article-media{height:200px;overflow:hidden;margin-bottom:18px;border-radius:0} .article-media img{transition:.8s var(--ease)} .article:hover img{transform:scale(1.025)} .article h3{font:500 21px/1.18 var(--serif);margin:10px 0 9px} .article p{color:#706a62;font-size:14px}
.final{padding:62px 0;border-top:1px solid var(--line);position:relative;overflow:hidden} .final:before{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(177,138,68,.16);border-radius:50%;left:-190px;bottom:-250px} .final-grid{display:flex;justify-content:space-between;align-items:center;gap:48px;position:relative;z-index:2} .final h2{font:400 clamp(27px,2.6vw,37px)/1.12 var(--serif);max-width:640px;margin:0}
.footer{border-top:1px solid var(--line);padding:52px 0 26px;font-size:14px} .footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:46px} .footer h3{font:500 16px var(--serif);margin:0 0 14px} .footer a{display:block;padding:4px 0;color:#6f6961} .footer-bottom{display:flex;justify-content:space-between;gap:24px;margin-top:46px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:#736b61}


/* Étiquettes thématiques : présentes dans le balisage, sans style dans la maquette. */
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper);font-size:13px;color:var(--muted);white-space:nowrap}
@media(max-width:1080px){:root{--shell:min(100% - 38px,900px)} .navlinks,.cta,.header-cta{display:none} .menu{display:flex} .hero-grid,.intro-grid,.about-grid{grid-template-columns:1fr} .hero{padding-top:54px} .hero-art{height:452px;margin-top:16px} .hero-main{width:76%;max-width:392px;height:424px} .hero-outline{width:76%;max-width:392px;height:424px;right:13px;top:-13px} .hero-portrait{width:136px;height:180px;bottom:12px;right:calc(min(76%,392px) - 44px)} .intro-sticky{position:static} .practical-cols{grid-template-columns:1fr 1fr;gap:32px} .practical-col.accent{grid-column:span 2;border-left:0;border-top:1px solid var(--gold-soft);padding-left:0;padding-top:26px} .approach-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px} .approach-featured{grid-template-columns:.5fr .5fr;gap:26px} .approach-featured .approach-media{height:212px;max-width:640px;border-radius:2px} .approach-featured .approach-copy{margin-top:0} .approach-media{height:200px;border-radius:2px} .approach-copy{margin-top:18px} .review-head{align-items:flex-start} .reviews-row{grid-template-columns:1fr} .resources{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .article-media{height:230px;border-radius:0} .footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){:root{--shell:calc(100% - 28px)} .topline{display:none} .subhero-actions>.btn,.hero-actions>.btn,.actions>.btn{flex:1 1 auto} .nav{height:76px;gap:14px} /* Sous 650 px la marque cède la place : le bouton ☰ garde ses 44 px. */ .brand{min-width:0;flex:0 1 auto;overflow:hidden} .menu{flex:0 0 44px} .brand strong{font-size:20px} .brand-line{width:132px} .hero{padding:34px 0 48px;min-height:auto} .hero h1{font-size:clamp(31px,8.2vw,38px);text-wrap:balance} .hero-sub{font-size:24px} .lead{font-size:17px} /* Mobile : composition repensée, pas une réduction de celle du bureau.
   La grande photo prend toute la largeur, la forme s'assagit, et le petit
   portrait disparaît — à cette taille il n'ajoutait que du vide. */
.hero:before{display:none} .hero-art{height:auto;margin-top:10px;display:block} .hero-main{position:relative;width:100%;max-width:none;height:auto;aspect-ratio:5/4;right:auto;border-radius:6% 26% 8% 22% / 6% 20% 7% 18%} .hero-outline{display:none} .hero-portrait{display:none} .hero-detail{display:none} .hero-mark,.hero-caption{display:none} .signature-strip{height:66px} .section{padding:46px 0} .reviews{padding:46px 0} .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:38px} .kicker{font-size:clamp(26px,6.6vw,31px)} .problem{min-height:68px;padding:12px 0} .problem h3{font-size:19px}  .approach-stage{grid-template-columns:1fr;gap:0} .approach-featured{padding-bottom:22px;margin-bottom:4px} .approach-featured .approach-media{height:176px;border-radius:2px} .approach-copy{margin-top:14px} .approach-copy h3{font-size:21px} .approach:not(.approach-featured){display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)} .approach:not(.approach-featured) .approach-media{display:none;border-radius:2px} .approach:not(.approach-featured) .approach-copy{margin-top:0} .approach:not(.approach-featured) .approach-copy:before{display:none} .approach:not(.approach-featured) .approach-copy h3{font-size:18px;margin:3px 0 4px} .approach:not(.approach-featured) .approach-copy p{font-size:13px;line-height:1.5;margin-bottom:0} .approach:not(.approach-featured) .textlink{display:none} .portrait-composition{padding:0}.portrait-composition .main{width:min(100%,186px);border-radius:var(--forme-douce)}.portrait-composition .main img{object-position:center 18%} .portrait-composition .detail{height:190px;border-width:6px} .credentials{grid-template-columns:1fr;gap:0}.credentials > *{padding:11px 0} .review-head{display:block} .score{margin-top:28px} .practical-cols{grid-template-columns:1fr;gap:28px} .practical-col.accent{grid-column:auto;border-top:1px solid var(--gold-soft);padding-top:24px} .article-grid,.resources{grid-template-columns:minmax(0,1fr);gap:20px} .article-media{height:126px;margin-bottom:12px;border-radius:0}.article{padding-top:13px}.article h3{font-size:19px;margin:8px 0 6px} .final-grid{display:block} .final h2{margin-bottom:28px} .footer-grid{grid-template-columns:1fr 1fr;gap:24px 20px}@media(max-width:380px){.footer-grid{grid-template-columns:1fr;gap:22px}}.footer-grid>*:first-child{grid-column:1/-1} .footer-bottom{display:block} .footer-bottom span{display:block;margin-top:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* --- Multipage editorial system --- */
body.subpage{background:#fff}
.subhero{padding:54px 0 60px;overflow:hidden;border-bottom:1px solid var(--line)}
.subhero-grid{display:grid;grid-template-columns:var(--subhero-cols);gap:78px;align-items:center}
.subhero-copy{padding:22px 0 20px;position:relative;z-index:2}
.subhero-copy .page-label{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#876527;font-weight:650}
.subhero-copy .page-label:before{content:"";width:34px;height:1px;background:var(--gold)}
.subhero h1{font:400 clamp(31px,3vw,44px)/1.1 var(--serif);letter-spacing:-.024em;margin:18px 0 19px;max-width:660px}
.subhero .lead{font:400 18px/1.72 var(--serif);color:#5f5a52;max-width:660px}
.subhero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.subhero-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:#6b655d}
.subhero-rating{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:14px;color:var(--muted)}
.subhero-rating strong{color:var(--ink);font-weight:600;font-size:15px}
.subhero-proof span{display:flex;gap:8px;align-items:center}.subhero-proof i{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.subhero-art{position:relative;min-height:390px}
.subhero-art .main-photo{position:absolute;right:0;top:0;width:80%;height:344px;overflow:hidden;box-shadow:var(--photo-ombre,0 30px 74px rgba(42,34,20,.10));border-radius:var(--forme-geste)}
.subhero-art .main-photo:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.52);pointer-events:none}
.subhero-art .detail-photo{position:absolute;left:0;bottom:10px;width:34%;height:245px;border:8px solid #fff;overflow:hidden;box-shadow:0 18px 44px rgba(42,34,20,.10);border-radius:2px}
.subhero-art .gold-line{position:absolute;left:17%;top:34px;width:1px;height:130px;background:linear-gradient(var(--gold),transparent)}
.subhero-art .caption{position:absolute;right:3%;bottom:6px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#736b61}
.page-band{border-bottom:1px solid var(--line);background:#fff;padding:18px 0}
.page-band .shell{display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#7a7369}
.page-band nav{display:flex;gap:20px;flex-wrap:wrap}.page-band a:hover{color:#8d713f}
.page-section{padding:72px 0}
.page-section.soft{background:var(--soft)}
.content-frame{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:56px;align-items:start;max-width:1060px;margin:0 auto}
.editorial-main{min-width:0}
/* Ressources et Témoignages n'ont pas de colonne latérale : le panneau
   « En pratique » n'y disait rien et tassait les cartes sur 60 % de la largeur. */
.content-frame.full{grid-template-columns:minmax(0,1fr);max-width:none}
.content-frame.full .editorial-main > .copy,
.content-frame.full .editorial-main > section{padding-bottom:38px;margin-bottom:38px}

.editorial-main > .copy,.editorial-main > section{padding:0 0 44px;margin:0 0 44px;border-bottom:1px solid var(--line)}
.editorial-main > *:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.editorial-main h2{font:400 clamp(26px,2.4vw,35px)/1.12 var(--serif);letter-spacing:-.018em;margin:0 0 16px}
.editorial-main h3{font:500 21px/1.2 var(--serif);margin:24px 0 10px}
.editorial-main h4{font:500 17px/1.22 var(--serif);margin:20px 0 8px}
.editorial-main p,.editorial-main li{color:#666057;font-size:15.5px;line-height:1.72}
.editorial-main p{max-width:760px}
.editorial-main ul,.editorial-main ol{padding-left:20px}
.editorial-main p a:not(.btn),.editorial-main li a:not(.btn),.editorial-main dd a:not(.btn),.editorial-main blockquote a:not(.btn){color:#826528;text-decoration:underline;text-decoration-color:#d9c79f;text-underline-offset:4px}
.editorial-main blockquote,.original-voice{font:italic 20px/1.5 var(--serif);color:#4c4842;border-left:1px solid var(--gold);padding:2px 0 2px 22px;margin:26px 0}
.editorial-main .module-grid,.editorial-main .cards,.editorial-main .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px;margin-top:22px}
.editorial-main .module,.editorial-main .card{border:0;border-top:1px solid var(--gold-soft);padding:15px 0 0;background:none;border-radius:0;box-shadow:none} .editorial-main .module span,.editorial-main .card span{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:#876527} .editorial-main .module h3,.editorial-main .card h3{font-size:18px;margin:6px 0 7px} .editorial-main .module p,.editorial-main .card p{font-size:14px;line-height:1.6;margin-bottom:10px}
.editorial-main .module h3,.editorial-main .card h3{margin-top:0}
.editorial-main details{border-top:1px solid var(--line);padding:18px 0}
.editorial-main details:last-child{border-bottom:1px solid var(--line)}
.editorial-main summary{cursor:pointer;list-style:none;font:500 20px/1.25 var(--serif);padding-right:34px;position:relative}
.editorial-main summary::-webkit-details-marker{display:none}
.editorial-main summary:after{content:"+";position:absolute;right:0;top:0;color:#9c7a3f;font-family:var(--sans);font-size:20px;font-weight:300}
.editorial-main details[open] summary:after{content:"−"}
.editorial-main details p{padding-top:12px;margin-bottom:0}
.page-sidebar{position:sticky;top:120px;border-top:1px solid var(--gold);padding-top:20px}
.practical-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:36px 0 0;padding:18px 24px;border-top:1px solid var(--gold);background:var(--soft);border-radius:3px}
.practical-bar>span{font-size:13px;color:var(--muted)}
.practical-bar strong{color:var(--ink);font-weight:600}
.practical-bar .btn{margin-left:auto;min-height:44px}
@media(max-width:650px){.practical-bar{flex-direction:column;align-items:flex-start;gap:10px;margin-top:36px;padding:20px 22px}.practical-bar .btn{margin-left:0;width:100%}}
.page-sidebar .side-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.15em;color:#876527;margin-bottom:14px}
.page-sidebar h3{font:500 20px/1.2 var(--serif);margin:0 0 12px}
.page-sidebar p,.page-sidebar li{font-size:13.5px;line-height:1.65;color:#716b62}
.page-sidebar ul{list-style:none;padding:0;margin:18px 0}.page-sidebar li{padding:11px 0;border-top:1px solid var(--line)}
.page-sidebar .btn{margin-top:12px;width:100%}
.editorial-quote{margin:56px 0 0;padding:46px max(30px,6vw) 50px;background:#fff;color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.editorial-quote:before{content:"";position:absolute;left:50%;top:0;width:46px;height:1px;background:var(--gold);transform:translateX(-50%)}
.editorial-quote blockquote{max-width:820px;margin:auto;font:italic clamp(20px,2vw,28px)/1.46 var(--serif);color:#3b362f;text-align:center}
.page-next{padding:50px 0;border-top:1px solid var(--line)}
.page-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.next-card{border:1px solid var(--line);padding:22px 26px;transition:.25s var(--ease);background:#fff;border-radius:var(--forme-douce)}.next-card:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(45,36,20,.06)}
.next-card span{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:#876527}.next-card strong{display:block;font:500 20px/1.18 var(--serif);margin-top:5px}

/* ── Quatre compositions distinctes pour les quatre pages Approches ──
   Elles portaient toutes le même module « 3 cartes » : même forme pour un
   déroulé de séance, un protocole en plusieurs séances et trois registres
   de travail. Chaque page prend maintenant la forme de son contenu. */

/* Hypnose — une chronologie à l'intérieur d'un même rendez-vous */
.seq{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative}
.seq:before{content:"";position:absolute;left:14px;right:14px;top:13px;height:1px;background:linear-gradient(90deg,var(--gold-soft),var(--gold),var(--gold-soft))}
.seq li{position:relative;padding:0 24px 0 0}
.seq li:last-child{padding-right:0}
.seq-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--gold);
  color:#876527;font:500 13px/1 var(--sans);position:relative;z-index:1}
.seq h3{font:500 18px/1.25 var(--serif);margin:16px 0 7px}
.seq p{font-size:14.5px;line-height:1.62;color:#6b655c;margin:0}

/* RITMO® — un protocole qui peut s'étaler sur plusieurs séances */
.phases{margin-top:22px;border-top:1px solid var(--line)}
.phase{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.phase-n{font:400 21px/1.25 var(--serif);color:var(--gold-text);letter-spacing:.02em}
.phase h3{font:500 18px/1.25 var(--serif);margin:0 0 6px}
.phase p{font-size:14.5px;line-height:1.62;color:#6b655c;margin:0}

/* Somatothérapie — trois registres de travail, pas une chronologie */
.registers{margin:22px 0 0;display:grid;gap:0}
.registers > div{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;padding:15px 0;border-top:1px solid var(--line);align-items:baseline}
.registers > div:last-child{border-bottom:1px solid var(--line)}
.registers dt{font:500 17px/1.3 var(--serif);color:var(--ink)}
.registers dd{margin:0;font-size:14.5px;line-height:1.62;color:#6b655c}

/* Réflexologie — la page n'avait aucun module : ses repères deviennent une grille */
.observations{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.observations > div{background:#fff;padding:18px 20px}
.observations strong{display:block;font:500 15.5px/1.3 var(--serif);margin-bottom:5px;color:var(--ink)}
.observations strong:before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold);vertical-align:middle;margin-right:9px}
.observations span{font-size:14px;line-height:1.6;color:#6b655c}

@media(max-width:760px){
  .seq{grid-template-columns:1fr;gap:22px}
  .seq:before{left:13px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--gold-soft),var(--gold),var(--gold-soft))}
  .seq li{padding:0 0 0 0}
  .phase{grid-template-columns:46px minmax(0,1fr);gap:16px}
  .registers > div{grid-template-columns:1fr;gap:5px}
  .observations{grid-template-columns:1fr}
}


/* Témoignages — trois phrases déjà publiées, remises en avant : la page ne
   doit pas se réduire à un carrousel de cartes toutes identiques. */
.pullquotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:0 0 40px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.pullquotes blockquote{margin:0;border-left:1px solid var(--gold);padding-left:20px}
.pullquotes blockquote{font:italic 17px/1.5 var(--serif);color:#443f39}
.pullquotes cite{display:block;margin-top:11px;font:400 11.5px/1 var(--sans);font-style:normal;
  text-transform:uppercase;letter-spacing:.14em;color:#876527}
@media(max-width:900px){.pullquotes{grid-template-columns:1fr;gap:20px;margin-bottom:32px}}
/* Family variations */
body.family-approach .subhero-art .main-photo{width:72%;height:344px;border-radius:var(--forme-geste)}
body.family-approach .subhero-art .detail-photo{width:36%;height:196px;bottom:0;border-radius:2px}
body.family-situation{--subhero-cols:1.08fr .92fr}
body.family-situation .subhero-art .main-photo{width:86%;height:368px;border-radius:var(--forme-geste)}
body.family-situation .subhero-art .detail-photo{display:none;border-radius:2px}
body.family-situation .subhero-copy:after{content:"";position:absolute;width:210px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);left:0;bottom:0}
body.family-professional .subhero{background:var(--gold-pale);color:var(--ink);border-bottom:1px solid var(--gold-soft)}.family-professional .subhero .lead{color:var(--muted)}.family-professional .subhero-copy .page-label{color:var(--gold-text)}.family-professional .subhero-art .main-photo{box-shadow:var(--photo-ombre,0 30px 74px rgba(42,34,20,.10));border-radius:var(--forme-geste)}.family-professional .subhero-proof{border-color:var(--gold-soft);color:var(--muted)}
body.family-editorial{--subhero-cols:.76fr 1.24fr}.family-editorial .subhero-art{min-height:430px}.family-editorial .subhero-art .main-photo{height:386px;width:70%;border-radius:var(--forme-geste)}.family-editorial .subhero-art .detail-photo{width:30%;height:172px;border-radius:2px}
body.family-legal .subhero{padding:62px 0 54px}.family-legal .subhero-grid{display:block}.family-legal .subhero-art{display:none}.family-legal .subhero h1{max-width:900px}.family-legal .content-frame{grid-template-columns:1fr}.family-legal .page-sidebar{display:none}
body.family-standard .subhero-art{min-height:344px}
body.family-standard .subhero-art .main-photo{height:344px;border-radius:var(--forme-geste)}
body.family-situation .content-frame{grid-template-columns:minmax(0,1fr)}
/* Sans colonne latérale, la colonne de texte est recentrée : sinon elle reste
   collée à gauche et laisse un vide de 400 px à droite sur grand écran. */
body.family-situation .editorial-main{max-width:820px;margin:0 auto;width:100%}
body.family-situation .content-main{max-width:none}
body.family-situation .practical-bar{max-width:820px;margin-left:auto;margin-right:auto}
/* Cadrage : les sources en portrait (566x850) coupent les visages quand elles
   remplissent un cadre paysage. On remonte le point de cadrage. */
body.family-editorial .subhero-art .main-photo img,
body.family-situation .subhero-art .main-photo img{object-position:center 28%}
body.family-approach .subhero-art .main-photo img{object-position:center 38%}
.legal-table{max-width:100%;overflow-x:auto}.editorial-main table{width:100%;border-collapse:collapse;font-size:13px}.editorial-main th,.editorial-main td{border:1px solid var(--line);padding:12px;text-align:left;vertical-align:top}
@media(max-width:1050px){body.family-situation,body.family-editorial,body{--subhero-cols:1fr}.subhero{padding-top:50px}.subhero-art,.family-editorial .subhero-art,body.family-standard .subhero-art,body.family-professional .subhero-art{min-height:0;height:316px;margin-top:16px}.family-editorial .subhero-art .main-photo img,.family-situation .subhero-art .main-photo img{object-position:center 38%}.subhero-art .main-photo,.family-editorial .subhero-art .main-photo,body.family-situation .subhero-art .main-photo,body.family-approach .subhero-art .main-photo,body.family-standard .subhero-art .main-photo,body.family-professional .subhero-art .main-photo{width:100%;max-width:552px;height:316px;left:50%;right:auto;transform:translateX(-50%);border-radius:var(--forme-geste)}.subhero-art .detail-photo{width:34%;height:150px;bottom:-18px;left:12px;border-radius:2px}.content-frame{grid-template-columns:1fr;gap:46px}.page-sidebar{position:static}.editorial-main .module-grid,.editorial-main .cards,.editorial-main .grid{grid-template-columns:1fr}.page-next-grid{grid-template-columns:1fr}.page-band .shell{display:block}.page-band nav{margin-top:9px}}

/* Entre 901 et 1050 px il reste largement la place pour un héros sur deux
   colonnes : l'empiler dès 1050 px allongeait la page d'un écran entier
   sur les tablettes en paysage. La colonne latérale, elle, passe bien dessous. */
@media(min-width:901px) and (max-width:1050px){
  body{--subhero-cols:1.02fr .98fr}
  body.family-editorial{--subhero-cols:.8fr 1.2fr}
  body.family-situation{--subhero-cols:1.08fr .92fr}
  .subhero-art,.family-editorial .subhero-art{min-height:330px;height:auto;margin-top:0}
  .subhero-art .main-photo,.family-editorial .subhero-art .main-photo{
    width:88%;max-width:none;height:300px;left:auto;right:0;transform:none;border-radius:var(--forme-geste)}
  .subhero-art .detail-photo{width:40%;height:150px;bottom:-14px;left:0;border-radius:2px}
}
@media(max-width:620px){
/* Tableau des bases légales : cartes sur petit écran, zéro débordement. */
.legal-table-wrap{overflow:visible;border:0}
.legal-table{display:block;min-width:0;width:100%}
.legal-table thead{display:none}
.legal-table tbody,.legal-table tr,.legal-table td{display:block;width:100%}
.legal-table tr{border:1px solid var(--line);border-radius:9px;margin-bottom:12px;padding:6px 0}
.legal-table td{border:0;padding:10px 14px;min-width:0}
.legal-table td+td{border-top:1px solid var(--line)}
.legal-table td::before{content:attr(data-label);display:block;margin-bottom:4px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-text)}
:root{--header-h:77px}
.subhero,body.family-legal .subhero{padding:32px 0 36px}.subhero h1{font-size:clamp(32px,8.6vw,40px);line-height:1.08;text-wrap:balance}.subhero .lead{font-size:17px}.subhero-art,.family-editorial .subhero-art,body.family-standard .subhero-art,body.family-professional .subhero-art{min-height:0;height:248px}.subhero-art .main-photo,.family-editorial .subhero-art .main-photo,body.family-situation .subhero-art .main-photo,body.family-approach .subhero-art .main-photo,body.family-standard .subhero-art .main-photo,body.family-professional .subhero-art .main-photo{width:100%;max-width:none;height:248px;right:auto;left:0;transform:none;border-radius:var(--forme-geste)}.subhero-art .detail-photo{display:none;border-radius:2px}.subhero-art .gold-line{display:none}.subhero-art .caption{display:none}.page-section{padding:46px 0}.editorial-main > .copy,.editorial-main > section{padding-bottom:34px;margin-bottom:34px}.editorial-main h2{font-size:26px}.editorial-main h3{font-size:19px}.content-main h2{font-size:23px}.content-main h3{font-size:18px}.page-band{display:none}.editorial-quote{margin-top:32px;padding:30px 20px 34px}.editorial-quote blockquote{font-size:20px}.footer a{padding:10px 0}.textlink{padding:9px 0 10px}.legal-toc a{display:inline-block}.problem{min-height:82px}}


/* ==========================================================================
   COMPOSANTS — pièces référencées par les gabarits et absentes de la maquette.
   Même langage : blanc franc, filets fins, sérif éditorial, or en accent,
   rayons de 9 px, aucune pilule.
   ========================================================================== */

/* ------------------------------ 1. MEGA-MENU ---------------------------- */
.mega-main,.mega-side{min-width:0}
/* Le lien d'ensemble devient une bande pleine largeur au pied du panneau :
   il tient sur une ligne et ne pend plus sous une seule colonne. */
.mega .textlink{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:18px -32px 0;
  padding:15px 32px;border-top:1px solid var(--line);background:var(--off-white);
  border-radius:0 0 6px 6px;font-size:11.5px;white-space:nowrap}
.mega .textlink:hover{transform:none;background:var(--gold-pale)}
.mega-side{padding-left:0;border-left:1px solid var(--line);padding-left:32px}

/* ------------------------- 2. CONTENU ÉDITORIAL ------------------------- */
.content-main{min-width:0;max-width:74ch}
.content-main > section + section,
.content-main > .copy + .copy{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.h2{font:400 clamp(28px,3vw,40px)/1.14 var(--serif);letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance}
.content-main h2{font:400 clamp(23px,2.1vw,29px)/1.18 var(--serif);letter-spacing:-.012em;margin:0 0 14px}
.content-main h3{font:400 19px/1.28 var(--serif);margin:26px 0 9px}
.content-main p{margin:0 0 16px;color:#4a463f}
.content-main ul,.content-main ol{margin:0 0 18px;padding-left:1.15em}
.content-main li{margin-bottom:7px;color:#4a463f}

/* Héros secondaires écrits dans l'ancienne grammaire : même rendu que .subhero */
.page-hero{padding:clamp(46px,5.4vw,80px) 0 clamp(40px,4.6vw,66px)}
.legal-hero{border-bottom:1px solid var(--line)}
.hero-copy{min-width:0}
.hero-copy > * + *{margin-top:16px}
.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.family-standard .subhero-art{min-height:0}

/* ------------------------------ 3. CARTES ------------------------------- */
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mini-card{padding:26px;border:1px solid var(--line);background:var(--paper);
  transition:border-color .28s var(--ease);border-radius:0}
.mini-card:hover{border-color:var(--gold-soft)}
.mini-card h3{font:400 21px/1.25 var(--serif);margin:0 0 8px}
.mini-card p{margin:0;font-size:15px;color:var(--muted)}
.callout{padding:24px 26px;border-left:2px solid var(--gold);background:var(--soft);
  border-radius:0 9px 9px 0;margin:26px 0}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:0;font-size:15px;color:#4a463f}
.wide-note{padding:26px 28px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.note{display:block;margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.keyline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:26px}
.keyline > div{padding:16px 18px 16px 0}
.keyline span{display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-text)}
.keyline strong{display:block;margin-top:5px;font-size:14px;font-weight:600}

/* ------------------------------- 4. ÉTAPES ------------------------------ */
/* Le nombre d'étapes varie d'une page à l'autre. En grille, la cinquième carte
   tombait seule sur sa ligne. En flex, les cartes de la dernière ligne s'étirent
   pour la remplir ; et à cinq on passe à trois par ligne, ce qui donne 3 + 2
   plutôt que 4 + 1. Sans `:has()`, on retombe sur quatre par ligne : le
   comportement d'avant, jamais pire. */
.steps{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px}
.steps > *{flex:1 1 calc(25% - 12px)}
.steps:has(> :nth-child(5):last-child) > *,
.steps:has(> :nth-child(3):last-child) > *{flex:1 1 calc(33.333% - 11px)}
.step{padding:24px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}
.step-num{display:block;font:400 14px/1 var(--serif);letter-spacing:.08em;color:var(--gold-text);margin-bottom:16px}
.step h3{font:400 20px/1.25 var(--serif);margin:0 0 7px}
.step p{margin:0;font-size:14.5px;color:var(--muted)}

/* --- Parcours chronologique : timeline verticale, sans carte ------------- */
.timeline{position:relative;margin-top:28px;padding-left:28px;border-left:1px solid var(--line)}
.timeline-item{position:relative;padding-bottom:30px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item:before{content:"";position:absolute;left:-33px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.timeline-body{min-width:0}
.timeline-domain{display:block;font:600 11.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.timeline-item h3{font:400 20px/1.25 var(--serif);margin:0 0 6px}
.timeline-item p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* -------------------------------- 5. FAQ -------------------------------- */
.faq-list{display:grid;gap:10px;margin-top:22px}
.faq-list details{border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:0 22px;
  transition:border-color .28s var(--ease)}
.faq-list details[open]{border-color:var(--gold-soft)}
.faq-list summary{list-style:none;cursor:pointer;position:relative;padding:18px 40px 18px 0;
  font:400 18px/1.35 var(--serif)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:4px;top:25px;width:8px;height:8px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .28s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(-135deg);top:29px}
.faq-list details p{margin:0 0 20px;font-size:15px;color:var(--muted)}

/* ----------------------------- 6. FORMULAIRE ---------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b6459}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid #d9d0bf;border-radius:9px;background:var(--paper);
  font:400 16px/1.5 var(--sans);color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(177,138,68,.13)}
.consent-field{margin-top:2px}
label.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400;
  transition:border-color .2s var(--ease)}
label.consent:hover,label.consent:focus-within{border-color:var(--gold)}
label.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold);cursor:pointer}
label.consent span{font-size:14px;line-height:1.55;color:var(--muted)}
label.consent a{color:var(--gold-text);border-bottom:1px solid var(--gold-soft)}

/* ---------------------------- 7. AVIS GOOGLE ---------------------------- */
.g-stars{color:var(--gold-text);letter-spacing:.14em;font-size:14px}
.google-review-card{padding:26px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  transition:border-color .28s var(--ease)}
.google-review-card:hover{border-color:var(--gold-soft)}
.google-review-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.google-review-person{display:flex;align-items:center;gap:12px;min-width:0}
.google-review-person strong{display:block;font-size:14.5px;font-weight:600}
.google-review-person span{display:block;font-size:12.5px;color:var(--muted)}
.google-review-avatar{width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#e8f0fe;color:#1a73e8;font:600 16px/1 var(--sans)}
.google-review-source{margin-left:auto;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.google-review-card blockquote{margin:0;font:400 18px/1.45 var(--serif);color:var(--ink)}


/* Le point reste petit ; c'est la zone touchable qui grandit. Un point de
   7 px se rate au doigt, mais un gros point alourdirait la page. */





/* ----------------------------- 8. PARTENAIRES --------------------------- */
.partner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px;align-items:stretch} .partner{display:flex;flex-direction:column} .partner p{flex:1 1 auto}
.partner{padding:26px;border:1px solid var(--line);border-radius:9px;background:var(--paper);
  transition:border-color .28s var(--ease)}
.partner:hover{border-color:var(--gold-soft)}
.partner h3{font:400 20px/1.25 var(--serif);margin:0 0 8px}
.partner p{margin:0;font-size:14.5px;color:var(--muted)}

/* ------------------------------ 9. ARTICLES ----------------------------- */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.article-body{display:flex;flex-direction:column;gap:8px;padding:22px 2px 0}
.article-body h3{font:400 20px/1.28 var(--serif);margin:0}
.article-body p{margin:0;font-size:14.5px;color:var(--muted)}
.article-body .textlink{margin-top:auto;padding-top:8px}

/* ------------------------------- 10. LÉGAL ----------------------------- */
.legal-section{padding:clamp(44px,5vw,72px) 0}
.legal-wrap{display:grid;grid-template-columns:224px minmax(0,1fr);gap:clamp(32px,4.4vw,68px);align-items:start}
.legal-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;
  padding-left:18px;border-left:1px solid var(--line)}
.legal-toc .eyebrow{margin-bottom:10px}
.legal-toc a{font-size:13px;line-height:1.4;padding:6px 0;color:var(--muted);
  transition:color .2s var(--ease)}
.legal-toc a:hover{color:var(--gold-text)}
.legal-main{max-width:72ch;min-width:0}
.legal-main > section + section{margin-top:52px;padding-top:52px;border-top:1px solid var(--line)}
.legal-main h2{font:400 clamp(24px,2.5vw,32px)/1.18 var(--serif);margin:0 0 18px}
/* L'en-tête est collant : sans cette marge, un lien d'ancrage amène le titre
   juste dessous et il reste caché. La hauteur est déclarée en haut de feuille. */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
/* Une section masquée depuis l'éditeur doit vraiment disparaître : la
   déclaration `hidden` du navigateur est battue par toute règle d'auteur
   posant un display. */
section[hidden],div[hidden],article[hidden]{display:none}
.legal-main h3{font:400 19px/1.3 var(--serif);margin:28px 0 10px}
.legal-main p,.legal-main li{font-size:15px;line-height:1.72;color:#4a463f}
.legal-main p{margin:0 0 14px}
.legal-main ul{margin:0 0 16px;padding-left:1.15em}
.legal-updated{display:inline-block;margin-top:22px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.legal-dl{display:grid;border-top:1px solid var(--line);margin-top:20px}
.legal-dl > div{display:grid;grid-template-columns:minmax(140px,.5fr) minmax(0,1fr);
  border-bottom:1px solid var(--line)}
.legal-dl dt{padding:13px 16px 13px 0;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-text)}
.legal-dl dd{margin:0;padding:13px 0;font-size:14.5px;color:#4a463f}

/* ---------------------------- 11. PLAN DU SITE -------------------------- */
.sitemap-section{padding:clamp(44px,5vw,72px) 0}
.sitemap-wrap{display:grid;gap:0}
.sitemap-group + .sitemap-group{margin-top:52px;padding-top:52px;border-top:1px solid var(--line)}
.sitemap-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:22px}
.sitemap-group-head .h2{min-width:0;overflow-wrap:anywhere}
.sitemap-num{font:400 14px/1 var(--serif);letter-spacing:.08em;color:var(--gold-text)}
.sitemap-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:0 26px}
.sitemap-list li{border-top:1px solid var(--line)}
.sitemap-list a{display:block;padding:15px 0;transition:padding .01s}
.sitemap-list strong{display:block;font:400 18px/1.3 var(--serif);transition:color .2s var(--ease)}
.sitemap-list a:hover strong{color:var(--gold-text)}
.sitemap-list span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* -------------------------------- 12. 404 ------------------------------- */
.notfound-hero{border-bottom:1px solid var(--line)}
.notfound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:0 26px;margin-top:26px}
.notfound-card{display:block;padding:16px 0;border-top:1px solid var(--line)}
.notfound-card h3{font:400 19px/1.3 var(--serif);margin:0 0 5px;transition:color .2s var(--ease)}
.notfound-card:hover h3{color:var(--gold-text)}
.notfound-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* --------------------------- 13. RESPONSIVE ----------------------------- */
@media(max-width:1050px){
  .legal-wrap{grid-template-columns:minmax(0,1fr)}
  /* En rangée, « Sommaire » était un élément de la rangée : le premier lien
     venait se coller à côté du titre. Il prend maintenant sa propre ligne. */
  .legal-toc .eyebrow{flex:1 1 100%;margin-bottom:2px}
  .legal-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 20px;
    border-left:0;border-top:1px solid var(--line);padding:18px 0 0}
  /* En rangée, ces liens sont des cibles tactiles : 44 px de haut, obtenus par
     le rembourrage. Passer en display:flex les réalignerait tous. */
  .legal-toc a{padding:13px 0}
  .cards-3,.article-grid,.partner-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps > *,.steps:has(> :nth-child(5):last-child) > *{flex:1 1 calc(50% - 8px)}
  .keyline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .cards-3,.article-grid,.partner-grid,.steps,.form-grid,
  .notfound-grid,.sitemap-list,.keyline{grid-template-columns:minmax(0,1fr)}
  .field.full{grid-column:auto}
  .legal-dl > div{grid-template-columns:minmax(0,1fr)}
  .legal-dl dd{padding-top:0;padding-bottom:13px}
  .content-main > section + section,.content-main > .copy + .copy{margin-top:40px;padding-top:40px}
}

/* --------------------- 14. CARROUSEL D'AVIS ----------------------------- */







/* Quinze points de 24 px ne tiennent pas sur un téléphone. Le compteur dit la
   même chose en trois caractères ; le glissement du doigt fait le reste. */

@media(max-width:760px){}
@media(max-width:900px){}

/* ------------------- 15. PARALLAX (très léger, 1 image) ----------------- */
.parallax{will-change:transform}
@media(prefers-reduced-motion:reduce){.parallax{transform:none!important}}

/* ==========================================================================
   ANIMATIONS — sobres, hiérarchisées, jouées une seule fois.
   Chaque effet a une fonction. Rien ne tourne en boucle.
   Tout est neutralisé par prefers-reduced-motion.
   ========================================================================== */

/* Sans JavaScript, rien n'est masqué. */
.reveal,.mask-reveal{opacity:1}

/* --- Apparition de section : presque déjà là, seul un souffle bouge ------ */
.js .reveal{opacity:.9;transform:translateY(3px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* --- Révélation d'image par masque : variation de cadrage discrète ------- */
.js .mask-reveal{clip-path:inset(0 0 6% 0);opacity:.94;
  transition:clip-path .5s var(--ease),opacity .4s var(--ease)}
.js .mask-reveal.in{clip-path:inset(0 0 0 0);opacity:1}
/* Le découpage rectangulaire rognait l'ombre des formes arrondies et laissait
   un cadre visible derrière la photo. On le retire une fois l'animation finie. */
.js .mask-reveal.in{animation:mask-done 0s linear .55s forwards}
@keyframes mask-done{to{clip-path:none}}

/* --- Hero : à peine perceptible, jamais une attente ----------------------- */
.js .hero-seq > *{opacity:.92;transform:translateY(3px);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.js .hero-seq.in > *{opacity:1;transform:none}
.js .hero-seq.in > *:nth-child(2){transition-delay:30ms}
.js .hero-seq.in > *:nth-child(3){transition-delay:60ms}
.js .hero-seq.in > *:nth-child(4){transition-delay:90ms}
.js .hero-seq.in > *:nth-child(n+5){transition-delay:110ms}

/* --- Filet doré sous les titres de section : se trace à l'apparition ----- */
.section-head .eyebrow{position:relative}
.js .section-head .eyebrow::after{content:"";position:absolute;left:0;bottom:-7px;height:1px;
  width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease) .12s}
.js .section-head.in .eyebrow::after{transform:scaleX(1)}

/* --- Élévation très légère des cartes ----------------------------------- */
.mini-card,.partner,.step,.google-review-card,.card,.next-card{
  transition:border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease)}
.mini-card:hover,.partner:hover,.step:hover,.google-review-card:hover{
  transform:translateY(-2px);box-shadow:0 14px 34px rgba(43,35,22,.06)}

/* --- FAQ : ouverture animée --------------------------------------------- */
.faq-list details > *:not(summary){animation:faqIn .34s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .mask-reveal,.js .hero-seq > *{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .js .section-head .eyebrow::after{transform:scaleX(1)!important;transition:none!important}
  .mini-card:hover,.partner:hover,.step:hover,.google-review-card:hover{transform:none;box-shadow:none}
  .faq-list details > *:not(summary){animation:none}
}

/* Plancher typographique : aucun texte fonctionnel sous 11,5 px. */
.footer nav a,.footer-bottom span,.footer-legal a{font-size:12px}

.score span,.reviews-row span{font-size:12px}
.score-note{color:#736b61}

/* --------- Très petits écrans : rien ne dépasse à 320 px ---------------- */
@media(max-width:400px){
  .sitemap-list{grid-template-columns:minmax(0,1fr);gap:0}
  .sitemap-wrap,.sitemap-group,.sitemap-list,.sitemap-list li,.sitemap-list a{min-width:0;max-width:100%}
  .sitemap-list strong,.sitemap-list span{overflow-wrap:anywhere}
  .notfound-grid{grid-template-columns:minmax(0,1fr);gap:0}
  /* Éléments décoratifs du hero : contenus dans le cadre */
  .subhero-art{overflow:hidden}
  .subhero-art .gold-line{display:none}
  .subhero-art .detail-photo{right:8px;border-radius:2px}
  .content-main,.legal-main,.editorial-main{min-width:0;overflow-wrap:break-word}
}

/* La règle .footer a{display:block} l'emportait sur .brand{display:flex} :
   le nom et le sous-titre se retrouvaient sur la même ligne. */
.footer .brand{display:flex;flex-direction:column;padding:0}
.footer .brand strong,.footer .brand small{display:block;padding:0}
.footer .brand small{margin-top:2px}
/* Les liens de la ligne de bas de page restent en ligne : sinon les
   séparateurs « · » tombent seuls sur une ligne. */
.footer-bottom a{display:inline-block;padding:7px 0}
.footer-bottom a:hover{color:var(--gold-text)}

/* Un .shell imbriqué dans un autre .shell reprenait la largeur maximale du
   site (1280 px) à l'intérieur d'une colonne étroite, et débordait sous la
   colonne latérale. Un conteneur imbriqué occupe simplement sa place. */
.shell .shell{width:100%;max-width:100%;margin-inline:0}
/* Idem pour les sections de héros réutilisées à l'intérieur du contenu. */
.editorial-main .page-hero,.content-main .page-hero{padding-top:0}

/* ------- Barre d'administration WordPress (uniquement quand connectée) -------

   Elle est fixée en haut et pousse la page vers le bas. Sans décalage, notre
   en-tête collant glisse dessous et la marque se retrouve coupée.

   Une seule variable porte sa hauteur : 32 px en grand, 46 px en dessous de
   783 px, et zéro sous 600 px où WordPress la repasse en position absolue —
   elle défile alors avec la page et il n'y a plus rien à décaler.

   Le panneau mobile, lui, est positionné par rapport à l'en-tête (dont le
   backdrop-filter fait un bloc conteneur) : son « top » ne bouge pas, seule sa
   hauteur doit tenir compte de la barre.                                     */
:root{--wpbar:0px}
body.admin-bar{--wpbar:32px}
@media(max-width:782px){body.admin-bar{--wpbar:46px}}
@media(max-width:600px){body.admin-bar{--wpbar:0px}}
.header{top:var(--wpbar)}
.mobile-panel{height:calc(100vh - var(--header-h) - var(--wpbar));height:calc(100dvh - var(--header-h) - var(--wpbar))}

/* ---------------------- SURVOL : DEUX DIMENSIONS ---------------------------
   Toute la 3D a été retirée : plus d'inclinaison au curseur, plus de
   perspective, plus de rotateX / rotateY / translateZ, plus d'apparition en
   profondeur au défilement. Il reste un soulèvement et une ombre, en deux
   dimensions, coupés sous « réduire les animations ».                       */
.cta:hover,.btn.gold:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(120,92,36,.2)}
.btn.white:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(42,33,19,.09)}
@media(prefers-reduced-motion:reduce){
  .cta:hover,.btn.gold:hover,.btn.white:hover{transform:none}
}

/* ------------------------ BANDEAU ÉDITORIAL CENTRAL ------------------------
   Avant : photo pleine largeur, assombrie par un dégradé pour rendre lisible
   un texte blanc posé dessus. Le bloc débordait de la largeur éditoriale, la
   photo paraissait noire, et le contraste ne tenait que grâce au voile.
   Maintenant : le texte est à gauche sur fond clair, la photo à droite dans la
   même largeur que le reste de la page. Plus de voile, plus de texte sur
   image — le problème de contraste disparaît par construction.            */
.photo-bridge{background:var(--off-white);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:clamp(44px,5vw,74px) 0}
.bridge-grid{position:relative;display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(26px,3vw,46px);align-items:center}
.bridge-copy h2{font:400 clamp(28px,3.05vw,42px)/1.1 var(--serif);letter-spacing:-.024em;margin:15px 0 17px;color:var(--ink);max-width:15ch}
.bridge-copy p{font:400 17px/1.62 var(--serif);color:var(--muted);max-width:34ch;margin:0}
.bridge-media{grid-column:2;grid-row:1;position:relative;z-index:1;overflow:hidden;border-radius:var(--pont-forme);box-shadow:0 26px 60px rgba(42,33,19,.13),0 3px 10px rgba(42,33,19,.05)}
.bridge-media img{display:block;width:100%;height:100%;aspect-ratio:var(--pont-ratio);object-fit:cover;object-position:center 40%}
.bridge-media:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.34);border-radius:inherit;pointer-events:none}
@media(max-width:900px){
  .bridge-grid{grid-template-columns:1fr;gap:26px}
  .bridge-copy p{max-width:none}
  
}

/* --------------- CARTE VEDETTE DES APPROCHES, PETIT ÉCRAN ------------------
   Entre 381 et 1080 px elle restait sur deux colonnes : une vignette de
   180 px écrasée contre un paragraphe. Sous 760 px elle passe en une colonne,
   image pleine largeur au-dessus du texte.                                 */
@media(max-width:760px){
  .approach-featured{grid-template-columns:1fr;gap:18px}
  .approach-featured .approach-media{height:210px;max-width:none;border-radius:2px}
  .approach-featured .approach-copy{margin-top:0}
}
@media(max-width:380px){
  .approach-featured .approach-media{height:176px;border-radius:2px}
}

/* ============================ AVIS GOOGLE ==================================
   Le bloc doit se lire immédiatement comme du Google, sans que la couleur
   déborde ailleurs : jaune #FBBC04 pour les étoiles, bleu #1A73E8 pour les
   actions, gris #5F6368 pour le secondaire, cartes blanches. Ces valeurs ne
   servent nulle part ailleurs sur le site.

   Le logo n'est pas dessiné en CSS. Le faux « G » en conic-gradient a été
   retiré : Google demande d'utiliser ses ressources officielles sans les
   modifier. Le greffon insère l'image si le fichier officiel est déposé dans
   assets/img/, et n'affiche rien sinon — l'attribution reste textuelle.

   Les avis sont écrits dans les gabarits : ils ne viennent pas de l'API
   Google et ne se mettent pas à jour seuls. La phrase sous le carrousel le dit.
=========================================================================== */
.g-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 28px;margin-bottom:26px}
.g-identity{display:flex;flex-direction:column;gap:7px}
.g-brand{display:inline-flex;align-items:center;gap:8px}
.g-logo-img{display:block;width:auto;height:19px}
.g-brand-name{font:600 13px/1 var(--sans);letter-spacing:.02em;color:#202124}
.g-rating{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.g-rating strong{font:600 20px/1 var(--sans);color:#202124}
.g-stars{color:#fbbc04;letter-spacing:.06em;font-size:15px}
.g-count{font:400 13px/1 var(--sans);color:#5f6368}
.g-head-copy h2{margin:0}
.g-head:after{content:"";grid-column:1/-1;height:3px;border-radius:2px;opacity:.9;
  background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 0 50%,#fbbc04 0 75%,#34a853 0)}

.g-cta{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;
  border:1px solid #dadce0;border-radius:999px;background:#fff;
  font:600 13px/1 var(--sans);color:#1a73e8;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.g-cta:hover{background:#f6f9fe;border-color:#c6dafc;box-shadow:0 2px 8px rgba(26,115,232,.14)}
.g-ext{font-size:12px}

.g-card{background:#fff;border:1px solid #dadce0;border-radius:10px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:11px;box-shadow:0 1px 3px rgba(60,64,67,.14);min-width:0}
.g-card:hover{box-shadow:0 4px 12px rgba(60,64,67,.18);border-color:#c9ccd1}
.g-card-top{display:flex;align-items:center;gap:11px}
.g-avatar{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  background:#e8f0fe;color:#1a73e8;font:600 14px/1 var(--sans)}
.g-author{font:600 14px/1.2 var(--sans);color:#202124}
.g-card blockquote{margin:0;font:400 15px/1.55 var(--serif);color:#3c4043;flex:1 1 auto;min-width:0;overflow-wrap:break-word}



/* Réservé aux lecteurs d'écran : la note en toutes lettres, là où les étoiles
   ne sont qu'un ornement. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.g-source{margin:18px 0 0;font:400 12.5px/1.5 var(--sans);color:#5f6368;max-width:64ch}

@media(max-width:900px){
  .g-head{grid-template-columns:1fr;gap:14px}
  .g-cta{width:100%;justify-content:center}
  .g-head-copy h2{font-size:26px}
}

/* ── Avis Google : bandeau défilant ────────────────────────────────────────
   Le défilement reprend le principe d'avant : continu, sans commande à
   chaque carte. Il s'arrête au survol, au focus clavier, sous « réduire les
   animations », et sur demande via un bouton unique.
   La seconde moitié de la piste est un clone posé par le script : elle rend
   la boucle continue sans dupliquer les repères de l'éditeur. */
.g-marquee{position:relative;margin-top:30px;overflow:hidden;contain:paint;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
.g-track{display:flex;width:max-content;animation:g-defile var(--g-duree,68s) linear infinite}
.g-half{display:flex;gap:22px;padding-right:22px}
.g-card{flex:0 0 340px}
.g-marquee:hover .g-track,.g-marquee:focus-within .g-track{animation-play-state:paused}
@keyframes g-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.g-who{display:flex;flex-direction:column;min-width:0}
.g-origin{font-size:11.5px;color:#5f6368;letter-spacing:.01em}






/* Téléphone : le bandeau défile aussi. Il s'arrête au doigt posé dessus
   (`:active`), au focus clavier, et complètement sous « réduire les
   animations ». La piste reste rognée par son conteneur : la page ne défile
   donc jamais latéralement — c'est ce que vérifie le contrôle de débordement. */
@media(max-width:760px){
  .g-marquee{overflow:hidden;contain:paint}
  .g-marquee:active .g-track{animation-play-state:paused}
  .g-half{padding-right:22px}
  /* Pas de pourcentage ici : la piste n'a pas de largeur définie (elle défile),
     donc 82 % ne peut pas se résoudre et la carte gonfle à la taille de son
     texte. Une unité de fenêtre, elle, est toujours définie. */
  .g-card{flex:0 0 min(82vw,320px)}
}
@media(prefers-reduced-motion:reduce){
  .g-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .g-track{animation:none;width:auto}
  .g-half[aria-hidden="true"]{display:none}
  
}

/* ── Le pont d'images ─────────────────────────────────────────────────────
   Peu de texte, une grande photo : la bande se remplit en élargissant
   l'empan pour cette section seule (pas de débordement : on reste dans le
   flux, sans marge négative), et la photo reprend le geste sculpté du héros
   en miroir — grand arrondi en haut à gauche là où le héros l'a en haut à
   droite, pour que les deux compositions se répondent. */
.photo-bridge{--pont-forme:34% 9% 30% 11% / 27% 8% 24% 9%;--pont-ratio:16/9}
.photo-bridge > .shell{width:min(100% - 40px,1460px)}

/* Le filet vit dans la même cellule de grille que la figure : il est donc
   calé sur elle, quelle que soit la largeur. La figure rogne ses enfants
   pour découper la photo, le filet ne peut pas y vivre. */
.bridge-outline{grid-column:2;grid-row:1;align-self:center;justify-self:stretch;
  aspect-ratio:var(--pont-ratio);border:1px solid rgba(177,138,68,.42);
  border-radius:var(--pont-forme);transform:translate(15px,15px);
  z-index:0;pointer-events:none}
.bridge-copy{position:relative;z-index:2}
.bridge-copy p:after{content:"";display:block;width:52px;height:1px;
  background:var(--gold);margin-top:24px;opacity:.75}

@media(max-width:1080px){
  .photo-bridge{--pont-forme:22% 8% 20% 9% / 16% 7% 15% 8%;--pont-ratio:16/9}
  .photo-bridge > .shell{width:var(--shell)}
  .bridge-outline{display:none}
  .bridge-media{grid-column:1;grid-row:auto}
}
@media(max-width:650px){
  .photo-bridge{--pont-forme:14% 7% 13% 8% / 10% 6% 9% 6%}
  .bridge-copy p:after{margin-top:18px}
}

/* ── Page Contact : le formulaire est le contenu ───────────────────────────
   Il occupait la deuxième moitié de la page ; il fallait défiler un écran
   entier avant de pouvoir écrire. Il prend maintenant la place de la photo
   dans le haut de page, et la photo descend en bandeau après les horaires. */
.subhero-form{background:#fff;border:1px solid var(--line);border-radius:var(--forme-douce);
  padding:clamp(22px,2.4vw,32px);box-shadow:0 18px 44px rgba(42,34,20,.07)}
.subhero-form h2{font:400 clamp(21px,1.8vw,26px)/1.2 var(--serif);margin:0 0 8px;letter-spacing:-.02em}
.subhero-form > p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0 0 18px}
.subhero-form .form-grid{margin-top:0}
.contact-photo{display:block;margin:38px 0 0;overflow:hidden;
  box-shadow:var(--photo-ombre,0 30px 74px rgba(42,34,20,.10));border-radius:var(--forme-geste)}
.contact-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:1080px){
  .subhero-form{margin-top:22px}
  .contact-photo{margin-top:28px;border-radius:var(--forme-geste)}
}
@media(max-width:650px){
  .contact-photo{margin-top:22px;border-radius:var(--forme-geste)}
}

/* Sur téléphone, la page Contact empile : le formulaire se retrouvait derrière
   le bouton de réservation et la liste de repères. On le remonte juste après
   l'accroche. `display:contents` fait remonter les enfants de .subhero-copy au
   niveau du conteneur pour qu'ils puissent être ordonnés un par un ; .subhero-copy
   ne porte qu'un padding, rien qui se perde en route. Seule la page Contact
   possède un .subhero-form : la règle ne touche donc qu'elle, et sans `:has()`
   la page garde simplement l'ordre d'avant. */
@media(max-width:1080px){
  .subhero-grid:has(.subhero-form){display:flex;flex-direction:column;gap:0}
  .subhero-grid:has(.subhero-form) .subhero-copy{display:contents}
  .subhero-grid:has(.subhero-form) .subhero-copy .page-label{order:1}
  .subhero-grid:has(.subhero-form) .subhero-copy h1{order:2}
  .subhero-grid:has(.subhero-form) .subhero-copy .lead{order:3;margin-bottom:20px}
  .subhero-grid:has(.subhero-form) .subhero-form{order:4;margin-top:0}
  .subhero-grid:has(.subhero-form) .subhero-copy .subhero-actions{order:5;margin-top:26px}
  .subhero-grid:has(.subhero-form) .subhero-copy .subhero-proof{order:6}
}


/* Le titre de l'accueil réunit le nom et ce qu'il fait, pour que le H1 porte
   le service et le lieu. À l'écran, rien ne change : le sous-titre garde sa
   taille, sa couleur et son espacement d'avant. */
.hero-titre{display:block;margin:18px 0 9px}
.hero-titre > span:first-child{display:block;
  font:400 clamp(38px,3.6vw,54px)/1 var(--serif);letter-spacing:-.032em;color:var(--ink)}
.hero-titre .hero-sub{display:block;margin-bottom:24px}
@media(max-width:650px){
  .hero-titre > span:first-child{font-size:clamp(31px,8.2vw,38px);text-wrap:balance}
}

/* L'échelle de texte agit sur la taille de base ; tout le site étant écrit en
   clamp() et en rem, les proportions suivent sans qu'aucune règle ne bouge. */
html{font-size:calc(100% * var(--echelle,1))}

/* ── Traitements photographiques ──────────────────────────────────────────
   Chaque page intérieure présente sa photo autrement. On ne touche jamais à
   la forme de l'image — trois tentatives ont montré qu'un coin coupé se lit
   comme un défaut. On travaille ce qui l'entoure : un cadre posé à distance,
   un passe-partout, un filet, un socle, un trait.

   Tout passe par `outline`, `border` et `box-shadow`, qui ne sont pas rognés
   par l'`overflow:hidden` de la figure — contrairement à un pseudo-élément,
   qui le serait.

   L'ombre passe par le jeton `--photo-ombre` et non par une déclaration
   directe : les images de tête sont visées par des règles très spécifiques
   (`body.family-approach .subhero-art .main-photo`) qu'une classe simple ne
   peut pas surpasser. Un jeton se résout à l'usage, la spécificité du
   sélecteur ne compte plus. C'est le même remède que pour les formes. */

/* A — cadre posé à distance, comme un encadrement suspendu */
.photo-cadre{outline:1px solid var(--gold-soft);outline-offset:13px;
  --photo-ombre:0 22px 50px rgba(42,34,20,.10)}

/* B — passe-partout : la photo est montée sur un carton blanc */
.photo-passe{border:13px solid #fff;
  --photo-ombre:0 24px 54px rgba(42,34,20,.14),0 2px 6px rgba(42,34,20,.06)}

/* C — filet net sur le bord, aucun relief : le plus sobre */
.photo-filet{--photo-ombre:0 0 0 1px var(--line)}

/* D — socle : une bande dorée dépasse sous l'image */
.photo-socle{--photo-ombre:0 12px 0 -3px var(--gold),0 30px 56px rgba(42,34,20,.12)}

/* E — trait de tête : un filet doré épais posé sur le bord haut */
.photo-trait{border-top:3px solid var(--gold);
  --photo-ombre:0 20px 44px rgba(42,34,20,.10)}

/* F — libre : aucun ornement, une ombre ample qui détache l'image du fond */
.photo-nu{--photo-ombre:0 34px 72px rgba(42,34,20,.16)}

@media(max-width:1080px){
  .photo-cadre{outline-offset:9px}
  .photo-passe{border-width:9px}
  .photo-socle{--photo-ombre:0 9px 0 -3px var(--gold),0 22px 40px rgba(42,34,20,.12)}
}
@media(max-width:650px){
  /* Sur téléphone, un cadre à distance mange la largeur utile : il se resserre. */
  .photo-cadre{outline-offset:6px}
  .photo-passe{border-width:7px}
  .photo-trait{border-top-width:2px}
}