/* ==========================================================================
   adwen.fr · feuille de style unique (charte v2, mode clair)
   Ordre : polices, variables, base, utilitaires, boutons, en-tête,
   puis une partie par section dans l’ordre de la page, pied de page,
   pages annexes et mouvement réduit.
   ========================================================================== */


/* ---------- Polices (auto-hébergées, sous-ensemble latin) ---------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- Variables ---------- */

:root {
  /* Charte Adwen v2 · mode clair (défaut) */
  --blanc-chaud:    #FFFBF7; /* fond de page, jamais de blanc pur */
  --lin:            #FFF3EA; /* fonds secondaires, cartes */
  --encre:          #1C120D; /* texte, bouton secondaire plein */
  --taupe:          #6B5B52; /* texte secondaire (6,3:1) */
  --orange:         #EF5E23; /* accent : point du signe, boutons, segment de titre */
  --orange-profond: #C2410C; /* tout petit texte orange : surtitres, liens, chiffres (5:1) */
  --ambre:          #F59547; /* dégradés uniquement */
  --peche:          #FFD2B3; /* halo du Point chaud, pastilles */
  --bordure:        #EADFD6; /* bordures de cartes, filets */
  --bordure-forte:  #D9C8BC; /* bordure des boutons secondaires */

  /* Sections sombres (#rdv, pied de page) */
  --noir:   #0D0907;
  --creme:  #F7F2EE;
  --gris:   #928076;
  --brun:   #681A08; /* halo, uniquement dans les sections sombres */

  /* Les trois dégradés de la charte, pas un de plus */
  --point-chaud: radial-gradient(circle at var(--x, 70%) var(--y, 50%),
    rgba(239, 94, 35, 0.5) 0%, rgba(245, 149, 71, 0.4) 18%,
    rgba(255, 210, 179, 0.38) 45%, rgba(255, 243, 234, 0) 70%);
  --aube: linear-gradient(160deg, #FFFBF7 0%, #FFF3EA 55%, #FDE4D3 100%);
  --braise: linear-gradient(90deg, #EF5E23, #F59547);

  /* Ombre des cartes : très légère */
  --ombre: 0 30px 60px rgba(28, 18, 13, 0.08);

  /* Polices */
  --police-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Mise en page : le contenu occupe toute la largeur de l’écran,
     avec une marge de 5 % de chaque côté (entre 20 et 120 px) */
  --marge: clamp(20px, 5vw, 120px);
  --espace-section: 96px;
}

@media (max-width: 1023px) {
  :root { --espace-section: 80px; }
}
@media (max-width: 599px) {
  :root { --marge: 20px; --espace-section: 64px; }
}


/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc-chaud);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange-profond); }

:focus-visible {
  outline: 2px solid var(--orange-profond);
  outline-offset: 2px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.04;
  text-wrap: pretty;
}

sup { font-size: 0.65em; line-height: 0; }


/* ---------- Utilitaires ---------- */

.conteneur {
  width: 100%;
  padding-inline: var(--marge);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc-chaud);
  font-weight: 700;
  transform: translateY(-200%);
}
.evitement:focus { transform: none; color: var(--blanc-chaud); }

.surtitre {
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-profond);
}

/* Segment de titre en orange : uniquement en grand corps (plus de 24 px) */
.accent { color: var(--orange); }

.insecable { white-space: nowrap; }

.intro { font-size: 17px; line-height: 1.6; color: var(--taupe); max-width: 640px; }

.pastille {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--peche);
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
}

/* Information manquante, laissée visible volontairement */
.manquant {
  font-family: var(--police-mono);
  font-size: 0.85em;
  color: var(--orange-profond);
}

/* Halo brun : réservé aux sections sombres */
.halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(104 26 8 / var(--opacite, 0.6)), rgb(104 26 8 / 0));
}


