/* ===================================================================
   THEMIS CONSEIL — feuille de style
   Direction artistique : épurée, institutionnelle, nuances de blanc
   chaud (ivoire) / gris chaud / noir — sans couleur d'accent.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --black: #15130f;
  --near-black: #211d17;
  --gray-900: #322c23;
  --gray-700: #5c5346;
  --gray-500: #7c7262; /* assombri le 10/09/2026 (contraste WCAG AA — 4.6:1 sur fond blanc, contre 3.6:1 avant) */
  --gray-300: #cfc3ab;
  --gray-150: #e9e1d1;
  --gray-100: #f5f0e6;
  --white: #fdfbf6;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container: 1180px;
  --gutter: clamp(24px, 5vw, 72px);

  --transition: 220ms ease;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--near-black);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width: 100%; display:block; }

/* Titre présent pour la structure/l'accessibilité (navigation par titres
   au clavier ou au lecteur d'écran) mais sans impact visuel — à utiliser
   plutôt que de supprimer un h2 de section devenu gênant visuellement. */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a{ color: inherit; text-decoration: none; }

ul{ margin:0; padding:0; list-style:none; }

h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.4rem, 4.4vw, 4rem); font-weight: 600; }
h1 .hl, .hero-lede .hl{
  background: var(--black);
  color: var(--white);
  padding: 0 0.18em;
  line-height: 1.04;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
h1 .hl-beige, .hero-lede .hl-beige{
  background: var(--gray-300);
  color: var(--black);
  padding: 0 0.18em;
  line-height: 1.04;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
h2{ font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
h3{ font-size: clamp(1.2rem, 1.6vw, 1.5rem); }

p{
  margin: 0 0 1.1em;
  color: var(--gray-700);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Textes courts qui ne doivent pas être justifiés (CTA centrés, légendes de pied de page) */
.center-cta p,
.footer-col p,
.news-subscribe p{ text-align: left; hyphens: none; }
.center-cta p{ text-align: center; }

.fill-note{ text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow{
  display:flex;
  align-items:center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 1.1em;
}
.eyebrow::before{
  content:"";
  width: 28px;
  height: 1px;
  background: var(--black);
  display:block;
}

/* Icône Thémis (yeux bandés) — utilisée en accompagnement de certains eyebrows */
.eyebrow-themis::before{ width: 14px; }
.eyebrow-icon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gray-700);
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--black);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary{
  background: var(--black);
  color: var(--white);
}
.btn-primary:hover{ background: var(--gray-900); border-color: var(--gray-900); }

.btn-secondary{
  background: transparent;
  color: var(--black);
}
.btn-secondary:hover{ background: var(--black); color: var(--white); }

.btn-ghost-light{
  border-color: rgba(253,251,246,0.5);
  color: var(--white);
}
.btn-ghost-light:hover{ background: var(--white); color: var(--black); border-color: var(--white); }

.btn-arrow{ transition: transform var(--transition); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,251,246,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gray-150);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 23px;
  padding-bottom: 23px;
}
.logo{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.logo span{ color: var(--gray-500); font-weight: 500; }
.logo-main{ margin-left: -0.04em; white-space: nowrap; }
/* En dessous de 1024px, le menu complet (avant le passage au menu mobile
   à 720px) ne laisse plus assez de place pour garder "THEMIS CONSEIL" sur
   une seule ligne sans que le logo touche le menu : on autorise alors de
   nouveau le retour à la ligne, plutôt que de laisser les deux déborder. */
@media (max-width: 1024px){
  .logo-main{ white-space: normal; }
}
.logo-tag{
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gray-500);
  margin-top: 3px;
}

.main-nav ul{
  display:flex;
  gap: clamp(16px, 2vw, 34px);
  align-items:center;
}
.main-nav a{
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--gray-700);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color var(--transition);
}
.main-nav a:hover, .main-nav a.active{ color: var(--black); }
.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:1px;
  background: var(--black);
}
.main-nav a.cta-link{
  border: 1px solid var(--black);
  padding: 10px 18px;
  color: var(--black);
  white-space: nowrap;
}
.main-nav a.cta-link:hover{ background: var(--black); color: var(--white); }

.nav-toggle{
  display:none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span{
  width: 24px; height: 1px; background: var(--black); display:block; transition: var(--transition);
}

/* ---------- Hero ---------- */
.hero{
  padding-top: clamp(70px, 12vw, 140px);
  padding-bottom: clamp(60px, 10vw, 110px);
  border-bottom: 1px solid var(--gray-150);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items:end;
}
.hero h1{ margin-bottom: 0.4em; }
.hero-lede{
  font-size: 1.05rem;
  color: var(--gray-700);
  max-width: 46ch;
}
.hero-side{
  border-left: 1px solid var(--gray-150);
  padding-left: clamp(20px, 3vw, 40px);
}
.hero-side p{ font-size: 0.95rem; }
.hero-figure{
  max-width: clamp(340px, 44vw, 560px);
  margin: 0 0 clamp(24px, 3vw, 34px);
}
.hero-figure img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 20px rgba(21,19,15,0.1));
}
.hero-cta-row{
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ---------- Hero en fond noir ---------- */
.hero.section-dark{ border-bottom: none; }
.hero.section-dark .hero-side{ border-left-color: rgba(253,251,246,0.16); }
.hero.section-dark .motif-ripple--light{ color: rgba(253,251,246,0.08); }
.hero.section-dark .btn-primary{ background: var(--white); color: var(--black); border-color: var(--white); }
.hero.section-dark .btn-primary:hover{ background: var(--gray-100); border-color: var(--gray-100); }
.hero.section-dark .btn-secondary{ color: var(--white); border-color: rgba(253,251,246,0.5); }
.hero.section-dark .btn-secondary:hover{ background: var(--white); color: var(--black); border-color: var(--white); }
.hero.section-dark .hl{ background: var(--white); color: var(--black); }

/* ---------- Sections génériques ---------- */
.section{
  padding-top: clamp(60px, 9vw, 110px);
  padding-bottom: clamp(60px, 9vw, 110px);
}
.section-border-top{ border-top: 1px solid var(--gray-150); }
.section-dark{
  background: var(--black);
  color: var(--white);
}
.section-dark p{ color: var(--gray-300); }
.section-dark .eyebrow{ color: var(--gray-300); }
.section-dark .eyebrow::before{ background: var(--white); }
.section-alt{ background: var(--gray-100); }
.slogan-banner{
  padding-top: clamp(30px, 4vw, 44px);
  padding-bottom: clamp(30px, 4vw, 44px);
  text-align: center;
}
.slogan-rule{
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gray-300);
  margin: 0 auto 1.1em;
}
.slogan-text{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--black);
  margin: 0;
  text-align: center;
}

