/* ============================================================
   Thomas Lairy, landing page
   Charte : branding/charte-graphique.md (version 2, 2026-09-04)

   Deux themes, un par verticale (2026-09-11) :
     - agence immobiliere, page d'arrivee : craie dominante, 60/30/10
     - conciergerie Airbnb : encre, pose par data-theme="dark" sur <html>
   Le sombre n'est plus un choix du visiteur (la bascule et le
   localStorage ont ete retires le 2026-09-07), c'est une marque de
   verticale : passer d'une pastille a l'autre change toute la page,
   le visiteur voit immediatement qu'il a change d'univers.
   ============================================================ */

:root {
  --cobalt:        #0047FF;
  --cobalt-hover:  #0039CC;
  --cobalt-clair:  #4D7CFF;
  --cobalt-pale:   #DBE7FF;
  --encre:         #0F172A;
  --encre-2:       #1E293B;
  --craie:         #F8FAFC;
  --gris:          #64748B;
  --bordure:       #E2E8F0;
  --blanc:         #FFFFFF;

  --marge:  24px;
  --rayon:  10px;
  --max:    1120px;

  /* roles */
  --fond:          var(--craie);
  --fond-carte:    var(--blanc);
  --fond-relief:   var(--blanc);
  --texte:         var(--encre);
  --texte-2:       var(--gris);
  --accent:        var(--cobalt);
  --accent-hover:  var(--cobalt-hover);
  --trait:         var(--bordure);
  --btn-texte:     var(--blanc);
  --halo:          rgba(0, 71, 255, 0.16);
  --logo-filtre:   none;
  --contact-fond:  var(--encre);
  --contact-texte: var(--craie);
  --contact-hover: var(--encre-2);
  --roi-texte:     #475569;
}

/* Theme encre de la page conciergerie. Sur fond encre la charte impose
   le cobalt clair a la place du cobalt pur. Le wordmark Lairy, dessine
   pour le clair, est eclairci par filtre. */
[data-theme="dark"] {
  --fond:          var(--encre);
  --fond-carte:    var(--encre-2);
  --fond-relief:   #16233D;
  --texte:         var(--craie);
  --texte-2:       #94A3B8;
  --accent:        var(--cobalt-clair);
  --accent-hover:  #6B92FF;
  --trait:         #2A3A57;
  --btn-texte:     var(--encre);
  --halo:          rgba(77, 124, 255, 0.18);
  --logo-filtre:   brightness(1.45) saturate(0.95);
  --contact-fond:  var(--craie);
  --contact-texte: var(--encre);
  --contact-hover: #E2E8F0;
}

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

html {
  scroll-behavior: smooth;
  background: var(--fond);
}

body {
  margin: 0;
  background: transparent;
  color: var(--texte);
  font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ============================================================
   Fond anime : deux halos cobalt qui derivent.
   Tout est en CSS, aucune image, aucun script.
   ============================================================ */

.fond {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--fond);
}

.halo {
  position: absolute;
  border-radius: 50%;
  background: var(--halo);
  filter: blur(90px);
  will-change: transform;
}

.halo-1 {
  width: 46vw;
  height: 46vw;
  min-width: 340px;
  min-height: 340px;
  top: -14vw;
  left: -8vw;
  animation: derive-1 34s ease-in-out infinite alternate;
}

.halo-2 {
  width: 38vw;
  height: 38vw;
  min-width: 280px;
  min-height: 280px;
  top: 24vw;
  right: -10vw;
  animation: derive-2 44s ease-in-out infinite alternate;
}

@keyframes derive-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 7vw, 0) scale(1.18); }
}

@keyframes derive-2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-7vw, -9vw, 0) scale(0.92); }
}

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

.section { padding: 64px 0; }

.section-relief {
  background: var(--fond-relief);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--btn-texte);
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 0; }

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

h1, h2, h3 { margin: 0 0 16px; }

h1 { font-size: 38px; font-weight: 800; line-height: 1.1;  letter-spacing: -0.025em; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.2;  letter-spacing: -0.015em; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.3;  letter-spacing: -0.01em; }

p { margin: 0 0 16px; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.lead {
  font-size: 19px;
  color: var(--texte-2);
  max-width: 40em;
  margin-bottom: 32px;
}

.section-lead {
  color: var(--texte-2);
  max-width: 44em;
  margin-bottom: 40px;
}

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

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

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 16px 26px;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--accent); color: var(--btn-texte); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-sm { padding: 11px 18px; font-size: 15px; }
.btn-lg { padding: 18px 32px; font-size: 18px; }
.btn-xl { padding: 21px 38px; font-size: 19px; }

/* fleche qui avance au survol : signale l'action sans ajouter d'ombre,
   que la charte interdit */
.btn-fleche::after {
  content: "\2192";
  display: inline-block;
  margin-left: 12px;
  transition: transform 0.18s ease;
}
.btn-fleche:hover::after { transform: translateX(5px); }

.btn:focus-visible,
a:focus-visible,
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

/* Bloc d'appel a l'action du hero. La ligne d'appui sous le bouton fait plus
   pour le taux de clic que le bouton lui-meme : elle repond a la seule
   question du visiteur, ce qui se passe s'il clique. */
.hero-cta { margin-bottom: 40px; }
.cta-appui {
  font-size: 15px;
  color: var(--texte-2);
  max-width: 34em;
  margin: 16px 0 0;
}

/* Rappel de conversion en milieu de page : le calendrier est en bas,
   ces deux relais evitent de compter sur un scroll complet. */
