/* ============================================
   Landing « Maintenance WordPress »
   Page autonome : maintenance-wordpress.html
   S'appuie sur css/style.css (tokens, boutons, nav, footer, FAQ).
   Toutes les classes sont préfixées .mw- pour ne rien casser ailleurs.
   Mobile-first : le style de base vise le mobile, les media queries
   agrandissent ensuite.
   ============================================ */

/* ---------- 0. Titres de section ---------- */

/* Sur cette page les titres passent de 40 px à 34 px : « 2 minutes pour
   voir ce que je fais chaque mois » réclamait 829 px à 40 px et se coupait
   en deux. Descendre ce seul titre l'aurait rendu bancal à côté des autres,
   donc toute la page suit.

   ⚠️ Cette feuille n'est chargée QUE par maintenance-wordpress.html :
   l'override est donc naturellement limité à cette page, index.html et
   portfolio.html gardent leurs titres à 40 px. Ne jamais déplacer cette
   règle dans style.css. */
.section-title {
  font-size: clamp(24px, 4.4vw, 34px);
}

/* Les 700 px de style.css coupent en deux les deux titres les plus longs
   de la page, à 5 et 10 px près : « 2 minutes pour voir ce que je fais
   chaque mois » (705 px) et « De votre premier message au premier
   rapport » (710 px). 760 px les fait tenir sur une ligne sans toucher
   aux autres, tous plus courts que 700 px. */
.section-title--center {
  max-width: 760px;
}

/* ---------- 1. Hero ---------- */
.mw-hero {
  padding: 150px 0 50px;
  text-align: center;
  /* Halo vert très léger derrière le titre, pour donner un point focal.
     Conservé : le halo animé ci-dessous s'y ajoute, il ne le remplace pas. */
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(58, 242, 123, 0.18), transparent 70%),
    var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* --- Halo animé ----------------------------------------------------
   Reprise CSS du composant FloatingAnimation (Framer) : des colonnes de
   couleur floues qui montent et se fondent vers le bas, avec une dérive
   lente. Trois couleurs, celles de la ligne animée de « Ce que vous
   obtenez » — orange, vert, bleu.

   Choix techniques :
   · des radial-gradient plutôt qu'un gros filter: blur() sur toute la
     zone — un flou de 60px sur 700px de large coûte cher à repeindre à
     chaque image, un dégradé est déjà doux par nature ;
   · le fondu vers le bas est fait au masque, pour que le halo disparaisse
     avant le texte du chapô ;
   · trois durées volontairement non multiples entre elles, sinon les
     blobs se resynchronisent et le mouvement devient mécanique. */
.mw-aura {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 92%;
  /* variante bas : voir .mw-aura--bas */
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(26px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%);
}

.mw-aura-blob {
  position: absolute;
  top: -14%;
  width: 42%;
  height: 116%;
  border-radius: 46% 54% 50% 50% / 38% 38% 62% 62%;
  will-change: transform;
}

.mw-aura-blob--orange {
  left: 4%;
  background: radial-gradient(closest-side, rgba(242, 178, 94, 0.85), rgba(242, 178, 94, 0) 72%);
  animation: mw-aura-derive-a 19s ease-in-out infinite;
}

.mw-aura-blob--vert {
  left: 30%;
  background: radial-gradient(closest-side, rgba(163, 217, 119, 0.9), rgba(163, 217, 119, 0) 72%);
  animation: mw-aura-derive-b 23s ease-in-out infinite;
}

.mw-aura-blob--bleu {
  left: 58%;
  background: radial-gradient(closest-side, rgba(127, 179, 232, 0.8), rgba(127, 179, 232, 0) 72%);
  animation: mw-aura-derive-c 27s ease-in-out infinite;
}

@keyframes mw-aura-derive-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(9%, 4%) scale(1.14); }
  66%      { transform: translate(-6%, -3%) scale(0.92); }
}

@keyframes mw-aura-derive-b {
  0%, 100% { transform: translate(0, 0) scale(1.04); }
  40%      { transform: translate(-10%, -5%) scale(0.9); }
  70%      { transform: translate(7%, 3%) scale(1.16); }
}

@keyframes mw-aura-derive-c {
  0%, 100% { transform: translate(0, 0) scale(0.96); }
  35%      { transform: translate(-8%, 5%) scale(1.18); }
  75%      { transform: translate(10%, -4%) scale(1); }
}

/* Variante calée sur le BAS de la section : les taches montent depuis le
   bas et le fondu s'inverse, sinon le halo s'arrêterait net au ras du
   bord inférieur. Utilisée sur le CTA final.

   Hauteur volontairement réduite (62% au lieu de 92%) : plus le halo est
   haut, plus il passe derrière l'aplat noir de la carte, où il ne se voit
   pas. En le tassant vers le bas, il occupe la bande libre sous la carte.
   Opacité un peu relevée pour la même raison — il a moins de surface. */
.mw-aura--bas {
  top: auto;
  bottom: -4%;
  height: 62%;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(0deg, #000 0%, #000 42%, transparent 92%);
}

/* Le halo reste, mais il cesse de bouger */
@media (prefers-reduced-motion: reduce) {
  .mw-aura-blob {
    animation: none;
  }
}

/* Le contenu repasse devant */
.mw-hero__inner {
  position: relative;
  z-index: 1;
}

.mw-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin-bottom: 22px;
}

.mw-hero__badge .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-green-dot);
}