/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.bouton svg {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pilule orange, texte Encre (jamais blanc) */
.bouton--principal { background: var(--orange); color: var(--encre); }
.bouton--principal:hover { background: var(--ambre); color: var(--encre); }

/* Pilule bordée, texte Encre */
.bouton--secondaire {
  border: 1.5px solid var(--bordure-forte);
  color: var(--encre);
  font-weight: 500;
}
.bouton--secondaire:hover { border-color: var(--encre); color: var(--encre); }

/* Pilule Encre pleine (navigation) */
.bouton--encre { background: var(--encre); color: var(--blanc-chaud); }
.bouton--encre:hover { background: #3A2A21; color: var(--blanc-chaud); }

.bouton--grand { padding: 16px 26px; font-size: 16px; gap: 10px; }
.bouton--secondaire.bouton--grand { padding: 14.5px 24px; }


/* ---------- En-tête ---------- */

.entete {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--bordure);
  background: var(--blanc-chaud);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 72px;
}

/* Logo : jamais sous 120 px de large, marge libre d’un quart de la hauteur du signe */
.logo {
  flex-shrink: 0;
  padding: 9px;
  margin: -9px;
}
.logo__svg { width: 140px; height: auto; overflow: visible; }
.logo__mot {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 176px;
  letter-spacing: 0.04em;
  fill: var(--encre);
}

.nav { margin-left: auto; }
.nav__liens { display: flex; gap: 32px; font-size: 15px; }
.nav__liens a { color: var(--taupe); }
.nav__liens a:hover { color: var(--encre); }

/* Menu mobile */
.menu { display: none; margin-left: auto; }
.menu__bouton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bordure-forte);
  cursor: pointer;
  list-style: none;
}
.menu__bouton::-webkit-details-marker { display: none; }
.menu__bouton svg { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; }
.menu__icone-fermer, .menu[open] .menu__icone-ouvrir { display: none; }
.menu[open] .menu__icone-fermer { display: block; }

.menu__panneau {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 8px var(--marge) 28px;
  background: var(--blanc-chaud);
  border-bottom: 1px solid var(--bordure);
}
.menu__panneau ul { margin-bottom: 24px; }
.menu__panneau li a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--bordure);
  font-size: 20px;
  font-weight: 700;
}
.menu__panneau .bouton { width: 100%; padding: 18px 24px; font-size: 17px; }

@media (max-width: 1279px) {
  .entete__barre { gap: 28px; }
  .nav__liens { gap: 28px; }
}

@media (max-width: 1023px) {
  .entete__barre { min-height: 76px; }
  .logo__svg { width: 150px; }
  .nav, .entete__bouton { display: none; }
  .menu { display: block; }
}


/* ==========================================================================
   1. Hero : fond Aube, texte puis vidéo de présentation.
   Le Point chaud est derrière la vidéo (un seul par écran).
   ========================================================================== */

.hero {
  position: relative;
  padding-block: 56px 88px;
  background: var(--aube);
  overflow: clip;
}

.hero__texte {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.hero h1 {
  text-wrap: wrap; /* le titre remplit toute la largeur, sans rééquilibrage */
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hero__intro {
  font-size: 18px;
  line-height: 1.5;
  color: var(--taupe);
}

.hero__boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}

.hero__mentions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--taupe);
}
.hero__separateur { color: var(--bordure-forte); }

/* --- Vidéo de présentation --- */

.video {
  position: relative;
  margin-top: 40px;
}

.video__point-chaud {
  --x: 50%;
  --y: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--point-chaud);
  opacity: 0.7;
  pointer-events: none;
}

.video__lecteur {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--bordure);
  border-radius: 28px;
  background: var(--lin);
  box-shadow: var(--ombre);
  object-fit: cover;
}

.video__legende {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 16px;
  font-family: var(--police-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
}

@media (max-width: 1023px) {
  .hero { padding-block: 64px 80px; }
  .video { margin-top: 48px; }
}

@media (max-width: 599px) {
  .hero { padding-block: 40px 56px; }
  .hero__texte { gap: 24px; }
  .hero__intro { font-size: 17px; }
  .hero__boutons .bouton { width: 100%; }
  .hero__mentions { flex-direction: column; align-items: center; gap: 6px; }
  .hero__separateur { display: none; }
  .video { margin-top: 36px; }
  .video__lecteur { border-radius: 18px; }
  .video__point-chaud { width: 220%; }
}


/* ==========================================================================
   Sections : espacement commun et filet de séparation
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--espace-section);
  overflow-x: clip; /* les halos ne débordent pas sur les côtés */
}
.section + .section { border-top: 1px solid var(--bordure); }

.section__entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.section__entete--large { max-width: 960px; margin-bottom: 64px; }

/* Carte générique : fond Lin, bordure 1,5 px */
.carte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1.5px solid var(--bordure);
  border-radius: 22px;
  background: var(--lin);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.carte:hover { transform: translateY(-3px); border-color: var(--bordure-forte); }
.carte__numero {
  font-family: var(--police-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--orange-profond);
}
.carte__titre { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: wrap; }
.carte__texte { font-size: 15px; line-height: 1.5; color: var(--taupe); }

.cartes-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1023px) {
  .cartes-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
  .section__entete, .section__entete--large { margin-bottom: 40px; }
  .carte { padding: 26px; border-radius: 22px; }
  .carte__titre { font-size: 21px; }
  .intro { font-size: 17px; }
}


