/* ═══════════════════════════════════════════════════════
   ATELIER DES ÉNERGIES
   Feuille de style principale
   ─────────────────────────────────────────────────────── */


/* ─── 0. POLICES AUTO‑HÉBERGÉES ──────────────────── */
/* Fraunces — police d'affichage (display) variable.
   Le fichier inclut l'axe de graisse ET l'axe optical-size,
   ce qui permet d'utiliser font-variation-settings: "opsz" 144. */
@font-face{
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-variable-italic.woff2") format("woff2-variations"),
       url("../assets/fonts/fraunces-variable-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Jost — sans serif géométrique variable (axe de graisse) */
@font-face{
  font-family: "Jost";
  src: url("../assets/fonts/jost-variable.woff2") format("woff2-variations"),
       url("../assets/fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond — serif élégant, statique, 400 + 500 régulier + italique */
@font-face{
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}


/* ─── 1. RESET MINIMAL ────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;height:auto}
button{border:0;background:none;cursor:pointer;color:inherit;font:inherit}
input{font:inherit;color:inherit}


/* ─── 2. TOKENS DE DESIGN ─────────────────────────── */
:root{
  /* Couleurs ----------------------------------------- */
  --cream:        #FAF6EE;
  --cream-warm:   #F4EDDF;
  --cream-deep:   #ECE1CB;

  --navy:         #141B3A;       /* couleur de marque, titres */
  --navy-soft:    #2B3563;
  --navy-veil:    rgba(20,27,58,.08);

  --gold:         #B89559;       /* accent principal */
  --gold-deep:    #8E6E3A;
  --gold-pale:    #E6D4AA;

  --terra:        #B05B3B;       /* accent chaud */
  --sage:         #6D9A93;       /* accent froid */

  --ink:          #1B1F2E;
  --whisper:      #6F6A5E;
  --hairline:     #DDD2BC;

  /* Typographie ------------------------------------- */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Jost", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espacements ------------------------------------- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Cadre largeur ----------------------------------- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Effets ------------------------------------------ */
  --radius-sm: 2px;
  --radius:    4px;
  --duration:  .35s;
  --ease:      cubic-bezier(.22,.61,.36,1);
}


/* ─── 3. BASE ─────────────────────────────────────── */
body{
  font-family: var(--font-sans);
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  font-weight: 400;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Grain de fond très subtil */
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(184,149,89,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(109,154,147,.05) 0%, transparent 60%);
}

::selection{background:var(--navy);color:var(--cream)}

.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}


/* ─── 4. TYPOGRAPHIE GLOBALE ──────────────────────── */
h1,h2,h3{
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 120;
}
h3{ font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); line-height:1.2; letter-spacing:-.01em; }

em{ font-style: italic; font-family: var(--font-display); font-variation-settings: "opsz" 144; }

.section-eyebrow{
  font-family: var(--font-sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: var(--space-md);
}

.section-title{
  font-size: clamp(2.1rem, 1.5rem + 2.5vw, 3.6rem);
  letter-spacing: -.022em;
  margin-bottom: var(--space-xl);
}
.section-title em{ color: var(--terra); font-weight: 300; }

.section-head{ margin-bottom: var(--space-xl); max-width: 38ch; }
.section-head--centered{ text-align:center; margin-inline:auto; }


/* ─── 5. EN-TÊTE / NAVIGATION ─────────────────────── */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 238, .85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease),
              background var(--duration) var(--ease),
              padding var(--duration) var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color: var(--hairline);
}

.nav-shell{
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.1rem var(--container-pad);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-lg);
  transition: padding var(--duration) var(--ease);
}
.site-header.is-scrolled .nav-shell{ padding-block: .75rem; }

