/* ==========================================================================
   STEVEN HODIN — feuille de style unique
   Direction artistique « Voûte » : la France spirituelle des cathédrales.
   Bleu de voûte étoilée, or des enluminures, pierre calcaire et rubis des
   vitraux. L'or et le bleu ne colorent que des filets, des icônes et des
   halos : jamais de grands aplats décoratifs.
   ========================================================================== */

/* ---------- Polices auto-hébergées (aucun appel réseau tiers) ----------
   Manrope est une police variable 200-800 : un seul fichier par sous-ensemble
   couvre toutes les graisses. Déclarer 400 et 700 séparément téléchargerait
   deux fois exactement le même octet. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/manrope-variable-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ----------------------------- Jetons ----------------------------- */
:root{
  /* Pierre et encre : sections claires */
  --pierre:#EEE9DF;
  --pierre-profonde:#E4DDD0;
  --creme:#F8F5EE;
  --creme-haute:#FDFBF7;
  --encre:#161C33;
  --texte:rgba(22,28,51,.84);
  --texte-doux:rgba(22,28,51,.70);
  --accent:#2D4C9E;            /* bleu de France : filets, icônes, boutons */
  --accent-texte:#24418A;      /* le même bleu, assez sombre pour du petit texte */
  --accent-survol:#1C3573;
  --filet:rgba(45,76,158,.32);
  --filet-clair:rgba(22,28,51,.13);
  --contour:rgba(45,76,158,.45);
  --halo:rgba(45,76,158,.10);

  /* Voûte : sections sombres */
  --nuit:#0A1028;
  --nuit-haute:#0F1733;
  --or:#D4AF6A;
  --or-clair:#EBD3A0;
  --ivoire:#F4EFE6;
  --azur:53,87,183;            /* lumière de vitrail, à utiliser dans rgba() */
  --rubis:179,37,63;

  --erreur:#A33227;
  --succes:#2F6B45;
  --whatsapp:#25D366;

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --courbe:cubic-bezier(.22,.8,.3,1);

  --page:min(1180px,100% - 2.5rem);
  --rythme:clamp(4.5rem,11vh,8rem);
  --barre:72px;                /* hauteur de la barre de conversion mobile */
  --entete:66px;
}
@media (min-width:900px){ :root{ --page:min(1180px,100% - 6rem); --entete:76px; } }

/* Sections sombres : les composants lisent les jetons, il suffit de les
   redéfinir ici pour que tout passe en or sur bleu de voûte. */
.nuit{
  --encre:var(--ivoire);
  --texte:rgba(244,239,230,.82);
  --texte-doux:rgba(244,239,230,.66);
  --accent:var(--or);
  --accent-texte:var(--or);
  --accent-survol:var(--or-clair);
  --filet:rgba(212,175,106,.40);
  --filet-clair:rgba(244,239,230,.12);
  --contour:rgba(212,175,106,.50);
  --halo:rgba(212,175,106,.10);
  background:var(--nuit);color:var(--texte);
}

/* ----------------------------- Base ----------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}      /* une classe utilitaire ne doit jamais rallumer un élément masqué */

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--entete) + 12px);
}
body{
  margin:0;
  background:var(--pierre);
  color:var(--texte);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Seules les pages qui ont la barre d'appel mobile lui réservent la place. */
@media (max-width:899px){ .avec-barre{ padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom)) } }

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}

h1,h2,h3{
  font-family:var(--serif);font-weight:500;color:var(--encre);
  line-height:1.12;letter-spacing:-.012em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.7rem)}
h2{font-size:clamp(1.9rem,1.35rem + 2.3vw,3.15rem)}
h3{font-size:clamp(1.18rem,1.08rem + .45vw,1.42rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
em{font-family:var(--serif);font-style:italic;font-size:1.06em;color:var(--encre)}

.page{width:var(--page);margin-inline:auto}
.section{padding-block:var(--rythme);position:relative;overflow-x:clip}
.mesure{max-width:58ch}
.ambiance--creme{background:var(--creme)}
.ambiance--profond{background:var(--pierre-profonde)}

/* Accessibilité : focus clavier toujours visible */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--encre);color:var(--creme);padding:.8rem 1.1rem;border-radius:0 0 4px 0;
}
.saut-contenu:focus{left:0}

/* ------------------------- Éléments éditoriaux -------------------------
   Le losange précède chaque intitulé : la pièce d'héraldique la plus simple. */