.section-head{
  max-width: 640px;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.stat-highlight{ font-weight: 700; font-size: 1.18em; }

/* ---------- Titre "Notre offre" : apparition progressive (accueil) ----------
   Espace de noms dédié (offer-stat-row / offer-stat-chip) : le site avait
   déjà un ".stat-row" / ".stat" pour la section "Chiffres clés", plus loin
   dans cette feuille de style — la collision de noms faisait basculer ce
   titre en grille 3 colonnes égales et cassait la mise en page. */
.section-head.center.offer-title-reveal{ max-width: 1080px; }
.offer-stat-row{
  display:flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px 44px;
  flex-wrap: wrap;
  margin: 0.15em 0 0.6em;
}
.offer-stat-chip{
  display:inline-flex;
  align-items: baseline;
  gap: 0.4em;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.offer-stat-chip .stat-num{
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 6.4rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--black);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
/* Une couleur par chiffre, dans la palette du site : noir plein, beige (taupe)
   plein, et beige clair plein — un blanc plein serait invisible sur le fond
   clair de la section, d'où ce beige clair pour le 3e chiffre. */
.offer-stat-chip:nth-child(1) .stat-num{ color: var(--black); }
.offer-stat-chip:nth-child(2) .stat-num{ color: var(--gray-500); }
.offer-stat-chip:nth-child(3) .stat-num{ color: var(--gray-300); }
.offer-stat-chip .stat-label{
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--gray-700);
  white-space: nowrap;
  padding-bottom: 0.5em;
}
.offer-tagline{
  display:block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.offer-title-reveal.in-view .offer-stat-chip,
.offer-title-reveal.in-view .offer-tagline{
  opacity: 1;
  transform: translateY(0);
}
.offer-title-reveal.in-view .offer-stat-chip:nth-child(1){ transition-delay: 0.05s; }
.offer-title-reveal.in-view .offer-stat-chip:nth-child(2){ transition-delay: 0.3s; }
.offer-title-reveal.in-view .offer-stat-chip:nth-child(3){ transition-delay: 0.55s; }
.offer-title-reveal.in-view .offer-tagline{ transition-delay: 0.85s; }
@media (max-width: 720px){
  .offer-stat-row{ flex-direction: column; align-items: center; gap: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .offer-stat-chip, .offer-tagline{ opacity:1; transform:none; transition:none; }
}

/* ---------- Grilles pratiques ---------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,60px); }
/* .contact-grid : donne plus de place au formulaire qu'à la colonne
   d'infos pratiques, mais seulement au-dessus de 720px — auparavant un
   style en ligne figeait ce ratio même sur mobile, prenant le pas sur la
   règle .grid-2 (colonne unique) ci-dessous et provoquant un débordement
   horizontal de toute la page sur mobile. */
@media (min-width: 721px){
  .contact-grid{ grid-template-columns: 1.5fr 1fr; }
}
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gray-150); border: 1px solid var(--gray-150); }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px,3vw,40px); }

/* ---------- Badges icônes ---------- */
.icon-badge{
  width: 46px;
  height: 46px;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gray-900);
  background: transparent;
  flex-shrink:0;
  margin-bottom: 1.1em;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.icon-badge svg{ width: 20px; height: 20px; display:block; }

/* Clin d'œil tricolore au survol des trois versants de la fonction
   publique (le-cabinet.html) : bleu / blanc / rouge, dans l'ordre du
   drapeau. Limité à ces trois cartes — le reste du site reste sans
   couleur d'accent. */
