/* ------------------------------------------------------------------
   rythme.css — espacement vertical et pied de page
   Chargé APRÈS style.css et après les blocs <style> résiduels,
   donc il gagne sans avoir besoin de !important (sauf pour les
   règles d'origine qui en utilisent déjà un).

   Problème corrigé : .section-sm-title n'a qu'un margin-bottom et
   aucun margin-top. Chaque H2 se colle donc au bloc qui le précède —
   pastilles de quartiers, listes, encarts. D'où la sensation de
   contenu tassé sur les pages villes.
   ------------------------------------------------------------------ */

:root{
  --rythme-section:56px;   /* entre deux sections */
  --rythme-bloc:28px;      /* entre deux blocs d'une même section */
}

/* Un H2 ouvre une section : il lui faut de l'air au-dessus. */
h2.section-sm-title{
  margin-top:var(--rythme-section);
  margin-bottom:20px;
  line-height:1.25;
}
h2.section-sm-title:first-child{ margin-top:0; }

/* Juste après le sommaire du hero, un écart plus court suffit. */
.page-toc + h2.section-sm-title{ margin-top:32px; }

/* Hero : la ligne d'avis est passée sous le H1, elle doit s'y coller. */
.page-hero h1{ margin-bottom:10px; }
.page-hero .page-trust{ margin-bottom:20px; }
.page-hero{ padding-bottom:30px !important; }

/* Fin des grands blocs. */
.types-grid,
.pg-faq,
.urgency-box,
.page-crosslink{ margin-bottom:var(--rythme-section); }

/* Un paragraphe qui introduit des pastilles forme un bloc avec elles. */
.canton-chip{ margin-bottom:6px; }

/* Confort de lecture : pas de lignes à rallonge sur grand écran. */
.page-hero .page-lead,
.pg-faq p,
.hero-price{ max-width:64ch; }

/* Mobile : même rythme, resserré. */
@media(max-width:640px){
  :root{ --rythme-section:40px; --rythme-bloc:22px; }
  h2.section-sm-title{ font-size:1.35rem; }
  .page-hero{ padding-bottom:24px !important; }
}

/* Zones tactiles : minimum confortable sur les CTA de contact. */
.cta-contact-btn,
.page-toc a{ min-height:48px; }


/* ==================================================================
   PIED DE PAGE
   Chargé après style.css, donc ces règles gagnent sur les anciennes.
   S'applique aux 239 pages d'un coup.

   Deux défauts corrigés :

   1. Le balisage utilise <h3> pour les titres de colonnes, mais la
      feuille ne stylait que "footer h4". Résultat : les titres
      retombaient sur le style de H3 du site — Fraunces, gros, serif —
      alors qu'ils devaient être de petites étiquettes. C'est ce qui
      donnait ces énormes « À propos » et « Agences » sur mobile.

   2. Sur mobile, la grille passait en une colonne en gardant un
      écart de 32 px, sans aucune séparation. Quatre blocs flottaient
      dans le vide, sans hiérarchie ni frontière.
   ================================================================== */

footer{
  background:linear-gradient(180deg,var(--cream) 0%,var(--sage) 100%);
  border-top:1px solid var(--line);
  padding:56px 0 28px;
  margin-top:64px;
}

.footer-grid{
  grid-template-columns:1.5fr 1fr 1.1fr 1fr;
  gap:44px;
  margin-bottom:36px;
}

/* Titres de colonnes : étiquettes, pas titres de section. */
footer h3,
footer h4{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.7rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(26,56,42,0.5);
  margin:0 0 14px;
  line-height:1.3;
}

footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin:0; font-size:0.9rem; line-height:1.45; }

footer li > a{
  display:inline-block;
  padding:7px 0;
  color:var(--ink);
  text-decoration:none;
  transition:color .15s ease;
}
footer li > a:hover{ color:var(--navy); }

/* Adresses : chaque agence forme un bloc, pas deux lignes perdues. */
footer li a[href*="google.com/maps"],
footer li a[href*="share.google"]{ padding:3px 0; }
footer li + li{ margin-top:16px; }

.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 24px;
  font-size:0.8rem;
  line-height:1.5;
  opacity:1;
  color:rgba(26,56,42,0.55);
}
.footer-bottom a{ color:rgba(26,56,42,0.7); }

/* --- Mobile : une colonne, mais avec des frontières -------------- */
@media(max-width:760px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 24px; }
}
@media(max-width:560px){
  footer{ padding:40px 0 24px; margin-top:44px; }

  .footer-grid{
    display:block;
    margin-bottom:26px;
  }
  /* Un filet entre chaque bloc : la séparation remplace l'espace vide. */
  .footer-grid > div + div{
    margin-top:0;
    padding-top:22px;
    border-top:1px solid var(--line);
  }
  .footer-grid > div{ padding-bottom:22px; }
  .footer-grid > div:last-child{ padding-bottom:0; }

  footer h3,
  footer h4{ margin-bottom:10px; }

  /* Zones tactiles confortables, sans gonfler la hauteur du bloc. */
  footer li > a{ padding:9px 0; }
  footer li + li{ margin-top:6px; }

  .footer-bottom{
    display:block;
    padding-top:18px;
    font-size:0.78rem;
  }
  .footer-bottom span{ display:block; }
  .footer-bottom span + span{ margin-top:6px; }
}


/* ==================================================================
   HAUT DES PAGES VILLES / DISTRICTS / CANTONS
   Même discipline que sur l'accueil : un seul gabarit pour tout ce qui
   est cliquable, un rythme d'espacement unique, et la ligne de prix
   qui ne casse plus n'importe où.
   ================================================================== */