.brand{
  display:flex; align-items:center; gap:.7rem;
  font-family: var(--font-display);
  color: var(--navy);
}
.brand__mark{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover;
  transition: transform var(--duration) var(--ease);
}
.brand:hover .brand__mark{ transform: rotate(-8deg); }
.brand__name{ display:flex; flex-direction:column; line-height:1; }
.brand__name-line1{ font-size: 1.1rem; letter-spacing:.01em; font-weight: 500; }
.brand__name-line2{ font-size: 1.1rem; letter-spacing:.01em; font-weight: 500; }

.main-nav ul{
  display:flex; gap:clamp(1rem, 1vw + .5rem, 2rem);
  justify-content:center;
}
.main-nav a{
  position:relative;
  font-family: var(--font-sans);
  font-size: .98rem;
  font-weight: 500;
  color: var(--navy);
  padding: .5rem .2rem;
  transition: color var(--duration) var(--ease);
}
.main-nav a::after{
  content:"";
  position:absolute; left:.2rem; right:.2rem; bottom:.25rem;
  height:1px; background:var(--navy);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* CTA pilule */
.cta-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: .85rem 1.5rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 999px;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
}
.cta-pill--nav{
  background: var(--navy);
  color: var(--cream);
  padding: .7rem 1.2rem;
  font-size: .85rem;
}
.cta-pill--nav:hover{ background: var(--gold-deep); transform:translateY(-1px); }

.cta-pill--primary{
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 1px 0 0 var(--gold) inset, 0 10px 30px -10px rgba(20,27,58,.4);
}
.cta-pill--primary:hover{
  background: var(--gold-deep);
  transform:translateY(-2px);
  box-shadow: 0 1px 0 0 var(--gold-pale) inset, 0 14px 34px -12px rgba(184,149,89,.5);
}

.cta-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-sans);
  font-size: .92rem;
  color: var(--navy);
  padding: .85rem 0;
  border-bottom: 1px solid var(--navy);
  transition: gap var(--duration) var(--ease), color var(--duration) var(--ease);
}
.cta-link svg{ width: 18px; height: 18px; }
.cta-link:hover{ gap:.9rem; color: var(--gold-deep); }
.cta-link:hover{ border-bottom-color: var(--gold-deep); }


/* Hamburger ----------------------------------------- */
.nav-toggle{ display:none; width:36px; height:36px; position:relative; }
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:1.5px;
  background: var(--navy);
  transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
}
.nav-toggle span:nth-child(1){ top: 11px; }
.nav-toggle span:nth-child(2){ top: 17.5px; }
.nav-toggle span:nth-child(3){ top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:17.5px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:17.5px; transform:rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 0; z-index: 99;
  background: var(--cream);
  display: flex; flex-direction: column;
  padding: 6rem var(--container-pad) 3rem;
  opacity:0; pointer-events:none;
  transition: opacity .45s var(--ease);
  /* Permet de scroller si le menu déborde (paysage mobile, accessibilité) */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open{ opacity:1; pointer-events:auto; }
.mobile-menu ol{ counter-reset: m; }
.mobile-menu li{
  border-bottom: 1px solid var(--hairline);
  counter-increment: m;
}
.mobile-menu a{
  display: flex; align-items: baseline;
  justify-content: flex-start; gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw + .5rem, 2.4rem);
  color: var(--navy);
  letter-spacing: -.01em;
  text-align: left;
}
.mobile-menu a::before{
  content: counter(m, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--gold-deep);
  flex-shrink: 0;
  min-width: 1.6em; /* colonne de numéro fixe : tous les libellés s'alignent */
}
.mobile-menu__signature{
  margin-top: auto;
  font-family: var(--font-display);
  color: var(--whisper);
  font-size: 1.05rem;
  line-height: 1.5;
}


/* ─── 6. HERO ─────────────────────────────────────── */
.hero{
  position: relative;
  padding: clamp(4rem, 8vw, 8rem) var(--container-pad) clamp(4rem, 7vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, var(--cream-warm) 0%, transparent 60%),
    var(--cream);
}