.cta-milieu {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--trait);
  text-align: center;
}

.cta-milieu-note {
  font-size: 14px;
  color: var(--texte-2);
  margin: 14px 0 0;
}

/* ---------- En-tete ---------- */

.site-header {
  border-bottom: 1px solid var(--trait);
  background: var(--fond);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--texte); }

/* logo-lairy-mark.png est genere par build-logo.ps1 : le mot LAIRY seul,
   detoure sur fond transparent. A la taille d'un en-tete le mot SYSTEMS du
   logo source serait illisible, il est donc ecrit en capitales espacees a
   cote, comme le prevoit la charte pour le wordmark secondaire. */
.brand-logo { height: 22px; width: auto; display: block; filter: var(--logo-filtre); }

.brand-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texte-2);
  padding-left: 9px;
  border-left: 1px solid var(--trait);
}

/* ---------- Hero ---------- */

/* Le bas du hero est volontairement serre : la barre de reperes est un
   element leger, et la section suivante apporte deja 64 px de respiration.
   Les deux marges cumulees laissaient 120 px de vide sur mobile, soit 15 %
   de l'ecran a ne rien montrer. */
.hero { padding: 44px 0 8px; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }

.hero-photo { order: -1; }

.hero-photo img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--accent);
}

/* ------------------------------------------------------------
   Bascule de verticale, commande segmentee.

   Elle remplacait une ligne de texte gris de 14 px que personne ne
   voyait. Un visiteur qui arrive d'un cold mail sur la mauvaise page
   rebondit : la bascule doit donc etre lue avant le titre, pas apres.
   Elle reste sous le bouton de reservation dans la hierarchie, par
   la taille et par l'absence de fond plein sur la pastille inactive.
   ------------------------------------------------------------ */
.verticales {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.verticales-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-2);
}

/* trois pastilles depuis le 2026-11-01 : a 375 px elles ne tiennent plus
   sur une ligne, la troisieme passe dessous (flex-wrap) et la capsule
   s'arrondit moins pour encadrer proprement les deux lignes */
.verticales-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  max-width: 420px;
  padding: 4px;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: 22px;
}

/* flex-basis auto plutot que 0 : les deux intitules sont longs, des
   moities strictement egales faisaient passer « Agence immobiliere »
   sur deux lignes a 375 px. Chaque pastille prend donc la largeur de
   son texte, et la fleche est masquee sous 700 px, ou les 19 px
   qu'elle coute faisaient deborder la ligne. */
.vert-pill {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.vert-pill.is-active {
  background: var(--accent);
  color: var(--btn-texte);
}

.vert-pill:not(.is-active) {
  position: relative;
  color: var(--texte-2);
}

.vert-pill:not(.is-active):hover,
.vert-pill:not(.is-active):focus-visible {
  background: var(--cobalt-pale);
  color: var(--accent);
}

.vert-fleche { display: none; transition: transform 0.18s ease; }
.vert-pill:not(.is-active):hover .vert-fleche { transform: translateX(3px); }

/* Anneau d'appel : trois pulsations au chargement, puis plus rien.
   Le mouvement sert a signaler qu'on peut changer de page, il ne doit
   pas tourner en boucle et concurrencer le bouton de reservation. */
.vert-pill:not(.is-active)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: appel-bascule 2.4s ease-out 1s 3;
}

@keyframes appel-bascule {
  0%   { opacity: 0;    transform: scale(1); }
  10%  { opacity: 0.55; transform: scale(1); }
  55%  { opacity: 0;    transform: scale(1.16); }
  100% { opacity: 0;    transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .vert-pill:not(.is-active)::after { animation: none; }
  .vert-fleche { transition: none; }
}

.trust-label {
  margin: 0 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-2);
}

.trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.trust li { display: flex; flex-direction: column; }
.trust strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.trust span { font-size: 14px; color: var(--texte-2); }

/* Hauteur fixe pour que les trois intitules s'alignent quelle que soit la
   forme du logo au-dessus. Les marques restent petites : ce sont des reperes
   de parcours, pas des badges de partenariat. */
.trust-logo {
  display: flex;
  align-items: center;
  height: 20px;
  margin-bottom: 12px;
}
.trust-logo img { height: 15px; width: auto; filter: var(--logo-filtre); }
.trust-logo svg { display: block; }

/* ---------- Douleurs, vignettes qui se retournent ----------

   Recto : le temps perdu. Verso : le cout en euros. Un visiteur sur
   telephone lit trois chiffres, pas trois paragraphes, et retourne la
   vignette qui le concerne. Les deux faces sont empilees dans la meme
   cellule de grille, la hauteur de la carte suit donc la plus haute des
   deux : rien n'est coupe, quelle que soit la longueur du texte. */