.mw-hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  /* Le corps suit la largeur disponible pour que le titre tienne sur
     DEUX lignes jusqu'aux petits écrans : la ligne longue fait environ
     13,5 fois le corps, et 6,8vw laisse juste ce qu'il faut. */
  font-size: clamp(34px, 6.8vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--color-black);
  margin-bottom: 20px;
}

.mw-hero__lede {
  font-size: clamp(16px, 2.3vw, 19px);
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 720px;
  margin: 0 auto 32px;
}

.mw-hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.mw-hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-muted-2);
}

/* Petite puce verte devant chaque preuve */
.mw-hero__trust li::before {
  content: '✓';
  color: var(--color-green-dot);
  font-weight: 700;
  margin-right: 7px;
}

@media (min-width: 700px) {
  .mw-hero {
    padding: 180px 0 70px;
  }

  .mw-hero__ctas {
    flex-direction: row;
    justify-content: center;
    gap: 18px;
  }
}

/* ---------- 2. Vidéo ---------- */

/* Le fond noir de la section suivante démarre au MILIEU du cadre vidéo :
   la moitié basse de la vidéo repose donc sur le noir.

   Comment la demi-hauteur est calculée, sans JS ni valeur en dur :
   le cadre est en 16/9, sa hauteur vaut donc 56,25 % de sa largeur,
   et sa moitié 28,125 %. Reste à connaître sa largeur réelle —
   min(900px, la place disponible) — d'où les min() ci-dessous.

   ⚠️ Si tu changes le max-width du cadre (900px) ou son ratio,
   il faut reporter le changement dans les DEUX règles. */
.mw-video {
  /* plus de padding bas : c'est le noir qui prend le relais sous le cadre */
  padding: 30px 0 0;
}

.mw-video__head {
  margin-bottom: 32px;
}

.mw-video__frame {
  max-width: 900px;
  /* Le pourcentage se résout sur la largeur de .container, donc
     min(900px, 100%) = la largeur réelle du cadre. La marge négative
     remonte la fin de la section à mi-hauteur du cadre. */
  margin: 0 auto calc(min(900px, 100%) * -0.28125);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
  /* passe au-dessus du fond noir de la section suivante */
  position: relative;
  z-index: 1;
}

/* Emplacement réservé : garde le ratio 16:9 tant que la vidéo n'est pas là */
.mw-video__placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(140deg, #262630, var(--color-dark-2));
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 20px;
}

.mw-video__play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-accent-green);
  color: var(--color-black);
  box-shadow: 0 0 0 12px rgba(58, 242, 123, 0.14);
}

.mw-video__play svg {
  width: 30px;
  height: 30px;
}

.mw-video__note {
  font-size: 14px;
  line-height: 1.6;
}

.mw-video__note strong {
  color: var(--color-white);
}

/* Si tu passes en vidéo auto-hébergée, ce style prend le relais */
.mw-video__player {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--color-dark-2);
}

/* ---------- 3. Les risques (section sombre) ---------- */
.mw-risks {
  background: var(--color-dark-2);
  color: var(--color-white);
  /* Rembourrage normal depuis le masquage de la vidéo (15/09).
     ⚠️ Si tu remets la section vidéo, il faut rétablir le raccord qui
     faisait démarrer le noir à mi-hauteur du cadre :
       padding: calc(min(900px, 100% - 40px) * 0.28125 + 70px) 0 70px;
     et .mw-video { padding: 30px 0 0 }. */
  padding: 70px 0;
}

.mw-risks__head {
  text-align: center;
  margin-bottom: 44px;
}

.pill--dark {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  box-shadow: none;
  margin-bottom: 18px;
}

.mw-risks__title {
  color: var(--color-white);
  max-width: 640px;
  margin: 0 auto;
}

.mw-risks__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.mw-risk {
  padding: 26px 24px;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.mw-risk__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-accent-green);
  margin-bottom: 12px;
}

.mw-risk__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.mw-risk__text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.mw-risks__punch {
  margin-top: 44px;
  text-align: center;
  font-size: clamp(18px, 3.4vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 700px) {
  .mw-risks__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .mw-risks {
    padding: 90px 0;
  }

  .mw-risks__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- 4. Ce qui est inclus (grille bento) ---------- */
.mw-included {
  padding: 70px 0;
}

.mw-included__head {
  text-align: center;
  margin-bottom: 40px;
}

.mw-included__head .pill {
  margin-bottom: 18px;
}

/* Enveloppe qui reçoit la ligne décorative en fond, comme .cards-wrap
   sur l'accueil. */
.mw-bento-wrap {
  position: relative;
}

/* La ligne déborde le conteneur et occupe toute la largeur de l'écran.
   body a overflow-x: hidden dans style.css, donc le 100vw ne crée pas
   de barre de défilement horizontale. */
.mw-flow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 40px);
  z-index: 0;
  opacity: 0.85;
  pointer-events: none;
}

.mw-bento {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.mw-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.mw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Zone d'aperçu : fond légèrement grisé, comme une capture d'écran */
.mw-card__visual {
  position: relative;
  padding: 24px;
  background: linear-gradient(180deg, #fafafa, #f1f1f3);
  border-bottom: 1px solid var(--color-border);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.mw-card__body {
  padding: 24px;
}

.mw-card__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin-bottom: 10px;
}

.mw-card__text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-muted);
}

/* Mention discrète sous le texte d'une carte (précision, pas argument) */
.mw-card__note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted-light);
}