.eyebrow,.num{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-texte);display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;
}
.eyebrow::before,.num::before{
  content:"";width:6px;height:6px;flex:none;background:var(--accent);transform:rotate(45deg);
}
.intro{font-size:1.06rem;color:var(--texte);margin-top:1.4rem}
.ornement{display:block;width:22px;height:22px;margin:0 auto 1.8rem;fill:var(--or)}
.ico-wa{color:var(--whatsapp)}

/* ------------------------------ Boutons ------------------------------ */
.cta{
  --fond:var(--accent-texte); --fond-survol:var(--accent-survol); --cta-encre:var(--ivoire);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:0 1.65rem;
  background:var(--fond);color:var(--cta-encre);
  font-size:.95rem;font-weight:600;letter-spacing:.015em;text-decoration:none;
  border:1px solid transparent;border-radius:3px;cursor:pointer;
  transition:transform .3s var(--courbe),box-shadow .3s,background .3s,border-color .3s;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 30px -18px rgba(22,28,51,.6);
}
.cta:hover{background:var(--fond-survol);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 18px 38px -20px rgba(22,28,51,.7)}
.cta:active{transform:translateY(0)}
.cta svg{width:18px;height:18px;flex:none}
.nuit .cta{--fond:var(--or);--fond-survol:var(--or-clair);--cta-encre:var(--nuit);box-shadow:0 14px 34px -18px rgba(212,175,106,.55)}
.cta--ligne,.nuit .cta--ligne{background:transparent;color:var(--encre);border-color:var(--contour);box-shadow:none}
.cta--ligne:hover,.nuit .cta--ligne:hover{background:var(--halo);border-color:var(--accent);box-shadow:none}
.cta--large{width:100%}
.cta[aria-busy="true"]{opacity:.65;pointer-events:none}

/* Conversion principale : l'appel. Plus grand, avec un halo lent. */
.cta--appel{min-height:60px;padding:0 2.1rem;font-size:1.02rem;position:relative}
.cta--appel::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  animation:halo-appel 2.8s ease-out infinite;
}
@keyframes halo-appel{
  0%{box-shadow:0 0 0 0 rgba(212,175,106,.5)}
  70%,100%{box-shadow:0 0 0 14px rgba(212,175,106,0)}
}

.lien-discret{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--texte-doux);font-size:.9rem;text-decoration:none;
  padding:.45rem 0;background:none;border:0;cursor:pointer;
}
.lien-discret span{position:relative}
.lien-discret span::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--courbe);
}
.lien-discret:hover{color:var(--encre)}
.lien-discret:hover span::after{transform:scaleX(1)}

.groupe-cta{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
@media (max-width:559px){
  .groupe-cta{flex-direction:column;align-items:stretch}
  .groupe-cta .cta{width:100%;min-height:56px}
}

/* Relance d'appel après un bloc qui convainc (déroulement, avis) */
.relance{
  margin-top:3.2rem;padding-top:2.2rem;border-top:1px solid var(--filet-clair);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
}
.relance p{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);line-height:1.3;color:var(--encre)}
@media (max-width:699px){ .relance{display:block} .relance .groupe-cta{margin-top:1.3rem} }

/* ------------------------------ Révélations ------------------------------ */
/* Le masquage n'est appliqué que si JS est réellement actif ET n'a pas
   déclaré forfait : sans ce filet, une erreur de script effacerait la page. */
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.vu{opacity:1;transform:none;transition:opacity .7s ease,transform .7s var(--courbe)}
html.js .reveal.vu.d1{transition-delay:.08s}
html.js .reveal.vu.d2{transition-delay:.16s}
html.js .reveal.vu.d3{transition-delay:.24s}
html.js .reveal.vu.d4{transition-delay:.32s}

