/* ==========================================================================
   Assistance Informatique 91, feuille de style
   Charte : Plus Jakarta Sans 800 (titres) + Karla (texte)
            Bleu nuit #0C2233 · Menthe #17B183
   Réutilisable telle quelle pour les futures pages site-web / google-ads.

   Sommaire
   1.  Variables & reset          6.  Services dépannage (carrousel)
   2.  Éléments de base           7.  Avis (carrousel)
   3.  Composants                 8.  Tarifs
   4.  Header / navigation        9.  Zone d'intervention
   5.  Hero                       10. Contact
                                  11. Footer
                                  12. Responsive
   ========================================================================== */

/* ------------------------------ 1. Variables ----------------------------- */
:root {
  --nuit:         #0C2233;
  --nuit-clair:   #16344B;
  --menthe:       #17B183;
  --menthe-fonce: #0E8A66;
  --menthe-voile: #E2F4EE;
  --gris-bleu:    #5B7183;
  --ligne:        #E1E7EA;
  --ligne-douce:  #EDF1F3;
  --fond:         #F7FAF9;
  --blanc:        #FFFFFF;
  --star:         #17B183;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(12, 34, 51, .06);
  --shadow:    0 4px 16px rgba(12, 34, 51, .07);
  --shadow-md: 0 12px 32px rgba(12, 34, 51, .10);
  --shadow-lg: 0 26px 64px rgba(12, 34, 51, .16);

  --container: 1180px;
  --header-h: 78px;

  --font-title: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:  "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

html {
  /* Pas de scroll-behavior ici : le defilement vers les ancres est anime par
     main.js, qui adapte sa duree a la distance. Les deux ensemble se
     contrarieraient. */
  /* Exactement la hauteur de l'en-tete : au-dela, une bande de la section
     precedente reste visible sous le bandeau apres un saut d'ancre. */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gris-bleu);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------- 2. Éléments de base -------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--nuit);
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.8vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: .95rem; letter-spacing: -.01em; }

p { margin: 0 0 var(--space-4); }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--menthe-fonce); text-decoration: none; }
a:hover { color: var(--nuit); }

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

:focus-visible {
  outline: 3px solid rgba(23, 177, 131, .45);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

.section { padding-block: clamp(3.5rem, 7vw, var(--space-8)); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--nuit);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ----------------------------- 3. Composants ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.55rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--menthe);
  color: #04211A;
  box-shadow: 0 8px 22px rgba(23, 177, 131, .32);
}
.btn-primary:hover {
  background: var(--menthe-fonce);
  color: #fff;
  box-shadow: 0 12px 28px rgba(23, 177, 131, .38);
}

.btn-outline {
  background: transparent;
  color: var(--nuit);
  border-color: var(--ligne);
}
.btn-outline:hover { background: var(--menthe-voile); border-color: var(--menthe); color: var(--nuit); }

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 17px; height: 17px; fill: var(--star); }

.section-head {
  max-width: 660px;
  margin: 0 auto clamp(2.2rem, 4vw, var(--space-7));
  text-align: center;
}
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  max-width: none;
  text-align: left;
}
.section-tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.section-tag-light { background: rgba(255, 255, 255, .15); color: #fff; }
.section-sub { font-size: 1.05rem; margin-bottom: 0; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  font-size: .95rem;
  font-weight: 700;
  color: var(--menthe-fonce);
}
.card-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.card-link:hover svg { transform: translateX(3px); }
.card-link.is-soon {
  color: var(--gris-bleu);
  opacity: .62;
  cursor: default;
  font-weight: 600;
}

/* -------------------------- 4. Header / navigation ------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--ligne);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--nuit); }
.logo:hover { color: var(--nuit); }
/* Le logo remplace l'ancienne pastille dessinee en code. Plus de fond ni de
   coin arrondi : la forme se suffit a elle-meme et se pose directement sur
   l'en-tete clair comme sur le pied de page sombre. */
.logo-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 34px;
  flex: none;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.logo-text { display: flex; align-items: baseline; gap: .35rem; }
.logo-text strong { font-family: var(--font-title); font-size: 1rem; font-weight: 800; letter-spacing: -.03em; }
.logo-dept {
  padding: .05rem .4rem;
  border-radius: 6px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-family: var(--font-title);
  font-size: .85rem;
  font-weight: 800;
}

.primary-nav { display: flex; align-items: center; align-self: stretch; gap: var(--space-5); }

/* Les entrées occupent toute la hauteur du header : le sous-menu peut ainsi
   s'accrocher au bas de la barre, et non au bas du texte du lien. */
.nav-links { display: flex; align-items: center; align-self: stretch; gap: var(--space-5); }
.nav-links > li { display: flex; align-items: center; align-self: stretch; }
.nav-links > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--nuit);
  font-weight: 600;
  font-size: .97rem;
  padding-block: .35rem;
}
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--menthe);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.nav-links > li > a:hover::after { transform: scaleX(1); }

/* --- Menu déroulant (survol à la souris, focus au clavier) --- */
.has-menu { position: relative; }
.chev { width: 14px; height: 14px; transition: transform .2s ease; }
.has-menu:hover .chev,
.has-menu:focus-within .chev { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + .6rem);
  left: 50%;
  z-index: 120;
  min-width: 330px;
  padding: .5rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--blanc);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Passerelle invisible : le curseur traverse l'espace sans refermer le menu */
.submenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -.7rem;
  height: .7rem;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.submenu ul { display: grid; gap: 2px; }
.submenu a {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem .65rem;
  border-radius: var(--radius-sm);
  transition: background-color .16s ease;
}
.submenu a:hover { background: var(--menthe-voile); }
.submenu-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
}
.submenu-ico svg { width: 18px; height: 18px; }
.submenu-text { display: flex; flex-direction: column; line-height: 1.35; }
.submenu-text strong {
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--nuit);
}
.submenu-text span { font-size: .82rem; color: var(--gris-bleu); }

/* Dernière entrée : une autre page, pas une ancre. Le filet marque la rupture. */
.submenu-sep { margin-top: .3rem; padding-top: .4rem; border-top: 1px solid var(--ligne); }
.submenu-ico-accent { background: var(--nuit); color: var(--menthe); }

.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  background: var(--nuit);
  color: #fff;
  transition: background-color .18s ease, transform .18s ease;
}
.btn-phone:hover { background: var(--nuit-clair); color: #fff; transform: translateY(-1px); }
/* L'icone prend la couleur du bouton qui la contient. Le menthe n'est garde
   que pour le bouton sombre de l'en-tete, ou il ressort. */
.btn-phone-icon { display: grid; place-items: center; color: inherit; }
.btn-phone .btn-phone-icon { color: var(--menthe); }
.btn-phone-icon svg { width: 19px; height: 19px; }
.btn-phone-text { display: flex; flex-direction: column; line-height: 1.15; }
.btn-phone-label { font-size: .68rem; font-weight: 500; opacity: .8; }
.btn-phone-number { font-family: var(--font-title); font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-sm);
  background: var(--blanc);
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 5px; justify-items: center; }
.nav-toggle-bars span {
  display: block;
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--nuit);
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------- 5. Hero -------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 10vw, 7.5rem);
  background: var(--nuit);
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
/* Fond de hero desature : sous le voile bleu nuit, toute couleur chaude de la
   photo (un ecran orange, une lampe) traverse et entre en concurrence avec le
   menthe, seule couleur qui doit ressortir. Le noir et blanc supprime le
   probleme a la source, quelle que soit l image choisie. */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  filter: grayscale(1) contrast(1.04);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 380px at 50% 8%, rgba(23, 177, 131, .20), transparent 62%),
    linear-gradient(180deg, rgba(12, 34, 51, .74) 0%, rgba(12, 34, 51, .93) 100%);
}

.hero-inner { text-align: center; display: grid; justify-items: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: var(--space-4);
  padding: .42rem .95rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
}
.eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--menthe);
  box-shadow: 0 0 0 4px rgba(23, 177, 131, .22);
}