/* Adresse de support affichée dans une carte : lisible mais discrète */
.mw-card__text a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 700px) {
  .mw-bento {
    grid-template-columns: 1fr 1fr;
  }

  /* La carte « rapport mensuel » occupe toute la largeur et passe en 2 colonnes */
  .mw-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }

  .mw-card--wide .mw-card__visual {
    flex: 1 1 55%;
    border-bottom: none;
    border-right: 1px solid var(--color-border);
  }

  .mw-card--wide .mw-card__body {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
  }

  .mw-card--wide .mw-card__title {
    font-size: 24px;
  }

  /* Cinq cartes simples dans une grille à 2 ou 3 colonnes laissent toujours
     une case vide. La dernière s'élargit pour la combler : sur 2 colonnes
     elle prend toute la largeur, sur 3 elle en prend deux. */
  .mw-card--span2 {
    grid-column: span 2;
  }
}

@media (min-width: 1000px) {
  .mw-included {
    padding: 90px 0;
  }

  .mw-bento {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Aperçu : rapport mensuel --- */
.mw-report {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  width: 100%;
}

.mw-report__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.mw-report__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-black);
}

.mw-report__month {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted-light);
}

/* La maquette illustre le format, pas un niveau de service : le badge
   « Exemple » évite qu'on lise 99,98 % ou 1,2 s comme une promesse.
   margin-right: auto le colle au titre plutôt qu'à la date. */
.mw-report__tag {
  margin-right: auto;
  padding: 3px 9px;
  border-radius: var(--radius-l);
  background: var(--color-border);
  color: var(--color-muted-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mw-report__rows {
  list-style: none;
  display: grid;
  gap: 9px;
}

.mw-report__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-muted-2);
}

.mw-report__rows strong {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-black);
}

.mw-report__rows .is-ok {
  color: #17a34a;
}

.mw-report__foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-muted-light);
}

/* --- Aperçu : disponibilité --- */
.mw-uptime {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.mw-uptime__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 14px;
}

/* Pastille verte qui pulse doucement */
.dot--live {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-green-dot);
  box-shadow: 0 0 0 0 rgba(29, 204, 93, 0.6);
  animation: mw-pulse 2.4s ease-out infinite;
}

@keyframes mw-pulse {
  70% { box-shadow: 0 0 0 8px rgba(29, 204, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 204, 93, 0); }
}

.mw-uptime__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  margin-bottom: 12px;
}

.mw-uptime__bars i {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent-green);
}

.mw-uptime__bars i.is-down {
  background: var(--color-tag-red);
  height: 55%;
}

.mw-uptime__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted-light);
}

/* --- Aperçu : sauvegardes --- */
.mw-backups {
  list-style: none;
  display: grid;
  gap: 7px;
}

.mw-backups li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--color-dark);
}

/* La plus ancienne s'estompe : on suggère la profondeur d'historique */
.mw-backups li.is-muted {
  opacity: 0.45;
}

.mw-backups__date {
  font-family: var(--font-mono);
}

.mw-backups__size {
  color: var(--color-muted-light);
}

.mw-backups__badge {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-l);
  background: var(--color-accent-green);
  color: var(--color-black);
  font-size: 12px;
  font-weight: 700;
}

/* --- Aperçu : mises à jour --- */
.mw-updates {
  list-style: none;
  display: grid;
  gap: 7px;
}

.mw-updates li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark);
}

.mw-updates em {
  margin-left: auto;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--color-muted-light);
}

.mw-updates__check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent-green);
  color: var(--color-black);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.mw-updates li.is-hold .mw-updates__check {
  background: var(--color-tag-orange);
  color: var(--color-white);
}

/* --- Aperçu : sécurité --- */
.mw-security {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.mw-security__score {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent-green);
  color: var(--color-black);
  flex-shrink: 0;
  line-height: 1;
}

.mw-security__score strong {
  font-size: 26px;
  letter-spacing: -0.04em;
}

.mw-security__score span {
  font-size: 11px;
  opacity: 0.7;
}

.mw-security__list {
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-muted-2);
}

.mw-security__list li::before {
  content: '✓';
  color: #17a34a;
  font-weight: 700;
  margin-right: 7px;
}

/* --- Aperçu : conversation --- */
.mw-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mw-chat__msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.mw-chat__msg--them {
  align-self: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: 4px;
  color: var(--color-dark);
}

.mw-chat__msg--me {
  align-self: flex-end;
  background: var(--color-dark-2);
  border-bottom-right-radius: 4px;
  color: var(--color-white);
}

.mw-chat__meta {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted-light);
}

/* CTA de fin de section, utilisé deux fois : après « Ce que vous obtenez »
   et après la FAQ. Classe générique et non liée à une section, pour ne pas
   dupliquer ces règles à chaque nouvel emplacement.
   Bouton noir et non vert : le vert reste réservé au CTA final et au
   bouton du tunnel, pour qu'il garde sa valeur de point d'arrivée. */
.mw-section-cta {
  margin-top: 44px;
  text-align: center;
}

.mw-section-cta__lede {
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.mw-section-cta__note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--color-muted-light);
}

/* ---------- 5. Calculateur ---------- */
.mw-calc {
  padding: 30px 0 70px;
}

.mw-calc__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: 32px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.07);
}

.mw-calc__head {
  text-align: center;
  margin-bottom: 32px;
}

.mw-calc__head .pill {
  margin-bottom: 18px;
}

