/* ==========================================================================
   WEBIRA - styles.css
   Palette « Ardoise & menthe » - règle 90 / 8 / 2
   Fil conducteur : le point final (l'accent ponctue, il ne décore jamais)
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  --fond: #F6F8F7;
  --surface: #FFFFFF;
  --encre: #22303A;
  --principale: #3E5C63;
  --accent: #37B58C;
  --soutien: #A9B8B3;

  /* dérivés sobres (mélanges de la palette, pas de nouvelles couleurs) */
  --encre-8: rgba(34, 48, 58, 0.08);
  --encre-14: rgba(34, 48, 58, 0.14);
  --fond-sur-encre: rgba(246, 248, 247, 0.72);

  --titres: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texte: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --mesure: 65ch;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
}

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

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

html {
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* barre de progression de lecture */
.progression {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 60;
  pointer-events: none;
}

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

a {
  color: var(--principale);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--encre);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--encre);
}

/* ---------- Typographie ---------- */

h1,
h2,
h3 {
  font-family: var(--titres);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 7.2vw, 4.625rem);
}

h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
}

/* le numéro en matrice de points : la signature du héros, déclinée */
.matrice {
  height: 2.125rem;
  width: auto;
  display: block;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.25;
}

p {
  max-width: var(--mesure);
}

strong {
  font-weight: 600;
}

/* Le point. - chaque titre de section se termine par le point accent */
.point {
  color: var(--accent);
}

/* Étiquette de section : numéro + nom, Archivo, petites capitales espacées.
   Les numéros sont des compteurs CSS : une section masquée n'est pas comptée. */
body {
  counter-reset: sec;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--principale);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
  counter-increment: sec;
}

.kicker span::before {
  content: "/0" counter(sec) "  ";
  color: var(--accent);
}

/* la ligne de cote qui file jusqu'au bord : l'en-tête de fiche technique */
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--encre-14);
}

.kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- Logo ---------- */

.logo {
  font-family: var(--titres);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--encre);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
}

.logo .point {
  color: var(--accent);
}

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

.btn {
  display: inline-block;
  font-family: var(--titres);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  padding: 1rem 1.75rem;
  border-radius: 2px;
  border: 2px solid transparent;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn-principal {
  background: var(--principale);
  color: var(--fond);
}

.btn-principal:hover {
  background: var(--encre);
  color: var(--fond);
}

.btn-secondaire {
  background: transparent;
  color: var(--principale);
  border-color: var(--encre-14);
}

.btn-secondaire:hover {
  color: var(--encre);
  border-color: var(--encre);
}

/* variante sur fond encre */
.btn-inverse {
  background: var(--fond);
  color: var(--encre);
}

.btn-inverse:hover {
  background: var(--accent);
  color: var(--encre);
}

/* ---------- Structure ---------- */

.conteneur {
  width: min(100% - 2 * var(--gouttiere), 68rem);
  margin-inline: auto;
}

section {
  padding-block: var(--section-y);
}

/* lien d'évitement */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--encre);
  color: var(--fond);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-family: var(--titres);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  left: 0;
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fond);
  border-bottom: 1px solid var(--encre-8);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.nav-liens {
  display: none;
  list-style: none;
  gap: 1.75rem;
}

.nav-liens a {
  font-family: var(--titres);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--encre);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
}

.nav-liens a:hover {
  border-bottom-color: var(--accent);
}