@keyframes respire{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
@keyframes tourne{to{transform:rotate(360deg)}}

/* =============================== En-tête =============================== */
.entete{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--entete);display:flex;align-items:center;
  transition:background .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.entete.pose{
  background:rgba(238,233,223,.86);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--filet-clair);
}
.entete.nuit{background:transparent}
.entete.nuit.pose{background:rgba(10,16,40,.86)}
.entete__in{width:var(--page);margin-inline:auto;display:flex;align-items:center;gap:1.5rem}
.marque{
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre);text-decoration:none;white-space:nowrap;
}
.nav{display:none;margin-inline:auto;gap:clamp(1.3rem,2.4vw,2.1rem)}
.nav a{
  font-size:.82rem;letter-spacing:.04em;color:var(--texte-doux);text-decoration:none;
  position:relative;padding:.3rem 0;transition:color .3s;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--courbe);
}
.nav a:hover{color:var(--encre)}
.nav a:hover::after{transform:scaleX(1)}
.entete__droite{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.entete__num{display:none;font-size:.85rem;letter-spacing:.03em;color:var(--texte-doux);text-decoration:none;white-space:nowrap}
.entete__num:hover{color:var(--encre)}
.entete .cta{min-height:42px;padding:0 1.1rem;font-size:.84rem}
.appel-mobile{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:0 .95rem;border-radius:3px;
  border:1px solid var(--contour);color:var(--encre);text-decoration:none;
  font-size:.84rem;font-weight:600;letter-spacing:.02em;
}
.appel-mobile svg{width:16px;height:16px;flex:none}
@media (min-width:900px){
  .nav{display:flex}
  .appel-mobile{display:none}
}
/* Le numéro en toutes lettres n'apparaît que lorsqu'il tient sans comprimer
   la navigation : en dessous, le bouton d'appel suffit. */
@media (min-width:1180px){ .entete__num{display:inline} }
@media (max-width:899px){ .entete .cta{display:none} }

/* ================================ Héros ================================
   Signature : le portrait dans une arche gothique, sous une voûte étoilée,
   une rosace en halo. Le filet d'or de l'arche se trace une fois au chargement. */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--entete) + 2rem);padding-bottom:3.6rem;
  background:
    radial-gradient(60% 55% at 76% 34%,rgba(var(--azur),.42),transparent 70%),
    radial-gradient(45% 40% at 6% 96%,rgba(var(--rubis),.20),transparent 70%),
    var(--nuit);
}
@media (min-width:900px){
  .hero{min-height:min(100svh,940px);display:flex;align-items:center;padding-top:calc(var(--entete) + 3rem);padding-bottom:4.5rem}
}
.hero__fond{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}

.hero__in{position:relative;z-index:1;display:grid;gap:3.4rem}
@media (min-width:900px){
  .hero__in{grid-template-columns:1.12fr .88fr;gap:clamp(3rem,6vw,6.5rem);align-items:center}
}
.hero h1{
  font-size:clamp(2.45rem,1.4rem + 4.3vw,5.1rem);line-height:1.03;letter-spacing:-.022em;
  margin-bottom:1.6rem;
}
.hero h1 em{display:block;margin-top:.1em;font-size:1em;color:var(--or-clair)}
.hero__sous{max-width:46ch;font-size:clamp(1rem,.95rem + .3vw,1.14rem)}
.hero .groupe-cta{margin-top:2.3rem}
.hero__tertiaire{margin-top:1.15rem;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;color:var(--texte-doux);font-size:.9rem}
.hero__num{font-family:var(--serif);font-size:1.35rem;letter-spacing:.03em;color:var(--encre);text-decoration:none}
.hero__num:hover{color:var(--or-clair)}

.badges{
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:2.4rem 0 0;padding:2rem 0 0;
  border-top:1px solid var(--filet-clair);list-style:none;
  font-size:.8rem;letter-spacing:.04em;color:var(--texte-doux);
}
.badges li{display:flex;align-items:center;gap:.5rem}
.badges svg{width:15px;height:15px;color:var(--or);flex:none}

.hero__niche{position:relative;margin:1.5rem auto 0;width:min(300px,72vw);isolation:isolate}
@media (min-width:900px){ .hero__niche{width:100%;max-width:430px;margin-top:0} }
.hero__niche::before{
  content:"";position:absolute;inset:-25% -40%;z-index:-2;
  background:radial-gradient(closest-side,rgba(var(--azur),.45),rgba(212,175,106,.10) 60%,transparent);
  animation:respire 9s ease-in-out infinite;
}
.hero__niche picture{display:block;filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}
.hero__niche img{
  width:100%;
  clip-path:polygon(0.00% 47.36%,0.18% 43.62%,0.73% 39.91%,1.63% 36.24%,2.89% 32.63%,4.50% 29.12%,6.45% 25.72%,8.72% 22.45%,11.30% 19.33%,14.17% 16.38%,17.33% 13.61%,20.74% 11.06%,24.40% 8.72%,28.27% 6.62%,32.33% 4.77%,36.56% 3.17%,40.93% 1.85%,45.42% 0.80%,50.00% 0.03%,54.58% 0.80%,59.07% 1.85%,63.44% 3.17%,67.67% 4.77%,71.73% 6.62%,75.60% 8.72%,79.26% 11.06%,82.67% 13.61%,85.83% 16.38%,88.70% 19.33%,91.28% 22.45%,93.55% 25.72%,95.50% 29.12%,97.11% 32.63%,98.37% 36.24%,99.27% 39.91%,99.82% 43.62%,100.00% 47.36%,100.00% 100.00%,0.00% 100.00%);
}
.hero__arche{
  position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);
  overflow:visible;pointer-events:none;
}
.hero__arche path{
  fill:none;stroke:var(--or);stroke-width:.3;opacity:.85;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:trace 2.6s .35s cubic-bezier(.6,0,.2,1) forwards;
}
.hero__arche--bord{inset:0;width:100%;height:100%}
.hero__arche--bord path{stroke-width:.45;opacity:.95;animation-delay:.6s}
@keyframes trace{to{stroke-dashoffset:0}}
.hero__rosace{
  position:absolute;left:4%;top:-12%;width:92%;z-index:-1;
  fill:none;stroke:var(--or);stroke-width:.32;opacity:.38;
  animation:tourne 200s linear infinite;
}