.mw-calc__title {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.mw-calc__lede {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.mw-calc__body {
  display: grid;
  gap: 32px;
}

/* min-width: 0 évite que le curseur déborde de sa colonne sur petits écrans */
.mw-calc__control {
  min-width: 0;
}

.mw-calc__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted-2);
  margin-bottom: 6px;
}

.mw-calc__value {
  display: block;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-black);
  margin-bottom: 18px;
}

/* Curseur : on remet à zéro le style natif pour l'harmoniser Chrome/Firefox */
.mw-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: #e8e8ea;
  outline: none;
  cursor: pointer;
}

.mw-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-black);
  border: 4px solid var(--color-white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.mw-calc__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-black);
  border: 4px solid var(--color-white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

.mw-calc__slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(58, 242, 123, 0.5);
}

.mw-calc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted-light);
}

.mw-calc__results {
  display: grid;
  gap: 12px;
}

.mw-calc__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-s);
  background: #f6f6f7;
}

/* La ligne « coût d'une crise » est mise en avant en sombre */
.mw-calc__result--strong {
  background: var(--color-dark-2);
  color: var(--color-white);
}

.mw-calc__result-label {
  font-size: 14px;
  color: var(--color-muted-2);
}

.mw-calc__result--strong .mw-calc__result-label {
  color: rgba(255, 255, 255, 0.65);
}

.mw-calc__result-value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.mw-calc__result--strong .mw-calc__result-value {
  color: var(--color-accent-green);
}

.mw-calc__punch {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: clamp(16px, 2.6vw, 20px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-dark);
}

.mw-calc__disclaimer {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-muted-light);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 860px) {
  .mw-calc__card {
    padding: 48px;
  }

  .mw-calc__body {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
}

/* ---------- 6. Formules ---------- */
.mw-pricing {
  padding: 70px 0;
}

.mw-pricing__head {
  text-align: center;
  margin-bottom: 40px;
}

.mw-pricing__head .pill {
  margin-bottom: 18px;
}

.mw-plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  /* stretch (valeur par défaut) plutôt que start : côte à côte, les deux
     cartes prennent la hauteur de la plus haute. Sérénité a une ligne de
     plus, Performance des lignes plus longues — sans ça, l'une dépasse
     l'autre de quelques dizaines de pixels et le bloc paraît bancal.
     Sur mobile, une seule carte par rangée : aucun effet. */
  align-items: stretch;
}

.mw-plan {
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

/* Formule mise en avant : fond sombre, elle attire l'œil en premier */
.mw-plan--featured {
  position: relative;
  background: var(--color-dark-2);
  border-color: var(--color-dark-2);
  color: var(--color-white);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.mw-plan__badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 6px 16px;
  border-radius: var(--radius-l);
  background: var(--color-accent-green);
  color: var(--color-black);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mw-plan__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.mw-plan__pitch {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 22px;
  min-height: 48px;
}

.mw-plan--featured .mw-plan__pitch {
  color: rgba(255, 255, 255, 0.62);
}

.mw-plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
}

.mw-plan__price strong {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.mw-plan__price span {
  font-size: 14px;
  color: var(--color-muted-light);
}

.mw-plan__cta {
  width: 100%;
  margin-bottom: 24px;
}

.mw-plan__features {
  list-style: none;
  display: grid;
  gap: 11px;
}

.mw-plan__features li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-dark);
}

.mw-plan__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #17a34a;
  font-weight: 700;
}

.mw-plan--featured .mw-plan__features li {
  color: rgba(255, 255, 255, 0.82);
}

.mw-plan--featured .mw-plan__features li::before {
  color: var(--color-accent-green);
}

.mw-plan__features em {
  font-style: italic;
  color: var(--color-muted-light);
}

/* Adresse de support dans la liste Sérénité */
.mw-plan__features a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mw-plan--featured .mw-plan__features a {
  color: inherit;
}

.mw-pricing__foot {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
}

.mw-pricing__foot a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sous 380 px, les deux options ne tiennent plus côte à côte */
@media (max-width: 379px) {
  .mw-toggle {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-m);
  }

  .mw-toggle__btn {
    justify-content: center;
  }
}

@media (min-width: 760px) {
  .mw-plans {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (min-width: 1000px) {
  .mw-pricing {
    padding: 90px 0;
  }
}

/* ---------- 6 bis. Réglette mensuel/annuel + « Avant l'abonnement » ---------- */

/* Segmented control : deux options, l'active en noir plein. Pas de pastille
   coulissante — elle obligerait à mesurer les boutons en JS pour un gain
   visuel nul, et les deux libellés n'ont pas la même longueur. */
.mw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  padding: 5px;
  border-radius: var(--radius-l);
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.mw-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-l);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-muted);
  transition: background 0.25s ease, color 0.25s ease;
}

.mw-toggle__btn:hover {
  color: var(--color-dark);
}

.mw-toggle__btn.is-active {
  background: var(--color-black);
  color: var(--color-white);
}

/* Le gain se lit dans le bouton lui-même : c'est l'argument, pas un détail */
.mw-toggle__save {
  padding: 3px 9px;
  border-radius: var(--radius-l);
  background: var(--color-accent-green);
  color: var(--color-black);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Le prix change au clic : sans transition, la carte « saute » */
.mw-plan__price strong {
  transition: color 0.2s ease;
}

/* Le prix se rapproche de sa note, la note reprend la marge du bloc */
.mw-plan__price {
  margin-bottom: 8px;
}

.mw-plan__billing {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-muted-light);
  margin-bottom: 22px;
}