.hero__sunburst{
  position: absolute;
  top: -10%; right: -20%;
  width: clamp(700px, 100vw, 1200px); aspect-ratio:1;
  color: var(--gold);
  opacity: .12;
  pointer-events: none;
}

.hero__inner{
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
}

.hero__eyebrow{
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--navy-soft);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.eyebrow__dot{
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(184,149,89,.18);
}

.hero__title{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(2.4rem, 1.5rem + 4.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--navy);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 18ch;
}
.hero__title em{
  color: var(--terra);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
}

.hero__subtitle{
  font-family: var(--font-sans);
  font-size: clamp(.95rem, .85rem + .4vw, 1.1rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.hero__actions{
  display: flex; flex-wrap: wrap;
  gap: 1.5rem; align-items: center;
  margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.hero__meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  max-width: 800px;
}
.hero__meta > div{ display:flex; flex-direction:column; gap:.3rem; }
.meta-num{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  color: var(--navy);
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  letter-spacing: -.01em;
}
.meta-label{
  font-family: var(--font-sans);
  font-size: .82rem;
  color: var(--whisper);
  letter-spacing: .03em;
  line-height: 1.4;
}


/* ─── 7. PRÉSENTATION ─────────────────────────────── */
.presentation{
  padding: var(--space-3xl) 0;
  position: relative;
}

.presentation__grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.presentation__grid--solo{
  grid-template-columns: 1fr;
  max-width: 720px;
}
.presentation__grid--solo .presentation__body{
  border-left: 0;
  padding-left: 0;
  padding-top: 0;
}

.presentation__quote p{
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy);
}
.presentation__quote em{
  color: var(--terra);
  font-variation-settings: "opsz" 144;
}

.dropcap{
  float: left;
  font-family: var(--font-display);
  font-size: 4em;
  line-height: .85;
  padding-right: .12em;
  padding-top: .08em;
  color: var(--gold);
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

.presentation__body{
  padding-top: 1rem;
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.presentation__body p{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.presentation__body p:last-child{ margin-bottom:0; }


/* ─── 8. DOMAINES ─────────────────────────────────── */
.domaines{
  padding: var(--space-3xl) 0;
  background: var(--cream-warm);
  position: relative;
}
.domaines::before,.domaines::after{
  content:""; display:block; height:1px;
  background: linear-gradient(to right, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  position:absolute; left:0; right:0;
}
.domaines::before{ top:0; }
.domaines::after{ bottom:0; }

.domain-list{
  display: flex; flex-direction: column;
}

.domain{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(1.5rem, 3vw, 4rem);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  border-top: 1px solid var(--hairline);
  align-items: start;
  transition: background-color var(--duration) var(--ease);
}
.domain:last-child{ border-bottom: 1px solid var(--hairline); }
.domain:hover{ background-color: rgba(184,149,89,.04); }

.domain__num{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.6rem);
  font-style: italic;
  color: var(--gold);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144;
  position: relative;
  padding-top: .15em;
}
.domain__num::after{
  content:"";
  display:block;
  width: 40px; height: 1px;
  background: var(--gold);
  margin-top: .8em;
}

.domain__content h3{
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
}

.domain__lede{
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--navy);
  font-style: italic;
  margin-bottom: 1.2rem;
  max-width: 60ch;
}

.domain__content p:not(.domain__lede){
  max-width: 65ch;
  color: var(--ink);
}

.formation-list{
  display:flex; flex-direction:column;
  margin-top: 1rem;
  max-width: 480px;
}
.formation-list li{
  display:flex; justify-content:space-between; gap:1rem;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--hairline);
  font-family: var(--font-sans);
  font-size: .92rem;
}
.formation-list li:last-child{ border-bottom:0; }
.formation-list li span:last-child{
  color: var(--gold-deep);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
}


/* ─── 9. APPROCHE / DÉROULÉ ───────────────────────── */
.approche{
  padding: var(--space-3xl) 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(184,149,89,.06) 0%, transparent 50%),
    var(--cream);
}

.steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-bottom: var(--space-xl);
}