.entete .btn {
  padding: 0.7rem 1.15rem;
  font-size: 0.9375rem;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* menu mobile : bouton et panneau */
.menu-bouton {
  display: grid;
  gap: 5px;
  padding: 0.75rem 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-bouton span {
  display: block;
  width: 1.375rem;
  height: 2px;
  border-radius: 1px;
  background: var(--encre);
  transition: transform 200ms ease, opacity 200ms ease;
}

.entete.sur-sombre .menu-bouton span {
  background: var(--fond);
}

.entete.nav-ouvert .menu-bouton span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.entete.nav-ouvert .menu-bouton span:nth-child(2) {
  opacity: 0;
}

.entete.nav-ouvert .menu-bouton span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.entete.nav-ouvert .nav-liens {
  display: grid;
  gap: 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--fond);
  border-bottom: 1px solid var(--encre-14);
  padding: 0.5rem var(--gouttiere) 1rem;
}

.entete.nav-ouvert .nav-liens a {
  display: block;
  padding: 0.875rem 0;
  font-size: 1.0625rem;
  border-bottom: 1px solid var(--encre-8);
}

.entete.sur-sombre.nav-ouvert .nav-liens {
  background: var(--encre);
  border-bottom-color: rgba(246, 248, 247, 0.15);
}

.entete.sur-sombre.nav-ouvert .nav-liens a {
  color: var(--fond);
  border-bottom-color: rgba(246, 248, 247, 0.1);
}

.entete {
  position: sticky;
}

.entete .conteneur {
  position: relative;
}

@media (min-width: 56rem) {
  .nav-liens {
    display: flex;
  }

  .menu-bouton {
    display: none;
  }

  .entete.nav-ouvert .nav-liens {
    position: static;
    display: flex;
    padding: 0;
    border: 0;
    background: none;
  }
}

/* sur le héros sombre, l'en-tête se fond dans l'encre ; il bascule en clair au scroll */
.entete.sur-sombre {
  background: var(--encre);
  border-bottom-color: transparent;
}

.entete.sur-sombre .logo {
  color: var(--fond);
}

.entete.sur-sombre .nav-liens a {
  color: var(--fond);
}

.entete.sur-sombre .btn-principal {
  background: var(--accent);
  color: var(--encre);
}

@media (prefers-reduced-motion: no-preference) {
  .entete {
    transition: background-color 250ms ease, border-color 250ms ease;
  }

  .entete .logo,
  .entete .nav-liens a {
    transition: color 250ms ease;
  }
}

/* le détail signature : le point du logo saute au survol */
.logo .point {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .logo:hover .point,
  .logo:focus-visible .point {
    animation: saut 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes saut {
    0% { transform: none; }
    40% { transform: translateY(-0.24em); }
    70% { transform: translateY(0.05em) scale(1.05, 0.85); }
    100% { transform: none; }
  }
}

/* ---------- Héros : le champ de points ---------- */
/* Le seul endroit du site où la menthe est abondante. Tout le reste garde sa retenue. */

.heros {
  position: relative;
  background-color: var(--encre);
  /* modelé tonal : une lumière douce en haut, les bords qui s'assombrissent */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 12%, rgba(62, 92, 99, 0.4), transparent 70%),
    radial-gradient(ellipse 130% 90% at 50% 110%, rgba(15, 22, 27, 0.55), transparent 60%);
  color: var(--fond);
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: max(38rem, calc(96svh - 4.25rem));
  padding-block: clamp(3rem, 6vw, 5rem) clamp(5.5rem, 9vw, 7.5rem);
}

.heros-champ {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.heros-contenu {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
}

/* l'espace où les particules assemblent la marque : réservé, aucun décalage */
.heros-marque {
  width: 100%;
  height: clamp(5.5rem, 17vw, 12.5rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 3rem);
}

/* repères de plan aux angles du contenu */
.heros-contenu::before,
.heros-contenu::after {
  content: "+";
  position: absolute;
  font-family: var(--mono);
  font-size: 1rem;
  color: rgba(246, 248, 247, 0.35);
  line-height: 1;
}

.heros-contenu::before {
  top: -1.25rem;
  left: 0;
}

.heros-contenu::after {
  bottom: -1.25rem;
  right: 0;
}

.heros h1 {
  max-width: 32ch;
  margin-bottom: 1.5rem;
  color: var(--fond);
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  letter-spacing: -0.01em;
}

.heros h1 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.09em;
}

.heros .sous-titre {
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  max-width: 52ch;
  color: var(--fond-sur-encre);
  margin-bottom: 2.5rem;
}

.heros-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.heros-note {
  font-size: 0.9375rem;
  color: var(--fond-sur-encre);
}

/* le bandeau technique : défilement lent en pied de héros */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid rgba(246, 248, 247, 0.12);
}

.ticker-piste {
  display: flex;
  width: max-content;
  padding: 0.7rem 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fond-sur-encre);
}

.ticker-piste span {
  white-space: nowrap;
}

.ticker-piste span::after {
  content: "+";
  margin-inline: 1.75rem;
  color: var(--accent);
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker-piste {
    animation: defile 48s linear infinite;
  }

  @keyframes defile {
    to { transform: translateX(-50%); }
  }
}