.hero h1 { color: #fff; margin-bottom: var(--space-4); max-width: 17ch; }

.hero-sub {
  max-width: 46ch;
  font-size: 1.12rem;
  margin-bottom: var(--space-6);
  color: rgba(255, 255, 255, .8);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .94rem;
  font-weight: 600;
  color: #fff;
}
.trust-strip svg { width: 16px; height: 16px; color: var(--menthe); flex: none; }

/* ------------------------- 6a. Les 3 activités --------------------------- */
.activities { background: var(--blanc); }

/* Deux activites depuis le retrait de la page relance : la grille s'adapte
   au nombre de cartes plutot que d'imposer trois colonnes. */
.act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  max-width: 880px;
  margin-inline: auto;
}

.act-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.act-card:hover {
  transform: translateY(-5px);
  border-color: var(--menthe);
  box-shadow: var(--shadow-md);
}

.act-media { background: var(--menthe-voile); }
.act-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.act-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}
.act-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin: -2.6rem 0 var(--space-4);
  border-radius: 12px;
  background: var(--nuit);
  color: var(--menthe);
  box-shadow: var(--shadow);
  position: relative;
}
.act-icon svg { width: 21px; height: 21px; }
.act-body h3 { margin-bottom: var(--space-2); }
.act-body > p { font-size: .97rem; margin-bottom: var(--space-3); }
.act-for {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: .22rem .65rem;
  border-radius: 999px;
  background: var(--fond);
  border: 1px solid var(--ligne);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gris-bleu);
}

/* --------------------- 6b. Services dépannage (carrousel) ----------------- */
.services { background: var(--fond); overflow: hidden; }

.services-inner {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
/* Le bouton d appel dans un en-tete centre : la pastille doit rester
   alignee sur le texte, pas collee au bord. */
.section-head .btn { margin-top: var(--space-2); }
.section-head .btn-phone-icon { width: 22px; height: 22px; }

.services-intro h2 { margin-bottom: var(--space-4); }
.services-intro > p { margin-bottom: var(--space-5); max-width: 40ch; }

.carousel-nav { display: flex; gap: .6rem; margin-top: var(--space-5); }
.c-arrow {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--nuit);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, opacity .18s ease;
}
.c-arrow svg { width: 20px; height: 20px; }
.c-arrow:hover:not(:disabled) { background: var(--nuit); border-color: var(--nuit); color: var(--menthe); }
.c-arrow:disabled { opacity: .35; cursor: default; }

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-inline: calc(var(--space-5) * -1);
  padding-inline: var(--space-5);
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-track {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.svc-card {
  position: relative;
  flex: 0 0 clamp(228px, 30%, 268px);
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--nuit);
  box-shadow: var(--shadow);
}
.svc-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 34, 51, .18) 24%, rgba(12, 34, 51, .93) 100%);
}
.svc-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-5) var(--space-4);
}
.svc-body h3 { color: #fff; margin-bottom: var(--space-2); font-size: 1.15rem; }
.svc-body p { margin: 0; font-size: .89rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }

/* ----------------------------- 7. Avis ----------------------------------- */
.reviews { background: var(--blanc); overflow: hidden; }

.rating-inline { display: flex; align-items: center; gap: .7rem; }
.rating-inline p { margin: 0; font-size: .95rem; }
.rating-inline strong { font-family: var(--font-title); font-size: 1.3rem; font-weight: 800; color: var(--nuit); }

.review-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(268px, 33%, 372px);
  scroll-snap-align: start;
  padding: var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  box-shadow: var(--shadow-sm);
}
.review-card blockquote {
  margin: var(--space-3) 0 var(--space-5);
  font-size: .98rem;
  quotes: "\00AB\00A0" "\00A0\00BB";
}
.review-card blockquote::before { content: open-quote; }
.review-card blockquote::after  { content: close-quote; }

.review-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ligne-douce);
}
.review-author img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--menthe-voile);
  flex: none;
}
.review-id { display: flex; flex-direction: column; line-height: 1.35; }
.review-id strong { color: var(--nuit); font-size: .96rem; }
.review-city { font-size: .85rem; color: var(--gris-bleu); }

/* ------------------------------- 8. Tarifs ------------------------------- */
.pricing { background: var(--fond); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  transition: transform .22s ease, box-shadow .22s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.price-card-featured {
  border: 2px solid var(--menthe);
  box-shadow: var(--shadow-md);
}

.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--menthe);
  color: #04211A;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-card h3 { margin-bottom: var(--space-2); }
.price { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .2rem; }
.price-amount { font-family: var(--font-title); font-size: 2.6rem; font-weight: 800; color: var(--nuit); letter-spacing: -.04em; }
.price-unit { font-size: 1rem; font-weight: 600; }
.price-note { font-size: .89rem; margin-bottom: var(--space-5); }

.price-features { margin-bottom: var(--space-5); }
.price-features li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .6rem;
  font-size: .95rem;
}
.price-features li::before {
  content: "";
  position: absolute;
  left: 0; top: .32em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--menthe-voile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E8A66' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.price-card .btn { margin-top: auto; }

.pricing-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ligne);
}
.pricing-notes li { position: relative; padding-left: 1.35rem; font-size: .93rem; }
.pricing-notes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--menthe-fonce);
  font-weight: 700;
}

/* ------------------------ 9. Zone d'intervention ------------------------- */
.zone { background: var(--blanc); }

.zone-inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.zone-intro h2 { margin-bottom: var(--space-4); }
.zone-intro > p { margin-bottom: 0; max-width: 42ch; }

.zone-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.zone-list li {
  padding: .55rem 1.05rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  background: var(--fond);
  font-size: .93rem;
  font-weight: 600;
  color: var(--nuit);
}

/* ------------------------------- 10. Contact ----------------------------- */
.contact {
  background:
    radial-gradient(680px 320px at 10% 6%, rgba(23, 177, 131, .22), transparent 62%),
    linear-gradient(150deg, var(--nuit) 0%, var(--nuit-clair) 100%);
  color: rgba(255, 255, 255, .84);
}
.contact h2 { color: #fff; }

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

.contact-lead { font-size: 1.06rem; max-width: 34ch; }

.contact-phone {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: var(--space-5);
  padding: .85rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  transition: background-color .18s ease, transform .18s ease;
}
.contact-phone:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px); }
.contact-phone svg { width: 24px; height: 24px; color: var(--menthe); }

.contact-facts { display: grid; gap: .55rem; }
.contact-facts li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: .96rem;
}
.contact-facts strong { color: #fff; min-width: 92px; }

.contact-form {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  box-shadow: var(--shadow-lg);
}
.contact-form h3 { margin-bottom: var(--space-5); }

.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  margin-bottom: .35rem;
  font-size: .89rem;
  font-weight: 700;
  color: var(--nuit);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-sm);
  background: #FCFEFD;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--nuit);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder,
.field textarea::placeholder { color: #9FB0BC; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--menthe);
  box-shadow: 0 0 0 4px rgba(23, 177, 131, .18);
}
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7183' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 15px 15px;
}

.form-legal {
  margin: var(--space-3) 0 0;
  font-size: .82rem;
  text-align: center;
}

/* Message affiche uniquement si l'envoi du formulaire echoue. */
.form-etat {
  margin: 0 0 var(--space-3);
  padding: .8rem 1rem;
  border: 1px solid var(--alerte-ligne);
  border-radius: var(--radius-sm);
  background: var(--alerte-voile);
  color: var(--alerte);
  font-size: .92rem;
  font-weight: 600;
}
.contact-form button[type="submit"][disabled] {
  opacity: .6;
  cursor: progress;
}

/* ------------------------------- 11. Footer ------------------------------ */
.site-footer {
  background: var(--nuit);
  color: rgba(255, 255, 255, .68);
  padding-top: clamp(2.5rem, 5vw, var(--space-7));
  font-size: .95rem;
}
.site-footer h4 { color: #fff; margin-bottom: var(--space-3); }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: var(--menthe); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--space-6) var(--space-5);
  padding-bottom: var(--space-6);
}