.mw-plan__billing strong {
  font-weight: 600;
  color: var(--color-dark);
}

.mw-plan--featured .mw-plan__billing {
  color: rgba(255, 255, 255, 0.55);
}

.mw-plan--featured .mw-plan__billing strong {
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- 6 ter. Le démarrage (4 étapes) ---------- */

/* Même langage visuel que les cartes « risques » (numéro en mono vert,
   puis titre, puis texte) mais sur fond clair : c'est la même page, et
   le lecteur reconnaît la grammaire d'une section à l'autre. */
/* Section sombre (09/09), comme « les risques ». Les deux bandes noires
   se répondent : l'une dit le problème en haut de page, l'autre dit le
   déroulé juste avant les tarifs.
   Le fond étant plein, la section a besoin de son propre rembourrage —
   les 20px qui suffisaient quand elle se fondait dans la page laisseraient
   le noir coller au texte. */
.mw-steps {
  padding: 70px 0;
  background: var(--color-dark-2);
  color: var(--color-white);
}

.mw-steps__head {
  text-align: center;
  margin-bottom: 36px;
}

/* .section-title est en gris foncé : illisible sur le noir */
.mw-steps__title {
  color: var(--color-white);
}

.mw-steps__head .pill {
  margin-bottom: 18px;
}

.mw-steps__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Mêmes valeurs que .mw-risk : sur fond sombre, une carte blanche
   écraserait tout, un simple voile translucide suffit à la détacher. */
.mw-step {
  padding: 26px 24px;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.mw-step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-accent-green);
  margin-bottom: 12px;
}

.mw-step__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 10px;
}

.mw-step__text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

@media (min-width: 700px) {
  .mw-steps__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .mw-steps__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- 7. Garantie / rassurance ---------- */
.mw-guarantee {
  padding: 20px 0 70px;
}

/* Ni dégradé vert, ni cartes blanches, ni cadre extérieur (09/09) : la
   section se fond dans la page, seules les trois cartes restent dessinées.
   Le rembourrage est conservé bien qu'il n'encadre plus rien — il aligne
   les trois cartes sur les 1000px de la grille « Le démarrage » juste
   au-dessus. Le retirer les ferait dépasser de la colonne. */
.mw-guarantee__card {
  padding: 34px 26px;
  background: transparent;
}

.mw-guarantee__intro {
  text-align: center;
  margin-bottom: 30px;
}

.mw-guarantee__title {
  max-width: 560px;
  /* Seul élément de l'intro depuis le 09/09 : on annule la marge basse
     de .section-title, sinon elle s'ajoute à celle de .mw-guarantee__intro. */
  margin: 0 auto;
}

.mw-guarantee__points {
  list-style: none;
  display: grid;
  gap: 16px;
}

.mw-guarantee__points li {
  padding: 22px 20px;
  border-radius: var(--radius-s);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.13);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
}

/* Pictos des trois engagements. Vert foncé et non le vert accent :
   le #3af27b ne donne que 1,48:1 de contraste sur blanc — la règle de
   la charte de rapport vaut ici aussi, le vert néon se pose en aplat,
   jamais en trait sur fond clair. */
.mw-guarantee__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 13px;
  color: #17a34a;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mw-guarantee__points strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin-bottom: 7px;
}