/* ==========================================================================
   2. Le problème
   ========================================================================== */

.constat__grille {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.constat__grille .section__entete { margin-bottom: 0; }
.constat__texte { max-width: 720px; text-align: center; }


/* ==========================================================================
   3. Pour qui
   ========================================================================== */

.pour-qui__note {
  margin-top: 28px;
  text-align: center;
  font-size: 16px;
  color: var(--taupe);
}


/* ==========================================================================
   4. La méthode
   ========================================================================== */

.methode__parcours { position: relative; }

.methode__etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.etape { display: flex; flex-direction: column; gap: 18px; }
.etape__corps { display: flex; flex-direction: column; gap: 12px; }

.etape__tuile {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1.5px solid var(--bordure);
  border-radius: 24px;
  background: #FFFFFF;
}
.etape__tuile svg { fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.etape__tuile .plein { fill: var(--encre); }

/* Tuile du résultat : petite surface, orange plein autorisé */
.etape--resultat .etape__tuile { background: var(--orange); border-color: var(--orange); }
.etape--resultat .etape__tuile svg { stroke: var(--encre); stroke-width: 1.8; }

.etape__numero {
  font-family: var(--police-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
}
.etape--resultat .etape__numero { color: var(--orange-profond); }
.etape__titre { font-size: 24px; line-height: 1.1; }
.etape__texte { font-size: 15px; line-height: 1.55; color: var(--taupe); }

/* Décalage égal à deux motifs de tirets (4 + 32) pour une boucle sans saut */
@keyframes flux { to { stroke-dashoffset: -72; } }

/* Ligne animée : un rail discret et des tirets orange qui avancent */
.methode__ligne { position: absolute; overflow: visible; }
.methode__ligne--horizontale { left: 0; right: 0; top: 47px; width: 100%; height: 2px; }
.methode__ligne--verticale { display: none; }
.methode__ligne line { vector-effect: non-scaling-stroke; stroke-width: 2; }
.methode__rail { stroke: var(--bordure); }
.methode__flux {
  stroke: var(--orange);
  stroke-dasharray: 4 32;
  animation: flux 1.6s linear infinite;
}

@media (max-width: 1023px) {
  .methode__etapes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .etape { flex-direction: row; align-items: flex-start; gap: 28px; }
  .etape__corps { padding-top: 10px; }
  .methode__ligne--horizontale { display: none; }
  .methode__ligne--verticale { display: block; left: 47px; top: 48px; width: 2px; height: calc(100% - 48px); }
  /* la ligne s’arrête sur la dernière tuile */
  .etape--resultat { position: relative; }
  .etape--resultat::after {
    content: "";
    position: absolute;
    left: 42px;
    top: 96px;
    bottom: -2px;
    width: 12px;
    background: var(--blanc-chaud);
  }
}

@media (max-width: 599px) {
  .etape { gap: 20px; }
  .etape__tuile { width: 72px; height: 72px; border-radius: 20px; }
  .etape__tuile svg { width: 32px; height: 32px; }
  .etape__titre { font-size: 24px; }
  .etape__corps { padding-top: 2px; }
  .methode__ligne--verticale { left: 35px; top: 36px; height: calc(100% - 36px); }
  .etape--resultat::after { left: 30px; top: 72px; }
}


/* ==========================================================================
   5. L’offre
   ========================================================================== */

.offres {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 34px 32px;
  border: 1.5px solid var(--bordure);
  border-radius: 26px;
  background: #FFFFFF;
  overflow: hidden;
}

/* Carte Adwen : seule carte à bordure orange, fond Lin, Point chaud discret */
.offre--adwen { border: 2px solid var(--orange); background: var(--lin); }
.offre__point-chaud {
  --x: 50%;
  --y: 50%;
  position: absolute;
  right: -260px;
  top: -300px;
  width: 620px;
  height: 620px;
  background: var(--point-chaud);
  opacity: 0.6;
  pointer-events: none;
}

.offre__nom {
  position: relative;
  font-family: var(--police-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-profond);
}
.offre--option .offre__nom { color: var(--taupe); }

.offre__prix { position: relative; }
.offre__a-partir { font-size: 17px; color: var(--taupe); }
.offre__montant {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.offre__montant--texte { font-size: 26px; letter-spacing: -0.02em; }
.offre__unite { font-size: 17px; color: var(--taupe); }
.offre__precision { margin-top: 8px; font-size: 15px; color: var(--taupe); }

.offre__liste {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: 1.45;
}
.offre__liste li { display: flex; gap: 12px; }
.offre__liste svg {
  flex-shrink: 0;
  fill: none;
  stroke: var(--orange-profond);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offre--option .offre__liste { color: var(--taupe); }
.offre__bouton { position: relative; margin-top: auto; padding: 18px 24px; font-size: 17px; }

.offre__conditions {
  margin-top: 28px;
  text-align: center;
  font-family: var(--police-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--taupe);
}

@media (max-width: 1023px) {
  .offres { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
  .offre { padding: 28px 22px; border-radius: 22px; }
  .offre__montant { font-size: 44px; }
  .offre__montant--texte { font-size: 26px; }
}


/* ==========================================================================
   6. Vous gardez la main
   ========================================================================== */

.suivi__grille {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.suivi__texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 820px;
  text-align: center;
}
.suivi .tableau { width: 100%; max-width: 1120px; }
.suivi__texte h2 { font-size: clamp(30px, 3vw, 44px); }
.suivi__mention { font-family: var(--police-mono); font-size: 12px; color: var(--taupe); }

.tableau {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border: 1.5px solid var(--bordure);
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: var(--ombre);
}

.tableau__entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tableau__campagne { font-size: 17px; font-weight: 700; }

.tableau__label,
.kpi dt {
  font-family: var(--police-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--taupe);
}

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
.kpi { padding: 20px; border: 1.5px solid var(--bordure); border-radius: 18px; background: var(--lin); }
.kpi dd { margin: 8px 0 0; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.kpi--fort { background: var(--aube); border-color: var(--peche); }
.kpi--fort dt { color: var(--orange-profond); }
.kpi--fort dd { color: var(--orange-profond); }

.tableau__bas { display: flex; gap: 24px; }

.graphique {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 18px;
  background: var(--lin);
}
.graphique__barres { display: flex; align-items: flex-end; gap: 12px; height: 170px; }
.graphique__barres li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
  font-family: var(--police-mono);
  font-size: 10px;
  color: var(--taupe);
}
.barre {
  width: 100%;
  min-height: 3px;
  height: calc(var(--v) / 6 * (100% - 20px));
  border-radius: 8px 8px 3px 3px;
  background: var(--bordure-forte);
  transform-origin: bottom;
}
.graphique__derniere .barre { background: var(--braise); }

/* Les barres montent à l’entrée dans l’écran (classes posées par main.js).
   Sans JavaScript, elles restent affichées à leur hauteur finale. */
.graphique.en-attente .barre { transform: scaleY(0.2); }
.graphique.en-attente.visible .barre {
  transform: scaleY(1);
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 0.08s);
}

.derniers {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 18px;
  background: var(--lin);
}
.derniers ul { display: flex; flex-direction: column; gap: 12px; }
.derniers li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bordure);
}
.derniers li:last-child { padding-bottom: 0; border-bottom: 0; }
.derniers strong { font-size: 15px; }
.derniers span { font-size: 13px; color: var(--taupe); }

@media (max-width: 767px) {
  .tableau { padding: 20px; border-radius: 22px; gap: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 16px; }
  .kpi dd { font-size: 30px; }
  .tableau__bas { flex-direction: column; gap: 16px; }
  .derniers { width: auto; }
  .graphique__barres { gap: 8px; height: 150px; }
}


/* ==========================================================================
   7. Qui je suis
   ========================================================================== */

.a-propos__grille {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.a-propos__photo img {
  width: 220px;
  height: 220px;
  border: 1.5px solid var(--bordure);
  border-radius: 50%;
  object-fit: cover;
}
.a-propos__texte { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 760px; }

.lien-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--orange-profond);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lien-linkedin svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 767px) {
  .a-propos__photo img { width: 140px; height: 140px; }
}


/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__grille {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.faq__entete { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 820px; text-align: center; }
.faq__liste { width: 100%; max-width: 900px; }
.faq__entete h2 { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.05; }

.faq__liste { border-top: 1px solid var(--bordure); }

.question { border-bottom: 1px solid var(--bordure); }
.question summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-block: 26px;
  cursor: pointer;
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover h3 { color: var(--orange-profond); }
.question h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: wrap; }
.question p {
  max-width: 720px;
  padding-bottom: 26px;
  margin-top: -12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--taupe);
}

/* Icône + qui devient − à l’ouverture */
.question__icone {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}
.question__icone::before,
.question__icone::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--taupe);
}
.question__icone::after { transform: rotate(90deg); }
.question[open] .question__icone::before { background: var(--orange-profond); }
.question[open] .question__icone::after { display: none; }