.step{
  position: relative;
  padding-top: 1rem;
}

.step__num{
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: .1em;
  margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .9rem;
}
.step__num span{
  font-style: italic;
  font-size: 1.4rem;
  font-variation-settings: "opsz" 144;
}
.step__num::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(to right, var(--gold) 0%, transparent 100%);
}

.step h3{
  font-size: 1.3rem;
  margin-bottom: .8rem;
  line-height: 1.2;
}

.step p{
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink);
}

.approche__note{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--navy-soft);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}


/* ─── 10. TARIFS ──────────────────────────────────── */
.tarifs{
  padding: var(--space-3xl) 0;
  background: var(--navy);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.tarifs::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(184,149,89,.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 80%, rgba(109,154,147,.12) 0%, transparent 60%);
  pointer-events: none;
}
.tarifs > *{ position:relative; z-index:1; }
.tarifs .section-title{ color: var(--cream); }
.tarifs .section-title em{ color: var(--gold-pale); }
.tarifs .section-eyebrow{ color: var(--gold); }

.tarifs__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  margin-bottom: var(--space-xl);
}

.tarif{
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
  background: rgba(250,246,238,.03);
  border: 1px solid rgba(250,246,238,.08);
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
  display: flex; flex-direction: column;
  position: relative;
}
.tarif:hover{
  background: rgba(250,246,238,.06);
  transform: translateY(-4px);
}
.tarif--feature{
  background: linear-gradient(180deg, rgba(184,149,89,.12) 0%, rgba(184,149,89,.04) 100%);
  border-color: rgba(184,149,89,.25);
}
.tarif--feature::before{
  content: "Le plus demandé";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 999px;
}

.tarif h3{
  color: var(--cream);
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  min-height: 2.7em;
  line-height: 1.2;
}

.tarif__price{
  display:flex; align-items:baseline; gap:.15rem;
  margin-bottom: 1rem;
}
.tarif__price span{
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
  font-style: italic;
  color: var(--gold-pale);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
}
.tarif__price sup{
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 400;
}

.tarif__desc{
  font-size: .95rem;
  color: rgba(250,246,238,.75);
  line-height: 1.5;
  margin-top: auto;
}

.paiement{
  border-top: 1px solid rgba(250,246,238,.12);
  padding-top: var(--space-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 4rem);
  align-items: start;
}
.paiement__label{
  font-family: var(--font-sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold);
}
.paiement__list{
  display: flex; flex-wrap: wrap;
  gap: 1rem 2.5rem;
}
.paiement__list li{
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--cream);
}
.paiement__list strong{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .05em;
  margin-right: .4rem;
  color: var(--gold-pale);
}


/* ─── 11. À PROPOS ────────────────────────────────── */
.apropos{ padding: var(--space-3xl) 0; }

.apropos__container{
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.apropos__visual{ position: sticky; top: 6rem; }

.apropos__figure{
  display:flex; flex-direction:column;
  align-items: center; text-align: center;
  gap: 1.2rem;
}
.apropos__figure img{
  width: 100%;
  max-width: 340px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(20,27,58,.18);
}
.apropos__figure figcaption{
  font-family: var(--font-serif);
  color: var(--whisper);
  font-size: 1.15rem;
  line-height: 1.4;
}
.apropos__figure em{ color: var(--navy); font-size: 1.25rem; }

.apropos__text p{
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 1.3rem;
  max-width: 60ch;
}

.apropos__signature{
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: 1.5rem !important;
  color: var(--navy) !important;
  margin-top: 2rem !important;
  font-variation-settings: "opsz" 144;
}


/* ─── 12. CONTACT ─────────────────────────────────── */
.contact{
  padding: var(--space-3xl) 0;
  background: var(--cream-warm);
  position: relative;
}

.contact__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: var(--space-xl);
}