.pillar-card--fpe:hover .icon-badge{ border-color:#000091; color:#000091; background: rgba(0,0,145,0.06); }
.pillar-card--fpt:hover .icon-badge{ border-color: var(--gray-900); color: var(--gray-900); background: #ffffff; }
.pillar-card--fph:hover .icon-badge{ border-color:#e1000f; color:#e1000f; background: rgba(225,0,15,0.06); }
.section-dark .icon-badge{ border-color: rgba(253,251,246,0.28); color: var(--white); }
.price-card.is-featured .icon-badge,
.price-card.is-featured .icon-badge-sm{ border-color: rgba(255,255,255,0.28); color: var(--white); }

.icon-badge-sm{
  width: 36px;
  height: 36px;
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gray-900);
  flex-shrink:0;
}
.icon-badge-sm svg{ width: 16px; height: 16px; display:block; }

/* ---------- Motif décoratif (galet / ondes) ---------- */
.section-motif{ position: relative; overflow: hidden; }
.section-motif > .container,
.section-motif > .hero-grid{ position: relative; z-index: 1; }
.motif-ripple{
  position: absolute;
  z-index: 0;
  right: clamp(-40px, -2vw, 10px);
  bottom: clamp(-50px, -4vw, -10px);
  width: clamp(220px, 24vw, 360px);
  height: auto;
  color: rgba(253,251,246,0.16);
  pointer-events: none;
}
.motif-ripple--light{ color: rgba(21,19,15,0.05); }
.hero .motif-ripple--light{ top: clamp(-30px,-2vw,0px); bottom:auto; right: clamp(-20px,0vw,20px); }

/* ---------- Cartes pilier / prestation ---------- */
.pillar-card{
  background: var(--white);
  padding: clamp(28px, 3vw, 40px);
  transition: var(--transition);
}
.pillar-card:hover{ background: var(--gray-100); }
.pillar-num{
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-bottom: 1.2em;
  display:block;
}
.pillar-card h3{ margin-bottom: 0.5em; }
.pillar-card p{ font-size: 0.93rem; margin-bottom: 1.4em; }
.pillar-link{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
}

/* ---------- Prestation détaillée ---------- */
.service-block{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(30px, 5vw, 70px);
  padding-top: clamp(50px, 6vw, 80px);
  padding-bottom: clamp(50px, 6vw, 80px);
  border-top: 1px solid var(--gray-150);
}
.service-block:last-child{ padding-bottom: 0; }
.service-meta .pillar-num{ margin-bottom: 0.6em; }
.service-meta h2{ margin-bottom: 0.3em; }
.service-tag{
  display:inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
  padding: 5px 12px;
  margin-top: 0.5em;
}
.service-body h4{
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 1.6em;
  margin-bottom: 0.8em;
}
.service-body h4:first-child{ margin-top:0; }
.service-body ul{ margin-bottom: 1.2em; }
.service-body li{
  padding: 10px 0;
  border-top: 1px solid var(--gray-150);
  color: var(--gray-700);
  font-size: 0.95rem;
}
.service-body li:last-child{ border-bottom: 1px solid var(--gray-150); }

.fill-note{
  background: var(--gray-100);
  border-left: 2px solid var(--black);
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--gray-700);
  font-style: italic;
}

/* ---------- Photo de profil ---------- */
.profile-frame{
  position: relative;
  /* Aligne le haut de la photo avec le début du premier paragraphe de la
     colonne de texte (plutôt qu'avec l'eyebrow "Présentation" au-dessus) */
  margin-top: 31px;
}
.profile-frame img{
  width: 100%;
  height: auto;
  display:block;
}
.profile-caption{
  display:flex;
  justify-content: space-between;
  align-items:baseline;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-150);
}
.profile-caption .name{
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
}
.profile-caption .role{
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ---------- Illustration (mythe) ---------- */
.artwork-frame{
  margin: clamp(40px, 5vw, 68px) auto 0;
  max-width: 560px;
  border: 1px solid rgba(253,251,246,0.18);
  padding: 14px;
}
.artwork-frame img{
  width: 100%;
  height: auto;
  display: block;
}
.artwork-caption{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(253,251,246,0.18);
  font-size: 0.78rem;
  color: var(--gray-300);
  text-align: center;
}

/* ---------- Badges universités ---------- */
.uni-badges{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background: var(--gray-150);
  border: 1px solid var(--gray-150);
}
.uni-badge{
  flex:1 1 0;
  min-width: 108px;
  background: var(--white);
  padding: 16px 10px;
  font-family: var(--serif);
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align:center;
  color: var(--gray-700);
}

/* ---------- Parcours / expériences ---------- */
.timeline{ margin-top: 0.5em; }
.timeline-item{
  padding: 20px 0;
  border-top: 1px solid var(--gray-150);
  display:grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(16px, 3vw, 30px);
}
.timeline-list .timeline-item:last-child{ border-bottom: 1px solid var(--gray-150); }
.timeline-date{
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding-top: 2px;
}
.timeline-item h4{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.3em;
}
.timeline-item p{ font-size: 0.9rem; margin-bottom:0; }

/* ---------- Volets (offre Trajectoire) ---------- */
.volet-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-150);
  border: 1px solid var(--gray-150);
  margin: 1.4em 0 1.8em;
}
.volet-card{
  background: var(--white);
  padding: clamp(28px, 3vw, 40px);
  scroll-margin-top: 100px;
  display:flex;
  flex-direction: column;
  transition: var(--transition);
}
.volet-card:hover{ background: var(--gray-100); }
.volet-card .volet-letter{
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  display:block;
  margin-bottom: 1em;
}
.volet-card h5{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 0.4em;
}
.volet-card p{ font-size: 0.88rem; margin-bottom:0; flex-grow: 1; }
.volet-card--wide{ grid-column: 1 / -1; }
.volet-format{
  font-size: 0.8rem;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--gray-150);
  color: var(--gray-700);
}
.volet-card--plus{ background: var(--black); color: var(--white); }
.volet-card--plus:hover{ background: var(--gray-900); }
.volet-card--plus .icon-badge{ border-color: rgba(255,255,255,0.28); color: var(--white); }
.volet-card--plus p{ color: var(--gray-300); }
.volet-card--plus .volet-format{ color: var(--gray-300); border-top-color: rgba(255,255,255,0.15); }

/* ---------- Etapes Trajectoire (fusion offre / tarifs) ---------- */
.trajectoire-step{ scroll-margin-top: 100px; }
.trajectoire-step-label{
  display:flex;
  align-items:center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 1.2em;
}
.trajectoire-step-num{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 600;
  flex-shrink:0;
}
.trajectoire-connector{
  display:flex;
  align-items:center;
  justify-content:center;
  position: relative;
  margin: clamp(30px, 4vw, 48px) 0;
}
.trajectoire-connector::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background: var(--gray-150);
}
.trajectoire-connector span{
  position:relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--gray-500);
}