@media (max-width: 1023px) {
  .faq__grille { gap: 36px; }
}
@media (max-width: 599px) {
  .question summary { padding-block: 20px; gap: 16px; }
  .question h3 { font-size: 18px; }
  .question p { padding-bottom: 20px; margin-top: -8px; }
}


/* ==========================================================================
   Sections sombres (#rdv, pied de page)
   ========================================================================== */

.sombre {
  background: var(--noir);
  color: var(--creme);
}
.sombre a:hover { color: var(--ambre); }
.sombre :focus-visible { outline-color: var(--ambre); }
.sombre .surtitre { color: var(--orange); }
.section.sombre + .section, .section + .section.sombre { border-top-color: var(--noir); }


/* ==========================================================================
   8. Appel final (#rdv, sombre)
   ========================================================================== */

.rdv { overflow: clip; } /* le halo brun ne déborde pas sur les sections claires */
.halo--rdv {
  --opacite: 0.6;
  width: 1100px;
  height: 1100px;
  right: -300px;
  top: -160px;
}

.rdv__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.rdv__entete { position: relative; }
.rdv__texte { display: flex; flex-direction: column; gap: 28px; }
.rdv__entete h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -0.035em; }

.rdv__points { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.rdv__points li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #CFC4BD;
}
.rdv__points span { flex-shrink: 0; font-family: var(--police-mono); font-size: 13px; color: var(--ambre); }
.rdv__promesse { font-size: 16px; line-height: 1.55; color: var(--gris); }