.pains {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.pain { perspective: 1200px; }

.pain-carte {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.pain-carte.is-flipped { transform: rotateY(180deg); }

.pain-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px 20px 18px;
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--fond-carte);
  color: var(--texte-2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.pain-verso {
  transform: rotateY(180deg);
  background: var(--cobalt-pale);
  border-color: transparent;
  color: var(--roi-texte);
}

.figure {
  display: block;
  color: var(--texte);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

/* le verso est toujours sur cobalt pale, quel que soit le theme :
   l'encre y reste la seule couleur de texte lisible */
.pain-verso .figure { color: var(--encre); }

.pain-texte { display: block; font-size: 15px; line-height: 1.5; }

/* La tache d'abord, en titre : le visiteur reconnait son travail avant de
   lire le temps qu'il y perd. */
.pain-tache {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.pain-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 10px;
}

/* indice de retournement, repousse en bas de carte : il dit qu'on peut
   toucher, sans concurrencer le chiffre */
.pain-indice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.pain-verso .pain-indice { color: var(--cobalt); }

.pain-indice-ico {
  display: inline-block;
  font-size: 15px;
  transition: transform 0.3s ease;
}
.pain-carte:hover .pain-indice-ico { transform: rotate(180deg); }

.pain-carte:focus-visible { outline: none; }
.pain-carte:focus-visible .pain-face { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pain-carte { transition: none; }
}

.footnote { font-size: 14px; color: var(--texte-2); margin: 0; }

/* ---------- Bloc retour sur investissement ---------- */

/* Fond cobalt pale plutot qu'encre : l'encre est reservee au futur bloc
   preuve, deux bandes sombres se neutraliseraient. */
.roi {
  margin-top: 40px;
  background: var(--cobalt-pale);
  border-radius: var(--rayon);
  padding: 30px 26px;
}

.roi-phrase {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 12px;
  max-width: 22em;
}

/* #475569 et non --texte-2 : sur cobalt pale, le gris de la charte tombe a
   3,3:1 de contraste, sous le seuil lisible. Celui-ci tient 6,1:1. */
.roi-appui {
  color: var(--roi-texte);
  font-size: 16px;
  margin: 0;
  max-width: 44em;
}

/* ---------- Etapes ---------- */

.steps {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.steps li { border-top: 1px solid var(--trait); padding-top: 20px; }

.step-num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
}

.steps p { color: var(--texte-2); margin: 0; }

/* ---------- Perimetre et prix ---------- */

.prix {
  background: var(--fond);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 26px 28px;
}

.prix h3 { margin-bottom: 12px; }
.prix p { color: var(--texte-2); font-size: 16px; }

/* l'ancrage : le prix plancher confronte au cout de l'inaction */
.prix-ancre {
  font-size: 19px !important;
  font-weight: 700;
  color: var(--texte) !important;
  line-height: 1.45;
}

.prix-dernier { margin-bottom: 0; }

/* ---------- Qui je suis ---------- */

/* .about est pose sur .wrap : contraindre la largeur ici recentrerait
   toute la section, il faut donc limiter les enfants, pas le conteneur */
.about h2, .about p { max-width: 46em; }
.about p { color: var(--texte-2); }

/* portrait en bulle a droite du nom, meme lisere cobalt que la photo du hero */
.about-titre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.about-titre h2 { margin: 0; }
.about-photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

/* ---------- Contacts directs, sous « Qui je suis » ----------

   Seul endroit du site ou Manrope cede la place. La charte impose une
   famille unique, l'exception est assumee et limitee a ces deux liens :
   deux pastilles a contour identiques, meme rayon et meme rembourrage
   que le reste de la page, se lisaient comme un composant par defaut.

   Trois ecarts volontaires a la grille du site :
     1. Fraunces, un serif a fort caractere, axe WONK actif
     2. traitement dissymetrique, un plein et un simple lien
     3. alignement sur la ligne de base, pas une rangee de boites

   Le plein est en encre et non en cobalt : le cobalt reste la couleur
   du seul appel a l'action de la page, la reservation. */
.contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 28px;
  margin-top: 32px;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}

.contact-plein {
  display: inline-block;
  /* rembourrage optiquement dissymetrique : la lettre finale de
     « M'ecrire » laisse moins de blanc que la capitale d'attaque */
  padding: 13px 24px 13px 21px;
  border-radius: var(--rayon);
  background: var(--contact-fond);
  color: var(--contact-texte);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.contact-plein:hover,
.contact-plein:focus-visible { background: var(--contact-hover); }

.contact-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--texte);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Soulignement porte par le libelle seul, pas par le lien entier : pose
   sur .contact-lien il passait aussi sous le glyphe LinkedIn et sous la
   fleche. Trait cobalt qui s'epaissit au survol, la hauteur totale ne
   bouge pas puisque le rembourrage compense. */
.contact-libelle {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: border-bottom-width 0.15s ease, padding-bottom 0.15s ease;
}

.contact-lien:hover { color: var(--accent); }
.contact-lien:hover .contact-libelle,
.contact-lien:focus-visible .contact-libelle {
  border-bottom-width: 2px;
  padding-bottom: 1px;
}

.contact-lien svg { flex: none; color: var(--accent); }
.contact-ext { font-size: 15px; }

/* ---------- FAQ, accordeons <details> natifs ---------- */

.faq {
  max-width: 52em;
  border-top: 1px solid var(--trait);
}

.faq-item { border-bottom: 1px solid var(--trait); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px 22px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;              /* retire la fleche par defaut */
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* chevron dessine en CSS, pivote a l'ouverture */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.faq-reponse { padding: 0 0 24px; }
.faq-reponse p { color: var(--texte-2); font-size: 16px; margin: 0; max-width: 46em; }

/* ---------- Preuve client (bloc encre, active a reception du temoignage) ---------- */

.preuve {
  background: var(--encre);
  border-top: 1px solid var(--encre-2);
  border-bottom: 1px solid var(--encre-2);
  color: var(--craie);
}

/* sur fond encre la charte interdit le cobalt pur, on passe en cobalt clair */
.preuve .eyebrow { color: var(--cobalt-clair); }
.preuve h2 { color: var(--craie); }

.preuve-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 32px 0 24px;
}

.preuve-chiffre {
  background: var(--encre-2);
  border: 1px solid #2A3A57;
  border-radius: var(--rayon);
  padding: 24px 22px;
}

.preuve-apres { border-color: var(--cobalt-clair); }

.preuve-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 10px;
}

.preuve-chiffre strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.preuve-apres strong { color: var(--cobalt-clair); }
.preuve-chiffre p { color: #94A3B8; font-size: 15px; margin: 0; }

.preuve-duree { color: #94A3B8; font-size: 15px; margin: 0 0 32px; }

.preuve-citation {
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--cobalt-clair);
  max-width: 44em;
}

.preuve-citation p { font-size: 19px; line-height: 1.5; margin: 0 0 12px; }
.preuve-citation footer { font-size: 15px; color: #94A3B8; }
.preuve-citation footer strong { color: var(--craie); }

/* Logo du client au-dessus du titre, passe en blanc sur la bande encre. */
.preuve-titre { margin-bottom: 4px; }
.preuve-logo {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 0 18px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.preuve-contexte { color: #94A3B8; font-size: 16px; max-width: 44em; margin: 0; }

.preuve-lien { margin: 28px 0 0; font-size: 15px; }
.preuve-lien a { color: var(--cobalt-clair); text-decoration: none; border-bottom: 1px solid #2A3A57; padding-bottom: 2px; }
.preuve-lien a:hover { border-color: var(--cobalt-clair); }

/* Facade video : une image et un bouton, l iframe YouTube ne se charge
   jamais au chargement. Le clic ouvre la lecture dans la page (video.js),
   YouTube reste le lien de secours. Aucun cookie avant le clic,
   et la page ne paie pas les 500 Ko du lecteur tant que personne ne
   regarde. */
.video-facade {
  position: relative;
  display: block;
  max-width: 720px;
  margin: 0 0 32px;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--encre-2);
  aspect-ratio: 16 / 9;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play {
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: var(--cobalt);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-play::after {
  content: "";
  position: absolute; left: 29px; top: 22px;
  border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--craie);
}
.video-facade:hover .video-play { transform: scale(1.06); background: var(--cobalt-hover); }
.video-facade:focus-visible { outline: 3px solid var(--cobalt-clair); outline-offset: 3px; }
.video-duree {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(15, 23, 42, 0.85); color: var(--craie);
  font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 6px;
}

/* ---------- Page merci (confirmation Cal.com) ---------- */

.merci-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; max-width: 46em; }
.merci-etapes li { display: flex; gap: 18px; align-items: flex-start; }
.merci-etapes h2 { font-size: 22px; color: var(--craie); margin: 4px 0 10px; }
.merci-etapes p { color: #94A3B8; font-size: 16px; margin: 0 0 12px; }
.merci-etapes a { color: var(--cobalt-clair); }
.merci-etapes .preuve-lien { margin-top: 8px; }
.merci-num {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cobalt-clair);
  color: var(--encre);
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Page clients ---------- */

/* En-tete de la page : un titre et une phrase, calés à gauche comme le reste. */
.clients-intro { padding-bottom: 40px; }
.clients-intro p { color: var(--texte-2); font-size: 18px; max-width: 40em; }

/* Le recit d un cas, sous sa bande de chiffres (.preuve). Meme regime que
   .prose, avec des sous-titres plus serres et une citation longue. */
.cas h2 { font-size: 22px; margin-top: 40px; }
.cas h2:first-of-type { margin-top: 8px; }
.cas > * { max-width: 46em; }
.cas p, .cas li { color: var(--texte-2); font-size: 16px; }
.cas ul { padding-left: 20px; margin: 0 0 16px; }
.cas li { margin-bottom: 8px; }
.cas a { color: var(--accent); }
.cas .btn { color: var(--btn-texte); }  /* le bouton ne doit pas heriter du bleu des liens */
.cas .cas-meta { font-size: 14px; margin-bottom: 8px; }

.cas-citation {
  margin: 24px 0;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--accent);
}
.cas-citation p { font-size: 17px; line-height: 1.55; color: var(--texte); margin: 0 0 10px; }
.cas-citation footer { font-size: 14px; color: var(--texte-2); }

/* Chapitres de la video : liste de timecodes, remplie au montage. */
.cas-chapitres { list-style: none; padding: 0; margin: 0 0 24px; }
.cas-chapitres li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--trait); margin: 0; }
.cas-chapitres time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); min-width: 44px; }

.cas-cta { margin-top: 40px; }

/* ---------- Reservation ---------- */

.final-cta { text-align: center; padding: 72px 0; }
.final-cta h2 { max-width: 20em; margin-left: auto; margin-right: auto; }

.anti-risque {
  font-weight: 700;
  color: var(--texte);
  max-width: 36em;
  margin: 0 auto 36px;
}

.cal-embed {
  width: 100%;
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  text-align: left;
}

.cal-secours { font-size: 14px; color: var(--texte-2); margin: 16px 0 0; }
.cal-secours a { color: var(--accent); }

/* ---------- Rappel de conversion en pied de page ---------- */

.cta-pied { text-align: center; padding: 72px 0; }
.cta-pied h2 { margin-bottom: 10px; }
.cta-pied-lead {
  color: var(--texte-2);
  max-width: 34em;
  margin: 0 auto 32px;
}

/* ---------- Pages de texte : mentions legales ---------- */

/* comme .about : .prose est pose sur .wrap, on limite les enfants pour
   garder le texte cale a gauche sous un en-tete lui aussi cale a gauche */
.prose > * { max-width: 46em; }
.prose h2 { font-size: 22px; margin-top: 40px; }
.prose h2:first-of-type { margin-top: 24px; }
.prose p, .prose li { color: var(--texte-2); font-size: 16px; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); }
.prose .maj { font-size: 14px; margin-bottom: 32px; }

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

