/* ==========================================================================
   ZINEO — feuille de style
   Écrite mobile d'abord : les styles de base valent pour un téléphone,
   les media queries n'ajoutent que ce que les grands écrans permettent.
   ========================================================================== */

:root {
  --marine:    #14324f;
  --marine900: #0d2540;
  --surface:   #173a5b;
  --filet:     #2a5074;
  --ambre:     #ffd08a;
  --creme:     #fffdf6;
  --clair:     #c5dcf0;
  --doux:      #a9c6e0;
  --pale:      #7fa4c4;

  /* Aplats des cartes numérotées — teintes claires : le texte marine
     y passe partout à 7,6:1 minimum. */
  --a1: #ffd08a;
  --a2: #a8d8f5;
  --a3: #a9e5a0;
  --a4: #ffb3a3;
  --a5: #9fe0e3;

  --pad: 20px;
  --r-s: 14px;
  --r-m: 20px;
  --r-l: 28px;

  /* Largeur de la colonne de contenu. Au-delà, l'écran ne fait qu'ajouter
     du fond : le site rend pareil sur un portable, un 24 pouces ou un 4K. */
  --colonne: 1180px;

  --sortie: cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; }

/* La barre est fixe : sans cette marge, une ancre amène le titre dessous. */
[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--marine);
  color: #fff;
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: #fff; text-decoration: none; }
a:hover { color: var(--ambre); }

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

.arch { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; font-variant-numeric: tabular-nums; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.enveloppe { padding-left: var(--pad); padding-right: var(--pad); }

/* ==========================================================================
   La colonne centrale
   Les bandes prennent toute la largeur pour porter leur fond, mais leur
   CONTENU est plafonné et centré. C'est ce qui fait que le rendu ne change
   pas d'un écran à l'autre.
   ========================================================================== */
/* Chaque BANDE absorbe l'excédent de largeur dans son propre rembourrage
   latéral : tout ce qu'elle contient se retrouve donc dans la colonne, sans
   qu'il faille envelopper quoi que ce soit ni énumérer les éléments un par
   un. Une nouvelle page hérite du centrage rien qu'en utilisant ces classes. */
.hero,
.sect,
.clair,
.fil,
.pied {
  padding-inline: max(var(--pad), calc((100% - var(--colonne)) / 2));
}

/* --- Titres -------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -.04em; line-height: .9; text-transform: uppercase; text-wrap: balance; }
/* Les tailles sont plafonnées : au-delà de la largeur de colonne, un titre
   qui continue de grossir donne l'impression d'un site zoomé. */
h1 { font-size: clamp(42px, 11vw, 84px); }
h2 { font-size: clamp(28px, 7vw, 44px); }
h3 { font-size: 19px; letter-spacing: -.015em; text-transform: none; line-height: 1.2; }
p  { margin: 0; }

.chapeau { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambre); }

/* --- Boutons ------------------------------------------------------------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 100px; border: 0;
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
  transition: transform .18s var(--sortie), background-color .18s ease;
}
.bt:active { transform: scale(.97); }
.bt--ambre  { background: var(--ambre); color: var(--marine); }
.bt--ambre:hover { background: #ffdca6; color: var(--marine); }
.bt--marine { background: var(--marine); color: #fff; }
.bt--marine:hover { background: var(--surface); color: #fff; }
.bt--vide   { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28); }
.bt--vide:hover { border-color: var(--ambre); color: var(--ambre); }

/* ==========================================================================
   Barre de navigation — présente en permanence, elle se compacte au défilement
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; justify-content: center;
  padding: 12px var(--pad);
  transition: padding .28s var(--sortie);
}
.nav.compacte { padding-top: 8px; padding-bottom: 8px; }

.nav__pilule {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; max-width: 1180px;
  padding: 7px 7px 7px 16px;
  background: rgba(255,255,255,.97);
  border-radius: 100px;
  box-shadow: 0 12px 34px rgba(0,0,0,.30);
  transition: box-shadow .28s ease, transform .28s var(--sortie);
}
.nav.compacte .nav__pilule { box-shadow: 0 8px 22px rgba(0,0,0,.38); }

.nav__marque { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav__marque img { width: 28px; height: 27px; object-fit: contain; }
.nav__nom { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 900; letter-spacing: .05em; color: var(--marine); }
.nav__nom span { color: #2e8fdd; }

.nav__liens { display: none; }
.nav__tel { display: none; }

.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__cta { min-height: 44px; padding: 0 18px; font-size: 14px; }
.nav__burger {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; border-radius: 100px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: 96px 0; }
/* Page intérieure : le fil d'Ariane a déjà dégagé la barre, et le titre est
   long (il porte la requête cherchée sur Google) — il lui faut moins de corps
   qu'un slogan d'accueil. */