/* Cadre photo des sections claires : liseré décalé + halo lent */
.cadre{position:relative;isolation:isolate;margin:0}
.cadre::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--filet);
  border-radius:2px;z-index:-1;
}
.cadre::after{
  content:"";position:absolute;inset:-14%;z-index:-2;border-radius:50%;
  background:radial-gradient(circle,var(--halo),transparent 62%);
  animation:respire 16s ease-in-out infinite;
}
.cadre img{width:100%;border-radius:2px}

/* ===================== Les quatre voies =====================
   Chaque voie a sa teinte : elle ne colore que le sceau, le filet et le halo. */
.voies{background:var(--nuit-haute)}
.voies__grille{
  display:grid;gap:1px;margin-top:3.2rem;
  background:var(--filet-clair);border:1px solid var(--filet-clair);border-radius:3px;overflow:hidden;
}
@media (min-width:700px){ .voies__grille{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1120px){ .voies__grille{grid-template-columns:repeat(4,1fr)} }
.voie{
  --teinte:var(--or);
  position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.9rem;
  padding:2.4rem 1.8rem 2.2rem;background:var(--nuit-haute);
}
.voie::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--teinte),transparent);opacity:.85;
}
.voie::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 55% at 50% 0%,color-mix(in srgb,var(--teinte) 20%,transparent),transparent 70%);
  opacity:.55;transition:opacity .6s ease;
}
.voie:hover::after{opacity:1}
.voie--rouge{--teinte:#E0646F}
.voie--blanche{--teinte:#F1EADC}
.voie--noire{--teinte:#9C98B0}
.voie--vaudou{--teinte:#D3963A}
.voie__sceau{
  width:66px;height:66px;margin-bottom:.6rem;
  fill:none;stroke:var(--teinte);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
}
.voie__anneau{transform-origin:32px 32px;transition:transform 1.6s var(--courbe)}
.voie:hover .voie__anneau{transform:rotate(90deg)}
.voie h3{font-size:clamp(1.55rem,1.3rem + .8vw,1.95rem)}
.voie__sous{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--teinte);margin:-.4rem 0 .2rem}
.voie p:not(.voie__sous){font-size:.94rem;color:var(--texte-doux);margin:0}
.voie__tags{
  list-style:none;margin:auto 0 0;padding:1.1rem 0 0;border-top:1px solid var(--filet-clair);
  display:flex;flex-wrap:wrap;gap:.35rem 1rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);
}

/* ============================ Domaines ============================ */
.grille-situations{
  display:grid;gap:1px;margin-top:3rem;
  background:var(--filet-clair);border:1px solid var(--filet-clair);border-radius:3px;overflow:hidden;
}
@media (min-width:640px){ .grille-situations{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grille-situations{grid-template-columns:repeat(3,1fr)} }
.situation{background:var(--creme);padding:2.1rem 1.75rem 2.25rem;transition:background .45s ease}
.situation:hover{background:var(--creme-haute)}
.situation svg{width:24px;height:24px;color:var(--accent);margin-bottom:1.15rem}
.situation h3{margin-bottom:.55rem}
.situation p{font-size:.95rem;color:var(--texte-doux);margin:0}
.situation--appel{display:flex;flex-direction:column;justify-content:center;gap:1rem;background:var(--pierre-profonde)}
.situation--appel p{color:var(--texte)}

/* ===================== Blocs texte + image ===================== */
.duo{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem)}
  .duo--inverse .duo__media{order:2}
}
.duo__texte h2{margin-bottom:1.3rem}
.duo__texte .conclusion{
  margin-top:1.6rem;padding-left:1.15rem;border-left:1px solid var(--filet);
  font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--encre);
}
.duo .groupe-cta{margin-top:2rem}