.logo-footer { color: #fff; margin-bottom: var(--space-4); }

/* Cibles cliquables : ces liens tombaient a 18 px de haut, sous le minimum
   de 24 px recommande. La regle vaut a toutes les largeurs, pas seulement au
   doigt : une cible trop petite se rate aussi a la souris. */
.rating-link,
.merci-urgent a,
.footer-links a,
.footer-legal a,
.lp-footer-nav a,
.site-footer address a,
.card-link {
  display: inline-block;
  padding-block: .45rem;
}

/* ═══════════════════ PAGE RELANCE CLIENTS ═══════════════════ */

/* --- Les trois chiffres du constat --- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}
.chiffre {
  padding: var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  text-align: center;
}
.chiffre-valeur {
  margin: 0 0 .35rem;
  font-family: var(--font-title);
  font-size: clamp(2rem, 4.5vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--menthe-fonce);
}
.chiffre-texte { margin: 0; font-size: .95rem; color: var(--gris-bleu); }
.chiffres-source {
  max-width: 68ch;
  margin: var(--space-5) auto 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--gris-bleu);
  text-align: center;
}

/* --- Le calcul, mene par le visiteur lui-meme --- */
.calcul { background: var(--menthe-voile); border-block: 1px solid #CDE9DF; }
.calcul-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.calcul-intro h2 { margin-bottom: var(--space-3); }
.calcul-intro p { margin: 0; color: var(--nuit); max-width: 42ch; }

.calcul-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  padding: clamp(1.5rem, 3vw, var(--space-6));
  border-radius: var(--radius-lg);
  background: var(--blanc);
  box-shadow: var(--shadow-md);
}
.calcul-form .field { margin: 0; }
.calcul-form input { font-variant-numeric: tabular-nums; }
.calcul-resultat {
  grid-column: 1 / -1;
  margin: var(--space-2) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ligne);
  font-size: 1.05rem;
  color: var(--nuit);
}
.calcul-resultat strong {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--menthe-fonce);
}
.calcul-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--gris-bleu);
}

/* --- Tableau des metiers --- */
.metiers-tableau {
  overflow-x: auto;
  max-width: 820px;
  margin-inline: auto;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.metiers-tableau table { width: 100%; border-collapse: collapse; min-width: 32rem; }
.metiers-tableau thead th {
  padding: var(--space-4) var(--space-5);
  background: var(--fond);
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris-bleu);
}
.metiers-tableau tbody th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: 700;
  color: var(--nuit);
  border-bottom: 1px solid var(--ligne);
  white-space: nowrap;
}
.metiers-tableau tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ligne);
  color: var(--gris-bleu);
}
.metiers-tableau tbody tr:last-child th,
.metiers-tableau tbody tr:last-child td { border-bottom: none; }

/* --- Chronologie des messages --- */
.deroule-liste {
  display: grid;
  gap: var(--space-4);
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.deroule-liste > li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.deroule-quand {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.deroule-carte {
  padding: var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.deroule-carte h3 { margin: 0 0 var(--space-3); font-size: 1.05rem; }
/* Le message reel, presente comme une citation : c'est ce qui rend le
   service imaginable pour le visiteur. */
.deroule-message {
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  border-left: 3px solid var(--menthe);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--fond);
  font-size: .97rem;
  line-height: 1.6;
  color: var(--nuit);
}
.deroule-note { margin: 0; font-size: .89rem; color: var(--gris-bleu); }
.deroule-garantie {
  max-width: 820px;
  margin: var(--space-6) auto 0;
  padding: var(--space-5);
  border: 1px solid #CDE9DF;
  border-radius: var(--radius-lg);
  background: var(--menthe-voile);
  color: var(--nuit);
}
.deroule-garantie strong { display: block; margin-bottom: .3rem; }

/* --- L'objection de l'acces a la messagerie --- */
.acces-inner { max-width: 900px; margin-inline: auto; }
.acces-intro { max-width: 62ch; margin-bottom: var(--space-6); }
.acces-intro h2 { margin-bottom: var(--space-3); }
.acces-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.acces-bloc {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ligne);
  background: var(--blanc);
}
.acces-bloc h3 { margin: 0 0 var(--space-4); font-size: 1.02rem; }
.acces-bloc ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.acces-bloc li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.5; }
.acces-bloc svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; }
.acces-oui { border-color: #CDE9DF; }
.acces-oui svg { color: var(--menthe-fonce); }
.acces-non svg { color: var(--alerte); }
.acces-final {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--fond);
}
.acces-final p { margin: 0 0 var(--space-3); }
.acces-final p:last-child { margin-bottom: 0; }

/* --- Vous ne changez rien --- */
.rien-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}
.rien-carte {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  border: 1px solid var(--ligne);
}
.rien-carte h3 { margin: 0 0 var(--space-2); font-size: 1rem; }
.rien-carte p { margin: 0; font-size: .95rem; color: var(--gris-bleu); }

/* --- Ce que ca ne fait pas --- */
.limites-inner { max-width: 820px; margin-inline: auto; }
.limites-inner h2 { margin-bottom: .35rem; }
.limites-sous { margin: 0 0 var(--space-5); color: var(--gris-bleu); }
.limites-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.limites-liste li { padding-left: var(--space-4); border-left: 2px solid var(--ligne); }
.limites-liste h3 { margin: 0 0 .3rem; font-size: .99rem; }
.limites-liste p { margin: 0; font-size: .93rem; color: var(--gris-bleu); }

/* Deux cartes au lieu de trois dans la grille tarifaire */
.pricing-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }

@media (max-width: 900px) {
  .calcul-inner { grid-template-columns: 1fr; }
  .calcul-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deroule-liste > li { grid-template-columns: 1fr; gap: var(--space-3); }
  .pricing-deux { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 560px) {
  .calcul-form { grid-template-columns: 1fr; }
}

/* Champ-piege des formulaires Netlify : invisible pour les humains, rempli
   par les robots. Netlify jette alors l'envoi. Ne pas utiliser hidden : les
   robots l'ignorent. */
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
   Page de confirmation. Rassurer d'abord, proposer ensuite : l'analyse offerte
   arrive apres le rappel du delai, jamais avant, sinon l'envoi reussi se
   transforme en « vous n'avez pas fini ».
--------------------------------------------------------------------------- */
.merci-page { padding: calc(var(--header-h) + var(--space-7)) 0 var(--space-7); }
.merci-inner { max-width: 42rem; }

.merci-ico {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 0 var(--space-4);
  border-radius: 50%;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
}
.merci-ico svg { width: 26px; height: 26px; }

.merci-inner h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin-bottom: var(--space-3); }
.merci-sous { font-size: 1.08rem; color: var(--gris-bleu); margin-bottom: var(--space-6); }

.merci-suite h2,
.merci-offre h2 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); margin-bottom: var(--space-4); }
.merci-suite ol { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.merci-suite li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.merci-suite li span {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--nuit); color: #fff;
  font-family: var(--font-title); font-size: .82rem; font-weight: 800;
}
.merci-suite li p { margin: 0; font-size: .97rem; color: var(--gris-bleu); }

.merci-offre {
  padding: clamp(1.5rem, 3.5vw, var(--space-6));
  border: 1px solid #CDE9DF;
  border-radius: var(--radius-lg);
  background: var(--menthe-voile);
}
.merci-offre-tag {
  margin: 0 0 .5rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--menthe-fonce);
}
.merci-offre p { color: var(--nuit); margin-bottom: var(--space-4); }

.merci-urgent { margin: var(--space-5) 0 0; font-size: .95rem; color: var(--gris-bleu); }