.hero--page { padding-block: 20px 0; align-items: start; }
.hero__titre--page { font-size: clamp(30px, 4.6vw, 54px); line-height: .96; }
.prix { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 18px; }
.prix__nombre { font-size: 40px; font-weight: 900; letter-spacing: -.035em; }
.prix__note { font-size: 15px; color: var(--pale); }
.hero__titre { margin-bottom: 16px; }
.hero__titre .l2 { color: var(--ambre); }
.hero__texte { font-size: 17px; color: var(--clair); margin-bottom: 22px; }
.hero__actions { display: flex; flex-direction: column; gap: 12px; }
.hero__note { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.etoiles { display: flex; gap: 2px; }
.hero__note span { font-size: 14px; color: var(--clair); }

/* ==========================================================================
   Bandeau défilant
   ========================================================================== */
.bandeau {
  overflow: hidden; padding: 13px 0; color: var(--pale);
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
}
.bandeau__piste { display: flex; width: max-content; animation: defile 30s linear infinite; }
.bandeau__piste span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 0 16px; white-space: nowrap; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ==========================================================================
   Vaguelette réactive au défilement
   Le tracé est régénéré en JS : l'amplitude enfle quand on descend,
   se replie quand on remonte.
   ========================================================================== */
.vague { line-height: 0; position: relative; }
.vague svg { display: block; width: 100%; height: 90px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.sect { padding-block: 56px 0; }
.sect__intro { margin-bottom: 24px; }
.sect__intro p { margin-top: 12px; font-size: 16px; color: var(--clair); }

/* --- Cartes prestation --------------------------------------------------- */
.prestas { display: flex; flex-direction: column; gap: 10px; }
.presta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 72px; padding: 16px; background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--r-m);
  transition: border-color .2s ease, background-color .2s ease;
}
.presta:hover { border-color: var(--ambre); background: #1b3f61; color: #fff; }
/* Les miniatures (bulle + sujet dessiné) remplacent les icônes de trait.
   Elles valent d'être vues aussi sur téléphone, où la carte est une simple
   rangée : une image y fait plus pour reconnaître la prestation qu'un mot. */
.presta__icone { display: flex; align-items: center; flex-shrink: 0; }
.presta__icone svg { width: 46px; height: 46px; }
.presta__corps { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.presta__nom { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 700; }
.presta__desc { display: none; }
.presta__prix { font-size: 13px; color: var(--ambre); }
.presta__bas { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.presta__fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 100px; background: var(--ambre); flex-shrink: 0;
}

/* --- Différence : cartes numérotées -------------------------------------- */
.difference { display: grid; gap: 24px; }
.difference__visuel { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--filet); }

/* Les vignettes s'empilent : chacune se colle un peu plus bas que la
   précédente, si bien qu'en descendant elles se recouvrent en laissant
   dépasser un liseré. En remontant, la pile se défait toute seule. */
.difference__cartes { display: block; }
.pastille {
  position: sticky;
  border-radius: var(--r-l); padding: 24px 22px 26px; color: var(--marine);
  margin-bottom: 18px;
  box-shadow: 0 -14px 34px rgba(13, 37, 64, .28);
}
.pastille:nth-child(1) { top: 88px;  z-index: 1; }
.pastille:nth-child(2) { top: 100px; z-index: 2; }
.pastille:nth-child(3) { top: 112px; z-index: 3; }
.pastille:nth-child(4) { top: 124px; z-index: 4; }
.pastille:nth-child(5) { top: 136px; z-index: 5; margin-bottom: 0; }
.pastille__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.pastille__n { font-family: 'Archivo', sans-serif; font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.pastille__n i { font-style: normal; opacity: .45; }
.pastille__coche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 100px; background: var(--marine); flex-shrink: 0;
}
.pastille h3 { margin-bottom: 6px; }
.pastille p { font-size: 15px; color: #2c4a66; }

/* --- Diptyque avant / après ---------------------------------------------- */
.pile { position: relative; overflow: hidden; }
.pile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pile__apres { animation: bascule 7s ease-in-out infinite; }
@keyframes bascule { 0%,16% { opacity: 0; } 42%,74% { opacity: 1; } 96%,100% { opacity: 0; } }
.pile__balai {
  position: absolute; top: 0; bottom: 0; width: 30%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,208,138,.22) 45%, rgba(255,208,138,0));
  animation: balaie 7s ease-in-out infinite;
}
@keyframes balaie { 0%,18% { transform: translateX(-120%); } 44%,100% { transform: translateX(400%); } }
.etiq {
  position: absolute; white-space: nowrap; font-size: 10px; font-weight: 600;
  letter-spacing: .22em; padding: 7px 12px; border-radius: 100px;
}
.etiq--avant { background: rgba(20,50,79,.8); color: #fff; border: 1px solid rgba(255,255,255,.3); animation: etiqA 7s ease-in-out infinite; }
.etiq--apres { background: var(--ambre); color: var(--marine); animation: etiqB 7s ease-in-out infinite; }
@keyframes etiqA { 0%,20% { opacity: 1; } 38%,78% { opacity: 0; } 94%,100% { opacity: 1; } }
@keyframes etiqB { 0%,20% { opacity: 0; } 38%,78% { opacity: 1; } 94%,100% { opacity: 0; } }

/* --- Révélation au survol -------------------------------------------------
   Sur les volets marqués « survol », la bascule n'est plus automatique :
   c'est le visiteur qui découvre l'après en passant dessus. Il déclenche
   la preuve lui-même, ce qui la rend plus convaincante qu'une boucle.
   Là où il n'y a pas de survol possible (tactile), la boucle est conservée. */
.pile__indice {
  /* En haut à droite : en bas, la pastille recouvrait la légende. */
  position: absolute; top: 16px; right: 16px;
  display: none; white-space: nowrap;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--marine); background: rgba(255,255,255,.92);
  padding: 8px 14px; border-radius: 100px;
  transition: opacity .3s ease;
}

@media (hover: hover) {
  .pile--survol .pile__apres,
  .pile--survol .etiq--avant,
  .pile--survol .etiq--apres,
  .pile--survol .pile__balai { animation: none; }

  .pile--survol .pile__apres  { opacity: 0; transition: opacity .5s ease; }
  .pile--survol .etiq--avant  { opacity: 1; transition: opacity .3s ease; }
  .pile--survol .etiq--apres  { opacity: 0; transition: opacity .3s ease; }
  .pile--survol .pile__balai  { opacity: 0; }
  .pile--survol .pile__indice { display: block; }

  .pile--survol:hover .pile__apres,
  .pile--survol:focus-visible .pile__apres  { opacity: 1; }
  .pile--survol:hover .etiq--avant,
  .pile--survol:focus-visible .etiq--avant  { opacity: 0; }
  .pile--survol:hover .etiq--apres,
  .pile--survol:focus-visible .etiq--apres  { opacity: 1; }
  .pile--survol:hover .pile__balai,
  .pile--survol:focus-visible .pile__balai  { opacity: 1; animation: balaie 1.1s ease-out 1; }
  .pile--survol:hover .pile__indice,
  .pile--survol:focus-visible .pile__indice { opacity: 0; }
}