/* ============================ Citation ============================ */
.citation{
  text-align:center;padding-block:clamp(4rem,9vw,7rem);position:relative;overflow:hidden;
  background:radial-gradient(60% 120% at 50% 0%,rgba(var(--azur),.36),transparent 72%),var(--nuit);
}
.citation__texte{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 2.2vw,3rem);line-height:1.25;
  max-width:24ch;margin:0 auto;color:var(--encre);
}
.citation__signature{margin-top:1.6rem;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-doux)}

/* ===================== Bande image pleine largeur =====================
   Elle se fond dans la section du dessus (pierre profonde) et dans celle
   du dessous (pierre). */
.bande-image{position:relative;overflow:hidden;margin:0}
.bande-image img{width:100%;height:clamp(230px,34vh,380px);object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--courbe)}
.bande-image.vu img{transform:scale(1)}
.bande-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--pierre-profonde) 0%,rgba(238,233,223,.22) 30%,rgba(238,233,223,.3) 66%,rgba(238,233,223,.5) 100%);
}
.bande-image figcaption{
  position:absolute;inset:auto 0 0;z-index:1;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);color:var(--encre);
  padding:3.4rem 1.5rem clamp(1.2rem,4vh,2.4rem);
  background:linear-gradient(180deg,rgba(238,233,223,0),rgba(238,233,223,.88) 38%,rgba(238,233,223,.97) 70%,var(--pierre) 100%);
}

/* ============================ Déroulement ============================ */
.methode{display:grid;gap:3rem}
@media (min-width:980px){ .methode{grid-template-columns:.78fr 1.22fr;gap:clamp(3rem,6vw,5rem);align-items:start} }
.methode__media{margin-top:2.5rem}
@media (max-width:979px){ .methode__media{max-width:380px} }
.etapes{list-style:none;margin:0;padding:0}
.etape{position:relative;padding:0 0 2.3rem 3.4rem}
.etape:last-child{padding-bottom:0}
.etape::before{
  content:"";position:absolute;left:11px;top:1.55rem;bottom:-.2rem;width:1px;
  background:linear-gradient(180deg,var(--filet),transparent);
}
.etape:last-child::before{display:none}
.etape__pastille{
  position:absolute;left:0;top:.3rem;width:23px;height:23px;border-radius:50%;
  border:1px solid var(--filet);display:grid;place-items:center;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;color:var(--accent-texte);background:var(--pierre);
}
.etape h3{margin-bottom:.4rem}
.etape p{font-size:.95rem;color:var(--texte-doux);margin:0}

/* ============================ Engagements ============================ */
.confiance{background:var(--nuit-haute)}
.confiance__in{display:grid;gap:3rem;align-items:center}
@media (min-width:940px){ .confiance__in{grid-template-columns:1.1fr .9fr;gap:clamp(3rem,6vw,5rem)} }
.texte-editorial{
  margin-top:1.4rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.45;color:var(--encre);
}
.confiance__media{position:relative;margin:0}
.confiance__media img{width:100%;border-radius:2px;box-shadow:0 34px 64px -42px rgba(0,0,0,.9)}
.confiance__media::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--filet);border-radius:2px;z-index:-1;
}
.principes{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.5rem}
.principe{display:flex;gap:1rem;align-items:flex-start}
.principe svg{width:19px;height:19px;color:var(--or);flex:none;margin-top:.28rem}
.principe b{display:block;font-weight:700;font-size:.95rem;letter-spacing:.01em;color:var(--encre);margin-bottom:.15rem}
.principe span{font-size:.95rem;color:var(--texte)}

/* ======================== Avis et témoignages ======================== */
.temoignages{display:grid;gap:1.25rem;margin-top:3rem}
@media (min-width:860px){ .temoignages{grid-template-columns:repeat(3,1fr)} }
.temoignage{
  margin:0;background:var(--creme);border:1px solid var(--filet-clair);border-radius:3px;
  padding:1.9rem 1.7rem;display:flex;flex-direction:column;gap:.85rem;
}
.temoignage__etoiles{display:flex;gap:.15rem}
.temoignage__etoiles svg{width:1rem;height:1rem;fill:var(--or)}
.temoignage blockquote{margin:0;font-size:.97rem;color:var(--texte)}
.temoignage figcaption{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-doux);margin-top:auto}
@media (max-width:859px){
  .temoignages{
    grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:1.25rem;padding-bottom:.9rem;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:var(--filet) transparent;
  }
  .temoignages::-webkit-scrollbar{height:4px}
  .temoignages::-webkit-scrollbar-track{background:transparent}
  .temoignages::-webkit-scrollbar-thumb{background:var(--filet);border-radius:4px}
  .temoignage{scroll-snap-align:center}
}