/* ---------- Liens tags (aperçu des volets sur l'accueil) ---------- */
.tag-links{
  display:flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 1.1em;
}
.tag-links a{
  font-size: 0.78rem;
  color: var(--gray-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tag-links a:hover{ color: var(--black); }

/* ---------- Offre unique Trajectoire (accueil) ---------- */
.trajectoire-feature{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px,5vw,64px);
  border: 1px solid var(--gray-150);
  padding: clamp(32px,4vw,56px);
}
.trajectoire-feature > div{ min-width: 0; }
.trajectoire-feature .btn{ white-space: normal; text-align:left; }
.trajectoire-feature .rate{
  font-family: var(--serif);
  font-size: clamp(2.1rem,3.4vw,2.6rem);
  font-weight: 700;
  margin: 0.9em 0 1.3em;
}
.trajectoire-feature .rate span{
  display:block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--gray-500);
  margin-top: 0.35em;
}
.module-menu{ display:flex; flex-direction:column; justify-content:center; }
.module-row{
  display:flex;
  align-items:flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--gray-150);
}
.module-row:last-child{ border-bottom: 1px solid var(--gray-150); }
.module-row .module-text{ display:flex; flex-direction:column; gap: 3px; padding-top: 2px; }
.module-row .module-name{
  font-family: var(--serif);
  font-size: 1.02rem;
}
.module-row .module-desc{ font-size: 0.82rem; color: var(--gray-500); }
.module-group-head{
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding: 18px 0 2px;
}
.module-group:first-child .module-group-head{ padding-top: 0; }
.module-group{ position: relative; }
.module-group--plus{
  background: var(--black);
  color: var(--white);
  padding: 4px 20px 4px;
  margin-top: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(21,19,15,0.14), 0 20px 36px -20px rgba(21,19,15,0.4);
}
.module-group--plus .module-group-head{ color: var(--gray-300); padding-top: 18px; }
.module-group--plus .module-row{ border-top-color: rgba(255,255,255,0.15); }
.module-group--plus .module-row:last-child{ border-bottom-color: rgba(255,255,255,0.15); }
.module-group--plus .module-desc{ color: var(--gray-300); }
.module-group--plus .icon-badge-sm{ border-color: rgba(255,255,255,0.28); color: var(--white); }
.module-group-badge{
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--gray-300);
  border-radius: 100px;
  padding: 3px 10px;
  margin-left: 8px;
}
.module-group--plus .module-group-badge{ border-color: rgba(255,255,255,0.3); }

/* ---------- Grille tarifs ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-150);
  border: 1px solid var(--gray-150);
}
.pricing-grid-2{ grid-template-columns: repeat(2, 1fr); }
.price-card{
  background: var(--white);
  padding: clamp(28px, 3vw, 40px);
  display:flex;
  flex-direction: column;
  transition: var(--transition);
}
.price-card:hover{ background: var(--gray-100); }
.price-card.is-featured{ background: var(--black); color: var(--white); }
.price-card.is-featured:hover{ background: var(--gray-900); }
.price-card.is-featured p{ color: var(--gray-300); }
.price-card.is-featured .price-format{ color: var(--gray-300); }
.price-card.is-featured .price-included{ color: var(--gray-300); border-top-color: rgba(255,255,255,0.15); }
.price-format{
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 1em;
}
.price-amount{
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 600;
  margin-bottom: 0.2em;
}
.price-amount sup{ font-size: 0.9rem; font-weight: 500; margin-left: 2px; }
.price-card h3{ margin-bottom: 0.6em; }
.price-card p{ font-size: 0.9rem; flex-grow:1; }

/* ---------- Offres groupées par formule (volets + tarif fusionnés) ---------- */
.offer-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  margin: 1.6em 0 1.8em;
  align-items: start;
}
.offer-column{
  background: var(--white);
  border: 1px solid var(--gray-150);
  border-radius: 10px;
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  box-shadow: 0 1px 2px rgba(21,19,15,0.04), 0 12px 28px -18px rgba(21,19,15,0.18);
  transition: var(--transition);
}
.offer-column::before{
  content:'';
  position:absolute;
  top:0; left: clamp(28px,3vw,40px); right: clamp(28px,3vw,40px);
  height: 3px;
  background: var(--gray-300);
  border-radius: 0 0 2px 2px;
}
.offer-column:hover{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 4px 10px rgba(21,19,15,0.08), 0 32px 56px -20px rgba(21,19,15,0.28);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce){
  .offer-column:hover{ transform: none; }
}
.offer-column--dark{
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: 0 2px 4px rgba(21,19,15,0.14), 0 28px 48px -20px rgba(21,19,15,0.45);
}
.offer-column--dark:hover{
  box-shadow: 0 6px 14px rgba(0,0,0,0.35), 0 36px 60px -18px rgba(0,0,0,0.6);
}
.offer-column--dark::before{ background: var(--gray-300); }
.offer-tier-badge{
  position:absolute;
  top: clamp(20px, 2.4vw, 28px);
  right: clamp(20px, 2.4vw, 28px);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: 100px;
  padding: 5px 12px;
}
.offer-column--dark .offer-tier-badge{ color: var(--gray-300); border-color: rgba(255,255,255,0.3); }
.offer-column-head{
  padding-bottom: clamp(24px, 3vw, 32px);
  margin-bottom: clamp(24px, 3vw, 32px);
  margin-top: 0.4em;
  border-bottom: 1px solid var(--gray-150);
}
.offer-column--dark .offer-column-head{ border-bottom-color: rgba(255,255,255,0.15); }
.offer-column-head p{ font-size: 0.92rem; margin: 0; }
.offer-column--dark .offer-column-head p{ color: var(--gray-300); }
.check-list{ list-style:none; margin: 0.2em 0 0; padding:0; display:flex; flex-direction:column; gap: 12px; }
.check-item{ display:flex; align-items:flex-start; gap:10px; font-size:0.92rem; line-height:1.4; color: var(--gray-700); }
.check-icon{
  flex:none;
  width:20px; height:20px;
  margin-top:0.1em;
  border:1.5px solid var(--black);
  border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  color: var(--black);
}
.check-icon svg{ width:12px; height:12px; }
.offer-column--dark .check-item{ color: var(--gray-300); }
.offer-column--dark .check-icon{ border-color: var(--white); color: var(--white); }
.offer-column--dark .price-format{ color: var(--gray-300); }
.offer-column--dark .icon-badge-sm,
.offer-column--dark .icon-badge{ border-color: rgba(255,255,255,0.28); color: var(--white); }
.offer-volet{ padding: clamp(16px, 2vw, 22px) 0; border-top: 1px solid var(--gray-150); }
.offer-volet:first-child{ border-top: none; padding-top: 0; }
.offer-column--dark .offer-volet{ border-top-color: rgba(255,255,255,0.15); }
.offer-volet h5{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.7em 0 0.4em;
}
.offer-volet p{ font-size: 0.88rem; margin-bottom:0; }
.offer-column--dark .offer-volet p{ color: var(--gray-300); }