/* ---------------------------------------------------------------------------
   Methode, variante sombre. La page enchaine blanc et gris du debut a la fin :
   un bloc sombre au milieu arrete le defilement et signale que c'est ici que
   se joue l'argument principal. Toutes les couleurs sont redeclarees, aucune
   n'est heritee du theme clair.
--------------------------------------------------------------------------- */
.method-sombre {
  position: relative;
  background:
    radial-gradient(760px 420px at 18% 8%, rgba(23, 177, 131, .16), transparent 62%),
    var(--nuit);
  color: rgba(255, 255, 255, .80);
  overflow: hidden;
}
.method-sombre .section-head h2 { color: #fff; }
.method-sombre .section-sub { color: rgba(255, 255, 255, .72); }

.method-sombre .method-intro { border-left-color: var(--menthe); }
.method-sombre .method-intro-forte { color: #fff; }
.method-sombre .method-intro p { color: rgba(255, 255, 255, .76); }
.method-sombre .method-intro strong { color: #fff; }

.method-sombre .method-list > li {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .11);
  transition: border-color .2s ease, background-color .2s ease;
}
.method-sombre .method-list > li:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(23, 177, 131, .45);
}
.method-sombre .method-list h3 { color: #fff; }
.method-sombre .method-list p { color: rgba(255, 255, 255, .74); }
.method-sombre .method-list strong { color: #fff; }

.method-sombre .method-num {
  background: var(--menthe);
  color: var(--nuit);
}
.method-sombre .method-when {
  background: rgba(23, 177, 131, .16);
  color: #7FE2C1;
}

/* Ouverture de la section methode. La premiere phrase est traitee comme une
   citation : c'est l'idee que le visiteur doit retenir, pas une transition. */
.method-intro {
  max-width: 46rem;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  padding-left: clamp(1rem, 2.5vw, 1.6rem);
  border-left: 3px solid var(--menthe);
}
.method-intro-forte {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--nuit);
  margin-bottom: var(--space-4);
}
.method-intro p { color: var(--gris-bleu); }
.method-intro p:last-child { margin-bottom: 0; }
.method-intro strong { color: var(--nuit); }

/* ---------------------------------------------------------------------------
   Comparatif des trois facons de faire un site. La colonne « nous » est mise
   en avant, mais les deux autres restent lisibles et factuelles : un tableau
   ou les concurrents sont caricatures se retourne contre celui qui l'ecrit.
--------------------------------------------------------------------------- */
.diff-tableau {
  overflow-x: auto;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.diff-tableau table { width: 100%; border-collapse: collapse; min-width: 42rem; }

.diff-tableau thead th {
  padding: var(--space-4) var(--space-4);
  background: var(--fond);
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris-bleu);
  vertical-align: bottom;
}
.diff-tableau tbody th {
  padding: var(--space-4);
  text-align: left;
  font-size: .92rem;
  font-weight: 700;
  color: var(--nuit);
  border-bottom: 1px solid var(--ligne);
  white-space: nowrap;
}
.diff-tableau tbody td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--ligne);
  font-size: .93rem;
  color: var(--gris-bleu);
}
.diff-tableau tbody tr:last-child th,
.diff-tableau tbody tr:last-child td { border-bottom: none; }

/* La colonne de droite : fond menthe continu, du titre a la derniere ligne. */
.diff-tableau .diff-nous { background: var(--menthe-voile); color: var(--nuit); font-weight: 600; }
.diff-tableau thead .diff-nous { color: var(--menthe-fonce); }

.diff-limites {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding: clamp(1.6rem, 3.5vw, var(--space-6));
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--fond);
}
.diff-limites h3 { margin: 0 0 .35rem; font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
.diff-limites-sous { margin: 0 0 var(--space-5); color: var(--gris-bleu); max-width: 60ch; }
.diff-limites ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diff-limites li { padding-left: var(--space-4); border-left: 2px solid var(--ligne-forte, var(--ligne)); }
.diff-limites h4 { margin: 0 0 .3rem; font-size: .98rem; color: var(--nuit); }
.diff-limites p { margin: 0; font-size: .92rem; color: var(--gris-bleu); }

/* ---------------------------------------------------------------------------
   Liste complete des prestations. Beaucoup d'appels commencent par « vous
   faites aussi… ? » : la liste repond avant qu'on ait a decrocher. Volontairement
   dense et sans image, elle se parcourt des yeux en quelques secondes.
--------------------------------------------------------------------------- */
.svc-tout {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, var(--space-6));
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.svc-tout > h3 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.svc-tout-sous { margin: 0 0 var(--space-5); color: var(--gris-bleu); max-width: 52ch; }

.svc-tout-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-5) var(--space-5);
}
.svc-groupe h4 {
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ligne);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--menthe-fonce);
}
.svc-groupe ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.svc-groupe li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--nuit);
}
.svc-groupe svg { width: 15px; height: 15px; flex: none; margin-top: .22rem; color: var(--menthe); }

.svc-tout-fin {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ligne);
  color: var(--gris-bleu);
}
.svc-tout-fin strong { color: var(--nuit); }

/* ---------------------------------------------------------------------------
   Tarifs du depannage. Un tableau plutot que trois cartes : la duree n'est pas
   connue d'avance, des cartes laisseraient croire a des forfaits a choisir.
   La colonne de droite porte le vrai argument, le cout apres credit d'impot.
--------------------------------------------------------------------------- */
.tarif-bloc {
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  overflow: hidden;
}

/* Visible des lecteurs d ecran seulement : le tableau a besoin d un intitule. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tarif-tableau { overflow-x: auto; }
.tarif-tableau table { width: 100%; border-collapse: collapse; min-width: 30rem; }

.tarif-tableau thead th {
  padding: var(--space-4) var(--space-5);
  background: var(--fond);
  border-bottom: 1px solid var(--ligne);
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris-bleu);
}
.tarif-tableau thead th:last-child { color: var(--menthe-fonce); }

.tarif-tableau tbody th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: 700;
  color: var(--nuit);
  border-bottom: 1px solid var(--ligne);
}
.tarif-tableau tbody th span {
  display: block;
  margin-top: .15rem;
  font-weight: 400;
  font-size: .88rem;
  color: var(--gris-bleu);
}
.tarif-tableau tbody td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ligne);
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gris-bleu);
  white-space: nowrap;
}
.tarif-tableau tbody td.tarif-reel { color: var(--menthe-fonce); font-size: 1.5rem; }
.tarif-tableau tbody tr:last-child th,
.tarif-tableau tbody tr:last-child td { border-bottom: none; }

.tarif-phrase {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--menthe-voile);
  border-block: 1px solid #CDE9DF;
  text-align: center;
  font-size: 1.05rem;
  color: var(--nuit);
}

/* Duree reelle des interventions : c est la question que tout le monde se
   pose apres avoir vu un tarif horaire. Elle merite sa place juste sous le
   tableau, pas une ligne perdue dans les notes de bas de section. */
.tarif-duree {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--ligne);
  background: var(--blanc);
  text-align: center;
  font-size: .98rem;
  color: var(--gris-bleu);
}
.tarif-duree strong { display: block; font-size: 1.06rem; color: var(--nuit); margin-bottom: .2rem; }

.tarif-credit { padding: var(--space-5); }
.tarif-credit h3 { margin: 0 0 var(--space-4); font-size: 1.05rem; }

.tarif-etapes { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.tarif-etapes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.tarif-etapes p { margin: 0; font-size: .95rem; }
.tarif-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-family: var(--font-title);
  font-size: .82rem;
  font-weight: 800;
}
.tarif-legal { margin: 0; font-size: .82rem; color: var(--gris-bleu); }

.tarif-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
}
.tarif-action .btn { flex: 1 1 12rem; justify-content: center; }

@media (max-width: 640px) {
  .tarif-tableau thead th,
  .tarif-tableau tbody th,
  .tarif-tableau tbody td { padding: var(--space-3) var(--space-4); }
}

/* ---------------------------------------------------------------------------
   Bandeau de consentement. Ancre en bas, jamais en plein ecran : un bandeau
   qui bloque la page pousse a cliquer « accepter » pour s'en debarrasser, ce
   que la CNIL considere comme un consentement non libre. Les deux boutons ont
   la meme taille et la meme lisibilite, refus et accord au meme niveau.
--------------------------------------------------------------------------- */
.cookie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--blanc);
  border-top: 1px solid var(--ligne);
  box-shadow: 0 -10px 30px rgba(12, 34, 51, .10);
  animation: cookie-monte .28s ease-out both;
}
@keyframes cookie-monte { from { transform: translateY(100%); } to { transform: translateY(0); } }

.cookie-bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
}
.cookie-bar-texte { flex: 1 1 28rem; min-width: 0; }
.cookie-bar-texte h2 {
  margin: 0 0 .3rem;
  font-size: 1.02rem;
  color: var(--nuit);
}
.cookie-bar-texte p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--gris-bleu);
  max-width: 62ch;
}
.cookie-bar-texte a { color: var(--menthe-fonce); }

.cookie-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 0 0 auto;
}
/* Meme largeur minimale pour les deux : aucun des deux choix n'est favorise. */
.cookie-bar-actions .btn { min-width: 9.5rem; justify-content: center; }