.page-hero .page-eyebrow{ margin-bottom:16px; }
.page-hero h1{ margin:0 0 12px; line-height:1.06; letter-spacing:-0.02em; }
.page-hero .page-trust{ margin:0 0 18px; }
.page-hero .page-lead{ margin:0 0 20px; max-width:60ch; }

/* Ligne de prix : trois niveaux clairs au lieu d'une phrase qui déborde.
   L'ancienne version enchaînait montant, lien, séparateur et second
   lien sur une seule ligne, d'où la flèche seule en bas de bloc. */
.hero-price{
  display:block;
  width:100%;
  max-width:420px;
  margin:0 0 20px;
  padding:14px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:0.95rem;
  line-height:1.5;
}
.hero-price strong{
  display:block;
  font-family:'Fraunces',serif;
  font-size:1.2rem;
  font-weight:600;
  color:var(--navy-deep);
}
.hero-price .hero-price-sub{
  display:block;
  margin-top:3px;
  font-size:0.82rem;
  color:rgba(39,71,51,0.58);
}
.hero-price .hero-price-links{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.hero-price a{
  font-size:0.84rem;
  font-weight:600;
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Colonne d'action : un seul gabarit, mêmes bords pour tout le monde. */
.page-hero .cta-cluster{
  align-items:stretch;
  width:100%;
  max-width:420px;
  gap:0;
}
.page-hero .cta-primary-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  gap:0;
}
.page-hero .cta-main-btn{
  width:100%;
  max-width:none;
  min-height:56px;
  margin:0;
  /* Vert profond, comme sur l'accueil : une seule couleur d'action
     sur tout le site. L'ambre reste réservé à la réservation express. */
  background:var(--navy-deep);
  color:#fff;
  box-shadow:0 14px 28px -12px rgba(22,75,52,0.55);
}
.page-hero .cta-contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  margin-top:12px;
}
.page-hero .cta-contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid rgba(27,85,61,0.20);
  background:rgba(255,255,255,0.75);
  color:var(--navy-deep);
  font-weight:600;
  font-size:0.9rem;
  white-space:nowrap;
}
.hero-reassure{
  max-width:420px;
  margin:14px 0 0;
  font-size:0.83rem;
  line-height:1.45;
  color:rgba(39,71,51,0.6);
}
.page-hero .page-toc{ margin-top:26px; }

@media(min-width:900px){
  .hero-price,
  .page-hero .cta-cluster,
  .hero-reassure{ max-width:460px; }
}

/* ==================================================================
   BANDEAU CTA DE BAS DE PAGE (226 pages)

   Deux vrais défauts, sur toutes les pages :

   1. CONTRASTE. .btn-primary est en vert moyen (#74BA64) avec du texte
      vert profond (#1B553D), posé sur un bandeau vert foncé. Trois
      verts empilés, et un rapport de contraste d'environ 3,3:1 — sous
      le minimum de 4,5:1. Le bouton principal était le texte le moins
      lisible de la page.

   2. ALIGNEMENT. Trois boutons de largeurs différentes en flex-wrap :
      sur mobile ils se répartissent en lignes bancales, le dernier
      isolé et décalé.
   ================================================================== */

/* Le bouton principal devient un pilier blanc : contraste maximal sur
   le vert foncé, et il redevient le seul aplat clair du bandeau. */
.cta-band .btn-primary{
  background:#fff;
  color:var(--navy-deep);
  box-shadow:0 12px 26px -12px rgba(0,0,0,0.45);
}

/* Les secondaires s'unifient en contour blanc. L'aplat WhatsApp vif
   faisait un second point focal juste à côté du principal. */
.cta-band .btn-secondary{
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,0.45) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.cta-band .btn-secondary:hover{
  background:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.75) !important;
}

/* Alignement : une colonne centrée, mêmes largeurs, sur mobile. */
.cta-band .hero-actions{
  justify-content:center;
  align-items:center;
  gap:12px;
}
@media(max-width:640px){
  .cta-band{ padding:40px 20px !important; }
  .cta-band .hero-actions{ flex-direction:column; width:100%; }
  .cta-band .hero-actions > a{
    width:100%;
    max-width:340px;
    justify-content:center;
    text-align:center;
    padding:16px 20px !important;
    font-size:1rem !important;
  }
}

/* ==================================================================
   PAGES SANS .page-hero (devis, contact, professionnels, partenariat)
   Six pages utilisent <section class="hero"> : elles échappaient aux
   règles d'alignement appliquées aux pages villes.
   ================================================================== */
.hero .cta-cluster{
  align-items:flex-start;
  width:100%;
  max-width:420px;
}
.hero .cta-main-btn{ width:100%; max-width:none; min-height:56px; }
.hero .cta-contact-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  width:100%;
  margin-top:12px;
}
@media(max-width:560px){
  .hero .cta-contact-row{ grid-template-columns:minmax(0,1fr); }
}

/* Grille des districts — page canton de Fribourg */
.districts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin:0 0 8px;
}
.district-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:18px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.district-card:hover{ background:var(--sage); border-color:rgba(27,85,61,0.3); }
.district-card .dc-nom{
  font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600;
  color:var(--navy-deep);
}
.district-card .dc-villes{ font-size:0.85rem; line-height:1.5; color:rgba(26,56,42,0.62); }
.district-card .dc-go{ margin-top:4px; font-size:0.83rem; font-weight:600; color:var(--navy); }