/* --- Bande claire : tarifs ----------------------------------------------- */
.clair { background: var(--creme); color: var(--marine); padding-block: 8px 48px; }
.clair h2 { color: var(--marine); }
.clair .sect__intro p { color: #5f7387; }
.tarifs__groupe { padding: 20px 0; border-top: 2px solid var(--marine); }
.tarifs__titre { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.tarifs__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #eceadf; }
.tarifs__ligne span:first-child { font-size: 15px; }
.tarifs__droite { display: flex; align-items: baseline; gap: 16px; flex-shrink: 0; }
/* Sur l'accueil, une ligne de la grille est un lien vers sa page prestation :
   le visiteur qui repère son prix n'a pas à remonter chercher la carte
   correspondante. Le soulignement pointillé signale le lien sans survol —
   l'essentiel du trafic est tactile. */
a.tarifs__ligne { color: inherit; text-decoration: none; }
a.tarifs__ligne > span:first-child {
  text-decoration: underline dotted rgba(20, 50, 79, .38);
  text-underline-offset: 4px;
  transition: text-decoration-color .18s ease;
}
a.tarifs__ligne:hover { background: rgba(20, 50, 79, .05); }
a.tarifs__ligne:hover > span:first-child,
a.tarifs__ligne:focus-visible > span:first-child { text-decoration-color: var(--marine); }
a.tarifs__ligne:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }
.tarifs__prix { font-size: 15px; font-weight: 600; min-width: 76px; text-align: right; }

/* Le texte d'explication flottait seul en haut à droite, la grille occupait
   la gauche, et tout le bas du côté droit restait vide. Texte, options et
   bouton forment maintenant une colonne en face de la grille — c'est aussi
   là que le bouton de réservation a le plus de sens, au moment où le
   visiteur lit les prix. */
.tarifs__zone { display: grid; gap: 26px; align-items: start; }
.tarifs__cote { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.tarifs__cote p { font-size: 16px; color: #5f7387; margin: 0; }
.tarifs__cote .options { margin-top: 0; }
.tarifs__cote .bt { align-self: stretch; }
@media (min-width: 900px) {
  .tarifs__zone { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .tarifs__cote { border-top: 2px solid transparent; padding-top: 22px; }
  .tarifs__cote .bt { align-self: flex-start; }
}

/* --- Avis : carrousel en éventail ----------------------------------------
   Les fiches sont empilées en biais autour de celle du centre. On clique une
   fiche latérale pour l'amener au centre, ou on utilise les deux flèches.
   ------------------------------------------------------------------------ */
.avis { position: relative; overflow: hidden; height: 520px; }
.temoin {
  position: absolute; left: 50%; top: 50%;
  width: 280px; height: 280px; padding: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  border: 2px solid var(--filet); background: var(--surface); color: #fff;
  cursor: pointer; text-align: left;
  font: inherit;
  transition: transform .55s var(--sortie), background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
  clip-path: polygon(38px 0%, 100% 0%, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%, 0 38px);
}
.temoin:hover { border-color: var(--ambre); }
.temoin--centre {
  background: var(--ambre); border-color: var(--ambre); color: var(--marine);
  z-index: 10; cursor: default;
  box-shadow: 0 10px 0 4px var(--filet);
}
.temoin__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.temoin__pastille {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px;
  background: var(--marine); color: var(--ambre);
}
.temoin--centre .temoin__pastille { background: var(--marine); color: var(--ambre); }
.temoin__note { display: flex; gap: 2px; }
/* Les avis n'ont pas tous la même longueur : on borne le nombre de lignes
   pour qu'aucun ne vienne chevaucher la signature en bas de fiche. */
.temoin__texte {
  margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Le pied est poussé en bas par la colonne flexible : plus aucun risque
   qu'un avis long passe dessous. */
.temoin__pied { margin-top: auto; padding-top: 12px; }
.temoin__nom { display: block; font-size: 13px; font-weight: 700; }
.temoin__src { display: block; font-size: 11px; opacity: .72; }
.temoin__sujet {
  display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 100px; padding: 3px 9px; margin-bottom: 10px; opacity: .8;
}

.avis__cmd { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.avis__cmd button {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff; border: 2px solid var(--filet); border-radius: 100px;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.avis__cmd button:hover:not(:disabled) { background: var(--ambre); color: var(--marine); border-color: var(--ambre); }
.avis__cmd button:disabled { opacity: .35; cursor: default; }

/* Sur petite fiche, moins de lignes et moins de marge : sinon le texte
   passe sous la signature. */
@media (max-width: 639px) {
  /* Les flèches sont remontées : en bas de section elles passeraient sous la
     barre d'action collante. */
  .avis { height: 510px; }
  .avis__cmd { bottom: 26px; }
  .temoin { padding: 20px; }
  .temoin__tete { margin-bottom: 10px; }
  .temoin__texte { font-size: 13.5px; -webkit-line-clamp: 4; }
  .temoin__sujet { margin-bottom: 8px; }
}
.avis__carte {
  margin: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 22px 20px; background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--r-m);
}
.avis__carte blockquote { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 500; }
.avis__pied { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--filet); }
.avis__nom { font-size: 13px; font-weight: 700; }
.avis__src { font-size: 11px; color: var(--pale); }
.avis__sujet {
  align-self: flex-start; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ambre); border: 1px solid rgba(255,208,138,.4); padding: 4px 10px; border-radius: 100px;
}

/* --- Zone ---------------------------------------------------------------- */
.zone__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.zone__ville {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--filet); border-radius: 100px; font-size: 14px;
}
.zone__encart { border: 1px solid var(--filet); border-radius: var(--r-l); padding: 24px; background: var(--surface); }

/* --- Appel final --------------------------------------------------------- */
.final {
  width: min(var(--colonne), 100% - 2 * var(--pad));
  margin: 56px auto 0; padding: 32px 24px;
  background: var(--ambre); color: var(--marine); border-radius: var(--r-l);
}
.final h2 { color: var(--marine); margin-bottom: 10px; }
.final p { font-size: 16px; color: #3d5265; margin-bottom: 18px; }
.final .bt { width: 100%; }

/* --- Pied de page -------------------------------------------------------- */
.pied__marque { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.pied__marque span { color: var(--ambre); }


/* ══ Pied de page ═════════════════════════════════════════════════════════
   Filets pointillés plutôt que pleins, colonnes de liens séparées par ces
   filets, et une rangée de boutons ronds qui se soulèvent au survol. Le mot
   d'introduction dit qui est derrière l'entreprise : sur un artisan seul,
   c'est l'argument, pas un remplissage.
   ────────────────────────────────────────────────────────────────────────── */
.pied {
  margin-top: 40px; padding-block: 34px 26px;
  background: var(--marine900); color: var(--doux);
  border-top: 1px dotted var(--filet);
}
.pied__filet { border-bottom: 1px dotted var(--filet); margin: 26px 0; }

.pied__haut { display: grid; gap: 18px; align-items: start; }
.pied__logo { display: inline-flex; width: 46px; height: 46px; border-radius: 50%;
  border: 1px dotted var(--filet); align-items: center; justify-content: center; flex-shrink: 0; }
.pied__logo img { width: 26px; height: 25px; object-fit: contain; }
.pied__mot { font-size: 13px; line-height: 1.7; color: var(--doux); max-width: 78ch; }

.pied__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
/* Deux colonnes depuis le 5 septembre 2026 : la colonne « Secteur »
   envoyait chaque ville vers la page canapé, ce qui n'a pas de sens pour
   qui cherche un tapis. */
.pied__col b { display: block; color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; margin-bottom: 10px; }
.pied__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pied__col a { color: var(--doux); font-size: 13px; }
.pied__col a:hover { color: var(--ambre); }

.pied__actions { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 14px; }
.pied__ronds { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* Le soulèvement au survol vient du modèle : c'est ce qui rend une rangée
   d'icônes vivante sans y ajouter de couleur. */
.pied__rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 14px;
  border: 1px dotted var(--filet); color: var(--doux);
  transition: transform .18s var(--sortie), border-color .18s ease, color .18s ease;
}
.pied__rond:hover { transform: translateY(-4px); border-color: var(--ambre); color: var(--ambre); }
.pied__sommet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; height: 42px; border-radius: 100px;
  border: 1px dotted var(--filet); background: transparent; color: var(--doux);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: transform .18s var(--sortie), border-color .18s ease, color .18s ease;
}
.pied__sommet:hover { transform: translateY(-4px); border-color: var(--ambre); color: var(--ambre); }

.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  margin-top: 26px; padding-top: 22px; border-top: 1px dotted var(--filet);
  font-size: 12px; color: var(--pale); text-align: center;
}
.pied__marque { font-family: 'Archivo', sans-serif; font-size: 17px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.pied__marque span { color: var(--ambre); }

@media (min-width: 760px) {
  .pied__cols { grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
}
@media (min-width: 1100px) {
  .pied__haut { grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
  .pied__cols { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: start; gap: 60px; }
  .pied__actions { justify-content: space-between; }
}

/* --- Barre d'action collante (mobile) ------------------------------------ */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; gap: 10px; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: rgba(13,37,64,.96); border-top: 1px solid var(--filet);
  transform: translateY(120%); transition: transform .3s var(--sortie);
}
.barre.visible { transform: none; }
.barre__tel {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 52px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.28); border-radius: 100px; color: #fff;
}
.barre .bt { flex-grow: 1; }

/* --- Fil d'Ariane -------------------------------------------------------- */
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--pale); padding-block: 96px 0; }
.fil a { color: var(--pale); }
.fil b { color: #fff; font-weight: 600; }

/* --- Formules (page prestation) ------------------------------------------ */
.formules { display: grid; gap: 14px; }
.formule { display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid var(--filet); border-radius: var(--r-l); background: var(--surface); position: relative; }
.formule--phare { border-color: var(--ambre); }
.formule__badge { position: absolute; top: -12px; right: 22px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--ambre); color: var(--marine); padding: 5px 12px; border-radius: 100px; }
.formule__nom { font-family: 'Archivo', sans-serif; font-size: 24px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 10px; }
.formule ul { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.formule li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; }
.formule li svg { flex-shrink: 0; margin-top: 3px; }
.formule__prix { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--filet); display: flex; flex-direction: column; gap: 7px; }
.formule__prix div { display: flex; align-items: baseline; justify-content: space-between; }
.formule__prix b { font-size: 17px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq__item { padding: 20px 0; border-top: 1px solid var(--filet); }
.faq__item h3 { margin-bottom: 8px; font-size: 17px; }
.faq__item p { font-size: 15px; color: var(--clair); }

/* ==========================================================================
   Apparitions au défilement
   ========================================================================== */
/* Le masquage n'est appliqué que si le JS a pris la main (html.js) : sans
   cette garde, un script qui ne se charge pas rendrait toute la page
   définitivement invisible. */
.js .rev { opacity: 0; transform: translateY(34px) scale(.98); transition: opacity .7s var(--sortie), transform .7s var(--sortie); }
.js .rev.vu { opacity: 1; transform: none; }

/* Une transformation appliquée à un élément « collant » décale son calage :
   les vignettes empilées apparaissent donc en opacité seule. */
.js .pastille.rev { transform: none; }
.js .rev:nth-child(2) { transition-delay: .07s; }
.js .rev:nth-child(3) { transition-delay: .14s; }
.js .rev:nth-child(4) { transition-delay: .21s; }
.js .rev:nth-child(5) { transition-delay: .28s; }

/* ==========================================================================
   Écrans moyens et grands
   ========================================================================== */
@media (min-width: 760px) {
  :root { --pad: 40px; }

  .nav__liens { display: flex; gap: 22px; font-size: 14px; font-weight: 600; }
  .nav__liens a { color: var(--marine); }
  .nav__liens a:hover { color: #2e8fdd; }
  .nav__tel { display: inline; font-size: 13px; color: #5f7387; }
  .nav__burger { display: none; }

  .hero { padding-top: 130px; }
  .hero__actions { flex-direction: row; }

  .prestas { display: grid; grid-template-columns: repeat(2, 1fr); }
  .avis { display: grid; grid-template-columns: repeat(2, 1fr); }
  .formules { grid-template-columns: repeat(2, 1fr); }
  .final { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding: 56px 44px; }
  .final > div { max-width: 640px; }
  .final .bt { width: auto; white-space: nowrap; }
  .barre { display: none; }
}

@media (min-width: 1100px) {
  :root { --pad: 52px; }

  .sect { padding-top: 88px; }
  .sect__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
  .sect__intro h2 { max-width: 620px; }
  .sect__intro p { margin-top: 0; max-width: 400px; font-size: 17px; }

  .hero { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 56px; align-items: end; }
  /* Sur une page intérieure les deux colonnes partent du haut : le titre est
     plus court que le slogan d'accueil, l'aligner en bas creuse un trou. */
  .hero--page { align-items: start; }
  .hero__bloc { display: flex; flex-direction: column; }
  .hero__cote { padding-bottom: 8px; }

  .prestas { grid-template-columns: repeat(3, 1fr); }
  .presta { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; min-height: 250px; padding: 24px 20px 20px; }
  .presta__icone svg { width: 64px; height: 64px; }
  .presta__desc { display: block; font-size: 14px; color: var(--doux); line-height: 1.5; }
  .presta__bas { width: 100%; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--filet); }

  /* L'ÉPINGLAGE : le volet de gauche reste collé pendant que la colonne
     de droite défile. Rien d'autre qu'un position:sticky natif.
     Le volet doit tenir dans la fenêtre, sinon il défile avant de se coller. */
  /* La cellule de gauche occupe TOUTE la hauteur de la rangée (pas de
     align-items:start), et c'est l'image à l'intérieur qui est collante.
     Sans cela le volet se libère avant que la pile de droite soit finie. */
  .difference { grid-template-columns: minmax(0,1fr) 540px; gap: 28px; }
  .difference__visuel { border: 0; border-radius: 0; overflow: visible; }
  .difference__visuel .pile {
    position: sticky; top: 96px;
    height: min(60vh, 560px); min-height: 440px; aspect-ratio: auto !important;
    border: 1px solid var(--filet); border-radius: var(--r-l); overflow: hidden;
  }
  /* Cette réserve donne au volet de gauche assez de course pour rester collé
     jusqu'à ce que les cinq vignettes soient empilées, puis un temps d'arrêt
     sur la pile complète. En rembourrage du conteneur plutôt qu'en marge de
     la dernière carte : la marge sort de la zone qui retient les collants. */
  /* Vignettes plus hautes : la pile se construit avec de la matière plutôt
     qu'avec du vide. La réserve est portée par la MARGE de la dernière carte
     et non par un rembourrage du conteneur — Chromium n'étend la portée d'un
     élément collant qu'avec la première. */
  .difference__cartes .pastille { min-height: 300px; padding: 30px 30px 32px; }
  .difference__cartes .pastille__haut { margin-bottom: 46px; }
  /* Réserve en pixels et non en pourcentage de hauteur d'écran : exprimée en
     vh, la plage vide enflait sur les grands écrans alors que la pile, elle,
     garde toujours la même hauteur. */
  .difference__reserve { height: 300px; }

  .avis { grid-template-columns: repeat(3, 1fr); }
  .tarifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 0 60px; }
  .zone { display: grid; grid-template-columns: 420px minmax(0,1fr); gap: 52px; align-items: start; }
}

/* ==========================================================================
   Respect des préférences système
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .rev, .js .rev.vu { opacity: 1; transform: none; }
  .pile__apres, .pile--survol .pile__apres { opacity: 1; }
  .etiq--avant, .pile__balai, .pile__indice { display: none; }
  .etiq--apres, .pile--survol .etiq--apres { opacity: 1; }
  .barre { transform: none; }
}

/* ══ Procédé — étapes numérotées ══════════════════════════════════════════
   Utilisé sur les pages de prestation qui n'ont pas encore de photo
   avant/après : montrer la méthode vaut mieux qu'un visuel d'illustration. */
.etapes { display: grid; gap: 14px; }
.etape {
  position: relative;
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  background: var(--surface);
  padding: 22px 22px 24px;
}
.etape__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 50%; background: var(--ambre); color: var(--marine);
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600;
}
.etape h3 { font-size: 18px; line-height: 1.2; margin-bottom: 8px; color: #fff; }
.etape p { font-size: 15px; line-height: 1.55; color: var(--clair); }

/* ══ Options — pastilles tarifaires ══════════════════════════════════════ */
.options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.option {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--filet); border-radius: 999px;
  padding: 9px 16px; font-size: 14px; color: var(--clair);
}
.option b { font-family: 'IBM Plex Mono', monospace; color: var(--ambre); font-weight: 600; }
/* Sur fond crème, --clair et --ambre s'effacent : ils sont faits pour le
   marine. La grille tarifaire est la seule section claire du site, d'où ces
   reprises — sans elles les options y étaient illisibles. Elles restent
   lisibles sur la page véhicule, dont les options sont sur fond sombre. */
.clair .option { border-color: #d9d5c4; color: var(--marine); background: #fff; }
.clair .option b { color: #9c6410; }

@media (min-width: 760px) {
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1100px) {
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etape { padding: 26px 24px 28px; }
}

/* ══ Emplacement photo en attente ════════════════════════════════════════
   Le liseré pointillé dit au premier coup d'œil que le visuel est provisoire.
   Il disparaîtra en même temps que la classe, quand la vraie paire arrivera. */
.pile--gabarit { border-style: dashed !important; border-color: var(--pale) !important; }
.pile--gabarit + .mono { color: var(--ambre); }

/* ══ Formulaire de contact ═══════════════════════════════════════════════ */
.forme { display: grid; gap: 14px; }
.forme__duo { display: grid; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--doux);
}
.champ label span { color: var(--ambre); }
.champ input, .champ textarea {
  font-family: inherit; font-size: 16px; color: #fff;
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: var(--r-s); padding: 13px 14px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { resize: vertical; min-height: 132px; line-height: 1.55; }
.champ input::placeholder, .champ textarea::placeholder { color: #6d8fae; }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--ambre);
  box-shadow: 0 0 0 3px rgba(255, 208, 138, .22);
}
.champ--erreur input, .champ--erreur textarea { border-color: #ffb3a3; }
.champ__erreur { font-size: 13px; color: #ffb3a3; }

/* Piège à robots : jamais affiché, jamais annoncé aux lecteurs d'écran. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.forme__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.forme__note { font-size: 13px; color: var(--pale); max-width: 42ch; }
.forme button[type="submit"][disabled] { opacity: .6; cursor: progress; }

.reponse { border-radius: var(--r-m); padding: 18px 20px; font-size: 15px; line-height: 1.55; }
.reponse--ok { background: #17332a; border: 1px solid #8fd9b8; color: #d6f2e6; }
.reponse--ko { background: #3a2320; border: 1px solid #ffab9a; color: #ffd9d1; }
.reponse b { display: block; margin-bottom: 4px; font-size: 16px; }

/* Coordonnées, en regard du formulaire */
/* minmax(0,…) : sans cela, une adresse e-mail insécable impose sa largeur
   à la colonne et fait déborder la page sur mobile. */
.coord { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.coord__bloc {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  background: var(--surface); padding: 20px 20px 22px;
}
.coord__bloc p.chapeau { margin-bottom: 8px; }
.coord__gros { font-size: clamp(17px, 4.6vw, 21px); font-weight: 700; color: #fff;
  overflow-wrap: anywhere; line-height: 1.25; }
.coord__gros a { color: #fff; text-decoration: none; }
.coord__gros a:hover { color: var(--ambre); }
.coord__detail { font-size: 14.5px; color: var(--clair); margin-top: 6px; line-height: 1.55; }

@media (min-width: 640px) {
  .forme__duo { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .contact { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 46px; align-items: start; }
}

/* ══ Comparateur avant / après ════════════════════════════════════════════
   Équivalent natif du composant motion : une poignée que l'on tire, et la
   photo « avant » se découvre ou se referme. Pas de dépendance, pas d'étape
   de construction — le site reste un dossier de fichiers.
   Le curseur est exprimé en pourcentage dans --p, qui pilote à la fois le
   découpage de l'image et la position de la poignée : une seule source. */
.compar {
  --p: 50%;
  /* Les deux images sont en position absolue : sans proportion imposée, le
     conteneur n'a aucune hauteur. En dessous de 1100 px il n'existait donc
     pas — invisible là où arrive l'essentiel du trafic. */
  aspect-ratio: 4 / 3;
  position: relative; overflow: hidden;
  border: 1px solid var(--filet); border-radius: var(--r-l);
  background: var(--marine900); touch-action: pan-y;
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.compar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
/* L'« avant » est découpé de la gauche jusqu'à la poignée. */
.compar__avant { clip-path: inset(0 calc(100% - var(--p)) 0 0); }

/* La séparation n'est pas un trait droit mais une vague qui ondule lentement.
   Le tracé et le découpage de l'image sortent du même calcul (site.js) : ils
   ne peuvent donc pas se désaligner. --pm porte l'abscisse de la vague à
   mi-hauteur, c'est là que se pose la poignée. */
.compar__onde {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; overflow: visible;
}
.compar__onde path {
  fill: none; stroke: rgba(255, 253, 246, .92); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(13, 37, 64, .45));
}
.compar__poignee {
  position: absolute; top: 50%; left: var(--pm, var(--p)); z-index: 2;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: ew-resize;
  background: var(--creme); color: var(--marine);
  box-shadow: 0 4px 18px rgba(13, 37, 64, .45);
  transition: transform .18s var(--sortie);
}
.compar__poignee:hover { transform: scale(1.08); }
.compar__poignee:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; }
.compar:active .compar__poignee { transform: scale(.96); }

.compar .etiq { z-index: 3; }
.compar__indice {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 2; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--creme); background: rgba(13, 37, 64, .72);
  border-radius: 999px; padding: 5px 13px; pointer-events: none;
  transition: opacity .3s ease;
}
.compar--touche .compar__indice { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .compar__poignee { transition: none; }
  .compar__poignee:hover { transform: none; }
}

/* ══ Vignettes photo empilées ═════════════════════════════════════════════
   Même mécanique que les vignettes numérotées de l'accueil — position
   collante, décalage croissant, recouvrement au défilement — mais chaque
   carte porte une paire avant/après au lieu d'un texte. */
.pastille--photo {
  padding: 0; overflow: hidden; background: var(--surface);
  border: 1px solid var(--filet);
}
.pastille__vue {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--marine900);
}
.pastille__vue img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pastille__vue .pastille__apres { opacity: 0; transition: opacity .55s var(--sortie); }
.pastille__pied {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 18px 16px;
}
.pastille__pied b { font-family: Archivo, sans-serif; font-size: 15px; color: #fff; }
.pastille__pied span { font-size: 12px; color: var(--pale); }

@media (hover: hover) {
  .pastille--photo:hover .pastille__apres,
  .pastille--photo:focus-within .pastille__apres { opacity: 1; }
}
/* Sans survol possible, on alterne tout seul : le doigt ne peut pas survoler. */
@media (hover: none) {
  .pastille__vue .pastille__apres { animation: bascule 6s ease-in-out infinite; }
  @keyframes bascule { 0%, 42% { opacity: 0 } 58%, 100% { opacity: 1 } }
}
@media (prefers-reduced-motion: reduce) {
  .pastille__vue .pastille__apres { opacity: 1; animation: none; transition: none; }
}

/* Le volet de gauche accueille le comparateur au lieu d'une image simple. */
@media (min-width: 1100px) {
  .difference__visuel .compar {
    position: sticky; top: 96px;
    height: min(60vh, 560px); min-height: 440px;
    aspect-ratio: auto !important;   /* la hauteur prime sur la proportion */
  }
  .difference__cartes .pastille--photo { min-height: 0; padding: 0; }
}

/* Dans le comparateur, les étiquettes ne clignotent pas : chacune reste de son
   côté, et s'efface quand la poignée passe par-dessus. */
.compar .etiq--avant,
.compar .etiq--apres { animation: none; opacity: 1; transition: opacity .25s ease; }
.compar[style*="--p: 0"] .etiq--avant,
.compar[style*="--p: 1.00%"] .etiq--avant,
.compar[style*="--p: 2.00%"] .etiq--avant { opacity: 0; }
.compar[style*="--p: 100.00%"] .etiq--apres,
.compar[style*="--p: 99.00%"] .etiq--apres { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .compar .etiq--avant, .compar .etiq--apres { display: inline-block; opacity: 1; }
}

/* ══ Vignette split ═══════════════════════════════════════════════════════
   Variante des vignettes empilées : les deux photos sont montrées ensemble,
   séparées par un filet. Rien à survoler, rien à attendre — la comparaison
   est immédiate, y compris au doigt et à l'impression. */
.pastille--split .pastille__vue {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  aspect-ratio: 8 / 5; background: var(--marine900);
}
.pastille--split .pastille__vue img {
  position: static; width: 100%; height: 100%; object-fit: cover;
  opacity: 1; animation: none; transition: none;
}
/* Le filet central sépare les deux prises sans masquer d'image. */
.pastille--split .pastille__vue::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: var(--creme);
  box-shadow: 0 0 0 1px rgba(13, 37, 64, .3); pointer-events: none;
}
.pastille--split .etiq {
  position: absolute; top: 12px; z-index: 2; pointer-events: none;
  animation: none; opacity: 1;
}
.pastille--split .etiq--avant { left: 12px; }
.pastille--split .etiq--apres { right: 12px; }

/* ══ Prix d'appel ═════════════════════════════════════════════════════════
   « À partir de 30 € » puis la mention en dessous : la valeur se lit d'un
   coup d'œil, la nuance ne coupe plus la phrase. */
.prix { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 0; flex-wrap: wrap; }
.prix__depuis { font-size: 17px; color: var(--clair); }
.prix__note { font-size: 13.5px; color: var(--pale); margin: 4px 0 0; }
.prix__lien { font-size: 15px; font-weight: 600; color: var(--ambre); }
.clair .prix__lien { color: #9c6410; }

/* ══ Vignette de texte ════════════════════════════════════════════════════
   Même empilement que les vignettes photo, pour les prestations dont on n'a
   pas encore de paires avant/après. */
.pastille--texte {
  background: var(--surface); border: 1px solid var(--filet);
  padding: 24px 22px 26px; color: #fff;
}
.pastille--texte .pastille__haut {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.pastille--texte .pastille__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ambre); color: var(--marine); font-size: 14px; font-weight: 600;
}
.pastille--texte .pastille__haut span:last-child {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--pale);
}
.pastille--texte h3 { font-size: 19px; line-height: 1.18; margin-bottom: 8px; }
.pastille--texte p { font-size: 15px; line-height: 1.55; color: var(--clair); }

/* Sans volet de gauche, l'empilement n'a plus de sens : il n'existe que pour
   tenir les vignettes à côté d'un comparateur qui reste collé. Seules, elles
   se recouvraient en laissant de grands vides. On les remet donc à plat, en
   grille, avec la hauteur de leur propre texte. */
.difference--seul { grid-template-columns: minmax(0, 1fr) !important; }
.difference--seul .difference__reserve { display: none; }
.difference--seul .difference__cartes {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.difference--seul .pastille {
  position: static; top: auto; margin-bottom: 0; box-shadow: none;
  min-height: 0; align-self: stretch;
}

@media (min-width: 1100px) {
  .difference__cartes .pastille--texte { min-height: 300px; padding: 30px 30px 32px; }
  .difference--seul .difference__cartes { gap: 20px; }
  /* Rendues à plat, elles n'ont plus besoin d'une hauteur imposée. */
  .difference--seul .difference__cartes .pastille--texte { min-height: 0; }
}

/* ══ Catégories défilantes ════════════════════════════════════════════════
   Le volet de gauche montrait une seule photo avant/après : une prestation
   sur six, sur la page qui doit justement les présenter toutes. Il porte
   maintenant les six catégories, qui avancent au même défilement que la pile
   de vignettes de droite — une carte passe, la suivante monte, les autres
   attendent en dessous comme un jeu de cartes.
   Le conteneur garde la classe .pile : c'est elle qui porte l'épinglage. */
.defile {
  background: var(--marine900);
  /* Les cartes sont en position absolue : sans proportion imposée, le volet
     n'a aucune hauteur et disparaît là où arrive l'essentiel du trafic.
     Sur grand écran, la règle d'épinglage la remplace par une hauteur fixe. */
  aspect-ratio: 4 / 5;
}
.defile__carte {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: var(--r-l); background: var(--marine900);
  will-change: transform, opacity;
}
.defile__carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.defile__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,37,64,.25) 0%, rgba(13,37,64,0) 34%, rgba(13,37,64,.93) 100%);
}
.defile__bas {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
}
.defile__icone { grid-row: span 2; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; background: rgba(255,208,138,.12);
  border: 1px solid rgba(255,208,138,.30); }
.defile__nom { font-size: 21px; font-weight: 900; text-transform: uppercase; letter-spacing: -.025em; line-height: 1; align-self: end; }
.defile__prix { font-size: 12px; color: var(--ambre); align-self: start; }

/* Le rail dit combien de catégories restent : sans lui, on ne sait pas que
   la pile a un début et une fin. */
.defile__rail { position: absolute; top: 18px; right: 18px; z-index: 300; display: flex; gap: 5px; }
.defile__rail i { width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); transition: background .25s ease; }
.defile__rail i.actif { background: var(--ambre); }

@media (prefers-reduced-motion: reduce) {
  .defile__carte { transition: none !important; }
}


/* Sept boutons ronds depuis l'arrivée des réseaux : à 42 px et 10 px d'écart,
   le septième passait seul à la ligne sur téléphone. Resserrés, ils tiennent
   sur une seule rangée jusqu'aux petits écrans. */
@media (max-width: 520px) {
  .pied__ronds { gap: 8px; }
  .pied__rond { width: 38px; height: 38px; border-radius: 12px; }
}

/* --- Hero : vidéo verticale ---------------------------------------------- */
/* Les sources sont tournées en 1080 × 1920 et le cadre épouse ce format. Avant,
   un bandeau de 1,9:1 recadrait une source carrée : sur téléphone on ne voyait
   qu'une bande au milieu de l'image. Plus d'agrandissement au défilement non
   plus — le geste faisait joli sur ordinateur et gênait sur téléphone. */
.hero__film {
  position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 66vh;
  overflow: hidden; border-radius: var(--r-l); background: #000;
  margin-bottom: 30px;
}
.hero__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,50,79,.35) 0%, rgba(20,50,79,0) 34%, rgba(20,50,79,.92) 100%);
}
.hero__legende { position: absolute; left: 20px; right: 20px; bottom: 22px; }
.hero__legende p:first-child {
  font-family: 'Archivo', sans-serif; font-size: clamp(16px, 4.4vw, 20px); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em;
}
.hero__legende p:last-child { font-size: 11px; color: var(--clair); margin-top: 4px; }