/* ---------- Volets "Prestations" : retournement au survol (ou au tap sur mobile/tablette), exemples de situations ----------
   .is-flipped est ajoutée/retirée par js/script.js au tap ou au clic, en
   complément de :hover/:focus-within qui couvrent déjà la souris et le
   clavier — sur un écran tactile, il n'existe pas de survol fiable, donc
   sans ce tap-to-flip le contenu de la face arrière (l'exemple concret)
   restait tout simplement inaccessible sur mobile. */
.volet-flip-wrap{ cursor: pointer; perspective: 1400px; }
.volet-flip{
  position: relative;
  min-height: 168px;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.volet-flip-wrap:hover .volet-flip,
.volet-flip-wrap:focus-within .volet-flip,
.volet-flip-wrap.is-flipped .volet-flip{ transform: rotateY(180deg); }
.volet-face{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.volet-face--front{ position: relative; }
.volet-face--back{
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6em;
}
.volet-example-q{
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem !important;
  color: var(--gray-700);
}
.offer-column--dark .volet-example-q{ color: var(--gray-300); }
.volet-example-a{ font-size: 0.88rem; font-weight: 500; }
.volet-flip-hint{
  position: absolute;
  top: 2px;
  right: 0;
  width: 16px; height: 16px;
  color: var(--gray-300);
  opacity: 0.7;
}
.volet-flip-hint svg{ width: 100%; height: 100%; display: block; }
.offer-column--dark .volet-flip-hint{ color: rgba(255,255,255,0.3); }
@media (prefers-reduced-motion: reduce){
  .volet-flip{ transition: none; }
  .volet-flip-wrap.is-flipped .volet-flip{ transform: rotateY(180deg); }
}
@media (max-width: 760px){
  .offer-columns{ grid-template-columns: 1fr; }
}

/* ---------- Cartes de comparaison de formules (accueil) ---------- */
.format-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 1.1em;
}
.format-pill{
  font-family: var(--serif);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  border:1.5px solid var(--black);
  border-radius:100px;
  padding:7px 20px;
  white-space:nowrap;
}
.offer-column--dark .format-pill{ border-color: rgba(255,255,255,0.55); color: var(--white); }
.format-tag{
  font-family: var(--sans);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--gray-700);
  border:1px solid var(--gray-300);
  border-radius:100px;
  padding:5px 12px;
}
.offer-column--dark .format-tag{ color: var(--gray-300); border-color: rgba(255,255,255,0.3); }
.offer-column h3{ font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.offer-column--dark > p{ color: var(--gray-300); }
.format-checklist{
  list-style:none;
  margin: 1.4em 0 0;
  padding:0;
}
.format-checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px 0;
  font-size:0.9rem;
  color: var(--gray-700);
  border-top:1px solid var(--gray-150);
}
.format-checklist li:first-child{ border-top:none; padding-top:0; }
.format-checklist svg{
  flex:none;
  width:18px;
  height:18px;
  margin-top:0.15em;
  color: var(--gray-500);
}
.offer-column--dark .format-checklist li{ color: var(--gray-300); border-top-color: rgba(255,255,255,0.15); }
.offer-column--dark .format-checklist svg{ color: var(--gray-300); }
.offer-columns.format-compare{ align-items: stretch; }
.offer-columns.format-compare .offer-column{ display:flex; flex-direction:column; }
.format-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: auto;
  padding-top: 1.4em;
  border-top:1px solid var(--gray-150);
}
.offer-column--dark .format-card-foot{ border-top-color: rgba(255,255,255,0.15); }
.format-price{ font-family: var(--serif); font-weight:700; font-size:1.3rem; }
.format-cta{ font-family: var(--sans); font-size:0.85rem; font-weight:600; text-decoration:underline; }
.offer-column--dark .format-cta{ color: var(--white); }
.price-included{
  font-size: 0.8rem;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--gray-150);
  color: var(--gray-700);
}

/* ---------- Bandeau avertissement / neutralité ---------- */
.notice-band{
  border: 1px solid var(--gray-300);
  padding: clamp(24px, 3vw, 34px);
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items:start;
}
.notice-band .notice-icon{
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height:1;
  color: var(--gray-500);
}
.notice-band h3{ font-size: 1.05rem; margin-bottom: 0.4em; }
.notice-band p{ font-size: 0.9rem; margin-bottom: 0.6em; }
.notice-band p:last-child{ margin-bottom:0; }

/* ---------- Chiffres clés / repères ---------- */
.stat-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--gray-150);
  border-bottom: 1px solid var(--gray-150);
}
.stat{
  padding: clamp(28px,3vw,40px) clamp(16px,2vw,30px);
  border-left: 1px solid var(--gray-150);
}
.stat:first-child{ border-left:none; }
.stat .num{
  display:block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 0.2em;
}
.stat .label{ font-size: 0.82rem; color: var(--gray-500); }

/* ---------- Etapes / process ---------- */
/* Bandeau photo plein écran (triptyque), placé hors du .container pour
   remplir toute la largeur de la fenêtre en 3 parts égales — voir markup
   dans prestations.html : deux .container encadrent ce bandeau (l'un pour
   le titre de section, l'autre pour les numéros/titres/textes), le
   bandeau photo lui-même est un enfant direct de la section. Comme
   .section-motif applique déjà `position:relative; z-index:1` à ses
   enfants directs .container, on donne le même traitement ici pour que
   le bandeau reste au-dessus du motif décoratif en arrière-plan. */
.method-photos-row{
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  margin: clamp(28px,4vw,44px) 0;
}
.method-photo{
  position: relative;
  flex: 1 1 0;
  height: clamp(220px, 26vw, 420px);
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.7s ease, transform 1.7s cubic-bezier(0.16,0.6,0.3,1);
}
.method-photo img{ width:100%; height:100%; object-fit: cover; display:block; }
/* Chaque photo arrive de son propre côté : la gauche glisse depuis la
   gauche, le centre monte depuis le bas, la droite glisse depuis la
   droite — déclenché par IntersectionObserver (js/script.js), qui ajoute
   .in-view sur .method-photos-reveal dès que le bandeau entre dans le
   viewport (même mécanique que .hero-figure-reveal / .offer-title-reveal).
   Animation volontairement lente (1.7s + décalage entre les 3 photos) pour
   qu'elle reste bien visible plutôt que de passer trop vite. */