@media (max-width: 640px) {
  .cookie-bar-actions { width: 100%; }
  .cookie-bar-actions .btn { flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { animation: none; }
}

/* Pages legales : une colonne de lecture, aucune fioriture. Ces pages sont
   consultees par obligation, pas par plaisir : la clarte prime. */
.legal-page { padding: calc(var(--header-h) + var(--space-7)) 0 var(--space-7); }
.legal-inner { max-width: 46rem; }
.legal-inner h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: var(--space-2); }
.legal-updated { color: var(--gris-bleu); font-size: .92rem; margin-bottom: var(--space-6); }
.legal-inner section { margin-bottom: var(--space-6); }
.legal-inner h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin-bottom: var(--space-3);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--ligne);
}
.legal-inner p { margin-bottom: var(--space-3); }
.legal-list { display: grid; gap: .6rem; padding-left: 1.1rem; list-style: disc; }
.legal-dl { display: grid; gap: 0; }
.legal-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: .75rem 0;
  border-bottom: 1px solid var(--ligne);
}
.legal-dl dt { font-weight: 700; color: var(--nuit); }
.legal-note { margin-top: var(--space-3); font-size: .9rem; color: var(--gris-bleu); }
.legal-inner h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.02rem;
  color: var(--nuit);
}
.legal-tableau { overflow-x: auto; margin: var(--space-4) 0; }
.legal-tableau table { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .93rem; }
.legal-tableau th {
  text-align: left;
  padding: .6rem .9rem .6rem 0;
  border-bottom: 2px solid var(--nuit);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris-bleu);
}
.legal-tableau td { padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.legal-tableau td:first-child { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--nuit); }
.legal-dl dd { margin: 0; color: var(--gris-bleu); }

@media (max-width: 640px) {
  .legal-dl > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* Honoraires Google Ads : les trois cartes s'additionnent, elles ne se
   choisissent pas. Un « + » dans l'espace entre les cartes le dit sans
   ajouter de balise, et le total est annonce sous la grille plutot que
   decouvert au telephone. */
.pricing-sum .price-card + .price-card::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: calc(var(--space-5) / -2);
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gris-bleu);
  opacity: .55;
  pointer-events: none;
}
.price-card-tiers { border-style: dashed; background: var(--fond); }
.pricing-total {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--menthe-voile);
  color: var(--nuit);
  text-align: center;
  font-size: 1.02rem;
}
.pricing-total span { color: var(--gris-bleu); }
.logo-footer:hover { color: #fff; }
.logo-footer .logo-mark { background: rgba(255, 255, 255, .1); }
.logo-footer .logo-dept { background: rgba(255, 255, 255, .13); color: var(--menthe); }

.footer-tagline { max-width: 34rem; margin-bottom: var(--space-4); }
.footer-phone {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}

.site-footer address { font-style: normal; line-height: 1.85; }

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: .32rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.footer-hours li:last-child { border-bottom: 0; }

.footer-links li { padding: .22rem 0; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .11);
  font-size: .87rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* ----------------------------- 12. Responsive ---------------------------- */
@media (max-width: 1100px) {
  .act-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .act-card { flex-direction: row; }
  .act-media { flex: 0 0 42%; }
  .act-media img { height: 100%; aspect-ratio: auto; }
  .act-icon { margin-top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* L'en-tete bascule sur le menu burger plus tot que le reste de la mise en
   page : avec « Depannage informatique », logo, menu et telephone se cassent
   en deux lignes des 1080 px. Les grilles de sections, elles, tiennent
   jusqu'a 900 px et gardent leur propre point de rupture. */
@media (max-width: 1080px) {
  .nav-toggle { display: grid; place-items: center; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--blanc);
    border-bottom: 1px solid var(--ligne);
    box-shadow: var(--shadow-md);
    display: none;
    /* Sous-menus dépliés, le tiroir peut dépasser l'écran. Comme il est ancré
       au header collant, le bas deviendrait inatteignable : on le fait défiler. */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .primary-nav.is-open { display: flex; }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links > li { display: block; border-bottom: 1px solid var(--ligne-douce); }
  /* Dans le tiroir, ces entrees menent chacune a une page. Sans repere, elles
     passent pour de simples intitules de rubrique, d'autant que les sous-entrees
     dessous ont un fond gris qui les fait paraitre seules cliquables. Une fleche
     vers la droite et un intitule en bleu nuit retablissent l'affordance. */
  /* Le lien principal devient un bloc colore : dans le tiroir, les sous-entrees
     avaient un fond gris qui les faisait passer pour les seuls elements
     cliquables, et le titre au-dessus pour un intitule de rubrique. */
  .nav-links > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
    padding: .85rem 1rem;
    border-radius: var(--radius);
    background: var(--menthe-voile);
    color: var(--nuit);
    font-size: 1.02rem;
    font-weight: 700;
  }
  .nav-links > li > a::after { display: none; }
  .nav-links > li > a:active { background: var(--menthe); color: #fff; }
  .nav-links > li > a:active .chev { color: #fff; }
  .btn-phone { justify-content: center; padding: .8rem 1rem; }

  /* Sans souris, pas de survol : le sous-menu reste deplie dans le tiroir.
     Le chevron ne sert donc plus a annoncer un depliage, il devient la fleche
     qui indique « cette ligne ouvre une page ». */
  .chev {
    display: block;
    width: 17px;
    height: 17px;
    margin-left: auto;
    flex: none;
    color: var(--menthe-fonce);
    transform: rotate(-90deg);
  }
  .has-menu:hover .chev,
  .has-menu:focus-within .chev { transform: rotate(-90deg); }

  /* Les entrees sans sous-menu (Contact) recoivent la meme fleche. */
  .nav-links > li:not(.has-menu) > a::before {
    content: "";
    order: 2;
    width: 17px;
    height: 17px;
    margin-left: auto;
    flex: none;
    background: currentColor;
    opacity: .55;
    -webkit-mask: no-repeat center / 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    mask: no-repeat center / 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  }
  .submenu {
    position: static;
    min-width: 0;
    padding: 0 0 .6rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  /* Indispensable : hors media query, .has-menu:hover .submenu (0,3,0)
     applique translate(-50%, 0) et l'emporte sur .submenu (0,1,0) ci-dessus.
     Sans cette annulation, survoler une entrée du tiroir décale le panneau
     hors de l'écran et le tiroir paraît vide. */
  .has-menu:hover .submenu,
  .has-menu:focus-within .submenu { transform: none; }

  .submenu::before { display: none; }
  /* Les sous-entrees passent en retrait, sans fond : elles sont clairement
     subordonnees au bloc colore qui les surmonte. */
  .submenu {
    margin: 0 0 .35rem .5rem;
    padding-left: .85rem;
    border-left: 2px solid var(--ligne);
  }
  .submenu a { padding: .5rem .4rem; background: transparent; }
  .submenu a:active { background: var(--menthe-voile); }
  .submenu ul { gap: 2px; }
}

@media (max-width: 900px) {

  .services-inner,
  .zone-inner,
  .contact-inner { grid-template-columns: 1fr; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .pricing-sum .price-card + .price-card::before {
    top: calc(var(--space-5) / -2);
    left: 50%;
  }
  .price-card-featured { order: -1; }

  .section-head-row { align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }

  .container { padding-inline: var(--space-4); }
  body { font-size: 1rem; }
  .logo-text strong { font-size: .94rem; }

  .hero { padding-block: clamp(3rem, 9vw, 4.5rem); }
  .hero .btn { width: 100%; }
  /* Deux colonnes plutôt qu'une : en pile, huit repères coûtaient 300 px du
     premier écran et repoussaient tout le reste hors de vue. */
  .trust-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .9rem;
    text-align: left;
  }
  .trust-strip li { align-items: flex-start; font-size: .84rem; line-height: 1.35; }
  .trust-strip svg { margin-top: .18rem; }

  .act-card { flex-direction: column; }
  .act-media { flex: none; }
  .act-media img { aspect-ratio: 16 / 10; }
  .act-icon { margin-top: -2.6rem; }

  .carousel { margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
  .svc-card { flex: 0 0 76%; }
  .review-card { flex: 0 0 84%; }
  .carousel-nav { justify-content: flex-start; }

  .contact-form { padding: var(--space-5); }
  .contact-phone { font-size: 1.2rem; width: 100%; justify-content: center; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .card-link { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Image externe indisponible : dégradé de repli, la mise en page reste intacte */
.img-fallback {
  background: linear-gradient(135deg, var(--menthe-voile) 0%, #CFE9E0 100%);
}
.img-fallback > img { visibility: hidden; }


/* ==========================================================================
   13. Page « Création de site web » (site-web.html)
   Ne sert que sur cette page. Réutilise la charte et les composants ci-dessus.
   ========================================================================== */

/* Titre plus long que celui de l'accueil : il lui faut plus de largeur */
.hero-wide h1 { max-width: 30ch; }

/* Seconde voie du hero, pour qui veut d'abord le prix : visible, mais sous
   l'action principale, bouton fantôme, sans remplissage. */
.hero-alt-btn { border-width: 1px; }

/* --- Bandeau « analyse offerte », juste sous le hero --- */
.offerband {
  padding-block: clamp(2.75rem, 5vw, 4rem);
  background: var(--menthe-voile);
  border-bottom: 1px solid #CDE9DF;
}

/* Le chiffre qui donne du poids au bandeau : sans lui, ce n'est qu'un
   titre et un formulaire, et l'œil passe à côté. */
.offerband-proof {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid #CDE9DF;
}
.offerband-num {
  flex: none;
  font-family: var(--font-title);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--menthe-fonce);
  font-variant-numeric: tabular-nums;
}
.offerband-proof-text { font-size: .95rem; line-height: 1.45; }
.offerband-proof-text strong { display: block; color: var(--nuit); }
.offerband-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.offerband h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
}
.offerband-text > p:last-child { margin-bottom: 0; font-size: .98rem; }

/* Pastille sur fond menthe : il lui faut un fond opposé pour rester lisible */
.section-tag-solid { background: var(--blanc); color: var(--menthe-fonce); }

/* Reprise du métier et de la ville sur la page d'analyse */
.lp-form-step {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: -.75rem 0 var(--space-5);
  padding: .6rem .8rem;
  border: 1px solid #BFE7D8;
  border-radius: var(--radius-sm);
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-size: .87rem;
  font-weight: 600;
}
.lp-form-step svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; }

/* Deux boutons côte à côte sous un hero centré */
.hero-actions-center { justify-content: center; align-items: center; margin-bottom: 0; }

/* Note Google sous les CTA du hero. Discrete a dessein : la preuve sociale
   rassure celui qui hesite deja, elle ne doit pas concurrencer l'action. */
.hero-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem .6rem;
  margin: var(--space-4) 0 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .88);
}
.hero-rating strong {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--blanc);
}
.hero-rating .stars svg { width: 16px; height: 16px; }

/* La note renvoie a la fiche Google : c'est ce qui la rend verifiable.
   Sans le lien, ce n'est qu'un chiffre que le visiteur doit croire. */
.hero-rating-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  padding: .3rem .7rem;
  transition: background-color .18s ease;
}
.hero-rating-link:hover,
.hero-rating-link:focus-visible { background: rgba(255, 255, 255, .12); color: inherit; }
.hero-rating-out { width: 14px; height: 14px; opacity: .7; flex: none; }

.rating-link { color: inherit; text-decoration: none; }
.rating-link:hover { color: var(--menthe-fonce); }

/* Sans photo d'auteur, la ligne de signature reprend toute la largeur. */
.review-author img { display: none; }

/* Renversement du risque, à côté de l'action principale. Volontairement en
   pastille et non en gros badge : un engagement précis convainc par sa
   précision, pas par sa taille. */
.guarantee {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: var(--space-4) 0 0;
  padding: .55rem .95rem .55rem .6rem;
  border: 1px solid rgba(23, 177, 131, .45);
  border-radius: 999px;
  background: rgba(23, 177, 131, .12);
  text-align: left;
}
.guarantee-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--menthe);
  color: #04211A;
}
.guarantee-ico svg { width: 17px; height: 17px; }
.guarantee-text {
  font-size: .87rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  max-width: 22ch;
}
.guarantee-text strong { display: block; color: #fff; font-weight: 700; }

/* --- Test « êtes-vous sur Google ? » dans le hero --- */
.selftest {
  width: 100%;
  max-width: 34rem;
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  text-align: left;
}
.selftest-label {
  margin: 0 0 .7rem;
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.selftest-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.selftest-row input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-family: var(--font-body);
  font-size: .96rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.selftest-row input::placeholder { color: rgba(255, 255, 255, .5); }
.selftest-row input:focus {
  outline: none;
  border-color: var(--menthe);
  background: rgba(255, 255, 255, .16);
}

.selftest-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--menthe);
  color: #04211A;
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.selftest-go svg { width: 15px; height: 15px; }
.selftest-go:hover { background: var(--menthe-fonce); color: #fff; transform: translateY(-1px); }

.selftest-hint {
  margin: .7rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
}

/* Variante claire du formulaire, pour le bandeau sur fond menthe */
.selftest-light {
  max-width: none;
  margin: 0;
  border-color: var(--ligne);
  background: var(--blanc);
  box-shadow: var(--shadow);
}
.selftest-light .selftest-label { color: var(--nuit); }
.selftest-light .selftest-row input {
  border-color: var(--ligne);
  background: #FCFEFD;
  color: var(--nuit);
}
.selftest-light .selftest-row input::placeholder { color: #9FB0BC; }
.selftest-light .selftest-row input:focus { border-color: var(--menthe); background: #fff; }
.selftest-light .selftest-hint { color: var(--gris-bleu); }

@media (max-width: 900px) {
  .offerband-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .selftest-row input { flex: 1 1 100%; }
  .selftest-go { width: 100%; justify-content: center; }
}

/* --- Le constat --- */
.problem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fond);
}
/* Photo de fond en texture. Le voile est plus dense en haut, là où se trouve
   le titre : le texte ne repose jamais directement sur l'image. */
.problem-bg { position: absolute; inset: 0; z-index: -2; }
.problem-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.problem::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(247, 250, 249, .96) 0%,
    rgba(247, 250, 249, .90) 32%,
    rgba(247, 250, 249, .62) 100%
  );
}

.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.prob-card {
  padding: var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}

/* --- Ce que vous obtenez : blocs image / texte alternés --- */
.included { background: var(--blanc); }

.alt-list { display: grid; gap: clamp(2.75rem, 6vw, 5rem); }

.alt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}
/* Une ligne sur deux, l'image bascule à gauche */
.alt-row:nth-child(even) .alt-media { order: -1; }