/* Trois repères sous l'accroche de l'accueil : ce que le visiteur veut savoir
   avant de cliquer, en trois lignes qu'on lit sans s'arrêter. */
.hero__points { list-style: none; display: grid; gap: 9px; margin: 0 0 22px; }
.hero__points li { position: relative; padding-left: 24px; font-size: 15px; color: var(--clair); }
.hero__points li::before {
  content: ""; position: absolute; left: 3px; top: .3em;
  width: 6px; height: 11px; border: solid var(--ambre); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* Entête de la section avis : la note Google, ses étoiles, et le chemin vers
   la fiche pour qui veut tout lire. */
.avis__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.avis__entete span { font-size: 14px; color: var(--clair); }
.avis__entete .bt { height: 42px; padding: 0 20px; font-size: 14px; }

@media (min-width: 1100px) {
  /* La vidéo tient la colonne de gauche, tout le discours passe à droite. */
  .hero--video { grid-template-columns: minmax(300px, 32%) minmax(0, 1fr); gap: 56px; align-items: center; }
  .hero--video .hero__film { margin-bottom: 0; max-height: 72vh; }
  .hero--video .hero__bloc { margin-bottom: 26px; }
  .hero--video.hero--page { align-items: center; }
}

/* Repli du formulaire : quand l'envoi échoue, le message écrit repart dans un
   brouillon d'e-mail plutôt que de disparaître avec la page. */
.reponse__lien { display: inline-block; margin-top: 10px; color: var(--ambre); text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   Menu mobile
   Le panneau n'existe que sous 760 px, là où les liens de la barre sont
   masqués. Construit en JS à partir de ces mêmes liens (voir site.js).
   ========================================================================== */
/* Sous la barre (z-index 60) et non par-dessus : la pilule reste visible,
   le panneau descend de dessous elle, et le bouton à trois traits sert
   aussi bien à ouvrir qu'à fermer. */
.menu { position: fixed; inset: 0; z-index: 55; }
.menu__voile {
  position: absolute; inset: 0; background: rgba(6, 20, 35, .55);
  opacity: 0; transition: opacity .24s ease;
}
.menu__corps {
  position: absolute; inset: 0 0 auto 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 86px var(--pad) 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  border-radius: 0 0 var(--r-l) var(--r-l);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform .26s var(--sortie), opacity .22s ease;
}
.menu--vu .menu__voile { opacity: 1; }
.menu--vu .menu__corps { transform: none; opacity: 1; }

.menu__fermer {
  position: absolute; top: 18px; right: 14px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--doux); cursor: pointer;
}
.menu__fermer:hover { color: var(--ambre); }

.menu__liens { display: flex; flex-direction: column; }
.menu__liens a {
  padding: 13px 0; font-size: 19px; font-weight: 700;
  border-bottom: 1px dotted var(--filet);
}
.menu__tel { padding: 16px 0 18px; font-size: 16px; color: var(--clair); }

/* Le corps ne défile plus derrière le panneau ouvert. */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

@media (min-width: 760px) {
  /* Les liens sont revenus dans la barre et le bouton a disparu :
     le menu n'a plus lieu d'être. */
  .menu { display: none; }
}