@media (min-width: 760px) {
  .mw-guarantee__card {
    padding: 48px;
  }

  .mw-guarantee__points {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 8. Témoignages ---------- */
.mw-proof {
  padding: 40px 0 70px;
}

.mw-proof__head {
  text-align: center;
  margin-bottom: 36px;
}

.mw-proof__head .pill {
  margin-bottom: 18px;
}

.mw-proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.mw-quote {
  padding: 28px 26px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.mw-quote blockquote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.mw-quote figcaption {
  display: grid;
  gap: 2px;
  font-size: 14px;
}

.mw-quote figcaption strong {
  color: var(--color-black);
}

.mw-quote figcaption span {
  color: var(--color-muted-light);
  font-size: 13px;
}

@media (min-width: 760px) {
  .mw-proof__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 9. FAQ ---------- */
.mw-faq {
  padding: 20px 0 70px;
}

.mw-faq__head {
  text-align: center;
  margin-bottom: 32px;
}

.mw-faq__head .pill {
  margin-bottom: 18px;
}

.mw-faq__list {
  display: grid;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

/* Dix questions en une colonne, ça fait une page à soi tout seul.
   À partir de 900 px on passe sur deux colonnes.
   align-items: start est indispensable : par défaut une case de grille
   s'étire sur la hauteur de sa rangée, donc ouvrir une réponse
   étirerait aussi la question d'en face, avec un grand vide dedans. */
@media (min-width: 900px) {
  .mw-faq__list {
    grid-template-columns: 1fr 1fr;
    max-width: 980px;
    align-items: start;
    gap: 12px 16px;
  }
}

/* .faq-item vient de style.css : on ajuste le fond pour cette page… */
.mw-faq__item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

/* …et la taille des réponses, à 13px dans style.css. Avec dix questions,
   la FAQ porte une bonne part du texte de la page : elle doit être au
   même corps que le reste. Override local — index.html garde ses 13px. */
.mw-faq__item p {
  font-size: 14px;
}

/* ---------- 9 bis. Qui suis-je ---------- */

/* .about-card vient de style.css et se suffit à elle-même (fond noir,
   passage en ligne à 720px). On ne règle ici que son insertion dans le
   rythme de la page : largeur alignée sur la grille « Le démarrage »
   et sur les cartes « je m'engage », qui font 1000px juste au-dessus. */
/* Espacement calé à la mesure (14/09), pas à l'estime : la section
   suivante impose déjà 90px de vide sous la carte — ses 70px de
   rembourrage plus la marge de sa pastille. On ne peut donc pas descendre
   en dessous ; on aligne le dessus sur cette valeur pour que le bloc soit
   centré entre la bande noire et « Ce que vous obtenez ».
   Le rembourrage bas est à zéro pour la même raison : tout ajout ici
   creuserait un écart que rien ne compense de l'autre côté. */
.mw-about {
  padding: 58px 0 0;
}

.mw-about .about-card {
  max-width: 1000px;
  margin: 0 auto;
}

/* Carte blanche et non noire sur cette page, pour se lier visuellement à
   la FAQ juste au-dessus : mêmes fond, bordure et rayon que .mw-faq__item.
   ⚠️ Scopé sous .mw-about — la carte reste noire sur index.html.
   Le fond changeant, les trois couleurs de texte doivent suivre : sur
   noir, le titre était en gris clair et le texte en blanc. */
.mw-about .about-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}

.mw-about .about-card h3 {
  color: var(--color-black);
}

.mw-about .about-card__body p {
  color: var(--color-muted);
}

/* ---------- 10. CTA final ---------- */

/* Bloc sombre pour clore la page. Le pied de page est en noir pur avec
   40px de marge au-dessus et des coins arrondis : les deux ne se
   confondent pas, et la page se ferme sur un seul geste possible. */
.mw-final {
  /* 190px en bas : c'est cette bande libre sous la carte qui laisse le
     halo se voir. Avec les 80px d'origine, il restait coincé derrière
     l'aplat noir. */
  padding: 10px 0 100px;
  /* pour ancrer le halo et couper ce qui déborde */
  position: relative;
  overflow: hidden;
}

/* la carte sombre repasse devant le halo */
.mw-final > .container {
  position: relative;
  z-index: 1;
}

.mw-final__card {
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 28px 40px;
  border-radius: var(--radius-m);
  background: var(--color-dark-2);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.mw-final__title {
  color: var(--color-white);
  max-width: 560px;
  margin: 0 auto 14px;
}

.mw-final__lede {
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

/* Le « gros CTA » : même vert que le bouton du tunnel qu'il ouvre, pour
   que le visiteur reconnaisse le geste une fois la popup affichée. */
.mw-final__cta {
  background: var(--color-accent-green);
  color: var(--color-black);
  font-size: 17px;
  padding: 19px 38px;
  white-space: normal;
}

.mw-final__cta:hover {
  background: #2fdd6c;
}

.mw-final__note {
  margin-top: 16px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
}

/* Bouton qui se fait passer pour un lien, dans un paragraphe */
.lien-inline {
  font: inherit;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

.lien-inline:hover {
  color: var(--color-black);
}

@media (min-width: 700px) {
  .mw-final__card {
    padding: 56px 48px 48px;
  }
}


/* ---------- 11. Le popup contact en mode tunnel ---------- */

/* Tout ce bloc est préfixé .contact-modal--tunnel ou .tunnel- :
   la popup de index.html partage le même CSS de base dans style.css
   et ne doit surtout pas bouger. */

/* Isoler : le voile passe de 60 % à 88 % d'opacité et le flou de 4 à 10 px.
   La page derrière doit cesser d'être une option — c'est ce qui distingue
   une popup d'un tunnel. */
.contact-modal--tunnel .contact-modal__backdrop {
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Mention « facultatif » : dire ce qui n'est PAS obligatoire allège
   autant le formulaire que retirer un champ. */
.contact-form__field .opt {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}

/* Le bloc de choix : formule + périodicité + total, encadrés ensemble
   pour se lire comme un récapitulatif de commande et non comme deux
   questions de plus dans un formulaire. */
.tunnel-choice {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 4px;
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tunnel-choice__group {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* un fieldset refuse de rétrécir sans ça */
}

.tunnel-choice legend {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  padding: 0;
}

/* Le total : la ligne qui dit ce qu'on paiera vraiment */
.tunnel-total {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.tunnel-total strong {
  color: var(--color-accent-green);
  font-weight: 600;
}

.tunnel-choice__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tunnel-choice__opt {
  position: relative;
  /* flex + stretch : les deux cases font la même hauteur quoi qu'il y ait
     dedans. Sans ça, celle qui porte « (1 mois offert) » dépasse l'autre. */
  display: flex;
  cursor: pointer;
}

/* Le bouton radio natif reste focusable mais invisible : on stylise le
   span à sa place. Il garde sa taille pour que le focus clavier tombe
   bien sur l'option, pas dans le vide. */
.tunnel-choice__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* Deux états franchement opposés : l'option NON retenue reste en gris très
   foncé, proche du panneau, et seule l'option retenue passe en blanc.
   Le choix se lit alors d'un coup d'œil, sans avoir à comparer deux gris.
   La bordure fait 2px dans les deux cas, sinon la case saute au clic. */
.tunnel-choice__opt span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #26262c;
  border: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* Sur le gris foncé, le vert sombre du site est illisible : on prend le
   vert accent. Il repasse en vert foncé une fois la case en blanc. */
.tunnel-choice__opt span em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent-green);
}

.tunnel-choice__opt input:checked + span em {
  color: #17a34a;
}

/* Le nom de la formule et son prix sur deux lignes : plus lisible qu'une
   ligne unique qui se couperait n'importe où dans une case étroite. */
.tunnel-choice__group:first-child .tunnel-choice__opt span {
  flex-direction: column;
  gap: 2px;
}

.tunnel-choice__opt:hover span {
  background: #32323a;
  border-color: rgba(255, 255, 255, 0.22);
}

.tunnel-choice__opt input:checked ~ span,
.tunnel-choice__opt:hover input:checked + span {
  background: var(--color-white);
}

/* Sélectionné : blanc franc, liseré vert, texte noir */
.tunnel-choice__opt input:checked + span {
  background: var(--color-white);
  border-color: var(--color-accent-green);
  color: var(--color-black);
}

.tunnel-choice__opt input:focus-visible + span {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 2px;
}

/* Le CTA passe en vert fluo : avec des cases de choix blanches juste
   au-dessus, un bouton blanc ne se distinguerait plus de la sélection.
   Le vert sur noir donne ~11,7:1 de contraste avec du texte noir. */
.contact-modal--tunnel .contact-form__submit {
  background: var(--color-accent-green);
  color: var(--color-black);
  border-color: var(--color-accent-green);
}

.contact-modal--tunnel .contact-form__submit:hover {
  background: #2fdd6c;
  border-color: #2fdd6c;
}

/* Réassurance sous le bouton : la dernière chose lue avant le clic */
.tunnel-reassure {
  grid-column: 1 / -1;
  margin-top: -4px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 420px) {
  .tunnel-choice__options {
    grid-template-columns: 1fr;
  }
}


/* ---------- 12. Footer allégé (landing) ---------- */

/* Le footer complet de style.css est conservé pour index.html ; ici on
   ne garde que la marque, WhatsApp et les mentions légales. */
.footer--landing {
  /* La marge haute de 40px de style.css est supprimée ici : le halo du
     CTA final laisse déjà 190px de respiration juste au-dessus, et cette
     marge n'y ajoutait qu'une bande de fond clair supplémentaire.
     Le rembourrage, lui, est conservé — le footer a un rayon de 60px en
     haut, sans lui le logo arriverait au ras de l'arête. */
  margin-top: 0;
  padding-top: 44px;
  padding-bottom: 28px;
}

.footer__landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 32px;
}

/* Logo noir sur fond noir : on l'inverse, comme dans le footer complet */
.footer__landing-logo {
  height: 58px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* .footer__bottom garde son filet de séparation ; on annule juste la
   marge que laissait le bouton de contact disparu. */
.footer--landing .footer__bottom {
  padding-top: 24px;
}

@media (min-width: 640px) {
  .footer__landing {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ---------- 13. Compacité du popup tunnel ---------- */

/* Le panneau faisait 1049px de haut pour ~773px disponibles sur un
   portable : il fallait faire défiler pour atteindre le bouton, ce qui
   est exactement ce qu'un tunnel doit éviter.
   La méthode : élargir plutôt que rogner. Un panneau plus large met deux
   champs par rangée et fait tenir chapô, consentement et réassurance sur
   une ligne au lieu de deux — on gagne de la hauteur sans rien retirer. */
.contact-modal--tunnel .contact-modal__panel {
  max-width: 660px;
  padding: 32px 36px 30px;
}

.contact-modal--tunnel .contact-modal__lede {
  margin-bottom: 20px;
}

.contact-modal--tunnel .contact-form {
  gap: 12px;
}

.contact-modal--tunnel .contact-form input,
.contact-modal--tunnel .contact-form textarea {
  padding: 10px 13px;
}

/* Bloc de choix resserré : mêmes informations, moins d'air */
.contact-modal--tunnel .tunnel-choice {
  gap: 11px;
  padding: 14px;
}

.contact-modal--tunnel .tunnel-choice legend {
  margin-bottom: 6px;
}

.contact-modal--tunnel .tunnel-choice__options {
  gap: 8px;
}

.contact-modal--tunnel .tunnel-choice__opt span {
  min-height: 46px;
  padding: 8px 10px;
}

.contact-modal--tunnel .tunnel-total {
  padding-top: 10px;
}

/* Sous 560px, les deux champs par rangée redeviennent pleine largeur :
   un email sur 130px serait illisible. */
@media (max-width: 559px) {
  .contact-modal--tunnel .contact-form__field--half {
    grid-column: 1 / -1;
  }
}

/* Intitulés du bloc de choix à gauche plutôt qu'au-dessus : deux lignes
   de moins, soit ~50px gagnés sans rien retirer de l'information.
   En dessous de 560px on repasse au-dessus, faute de largeur. */
@media (min-width: 560px) {
  .contact-modal--tunnel .tunnel-choice__group {
    display: grid;
    grid-template-columns: 122px 1fr;
    align-items: center;
    gap: 12px;
  }

  .contact-modal--tunnel .tunnel-choice legend {
    /* un legend ne se place pas en case de grille : on le sort du flux
       normal du fieldset avec float, seule méthode fiable ici */
    float: left;
    width: 122px;
    margin-bottom: 0;
  }

  .contact-modal--tunnel .tunnel-choice__options {
    grid-column: 2;
  }
}

/* Derniers pixels : marges et corps resserrés là où ça ne se voit pas */
.contact-modal--tunnel {
  padding: 12px;
}

.contact-modal--tunnel .contact-modal__panel {
  max-height: calc(100vh - 24px);
  padding-bottom: 24px;
}

.contact-modal--tunnel .contact-modal__title {
  font-size: 22px;
}

.contact-modal--tunnel .contact-form__field {
  gap: 4px;
}

.contact-modal--tunnel .tunnel-total {
  padding-top: 8px;
  font-size: 12.5px;
}


/* ---------- 14. Barre de navigation allégée (landing) ---------- */

/* La barre du site fait 74px de haut pour 960px de large : sur une landing
   qui n'a que trois ancres, c'est disproportionné et ça mange le hero.
   Tout est scopé sous .site-header--landing — index.html et portfolio.html
   gardent la barre d'origine. */
/* 620px : le contenu réel (logo + 3 liens + WhatsApp + CTA) mesure 520px.
   Le reste est de l'espacement volontaire réparti par space-between —
   à 820px la barre était étirée et laissait un trou avant WhatsApp. */
.site-header--landing .nav {
  max-width: 620px;
  margin-top: 10px;
  padding: 7px 10px 7px 18px;
  gap: 12px;
}

.site-header--landing.is-scrolled .nav {
  max-width: 592px;
}

/* C'est le logo qui fixe la hauteur de la barre : 52 → 40px */
.site-header--landing .nav__logo img {
  height: 40px;
}

.site-header--landing .nav__links {
  font-size: 13.5px;
  gap: 18px;
}

.site-header--landing .nav__whatsapp {
  width: 36px;
  height: 36px;
}

.site-header--landing .nav__whatsapp svg {
  width: 17px;
  height: 17px;
}

/* CTA du menu mobile. .nav__mobile a (0,2,0) l'emporte sur .btn (0,1,0)
   pour display, padding et rayon : il faut donc tout redéclarer ici,
   sinon le bouton reprend l'allure d'une simple ligne de menu. */
.site-header--landing .nav__mobile-cta {
  margin-top: 8px;
}

.site-header--landing .nav__mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: var(--radius-l);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 600;
}

.site-header--landing .nav__mobile-cta a:hover {
  background: var(--color-dark);
}

/* Le CTA est l'autre élément qui pousse la barre en hauteur.

   ⚠️ Cibler .btn est indispensable : le bouton WhatsApp porte LUI AUSSI
   la classe .nav__cta (c'est elle qui l'affiche à partir de 1040px).
   Sans le .btn, ce padding s'appliquait à la pastille ronde de 36px —
   avec box-sizing: border-box, 20px de rembourrage de chaque côté
   laissent une zone de contenu négative, et l'icône disparaissait
   pendant que le fond vert restait peint. */
.site-header--landing .nav .btn.nav__cta {
  font-size: 14px;
  padding: 10px 20px;
}

/* Le hero compensait une barre de 87px (marge comprise) ; elle n'en fait
   plus que 66, on récupère l'écart plutôt que de laisser un trou. */
.mw-hero {
  padding-top: 120px;
  /* la vidéo assurait la transition ; sans elle, le hero reprend un bas */
  padding-bottom: 60px;
}

@media (min-width: 700px) {
  .mw-hero {
    padding-top: 148px;
  }
}

/* Lien WhatsApp de l'écran de confirmation. Vert de la marque WhatsApp
   plutôt que le vert Pulpy : c'est le seul endroit de la page où le vert
   désigne un service précis et non une couleur d'accent. Sur le panneau
   noir, il ressort largement au-dessus du seuil de lisibilité. */
.lien-wa {
  color: var(--color-whatsapp);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.lien-wa:hover {
  color: var(--color-accent-green);
}


/* Liste des promesses qui n'ont plus de carte (14/09). Même grammaire que
   les listes de formules — coche verte, retrait de 26px — pour que la
   section se lise comme un prolongement des cartes, pas comme un bloc à
   part. */
.mw-inc-list {
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 1000px;
  margin: 26px auto 0;
}

.mw-inc-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-muted);
}

.mw-inc-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #17a34a;
  font-weight: 700;
}

.mw-inc-list a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 760px) {
  .mw-inc-list {
    grid-template-columns: 1fr 1fr;
    gap: 12px 32px;
  }
}


/* Volet sécurité de la carte « Sauvegardes et sécurité ». Compact à dessein :
   il comble le vide de cette carte sans faire grandir les deux autres, qui
   s'alignent sur la plus haute. */
.mw-secu-mini {
  list-style: none;
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.mw-secu-mini li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-muted-2);
}

.mw-secu-mini li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #17a34a;
  font-weight: 700;
}


/* FAQ alignée sur l'accueil : plus de cases blanches, juste un filet fin
   entre les questions, et un dégradé vert/bleu diffus en fond de section */
.mw-faq {
  position: relative;
  isolation: isolate;
  padding: 70px 0 90px;
}

.mw-faq::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 60% at 12% 35%, rgba(58, 242, 123, 0.22), transparent 70%),
    radial-gradient(45% 60% at 88% 65%, rgba(127, 179, 232, 0.32), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.mw-faq .pill {
  background: var(--color-white);
}

.mw-faq__list {
  row-gap: 0;
}

.mw-faq__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 18px 4px;
}

/* Filet du haut : sur la 1re question (mobile), sur les 2 premières (2 colonnes) */
.mw-faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .mw-faq__item:nth-child(2) {
    border-top: 1px solid var(--color-border);
  }
  .mw-faq__list {
    column-gap: 48px;
  }
}