@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   EasyWWW — direction « R-B ».

   Le pari : le jaune reste un CHAMP, pas un filet d'accent. Le sérieux ne
   vient pas d'une désaturation (ce serait tiède et interchangeable) mais de
   la grille, des filets d'un pixel, de la densité et d'une typographie
   grotesque étroite. Aucun accessoire figuratif : ni auvent, ni étiquette
   pendue, ni ticket de caisse.

   Élément signature : le « pupitre », une console unique qui chevauche le bas
   du champ jaune et porte les deux axes réels de la démonstration —
   quelle surface (fiche Google / site web), pour quel métier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Jetons ─────────────────────────────────────────────────────────────── */
:root {
  /* Les deux jaunes de la marque, plus un jaune d'ombre pour le dégradé. */
  --miel:        #ffc02e;
  --miel-clair:  #ffd76b;
  --miel-ombre:  #f5ac13;
  /* Prune : structure, boutons, section profonde. */
  --prune:       #5e1f3d;
  --prune-fonce: #46142c;
  /* Encre : tout le texte. */
  --encre:       #23150f;
  --encre-doux:  #6a564a;
  /* Surfaces. */
  --papier:      #fdf7ea;   /* jaune dilué, pas un crème neutre */
  --craie:       #ffffff;
  --vert:        #0e7c5a;

  --trait:       rgba(35, 21, 15, .13);
  --trait-fort:  rgba(35, 21, 15, .26);
  --trait-clair: rgba(255, 246, 232, .17);

  --display: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --texte:   'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --large: 76rem;
  --marge: clamp(1.15rem, 4vw, 2.25rem);
  --r-carte: 16px;
  --r-bouton: 10px;
}

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

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

body {
  margin: 0;
  background: var(--craie);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* filet de sécurité, jamais une excuse */
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3, .prix__nb, .prix__devis, .etape__num, .marque__pastille {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.032em;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.85rem);
  line-height: 1.03;
  text-wrap: pretty;
}
/* Un seul soulignement. En `text-decoration`, il suit exactement les
   fragments de ligne — un ::after en position absolue déborderait sous le
   texte replié. */