/* boutons du héros, sur fond encre */
.btn-menthe {
  background: var(--accent);
  color: var(--encre);
}

.btn-menthe:hover {
  background: var(--fond);
  color: var(--encre);
}

.btn-contour-clair {
  background: transparent;
  color: var(--fond);
  border-color: rgba(246, 248, 247, 0.35);
}

.btn-contour-clair:hover {
  border-color: var(--fond);
  color: var(--fond);
}

/* entrée du héros : une seule séquence orchestrée (~800 ms canvas compris) */
@media (prefers-reduced-motion: no-preference) {
  .heros h1,
  .heros .sous-titre,
  .heros-actions,
  .heros-note {
    animation: lever 450ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .heros .sous-titre { animation-delay: 70ms; }
  .heros-actions { animation-delay: 130ms; }
  .heros-note { animation-delay: 180ms; }

  .heros-champ {
    animation: paraitre 700ms ease both;
  }

  @keyframes lever {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes paraitre {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---------- Bandeau de réassurance ---------- */

.preuves {
  background: var(--surface);
  border-bottom: 1px solid var(--encre-8);
  padding-block: 1.375rem;
}

.preuves-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem 2rem;
}

.preuves-grille p {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: none;
}

.preuves-grille p::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@media (min-width: 64rem) {
  .preuves-grille {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }
}

/* ---------- Le constat ---------- */

.constat h2 {
  max-width: 22ch;
  margin-bottom: 1rem;
}

.constat-intro {
  color: var(--principale);
  font-size: 1.125rem;
  margin-bottom: 3.5rem;
}

.constat-grille {
  display: grid;
  gap: 2.5rem;
  border-top: 1px solid var(--encre-14);
}

.constat-grille > div {
  padding-top: 2rem;
}


.chiffre {
  font-family: var(--titres);
  font-weight: 800;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.chiffre-legende {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--principale);
  margin-bottom: 1rem;
}

.constat-source {
  margin-top: 3rem;
  font-size: 0.875rem;
  color: var(--principale);
  font-style: italic;
}

@media (min-width: 48rem) {
  .constat-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    border-top: none;
  }

  .constat-grille > div {
    border-top: 1px solid var(--encre-14);
    padding-top: 2.25rem;
  }
}

/* ---------- Pourquoi maintenant : les chiffres publics ---------- */

.pourquoi h2 {
  max-width: 22ch;
  margin-bottom: 1rem;
}

.pourquoi-intro {
  color: var(--principale);
  font-size: 1.125rem;
  margin-bottom: 3.5rem;
}

.stats-grille {
  display: grid;
  gap: 2.5rem;
}

.stat {
  border-top: 1px solid var(--encre-14);
  padding-top: 1.75rem;
}

/* le carrousel de réalisations qui occupe la sixième case de la grille */
.stat-photo {
  padding-top: 1.75rem;
}

.carrousel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--surface);
}

.carrousel img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.carrousel img.actif {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .carrousel img {
    transition: opacity 700ms ease;
  }
}

@media (min-width: 64rem) {
  .stat-photo {
    display: flex;
    flex-direction: column;
  }

  .stat-photo .carrousel {
    aspect-ratio: auto;
    flex: 1;
    min-height: 15rem;
  }
}