/* ============================== Contact ============================== */
.rappel{background:linear-gradient(180deg,var(--pierre-profonde),var(--pierre))}
.rappel__in{display:grid;gap:2.8rem}
@media (min-width:940px){ .rappel__in{grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,5rem);align-items:start} }
.contact__appel{margin-top:1.8rem}
.formulaire{
  background:var(--creme);border:1px solid var(--filet-clair);border-radius:4px;
  padding:clamp(1.6rem,4vw,2.6rem);
}
.champ{margin-bottom:1.15rem}
.champ label{display:block;font-size:.82rem;letter-spacing:.06em;color:var(--texte-doux);margin-bottom:.5rem}
.champ input,.champ textarea{
  width:100%;background:var(--creme-haute);border:1px solid rgba(22,28,51,.2);border-radius:3px;
  padding:.92rem 1rem;font-size:1rem;color:var(--encre);
  transition:border-color .3s,background .3s;
}
.champ input{min-height:52px}
.champ textarea{resize:vertical;min-height:104px;line-height:1.55}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(22,28,51,.6)}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent);background:#FFFFFF}
.champ input:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.champ[data-erreur] input,.champ[data-erreur] textarea{border-color:var(--erreur)}
.erreur{display:block;font-size:.82rem;color:var(--erreur);margin-top:.45rem}
.consentement{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-start;margin:1.3rem 0 1.5rem;font-size:.84rem;color:var(--texte-doux)}
.consentement>span:not(.erreur){flex:1 1 0;min-width:0}
.consentement .erreur{flex-basis:100%;margin-top:0}
.consentement[data-erreur]>span{color:var(--erreur)}
.consentement input{width:19px;height:19px;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--accent)}
.consentement a{color:var(--texte)}
.note-formulaire{margin-top:1.1rem;font-size:.8rem;line-height:1.55;color:var(--texte-doux)}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire__etat{display:none;align-items:flex-start;gap:.85rem;margin-top:1.2rem;font-size:.9rem}
.formulaire__etat.visible{display:flex}
.formulaire__etat.ok{color:var(--succes)}
.formulaire__etat.ko{color:var(--erreur)}
.confirmation{text-align:center;padding:1rem 0}
.confirmation h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);margin-bottom:.8rem}
.confirmation p{color:var(--texte-doux);font-size:.95rem}
.confirmation .groupe-cta{justify-content:center;margin-top:1.8rem}

/* ========================= Questions fréquentes ========================= */
.faq{max-width:820px;margin-top:3rem}
.question{border-bottom:1px solid var(--filet-clair)}
.question summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:1.2rem;
  padding:1.35rem 0;font-family:var(--serif);font-size:clamp(1.08rem,1rem + .35vw,1.3rem);
  color:var(--encre);transition:color .3s;
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--accent-texte)}
.question__signe{margin-left:auto;flex:none;width:19px;height:19px;position:relative;margin-top:.45rem}
.question__signe::before,.question__signe::after{
  content:"";position:absolute;inset:50% 0 auto;height:1px;background:var(--accent);
  transition:transform .4s var(--courbe);
}
.question__signe::after{transform:rotate(90deg)}
.question[open] .question__signe::after{transform:rotate(0)}
.question__corps p{padding:0 2.6rem 1.5rem 0;font-size:.97rem;color:var(--texte-doux);max-width:66ch}

/* ============================ Appel final ============================ */
.final{position:relative;overflow:hidden;text-align:center}
.final__fond{position:absolute;inset:0;z-index:0}
.final__fond img{width:100%;height:100%;object-fit:cover;opacity:.4}
.final__fond::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(var(--azur),.18),var(--nuit) 74%);
}
.final__in{position:relative;z-index:1;max-width:680px;margin-inline:auto}
.final h2{margin-bottom:1.2rem}
.final .groupe-cta{justify-content:center;margin-top:2.2rem}
.final__num{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;
  font-family:var(--serif);font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  color:var(--encre);text-decoration:none;letter-spacing:.02em;
}
.final__num svg{width:20px;height:20px;color:var(--accent)}