h1 em {
  font-style: normal;
  color: var(--prune);
  white-space: nowrap;         /* la phrase soulignée ne se coupe jamais */
  text-decoration: underline;
  text-decoration-color: rgba(94, 31, 61, .34);
  text-decoration-thickness: 3px;
  text-underline-offset: .13em;
  text-decoration-skip-ink: none;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.08;
}
h3 {
  font-family: var(--texte);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.sur-titre {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(35, 21, 15, .62);
  margin-bottom: 1.1rem;
}
.sur-titre--sombre { color: var(--encre-doux); }
.sur-titre--clair  { color: rgba(255, 232, 190, .72); }

.chapo {
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  line-height: 1.58;
  color: rgba(35, 21, 15, .78);
  max-width: 34em;
}
.chapo--sombre { color: var(--encre-doux); }
.chapo--clair  { color: rgba(255, 244, 232, .8); }

.evitement {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
a.evitement:focus {
  position: fixed; top: .6rem; left: .6rem; z-index: 999;
  width: auto; height: auto; margin: 0; padding: .7rem 1rem;
  clip: auto; clip-path: none;
  background: var(--prune); color: #fff; border-radius: 8px;
}

:focus-visible {
  outline: 2.5px solid var(--prune);
  outline-offset: 2px;
  border-radius: 4px;
}
.bloc--prune :focus-visible,
.bloc--encre :focus-visible,
.heros :focus-visible { outline-color: var(--prune); }
.bloc--prune :focus-visible, .bloc--encre :focus-visible { outline-color: var(--miel); }

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.enveloppe--etroite { max-width: 48rem; }

/* L'en-tête est collant : les ancres ne doivent pas passer dessous. */
[id] { scroll-margin-top: 5.5rem; }

/* Une seule règle pose le rythme vertical ; les modificateurs ne portent
   que des couleurs. Aucune bataille de spécificité possible. */
.bloc { padding-block: clamp(3.4rem, 6.5vw, 6rem); }
.bloc--papier { background: var(--papier); }
.bloc--prune  { background: var(--prune); color: #fdf1e4; }
.bloc--encre  { background: var(--encre); color: #f8efe4; position: relative; overflow: hidden; }

.tete { max-width: 42rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.tete .chapo { margin-top: 1.1rem; }
/* Entête dense : titre à gauche, chapô à droite, alignés sur la même base. */
.tete--large { max-width: none; }
@media (min-width: 62rem) {
  .tete--large {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: end;
  }
  .tete--large .sur-titre { grid-column: 1 / -1; }
  .tete--large .chapo { margin-top: 0; padding-bottom: .4rem; }
}

.picto {
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  background: var(--miel-clair); color: var(--prune);
  border-radius: .62rem;
  margin-bottom: 1rem;
}
.picto svg { width: 1.32rem; height: 1.32rem; }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--texte); font-weight: 600; font-size: .96rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  padding: .8rem 1.3rem;
  border: 1.5px solid transparent; border-radius: var(--r-bouton);
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .14s ease;
}
.bouton--grand { padding: 1.02rem 1.7rem; font-size: 1.03rem; }
.bouton--petit { padding: .58rem 1.02rem; font-size: .89rem; }
.bouton--bloc  { width: 100%; }
.bouton:hover  { transform: translateY(-1px); }

.bouton--prune { background: var(--prune); color: #fff; }
.bouton--prune:hover { background: var(--prune-fonce); }

.bouton--jaune { background: var(--miel); color: var(--encre); }
.bouton--jaune:hover { background: var(--miel-clair); }

.bouton--contour { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.bouton--contour:hover { border-color: var(--encre); background: rgba(35, 21, 15, .045); }

/* ── En-tête ────────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__barre {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 4.35rem;
}
.marque { text-decoration: none; flex: none; }
.marque__pastille {
  display: inline-block;
  background: linear-gradient(135deg, var(--miel-clair), var(--miel));
  color: var(--encre);
  font-size: 1.12rem; line-height: 1;
  padding: .5rem .72rem .55rem;
  border-radius: .7rem;
}
.marque__www { color: var(--prune); }

.entete__nav {
  margin-left: auto;
  display: flex; gap: 1.55rem;
  font-size: .93rem; font-weight: 500;
}
.entete__nav a {
  text-decoration: none; color: var(--encre-doux);
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.entete__nav a:hover { color: var(--encre); border-bottom-color: var(--miel); }

@media (max-width: 62rem) {
  .entete__nav { display: none; }
  .entete__barre .bouton { margin-left: auto; }
}

/* ── Héros : le champ jaune ─────────────────────────────────────────────── */
.heros {
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 58%),
    linear-gradient(163deg, var(--miel-clair) 0%, var(--miel) 55%, var(--miel-ombre) 100%);
  padding-top: clamp(2.6rem, 5.5vw, 4.6rem);
  padding-bottom: clamp(4.6rem, 8vw, 7rem);
}
.heros__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.heros__texte .sur-titre { color: rgba(35, 21, 15, .58); }
.heros h1 { margin-bottom: 1.3rem; }
.heros .chapo { max-width: 31em; }
.heros__actions {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: 1.9rem;
}

/* Les trois faits : un bandeau réglé, pas des pastilles flottantes. */
.preuves {
  margin-top: 2.3rem;
  border-top: 1px solid rgba(35, 21, 15, .22);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.preuves li {
  padding: 1.05rem 1.1rem 0 1.1rem;
  border-left: 1px solid rgba(35, 21, 15, .16);
}
.preuves li:first-child { border-left: 0; padding-left: 0; }
.preuves__val {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: 1.42rem; line-height: 1.1; letter-spacing: -.035em;
  white-space: nowrap;
}
.preuves__lib {
  display: block;
  font-size: .8rem; line-height: 1.35;
  color: rgba(35, 21, 15, .66);
  margin-top: .2rem;
}

/* ── Aperçu mobile ──────────────────────────────────────────────────────── */
.apercu { display: grid; justify-items: center; gap: .95rem; }
.appareil {
  width: min(100%, 19.5rem);
  background: var(--encre);
  padding: .3rem;
  border-radius: 1.5rem;
  box-shadow:
    0 30px 60px -28px rgba(46, 20, 4, .55),
    0 4px 14px -8px rgba(46, 20, 4, .3);
}
/* Format d'un écran de téléphone. Le contenu réel est plus court que l'écran :
   comme sur un vrai mobile, l'adresse de bas de page se pose sur le bas de
   l'écran et le reste est du blanc de page — pas un trou de mise en page. */
.appareil__ecran {
  border-radius: 1.22rem;
  overflow: hidden;
  background: #fff;
  font-size: 1rem;
  aspect-ratio: 9 / 14;
  display: flex; flex-direction: column;
}
.apercu__legende {
  font-size: .78rem; font-weight: 500;
  color: rgba(35, 21, 15, .62);
  text-align: center;
}

/* ═══ SIGNATURE : le pupitre ════════════════════════════════════════════
   Une console qui chevauche le bas du champ jaune. Deux zones séparées par
   un filet : la surface, puis le métier. Sous elles, l'état courant. */
/* `flow-root` : sans lui, la marge négative du pupitre se fusionnerait avec
   celle du bloc parent et remonterait toute la section au lieu de chevaucher
   le champ jaune. */
.pupitre-zone { background: var(--papier); display: flow-root; }
.pupitre {
  position: relative; z-index: 6;
  margin-top: clamp(-4.6rem, -5vw, -2.2rem);
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: 18px;
  box-shadow:
    0 28px 54px -30px rgba(46, 20, 4, .4),
    0 2px 5px -3px rgba(46, 20, 4, .14);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}
.pupitre__bloc { padding: 1.05rem 1.4rem 1.1rem; min-width: 0; }
.pupitre__bloc--metiers { border-left: 1px solid var(--trait); }
.pupitre__legende {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(35, 21, 15, .5);
  margin-bottom: .6rem;
}

.bascule {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 11px;
}
.surface {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--encre-doux);
  font-weight: 600; font-size: .9rem; line-height: 1.2;
  padding: .46rem .95rem; border-radius: 8px;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.surface:hover { color: var(--encre); }
.surface.est-actif { background: var(--prune); color: #fff; }
/* Un liseré prune sur un bouton prune serait invisible : on passe à l'encre,
   décalé, pour que le blanc de la console fasse la séparation. */
.surface:focus-visible { outline-color: var(--encre); outline-offset: 3px; }

.tickets {
  display: flex; gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--trait-fort) transparent;
  margin-inline: -.75rem;
  padding-inline: .75rem;
}
.tickets::-webkit-scrollbar { height: 4px; }
.tickets::-webkit-scrollbar-thumb { background: var(--trait); border-radius: 4px; }
.ticket {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-weight: 600; font-size: .91rem; line-height: 1.2;
  color: var(--encre-doux);
  padding: .42rem .78rem .5rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ticket:first-child { padding-left: 0; }
.ticket:hover { color: var(--encre); }
.ticket.est-actif { color: var(--encre); font-weight: 700; border-bottom-color: var(--miel); }

.pupitre__etat {
  grid-column: 1 / -1;
  border-top: 1px solid var(--trait);
  border-radius: 0 0 17px 17px;
  background: var(--papier);
  padding: .68rem 1.4rem .72rem;
  font-size: .84rem; color: var(--encre-doux);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem;
}
.pupitre__etat b { color: var(--encre); font-weight: 600; }
.pupitre__dom { overflow-wrap: anywhere; }
.pupitre__pt { color: var(--trait-fort); }
.pupitre__note {
  margin-left: auto;
  color: rgba(35, 21, 15, .5);
  font-size: .8rem;
  max-width: 38em;
}

/* ── La différence : avant / après ──────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}
.fiche {
  border-radius: var(--r-carte);
  padding: 1.3rem;
  display: grid; gap: .85rem; align-content: start;
}
.fiche--avant {
  border: 1px dashed rgba(35, 21, 15, .26);
  background: transparent;
}
.fiche--apres {
  border: 1px solid var(--trait);
  background: var(--craie);
  box-shadow: 0 20px 40px -28px rgba(46, 20, 4, .35);
}
.fiche__chip {
  justify-self: start;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .62rem;
  border: 1px solid var(--trait-fort); border-radius: 999px;
  color: var(--encre-doux);
}
.fiche__chip--plein {
  background: var(--miel); border-color: transparent; color: var(--encre);
  text-transform: none; letter-spacing: .01em; font-size: .76rem; font-weight: 700;
}

.fiche__trou {
  aspect-ratio: 16 / 9;
  border: 1px dashed rgba(35, 21, 15, .24);
  border-radius: 11px;
  display: grid; place-items: center; text-align: center;
  padding: 1rem;
  font-size: .84rem; color: rgba(35, 21, 15, .45);
}
.fiche__photo {
  aspect-ratio: 16 / 9;
  border-radius: 11px; overflow: hidden;
  background-size: cover; background-position: center;
  position: relative;
  display: flex; align-items: flex-end;
  padding: .85rem;
}
.fiche__photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16, 9, 4, .78), rgba(16, 9, 4, 0) 62%);
}
.fiche__enseigne {
  position: relative;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.02em; color: #fff;
}
.fiche__nom {
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -.028em; line-height: 1.15;
}
.fiche__sous { font-size: .85rem; color: var(--encre-doux); margin-top: -.6rem; }

.fiche__lignes { display: grid; }
.fiche__lignes li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .55rem 0;
  border-top: 1px solid var(--trait);
  font-size: .88rem;
}
.fiche__lignes span { color: var(--encre-doux); flex: none; }
.fiche__lignes b { text-align: right; }
.est-vide b { color: rgba(35, 21, 15, .42); font-weight: 500; font-style: italic; }
.est-pleine b { color: var(--encre); font-weight: 600; overflow-wrap: anywhere; }
.est-pleine::before {
  content: ''; order: 3; flex: none;
  width: .38rem; height: .68rem;
  border-right: 2px solid var(--vert); border-bottom: 2px solid var(--vert);
  transform: rotate(45deg) translateY(-.14rem);
  margin-left: .1rem;
}
.fiche__note { font-size: .88rem; line-height: 1.5; color: var(--encre-doux); }

/* ── Ce qui est inclus : une fiche technique, pas des cartes flottantes ── */
.cartes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--trait-fort);
}
.carte {
  padding: 1.7rem 1.5rem 1.8rem;
  border-bottom: 1px solid var(--trait);
  border-left: 1px solid var(--trait);
}
.carte:first-child { border-left: 0; padding-left: 0; }
.carte:last-child { padding-right: 0; }
.carte h3 { margin-bottom: .5rem; font-size: 1.06rem; }
.carte p { font-size: .93rem; line-height: 1.55; color: var(--encre-doux); }

/* ── Déroulé : une séquence, donc des numéros ───────────────────────────── */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--trait-clair);
}
.etape {
  padding: 1.6rem 1.8rem 0;
  border-left: 1px solid var(--trait-clair);
}
.etape:first-child { border-left: 0; padding-left: 0; }
.etape__num {
  display: block;
  font-size: 3rem; line-height: .95; letter-spacing: -.05em;
  color: var(--miel);
  margin-bottom: .8rem;
}
.etape h3 { margin-bottom: .45rem; }
.etape p { font-size: .93rem; line-height: 1.55; color: rgba(253, 241, 228, .74); }

/* ── Tarifs ─────────────────────────────────────────────────────────────── */
.formules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
/* Quatre lignes fixes : entête, prix, avantages (élastique), bouton. Les
   quatre cartes s'alignent donc sur les mêmes repères, et les boutons
   tombent tous au même endroit. */
.formule {
  background: var(--craie);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 1.5rem 1.35rem 1.55rem;
  display: grid; gap: 1.05rem;
  grid-template-rows: auto auto 1fr auto;
}
.formule--phare {
  background: var(--prune);
  border-color: var(--prune);
  color: #fdf1e4;
  box-shadow: 0 26px 48px -26px rgba(94, 31, 61, .58);
}
.formule__nom {
  font-family: var(--display); font-weight: 700;
  font-size: 1.32rem; letter-spacing: -.03em; line-height: 1.2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.formule__badge {
  font-family: var(--texte);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--miel); color: var(--encre);
  padding: .26rem .52rem; border-radius: 999px;
}
.formule__pour {
  font-size: .87rem; line-height: 1.4;
  color: var(--encre-doux);
  margin-top: .2rem;
  min-height: 2.4rem;            /* deux lignes réservées : les prix s'alignent */
}
.formule--phare .formule__pour { color: rgba(253, 241, 228, .72); }

.prix {
  display: flex; align-items: flex-end; gap: .45rem;
  min-height: 3.75rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--trait);
}
.formule__liste { align-content: start; }
.formule--phare .prix { border-bottom-color: rgba(255, 240, 220, .22); }
.prix__nb { font-size: 3rem; line-height: .88; letter-spacing: -.05em; }
.prix__col { display: flex; flex-direction: column; line-height: 1.2; padding-bottom: .18rem; }
.prix__dev { font-weight: 700; font-size: .95rem; }
.prix__par { font-size: .78rem; color: var(--encre-doux); }
.formule--phare .prix__par { color: rgba(253, 241, 228, .7); }
.prix__devis { font-size: 1.85rem; line-height: 1.05; letter-spacing: -.035em; }

.formule__liste { display: grid; gap: .52rem; }
.formule__liste li {
  position: relative;                 /* ancre de l'infobulle */
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .89rem; line-height: 1.45;
}
.formule__liste b { font-weight: 700; }
.formule__coche { flex: none; display: grid; place-items: center; width: .95rem; height: 1.3rem; }
.formule__coche::before {
  content: '';
  width: .36rem; height: .64rem;
  border-right: 2px solid var(--prune); border-bottom: 2px solid var(--prune);
  transform: rotate(45deg) translate(-.03rem, -.06rem);
}
.formule--phare .formule__coche::before { border-color: var(--miel); }
.formule__txt { min-width: 0; }

.formules__pied {
  margin-top: 1.6rem;
  font-size: .85rem; color: var(--encre-doux);
}
.formules__pied b { color: var(--encre); font-weight: 600; }

/* ── Infobulle d'aide ────────────────────────────────────────────────────
   `display:none` au repos — une bulle en `visibility:hidden` reste
   positionnée et élargit la page (63 px de débordement déjà constatés).
   Ancrée sur le <li>, jamais sur la pastille : elle ne peut pas dépasser
   la largeur de la carte. */
.aide { display: inline; margin-left: .18rem; cursor: help; }
.aide__pic {
  display: inline-grid; place-items: center; vertical-align: -.14em;
  width: 1.02rem; height: 1.02rem; border-radius: 50%;
  background: rgba(94, 31, 61, .13); color: var(--prune);
  font-size: .66rem; font-weight: 700; line-height: 1;
}
.formule--phare .aide__pic { background: rgba(255, 215, 107, .22); color: var(--miel); }
.aide:hover .aide__pic, .aide:focus-visible .aide__pic { background: var(--prune); color: #fff; }
.formule--phare .aide:hover .aide__pic,
.formule--phare .aide:focus-visible .aide__pic { background: var(--miel); color: var(--encre); }

.aide__bulle {
  display: none;
  position: absolute; left: 0; right: 0; bottom: calc(100% + .35rem);
  background: var(--encre); color: #f7ece2;
  font-family: var(--texte);
  font-size: .78rem; font-weight: 400; line-height: 1.45; text-align: left;
  padding: .62rem .72rem; border-radius: 10px;
  box-shadow: 0 14px 30px -12px rgba(20, 8, 4, .6);
  z-index: 20; pointer-events: none;
}
.aide__bulle::after {
  content: ''; position: absolute; top: 100%; left: 1.1rem;
  border: .35rem solid transparent; border-top-color: var(--encre);
}
.aide:hover .aide__bulle,
.aide:focus .aide__bulle,
.aide:focus-within .aide__bulle { display: block; }

/* ── Questions ──────────────────────────────────────────────────────────── */
.questions { border-top: 1px solid var(--trait-fort); }
.question { border-bottom: 1px solid var(--trait); }
.question summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.1rem 0;
  font-size: 1.04rem; font-weight: 600; letter-spacing: -.012em;
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--prune); }
.question__signe {
  flex: none; position: relative;
  width: 1.4rem; height: 1.4rem;
  border: 1px solid var(--trait-fort); border-radius: 50%;
}
.question__signe::before, .question__signe::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: .6rem; height: 2px; background: var(--prune);
  transform: translate(-50%, -50%);
  transition: opacity .16s ease, transform .16s ease;
}
.question__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.question[open] .question__signe::after { opacity: 0; }
.question[open] .question__signe { background: var(--miel); border-color: transparent; }
.question p {
  padding: 0 3rem 1.25rem 0;
  font-size: .95rem; line-height: 1.6; color: var(--encre-doux);
  max-width: 44em;
}