/* ==================================================================
   BANDEAU CTA DANS UN HERO QUI ENGLOBE TOUTE LA PAGE

   Sur les pages canton et sur plusieurs pages de service, la section
   .page-hero ne s'arrête pas après le titre : elle englobe l'ensemble
   du contenu, bandeau CTA final compris. Ma règle qui met le bouton
   principal en vert profond dans le hero s'appliquait donc aussi au
   bouton du bandeau vert foncé — vert sur vert, illisible.

   Ici le bouton s'inverse en blanc, et les deux boutons de contact
   passent en contour blanc pour ne pas créer un second point focal.
   ================================================================== */

.page-hero .cta-band .cta-main-btn,
.hero .cta-band .cta-main-btn,
.cta-band .cta-main-btn{
  background:#fff !important;
  color:var(--navy-deep) !important;
  box-shadow:0 12px 26px -12px rgba(0,0,0,0.45) !important;
}

.cta-band .cta-contact-btn,
.cta-band .cta-contact-btn.on-dark{
  background:transparent !important;
  border:1.5px solid rgba(255,255,255,0.45) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.cta-band .cta-contact-btn:hover{
  background:rgba(255,255,255,0.10) !important;
  border-color:rgba(255,255,255,0.75) !important;
}
.cta-band .cta-instant-badge,
.cta-band .cta-instant-badge.on-dark{
  background:transparent !important;
  border:1px solid rgba(255,255,255,0.28) !important;
  color:rgba(255,255,255,0.85) !important;
}

.cta-band .cta-cluster{ align-items:center; width:100%; }
.cta-band .cta-contact-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  width:100%;
  max-width:420px;
  margin-top:12px;
}
@media(max-width:640px){
  .cta-band .cta-main-btn{ width:100%; max-width:340px; }
  .cta-band .cta-contact-row{ grid-template-columns:minmax(0,1fr); max-width:340px; }
}

/* ==================================================================
   LIGNE DE PRIX À DEUX SERVICES
   « Débarras dès 59.– · déménagement dès 190.– » sur une seule ligne
   passait à la ligne au milieu d'un montant. Les deux prix sont
   maintenant empilés, chacun sur sa ligne, avec le libellé du service
   et le montant séparés.
   ================================================================== */

.hero-price strong{
  display:block;
  font-size:1.14rem;
  line-height:1.35;
  text-wrap:balance;
}
/* Deux services : un montant par ligne, séparés par un filet léger. */
.hero-price strong span{
  display:block;
  padding:3px 0;
}
.hero-price strong span + span{
  border-top:1px dashed rgba(27,85,61,0.18);
}
@media(max-width:520px){
  .hero-price{ padding:13px 14px; }
  .hero-price strong{ font-size:1.05rem; }
}

/* ==================================================================
   CONTENU APRÈS LE HERO
   La section .page-hero se ferme maintenant après le hero, et la suite
   du contenu vit dans .page-body. Le dégradé sauge marque donc l'en-tête
   au lieu de recouvrir toute la page, et les règles écrites pour le hero
   ne peuvent plus atteindre le bas de page.
   ================================================================== */

.page-body{ padding-top:8px; }
.page-body > h2:first-child,
.page-body > .section-sm-title:first-child{ margin-top:40px; }

/* === Haut de page : rail centre, respiration, bloc urgence === */
/* Un seul rail de 420 px centre pour toute la colonne d'action du hero.
   Avant : .hero-price etait cale a gauche pendant que .cta-cluster
   recevait un align-items:center inline. Les deux ne s'alignaient pas. */
.page-hero.hero-tidy .hero-price,
.page-hero.hero-tidy .cta-cluster,
.page-hero.hero-tidy .hu-card,
.page-hero.hero-tidy .hu-banner,
.page-hero.hero-tidy .hero-toc,
.page-hero.hero-tidy .hero-reassure{ max-width:420px; margin-inline:auto; }

/* Respiration : chaque bloc du hero collait au suivant. */
.page-hero.hero-tidy{ padding-top:40px !important; }
.page-hero.hero-tidy .page-eyebrow{ margin-bottom:18px; }
.page-hero.hero-tidy h1{ margin-bottom:14px; }
.page-hero.hero-tidy .page-lead{ margin-bottom:26px; }
.page-hero.hero-tidy .hero-price{ margin-bottom:26px; }
.page-hero.hero-tidy .cta-cluster{ margin-bottom:34px; }
.page-hero.hero-tidy .hu-card,
.page-hero.hero-tidy .hu-banner{ margin-bottom:34px; }
.page-hero.hero-tidy .hero-toc{ margin-bottom:34px; }

/* CTA secondaire : reservation en ligne pour les petits volumes. */
.cta-instant-cta{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:3px; width:100%; margin-top:12px; padding:14px 16px; border-radius:16px;
  background:var(--sage); border:1px solid rgba(27,85,61,0.18); text-decoration:none;
  color:var(--navy-deep); transition:background 0.2s, border-color 0.2s; }
.cta-instant-cta:hover{ background:#D6EBD1; border-color:rgba(27,85,61,0.32); }
.cta-instant-cta:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }
.cta-instant-title{ font-size:0.86rem; font-weight:700; line-height:1.35; text-wrap:balance; }
.cta-instant-flash{ margin-right:6px; }
.cta-instant-arrow{ color:var(--navy); }
.cta-instant-sub{ font-size:0.76rem; font-weight:500; line-height:1.35; color:rgba(27,85,61,0.72); }
@media(max-width:360px){ .cta-instant-title{ font-size:0.8rem; } }