.method-photo--left{ transform: translateX(-90px); }
.method-photo--center{ transform: translateY(90px); }
.method-photo--right{ transform: translateX(90px); }
.method-photos-reveal.in-view .method-photo{ opacity: 1; transform: none; }
.method-photos-reveal.in-view .method-photo--left{ transition-delay: 0s; }
.method-photos-reveal.in-view .method-photo--center{ transition-delay: 0.25s; }
.method-photos-reveal.in-view .method-photo--right{ transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce){
  .method-photo{ opacity: 1; transform: none; transition: none; }
}
@media (max-width: 720px){
  .method-photos-row{ flex-direction: column; gap: 2px; }
  .method-photo{ flex: 0 0 auto; height: 220px; }
  .method-photo--left, .method-photo--center, .method-photo--right{ transform: translateY(40px); }
}
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,30px); }
/* .steps--full : la grille des chiffres est un enfant direct de la section
   (comme .method-photos-row juste au-dessus), sans .container englobant, afin
   que chaque colonne démarre exactement au même bord gauche que la photo
   correspondante — le padding de respiration se fait à l'intérieur de chaque
   colonne (.step-body), jamais sur .steps--full elle-même, pour ne pas décaler
   les pistes de la grille. */
.steps--full{ width: 100%; }
.step{ padding-top: 0; text-align: left; }
/* Chiffre éditorial en filigrane : grand numéro serif très clair (beige),
   posé à gauche du titre — esprit magazine, plus discret qu'un badge. */
.step-body{
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 18px);
  padding-right: clamp(16px, 3vw, 32px);
}
.step-figure{
  flex: 0 0 auto;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 0.75;
  color: var(--gray-300);
}
.step-content{ padding-top: 0.25em; }
.step h4{ font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.4em; }
.step p{ font-size: 0.85rem; text-align: justify; hyphens: none; }

/* ---------- Principes / déontologie ---------- */
.principles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-150);
  border: 1px solid var(--gray-150);
  border-top: 2px solid var(--black);
}
.principle{
  background: var(--white);
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.principle:hover{ background: var(--gray-100); }
.principle .principle-num{
  position: absolute;
  top: 0.3em;
  right: 0.35em;
  font-family: var(--serif);
  color: var(--gray-150);
  font-size: 3.4rem;
  line-height: 1;
  z-index: 0;
}
.principle .icon-badge,
.principle h3,
.principle p{ position: relative; z-index: 1; }
.principle h3{ margin-bottom: 0.5em; }
.principle p{ font-size: 0.93rem; margin-bottom: 0; }

/* ---------- Actualités ---------- */
.news-updated{
  font-size: 0.85rem;
  color: var(--gray-500);
  padding-bottom: clamp(24px,3vw,32px);
  margin-bottom: clamp(32px,4vw,44px);
}
.news-date{
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.news-tag{
  display:inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  border: 1px solid var(--gray-300);
  padding: 3px 10px;
}

.news-featured{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(24px,4vw,50px);
  border: 1px solid var(--gray-150);
  padding: clamp(32px,4vw,48px);
  margin-bottom: clamp(40px,5vw,56px);
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}
.news-featured:hover{ background: var(--gray-100); }
.news-featured-meta{ display:flex; flex-direction:column; gap: 14px; align-items:flex-start; }
.news-featured-body h3{
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin-bottom: 0.55em;
}
.news-featured-body p{ font-size: 0.98rem; color: var(--gray-700); margin-bottom: 1.2em; }

.news-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-150);
  border: 1px solid var(--gray-150);
}
.news-card{
  background: var(--white);
  padding: clamp(28px, 3vw, 36px);
  display:flex;
  flex-direction: column;
  transition: var(--transition);
  color: inherit;
  text-decoration: none;
}
.news-card:hover{ background: var(--gray-100); }
.news-card-meta{ display:flex; align-items:center; gap: 12px; margin: 1em 0 0.9em; flex-wrap:wrap; }
.news-card h4{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.5em;
}
.news-card p{ font-size: 0.88rem; color: var(--gray-700); margin-bottom: 0; flex-grow: 1; }
.news-card--wide{ grid-column: 1 / -1; }
.news-source{
  font-size: 0.76rem;
  color: var(--gray-500);
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--gray-150);
}
.news-read-more{
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  margin-top: 14px;
}

/* ---------- Article statutaire (page détail) ---------- */
.article-meta-row{ display:flex; align-items:center; gap: 12px; margin-bottom: 1.4em; flex-wrap:wrap; }
.article-body.max-w{ max-width: 860px; }
.article-body p{ font-size: 1rem; hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; }
/* h2 plutôt que h3 pour respecter la hiérarchie de titres (h1 de l'article
   puis ce sous-titre, sans saut de niveau) — taille de police alignée sur
   l'ancien h3 pour ne rien changer visuellement. */
.article-body h2{ margin-top: 1.8em; margin-bottom: 0.6em; font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.article-highlights{
  border: 1px solid var(--gray-300);
  padding: clamp(24px,3vw,32px);
  margin: 2em 0;
}
.article-highlights h3{
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 1em;
}
.article-highlights ul{ margin:0; padding:0; list-style:none; }
.article-highlights li{
  padding: 10px 0;
  border-top: 1px solid var(--gray-150);
  font-size: 0.92rem;
  color: var(--gray-900);
}
.article-highlights li:first-child{ border-top:none; padding-top:0; }
.article-back{ display:inline-block; margin-top: 2.4em; }

.news-subscribe{
  background: var(--gray-100);
  padding: clamp(28px,4vw,44px);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: clamp(40px,5vw,60px);
}
.news-subscribe h3{ margin-bottom: 0.3em; }
.news-subscribe p{ margin-bottom:0; font-size:0.9rem; }

/* ---------- Formulaire ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
/* min-width:0 : sans ça, une carte grid ne rétrécit jamais sous la taille
   intrinsèque de son contenu (ici, le <select> "Objet de la demande" dont
   la plus longue option est un texte long) — ce qui forçait la grille,
   et donc toute la page, à déborder horizontalement sur mobile même une
   fois passée en une seule colonne. */
.form-field{ display:flex; flex-direction:column; gap: 8px; min-width: 0; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-700);
  font-weight: 600;
}
.form-field .req{ color: var(--gray-500); font-weight:400; text-transform:none; letter-spacing:0; }
.form-field input,
.form-field select,
.form-field textarea{
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--near-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gray-300);
  padding: 10px 2px;
  transition: border-color var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-bottom-color: var(--black);
}
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 0.82rem;
  color: var(--gray-700);
}
.form-consent input{ margin-top: 4px; }
.form-actions{ margin-top: 8px; display:flex; align-items:center; gap: 20px; flex-wrap: wrap; }
.form-status{ font-size: 0.85rem; color: var(--gray-700); }