.alt-media {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--menthe-voile);
  box-shadow: var(--shadow-md);
}
.alt-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.alt-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.alt-body h3 { margin-bottom: var(--space-3); font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.alt-body > p { margin-bottom: var(--space-4); font-size: 1.02rem; }

.alt-points { display: grid; gap: .55rem; }
.alt-points li { display: flex; align-items: flex-start; gap: .65rem; font-size: .95rem; }
.alt-points svg { width: 17px; height: 17px; flex: none; margin-top: .3rem; color: var(--menthe-fonce); }
.prob-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 13px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
}
.prob-ico svg { width: 22px; height: 22px; }
.prob-card h3 { margin-bottom: .4rem; }
.prob-card p { margin: 0; font-size: .96rem; }

/* --- Délai affiché dans les cartes de tarif --- */
.price-delay {
  margin: 0 0 var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ligne-douce);
  font-size: .87rem;
  font-weight: 700;
  color: var(--menthe-fonce);
}

/* --- Fiche Google --- */
.gbp { background: var(--blanc); }

.gbp-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.gbp-side { display: grid; gap: var(--space-4); }
.gbp-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--menthe-voile);
  box-shadow: var(--shadow);
}
.gbp-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gbp-intro h2 { margin-bottom: var(--space-4); }
.gbp-intro > p { max-width: 46ch; }

.gbp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .7rem;
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ligne);
}
.gbp-price strong {
  font-family: var(--font-title);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--nuit);
}
.gbp-price span { font-size: .93rem; }

.gbp-list {
  display: grid;
  gap: .9rem;
  padding: var(--space-6);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--fond);
}
.gbp-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .96rem; }
.gbp-list svg { width: 18px; height: 18px; flex: none; margin-top: .3rem; color: var(--menthe-fonce); }
.gbp-list strong { color: var(--nuit); }