/* ── Chat ───────────────────────────────────────────────────────────────── */
.ambiance {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .3; filter: saturate(.6);
}
/* Voile prune sur la droite : la section reste chaude, jamais un noir plat. */
.bloc--encre::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(102deg, var(--encre) 10%, rgba(45, 15, 30, .8) 62%, rgba(94, 31, 61, .62) 100%);
}
.chat__grille {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.chat__texte h2 { margin-bottom: 1.1rem; }
.chat__texte .bouton { margin-top: 1.8rem; }

.fenetre {
  background: var(--craie);
  border-radius: var(--r-carte);
  box-shadow: 0 34px 64px -28px rgba(0, 0, 0, .6);
  overflow: hidden;
  color: var(--encre);
  display: grid;
}
.fenetre__tete {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--trait);
  background: var(--papier);
}
.fenetre__pastille {
  flex: none; width: 1.85rem; height: 1.85rem; border-radius: .55rem;
  display: grid; place-items: center;
  background: var(--miel); color: var(--encre);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
}
.fenetre__nom { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.fenetre__etat {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .78rem; color: var(--encre-doux);
}
.pastille-attente {
  width: .48rem; height: .48rem; border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 3px rgba(14, 124, 90, .16);
}
.fil {
  padding: 1.05rem 1rem;
  display: grid; gap: .6rem; justify-items: start; align-content: start;
  min-height: 12rem; max-height: 20rem; overflow-y: auto;
}
.bulle {
  font-size: .9rem; line-height: 1.5;
  padding: .65rem .85rem;
  border-radius: 13px;
  max-width: 92%;
}
.bulle--eux { background: var(--papier); border: 1px solid var(--trait); }
.bulle--moi { background: var(--prune); color: #fff; justify-self: end; }
.bulle--attente { color: var(--encre-doux); letter-spacing: .12em; }
.composeur {
  display: flex; gap: .5rem;
  padding: .75rem;
  border-top: 1px solid var(--trait);
}
.composeur__champ {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: .93rem; color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait); border-radius: 10px;
  padding: .68rem .8rem;
}
.composeur__champ::placeholder { color: rgba(35, 21, 15, .45); }
.composeur__champ:focus-visible { border-color: var(--prune); outline-offset: 0; }
.composeur__envoi {
  flex: none; width: 2.75rem;
  display: grid; place-items: center; cursor: pointer;
  background: var(--prune); color: #fff;
  border: 0; border-radius: 10px;
}
.composeur__envoi svg { width: 1.1rem; height: 1.1rem; }
.composeur__envoi:hover { background: var(--prune-fonce); }

/* ── Pied ───────────────────────────────────────────────────────────────── */
.pied {
  background: var(--papier);
  border-top: 1px solid var(--trait);
  padding-block: 2rem;
  font-size: .88rem; color: var(--encre-doux);
}
.pied__barre { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.marque__pastille--pied { font-size: .95rem; padding: .38rem .58rem .42rem; border-radius: .55rem; }
.pied a { margin-left: auto; color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--trait-fort); }
.pied a:hover { border-bottom-color: var(--encre); }

/* ═══════════════════════════════════════════════════════════════════════
   Écrans de démonstration (inc/heros-demo.php).
   Reproduits ici depuis la feuille d'origine : ce sont de vraies interfaces
   — fiche Google, navigateur, mini-site — pas des accessoires décoratifs.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le métier actif est porté par .ecran ; la surface active est portée par
   le conteneur, donc changer de surface est purement en CSS. */
.ecran { display: none; }
.ecran.est-actif { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vue { display: none; animation: apparait .28s ease both; }
#surface[data-vue="fiche"] .ecran.est-actif .vue--fiche,
#surface[data-vue="site"]  .ecran.est-actif .vue--site {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
@keyframes apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Les blocs gardent leur hauteur naturelle ; seul le corps s'étire, ce qui
   pose l'avis Google et l'adresse du site en bas d'écran. */
.vue--fiche > *, .vue--site > * { flex: 0 0 auto; }
.vue--fiche .fg__corps { flex: 1 1 auto; display: flex; flex-direction: column; }
.vue--fiche .fg__avis { margin-top: auto; }
.vue--site .ms__pied { margin-top: auto; border-top: 1px solid #efeae2; }

/* ── Surface 1 : la fiche Google ────────────────────────────── */
.fg__tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5em .7em; background: #fff; border-bottom: 1px solid #ececec;
  font-size: .72em;
}
.fg__source { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: #3c4043; }
.fg__pastille {
  width: 1.25em; height: 1.25em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .8em;
  background: var(--miel); color: var(--encre);
}
.fg__loupe { color: #9aa0a6; font-size: 1.05em; }

.fg__galerie { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 7.6em; }
.fg__photo { background-size: cover; background-position: center; display: block; }
.fg__photo--grande { grid-row: 1 / 3; }

.fg__corps { padding: .7em .8em .8em; background: #fff; display: grid; gap: .5em; }
.fg__nom { font-family: var(--display); font-weight: 700; font-size: 1.02em; letter-spacing: -.025em; color: #202124; }
.fg__note { display: flex; align-items: center; gap: .35em; font-size: .72em; color: #70757a; }
.fg__note b { color: #202124; font-size: 1.05em; }
.etoiles .plein { color: #f0a92b; }
.etoiles .vide { color: #dadce0; }
.fg__cat { font-size: .72em; color: #70757a; margin-top: -.25em; }

.fg__actions { display: flex; gap: .35em; }
.fg__rond {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15em;
  font-size: .62em; font-weight: 600; color: var(--accent);
  border: 1px solid #dadce0; border-radius: .7em; padding: .45em .2em;
}
.fg__rond i { font-style: normal; font-size: 1.3em; line-height: 1; }
.fg__rond--plein { background: var(--accent); color: #fff; border-color: var(--accent); }

.fg__infos { list-style: none; margin: 0; padding: 0; display: grid; gap: .38em; }
.fg__infos li { display: grid; grid-template-columns: 1.1em 1fr; gap: .45em; font-size: .7em; color: #3c4043; line-height: 1.4; }
.fg__infos i { font-style: normal; color: #70757a; text-align: center; }
.fg__ouvert { color: var(--vert); font-weight: 700; }
.fg__lien { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.fg__horaire { white-space: nowrap; }

.fg__avis { border-top: 1px solid #ececec; padding-top: .5em; font-size: .7em; color: #3c4043; line-height: 1.45; }
.fg__avis b { display: block; color: #70757a; font-size: .9em; margin-top: .2em; }

/* La fiche est plus dense que le site : légèrement plus petite pour tenir. */
.vue--fiche { font-size: .93em; }
.vue--fiche .fg__galerie { height: 6.7em; }
.vue--fiche .fg__corps { gap: .42em; padding-bottom: .7em; }
.vue--fiche .fg__avis { padding-top: .42em; }

/* ── Surface 2 : le site, tronc commun ──────────────────────── */
.ms__barre {
  display: flex; align-items: center; gap: .4em;
  padding: .45em .7em; background: #f1f3f4; border-bottom: 1px solid #e0e2e4;
  font-size: .66em; color: #5f6368;
}
.ms__cadenas { font-style: normal; }
.ms__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

.ms__corps { padding: .75em .8em; display: grid; gap: .6em; background: #fff; }
.ms__corps--haut { padding-bottom: .3em; }
.ms__enseigne { font-family: var(--display); font-weight: 700; font-size: 1.05em; line-height: 1.1; letter-spacing: -.025em; color: #fff; }
.ms__enseigne--sombre { color: #1d1a17; }
.ms__metier { font-size: .68em; color: rgba(255,255,255,.92); }
.ms__metier--sombre { color: #6b625b; }
.ms__cta {
  display: block; text-align: center; font-weight: 700; font-size: .82em;
  background: var(--accent); color: #fff; padding: .55em; border-radius: .5em;
}
.ms__pied { padding: .55em .8em .7em; font-size: .58em; color: #8a8279; background: #fff; line-height: 1.4; }
.ms__cit { font-size: .68em; color: #6b625b; font-style: italic; line-height: 1.45; }

/* Modèle « gourmand » : restaurant, boulangerie */
.modele--gourmand .ms__hero {
  height: 8.6em; background-size: cover; background-position: center;
  position: relative; display: flex; align-items: flex-end; padding: .7em;
}
.modele--gourmand .ms__hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,8,4,.85), rgba(12,8,4,.05) 70%);
}
.modele--gourmand .ms__hero-txt { position: relative; z-index: 1; }
.modele--gourmand .ms__carte-menu { display: grid; gap: .3em; border-top: 1px solid #ece6dc; padding-top: .5em; }
.modele--gourmand .ms__plat { display: flex; justify-content: space-between; gap: .5em; font-size: .72em; }
.modele--gourmand .ms__plat b { color: var(--accent); }
.modele--gourmand .ms__cta { border-radius: 999px; }

/* Modèle « doux » : coiffeur, institut */
.modele--doux { background: #fffaf8; }
.modele--doux .ms__corps { background: #fffaf8; text-align: center; }
.modele--doux .ms__cta--rond { border-radius: 999px; margin-inline: auto; max-width: 82%; }
.modele--doux .ms__rond-photo {
  width: 8.4em; height: 8.4em; margin: .5em auto .2em; border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 .35em #fff, 0 0 0 .5em var(--accent);
}
.modele--doux .ms__pastilles { display: flex; flex-wrap: wrap; gap: .3em; justify-content: center; }
.modele--doux .ms__pastille {
  font-size: .64em; font-weight: 600; padding: .32em .6em; border-radius: 999px;
  background: #fff; border: 1px solid #f0e2dd; color: #6b625b;
}
.modele--doux .ms__cit--doux { text-align: center; }
.modele--doux .ms__pied { background: #fffaf8; text-align: center; }

/* Modèle « étal » : boutique, fleuriste */
.modele--etal .ms__entete-etal {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  padding: .6em .8em; background: #fff; border-bottom: 1px solid #efeae2;
}
.modele--etal .ms__cta--fin { font-size: .62em; padding: .35em .7em; border-radius: 999px; white-space: nowrap; }
.modele--etal .ms__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.modele--etal .ms__case { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.modele--etal .ms__rangs { display: grid; gap: .25em; }
.modele--etal .ms__rang {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .7em; font-weight: 600; padding: .42em .1em; border-bottom: 1px solid #f2ede5;
}
.modele--etal .ms__rang i { font-style: normal; color: var(--accent); }

/* Modèle « net » : opticien, garage */
.modele--net .ms__bandeau-net { background: var(--accent); padding: .8em; }
.modele--net .ms__cta--carre { border-radius: .3em; }
.modele--net .ms__blocs { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; }
.modele--net .ms__bloc {
  background: #f5f6f7; border-left: 3px solid var(--accent);
  padding: .45em .5em; font-size: .64em; line-height: 1.3;
}
.modele--net .ms__bande-photo { height: 3.1em; background-size: cover; background-position: center; border-radius: .3em; }
.modele--net .ms__rassure { display: flex; align-items: center; gap: .35em; font-size: .66em; font-weight: 600; color: var(--vert); }
.modele--net .ms__rassure i { font-style: normal; }

/* ═══ Adaptations ═══════════════════════════════════════════════════════ */

/* Tarifs : 1 → 2 → 4 colonnes. */
@media (min-width: 46rem) { .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) {
  .formules { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
  .formule { padding-inline: 1.15rem; }
  .formule__liste li { font-size: .855rem; }
  .prix__nb { font-size: 2.7rem; }
}

/* Sous 1000 px : le héros passe en une colonne, l'aperçu au-dessus du texte
   serait moins efficace — on garde le texte d'abord. */
@media (max-width: 62rem) {
  .heros__grille { grid-template-columns: minmax(0, 1fr); }
  .apercu { margin-top: .6rem; }
  .chat__grille { grid-template-columns: minmax(0, 1fr); }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .etape { padding: 1.3rem 0 0; border-left: 0; border-top: 1px solid var(--trait-clair); }
  .etape:first-child { border-top: 0; padding-top: 1.4rem; }
  .etape__num { font-size: 2.5rem; margin-bottom: .5rem; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte:nth-child(odd) { border-left: 0; padding-left: 0; }
  .carte { padding-inline: 1.3rem; }
}

@media (max-width: 54rem) {
  .pupitre { grid-template-columns: minmax(0, 1fr); }
  .pupitre__bloc--metiers { border-left: 0; border-top: 1px solid var(--trait); }
  .pupitre__note { margin-left: 0; flex-basis: 100%; }
  .duo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .preuves { grid-template-columns: minmax(0, 1fr); margin-top: 1.9rem; }
  .preuves li {
    border-left: 0; padding: .7rem 0;
    border-top: 1px solid rgba(35, 21, 15, .14);
    display: flex; align-items: baseline; gap: .55rem;
  }
  .preuves li:first-child { border-top: 0; }
  .preuves__val { font-size: 1.15rem; flex: none; }
  .preuves__lib { margin-top: 0; }
  .heros__actions { gap: .6rem; }
  .heros__actions .bouton { flex: 1 1 100%; }
  .cartes { grid-template-columns: minmax(0, 1fr); }
  .carte { padding-inline: 0; border-left: 0; }
  .question p { padding-right: 0; }
  .question summary { font-size: .98rem; }
  .fil { max-height: 16rem; }
  .pupitre { margin-top: -2.1rem; border-radius: 14px; }
  .pupitre__etat { border-radius: 0 0 13px 13px; }
  .pupitre__bloc { padding: .9rem 1.05rem 1rem; }
  .pupitre__etat { padding-inline: 1.05rem; }
  .tickets { margin-inline: -1.05rem; padding-inline: 1.05rem; }
  .ticket:first-child { padding-left: 0; }
  .bascule { display: flex; }
  .surface { flex: 1; }
  /* Le point de séparation resterait orphelin en fin de ligne. */
  .pupitre__pt { display: none; }
  .pupitre__dom { flex-basis: 100%; }
  .pied a { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bouton:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Vocabulaire partagé avec les autres pages (audit, mentions).
   Ces classes existaient dans l'ancienne feuille : on les garde
   pour que les pages qui ne sont pas l'accueil restent d'aplomb.
   ───────────────────────────────────────────────────────────── */
.etiq {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(35, 21, 15, .62);
  margin: 0 0 1.1rem;
}
.bloc--pale {
  background: var(--papier);
  border-block: 1px solid rgb(35 21 15 / .1);
}
/* Ancien nom du bouton secondaire. */
.bouton--fantome {
  background: transparent;
  color: var(--encre);
  box-shadow: inset 0 0 0 1.5px rgb(35 21 15 / .22);
}
.bouton--fantome:hover { box-shadow: inset 0 0 0 1.5px var(--encre); }

/* Lien d'appel dans la navigation. */
.entete__nav-fort {
  font-weight: 600;
  color: var(--prune) !important;
  text-decoration: underline;
  text-decoration-color: var(--miel);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* Sur téléphone la navigation est masquée, mais l'audit gratuit est notre
   porte d'entrée : il reste visible, seul, à côté de « Espace client ». */
@media (max-width: 62rem) {
  .entete__nav { display: flex; gap: 0; margin-left: auto; }
  .entete__nav a:not(.entete__nav-fort) { display: none; }
  .entete__barre .bouton { margin-left: .9rem; }
}
@media (max-width: 26rem) {
  .entete__nav-fort { font-size: .86rem; }
  .marque__pastille { font-size: 1rem; padding: .45rem .6rem .5rem; }
}

/* Modèle « net » : liste de prestations chiffrées. Un site de garage ou
   d'opticien sans tarifs ne rassure personne — et laissait l'écran vide. */
.modele--net .ms__tarifs {
  margin-top: .45em;
  border-top: 1px solid rgb(35 21 15 / .1);
}
.modele--net .ms__tarif {
  display: flex; justify-content: space-between; gap: .7em;
  padding: .3em 0;
  border-bottom: 1px solid rgb(35 21 15 / .07);
  font-size: .72em;
}
/* Le prix prend la couleur de l'enseigne, pas celle d'EasyWWW : c'est SON site. */
.modele--net .ms__tarif b { color: var(--accent); white-space: nowrap; }
.modele--net .ms__cit {
  margin-top: .5em;
  font-style: italic;
  font-size: .66em;
  line-height: 1.4;
  color: var(--encre-doux);
}

/* L'attribut `hidden` doit gagner sur toute règle d'affichage.
   Sans ça, un `.recap__ligne { display: flex }` rend visible une ligne marquée
   hidden — et la page a affiché « Remise annuelle −20 % » sur un abonnement
   mensuel. Une valeur fausse sur une page de paiement n'est pas une broutille. */
[hidden] { display: none !important; }