.contact-side{
  border-left: 1px solid var(--gray-150);
  padding-left: clamp(20px, 3vw, 44px);
}
.contact-side h3{ font-size: 1rem; margin-top: 1.6em; }
.contact-side h3:first-child{ margin-top:0; }
.contact-side p{ font-size: 0.92rem; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--black);
  color: var(--gray-300);
  padding-top: clamp(50px, 6vw, 80px);
  padding-bottom: 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(40px,5vw,60px);
  border-bottom: 1px solid rgba(253,251,246,0.12);
}
.footer-logo{
  font-family: var(--serif);
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 0.6em;
}
.footer-col h4{
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 1.1em;
}
.footer-col li{ margin-bottom: 0.7em; font-size: 0.9rem; }
.footer-col a:hover{ color: var(--white); }
.footer-bottom{
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.78rem;
  color: var(--gray-500);
}
.footer-bottom a:hover{ color: var(--white); }

/* ---------- Page header (pages internes) ---------- */
.page-hero{
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(40px, 6vw, 70px);
  border-bottom: 1px solid var(--gray-150);
}
.page-hero .hero-lede{ margin-top: 0.6em; max-width: 74ch; }
.breadcrumb{
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-bottom: 1.4em;
  letter-spacing: 0.02em;
}
.breadcrumb a:hover{ color: var(--black); }

/* ---------- Divers ---------- */
.center-cta{ text-align:center; }
.max-w{ max-width: 720px; }
.mx-auto{ margin-left:auto; margin-right:auto; }

hr.rule{ border:none; border-top: 1px solid var(--gray-150); margin: 3em 0; }