/* les points du carrousel : le point actif est une jauge qui se remplit */
.carrousel-points {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.carrousel-point {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: var(--soutien);
  cursor: pointer;
  transition: width 200ms ease, background-color 150ms ease;
}

.carrousel-point:hover {
  background: var(--principale);
}

.carrousel-point.actif {
  width: 1.75rem;
  background: var(--encre-14);
  position: relative;
  overflow: hidden;
}

.carrousel-point.actif::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .carrousel-point.actif::before {
    animation: jauge 4s linear forwards;
  }

  .stat-photo.pause .carrousel-point.actif::before {
    animation-play-state: paused;
  }

  @keyframes jauge {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

.stat-chiffre {
  font-family: var(--titres);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
}

.stat-texte {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.stat-consequence {
  font-size: 0.9844rem;
  margin-bottom: 1rem;
}

.stat-source {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--principale);
}

@media (min-width: 48rem) {
  .stats-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

@media (min-width: 64rem) {
  .stats-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- La méthode ---------- */

.methode h2 {
  margin-bottom: 3.5rem;
  max-width: 20ch;
}

.methode-grille {
  display: grid;
  gap: 2.75rem;
  counter-reset: bloc;
}

.methode-grille article {
  counter-increment: bloc;
  border-top: 1px solid var(--encre-14);
  padding-top: 1.75rem;
}


.methode-grille h3 {
  margin-bottom: 0.75rem;
}

.methode-grille h3::after {
  content: ".";
  color: var(--accent);
}

@media (min-width: 48rem) {
  .methode-grille {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem 4rem;
  }
}

/* ---------- Les tarifs ---------- */

.tarifs h2 {
  margin-bottom: 1rem;
}

.tarifs-intro {
  color: var(--principale);
  font-size: 1.125rem;
  max-width: var(--mesure);
  margin-bottom: 2.5rem;
}

/* la création : payer une fois / site offert */
.creation {
  background: var(--surface);
  border: 1px solid var(--encre-14);
  border-radius: 3px;
  padding: 2rem;
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.creation-etiquette {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--principale);
  margin-bottom: 0.75rem;
}

.creation .formule-prix {
  font-size: 2rem;
  margin: 0 0 0.625rem;
}

.creation p:last-child {
  font-size: 0.9844rem;
  max-width: 30rem;
}

.creation-options {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--principale);
  margin-top: 0.625rem;
}

.creation-ou {
  font-family: var(--titres);
  font-weight: 800;
  font-size: 0.8125rem;
  text-transform: uppercase;
  color: var(--principale);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--encre-14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  justify-self: center;
}

@media (min-width: 48rem) {
  .creation {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.5rem;
    padding: 2.25rem 2.5rem;
  }
}

/* « à partir de » : la mention plancher, au-dessus du prix */
.des {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--principale);
  margin-bottom: 0.375rem;
}

.formule-vedette .des {
  color: var(--fond-sur-encre);
}

/* l'avantage : la promesse de la formule, soulignée menthe */
.formule-avantage {
  font-weight: 600;
  font-size: 0.9844rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.875rem;
  margin-bottom: 1.375rem;
}

.formule .matrice {
  height: 1.625rem;
  margin-bottom: 1rem;
}

.formule-vedette .matrice circle {
  fill: rgba(246, 248, 247, 0.65);
}

.formule-vedette .matrice .m-accent {
  fill: var(--accent);
}

.formule-cta {
  margin-top: auto;
  padding-top: 1.5rem;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--principale);
  text-decoration: none;
}

.formule-cta::after {
  content: " →";
  color: var(--accent);
}

.formule-cta:hover {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

.formule-vedette .formule-cta {
  color: var(--fond);
}

.formule-vedette .formule-cta:hover {
  color: var(--accent);
}

.tarifs-grille {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2rem;
}

.formule {
  border: 1px solid var(--encre-14);
  border-radius: 6px;
  padding: 2rem 1.75rem;
  background: var(--fond);
  display: flex;
  flex-direction: column;
}

.formule-nom {
  font-family: var(--titres);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.formule-nom::after {
  content: ".";
  color: var(--accent);
}

.formule-prix {
  font-family: var(--titres);
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 1rem 0 0.25rem;
}

.formule-prix span {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--principale);
}

.formule-pour {
  font-size: 0.9375rem;
  color: var(--principale);
  margin-bottom: 1.5rem;
}

.formule ul {
  list-style: none;
  border-top: 1px solid var(--encre-14);
  padding-top: 1.25rem;
  display: grid;
  gap: 0.625rem;
  font-size: 0.9844rem;
}

.formule li {
  padding-left: 1.25rem;
  position: relative;
}

.formule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
}

.formule li.herite {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 0.875rem;
}

.formule li.herite::before {
  background: var(--principale);
}

/* Visibilité : la formule recommandée, sur fond encre */
.formule-vedette {
  background: var(--encre);
  color: var(--fond);
  border-color: var(--encre);
}

.formule-vedette .formule-pour,
.formule-vedette .formule-prix span {
  color: var(--fond-sur-encre);
}

.formule-vedette ul {
  border-top-color: rgba(246, 248, 247, 0.2);
}

.badge {
  display: inline-block;
  font-family: var(--titres);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.875rem;
}

.tarifs-engagement {
  font-size: 0.9375rem;
  color: var(--principale);
  margin-bottom: 3rem;
}

@media (min-width: 56rem) {
  .tarifs-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .formule-vedette {
    margin-top: -1.25rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* Encadré propriété */
.propriete {
  border: 1px solid var(--encre-14);
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

.propriete h3 {
  margin-bottom: 0.625rem;
}

/* Bandeau offre fondateur */
.fondateur {
  background: var(--principale);
  color: var(--fond);
  border-radius: 6px;
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
}

.fondateur h3 {
  color: var(--fond);
  margin-bottom: 0.625rem;
}

.fondateur p {
  color: var(--fond-sur-encre);
  font-size: 0.9844rem;
}

.fondateur .places {
  font-family: var(--titres);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--fond);
}

@media (min-width: 64rem) {
  .fondateur .places {
    white-space: nowrap;
  }
}

.fondateur .places .point {
  color: var(--accent);
}

@media (min-width: 48rem) {
  .fondateur {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
    padding: 2.25rem 2.5rem;
  }
}

/* ---------- La transparence sur les prix ---------- */

.transparence h2 {
  margin-bottom: 3rem;
}

.transparence-grille {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.transparence-grille h3 {
  margin-bottom: 1rem;
}

.liste-points {
  list-style: none;
  display: grid;
  gap: 0.625rem;
}

.liste-points li {
  position: relative;
  padding-left: 1.25rem;
  max-width: 34rem;
}

.liste-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
}

@media (min-width: 48rem) {
  .transparence-grille {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.transparence-photo {
  max-width: 22rem;
}

.transparence-photo img {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: var(--encre);
}

@media (min-width: 64rem) {
  .transparence-grille {
    grid-template-columns: 1.1fr 1.1fr 0.9fr;
    gap: 3rem;
    align-items: start;
  }
}

.assurance {
  border-left: 4px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  max-width: 44rem;
}

/* ---------- Témoignages (composant prêt, rempli par script.js) ---------- */

.temoignages h2 {
  margin-bottom: 3rem;
}

.temoignages-grille {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.temoignage {
  border: 1px solid var(--encre-14);
  border-radius: 6px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.temoignage-video {
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--soutien);
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--principale);
}

.temoignage-video svg {
  width: 2.5rem;
}

.temoignage blockquote {
  font-size: 1.0625rem;
}

.temoignage footer {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 0.9375rem;
}

.temoignage footer span {
  display: block;
  font-weight: 500;
  color: var(--principale);
  font-size: 0.875rem;
}

@media (min-width: 48rem) {
  .temoignages-grille {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* ---------- L'audit ---------- */

.audit {
  background: var(--encre);
  color: var(--fond);
}

.audit .kicker {
  color: var(--fond-sur-encre);
}

.audit .kicker::after {
  background: rgba(246, 248, 247, 0.18);
}

.audit h2 {
  color: var(--fond);
  max-width: 24ch;
  margin-bottom: 1.5rem;
}

.audit-desc {
  color: var(--fond-sur-encre);
  font-size: 1.125rem;
  max-width: 56ch;
  margin-bottom: 2.5rem;
}

.audit ol {
  list-style: none;
  counter-reset: audit;
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
  max-width: 40rem;
}

.audit ol li {
  counter-increment: audit;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: baseline;
}

.audit ol li::before {
  content: counter(audit) ".";
  font-family: var(--titres);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--accent);
}

.audit ol strong {
  font-family: var(--titres);
  font-weight: 700;
  display: block;
  margin-bottom: 0.125rem;
}

.audit ol p {
  color: var(--fond-sur-encre);
  font-size: 0.9844rem;
}

.audit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.audit-note {
  color: var(--fond-sur-encre);
  font-size: 0.9375rem;
}

/* ---------- Qui sommes-nous ---------- */

.equipe h2 {
  margin-bottom: 1rem;
}

.equipe-intro {
  color: var(--principale);
  font-size: 1.125rem;
  margin-bottom: 3.5rem;
}

.equipe-grille {
  display: grid;
  gap: 3rem;
}

.portrait-photo {
  aspect-ratio: 4 / 3;
  background: var(--encre);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.monogramme {
  font-family: var(--titres);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fond);
}

/* photos : elles remplissent leur cadre réservé, aucun décalage de page */
.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.villes {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.villes img {
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  background: var(--encre);
}

.villes figcaption,
.transparence-photo figcaption,
.stat-photo figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--principale);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.villes figcaption::before,
.transparence-photo figcaption::before,
.stat-photo figcaption::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@media (min-width: 48rem) {
  .villes {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}


.portrait h3 {
  margin-bottom: 0.25rem;
}

.portrait .role {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--principale);
  margin-bottom: 1rem;
}

@media (min-width: 48rem) {
  .equipe-grille {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* ---------- FAQ ---------- */

.faq h2 {
  margin-bottom: 3rem;
}

.faq-liste {
  max-width: 46rem;
  border-top: 1px solid var(--encre-14);
}

.faq details {
  border-bottom: 1px solid var(--encre-14);
}

.faq summary {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 1.375rem 2.5rem 1.375rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq .chevron {
  position: absolute;
  right: 0.25rem;
  top: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  transition: transform 250ms ease;
}

.faq details[open] .chevron {
  transform: rotate(180deg);
}

.faq summary:hover {
  color: var(--principale);
}

.faq details > div {
  padding: 0 0 1.625rem;
}

.faq details p + p {
  margin-top: 0.75rem;
}

/* ---------- CTA final + contact ---------- */

.final {
  background: var(--encre);
  color: var(--fond);
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
}

.final .logo-grand {
  font-family: var(--titres);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(3.5rem, 12vw, 7.5rem);
  line-height: 1;
  color: var(--fond);
  margin-bottom: 1.5rem;
}

.final .logo-grand .point {
  color: var(--accent);
}

.final .accroche {
  color: var(--fond-sur-encre);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.final .btn {
  margin-bottom: 3rem;
}

.coordonnees {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: center;
  font-family: var(--titres);
  font-size: 0.9844rem;
}

.coordonnees a {
  color: var(--fond);
  text-decoration-color: rgba(246, 248, 247, 0.4);
}

.coordonnees a:hover {
  color: var(--accent);
}

@media (min-width: 48rem) {
  .coordonnees {
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
  }
}

.contact-note {
  margin-top: 1.25rem;
  margin-inline: auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fond-sur-encre);
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--encre);
  color: var(--fond-sur-encre);
  border-top: 1px solid rgba(246, 248, 247, 0.14);
  padding-block: 2.5rem;
  font-size: 0.875rem;
}

.pied .conteneur {
  display: grid;
  gap: 1.75rem;
}

.pied .logo {
  color: var(--fond);
  font-size: 1.25rem;
}

.pied-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-family: var(--titres);
}

.pied a {
  color: var(--fond-sur-encre);
  text-decoration: none;
}

.pied a:hover {
  color: var(--fond);
  text-decoration: underline;
}

.pied-mentions {
  display: grid;
  gap: 0.375rem;
}

@media (min-width: 48rem) {
  .pied .conteneur {
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 3rem;
  }

  .pied-nav {
    justify-content: center;
  }

  .pied-mentions {
    text-align: right;
  }
}

/* ---------- Page mentions légales ---------- */

.page-legale {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.page-legale h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2.5rem;
}

.page-legale h2 {
  font-size: 1.375rem;
  margin: 2.75rem 0 0.875rem;
}

.page-legale p + p {
  margin-top: 0.75rem;
}

.page-legale .retour {
  display: inline-block;
  margin-top: 3.5rem;
  font-family: var(--titres);
  font-weight: 700;
}

/* placeholder à compléter, bien visible */
.a-completer {
  background: var(--encre-8);
  border: 1px dashed var(--soutien);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-family: var(--titres);
  font-size: 0.9em;
}

/* ==========================================================================
   COUCHE ILLUSTRATIONS & ANIMATIONS
   Tout le mouvement vit sous prefers-reduced-motion: no-preference,
   et les états cachés n'existent que si JavaScript est là (html.js).
   ========================================================================== */

body {
  position: relative; /* ancre du fil conducteur */
}

/* ---------- Le fil conducteur ---------- */

.fil {
  display: none;
  position: absolute;
  left: calc(50% - 34rem - 3.25rem);
  width: 2px;
  z-index: 5;
  pointer-events: none;
}

.fil-svg {
  width: 2px;
  height: 100%;
  overflow: visible;
}

.fil-fond {
  stroke: var(--soutien);
  stroke-opacity: 0.45;
  stroke-width: 2;
  fill: none;
}

.fil-trace {
  stroke: var(--principale);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.fil-point {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 0);
  will-change: transform;
  transition: opacity 300ms ease;
}

.fil.fini .fil-point {
  opacity: 0;
}

/* jalons en croix de repérage, façon plan */
.fil-jalon {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  background:
    linear-gradient(var(--soutien), var(--soutien)) center / 11px 2px no-repeat,
    linear-gradient(var(--soutien), var(--soutien)) center / 2px 11px no-repeat;
}

.fil-jalon.actif {
  background:
    linear-gradient(var(--accent), var(--accent)) center / 11px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 11px no-repeat;
}

/* le point final de « webira. » accuse réception du voyage */
.final .logo-grand .point {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .final .logo-grand .point.pose,
  .heros h1 .point.pose {
    display: inline-block;
    animation: poser 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  @keyframes poser {
    0% { transform: scale(0.4); opacity: 0.4; }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); opacity: 1; }
  }
}

/* ---------- Révélations au scroll (une fois, transform + opacity) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveler {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 350ms cubic-bezier(0.33, 1, 0.68, 1), transform 350ms cubic-bezier(0.33, 1, 0.68, 1);
  }

  .js .reveler[data-delai="1"] { transition-delay: 80ms; }
  .js .reveler[data-delai="2"] { transition-delay: 160ms; }

  .js .reveler.est-visible {
    opacity: 1;
    transform: none;
  }

  /* dessin des traits d'une illustration à sa première apparition */
  .js .reveler .trace {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 700ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
  }

  .js .reveler.est-visible .trace {
    stroke-dashoffset: 0;
  }

  .js .reveler .plein {
    opacity: 0;
    transition: opacity 400ms ease 550ms;
  }

  .js .reveler.est-visible .plein {
    opacity: 1;
  }
}

/* ---------- Illustrations d'appui ---------- */

.illu {
  pointer-events: none;
}

/* ---------- L'audit : la conversation sur téléphone ---------- */

.audit-grille {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

.audit-tel {
  max-width: 15rem;
  margin-inline: auto;
  width: 100%;
}

.audit-tel svg {
  width: 100%;
  height: auto;
}

@media (min-width: 64rem) {
  .audit-grille {
    grid-template-columns: 1.3fr 0.7fr;
    gap: 5rem;
  }

  .audit-tel {
    max-width: 16.5rem;
  }
}

/* ---------- Rythme des fonds : casser la masse ---------- */

.pourquoi,
.transparence {
  background: var(--surface);
}

/* ---------- Maquettes d'interface (la méthode, en images) ---------- */

.maquette {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--encre-8);
  border-radius: 3px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* repères de plan aux angles des maquettes */
.maquette::before,
.maquette::after {
  content: "+";
  position: absolute;
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--soutien);
  line-height: 1;
}

.maquette::before {
  top: -0.5rem;
  left: -0.4rem;
}

.maquette::after {
  bottom: -0.5rem;
  right: -0.4rem;
}

.maquette svg {
  width: 100%;
  height: auto;
}

/* ---------- Micro-interactions ---------- */

.btn {
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.formule {
  transition: border-color 150ms ease, transform 150ms ease;
}

.formule:hover {
  border-color: var(--principale);
}

.formule-vedette:hover {
  border-color: var(--encre);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .formule:hover {
    transform: translateY(-2px);
  }
}

/* ---------- Accordéon FAQ fluide (CSS seul, dégradation propre) ---------- */

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      height: 0;
      overflow: clip;
      transition: height 300ms ease, content-visibility 300ms allow-discrete;
    }

    .faq details[open]::details-content {
      height: auto;
    }
  }
}

/* ---------- Impression ---------- */

@media print {
  .entete,
  .skip,
  .fil,
  .heros-champ,
  .illu {
    display: none;
  }

  body {
    background: #fff;
  }

  .heros {
    background: #fff;
    color: var(--encre);
    min-height: 0;
  }

  .heros h1,
  .heros .sous-titre,
  .heros-note {
    color: var(--encre);
  }
}