/* ============================ Pied de page ============================ */
.pied{border-top:1px solid var(--filet-clair);padding-block:1.8rem 1.4rem}
.pied__haut{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 2rem}
.pied__contact{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.pied p,.pied a{font-size:.88rem;color:var(--texte-doux);text-decoration:none}
.pied a:hover{color:var(--encre)}
.pied__bas{
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--filet-clair);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.3rem;font-size:.78rem;color:var(--texte-doux);
}
.pied__bas a,.pied .lien-discret{font-size:.78rem;padding:0}
.pied__bas--seul{margin-top:0;padding-top:0;border-top:0}
.pied .pied__note{margin:.7rem 0 0;font-size:.74rem;line-height:1.5}

/* ===================== Barre de conversion mobile ===================== */
.barre-conversion{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(10,16,40,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid rgba(212,175,106,.28);
  box-shadow:0 -14px 30px -22px rgba(0,0,0,.8);
  padding:.55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  transform:translate3d(0,0,0);transition:transform .35s var(--courbe);
}
.barre-conversion.repliee{transform:translate3d(0,calc(100% + 2px),0)}
.barre-conversion__in{display:grid;grid-template-columns:56px 1fr 56px;gap:.55rem}
.barre-conversion a,.barre__menu{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;border-radius:3px;text-decoration:none;
}
.barre-conversion .appeler{background:var(--or);color:var(--nuit);font-size:1rem;font-weight:700;letter-spacing:.01em}
.barre-conversion .whatsapp{border:1px solid rgba(37,211,102,.5);color:var(--whatsapp)}
.barre-conversion svg{width:19px;height:19px;flex:none}
.barre-conversion .whatsapp svg{width:23px;height:23px}
.barre__menu{padding:0;background:transparent;border:1px solid var(--contour);color:var(--ivoire);cursor:pointer}
.barre__menu[aria-expanded="true"]{background:var(--halo);border-color:var(--or)}

/* Icône hamburger : les trois traits deviennent une croix à l'ouverture. */
.burger{position:relative;display:block;width:20px;height:14px}
.burger i{
  position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform .35s var(--courbe),opacity .2s ease;
}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6.25px}
.burger i:nth-child(3){bottom:0}
[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}
@media (max-width:899px){ .barre-conversion{display:block} }

/* ===================== Menu mobile (panneau du bas) =====================
   Il monte depuis la barre, qui reste au-dessus : le bouton d'appel ne
   disparaît jamais, même menu ouvert. */
.menu-mobile{
  position:fixed;left:0;right:0;z-index:69;
  bottom:calc(var(--barre) + env(safe-area-inset-bottom));
  max-height:calc(100svh - var(--barre) - var(--entete) - 1rem);overflow-y:auto;overscroll-behavior:contain;
  padding:1.6rem 1.5rem 1.4rem;border-top:1px solid var(--filet);border-radius:14px 14px 0 0;
  background:radial-gradient(80% 60% at 50% 0%,rgba(var(--azur),.30),transparent 70%),var(--nuit);
  box-shadow:0 -24px 50px -20px rgba(0,0,0,.7);
  opacity:0;transform:translateY(18px);transition:opacity .3s ease,transform .35s var(--courbe);
}
.menu-mobile.ouvert{opacity:1;transform:none}
.menu-mobile__liens{list-style:none;margin:0;padding:0}
.menu-mobile__liens a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--filet-clair);
  font-family:var(--serif);font-size:1.45rem;line-height:1.2;color:var(--encre);text-decoration:none;
}
.menu-mobile__liens a::after{
  content:"";width:7px;height:7px;flex:none;margin-right:4px;
  border-top:1px solid var(--or);border-right:1px solid var(--or);transform:rotate(45deg);
}
.menu-mobile__liens a:active{color:var(--or-clair)}
.menu-mobile__contact{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.3rem;font-size:.88rem}
.menu-mobile__contact a{color:var(--texte-doux);text-decoration:none}
.menu-mobile__voile{
  position:fixed;inset:0;z-index:68;background:rgba(5,8,20,.6);
  opacity:0;transition:opacity .3s ease;
}
.menu-mobile__voile.ouvert{opacity:1}
html.menu-ouvert{overflow:hidden}
@media (min-width:900px){ .menu-mobile,.menu-mobile__voile{display:none !important} }