.contact-card{
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
}
.contact-card:hover{
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(20,27,58,.15);
}
.contact-card--feature{
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.contact-card--feature .contact-card__label{ color: var(--gold-pale); }
.contact-card--feature .contact-card__hint{ color: rgba(250,246,238,.6); }
.contact-card--feature a{ color: var(--cream); }

.contact-card__label{
  font-family: var(--font-sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold-deep);
  margin-bottom: 1.2rem;
}

.contact-card__value{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: .8rem;
  font-variation-settings: "opsz" 144;
}
.contact-card__value a{ border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.contact-card__value a:hover{ color: var(--gold-deep); }

.contact-card__hint{
  font-size: .88rem;
  color: var(--whisper);
  line-height: 1.6;
}
.contact-card__map{
  display: inline-block;
  margin-top: .5rem;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color var(--duration) var(--ease);
}
.contact-card__map:hover{ color: var(--navy); }

.contact-card__link{
  display: inline-block;
  margin-top: .5rem;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color var(--duration) var(--ease);
}
.contact-card__link:hover{ color: var(--navy); }

/* Anti-spam sans dépendance JS : l'adresse est écrite à l'envers dans le HTML
   (les robots lisent l'ordre inversé, inexploitable) et remise à l'endroit
   à l'affichage grâce à l'inversion du sens de lecture. Lisible même sans
   JavaScript ; le JS ne fait qu'ajouter, en plus, le clic mailto. */
.email-rtl{
  unicode-bidi: bidi-override;
  direction: rtl;
}
a.email-rtl{ cursor: pointer; }

.contact-card__whatsapp{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.contact-card__whatsapp svg{ flex-shrink: 0; }
.contact-card__whatsapp:hover{ background: #1DA851; transform: translateY(-1px); }

.newsletter{
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}
.newsletter__intro{
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.newsletter__form{
  display: flex; flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.newsletter__form input{
  flex: 1 1 280px;
  padding: .9rem 1.2rem;
  background: var(--cream);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: .95rem;
  transition: border-color var(--duration) var(--ease);
}
.newsletter__form input:focus{ outline:0; border-color: var(--gold); }
.newsletter__form button{
  padding: .9rem 1.6rem;
  background: var(--navy);
  color: var(--cream);
  border-radius: 999px;
  font-size: .9rem;
  letter-spacing: .03em;
  transition: background var(--duration) var(--ease);
}
.newsletter__form button:hover{ background: var(--gold-deep); }
.newsletter__feedback{
  flex-basis: 100%;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terra);
  margin-top: .8rem;
}


/* ─── 13. FOOTER ──────────────────────────────────── */
.site-footer{
  background: var(--navy);
  color: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(250,246,238,.12);
}

.footer__mark{
  width: 56px; height: 56px;
  border-radius: 50%;
  margin-bottom: 1rem;
  filter: brightness(1.05);
}
.footer__name{
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--cream);
  margin-bottom: .4rem;
  font-variation-settings: "opsz" 144;
}
.footer__tagline{
  font-size: .9rem;
  color: rgba(250,246,238,.7);
  line-height: 1.5;
}

.footer__heading{
  font-family: var(--font-sans);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.footer__nav ul li{ margin-bottom: .5rem; }
.footer__nav a{
  font-size: .92rem;
  color: rgba(250,246,238,.8);
  transition: color var(--duration) var(--ease);
}
.footer__nav a:hover{ color: var(--gold-pale); }

.footer__contact address{
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--cream);
}

.footer__disclaimer{
  font-size: .8rem;
  color: rgba(250,246,238,.55);
  font-style: italic;
  max-width: 740px;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.footer__legal{
  font-size: .8rem;
  color: rgba(250,246,238,.5);
  letter-spacing: .02em;
}


/* ─── 12.5 FAQ ────────────────────────────────────── */
.faq{
  padding: var(--space-3xl) 0;
  background: var(--cream);
  position: relative;
}
.faq::before{
  content:""; display:block; height:1px;
  background: linear-gradient(to right, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  position:absolute; top:0; left:0; right:0;
}

.faq-list{
  max-width: 880px;
  margin: 0 auto;
}

.faq-item{
  border-bottom: 1px solid var(--hairline);
}
.faq-item:first-child{ border-top: 1px solid var(--hairline); }

.faq-item details{ width: 100%; }

.faq-item summary{
  list-style: none;
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: baseline;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  cursor: pointer;
  transition: padding var(--duration) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:hover .faq-item__q{ color: var(--gold-deep); }
.faq-item summary:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.faq-item__num{
  font-family: var(--font-sans);
  font-size: .78rem;
  letter-spacing: .15em;
  color: var(--gold-deep);
  font-weight: 500;
  align-self: center;
}

.faq-item__q{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, .95rem + .9vw, 1.55rem);
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -.015em;
  font-weight: 400;
  transition: color var(--duration) var(--ease);
  font-variation-settings: "opsz" 120;
}

.faq-item__chevron{
  position: relative;
  width: 28px; height: 28px;
  align-self: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  transition: all var(--duration) var(--ease);
  flex-shrink: 0;
}
.faq-item__chevron::before,
.faq-item__chevron::after{
  content:""; position:absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: var(--navy);
  transition: transform var(--duration) var(--ease);
}
.faq-item__chevron::before{
  transform: translate(-50%, -50%);
}
.faq-item__chevron::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item details[open] .faq-item__chevron{
  background: var(--navy);
  border-color: var(--navy);
}
.faq-item details[open] .faq-item__chevron::before,
.faq-item details[open] .faq-item__chevron::after{
  background: var(--cream);
}
.faq-item details[open] .faq-item__chevron::after{
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-item summary:hover .faq-item__chevron{
  border-color: var(--gold);
}

.faq-item__a{
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  animation: faqSlide .45s var(--ease);
}
.faq-item__a > p{
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--navy-soft);
  max-width: 60ch;
  font-style: normal;
}
.faq-item__a strong{
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--terra);
}

@keyframes faqSlide{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}

.faq__cta{
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy-soft);
}
.faq__cta a{
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color var(--duration) var(--ease);
}
.faq__cta a:hover{ color: var(--gold-deep); }


/* ─── 12.6 MODALES (<dialog> natif) ──────────────── */
.modal{
  /* Reset des styles natifs <dialog> */
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(720px, 92vw);
  width: 100%;
  max-height: 88vh;
  margin: auto;
  color: var(--ink);
  overflow: visible;
}
.modal:not([open]){ display: none; }

/* Backdrop natif */
.modal::backdrop{
  background: rgba(20,27,58,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalBackdropIn .35s var(--ease);
}

.modal[open]{
  animation: modalIn .45s var(--ease);
}

@keyframes modalIn{
  from{ opacity: 0; transform: translateY(16px) scale(.98); }
  to  { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes modalBackdropIn{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

.modal__inner{
  position: relative;
  background: var(--cream);
  border-radius: 6px;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow:
    0 30px 80px -20px rgba(20,27,58,.45),
    0 0 0 1px rgba(184,149,89,.2);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.modal__inner::-webkit-scrollbar{ width: 8px; }
.modal__inner::-webkit-scrollbar-track{ background: transparent; }
.modal__inner::-webkit-scrollbar-thumb{
  background: var(--hairline);
  border-radius: 4px;
}

.modal__close{
  position: absolute;
  top: 1rem; right: 1rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  display: grid; place-items: center;
  transition: all var(--duration) var(--ease);
  z-index: 2;
}
.modal__close svg{ width: 22px; height: 22px; }
.modal__close:hover{
  background: var(--navy);
  color: var(--cream);
  transform: rotate(90deg);
}

.modal__eyebrow{
  font-family: var(--font-sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 1rem;
  padding-right: 3rem; /* éviter de passer sous le bouton close */
}

.modal__title{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-bottom: 2rem;
  padding-right: 3rem;
}

.modal__intro{
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.modal__content h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: .8rem;
  font-variation-settings: "opsz" 16;
}
.modal__content h3:first-child{ margin-top: 0; }

.modal__content p{
  font-size: .98rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 1rem;
  max-width: 62ch;
}
.modal__content em{
  font-family: var(--font-serif);
  color: var(--gold-deep);
  font-style: italic;
  font-size: 1.02em;
}
.modal__content strong{
  color: var(--navy);
  font-weight: 500;
}

.modal__defs{
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: .4rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.modal__defs dt{
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--navy-soft);
  font-size: .85rem;
  letter-spacing: .04em;
}
.modal__defs dd{
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--navy);
}

.modal__list{
  margin-bottom: 1.2rem;
  padding-left: 1.2rem;
}
.modal__list li{
  list-style: none;
  position: relative;
  font-size: .98rem;
  line-height: 1.6;
  padding: .25rem 0;
  color: var(--ink);
}
.modal__list li::before{
  content:"";
  position: absolute;
  left: -1rem; top: 1em;
  width: 6px; height: 1px;
  background: var(--gold);
}

.modal__notice{
  margin-top: 2.5rem !important;
  padding: 1rem 1.2rem;
  background: rgba(184,149,89,.08);
  border-left: 2px solid var(--gold);
  font-family: var(--font-serif);
  font-size: .92rem !important;
  font-style: italic;
  color: var(--navy-soft);
  line-height: 1.5;
}



/* ─── 14. ANIMATIONS DE RÉVÉLATION ────────────────── */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}


/* ─── 15. RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px){
  .main-nav ul{ gap: 1rem; }
  .main-nav a{ font-size: .85rem; }
  .steps{ grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px){
  .main-nav, .cta-pill--nav{ display: none; }
  .nav-toggle{ display: block; }
  .nav-shell{ grid-template-columns: 1fr auto; }

  .presentation__grid,
  .apropos__container{ grid-template-columns: 1fr; }
  .presentation__body{ border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 1.5rem; }

  .domain{ grid-template-columns: 70px 1fr; gap: 1.25rem; }
  .domain__num{ font-size: 1.6rem; }
  .domain__num::after{ width: 28px; }

  .tarifs__grid{ grid-template-columns: 1fr; }
  .contact__grid{ grid-template-columns: 1fr; }
  .paiement{ grid-template-columns: 1fr; }

  .hero__meta{ grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__actions{ flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero__actions .cta-pill{ width: 100%; justify-content: center; }

  .apropos__visual{ position: static; }
  .apropos__figure img{ max-width: 220px; }

  /* FAQ : on resserre la colonne du numéro */
  .faq-item summary,
  .faq-item__a{ grid-template-columns: 36px 1fr 28px; gap: .75rem; }
  .faq-item__num{ font-size: .7rem; }

  /* Modales : padding intérieur plus compact + close repositionné */
  .modal{ max-width: 100%; max-height: 100vh; }
  .modal__inner{ border-radius: 0; max-height: 100vh; }
  .modal__defs{ grid-template-columns: 1fr; gap: .1rem 0; }
  .modal__defs dt{ margin-top: .8rem; }
  .modal__defs dt:first-child{ margin-top: 0; }
}

@media (max-width: 480px){
  /* Nom complet affiché sur petit écran : les deux lignes passent en ligne,
     séparées par une espace, plutôt que d'empiler / masquer le prénom. */
  .brand__name{ flex-direction: row; gap: .3em; align-items: center; }
  .brand__name-line1{ font-size: 1.05rem; }
  .brand__name-line2{ font-size: 1.05rem; }
  .steps{ grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__grid{ grid-template-columns: 1fr; }
}

/* Très petits écrans : on réduit un peu le logo pour garantir la place du nom. */
@media (max-width: 360px){
  .brand__mark{ width: 34px; height: 34px; }
  .brand__name-line1, .brand__name-line2{ font-size: .98rem; }
}