.site-footer {
  border-top: 1px solid var(--trait);
  background: var(--fond-relief);
  padding: 32px 0;
  font-size: 14px;
}

.footer-inner { display: flex; flex-direction: column; gap: 20px; justify-content: space-between; }

.footer-brand { font-weight: 800; margin: 0 0 2px; letter-spacing: -0.01em; }
.footer-legal { color: var(--texte-2); margin: 0; }

.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait); padding-bottom: 2px; }
.footer-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Petit mobile : en-tete sur une seule ligne, CTA pleine largeur.
   60 a 70 % du trafic de prise de rendez-vous est mobile, le
   bouton doit etre atteignable au pouce sans viser.
   ============================================================ */

@media (max-width: 479px) {
  .brand-sub { display: none; }
  .header-inner { min-height: 60px; gap: 10px; }
  .header-actions .btn-sm,
  .site-header .btn-sm { padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  .brand-logo { height: 20px; }

  .hero-cta .btn,
  .cta-row .btn,
  .cta-milieu .btn,
  .cta-pied .btn { display: block; width: 100%; text-align: center; }
  .cta-row { display: block; }

  /* Le bouton etant pleine largeur, le rembourrage lateral ne sert plus a
     rien. Il reste reduit par securite : le libelle et sa fleche doivent
     tenir sur une seule ligne a 375 px, la fleche basculait seule a la
     ligne quand le libelle etait plus long. La taille du texte, elle,
     revient a celle de btn-xl, « Une heure d'audit offerte » laissant la marge
     necessaire la ou l'ancien libelle ne l'avait pas. */
  .hero-cta .btn,
  .cta-milieu .btn,
  .cta-pied .btn { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   Tablette
   ============================================================ */

@media (min-width: 700px) {
  /* a partir de la tablette, les pastilles tiennent sur une ligne et se
     dimensionnent au texte. L'intitule reste au-dessus : a cote, il
     renvoyait la troisieme pastille a la ligne dans la colonne du hero */
  .verticales-pills { width: auto; max-width: none; flex-wrap: nowrap; border-radius: 999px; }
  .vert-pill { flex: 0 0 auto; padding: 9px 16px; font-size: 15px; }
  .vert-fleche { display: inline; }

  .pains { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .preuve-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-inner { flex-direction: row; align-items: flex-end; }
  .footer-links { flex-direction: row; gap: 24px; }
}

/* ============================================================
   Desktop : marges 80 px, titres en Display, photo a droite du hero
   ============================================================ */

@media (min-width: 1000px) {
  :root { --marge: 80px; }

  .section    { padding: 96px 0; }
  .hero       { padding: 72px 0 48px; }
  .final-cta  { padding: 104px 0; }

  h1 { font-size: 58px; letter-spacing: -0.03em; }
  h2 { font-size: 34px; }

  .lead { font-size: 20px; }
  .pain-face { padding: 28px 26px 22px; }
  .figure { font-size: 24px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .about-photo { width: 64px; height: 64px; }
  .prix { padding: 32px 36px; }
  .roi { padding: 40px 44px; margin-top: 48px; }
  .roi-phrase { font-size: 31px; }

  /* en desktop le texte occupe la colonne large, la photo passe a droite ;
     dans le DOM la photo vient en premier pour rester en tete sur mobile */
  .hero-grid { grid-template-columns: 1fr 400px; gap: 56px; }
  .hero-text  { order: 1; }
  .hero-photo { order: 2; }
  .hero-photo img { width: 400px; height: 400px; border-radius: var(--rayon); border-width: 0; }
}

/* ============================================================
   Accessibilite
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .halo { animation: none; }
  * { transition: none !important; }
}

/* ---------- Fenetre de lecture des temoignages (video.js) ---------- */

/* Le clic sur une facade ouvre la video ici, sans quitter le site, avec
   le bouton d'audit juste dessous. L'iframe n'existe que pendant la
   lecture. */
.video-fenetre {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--encre);
  color: var(--craie);
  overflow: visible;
}
.video-fenetre::backdrop { background: rgba(15, 23, 42, 0.82); }
.video-cadre { aspect-ratio: 16 / 9; background: #000; border-radius: var(--rayon) var(--rayon) 0 0; overflow: hidden; }
.video-cadre iframe, .video-cadre video { width: 100%; height: 100%; border: 0; display: block; }
.video-fermer {
  position: absolute; right: 0; top: -44px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(248, 250, 252, 0.14); color: var(--craie);
  font-size: 24px; line-height: 36px; cursor: pointer;
}
.video-fermer:hover { background: rgba(248, 250, 252, 0.26); }
.video-suite {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding: 16px 20px 20px;
}
.video-suite p { margin: 0; font-size: 15px; color: #CBD5E1; }
@media (min-width: 720px) {
  .video-suite { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
}

/* ---------- Interviews clients, pleine largeur sous l'accroche ---------- */

/* Facon the-ecosystem.io : de grandes vignettes sur toute la largeur du
   site, le titre YouTube de la video dessous. Une colonne sur
   mobile, deux en tablette comme sur ordinateur : avec 4 interviews,
   2 × 2 plutot que 3 + 1 orpheline (2026-10-28). */
.interviews { padding-top: 24px; padding-bottom: 8px; }
.interviews h2 { margin: 0 0 10px; }
.interviews-lead { margin: 0 0 28px; max-width: 46em; color: var(--texte-2); font-size: 16px; line-height: 1.55; }
.interviews-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 32px 28px;
}
.interviews-grille li { display: flex; flex-direction: column; }
.interviews-grille .video-facade {
  max-width: none; margin: 0 0 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.interviews-grille .video-facade:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.26); }
.interviews-grille .video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.interviews-grille .video-play::after { left: 26px; top: 20px; border-width: 12px 0 12px 19px; }
.interview-label {
  margin: 0 0 6px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.interviews-grille h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; color: var(--texte); }
.interview-qui { margin: 0; font-size: 14px; color: var(--texte-2); }
.hero-experience { padding-top: 40px; }
@media (min-width: 720px) {
  .interviews-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .interviews { padding-top: 8px; }
}

/* lien du hero vers les interviews */
.lien-interviews {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 15px; font-weight: 700; color: var(--texte); text-decoration: none;
}
.lien-interviews:hover { color: var(--accent); }
.lien-interviews-play {
  position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); flex: none;
}
.lien-interviews-play::after {
  content: ""; position: absolute; left: 11px; top: 8px;
  border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

/* ============================================================
   Version epuree (2026-09-24)
   ============================================================ */

/* en-tete : lien Clients a cote du bouton */
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-lien { color: var(--texte); text-decoration: none; font-weight: 700; font-size: 15px; }
.header-lien:hover { color: var(--accent); }

/* legende sous la photo du hero : un nom sur le visage */
.hero-photo { margin: 0; }
.hero-photo figcaption { margin-top: 10px; font-size: 14px; color: var(--texte-2); }
.hero-photo figcaption strong { color: var(--texte); }

/* lien vers /clients sous les interviews */
.interviews-plus { margin: 20px 0 0; font-size: 16px; font-weight: 700; }
.interviews-plus a { color: var(--accent); text-decoration: none; }
.interviews-plus a:hover { text-decoration: underline; }

/* couts : trois cartes statiques, la tache, le temps, les euros */
.couts { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.cout {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cout-tache { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-2); }
.cout .figure { margin: 0; }
.cout-euros { font-size: 17px; font-weight: 700; color: var(--accent); }

/* comment ca marche en 3 etapes */
.steps-3 { margin-bottom: 32px; }

/* prix : une liste courte */
.prix-liste { margin: 0 0 16px; padding-left: 20px; color: var(--texte); font-size: 17px; }
.prix-liste li { margin-bottom: 6px; }
.prix .prix-ancre { font-size: 16px !important; font-weight: 400; color: var(--texte-2) !important; margin: 0; }

/* pour qui / pas pour qui */
.pour-qui { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pq { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 22px 24px; background: var(--fond-carte); }
.pq h3 { font-size: 18px; margin-bottom: 12px; }
.pq ul { list-style: none; margin: 0; padding: 0; }
.pq li { position: relative; padding-left: 28px; margin-bottom: 10px; color: var(--texte-2); font-size: 16px; line-height: 1.5; }
.pq li:last-child { margin-bottom: 0; }
.pq li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.pq-oui { border-left: 3px solid var(--accent); }
.pq-oui li::before { content: "✓"; color: var(--accent); }
.pq-non li::before { content: "✕"; color: var(--texte-2); }

/* qui je suis : photo avant le nom */
.about-titre { justify-content: flex-start; }

@media (max-width: 479px) {
  .header-nav { gap: 12px; }
  .header-lien { font-size: 14px; }
}

@media (min-width: 700px) {
  .couts { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pour-qui { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (min-width: 1000px) {
  .steps-3 { grid-template-columns: repeat(3, 1fr); }
  .hero-photo figcaption { font-size: 15px; }
}

/* ============================================================
   En-tete : lien À propos (2026-10-16). Le reste de la page vit
   dans /a-propos.css.
   ============================================================ */

.header-lien { white-space: nowrap; }
.header-lien[aria-current="page"] { color: var(--accent); }

/* sous 600 px : « Clients », « À propos » et le bouton tiennent a cote
   du logo si le bouton passe a « Audit » et que les ecarts se resserrent
   (2026-10-16, Thomas veut « À propos » visible sur telephone) */
@media (max-width: 599px) {
  .header-gratuit { display: none; }
  .header-nav { gap: 12px; }
  .header-lien { font-size: 14px; }
}
@media (max-width: 359px) {
  .header-nav { gap: 8px; }
  .header-lien { font-size: 13px; }
  /* « Équipe » ajoute un lien (2026-10-18) : le logo ne doit jamais s'ecraser */
  .brand { flex-shrink: 0; }
  .site-header .wrap { padding-left: 14px; padding-right: 14px; }
  .brand-logo { height: 16px; }
  .site-header .btn-sm { padding: 9px 10px; font-size: 13px; }
}

/* ============================================================
   Hero humain (2026-10-16)
   Meme grammaire que la page A propos (modele Aura) : grande photo
   en moitie d'ecran, Thomas se presente, titre en Fraunces.
   Mobile : photo en tete sur toute la largeur, texte dessous.
   ============================================================ */
.hero-humain { padding: 0; }
.hh-grid { display: grid; grid-template-columns: 1fr; }
.hh-grid > * { min-width: 0; }
.hh-photo { margin: 0; position: relative; height: 420px; overflow: hidden; }
.hh-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hh-photo figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--craie);
  font-size: 14px;
  font-weight: 700;
}
.hh-texte { padding: 36px var(--marge) 8px; }
.hh-bonjour {
  margin: 28px 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hh-titre {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.02em;
  font-size: 38px;
  line-height: 1.06;
}
.hh-puces { list-style: none; margin: 4px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hh-puces li {
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texte);
  background: var(--fond-carte);
}
.hh-histoire { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--texte); text-decoration: none; }
.hh-histoire:hover { color: var(--accent); }
.hero-suite { padding: 8px 0 0; }

@media (min-width: 700px) {
  .hh-photo { height: 560px; }
  .hh-titre { font-size: 48px; }
}

@media (min-width: 1000px) {
  .hh-grid { grid-template-columns: 1fr 1fr; min-height: min(780px, calc(100vh - 72px)); }
  .hh-photo { height: auto; min-height: 640px; }
  .hh-texte { align-self: center; padding: 72px var(--marge) 72px 72px; max-width: 700px; }
  .hh-bonjour { margin-top: 32px; }
  .hh-titre { font-size: 58px; }
  .hh-puces { margin-bottom: 36px; }
  .hero-suite { padding-top: 72px; }
}

/* ---------- Bandeau des logos clients (accueil, sous le hero) ----------
   Defilement infini en CSS pur : deux listes identiques cote a cote,
   la piste glisse de -50 % puis repart, raccord invisible.
   Sur fond encre les logos passent en silhouettes claires (les logos marine
   disparaitraient en gris), pleine opacite au survol. */
.bandeau-clients {
  padding: 40px 0 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bandeau-titre {
  margin: 0 0 22px;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.bandeau-piste {
  display: flex;
  width: max-content;
  animation: bandeau-defile 40s linear infinite;
}
.bandeau-clients:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-liste {
  display: flex;
  align-items: center;
  gap: 72px;
  margin: 0;
  padding: 0 36px;
  list-style: none;
}
.bandeau-liste img {
  display: block;
  height: 40px;
  width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.25s ease;
}
/* Node est un logo plein et massif : plus bas que les autres pour garder le meme poids visuel. */
.bandeau-liste .logo-dense img { height: 26px; }
/* Mister B et Le Q Sale (logo carre) : texte fin dans un cadre haut, agrandis pour rester lisibles. */
.bandeau-liste .logo-fin img { height: 56px; }
[data-theme="dark"] .bandeau-liste img { filter: brightness(0) invert(1) opacity(0.5); }
.bandeau-liste img:hover { filter: none; }
[data-theme="dark"] .bandeau-liste img:hover { filter: brightness(0) invert(1); }
@keyframes bandeau-defile { to { transform: translateX(-50%); } }
/* Indice discret : une petite bulle d'avis (cobalt) sur les logos qui ont une fiche,
   et une ligne sous le titre (« Cliquez sur » a la souris, « Touchez » au doigt).
   Pas d'etoile jaune : sur des logos, la connotation est malvenue (2026-11-01). */
.bandeau-clients:has([data-fiche]) .bandeau-titre { margin-bottom: 6px; }
.bandeau-astuce {
  margin: 0 0 18px;
  text-align: center;
  font-size: 0.74rem;
  color: var(--texte-2);
  opacity: 0.75;
}
.astuce-doigt { display: none; }
@media (hover: none) {
  .astuce-souris { display: none; }
  .astuce-doigt { display: inline; }
}
.astuce-bulle,
.bandeau-liste [data-fiche]::after {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7l-4 3v-3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7l-4 3v-3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.astuce-bulle { vertical-align: -1px; margin: 0 1px; }
.bandeau-liste [data-fiche] { position: relative; }
.bandeau-liste [data-fiche]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -14px;
  opacity: 0.85;
}
/* Fiche d'un logo (fiche-client.js) : placee en position fixe sous le logo
   survole, le bandeau s'arrete tant qu'elle est ouverte. */
.bandeau-liste [data-fiche] { cursor: pointer; border-radius: 6px; }
.bandeau-liste [data-fiche]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.bandeau-liste [data-fiche].fiche-active img { filter: none; }
[data-theme="dark"] .bandeau-liste [data-fiche].fiche-active img { filter: brightness(0) invert(1); }
.bandeau-clients.fiche-ouverte .bandeau-piste { animation-play-state: paused; }
.fiche-client {
  position: fixed;
  z-index: 50;
  width: min(340px, calc(100vw - 32px));
  overflow-y: auto;
  padding: 18px 20px 14px;
  background: var(--fond-carte);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
  font-size: 0.9rem;
  line-height: 1.5;
}
.fiche-client[hidden] { display: none; }
.fiche-nom { margin: 0; font-weight: 700; font-size: 1rem; }
.fiche-activite { margin: 2px 0 12px; color: var(--texte-2); font-size: 0.82rem; }
.fiche-avis { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--trait); }
.fiche-avis + .fiche-avis { margin-top: 12px; }
.fiche-avis p { margin: 0; }
.fiche-etoiles { color: #F5B301; letter-spacing: 0.12em; font-size: 0.85rem; margin-bottom: 4px !important; }
.fiche-avis footer { margin-top: 6px; color: var(--texte-2); font-size: 0.8rem; font-weight: 600; }
.fiche-source { margin: 12px 0 0; color: var(--texte-2); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* Sur ordinateur, le bandeau remonte sous le bouton du hero : 128 px de vide
   ramenes a 56 (marge du bloc bouton + 16). */
@media (min-width: 1000px) {
  .hero:has(+ .bandeau-clients) { padding-bottom: 0; }
  .bandeau-clients { padding-top: 16px; }
}
@media (max-width: 720px) {
  .bandeau-clients { padding-top: 28px; }
  .bandeau-liste { gap: 48px; padding: 0 24px; }
  .bandeau-liste img { height: 32px; }
  .bandeau-liste .logo-dense img { height: 21px; }
  .bandeau-liste .logo-fin img { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bandeau-piste { animation: none; }
}

/* ---------- Avis Google, espace du bas (2026-11-01) ----------
   Genere par build-pages.mjs depuis build/avis.json (releve chaque jour).
   Cartes en colonnes qui s'empilent : un avis long ne laisse pas de trou. */
.avis-note { margin: -4px 0 28px; color: var(--texte-2); font-size: 0.95rem; }
.avis-note strong { color: var(--texte); }
.avis-note-etoiles, .avis-etoiles, .cl-avis-etoiles { color: #F5B301; letter-spacing: 0.12em; }
.avis-note a, .avis-pied a { color: var(--accent); text-decoration: none; }
.avis-note a:hover, .avis-pied a:hover { text-decoration: underline; }
.avis-grille { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 20px; }
.avis-carte {
  break-inside: avoid;
  margin: 0 0 20px;
  padding: 20px 22px 16px;
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.avis-etoiles { margin: 0 0 10px; font-size: 0.9rem; }
.avis-carte blockquote { margin: 0; }
.avis-carte blockquote p { margin: 0 0 8px; line-height: 1.55; }
.avis-qui { margin: 14px 0 2px; font-size: 0.92rem; }
.avis-qui span { display: block; color: var(--texte-2); font-size: 0.85rem; }
.avis-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 6px 0 0; font-size: 0.78rem; color: var(--texte-2); }
.avis-pied a:first-child { color: var(--texte-2); }
.avis-video { font-weight: 600; }
.avis-video::before { content: "▶ "; font-size: 0.7em; vertical-align: 1px; }
.fiche-avis footer a { color: var(--cobalt); font-weight: 500; }
.fiche-avis footer a:hover { text-decoration: underline; }
.fiche-source a { color: inherit; text-decoration: none; }
.fiche-source a:hover { text-decoration: underline; }

/* ---------- Calculateur, sous les trois couts (2026-11-01) ----------
   calculateur.js pose les curseurs selon la verticale. Piste remplie
   jusqu'au pouce par --rempli, sans ombre (charte). */
.calcul { margin-top: 48px; }
.calcul-titre { font-size: 22px; margin: 0 0 24px; }
.calcul-grille { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.calcul-curseur { margin-bottom: 26px; }
.calcul-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.calcul-ligne label { font-weight: 700; font-size: 16px; line-height: 1.35; }
.calcul-aide { display: block; font-weight: 400; font-size: 14px; color: var(--texte-2); margin-top: 2px; }
.calcul-ligne output { font-weight: 800; font-size: 20px; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calcul input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 8px 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) 0 var(--rempli, 50%), var(--trait) var(--rempli, 50%) 100%);
}
.calcul input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blanc); border: 3px solid var(--accent);
}
.calcul input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blanc); border: 3px solid var(--accent);
}
.calcul input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.calcul-carte {
  background: var(--fond-carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 24px 26px;
  margin-bottom: 20px;
  background-image: radial-gradient(circle at 15% 0%, var(--halo), transparent 60%);
}
.calcul-carte p { margin: 0; }
.calcul-heures { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 16px !important; border-bottom: 1px solid var(--trait); color: var(--texte-2); font-size: 15px; }
.calcul-heures strong { font-size: 26px; color: var(--texte); font-variant-numeric: tabular-nums; }
.calcul-libelle { color: var(--texte-2); font-size: 15px; }
.calcul-euros { font-size: clamp(40px, 9vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--texte); font-variant-numeric: tabular-nums; margin: 4px 0 8px !important; }
.calcul-jours { font-size: 15px; color: var(--texte-2); }
.calcul-resultat .btn { margin-bottom: 14px; }

@media (min-width: 900px) {
  .calcul-grille { grid-template-columns: 1.2fr 1fr; gap: 56px; }
}

/* Carte de visite de l'entreprise en tete d'avis et de fiche (2026-11-01) :
   le logo garde ses couleurs sur une pastille claire, quel que soit le theme. */
.avis-entreprise, .fiche-entreprise {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; color: var(--texte); text-decoration: none;
}
.avis-entreprise { padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.avis-entreprise-logo, .fiche-entreprise-logo {
  flex: none; display: grid; place-items: center;
  /* largeur suit le logo : Sejour est large, le Q de Le Q Sale est carre */
  min-width: 44px; max-width: 112px; height: 44px; padding: 7px 10px;
  background: #FFFFFF; border: 1px solid var(--bordure); border-radius: 8px;
}
.avis-entreprise-logo img, .fiche-entreprise-logo img { height: 28px; width: auto; max-width: 92px; object-fit: contain; display: block; }
.avis-entreprise-ident, .fiche-entreprise-ident { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.avis-entreprise-ident strong, .fiche-entreprise-ident strong { font-size: 0.95rem; }
.avis-entreprise-ident small, .fiche-entreprise-ident small { color: var(--accent); font-size: 0.8rem; font-weight: 600; }
a.avis-entreprise:hover strong, a.fiche-entreprise:hover strong { text-decoration: underline; }
.fiche-entreprise { margin-bottom: 4px; }
.fiche-entreprise + .fiche-activite { margin-top: 6px; }