.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #2A1C16;
}
.signature img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 2px solid #4A3128;
  border-radius: 50%;
  object-fit: cover;
}
.signature__nom { flex-grow: 1; min-width: 0; font-size: 17px; font-weight: 700; }
.signature__role { margin-top: 4px; font-family: var(--police-mono); font-size: 12px; font-weight: 400; color: var(--gris); }
.signature__linkedin {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1.5px solid #4A3128;
  border-radius: 50%;
  transition: border-color 0.2s ease;
}
.signature__linkedin:hover { border-color: var(--creme); }
.signature__linkedin svg { fill: none; stroke: var(--creme); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Agenda intégré */
.agenda { display: flex; flex-direction: column; gap: 14px; }
.agenda__cadre {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
  border-radius: 28px;
  background: var(--creme);
}
.agenda__secours { font-size: 14px; color: var(--gris); text-align: center; }
.agenda__secours a { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .rdv__grille { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 599px) {
  .rdv__points li { font-size: 17px; }
  .agenda__cadre { min-height: 920px; border-radius: 22px; }
  .signature { gap: 12px; }
  .signature img { width: 56px; height: 56px; }
  .signature__nom { font-size: 16px; }
  .signature__role { font-size: 11px; }
}


/* ==========================================================================
   Pied de page (sombre)
   ========================================================================== */

.pied__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  min-height: 120px;
  padding-block: 32px;
  border-top: 1px solid #2A1C16;
}

.pied__logo { width: 140px; }

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 14px;
  color: var(--gris);
}
.pied__linkedin { display: inline-flex; align-items: center; gap: 8px; }
.pied__linkedin svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pied__copyright {
  font-family: var(--police-mono);
  font-size: 12px;
  color: var(--gris);
}

@media (max-width: 767px) {
  .pied__barre { flex-direction: column; align-items: flex-start; }
  .pied__liens { flex-direction: column; }
}


/* ==========================================================================
   Pages annexes (merci, mentions légales, confidentialité)
   ========================================================================== */

.entete__bouton--annexe { margin-left: auto; }
@media (max-width: 1023px) {
  .entete .entete__bouton--annexe { display: inline-flex; }
}
@media (max-width: 599px) {
  .entete__bouton--annexe { padding: 12px 18px; font-size: 15px; }
  .entete__bouton--annexe svg { display: none; }
}

.page-simple { padding-block: var(--espace-section); min-height: 60vh; background: var(--aube); }
.page-simple__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.page-simple__corps > * { max-width: 760px; }
.page-simple h1 { font-size: clamp(36px, 4vw, 54px); line-height: 1; letter-spacing: -0.035em; }

.texte-legal { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.65; color: var(--taupe); }
.texte-legal h2 { margin-top: 28px; font-size: 22px; letter-spacing: -0.01em; color: var(--encre); }
.texte-legal a { color: var(--orange-profond); text-decoration: underline; text-underline-offset: 3px; }
.texte-legal__maj { font-family: var(--police-mono); font-size: 12px; color: var(--taupe); }


/* ==========================================================================
   Mouvement réduit : tout s’arrête dans l’état final
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}