/* ---------- Formulaire de rétractation (annexe CGV) ---------- */
.retraction-card{
  background: var(--gray-100);
  border: 1px solid var(--gray-150);
  border-top: 3px solid var(--black);
  padding: clamp(28px, 4vw, 44px);
  margin: 1.6em 0 2.4em;
}
.retraction-card .eyebrow{ margin-bottom: 0.6em; }
.retraction-card h3{
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 0 0 0.2em;
}
.retraction-address{
  font-size: 0.88rem;
  color: var(--gray-500);
  margin-bottom: 1.8em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--gray-150);
}
.retraction-field{ margin-bottom: 1.5em; }
.retraction-field:last-child{ margin-bottom: 0; }
.retraction-field label{
  display:block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.7em;
}
.retraction-line{
  border-bottom: 1px solid var(--gray-300);
  height: 1.7em;
}
.retraction-line-tall{ height: 2.6em; }
.retraction-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.retraction-field-half{ margin-bottom: 0; }
@media (max-width: 600px){
  .retraction-row{ grid-template-columns: 1fr; gap: 1.5em; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-side{ border-left:none; padding-left:0; border-top: 1px solid var(--gray-150); padding-top: 24px; }
  .grid-2{ grid-template-columns: 1fr; }
  .trajectoire-feature{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .volet-grid{ grid-template-columns: 1fr; }
  .news-featured{ grid-template-columns: 1fr; }
  .news-grid{ grid-template-columns: 1fr; }
  .timeline-item{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr 1fr; }
  .service-block{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr; }
  .stat{ border-left:none; border-top: 1px solid var(--gray-150); }
  .stat:first-child{ border-top:none; }
  .principles{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .contact-side{ border-left:none; padding-left:0; border-top: 1px solid var(--gray-150); padding-top: 30px; margin-top: 40px; }
}

/* Le menu complet (5 liens + bouton CTA) a besoin d'environ 960px pour
   tenir sur une seule ligne : en dessous de ce seuil (et notamment entre
   721 et 1023px, une largeur de tablette portrait très courante), il n'y
   avait pas assez de place et la page entière débordait horizontalement.
   Le seuil de bascule vers le menu mobile est donc réglé à 1024px — pas
   720px — pour que le menu hamburger prenne le relais avant que ça arrive.
   Cohérent avec le seuil déjà utilisé pour le retour à la ligne du logo
   (voir .logo-main plus haut). */
@media (max-width: 1024px){
  .main-nav{
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--white);
    transform: translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition: var(--transition);
    padding: 30px var(--gutter);
    border-top: 1px solid var(--gray-150);
  }
  .main-nav.open{ opacity:1; pointer-events:auto; transform:none; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap: 22px; }
  .nav-toggle{ display:flex; }
  /* backdrop-filter on .site-header creates a new containing block for
     position:fixed descendants in Chromium/WebKit — without this override
     the fixed mobile menu would be boxed inside the header instead of
     stretching to the bottom of the viewport. */
  .site-header{ backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 720px){
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .grid-4{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .steps--full{ padding: 0 var(--gutter); }
  .notice-band{ grid-template-columns: 1fr; }
}

/* ---------- Mot du fondateur ---------- */
.founder-note{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--gray-900);
  border-left: 2px solid var(--gray-300);
  padding-left: clamp(18px,2vw,24px);
  margin: 1.7em 0 0;
  text-align: justify;
}
.founder-note cite{
  display:block;
  margin-top: 0.9em;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ---------- Apparition progressive du buste de Thémis ---------- */
.hero-figure-reveal img{
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  filter: blur(10px);
  transition: opacity 1.1s cubic-bezier(.16,.8,.24,1),
              transform 1.1s cubic-bezier(.16,.8,.24,1),
              filter 1.1s cubic-bezier(.16,.8,.24,1);
}
.hero-figure-reveal.in-view img{
  opacity: 1;
  transform: none;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  .hero-figure-reveal img{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ---------- Confirmation d'envoi du formulaire de contact ---------- */
.booking-step{
  border: 1px solid var(--gray-150);
  padding: clamp(28px,3vw,40px);
}
.booking-step h3{ margin-bottom: 0.4em; }
.booking-step > p{ color: var(--gray-700); margin-bottom: 1.6em; }

/* ---------- Mini-diagnostic Trajectoire ---------- */
.diag-box{
  border: 1px solid var(--gray-150);
  background: var(--white);
  padding: clamp(28px,4vw,44px);
}
.diag-question h4{
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 1.2em;
}
.diag-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diag-option{
  text-align: left;
  background: var(--gray-100);
  border: 1px solid var(--gray-150);
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--near-black);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.diag-option:hover{
  background: var(--gray-150);
  border-color: var(--gray-300);
  transform: translateX(2px);
}
.diag-progress{
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 1em;
}
.diag-result h4{
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.8em;
}
.diag-result-volet{
  border-left: 3px solid var(--near-black);
  padding: 4px 0 4px 18px;
  margin-bottom: 1.4em;
}
.diag-result-volet strong{ font-family: var(--serif); font-size: 1.25rem; }
.diag-result-offer{
  display: inline-block;
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: 100px;
  padding: 4px 12px;
  vertical-align: middle;
}
.diag-result-offer--plus{ background: var(--black); color: var(--white); border-color: var(--black); }
.diag-result-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 1.2em;
}
.diag-restart{
  background: none;
  border: none;
  color: var(--gray-700);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ---------- FAQ périmètre juridique ---------- */
.faq-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.faq-item{
  border-bottom: 1px solid var(--gray-150);
  padding: 18px 0;
}
.faq-item summary{
  font-family: var(--serif);
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.3rem;
  color: var(--gray-500);
  transition: transform var(--transition);
}
.faq-item[open] summary::after{ content: '−'; }
.faq-item p{
  color: var(--gray-700);
  margin-top: 0.9em;
  max-width: 68ch;
}

/* ---------- Premiers retours (preuve sociale) ---------- */
.trust-scaffold{ text-align: center; margin-bottom: clamp(28px,3vw,40px); }
.trust-scaffold p{ max-width: 56ch; margin: 0 auto; color: var(--gray-700); }
.trust-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 2px solid var(--black);
}
.trust-card{
  display: block;
  background: var(--white);
  padding: clamp(24px, 2.6vw, 34px);
  text-align: left;
  transition: var(--transition);
}
.trust-card:hover{ background: var(--gray-100); }
.trust-card h3{ font-size: 1.05rem; margin-bottom: 0.4em; text-align: justify; }
.trust-card p{ font-size: 0.88rem; color: var(--gray-500); margin-bottom: 0; text-align: justify; hyphens: none; }

.trust-card-photo{
  position: relative;
  padding: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--gray-150);
}
/* L'image vit sur un calque interne dédié (plutôt que directement en
   background-image du lien) : au survol, on peut ainsi zoomer cette seule
   couche (comme .offer-column:hover ailleurs sur le site) sans jamais être
   percuté par la règle générique .trust-card:hover{ background: ... }, qui
   sinon réinitialise background-size/position au passage de la souris
   (c'était le bug de « changement de couleur » : l'image basculait en
   affichage non recadré, très sombre, le temps du survol). */
.trust-card-photo-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.6s cubic-bezier(0.16,0.6,0.3,1);
  will-change: transform;
}
.trust-card-photo:hover .trust-card-photo-bg{ transform: scale(1.08); }
@media (prefers-reduced-motion: reduce){
  .trust-card-photo-bg{ transition: none; }
  .trust-card-photo:hover .trust-card-photo-bg{ transform: none; }
}
/* Traitement unique pour les 4 cartes : photo pleine (aucun recadrage en
   bande, aucune zone vide), texte blanc, toujours en bas, justifié. Un
   dégradé sombre sous le texte garantit la lisibilité quel que soit le fond
   de la photo à cet endroit (ciel, métal, bitume...), sans avoir besoin
   d'adapter la couleur du texte au cas par cas comme précédemment. */
.trust-card-photo-txt{
  position: absolute;
  left: 0; right: 0; bottom: 0; top: auto;
  padding: 54px 20px 18px;
  background: linear-gradient(to top, rgba(15,13,10,0.82) 0%, rgba(15,13,10,0.55) 55%, rgba(15,13,10,0) 100%);
}
.trust-card-photo-txt h3{ font-size: 1rem; margin: 0 0 0.3em; line-height: 1.2; color: var(--white); }
.trust-card-photo-txt p{ font-size: 0.8rem; line-height: 1.42; color: var(--white); }

/* Neutralité — silhouette aux yeux bandés (portrait, déjà au format 3:4 de la
   carte : aucun recadrage nécessaire). */
.photo-neutralite .trust-card-photo-bg{ background-position: center center; }

/* Confidentialité — cadenas cadré sur la gauche de la photo (grand pan de
   porte jaune vide à droite, laissé hors champ). */
.photo-confidentialite .trust-card-photo-bg{ background-position: 18% center; }

/* Réponse sous 2 jours ouvrés — piste, numéro "2" centré */
.photo-reponse .trust-card-photo-bg{ background-position: center top; }

/* Périmètre clair — fenêtre */
.photo-perimetre .trust-card-photo-bg{ background-position: center center; }

/* Ces deux règles réaffirment les points de rupture responsive de la grille de confiance :
   la règle .trust-grid{ grid-template-columns: repeat(4,1fr); } définie plus haut est placée
   APRÈS les @media (max-width:900px)/(max-width:720px) d'origine dans le fichier, donc à
   spécificité égale elle les emportait toujours, sur tous les écrans. On la neutralise ici. */
@media (max-width: 900px){
  .trust-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .trust-grid{ grid-template-columns: 1fr; }
}