/* --- Notre méthode --- */
/* Le :not() laisse passer la variante sombre, declaree plus haut : sans lui,
   cette regle l ecraserait par simple ordre d apparition. */
.method:not(.method-sombre) { background: var(--fond); }

.method-list {
  display: grid;
  gap: var(--space-4);
  max-width: 840px;
  margin-inline: auto;
}
.method-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.method-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--nuit);
  color: var(--menthe);
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 800;
}
.method-list h3 { margin-bottom: .35rem; }
.method-list p { margin-bottom: .6rem; font-size: .97rem; }
.method-when {
  display: inline-block;
  padding: .22rem .7rem;
  border-radius: 999px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
  font-size: .81rem;
  font-weight: 700;
}

/* --- Démonstrations ---
   Section retirée de site-web.html : montrer des maquettes de métiers fictifs
   revenait à signaler le gabarit, et l'étiquette « démonstration » annonçait
   l'absence de clients. Styles conservés pour le jour où de vraies
   réalisations seront disponibles, le balisage est à réécrire. */
.demos { background: var(--blanc); }

.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.demo-card {
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  overflow: hidden;
}
.demo-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--nuit) 0%, var(--nuit-clair) 100%);
}
.demo-frame img { width: 100%; height: 100%; object-fit: cover; }
.demo-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline: 11px;
  background: rgba(255, 255, 255, .07);
}
.demo-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.demo-tag {
  padding: .35rem .85rem;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
}
.demo-body { padding: var(--space-5); }
.demo-body h3 { margin-bottom: .35rem; font-size: 1.1rem; }
.demo-body p { margin: 0; font-size: .93rem; }

/* --- Questions fréquentes ---
   Fond blanc depuis le retrait des démonstrations : la méthode qui précède
   est déjà en gris, deux sections grises collées effaceraient la césure. */
.faq { background: var(--blanc); }

.faq-inner {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.faq-head {
  max-width: none;
  margin: 0;
  text-align: left;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.faq-list { display: grid; gap: .7rem; }
.faq-list details {
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--blanc);
  overflow: hidden;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--nuit);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { content: ""; }
.faq-list summary:hover { background: var(--menthe-voile); }
.faq-list summary svg {
  width: 20px; height: 20px;
  flex: none;
  color: var(--menthe-fonce);
  transition: transform .2s ease;
}
.faq-list details[open] summary { border-bottom: 1px solid var(--ligne-douce); }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list details p {
  margin: 0;
  padding: 1rem 1.25rem 1.25rem;
  font-size: .98rem;
}

/* --- Responsive de la page --- */
@media (max-width: 1100px) {
  .prob-grid,
  .demo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   14. Page « Campagnes Google Ads » (google-ads.html)
   ========================================================================== */

.principe { background: var(--fond); }
.prestation { background: var(--blanc); }

/* --- Le cas concret ---
   Seule section de la page qui porte des chiffres réels : fond sombre pour
   la détacher, et c'est le seul endroit où de gros nombres se justifient. */
.proof {
  background:
    radial-gradient(680px 320px at 15% 10%, rgba(23, 177, 131, .18), transparent 62%),
    linear-gradient(150deg, var(--nuit) 0%, var(--nuit-clair) 100%);
  color: rgba(255, 255, 255, .82);
}
.proof h2 { color: #fff; }
.proof .section-sub { color: rgba(255, 255, 255, .74); }

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto var(--space-6);
}
.proof-stats li {
  display: grid;
  gap: .25rem;
  padding: var(--space-5) var(--space-4);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
  text-align: center;
}
.proof-stats strong {
  font-family: var(--font-title);
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--menthe);
  font-variant-numeric: tabular-nums;
}
.proof-stats span { font-size: .9rem; color: rgba(255, 255, 255, .74); }

.proof-text { max-width: 660px; margin-inline: auto; text-align: center; }
.proof-text p { font-size: 1.02rem; }
.proof-text strong { color: #fff; }
.proof-note {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .87rem !important;
  color: rgba(255, 255, 255, .58);
}

@media (max-width: 720px) {
  .proof-stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .proof-stats li { display: flex; align-items: baseline; justify-content: center; gap: .6rem; text-align: left; }
}

/* Honoraires et budget publicitaire : deux dépenses distinctes, montrées
   comme deux objets distincts. C'est le malentendu n°1 du métier. */
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.split-card {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.split-card-mine { border: 2px solid var(--menthe); }

.split-num {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--nuit);
  color: var(--menthe);
  font-family: var(--font-title);
  font-size: .95rem;
  font-weight: 800;
}
.split-card h3 { margin-bottom: .3rem; }
.split-lead {
  margin-bottom: var(--space-4);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--menthe-fonce);
}
.split-card p { font-size: .97rem; }
.split-note {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ligne-douce);
  font-size: .9rem;
  font-weight: 700;
  color: var(--nuit);
}

.principe-warn {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 780px;
  margin: var(--space-6) auto 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--avert-ligne);
  border-radius: var(--radius);
  background: var(--avert-voile);
  color: var(--avert);
  font-size: .95rem;
}
.principe-warn svg { width: 19px; height: 19px; flex: none; margin-top: .15rem; }

@media (max-width: 900px) {
  .split-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   15. Page d'atterrissage « Analyse gratuite » (analyse-gratuite.html)
   ========================================================================== */

/* Rouge et ambre sémantiques : ils signalent un état, ils ne font pas
   partie de la charte. Ils ne doivent jamais servir de couleur d'accent. */
:root {
  --alerte:       #C62A1F;
  --alerte-voile: #FDECEA;
  --alerte-ligne: #F6C9C4;
  --avert:        #8A6100;
  --avert-voile:  #FFF7E6;
  --avert-ligne:  #F5DFA8;
}

/* Retour vers la page site web : une seule sortie en haut, assumée.
   Les autres liens restent dans le pied de page, après l'argumentaire. */
.lp-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: var(--space-4);
  padding: .45rem .8rem;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  color: var(--gris-bleu);
  font-size: .87rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.lp-back svg { width: 15px; height: 15px; }
.lp-back:hover { border-color: var(--menthe); background: var(--menthe-voile); color: var(--nuit); }
.lp-back-short { display: none; }
.lp-header .btn-phone { margin-left: auto; }

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

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Hero avec formulaire --- */
.lp-hero { padding-block: clamp(3rem, 7vw, 5rem); }

.lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  text-align: left;
}
.lp-hero-text h1 { max-width: 14ch; }
.lp-hero-text .hero-sub { margin-bottom: 0; }

.lp-trust {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .55rem;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

/* Aperçu chiffré dans le hero : l'argument de la page, visible sans défiler */
.lp-preview {
  max-width: 26rem;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .06);
}
.lp-preview-label {
  margin: 0 0 .35rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.lp-preview-num {
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--menthe);
  font-variant-numeric: tabular-nums;
}
.lp-preview-unit { margin: .3rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .8); }
.lp-preview-punch {
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
}

.lp-form h2 {
  margin-bottom: var(--space-5);
  font-size: 1.35rem;
}
.field-opt { font-weight: 400; font-size: .82rem; color: var(--gris-bleu); }
/* Aide sous un champ : l utilisateur qui hesite doit lire qu il a le droit
   de ne pas savoir. C est ce qui evite l abandon du formulaire. */
.field-aide { margin: .4rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--gris-bleu); }

/* --- Exemple de tableau --- */
.sample { background: var(--fond); }

/* Forme concrète du livrable : quatre repères, pas une promesse vague */
.specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 920px;
  margin: 0 auto var(--space-5);
}
.specs li {
  display: grid;
  gap: .1rem;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--blanc);
  text-align: center;
}
.specs strong {
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--nuit);
  font-variant-numeric: tabular-nums;
}
.specs span { font-size: .85rem; color: var(--gris-bleu); }

.sample-card {
  max-width: 920px;
  margin-inline: auto;
  padding: var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
  box-shadow: var(--shadow-sm);
}

.sample-flag {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 var(--space-4);
  padding: .65rem .9rem;
  border: 1px solid var(--avert-ligne);
  border-radius: var(--radius-sm);
  background: var(--avert-voile);
  color: var(--avert);
  font-size: .87rem;
  font-weight: 600;
}
.sample-flag svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; }