/* ================= Bulle WhatsApp (ordinateur) ================= */
.bulle-whatsapp{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:65;display:none;align-items:center;gap:.7rem;
  padding:.72rem .95rem;border-radius:999px;text-decoration:none;
  background:rgba(10,16,40,.92);border:1px solid rgba(37,211,102,.45);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ivoire);font-size:.88rem;font-weight:600;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
  transition:transform .35s var(--courbe),border-color .3s,opacity .4s;
  opacity:0;transform:translateY(10px);pointer-events:none;
}
.bulle-whatsapp.visible{opacity:1;transform:none;pointer-events:auto}
.bulle-whatsapp:hover{transform:translateY(-2px);border-color:rgba(37,211,102,.8)}
.bulle-whatsapp svg{width:21px;height:21px;color:var(--whatsapp);flex:none}
.bulle-whatsapp span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .5s ease,opacity .4s ease}
.bulle-whatsapp.ouverte span,.bulle-whatsapp:hover span{max-width:170px;opacity:1}
@media (min-width:900px){ .bulle-whatsapp{display:flex} }

/* ========================== Bandeau cookies ========================== */
.cookies{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;
  background:rgba(248,245,238,.98);border:1px solid var(--filet);border-radius:5px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:1.35rem 1.4rem;box-shadow:0 30px 70px -35px rgba(10,16,40,.8);
  opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s var(--courbe);
}
.cookies:focus{outline:none}
.cookies.visible{opacity:1;transform:none}
@media (min-width:760px){ .cookies{left:auto;right:1.6rem;bottom:1.6rem;max-width:430px} }
@media (max-width:899px){ .cookies{bottom:calc(var(--barre) + env(safe-area-inset-bottom) + .6rem)} }
.cookies h2{font-size:1.1rem;margin-bottom:.6rem}
.cookies p{font-size:.84rem;line-height:1.55;color:var(--texte-doux)}
.cookies a{color:var(--texte)}
.cookies__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.cookies__actions .cta{min-height:44px;padding:0 1.1rem;font-size:.86rem;flex:1 1 auto}
.cookies__reglages{margin-top:1.1rem;display:grid;gap:.85rem;padding-top:1.1rem;border-top:1px solid var(--filet-clair)}
.reglage{display:flex;gap:.75rem;align-items:flex-start;font-size:.84rem;color:var(--texte-doux)}
.reglage input{width:18px;height:18px;flex:none;margin-top:.2rem;accent-color:var(--accent)}
.reglage b{display:block;color:var(--encre);font-size:.86rem;font-weight:600}
.cookies__lien{margin-top:.9rem;font-size:.78rem}
/* Sur un petit écran, le bandeau reste un panneau, jamais une fenêtre :
   il ne doit pas manger le tiers de la page sous la barre de conversion. */
@media (max-width:559px){
  .cookies{padding:1.05rem 1.1rem}
  .cookies h2{font-size:1rem;margin-bottom:.45rem}
  .cookies p{font-size:.8rem;line-height:1.5}
  .cookies__actions{gap:.5rem;margin-top:.9rem}
  .cookies__actions .cta{min-height:42px;padding:0 .85rem;font-size:.82rem}
  .cookies__lien{margin-top:.7rem}
}

/* ============== Pages légales (gabarit secondaire) ============== */
.legal{padding-top:calc(var(--entete) + 3.5rem);padding-bottom:var(--rythme)}
.legal__in{max-width:760px}
.legal h1{font-size:clamp(2rem,1.6rem + 1.6vw,2.9rem);margin-bottom:1.4rem}
.legal h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin:2.6rem 0 .9rem}
.legal p,.legal li{font-size:.95rem;color:var(--texte)}
.legal ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:0 0 1.1rem}
.legal a{color:var(--accent-texte)}
.legal .maj{font-size:.82rem;color:var(--texte-doux)}
.legal__retour{margin-top:3rem}

/* ============================ Page 404 ============================ */
.erreur404{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  padding-block:calc(var(--entete) + 2rem) 3rem;
  background:radial-gradient(60% 60% at 50% 30%,rgba(var(--azur),.35),transparent 70%),var(--nuit);
}
.erreur404 .eyebrow,.erreur404 .groupe-cta{justify-content:center}
.erreur404 h1{margin-bottom:1.2rem}
.erreur404 p{margin-bottom:2rem}

/* ====================== Mouvement réduit ====================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1 !important;transform:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .cta--appel::after,.hero__rosace{animation:none}
  .hero__arche path{stroke-dashoffset:0;animation:none}
  .voie:hover .voie__anneau{transform:none}
}