/* Bloc urgence : une seule classe au lieu de 9 attributs style= en dur. */
.hu-card{ position:relative; overflow:hidden; background:linear-gradient(155deg,#FBF0EC,#F3DFD7);
  border:1px solid rgba(139,74,66,0.12); border-radius:16px; padding:20px 22px;
  box-shadow:0 10px 26px -16px rgba(139,74,66,0.25); }
.hu-card::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 280px 150px at 100% 0%,rgba(196,120,100,0.12),transparent 65%); }
.hu-head{ position:relative; display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.hu-icon{ width:34px; height:34px; border-radius:10px; background:rgba(139,74,66,0.12);
  border:1px solid rgba(139,74,66,0.2); display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; flex-shrink:0; }
.hu-title{ font-family:inherit; font-size:1rem; font-weight:700; color:var(--navy-deep);
  margin:0; line-height:1.25; scroll-margin-top:90px; }
.hu-sub{ font-size:0.82rem; font-weight:500; color:#8B4A42; margin:2px 0 0; }
.hu-card .hu-actions{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hu-card .hu-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:11px 14px; border-radius:999px; font-weight:700; font-size:0.88rem;
  text-decoration:none; }
.hu-card .hu-call{ background:#fff; border:1.5px solid #8B4A42; color:#8B4A42; }
.hu-card .hu-wa{ background:rgba(37,211,102,0.14); border:1.5px solid #25D366; color:#149A39; }
.hu-more{ position:relative; display:block; margin-top:12px; font-size:0.78rem;
  color:#8B4A42; text-decoration:underline; }
@media(max-width:400px){ .hu-card .hu-actions{ grid-template-columns:1fr; } }

/* Variante banniere cliquable (demenagement-petit-fribourg). */
.hu-banner{ position:relative; overflow:hidden; display:flex; align-items:center; gap:12px;
  background:linear-gradient(155deg,#FBF0EC,#F3DFD7); border:1px solid rgba(139,74,66,0.12);
  color:var(--navy-deep); padding:16px 22px; border-radius:16px; font-weight:700;
  text-decoration:none; box-shadow:0 10px 26px -16px rgba(139,74,66,0.25); }
.hu-banner::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 280px 150px at 100% 0%,rgba(196,120,100,0.12),transparent 65%); }
.hu-banner .hu-icon,
.hu-banner .hu-body,
.hu-banner .hu-chevron{ position:relative; }
.hu-banner .hu-body{ flex:1; }
.hu-banner .hu-title{ font-size:1rem; }
.hu-banner .hu-chevron{ font-size:1.1rem; }

/* Sommaire du hero : marge de securite a droite pour les boutons flottants. */
.hero-toc{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px;
  background:var(--sage); border-radius:14px; }
.hero-toc a{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:#fff; border:1px solid var(--line); color:var(--navy); font-weight:600;
  font-size:0.82rem; padding:9px 12px; border-radius:999px; text-decoration:none; line-height:1; }
.hero-toc .toc-primary{ grid-column:1 / -1; background:var(--navy); border-color:var(--navy); color:#fff; }
@media(max-width:600px){ .hero-toc{ padding-right:74px; } }

/* === Preuve sociale, rappel et conditions de paiement === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Avis visibles avant la bande de conversion --- */
.proof-strip{max-width:900px;margin:56px auto 0;text-align:center}
.proof-head{font-weight:700;font-size:0.92rem;color:var(--navy-deep);margin:0 0 16px}
.proof-quotes{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}
.proof-quote{margin:0;background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px}
.proof-quote blockquote{margin:0;font-size:0.9rem;line-height:1.55;color:var(--ink)}
.proof-quote blockquote::before{content:'\201C'}
.proof-quote blockquote::after{content:'\201D'}
.proof-quote figcaption{margin-top:10px;font-size:0.8rem;font-weight:600;color:var(--navy)}
.proof-more{display:inline-block;margin-top:14px;font-size:0.86rem;font-weight:600;
  color:var(--navy);text-decoration:underline}
@media(max-width:720px){.proof-quotes{grid-template-columns:1fr}}

/* --- Demande de rappel --- */
.callback-box{max-width:900px;margin:22px auto 0;background:var(--sage);
  border:1px solid rgba(27,85,61,0.18);border-radius:18px;padding:20px 22px}
.callback-intro strong{display:block;font-size:1rem;color:var(--navy-deep)}
.callback-intro span{display:block;font-size:0.86rem;color:rgba(27,85,61,0.75);margin-top:2px}
.callback-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.callback-form input[type=text],.callback-form input[type=tel]{flex:1 1 180px;min-width:0;
  min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);font:inherit;font-size:0.92rem;color:var(--ink)}
.callback-form input:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.callback-form button{flex:1 1 160px;min-height:48px;padding:12px 22px;border:0;
  border-radius:999px;background:var(--navy);color:#fff;font:inherit;font-weight:700;
  font-size:0.92rem;cursor:pointer}
.callback-form button:hover{background:var(--navy-deep)}
.callback-form button[disabled]{opacity:0.6;cursor:default}
.callback-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.callback-status{margin:12px 0 0;font-size:0.86rem;font-weight:600;display:none}
.callback-status.ok{display:block;color:var(--gold-text)}
.callback-status.ko{display:block;color:#8B4A42}
@media(max-width:480px){.callback-form input,.callback-form button{flex:1 1 100%}}

/* --- Conditions de paiement, sous la bande de conversion --- */
.cta-terms{margin:8px 0 0;font-size:0.82rem;line-height:1.5;color:rgba(255,255,255,0.62)}

/* === Conteneur du contenu et en-tete sur tablette === */
/* .page-body n'avait aucun conteneur : sur 196 pages le contenu qui suit le
   hero touchait le bord de l'ecran, alors que le hero, lui, est dans .wrap. */
.page-body{ max-width:1180px; margin-inline:auto; padding-inline:24px; }
.page-body > .wrap{ max-width:none; padding-inline:0; }
.page-body > .cta-band{ margin-inline:0; }
@media(max-width:520px){ .page-body{ padding-inline:16px; } }

/* En-tete : entre 821 et 1100 px les liens ne tenaient plus et le bouton
   "Devis sur mesure" etait coupe par le bord droit. Le menu passe en burger. */
@media(max-width:1100px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
}

/* ------------------------------------------------------------------
   accueil.css — chargé uniquement par index.html
   Deux ajouts : la bande de prix du hero, et la section tarifs.
   Le parti pris : les prix sont l'élément le plus visible de la page.
   Tout le reste reste discipliné autour.
   ------------------------------------------------------------------ */

/* --- Bande de prix dans le hero ---------------------------------- */

.hero-prices{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 22px;
  margin:0 0 26px;
  padding:14px 18px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:14px;
  backdrop-filter:blur(6px);
}
.hero-prices b{
  font-family:'Fraunces',serif;
  font-size:1.25rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
}
.hero-prices span{
  font-size:0.86rem;
  color:rgba(255,255,255,0.72);
}
.hero-prices a{
  font-size:0.84rem;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* --- Section tarifs ---------------------------------------------- */

.tarifs{ background:var(--cream); }

.tarifs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:36px;
}
@media(max-width:820px){ .tarifs-grid{ grid-template-columns:1fr; } }

.tarif-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 26px;
}
.tarif-card h3{
  font-family:'Fraunces',serif;
  font-size:1.3rem;
  color:var(--navy-deep);
  margin:0 0 4px;
}
.tarif-card > p{
  font-size:0.88rem;
  color:rgba(39,71,51,0.62);
  margin:0 0 20px;
}

.tarif-lignes{
  display:grid;
  grid-template-columns:1fr auto;
  gap:0;
}
.tarif-lignes dt,
.tarif-lignes dd{
  padding:13px 0;
  border-top:1px solid var(--line);
  margin:0;
  font-size:0.95rem;
}
.tarif-lignes dt{ color:var(--ink); }
.tarif-lignes dd{
  font-family:'Fraunces',serif;
  font-size:1.02rem;
  font-weight:600;
  color:var(--navy-deep);
  text-align:right;
  white-space:nowrap;
}

/* Les tailles rares partent sur la page du service : la carte donne
   trois repères, pas un catalogue. */
.tarif-plus{
  display:inline-block;
  margin-top:18px;
  font-size:0.87rem;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid rgba(27,85,61,0.25);
  padding-bottom:2px;
}

.tarifs-note{
  margin:26px 0 0;
  font-size:0.84rem;
  line-height:1.55;
  color:rgba(26,56,42,0.55);
  max-width:70ch;
}
.tarif-lignes dt:first-of-type,
.tarif-lignes dd:first-of-type{ border-top:none; }



.tarif-devis{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:var(--navy-deep);
  color:#fff;
  border-radius:18px;
  padding:26px 28px;
}
.tarif-devis p{ margin:0; max-width:52ch; font-size:0.98rem; color:rgba(255,255,255,0.82); }
.tarif-devis strong{ color:#fff; }
/* Sur le bandeau vert foncé, le bouton s'inverse : vert sur vert
   aurait été invisible. */
.tarif-devis .cta-main-btn{
  flex-shrink:0;
  background:#fff;
  color:var(--navy-deep);
  box-shadow:0 14px 28px -14px rgba(0,0,0,0.5);
}

/* --- Barre d'action collante (mobile) ---------------------------- */

.action-bar{ display:none; }
@media(max-width:720px){
  .action-bar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    display:flex;
    gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    transform:translateY(110%);
    transition:transform .25s ease;
  }
  .action-bar.is-visible{ transform:translateY(0); }
  .action-bar a{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    border-radius:999px;
    font-weight:700;
    font-size:0.94rem;
    text-decoration:none;
  }
  .action-bar .ab-primary{
    background:linear-gradient(135deg,var(--gold-light),var(--gold));
    color:var(--navy-deep);
    flex:1.6;
  }
  .action-bar .ab-wa{
    background:#25D366;
    color:#fff;
    flex:0 0 96px;
  }
  body{ padding-bottom:72px; }

  /* Une seule zone d'action en bas de l'écran.
     Quand la barre est là, les pastilles WhatsApp et téléphone font
     doublon : on les retire. Seul l'assistant reste, remonté au-dessus
     de la barre. L'infobulle de l'assistant est masquée, elle passait
     par-dessus le bouton principal. */
  body.bar-on .fab-whatsapp,
  body.bar-on .fab-phone{ display:none; }
  body.bar-on .side-fab{ bottom:84px; }
  body.bar-on .ai-hint{ display:none; }
}


/* --- Hero, fond sauge clair (variante C) --------------------------
   Le fond passe en clair : le texte redevient vert profond, la photo
   n'est plus voilée, et le bouton principal devient le seul aplat
   saturé de l'écran. C'est lui qui capte le regard, pas le fond.
   ------------------------------------------------------------------ */

.hero-split{
  background:
    radial-gradient(ellipse 680px 400px at 92% 0%,rgba(212,186,116,0.20),transparent 64%),
    linear-gradient(160deg,#EFF7ED 0%,#E2F1DE 100%);
  padding:52px 0 58px;
  color:var(--ink);
}
.hero-split-inner{
  display:grid;
  grid-template-columns:1.02fr 0.98fr;
  align-items:center;
  gap:52px;
}
@media(max-width:900px){
  .hero-split{ padding:32px 0 38px; }
  .hero-split-inner{ grid-template-columns:1fr; gap:24px; }
}

.hero-split h1{
  font-size:clamp(2.3rem,5.4vw,3.7rem);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-0.025em;
  text-wrap:balance;
  color:var(--navy-deep);
  margin:0 0 14px;
}
@media(max-width:900px){
  .hero-split h1{ font-size:clamp(2.1rem,7.6vw,2.9rem); letter-spacing:-0.02em; }
}
.hero-split .lead{
  font-size:1.04rem;
  line-height:1.6;
  color:rgba(26,56,42,0.72);
  max-width:46ch;
  margin:0 0 22px;
}
.hero-split .eyebrow{
  background:rgba(27,85,61,0.07);
  border:1px solid rgba(27,85,61,0.15);
  color:var(--navy-deep);
}

/* Preuve sous le titre. */
.hero-rating{
  display:inline-flex; align-items:center; gap:9px;
  font-size:0.9rem; color:rgba(26,56,42,0.72);
  text-decoration:none; margin:0 0 18px;
}
.hero-rating .stars{ color:#B8912F; letter-spacing:1px; }
.hero-rating u{ text-decoration:none; border-bottom:1px solid rgba(27,85,61,0.22); }

/* --- Colonne d'action ---------------------------------------------
   Un seul gabarit pour tout ce qui est cliquable : 420 px. Le bouton,
   la carte de réservation et les deux boutons de contact partagent
   exactement le même bord gauche ET le même bord droit. C'est ce qui
   manquait : .cta-cluster imposait une largeur de 360 px au bouton et
   laissait les autres éléments en pleine largeur, d'où l'alignement
   en escalier.
   ------------------------------------------------------------------ */

.hero-stack{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  width:100%;
  max-width:420px;
}

/* Bande de prix : même gabarit, elle forme un bloc avec les actions. */
.hero-prices{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:4px 20px;
  width:100%; max-width:420px;
  margin:0 0 20px; padding:14px 18px;
  background:var(--white);
  border:1px solid rgba(27,85,61,0.13);
  border-radius:14px;
}
.hero-prices b{
  font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600;
  color:var(--navy-deep); white-space:nowrap;
}
.hero-prices span{ flex:1 0 100%; font-size:0.83rem; color:rgba(26,56,42,0.58); }
.hero-prices a{
  flex:1 0 100%;
  font-size:0.83rem; color:var(--navy);
  text-decoration:underline; text-underline-offset:3px;
}

/* CTA principal : vert profond plein. Sur fond clair, c'est le seul
   aplat saturé de l'écran, donc le point de fuite du regard. */
.hero-stack .cta-main-btn{
  background:var(--navy-deep);
  color:#fff;
  border:none;
  box-shadow:0 14px 28px -12px rgba(22,75,52,0.55);
}
.hero-stack .cta-main-btn{
  width:100%;
  max-width:none;
  min-height:56px;
  margin:0;
}
.hero-stack .cta-main-btn:hover{ background:#12402C; }

.hero-services{
  align-self:flex-start;
  margin-top:12px;
  font-size:0.9rem;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid rgba(27,85,61,0.28);
  padding-bottom:2px;
}
.hero-services span{ margin-left:4px; }

.hero-note{
  font-size:0.82rem;
  line-height:1.45;
  margin:10px 0 0;
  color:rgba(26,56,42,0.58);
}

/* Réservation express : deuxième action, distincte du devis sur mesure.
   Ici on ne demande pas un prix, on bloque une date. Forme différente
   (carte, pas pilule) et accent ambre, pour ne pas concurrencer le vert. */
.hero-book{
  display:flex; align-items:center; gap:14px;
  width:100%;
  margin:18px 0 0;
  padding:14px 16px;
  background:var(--white);
  border:1px solid rgba(240,169,78,0.45);
  border-left:4px solid var(--cta-accent,#F0A94E);
  border-radius:14px;
  text-decoration:none;
}
.hero-book .bolt{
  flex:0 0 34px; height:34px; border-radius:10px;
  background:rgba(240,169,78,0.16);
  display:flex; align-items:center; justify-content:center;
  color:#B87415;
}
.hero-book .txt{ flex:1; min-width:0; }
.hero-book .t1{
  display:block; font-weight:700; font-size:0.96rem;
  color:var(--navy-deep); line-height:1.3;
}
.hero-book .t2{
  display:block; font-size:0.81rem; line-height:1.45;
  color:rgba(26,56,42,0.62); margin-top:3px;
}
.hero-book .go{ flex:0 0 auto; color:#B87415; font-weight:700; }

/* --- Bloc contact -------------------------------------------------
   Il était réduit à deux pilules discrètes en bas de pile. Or « on
   décroche 24h/24 » est un argument que presque aucun concurrent
   romand ne tient : il méritait d'être écrit, pas seulement suggéré.
   Le bloc devient une carte à part entière, avec son étiquette.
   ------------------------------------------------------------------ */

.hero-contact{
  width:100%;
  margin:16px 0 0;
  padding:14px 16px 16px;
  background:var(--white);
  border:1px solid rgba(27,85,61,0.16);
  border-radius:16px;
}
.hero-contact-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 12px;
  font-size:0.8rem;
  line-height:1.4;
  text-align:center;
  color:rgba(26,56,42,0.66);
}
.hero-contact-label .dot{
  flex:0 0 8px; width:8px; height:8px; border-radius:50%;
  background:#3FBF63;
  box-shadow:0 0 0 3px rgba(63,191,99,0.20);
}

.hero-split .hero-contact-card{
  /* Neutralise le fond sombre et le flou hérités du hero d'origine. */
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  max-width:none;
  display:grid;
  /* minmax(0,1fr) et non 1fr : sinon chaque colonne refuse de passer
     sous la largeur de son contenu, et « 079 894 49 26 » fait déborder
     toute la page horizontalement. */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  width:100%;
  margin:0;
  padding:0;
  background:none;
  border:none;
}

/* Deux boutons de même poids visuel. L'ancienne version mettait
   « 079 894 49 26 » face à « WhatsApp » : treize caractères contre
   huit, sur une seule ligne. Le déséquilibre venait de là, pas de la
   couleur. Chacun porte maintenant deux lignes — le canal au-dessus,
   la valeur en dessous — donc la même masse à l'écran. */
.hero-split .hero-contact-card a{
  display:flex;
  /* L'ancienne feuille impose flex-direction:column à ces liens, pour
     le hero sombre d'origine. Sans redéclaration, l'icône restait
     empilée au-dessus du texte, tout centré. */
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:11px;
  min-width:0;
  min-height:60px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(27,85,61,0.18);
  background:var(--white);
  color:var(--navy-deep);
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.hero-split .hero-contact-card a:hover{
  background:var(--sage);
  border-color:rgba(27,85,61,0.32);
}

.hero-split .hero-contact-card .ico{
  flex:0 0 36px; height:36px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(27,85,61,0.08);
  color:var(--navy-deep);
}
/* Seule l'icône porte le vert WhatsApp : la marque est reconnue sans
   qu'un aplat vif vienne concurrencer le bouton principal. */
.hero-split .hero-contact-card .wa .ico{
  background:rgba(37,211,102,0.14);
  color:#128C4A;
}

.hero-split .hero-contact-card .txt{
  display:flex; flex-direction:column; min-width:0;
}
.hero-split .hero-contact-card small{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.63rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:rgba(26,56,42,0.5);
  line-height:1.3;
}
.hero-split .hero-contact-card b{
  font-size:0.97rem;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Sous 560 px, on empile : « 079 894 49 26 » et « Photos & devis »
   côte à côte obligeaient à tronquer les deux libellés. */
@media(max-width:560px){
  .hero-split .hero-contact-card{ grid-template-columns:minmax(0,1fr); }
  .hero-split .hero-contact-card a{ min-height:56px; }
}

@media(max-width:900px){
  .hero-stack,
  .hero-prices{ max-width:none; }
}

/* --- La photo, plein cadre, sans voile ---------------------------- */

.hero-shot{
  margin:0; position:relative;
  border-radius:20px; overflow:hidden;
  box-shadow:0 28px 56px -30px rgba(22,75,52,0.55);
}
.hero-shot img{
  display:block; width:100%; height:100%;
  max-height:470px; object-fit:cover; object-position:center 42%;
}
@media(max-width:900px){
  .hero-shot img{ max-height:220px; object-position:center 46%; }
  .hero-shot{ order:2; }
  .hero-copy{ order:1; }
  .hero-book{ margin-top:18px; }
}

/* Variante avant/après : deux volets dans le même cadre. */
.hero-shot.is-ba{ display:grid; grid-template-columns:1fr 1fr; gap:3px; background:rgba(27,85,61,0.18); }
.hero-shot.is-ba figure{ margin:0; position:relative; overflow:hidden; }
.hero-shot.is-ba img{ max-height:470px; object-position:center 55%; }
.hero-shot.is-ba figcaption{
  position:absolute; left:10px; bottom:10px;
  font-family:'IBM Plex Mono',monospace; font-size:0.66rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#fff;
  background:rgba(18,50,31,0.78); padding:5px 10px; border-radius:999px;
}
@media(max-width:900px){ .hero-shot.is-ba img{ max-height:200px; } }

/* --- Titres de section -------------------------------------------
   Les H2 faisaient à peine plus que du gras. Ils portent maintenant
   la même échelle que le H1, en plus petit : même graisse, même
   resserrement, même équilibrage des lignes. Un titre de section doit
   se voir depuis le bas de l'écran précédent.
   ------------------------------------------------------------------ */

.section h2,
.tarifs h2{
  font-size:clamp(1.95rem,4vw,2.75rem);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-0.02em;
  text-wrap:balance;
  max-width:20ch;
  color:var(--navy-deep);
  margin:0 0 14px;
}
.tarifs h2{ max-width:24ch; }

/* Exception : les bandeaux sur fond vert foncé. La règle ci-dessus
   imposait du vert profond sur du vert profond — titre illisible.
   Le texte y reste blanc, et le titre est centré comme le bandeau. */
.cta-band h2,
.section--dark h2{
  color:#fff;
  max-width:22ch;
  margin-left:auto;
  margin-right:auto;
}

/* --- Bande de preuve ----------------------------------------------
   Remplace deux blocs empilés (bandeau blanc à coches + bandeau vert
   à chiffres) par une seule bande. Deux blocs pleine largeur qui se
   suivent hachaient la page juste après le hero, au moment précis où
   le visiteur décide s'il continue.

   Structure sémantique : <ul> pour les arguments, <dl> pour les
   chiffres, et un <h2> masqué visuellement pour que la section existe
   dans le plan du document. Chaque élément est un lien interne, ce qui
   nourrit le maillage vers devis, nettoyage, zones et avis.
   ------------------------------------------------------------------ */

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

.preuve{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:38px 0 34px;
}

/* Les garanties : trois colonnes parallèles, séparées par un filet.
   Le filet encode l'information — trois engagements de même rang —
   là où une pastille à coche n'était que décorative. */
.preuve-args{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.preuve-args li{ padding:0 26px; border-left:1px solid var(--line); }
.preuve-args li:first-child{ padding-left:0; border-left:none; }
.preuve-args li:last-child{ padding-right:0; }
.preuve-args a{ display:block; text-decoration:none; color:inherit; }
.preuve-args .tick{ display:none; }
.preuve-args b{
  display:block;
  font-family:'Fraunces',serif;
  font-size:1.08rem;
  font-weight:600;
  line-height:1.25;
  color:var(--navy-deep);
  margin-bottom:6px;
}
.preuve-args a > span:last-child{
  display:block;
  font-size:0.88rem;
  line-height:1.55;
  color:rgba(26,56,42,0.64);
}

/* Les chiffres : c'est ici que passe l'audace. Grands, en Fraunces,
   séparés par des filets verticaux, alignés sur la ligne de base. */
.preuve-chiffres{
  margin:0;
  padding:26px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.preuve-chiffres > div{ padding:0 24px; border-left:1px solid var(--line); }
.preuve-chiffres > div:first-child{ padding-left:0; border-left:none; }
.preuve-chiffres a{ text-decoration:none; color:inherit; display:block; }
.preuve-chiffres dt{
  font-family:'Fraunces',serif;
  font-size:clamp(2.1rem,3.4vw,2.9rem);
  font-weight:600;
  line-height:0.98;
  letter-spacing:-0.02em;
  color:var(--navy-deep);
  margin:0 0 8px;
}
.preuve-chiffres dt i{ font-style:normal; font-size:0.42em; opacity:.5; }
.preuve-chiffres dd{
  margin:0;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.67rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  line-height:1.45;
  color:rgba(26,56,42,0.5);
}

@media(max-width:820px){
  .preuve{ padding:28px 0 26px; }
  .preuve-args{ grid-template-columns:1fr; }
  .preuve-args li{
    padding:14px 0; border-left:none;
    border-top:1px solid var(--line);
  }
  .preuve-args li:first-child{ padding-top:0; border-top:none; }
  .preuve-chiffres{ grid-template-columns:1fr 1fr; gap:22px 0; padding-top:22px; }
  .preuve-chiffres > div{ padding:0 18px; }
  .preuve-chiffres > div:nth-child(odd){ padding-left:0; border-left:none; }
}

/* --- Pastilles flottantes -----------------------------------------
   Sur mobile, WhatsApp et téléphone sont déjà dans le hero, puis dans
   la barre d'action. Les garder en pastilles faisait trois fois la
   même chose à l'écran. Seul l'assistant reste.
   ------------------------------------------------------------------ */
@media(max-width:720px){
  .fab-whatsapp,
  .fab-phone{ display:none !important; }
  .ai-hint{ display:none !important; }
  body.bar-on .side-fab{ bottom:84px; }
}

/* --- Baseline environnementale sous le hero -----------------------
   Le hero prouve le résultat, cette ligne dit ce qu'il en coûte à la
   planète. Placée en bas de section, sur la même largeur que le
   contenu : elle referme le hero au lieu de flotter entre deux blocs.
   ------------------------------------------------------------------ */
.hero-baseline{
  max-width:1180px;
  margin:34px auto 0;
  padding:16px 24px 0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-top:1px solid rgba(27,85,61,0.14);
  font-size:0.92rem;
  line-height:1.55;
  color:rgba(26,56,42,0.7);
}
.hero-baseline > span{ flex:1; min-width:0; max-width:78ch; }
.hero-baseline strong{ color:var(--navy-deep); font-weight:600; }
.hero-baseline .leaf{
  flex:0 0 auto;
  margin-top:2px;
  color:var(--gold-text,#418734);
}
@media(max-width:900px){
  .hero-baseline{ margin-top:24px; font-size:0.88rem; }
}

/* Avant/après : deux volets dans un seul cadre. */
.hero-shot.is-ba{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  background:rgba(27,85,61,0.16);
}
.hero-shot.is-ba figure{ margin:0; position:relative; overflow:hidden; }
.hero-shot.is-ba img{
  display:block; width:100%; height:100%;
  max-height:470px; object-fit:cover; object-position:center 45%;
}
.hero-shot.is-ba figcaption{
  position:absolute; left:10px; bottom:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; background:rgba(18,50,31,0.82);
  padding:5px 11px; border-radius:999px;
}
@media(max-width:900px){
  .hero-shot.is-ba img{ max-height:250px; }
}

/* Garde-fou : aucun élément du hero ne doit pouvoir élargir la page.
   Un seul débordement horizontal décale toute la mise en page vers la
   gauche, et c'est invisible tant qu'on ne teste pas sur un vrai
   téléphone. */
.hero-split,
.hero-split-inner,
.hero-copy,
.hero-stack,
.hero-contact,
.hero-baseline{ min-width:0; max-width:100%; }
.hero-split *{ box-sizing:border-box; }