.kw-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.kw-table th {
  padding: .75rem 1rem;
  border-bottom: 2px solid var(--ligne);
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--gris-bleu);
}
.kw-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ligne-douce);
  color: var(--nuit);
}
.kw-table td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gris-bleu);
}
.kw-table tbody tr:last-child td { border-bottom: 0; }

.tag-absent {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--alerte-voile);
  color: var(--alerte);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.sample-note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ligne-douce);
  font-size: .87rem;
}

/* --- L'écart et le calcul --- */
.gapsec { background: var(--blanc); }

.gap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--space-5);
  align-items: start;
}

.gap-card, .calc-card {
  /* min-width: 0, sans lui, un enfant de grille refuse de rétrécir sous la
     largeur de son contenu, et le tableau fait déborder la carte. */
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--blanc);
}
.gap-card h3, .calc-card h3 { margin-bottom: var(--space-4); }
.gap-card p { font-size: .97rem; }
.gap-card p:last-child { margin-bottom: 0; }

.gap-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); }
.gap-table th, .gap-table td { padding: .7rem .9rem; text-align: left; }
.gap-table thead th {
  border-bottom: 2px solid var(--ligne);
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris-bleu);
  white-space: nowrap;
}
.gap-table tbody th {
  font-weight: 600;
  color: var(--gris-bleu);
  font-size: .9rem;
  white-space: nowrap;
}
.gap-table tbody td { color: var(--gris-bleu); font-size: .9rem; white-space: nowrap; }
.gap-table tbody strong {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--nuit);
  margin-right: .15rem;
}
.gap-table .gap-zero { font-size: 1.65rem; color: var(--alerte); }

.gap-check {
  font-size: .89rem !important;
  color: var(--gris-bleu);
  border-top: 1px solid var(--ligne-douce);
  padding-top: var(--space-3);
}

.calc-card {
  background: var(--nuit);
  border-color: var(--nuit);
  color: rgba(255, 255, 255, .82);
}
.calc-card h3 { color: #fff; }
.calc-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 13px;
  background: rgba(255, 255, 255, .1);
  color: var(--menthe);
}
.calc-ico svg { width: 23px; height: 23px; }
.calc-honest {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .87rem;
  color: rgba(255, 255, 255, .6);
}

/* --- Pourquoi c'est gratuit --- */
.why { background: var(--blanc); }

.why-inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.why-intro h2 { margin-bottom: var(--space-4); }
.why-intro > p { margin-bottom: 0; font-size: 1.02rem; }

.why-list { display: grid; gap: var(--space-3); }
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: var(--space-4);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-lg);
  background: var(--fond);
}
.why-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--menthe-voile);
  color: var(--menthe-fonce);
}
.why-ico svg { width: 20px; height: 20px; }
.why-list strong {
  display: block;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--nuit);
  margin-bottom: .2rem;
}
.why-list span { font-size: .93rem; }

/* --- Ce que ça ne fait pas --- */
.limits { background: var(--fond); }

.limits-inner {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.limits-intro h2 { margin-bottom: var(--space-4); }
.limits-intro > p { margin-bottom: 0; max-width: 34ch; }

.limits-list { display: grid; gap: .8rem; }
.limits-list li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: var(--space-4);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--blanc);
  font-size: .96rem;
}
.limits-list svg { width: 18px; height: 18px; flex: none; margin-top: .25rem; color: var(--alerte); }
.limits-list strong { color: var(--nuit); }

/* --- Rappel final --- */
.lp-cta {
  background: linear-gradient(150deg, var(--nuit) 0%, var(--nuit-clair) 100%);
  color: rgba(255, 255, 255, .84);
}
.lp-cta h2 { color: #fff; }
.lp-cta-inner { max-width: 640px; margin-inline: auto; text-align: center; }
.lp-cta-inner > p { font-size: 1.05rem; margin-bottom: 0; }
.lp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-5);
}
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

/* --- Pied de page réduit --- */
.lp-footer { padding-top: var(--space-6); }
.lp-footer-inner {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  padding-bottom: var(--space-5);
  text-align: center;
}
.lp-footer-brand { margin: 0; max-width: 46rem; }
.lp-footer-brand strong { color: #fff; }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; }
.lp-footer-legal { margin: 0; font-size: .85rem; }

/* --- Responsive de la page d'atterrissage --- */
@media (max-width: 900px) {
  /* minmax(0, 1fr) et non 1fr : sinon le tableau à cellules insécables
     élargit la colonne au-delà de l'écran (min-width auto par défaut). */
  .lp-hero-grid,
  .gap-grid,
  .limits-inner,
  .why-inner { grid-template-columns: minmax(0, 1fr); }
  .lp-hero-text h1 { max-width: none; }
  .lp-preview { max-width: none; }
  .lp-trust { flex-direction: row; flex-wrap: wrap; gap: .5rem var(--space-5); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .sample-card { padding: var(--space-4); }
  .kw-table { font-size: .88rem; }
  .kw-table th, .kw-table td { padding: .65rem .75rem; }
  .gap-card, .calc-card { padding: var(--space-5) var(--space-4); }
  .gap-table th, .gap-table td { padding: .6rem .7rem; }
  .lp-trust { flex-direction: column; }
  .lp-cta-actions .btn { width: 100%; }
}

/* En-tête de la page d'atterrissage : logo et téléphone se disputent la
   largeur sur les petits écrans, on retire la mention au-dessus du numéro. */
@media (max-width: 720px) {
  .lp-back-long { display: none; }
  .lp-back-short { display: inline; }
  .lp-back { margin-left: var(--space-3); padding: .45rem .7rem; }
}

@media (max-width: 460px) {
  .lp-header .btn-phone-label { display: none; }
  .lp-header .btn-phone { padding: .6rem .8rem; }
  .lp-header .logo-text strong { font-size: .88rem; }
  .lp-header .logo-dept { display: none; }
  .lp-back-short { display: none; }
  .lp-back { padding: .45rem .55rem; }
}

@media (max-width: 900px) {
  .gbp-inner,
  .faq-inner { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .method-list > li { flex-direction: column; gap: var(--space-3); }

  /* En colonne unique, l'image passe toujours au-dessus du texte */
  .alt-row { grid-template-columns: 1fr; gap: var(--space-5); }
  .alt-row .alt-media,
  .alt-row:nth-child(even) .alt-media { order: -1; }
}

@media (max-width: 640px) {
  .prob-grid,
  .demo-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .gbp-list { padding: var(--space-5); }
  .faq-list summary { font-size: .96rem; padding: .9rem 1rem; }
  .faq-list details p { padding: .85rem 1rem 1.1rem; }
}

/* ==========================================================================
   16. Utilitaires de fin, déclarés en dernier pour l'emporter sur les
   fonds de section définis plus haut.
   ========================================================================== */

/* Inverse le fond d'une section. Nécessaire quand une même section sert sur
   deux pages dont l'alternance des fonds ne tombe pas au même endroit. */
.section-alt { background: var(--fond); }
.section-alt-blanc { background: var(--blanc); }

/* ==========================================================================
   17. Bande de réassurance défilante (index.html)
   ========================================================================== */

.marquee {
  overflow: hidden;
  padding-block: 1rem;
  background: var(--menthe-voile);
  border-bottom: 1px solid #CDE9DF;
}

/* Variante claire, pour les pages ou le bandeau est suivi d'une section au
   meme fond menthe : sans elle, les deux blocs se fondent en une seule masse
   et la ligne de mentions n'a plus de limite visible. */
.marquee-clair {
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
}

/* Deux listes identiques bout à bout : décaler de 50 % ramène exactement
   au début de la seconde, d'où une boucle sans raccord visible. */
.marquee-track {
  display: flex;
  width: max-content;
  animation: defile 38s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.marquee-list li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 600;
  color: var(--nuit);
}
.marquee-list svg { width: 17px; height: 17px; flex: none; color: var(--menthe-fonce); }

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

/* Le bloc global de réduction des animations impose animation-duration: .001ms,
   ce qui ferait sauter le bandeau à sa position finale. On coupe l'animation
   pour de bon et on repasse les mentions en liste statique qui se replie. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-list[aria-hidden="true"] { display: none; }
  .marquee-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .55rem;
    padding-right: 0;
  }
}