/*
Theme Name: KAM Serrurier
Theme URI: https://kam-serrurier.fr
Author: KAM Serrurier
Description: Theme bloc sur mesure pour KAM Serrurier, artisan serrurier a Collegien (77). Construit depuis une maquette HTML, 100 % editable dans Gutenberg.
Version: 1.10.16
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kam-serrurier
Tags: block-theme, full-site-editing, business, one-column
*/
/* ------------------------------------------------------------------
   KAM SERRURIER — maquette phase 2
   Registre : relevé sur la référence (reference/releve.md)
   Marque   : couleurs relevées sur kam-serrurier.fr (--kam-red etc.)
   ------------------------------------------------------------------ */

:root {
  /* couleur de marque, relevee sur le site existant : hsl(348 83% 47%) */
  --rouge:       #db143c;
  --rouge-fonce: #b30e30;
  --blanc:       #ffffff;
  --casse:       #f8f8f8;
  --anthracite:  #484848;
  --encre:       #141414;
  --gris:        #a9a9a9;
  --gris-texte:  #666666;
  --trait:       #e8e8e8;

  --sans: 'Lato', -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Playfair Display', Georgia, serif;

  --conteneur: 1170px;
  --entete: 96px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font: 400 15px/1.9 var(--sans);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin: 0 auto;
  padding: 0 24px;
}

.titre-section {
  font: 900 28px/1.2 var(--sans);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--encre);
  hyphens: none;
  text-wrap: balance;
}

.sur-titre {
  font: 400 14px/1.6 var(--sans);
  color: var(--rouge);
  margin-top: 8px;
}

/* Substitution n° 2 : les trois tirets etaient trois <i> vides.
   Un seul pseudo-element les dessine en degrade, sans balisage. */
.av-tirets::after {
  content: '';
  display: block;
  margin-top: 14px;
  height: 3px;
  width: 30px;
  background:
    linear-gradient(90deg,
      var(--rouge) 0 14px,
      transparent 14px 19px,
      var(--trait) 19px 26px,
      transparent 26px 31px,
      var(--trait) 31px 35px);
}

.av-tirets.centre::after { margin-inline: auto; }

/* ============================ EN-TETE ============================ */

.entete {
  height: var(--entete);
  background: var(--blanc);
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 20;
}

.entete .conteneur {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}

.logo img { width: 46px; height: auto; }

.logo-texte { display: flex; flex-direction: column; gap: 3px; }

.logo-nom {
  font: 900 18px/1 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
}

.logo-nom em { font-style: normal; color: var(--rouge); }

.logo-sous {
  font: 400 9px/1 var(--sans);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.nav { display: flex; align-items: stretch; margin-left: auto; }

.nav a {
  display: flex;
  align-items: center;
  padding: 0 17px;
  font: 700 12px/1 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--encre);
  transition: color .15s;
}

.nav a:hover { color: var(--rouge); }

/* element actif : bloc rouge pleine hauteur, angles francs */
.nav a.actif { background: var(--rouge); color: var(--blanc); }
.nav a.actif:hover { color: var(--blanc); }

.entete-droite { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

.tel-entete {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 900 18px/1 var(--sans);
  letter-spacing: .4px;
  color: var(--rouge);
  white-space: nowrap;
}

/* Substitution n° 1 : icone SVG inline -> masque CSS.
   Le masque suit currentColor, donc l'icone passe au blanc avec le texte
   quand le bloc devient rouge en mobile. */
.tel-entete::before {
  content: '';
  flex: 0 0 auto;
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: var(--i-tel);
  mask-image: var(--i-tel);
}

:root {
  --i-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.4 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --i-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3z'/%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.2-.4-4.5-1.3l-.3-.2-3 .9.9-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2z'/%3E%3C/svg%3E");
  --i-maps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  --i-cle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Cpath d='M11 12h10M17 12v3'/%3E%3C/svg%3E");
  --i-whatsapp-blanc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.3z'/%3E%3Cpath d='M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.5A10 10 0 1 0 12 2zm0 18.2c-1.6 0-3.2-.4-4.5-1.3l-.3-.2-3 .9.9-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2z'/%3E%3C/svg%3E");
}

.reseaux { display: flex; gap: 8px; }

.reseaux a {
  width: 30px; height: 30px;
  border: 1px solid var(--rouge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--rouge);
  transition: background .15s, color .15s;
}

.reseaux a::before {
  content: '';
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

/* la classe est portee par le core/paragraph, le cercle par le lien */
.reseaux p { margin: 0; }
.reseaux .r-instagram a::before { -webkit-mask-image: var(--i-instagram); mask-image: var(--i-instagram); }
.reseaux .r-whatsapp a::before  { -webkit-mask-image: var(--i-whatsapp);  mask-image: var(--i-whatsapp); }
.reseaux .r-maps a::before      { -webkit-mask-image: var(--i-maps);      mask-image: var(--i-maps); }

.reseaux .plein a { background: var(--rouge); color: var(--blanc); }
.reseaux a:hover { background: var(--rouge); color: var(--blanc); }

/* ============================= HERO ============================= */

.hero {
  position: relative;
  height: 900px;
  overflow: hidden;
  background: var(--encre);
}

/* core/image pose la classe sur la FIGURE, jamais sur l'img (piege n° 1 de
   blocs-gutenberg.md). Le cadrage vise donc .hero-photo img. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 1;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 52%;
  transform: scale(1.04);
  filter: contrast(1.05) saturate(1.02);
}

/* Substitution n° 5 : la couche decorative devient un pseudo-element.
   Un <div> vide serait un bloc vide dans l'editeur — le client le
   selectionne, ne comprend pas ce que c'est, et le supprime. */
.hero::before,
.hero-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg,
      rgba(8,8,8,.86) 0%,
      rgba(8,8,8,.70) 28%,
      rgba(8,8,8,.34) 54%,
      rgba(8,8,8,.04) 78%),
    linear-gradient(0deg, rgba(8,8,8,.32) 0%, rgba(8,8,8,0) 38%);
}

.hero .conteneur {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-texte { max-width: 760px; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 8px 15px;
  background: var(--rouge);
  color: var(--blanc);
  font: 900 11px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* la pastille etait un <i> vide : pseudo-element */
.etiquette::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blanc);
  display: block;
}

.hero h1 {
  font: 700 italic 56px/1.14 var(--serif);
  color: var(--blanc);
  letter-spacing: -.2px;
  hyphens: none;
  text-wrap: balance;
}

.hero p {
  margin-top: 24px;
  max-width: 460px;
  font: 400 15px/1.95 var(--sans);
  color: rgba(255,255,255,.88);
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ------------------------------- BOUTONS -------------------------------
   core/button pose la classe sur le CONTENEUR div.wp-block-button, pas sur
   le lien. Le conteneur doit donc etre neutralise, sinon il herite des
   regles ecrites pour la maquette et double la pastille.
   ----------------------------------------------------------------------- */

.wp-block-button[class*="b-"] {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.wp-block-button[class*="b-"]::after { content: none; }

.wp-block-button[class*="b-"] .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--rouge);
  color: var(--blanc);
  font: 900 12px/1 var(--sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0;
  transition: background .15s;
}

.wp-block-button.b-plein .wp-block-button__link:hover { background: var(--rouge-fonce); }

/* le pictogramme telephone du bouton d'appel */
.wp-block-button.b-tel .wp-block-button__link::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: var(--i-tel);
  mask-image: var(--i-tel);
}

.wp-block-button.b-ligne .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: var(--blanc);
}

.wp-block-button.b-ligne .wp-block-button__link:hover { background: rgba(255,255,255,.12); }

.wp-block-button.b-sombre .wp-block-button__link { background: var(--encre); }
.wp-block-button.b-sombre .wp-block-button__link:hover { background: #2b2b2b; }

.wp-block-button.b-ligne-sombre .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--encre);
  color: var(--encre);
}

.wp-block-button.b-ligne-sombre .wp-block-button__link:hover { background: var(--encre); color: var(--blanc); }

/* Les fleches et les puces du carrousel ont ete retirees en phase 4.
   La reference les a parce qu'elle a un diaporama ; ici il n'y a qu'une
   seule vue. Livrer des commandes qui ne commandent rien est un defaut,
   pas une fidelite. A remettre le jour ou un vrai diaporama existe. */

/* ======================= QUI SOMMES NOUS ======================= */

.presentation {
  background: var(--blanc);
  padding: 74px 0 70px;
  text-align: center;
}

.citation {
  position: relative;
  max-width: 800px;
  margin: 44px auto 0;
  padding: 0 58px;
}

.citation p {
  font: 400 italic 16px/2.1 var(--serif);
  color: #4a4a4a;
}

.citation p + p { margin-top: 18px; }

/* Substitution n° 5 : les guillemets etaient deux <span> vides. */
.citation::before,
.citation::after {
  position: absolute;
  top: 2px;
  font: 900 30px/1 var(--serif);
  color: var(--rouge);
}

.citation::before { content: '\201C'; left: 0; }
.citation::after  { content: '\201D'; right: 0; }

.mentions {
  margin-top: 38px;
  font: 700 13px/1.8 var(--sans);
  letter-spacing: .6px;
  color: var(--gris-texte);
  text-transform: uppercase;
}

.mentions span { color: var(--encre); }

/* ========================= TROIS METIERS ========================= */

.metiers { background: var(--casse); padding: 76px 0 84px; }

.grille-metiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  text-align: center;
}

/* Substitution n° 1 : les tuiles d'icones etaient des <div> contenant un
   SVG inline. Un SVG ne porte aucune information editable et n'est pas un
   bloc natif : la tuile devient un pseudo-element, le pictogramme un
   fond SVG en data-URI. */
.metier::before {
  content: '';
  display: block;
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  background-color: var(--rouge);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  border-radius: 3px;
}

.metier-porte::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M2 21h18'/%3E%3Ccircle cx='12.6' cy='12.4' r='1.1' fill='%23fff'/%3E%3C/svg%3E");
}

.metier-cylindre::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='12' r='4.5'/%3E%3Ccircle cx='7.5' cy='12' r='1.3' fill='%23fff'/%3E%3Cpath d='M12 12h9'/%3E%3Cpath d='M17 12v3.6M20.4 12v2.6'/%3E%3C/svg%3E");
}

.metier-blindage::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 4 6v6.1c0 4.6 3.3 8.3 8 9.3 4.7-1 8-4.7 8-9.3V6z'/%3E%3Cpath d='m8.8 12 2.3 2.3 4.1-4.4'/%3E%3C/svg%3E");
}

.metier h3 {
  font: 900 15px/1.5 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--encre);
}

.metier p {
  margin-top: 14px;
  font: 400 14px/1.95 var(--sans);
  color: var(--gris-texte);
}

/* En blocs, ce libelle est un core/paragraph et non plus un <span> : il
   tombe donc sous .metier p, plus specifique que .depuis. On qualifie.
   Sans cela : 14px/1.95 au lieu de 13px/1, soit +8 px par metier. */
.metier .depuis {
  display: inline-block;
  margin-top: 14px;
  font: 900 13px/1 var(--sans);
  letter-spacing: .5px;
  color: var(--rouge);
}

/* =========================== GALERIE =========================== */

.galerie { background: var(--anthracite); position: relative; }

.bande-galerie {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.vue { position: relative; aspect-ratio: 287 / 381; overflow: hidden; }
.vue img { width: 100%; height: 100%; object-fit: cover; }

/* La legende est la caption native de core/image : editable sous l'image
   dans Gutenberg, superposee sur le site. */
.vue figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 28px 22px 18px;
  background: linear-gradient(0deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,0) 100%);
  color: var(--blanc);
  font: 900 13px/1.5 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: left;
}

/* ========================= NOS SERVICES ========================= */

.services { background: var(--blanc); padding: 94px 0 100px; }

.grille-services {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 72px;
  margin-top: 46px;
  align-items: start;
}

/* Chaque ligne est un core/group : titre + description + prix, tous
   editables. Le <li> de la maquette portait un SVG, un <b> et un <small>,
   trois elements qu'aucun bloc natif ne sait produire. */
.service-ligne {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}

.liste-services > .service-ligne:first-child { padding-top: 0; }

.service-ligne::before {
  content: '';
  grid-column: 1;
  grid-row: 1 / 3;
  width: 16px; height: 16px;
  background: var(--rouge);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: var(--i-cle);
  mask-image: var(--i-cle);
}

.service-nom {
  grid-column: 2; grid-row: 1;
  font: 700 15px/1.5 var(--sans);
  color: var(--encre);
  text-transform: none;
  letter-spacing: 0;
}

.service-desc {
  grid-column: 2; grid-row: 2;
  font: 400 13px/1.7 var(--sans);
  color: var(--gris-texte);
}

.prix {
  grid-column: 3; grid-row: 1 / 3;
  align-self: center;
  font: 900 13px/1 var(--sans);
  letter-spacing: .4px;
  color: var(--rouge);
  white-space: nowrap;
}

.prix.gratuit { color: var(--gris-texte); font-weight: 700; }

/* photos de chantier : prises au telephone, donc en portrait.
   Recadrees en paysage pour tenir le rythme vertical de la reference. */
.objet { width: 100%; margin: 0 0 28px; }

.objet img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
}

.intitule-rouge {
  font: 900 15px/1.5 var(--sans);
  letter-spacing: .5px;
  color: var(--rouge);
}

.colonne-droite > p {
  margin-top: 14px;
  font: 400 14px/2.05 var(--sans);
  color: var(--gris-texte);
}

/* ============================ ZONES ============================ */

.zones { background: var(--casse); padding: 78px 0 86px; text-align: center; }

.grille-zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 44px;
  text-align: left;
}

.dept h3 {
  font: 900 14px/1 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--encre);
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rouge);
}

.villes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.villes li {
  padding: 7px 13px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  font: 400 13px/1.4 var(--sans);
  color: #3f3f3f;
}

/* la commune de base est la premiere de la liste : pas de classe sur un
   core/list-item, donc selection par position */
.villes li:first-child {
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--blanc);
  font-weight: 700;
}

/* la liste du 94 n'a pas de commune de base : on annule la mise en avant */
.villes-94 li:first-child {
  background: var(--blanc);
  border-color: var(--trait);
  color: #3f3f3f;
  font-weight: 400;
}

.hors-zone {
  margin-top: 40px;
  font: 400 14px/1.9 var(--sans);
  color: var(--gris-texte);
}

.hors-zone a { color: var(--rouge); font-weight: 700; }

/* ===================== EN-TETE DES PAGES INTERNES ===================== */

.hero-page {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--encre);
  display: flex;
  align-items: center;
}

.hero-page .hero-photo img { object-position: 50% 45%; transform: none; }

.hero-page .conteneur { position: relative; z-index: 3; }

.fil {
  font: 700 11px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 20px;
}

.fil a { color: var(--blanc); }
.fil a:hover { color: var(--rouge); }

.hero-page h1 {
  font: 700 italic 46px/1.16 var(--serif);
  color: var(--blanc);
  hyphens: none;
  text-wrap: balance;
}

.chapo {
  margin-top: 20px;
  max-width: 560px;
  font: 400 15px/1.9 var(--sans);
  color: rgba(255,255,255,.86);
}

.vers-page { margin-top: 44px; text-align: center; }

.vers-page a {
  font: 900 13px/1 var(--sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--rouge);
}

.vers-page a:hover { color: var(--rouge-fonce); }

.titre-suite { margin-top: 76px; }

/* ===================== PAGE SERVICES ===================== */

.prestations { background: var(--blanc); padding: 90px 0 30px; }

.presta {
  display: grid;
  grid-template-columns: 470px 1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 76px;
  margin-bottom: 76px;
  border-bottom: 1px solid var(--trait);
}

.presta:last-child { border-bottom: 0; }

.presta.inverse > figure { order: 2; }

.presta > figure { margin: 0; }

.presta figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.presta h2 {
  font: 900 24px/1.25 var(--sans);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--encre);
}

.presta p {
  margin-top: 16px;
  font: 400 15px/1.95 var(--sans);
  color: var(--gris-texte);
}

.marqueur {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  background: var(--rouge);
  color: var(--blanc);
  font: 900 10px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.tarif {
  margin-top: 20px !important;
  font: 900 15px/1 var(--sans) !important;
  letter-spacing: .4px;
  color: var(--rouge) !important;
}

.garanties { background: var(--casse); padding: 80px 0 86px; text-align: center; }

.grille-garanties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 44px;
  background: var(--trait);
  text-align: left;
}

.garantie { background: var(--casse); padding: 26px 28px; }

.garantie h3 {
  font: 900 14px/1.4 var(--sans);
  letter-spacing: .4px;
  text-transform: none;
  color: var(--encre);
}

.garantie p {
  margin-top: 7px;
  font: 400 14px/1.8 var(--sans);
  color: var(--gris-texte);
}

/* ===================== PAGE ZONES ===================== */

.texte-zone { background: var(--blanc); padding: 86px 0 94px; }

.colonnes-texte { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }

.colonnes-texte h2 {
  font: 900 17px/1.4 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--encre);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--rouge);
  display: inline-block;
}

.colonnes-texte h2 ~ h2 { margin-top: 44px; }

.colonnes-texte p {
  margin-top: 16px;
  font: 400 15px/1.95 var(--sans);
  color: var(--gris-texte);
}

/* ===================== PAGE REALISATIONS ===================== */

.realisations { background: var(--blanc); padding: 88px 0 100px; }

.grille-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 34px;
}

.grille-photos figure { margin: 0; position: relative; overflow: hidden; }

.grille-photos img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .4s;
}

.grille-photos figure:hover img { transform: scale(1.04); }

.grille-photos figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 16px 13px;
  background: linear-gradient(0deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,0) 100%);
  color: var(--blanc);
  font: 700 12px/1.4 var(--sans);
  letter-spacing: .3px;
}

/* ===================== PAGE FAQ ===================== */

.faq { background: var(--blanc); padding: 88px 0 100px; }

.accordeon { margin-top: 30px; border-top: 1px solid var(--trait); }

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

/* Substitution n° 3 : un <button> n'est pas un bloc natif. La question est
   un core/paragraph editable ; le script lui ajoute role="button",
   tabindex et la gestion clavier. */
.question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font: 700 16px/1.5 var(--sans);
  color: var(--encre);
  transition: color .15s;
}

.question:hover { color: var(--rouge); }

/* le signe + bascule en - par la classe .ouvert : aucune injection JS,
   et pas un seul element de balisage en plus (substitution n° 2) */
.question::after {
  content: '';
  flex: 0 0 auto;
  width: 16px; height: 16px;
  background:
    linear-gradient(var(--rouge), var(--rouge)) center / 16px 2px no-repeat,
    linear-gradient(var(--rouge), var(--rouge)) center / 2px 16px no-repeat;
  transition: background-size .2s;
}

.qr.ouvert .question::after { background-size: 16px 2px, 2px 0; }

/* toutes les variantes vivent dans la page, le script bascule une classe */
.reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}

.qr.ouvert .reponse { grid-template-rows: 1fr; }

.reponse > p {
  overflow: hidden;
  font: 400 15px/1.95 var(--sans);
  color: var(--gris-texte);
  max-width: 820px;
}

.qr.ouvert .reponse > p { padding-bottom: 24px; }

.reponse a { color: var(--rouge); font-weight: 700; }

/* ===================== PAGE CONTACT ===================== */

.contact { background: var(--blanc); padding: 88px 0 100px; }

.grille-contact { display: grid; grid-template-columns: 1fr 400px; gap: 70px; align-items: start; }

.formulaire { margin-top: 32px; }

.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.formulaire label {
  display: block;
  font: 700 12px/1 var(--sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--encre);
}

.formulaire label.pleine { display: block; margin-top: 18px; }
.formulaire label span { color: var(--rouge); }

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  margin-top: 9px;
  padding: 13px 14px;
  border: 1px solid var(--trait);
  background: var(--casse);
  font: 400 15px/1.5 var(--sans);
  color: var(--encre);
  border-radius: 0;
}

.formulaire textarea { resize: vertical; }

.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: 2px solid var(--rouge);
  outline-offset: -2px;
  background: var(--blanc);
}

.formulaire button { margin-top: 24px; border: 0; cursor: pointer; }

.note { margin-top: 16px; font: 400 13px/1.7 var(--sans); color: var(--gris-texte); }

.bloc-coordonnees { background: var(--casse); padding: 34px 32px 38px; }

.urgence { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--trait); }

.urgence .etiquette { margin-bottom: 18px; }

.gros-tel {
  display: block;
  font: 900 30px/1 var(--sans);
  letter-spacing: -.3px;
  color: var(--rouge);
}

.urgence p { margin-top: 12px; font: 400 14px/1.8 var(--sans); color: var(--gris-texte); }

.bouton.ligne-sombre {
  margin-top: 20px;
  background: transparent;
  border: 1px solid var(--encre);
  color: var(--encre);
}

.bouton.ligne-sombre:hover { background: var(--encre); color: var(--blanc); }

.titre-coord {
  font: 900 12px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 18px;
}

/* chaque ligne est un core/group : intitule + valeur, tous deux editables */
.coord-ligne { padding: 12px 0; border-bottom: 1px solid var(--trait); }

.coord-ligne h3 {
  font: 700 11px/1 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 5px;
}

.coord-ligne p, .coord-ligne a { font: 400 15px/1.6 var(--sans); color: var(--encre); }
.coord-ligne a:hover { color: var(--rouge); }

.lien-maps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font: 900 12px/1 var(--sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--rouge);
}

.lien-maps::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: var(--i-maps);
  mask-image: var(--i-maps);
}

/* ===================== BANDEAU DE RAPPEL ===================== */

.rappel { background: var(--casse); padding: 72px 0 78px; text-align: center; }

.rappel p {
  margin: 18px auto 0;
  max-width: 560px;
  font: 400 15px/1.9 var(--sans);
  color: var(--gris-texte);
}

.rappel .actions { justify-content: center; }

.bouton.sombre { background: var(--encre); }
.bouton.sombre:hover { background: #2b2b2b; }

/* ============================ PAGE 404 ============================ */

.erreur {
  background: var(--encre);
  color: var(--blanc);
  padding: 120px 0 130px;
  text-align: center;
}

.code-erreur {
  font: 700 italic 86px/1 var(--serif);
  color: var(--rouge);
  letter-spacing: -2px;
}

.erreur h1 {
  margin-top: 18px;
  font: 900 30px/1.2 var(--sans);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.chapo-sombre {
  margin: 20px auto 0;
  max-width: 520px;
  font: 400 15px/1.9 var(--sans);
  color: rgba(255,255,255,.76);
}

.erreur .actions { justify-content: center; }

.plan {
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}

.plan a {
  font: 700 13px/1.6 var(--sans);
  color: rgba(255,255,255,.72);
}

.plan a:hover { color: var(--rouge); }

@media (max-width: 560px) {
  .erreur { padding: 72px 0 80px; }
  .code-erreur { font-size: 62px; }
  .erreur h1 { font-size: 22px; }
  .plan { flex-direction: column; gap: 12px; }
}

/* ========================== PIED DE PAGE ========================== */

.pied { background: var(--anthracite); color: rgba(255,255,255,.72); padding: 72px 0 0; }

.grille-pied {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr .8fr;
  gap: 48px;
  padding-bottom: 60px;
}

.pied .logo-nom { color: var(--blanc); }
.pied .logo-sous { color: rgba(255,255,255,.5); }

.titre-pied {
  font: 900 12px/1 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 20px;
}

.intro-pied { margin-top: 18px; max-width: 300px; }

.pied p, .pied li { font: 400 14px/2 var(--sans); color: rgba(255,255,255,.72); }
.pied a:hover { color: var(--rouge); }

.tel-pied {
  display: inline-block;
  margin-top: 14px;
  font: 900 22px/1 var(--sans);
  color: var(--rouge);
}

.barre-pied {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 400 12px/1.6 var(--sans);
  color: rgba(255,255,255,.45);
}

/* meme cause que .depuis : les <span> sont devenus des core/paragraph et
   heritaient de .pied p (14px/2). +9 px sur la barre. */
.barre-pied p { font: inherit; color: inherit; }

/* ========================== RESPONSIVE ========================== */

@media (max-width: 1320px) {
  .nav a { padding: 0 11px; letter-spacing: .6px; }
  .reseaux { display: none; }
}

@media (max-width: 1140px) {
  .nav a { padding: 0 8px; font-size: 11px; }
  .tel-entete { font-size: 16px; }
  .grille-garanties { grid-template-columns: repeat(2, 1fr); }
  .grille-photos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1040px) {
  .grille-services { grid-template-columns: 1fr; gap: 48px; }
  .colonne-droite { max-width: 520px; }
  .grille-contact { grid-template-columns: 1fr; gap: 48px; }
  .bloc-coordonnees { max-width: 520px; }
  .presta { grid-template-columns: 1fr; gap: 28px; }
  .presta.inverse > figure { order: 0; }
  .presta > figure { max-width: 520px; }
  .colonnes-texte { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  :root { --entete: 72px; }

  /* le numero d'urgence ne disparait jamais : il prend la place de la
     navigation, dans le bloc rouge pleine hauteur deja au registre. */
  .nav { display: none; }
  .entete .conteneur { padding-right: 0; }
  .entete-droite { gap: 0; }
  .tel-entete {
    height: 100%;
    padding: 0 20px;
    background: var(--rouge);
    color: var(--blanc);
    font-size: 17px;
  }

  .hero::before,
  .hero-page::before {
    background:
      linear-gradient(90deg, rgba(8,8,8,.88) 0%, rgba(8,8,8,.74) 55%, rgba(8,8,8,.54) 100%),
      linear-gradient(0deg, rgba(8,8,8,.34) 0%, rgba(8,8,8,0) 42%);
  }

  .hero { height: 640px; }
  .hero h1 { font-size: 40px; }
  .hero-page { height: 340px; }
  .hero-page h1 { font-size: 32px; }
  .grille-metiers { grid-template-columns: 1fr; gap: 44px; }
  .bande-galerie { grid-template-columns: repeat(2, 1fr); }
  .grille-zones { grid-template-columns: 1fr; gap: 40px; }
  .grille-pied { grid-template-columns: 1fr 1fr; gap: 36px; }
  .grille-photos { grid-template-columns: repeat(2, 1fr); }
  .prestations { padding: 60px 0 20px; }
  .presta { padding-bottom: 52px; margin-bottom: 52px; }
}

@media (max-width: 560px) {
  .conteneur { padding: 0 18px; }
  .tel-entete { padding: 0 13px; font-size: 15px; }
  .logo img { width: 38px; }
  .logo-nom { font-size: 15px; }
  .logo-sous { font-size: 8px; letter-spacing: 1.6px; }
  .hero { height: 580px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 14px; }
  .etiquette { margin-bottom: 20px; font-size: 10px; }
  .actions { gap: 9px; }
  .bouton { padding: 14px 20px; font-size: 11px; }
  .titre-section { font-size: 22px; }
  .citation { padding: 0 28px; }
  .citation p { font-size: 15px; }
  .guillemet { font-size: 24px; }
  .presentation { padding: 60px 0 56px; }
  .metiers, .zones { padding: 56px 0 60px; }
  .services { padding: 60px 0 64px; }
  .liste-services li { grid-template-columns: 20px 1fr; }
  .prix { grid-column: 2; }
  .grille-pied { grid-template-columns: 1fr; }
  .barre-pied { flex-direction: column; gap: 6px; }

  .hero-page { height: 300px; }
  .hero-page h1 { font-size: 23px; }
  .chapo { font-size: 14px; }
  .presta h2 { font-size: 20px; }
  .grille-garanties { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .bloc-coordonnees { padding: 26px 20px 30px; }
  .gros-tel { font-size: 25px; }
  .question { font-size: 15px; }
  .faq, .realisations, .contact { padding: 60px 0 66px; }
  .texte-zone { padding: 60px 0 66px; }
  .titre-suite { margin-top: 54px; }
  .rappel { padding: 56px 0 60px; }
}

/* En dessous de 400 px (Galaxy S8, iPhone SE...), le logo complet et le
   numero ne tiennent plus cote a cote : l'en-tete debordait de 8 px.
   Mesure prise a 360 px, pas estimee. */
@media (max-width: 400px) {
  .logo img { width: 34px; }
  .logo { gap: 9px; }
  .logo-nom { font-size: 13px; letter-spacing: .5px; }
  .logo-sous { display: none; }
  .tel-entete { gap: 0; padding: 0 11px; font-size: 14px; }
  .tel-entete::before { display: none; }
}

/* ======================================================================
   COUCHE D'ADAPTATION GUTENBERG
   Tout ce qui suit n'existe que parce que le contenu est rendu par des
   blocs. Rien ici ne change le dessin : voir blocs-gutenberg.md.
   ====================================================================== */

/* 1 · Espacement automatique.
   La neutralisation passe d'abord par theme.json (blockGap "0px"). Ce
   filet de securite est ecrit A SPECIFICITE NULLE : la version naive
   (.wp-block-group > *) ecraserait toutes les marges des composants —
   14 marges a zero et 307 px de rythme vertical perdus, vecu. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }

/* A specificite nulle egalement : en figure.wp-block-image (0,1,1) cette
   regle battait .objet { margin-bottom: 28px } (0,1,0) et retirait
   28 px sous l'image de la colonne droite. Mesure, pas supposition. */
:where(figure.wp-block-image) { margin: 0; }

/* 2 · Obligatoire : sans height:auto, l'attribut height="1400" des blocs
   image l'emporte sur tout aspect-ratio du CSS. */
img { height: auto; }

/* 3 · Les groupes ne doivent pas heriter d'une largeur de contenu : c'est
   .conteneur qui borne, exactement comme dans la maquette.
   A SPECIFICITE NULLE, obligatoirement : en (0,1,0) et place en fin de
   feuille, cette regle gagnait contre .bande-galerie { max-width:1150px }
   et la bande passait a 1425 px. Mesure, pas supposition. */
:where(.wp-block-group) { max-width: none; }

/* 3 bis · core/site-logo : le client change le logo depuis les reglages
   du site, sans toucher au modele. */
.logo .wp-block-site-logo { margin: 0; line-height: 0; }
.logo .wp-block-site-logo img { width: 46px; height: auto; }
@media (max-width: 400px) { .logo .wp-block-site-logo img { width: 34px; } }

/* 4 · Navigation.
   core/navigation remplace les liens de menu : c'est ce qui donne au
   client un menu reellement editable. */
.wp-block-navigation.nav { margin-left: auto; align-items: stretch; }

.wp-block-navigation.nav .wp-block-navigation__container {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 100%;
}

.wp-block-navigation.nav .wp-block-navigation-item { display: flex; align-items: stretch; }

.wp-block-navigation.nav .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  padding: 0 17px;
  font: 700 12px/1 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
  transition: color .15s;
}

.wp-block-navigation.nav .wp-block-navigation-item__content:hover { color: var(--rouge); }

/* l'etat actif est porte par .current-menu-item sur le <li> */
.wp-block-navigation.nav .current-menu-item { background: var(--rouge); }
.wp-block-navigation.nav .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation.nav .current-menu-item .wp-block-navigation-item__content:hover { color: var(--blanc); }

/* Le panneau mobile s'ouvre blanc sur blanc sans ceci : le CSS du bloc est
   imprime APRES cette feuille. Seul endroit du theme ou !important est
   justifie — la feuille qui pose le blanc n'est pas surclassable autrement. */
.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--encre) !important;
  color: var(--blanc) !important;
  padding: 28px 24px;
}

.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--blanc);
  font-size: 15px;
  padding: 14px 0;
}

.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item {
  background: none;
}

.wp-block-navigation.nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
  color: var(--rouge);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--encre); }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--blanc); }

/* 5 · Formulaire Contact Form 7.
   Aucun bloc natif de formulaire n'existe : core/shortcode + CF7. */
.wpcf7-form-control-wrap { display: block; }   /* sinon +5 a 13 px par champ */
.wpcf7 .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wpcf7 label { display: block; font: 700 12px/1 var(--sans); letter-spacing: 1.1px; text-transform: uppercase; color: var(--encre); }
.wpcf7 input[type=text], .wpcf7 input[type=tel], .wpcf7 input[type=email],
.wpcf7 input[type=date], .wpcf7 select, .wpcf7 textarea {
  width: 100%;
  margin-top: 9px;
  padding: 13px 14px;
  border: 1px solid var(--trait);
  background: var(--casse);
  font: 400 15px/1.5 var(--sans);
  color: var(--encre);
  border-radius: 0;
}
.wpcf7 textarea { resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  outline: 2px solid var(--rouge);
  outline-offset: -2px;
  background: var(--blanc);
}
.wpcf7 .wpcf7-submit {
  margin-top: 24px;
  border: 0;
  cursor: pointer;
  padding: 16px 28px;
  background: var(--rouge);
  color: var(--blanc);
  font: 900 12px/1 var(--sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.wpcf7 .wpcf7-submit:hover { background: var(--rouge-fonce); }
.wpcf7-not-valid-tip { color: var(--rouge); font: 700 12px/1.5 var(--sans); margin-top: 6px; }
.wpcf7-response-output { border: 1px solid var(--trait) !important; padding: 14px 16px !important; font: 400 14px/1.6 var(--sans); margin: 20px 0 0 !important; }
.wpcf7-spinner { display: none; }

@media (max-width: 560px) { .wpcf7 .champs { grid-template-columns: 1fr; } }

/* 6 · Accessibilite du focus, comme dans la maquette. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------------------
   Menu centré dans l'en-tête — demandé le 30/10/2026.

   Avant : le menu portait « margin-left: auto » et se calait donc sur la
   colonne de droite. Mesuré à 1440 px, son centre tombait à 701 px pour un
   conteneur centré sur 712 — onze pixels de décalage, visibles.

   Après : les deux colonnes latérales prennent une part égale de l'espace
   libre, ce qui pose le menu au milieu exact du conteneur quelles que soient
   leurs largeurs respectives. Le « gap: 20px » est retiré : avec lui, la
   colonne de droite (272 px au plus large) ne tenait pas dans sa moitié et il
   manquait 23 px pour centrer.

   Borné au-dessus de 900 px : en dessous, le menu desktop est masqué et c'est
   le panneau mobile qui prend le relais.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .entete .conteneur { gap: 0; }
  .logo { flex: 1 1 0; }
  .entete-droite { flex: 1 1 0; justify-content: flex-end; }
  .nav,
  .wp-block-navigation.nav { margin-left: 0; flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   Menu centré VERTICALEMENT dans l'en-tête — corrigé le 30/10/2026.

   Le bloc core/navigation enveloppe les liens dans quatre div destinées au
   panneau mobile : responsive-container > responsive-close >
   responsive-dialog > responsive-container-content. Sur ordinateur elles
   restent en display:block ; la première fait bien 96 px (étirée par .nav),
   mais la suivante ne s'étire pas et retombe à la hauteur de son texte.
   Mesuré : liens centrés à 6 px du haut, logo et téléphone à 48 px.

   La maquette n'a pas ces enveloppes — ses liens sont enfants directs de
   .nav — d'où l'écart. Et le relevé de fidélité ne l'a pas vu : il mesurait
   la hauteur de .entete (96 px des deux côtés), pas la position des liens.

   Chaque enveloppe devient un conteneur flex étiré, de sorte que la hauteur
   descend jusqu'au lien, qui centre déjà son texte (align-items: center).

   Sélecteurs à quatre classes : le CSS du bloc est imprimé APRÈS cette
   feuille et pose display:block avec trois classes ; à spécificité égale il
   gagnerait. Le :not(.is-menu-open) laisse le panneau mobile intact quand il
   est ouvert. Seuil à 901 px : en dessous, c'est le bouton menu qui prend le
   relais (bloc suivant).
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open),
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
    display: flex;
    align-items: stretch;
  }
}

/* --------------------------------------------------------------------------
   Entre 600 et 900 px : bouton menu au lieu du menu en ligne.

   La maquette masque le menu sous 900 px (.nav { display: none }). Le thème
   portait la même règle, mais elle perdait : le CSS du bloc Navigation est
   imprimé APRÈS cette feuille et réaffiche le menu à partir de 600 px, seuil
   propre à WordPress. Résultat mesuré à 768 px : six liens cassés sur deux
   rangées, entassés dans un en-tête de 72 px.

   On aligne donc le seuil de WordPress sur celui de la maquette : le bouton
   menu, déjà utilisé sous 600 px, s'affiche jusqu'à 900 px, et le panneau qu'il
   ouvre est celui qui existe déjà (fond encre, liens blancs).
   -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 900px) {
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* Le bouton menu s'étire sur toute la hauteur de l'en-tête (son parent est en
   align-items: stretch), mais son icône restait collée en haut : centrée à
   12 px dans un en-tête de 72 px, mesuré le 30/10/2026. Inoffensif là où le
   bouton est masqué, puisque seul l'alignement change, pas l'affichage. */
.entete .wp-block-navigation.nav .wp-block-navigation__responsive-container-open {
  align-items: center;
}

/* --------------------------------------------------------------------------
   Avis Google — ajoutés le 30/10/2026, à la demande du client.

   Trois avis réels, recopiés mot pour mot de la fiche Google de l'entreprise
   (5,0 sur 5, 35 avis au 30/10/2026), choisis parce qu'ils couvrent chacun un
   métier : remplacement de porte, sécurisation, intervention courante. Mêmes
   codes que « Trois métiers » — grille de trois, texte centré, accent rouge —
   et la police du texte courant, droite : l'italique serif d'origine,
   avec ses « J » ornés, a été jugé trop peu lisible par le client le 30/10/2026.

   Fond blanc, et placée après « Zones » : c'est le seul endroit de l'accueil
   où le blanc alterne avec ses deux voisins gris (Zones, puis le bandeau
   d'appel du pied de page).

   Délibérément absents :
   - pas de données structurées Review ni AggregateRating : Google n'affiche
     pas les avis qu'une entreprise publie sur elle-même, et ses consignes
     interdisent de baliser des avis repris d'un autre site ;
   - pas de script ni de widget Google : il déposerait des cookies tiers, et
     la page de mentions légales, qui promet « aucun traqueur tiers »,
     deviendrait fausse.
   -------------------------------------------------------------------------- */
.avis { background: var(--blanc); padding: 76px 0 84px; text-align: center; }

.grille-avis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 44px;
}

/* Les cinq étoiles sont décoratives : un pseudo-élément, pas un bloc que le
   client pourrait sélectionner et supprimer sans comprendre ce que c'est. */
.avis-carte::before {
  content: '\2605\2605\2605\2605\2605';
  display: block;
  margin-bottom: 18px;
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--rouge);
}

.avis-carte .avis-texte {
  font: 400 15px/1.95 var(--sans);
  color: #4a4a4a;
}

.avis-carte .avis-auteur {
  margin-top: 18px;
  font: 900 13px/1 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--encre);
}

.avis-carte .avis-auteur::after {
  content: ' \00B7  Avis Google';  /* deux espaces : la premiere termine l'echappement et disparait */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris-texte);
}

@media (max-width: 900px) {
  .avis { padding: 56px 0 60px; }
  .grille-avis { grid-template-columns: 1fr; gap: 44px; }
}

/* --------------------------------------------------------------------------
   Logo Google dans la section des avis — demandé le 30/10/2026.

   Le « G » officiel, quatre couleurs, NON MODIFIÉ : les règles de marque de
   Google interdisent d'en changer les couleurs ou les proportions, et il ne
   doit servir qu'à indiquer la source des avis, jamais à suggérer que Google
   recommande l'entreprise. Ne pas le recolorer en rouge pour l'assortir.

   En fond de pseudo-élément, pas en image dans le contenu : c'est un repère
   décoratif, le texte « sur Google » de la ligne de note porte déjà
   l'information pour les lecteurs d'écran.
   -------------------------------------------------------------------------- */
:root {
  --logo-google: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
}

.avis .sur-titre::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
  background: var(--logo-google) center / contain no-repeat;
}

/* remplace le texte « · Avis Google » posé plus haut sur la même cible */
.avis-carte .avis-auteur::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 9px;
  vertical-align: -2px;
  background: var(--logo-google) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Défilement des avis — demandé le 30/10/2026.

   La grille de trois devient un rail horizontal : cinq cartes, trois visibles
   sur ordinateur, une et le début de la suivante sur téléphone — l'amorce de
   la carte d'après montre qu'il y a une suite. assets/app.js avance d'une
   carte toutes les cinq secondes et revient au début. À la main, on fait
   glisser au doigt ou à la molette, et l'aimantation cale chaque carte.

   La barre de défilement est masquée : le mouvement suffit à signaler le
   rail, et elle traversait la section sous les cartes.
   -------------------------------------------------------------------------- */
.grille-avis {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 56px) / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.grille-avis::-webkit-scrollbar { display: none; }

.avis-carte { scroll-snap-align: start; }

@media (max-width: 900px) {
  .grille-avis {
    grid-template-columns: none;
    grid-auto-columns: 82%;
    gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   Badge de note Google, collé en bas à gauche — demandé le 30/10/2026, sur
   le modèle d'un widget d'avis fourni par le client (onglet bleu, étoiles
   dorées, coins arrondis en haut seulement).

   Deux écarts volontaires avec ce modèle, qui ne sont pas des choix de goût :
   - les chiffres sont les vrais (5,0/5, 35 avis au 30/10/2026), pas ceux du
     modèle (« 4.9/5 - 1278 votes ») ;
   - le logo est le « G » officiel, sans la coche verte du modèle. Cette coche
     n'est pas un logo de Google et laisse croire à des avis vérifiés, alors
     que la fiche Google indique elle-même que ses avis ne le sont pas.

   Le bleu et l'or sortent de la palette du site : c'est la demande du client,
   le badge reprend volontairement la forme qu'on reconnaît.

   Les chiffres sont du texte dans parts/footer.html : à mettre à jour à la
   main. Depuis la 1.9.0, il se pose dans la barre d'actions (dernier bloc).
   -------------------------------------------------------------------------- */
.badge-google {
  position: fixed;
  left: 24px;
  bottom: 0;
  z-index: 60;
  margin: 0;
}

.badge-google a {
  display: grid;
  grid-template-columns: 34px auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  padding: 10px 20px 11px 14px;
  border-radius: 14px 14px 0 0;
  background: #1e4f8f;
  color: #fff;
  font: 700 14px/1 var(--sans);
  letter-spacing: .2px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
  transition: background-color .15s;
}

.badge-google a:hover { background: #173f73; }

/* Le « G » officiel sur une pastille blanche, à cheval sur les deux lignes.
   La seconde déclaration donne « Google » comme texte de remplacement aux
   lecteurs d'écran ; un navigateur qui ne la comprend pas garde la première. */
.badge-google a::before {
  content: '';
  content: '' / 'Google';
  grid-column: 1;
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff var(--logo-google) center / 21px 21px no-repeat;
}

/* Les cinq étoiles, au-dessus de la note. Le texte du lien se range seul dans
   la case restante, sous les étoiles. */
.badge-google a::after {
  content: '\2605\2605\2605\2605\2605';
  grid-column: 2;
  grid-row: 1;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 2px;
  color: #fbbc05;
}

/* Une bande réservée au bas du pied de page : sans elle, le badge masquait
   la ligne de copyright, et sur téléphone le lien des mentions légales. */
.pied { padding-bottom: 56px; }

@media (max-width: 760px) {
  .badge-google { left: 16px; }
  .badge-google a { padding: 8px 16px 9px 12px; column-gap: 10px; font-size: 13px; }
  .badge-google a::before { width: 30px; height: 30px; background-size: 19px 19px; }
  .badge-google a::after { font-size: 16px; }
  .pied { padding-bottom: 50px; }
}

/* --------------------------------------------------------------------------
   Bandeau d'infos, boutons d'en-tête et barre d'actions — demandés le
   30/10/2026, sur le modèle d'un site concurrent montré par le client
   (NS Serrurier, à Bussy-Saint-Georges).

   Repris : la structure seulement — une ligne d'infos au-dessus de
   l'en-tête, trois boutons à droite du menu, une barre d'actions fixée en
   bas de l'écran. Pas repris, à la demande du client : l'apparence. Tout
   reste au rouge KAM, en Lato, angles francs ; seuls sortent de la palette
   le vert WhatsApp et l'or des étoiles, déjà admis pour le badge de note.

   Conséquences sur l'existant :
   - le bouton WhatsApp flottant disparaît : la barre porte le même lien, en
     relief, sous le pouce ;
   - le badge de note se loge dans la barre, à gauche, sur ordinateur. Sur
     téléphone la barre prend toute la largeur : c'est la pastille du
     bandeau qui donne la note ;
   - bandeau et en-tête passent à 1320 px de large. À 1170, logo, menu et
     trois boutons ne tenaient pas sur une ligne (1155 px pour 1122). Le menu
     est désormais centré entre le logo et les boutons, et non plus au milieu
     exact du conteneur : avec deux côtés de largeurs si différentes, ce
     n'est plus possible sans le coller aux boutons.

   Les textes sont ceux du site, pas ceux du modèle : « Devis gratuit » et
   « prix annoncé avant travaux » viennent de la FAQ, la note de la fiche
   Google réelle (5,0/5, 35 avis au 30/10/2026, à mettre à jour à la main).
   -------------------------------------------------------------------------- */
:root {
  --i-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  --i-devis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --barre-actions: 64px;
}

/* 1 · Bandeau d'infos, au-dessus de l'en-tête. */
.barre-haut {
  background: var(--casse);
  border-bottom: 1px solid var(--trait);
}

.barre-haut .conteneur,
.entete .conteneur { max-width: 1320px; }

.barre-haut .conteneur {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.barre-haut p { margin: 0; }

/* Pictogramme à gauche, titre et sous-titre l'un sur l'autre. */
.info {
  display: grid;
  grid-template-columns: 18px auto;
  column-gap: 10px;
  align-items: center;
}

.info::before {
  content: '';
  grid-row: 1 / 3;
  width: 18px;
  height: 18px;
  background: var(--rouge);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.i-lieu::before    { -webkit-mask-image: var(--i-maps);    mask-image: var(--i-maps); }
.i-horloge::before { -webkit-mask-image: var(--i-horloge); mask-image: var(--i-horloge); }
.i-mail::before    { -webkit-mask-image: var(--i-mail);    mask-image: var(--i-mail); }

.info-titre {
  font: 900 12px/1.35 var(--sans);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
}

/* une adresse e-mail en capitales se lit mal et se recopie de travers */
.i-mail .info-titre { text-transform: none; letter-spacing: .2px; }
.info-titre a:hover { color: var(--rouge); }

.info-sous {
  font: 400 12px/1.4 var(--sans);
  color: var(--gris-texte);
  white-space: nowrap;
}

/* La pastille de note : « G » officiel, étoiles, puis le texte du lien.
   Les deux pseudo-éléments sont remontés devant le texte par order. Les
   étoiles n'ont pas de texte de remplacement : le lien dit déjà « 5,0/5 ». */
.note-haut a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px 6px 6px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  font: 700 12px/1 var(--sans);
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background-color .15s;
}

.note-haut a:hover { background: #2b2b2b; }

.note-haut a::before {
  content: '';
  order: -2;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff var(--logo-google) center / 15px 15px no-repeat;
}

.note-haut a::after {
  content: '\2605\2605\2605\2605\2605';
  content: '\2605\2605\2605\2605\2605' / '';
  order: -1;
  font-size: 13px;
  letter-spacing: 1px;
  color: #fbbc05;
}

/* Les réseaux suivent la règle déjà posée à 1320 px : masqués en dessous. */

@media (max-width: 1180px) {
  .barre-haut .i-mail { display: none; }
}

@media (max-width: 900px) {
  .barre-haut .conteneur { min-height: 40px; }
  .barre-haut .i-lieu,
  .barre-haut .info-sous { display: none; }
}

@media (max-width: 560px) {
  .barre-haut .conteneur { min-height: 38px; justify-content: center; }
  .barre-haut .i-horloge { display: none; }
}

/* 2 · Trois boutons à droite du menu : appeler, WhatsApp, devis. */
.entete-droite p { margin: 0; }

/* Le pictogramme passe du paragraphe au lien : c'est le lien qui devient le
   bouton, si bien que toute sa surface est cliquable — y compris le bloc
   rouge pleine hauteur sur téléphone, dont les marges ne l'étaient pas. */
.tel-entete { gap: 0; }
.tel-entete::before { content: none; }

.tel-entete a {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tel-entete a::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--i-tel) center / contain no-repeat;
  mask: var(--i-tel) center / contain no-repeat;
}

@media (min-width: 901px) {
  .entete .conteneur { gap: 24px; }
  .logo,
  .entete-droite { flex: 0 0 auto; }
  .entete-droite { gap: 8px; }

  .tel-entete { font-size: 16px; }

  .tel-entete a,
  .devis-entete a {
    height: 44px;
    padding: 0 18px;
    color: var(--blanc);
    transition: background-color .15s;
  }

  .tel-entete a { background: var(--rouge); }
  .tel-entete a:hover { background: var(--rouge-fonce); }

  .devis-entete a {
    display: flex;
    align-items: center;
    background: var(--encre);
    font: 900 12px/1 var(--sans);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .devis-entete a:hover { background: #2b2b2b; }

  /* le logo seul ; le mot « WhatsApp » reste le nom du lien pour les
     lecteurs d'écran, d'où font-size: 0 et non display: none */
  .wa-entete a {
    display: block;
    width: 44px;
    height: 44px;
    background: #25d366 var(--i-whatsapp-blanc) center / 22px 22px no-repeat;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    transition: background-color .15s;
  }

  .wa-entete a:hover { background-color: #1da851; }
}

@media (max-width: 1100px) {
  .devis-entete { display: none; }
}

@media (max-width: 1040px) {
  .wa-entete { display: none; }
}

/* Sur téléphone, le numéro garde son bloc rouge pleine hauteur, porté
   désormais par le lien. WhatsApp et devis sont dans la barre du bas. */
@media (max-width: 900px) {
  .tel-entete { padding: 0; background: none; }
  .tel-entete a {
    height: 100%;
    padding: 0 20px;
    background: var(--rouge);
    color: var(--blanc);
  }
}

@media (max-width: 560px) {
  .tel-entete a { padding: 0 13px; }
}

@media (max-width: 400px) {
  .tel-entete a { gap: 0; padding: 0 11px; }
  .tel-entete a::before { display: none; }
}

/* 3 · Barre d'actions fixée en bas de l'écran, sur toutes les pages. */
.barre-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  margin: 0;
  height: var(--barre-actions);
  display: grid;
  grid-template-columns: repeat(5, 96px);
  justify-content: center;
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}

.barre-actions p { margin: 0; }

.barre-actions a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--encre);
  transition: color .15s;
}

.barre-actions a:hover { color: var(--rouge); }

.barre-actions a::before {
  content: '';
  width: 22px;
  height: 22px;
  background: var(--rouge);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.ba-menu a::before  { -webkit-mask-image: var(--i-menu);  mask-image: var(--i-menu); }
.ba-appel a::before { -webkit-mask-image: var(--i-tel);   mask-image: var(--i-tel); }
.ba-mail a::before  { -webkit-mask-image: var(--i-mail);  mask-image: var(--i-mail); }
.ba-devis a::before { -webkit-mask-image: var(--i-devis); mask-image: var(--i-devis); }

/* WhatsApp en relief : la pastille verte déborde au-dessus de la barre,
   le libellé reste aligné sur ceux des voisins. */
.ba-whatsapp a {
  position: relative;
  justify-content: flex-end;
  padding-bottom: 12px;
}

.ba-whatsapp a::before {
  position: absolute;
  top: -22px;
  left: 50%;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  border: 4px solid var(--blanc);
  border-radius: 50%;
  background: #25d366 var(--i-whatsapp-blanc) center / 26px 26px no-repeat;
  -webkit-mask: none;
  mask: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transition: background-color .15s;
}

.ba-whatsapp a:hover::before { background-color: #1da851; }

/* Le bas de page reste lisible au-dessus de la barre ; remplace la bande
   de 56 px (50 sur téléphone) réservée jusqu'ici au badge. */
.pied { padding-bottom: var(--barre-actions); }

/* Le badge de note (plus haut) se pose dans la barre, à gauche, et passe
   au-dessus d'elle. */
.badge-google { z-index: 56; }

/* colonnes resserrées : à 901 px, il ne restait que 10 px entre le badge et
   « Menu » */
@media (max-width: 1100px) {
  .barre-actions { grid-template-columns: repeat(5, 88px); }
}

@media (max-width: 900px) {
  .barre-actions { grid-template-columns: repeat(5, 1fr); }
  .badge-google { display: none; }
}

@media (max-width: 400px) {
  .barre-actions a { font-size: 10px; letter-spacing: .4px; }
}

/* Thème seulement : le resserrement du menu sous 1320 et 1140 px (règles
   .nav a de la maquette) ne s'appliquait pas — la règle du bloc Navigation,
   à trois classes, l'emportait. Mesuré le 30/10/2026 à 1024 px : menu de
   562 px au lieu de 403, en-tête débordant de 3 px, et de bien plus entre
   901 et 1000 px. Le panneau ouvert garde ses propres réglages. */
@media (max-width: 1320px) {
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
    padding: 0 11px;
    letter-spacing: .6px;
  }
}

@media (max-width: 1140px) {
  .entete .wp-block-navigation.nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
    padding: 0 8px;
    font-size: 11px;
  }
}

/* Thème seulement : le panneau du menu vit dans .entete, dont le z-index 20
   forme un plan d'empilement ; ses 100000 n'en sortent pas, et la barre (55)
   et le badge (56) restaient par-dessus le panneau ouvert — vu le 30/10/2026.
   WordPress pose has-modal-open sur <html> tant que le panneau est ouvert :
   l'en-tête passe alors au-dessus de tout. */
.has-modal-open .entete { z-index: 100; }

/* --------------------------------------------------------------------------
   « Nos services » en cartes photo, sans prix — demandé le 30/10/2026.

   Avant : une liste de six lignes (pictogramme, nom, phrase, prix) à côté
   d'une photo et de trois paragraphes. Le client la trouvait terne, et ne
   veut plus de prix dans cette section.

   Après : six cartes, chacune portée par une vraie photo de chantier qui
   montre la prestation, titre et phrase posés sur un voile sombre. Toute la
   carte mène à la page Services : le lien « En savoir plus » est étiré sur
   la carte par un pseudo-élément — un groupe ne peut pas être un lien, et
   on reste ainsi en blocs natifs. Les trois paragraphes de l'ancienne
   colonne de droite deviennent quatre engagements sous la grille.

   Sur téléphone, les cartes passent sur un rail qu'on fait glisser au doigt,
   l'amorce de la suivante montrant qu'il y en a d'autres — comme les avis.

   Les règles .grille-services, .liste-services, .service-ligne, .prix et
   .colonne-droite, plus haut, ne servent plus depuis.
   -------------------------------------------------------------------------- */
:root {
  --i-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 4 6v6.1c0 4.6 3.3 8.3 8 9.3 4.7-1 8-4.7 8-9.3V6z'/%3E%3Cpath d='m8.8 12 2.3 2.3 4.1-4.4'/%3E%3C/svg%3E");
  --i-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2'/%3E%3Cpath d='M8 10.5v-3a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --i-valide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7 5.5-5.5'/%3E%3C/svg%3E");
}

.services .titre-section,
.services .sur-titre { text-align: center; }

.services .sur-titre { margin-top: 14px; }

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.carte-service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 26px 26px;
  background: var(--encre);
  color: var(--blanc);
}

.carte-service .carte-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.carte-service .carte-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

/* le voile : léger en haut pour laisser voir la photo, dense en bas pour
   que le texte blanc se lise sur n'importe quel fond */
.carte-service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, .05) 0%,
    rgba(10, 10, 10, .18) 36%,
    rgba(10, 10, 10, .84) 72%,
    rgba(10, 10, 10, .94) 100%);
}

.carte-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  padding: 7px 10px;
  background: var(--rouge);
  color: var(--blanc);
  font: 900 10px/1 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.carte-service h3 {
  font: 900 18px/1.3 var(--sans);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--blanc);
}

/* le trait rouge de la maison, qui s'allonge au survol */
.carte-service h3::before {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--rouge);
  transition: width .3s ease;
}

.carte-service .carte-desc {
  margin-top: 10px;
  font: 400 14px/1.65 var(--sans);
  color: rgba(255, 255, 255, .84);
}

.carte-service .carte-lien {
  margin-top: 16px;
  font: 900 11px/1 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.carte-service .carte-lien a { color: var(--blanc); }

/* le lien couvre toute la carte */
.carte-service .carte-lien a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carte-service:hover .carte-photo img { transform: scale(1.06); }
.carte-service:hover h3::before { width: 60px; }
.carte-service:hover .carte-lien a { color: var(--rouge); }

/* le contour de focus du lien est caché par l'étirement : la carte le porte */
.carte-service:focus-within {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}

.carte-service .carte-lien a:focus-visible { outline: none; }

/* Quatre engagements sous la grille : pastille rouge, pictogramme blanc. */
.engagements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--trait);
}

.engagement {
  position: relative;
  min-height: 46px;
  margin: 0;
  padding-left: 60px;
  font: 400 13px/1.55 var(--sans);
  color: var(--gris-texte);
}

.engagement strong {
  display: block;
  margin-bottom: 3px;
  font: 900 13px/1.3 var(--sans);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--encre);
}

.engagement::before,
.engagement::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
}

.engagement::before {
  border-radius: 50%;
  background: var(--rouge);
}

.engagement::after {
  background: var(--blanc);
  -webkit-mask: center / 22px 22px no-repeat;
  mask: center / 22px 22px no-repeat;
}

.e-prix::after     { -webkit-mask-image: var(--i-devis);    mask-image: var(--i-devis); }
.e-garantie::after { -webkit-mask-image: var(--i-bouclier); mask-image: var(--i-bouclier); }
.e-a2p::after      { -webkit-mask-image: var(--i-cadenas);  mask-image: var(--i-cadenas); }
.e-paiement::after { -webkit-mask-image: var(--i-valide);   mask-image: var(--i-valide); }

@media (max-width: 1040px) {
  .engagements { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}

@media (max-width: 900px) {
  .grille-cartes { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* Rail au doigt. Il déborde du conteneur jusqu'aux bords de l'écran, et
   l'aimantation cale chaque carte sur la marge du texte. */
@media (max-width: 760px) {
  .grille-cartes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 14px;
    margin: 36px -24px 0;
    padding: 0 24px;
    scroll-padding: 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .grille-cartes::-webkit-scrollbar { display: none; }
  .carte-service { scroll-snap-align: start; padding: 24px 22px 22px; }
  .carte-service h3 { font-size: 16px; }
  .carte-service .carte-desc { font-size: 13.5px; }
  .engagements { margin-top: 44px; padding-top: 36px; }
}

@media (max-width: 560px) {
  .grille-cartes { margin-inline: -18px; padding-inline: 18px; scroll-padding: 0 18px; }
  .engagements { grid-template-columns: 1fr; gap: 22px; }
}

/* --------------------------------------------------------------------------
   Une seule écriture, droite, partout — demandé le 30/10/2026.

   Le client veut « la même écriture partout, pas en italique ». Les derniers
   usages du Playfair Display italique — grand titre de l'accueil, titres des
   pages internes, texte de « Qui sommes-nous » et ses guillemets, « 404 » —
   passent en Lato droit, comme tout le reste du site (les avis l'étaient
   déjà). Le Playfair n'est plus chargé du tout : une police de moins à
   télécharger. --serif pointe sur Lato par sécurité, pour tout usage oublié.

   Les grands titres montent au gras 900 des titres de section, pour rester
   des titres sans l'italique, et perdent quelques pixels : à taille égale,
   le Lato est plus large et plus haut que le Playfair.

   Le raccourci font remet la taille à zéro : les tailles responsives
   d'origine sont donc reprises plus bas.
   -------------------------------------------------------------------------- */
:root { --serif: var(--sans); }

.hero h1 {
  font: 900 52px/1.12 var(--sans);
  letter-spacing: -.4px;
}

.hero-page h1 {
  font: 900 42px/1.15 var(--sans);
  letter-spacing: -.3px;
}

.citation p { font: 400 16px/2 var(--sans); }

.guillemet,
.citation::before,
.citation::after { font: 900 30px/1 var(--sans); }

.code-erreur { font: 900 86px/1 var(--sans); }

@media (max-width: 900px) {
  .hero h1 { font-size: 38px; }
  .hero-page h1 { font-size: 30px; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 26px; letter-spacing: -.2px; }
  .hero-page h1 { font-size: 22px; letter-spacing: 0; }
  .citation p { font-size: 15px; }
  .guillemet,
  .citation::before,
  .citation::after { font-size: 24px; }
  .code-erreur { font-size: 62px; }
}

/* --------------------------------------------------------------------------
   Avis clients refaits — demandés le 30/10/2026, sur le modèle de la section
   d'avis de ns-serrurier.com montré par le client.

   Repris : la pastille « Avis clients » au-dessus du titre, la ligne de
   synthèse (Excellent · étoiles · note · Google), des cartes avec l'initiale
   du client dans un rond de couleur, son nom, « Avis Google » et le G, puis
   les étoiles et le texte entre guillemets ; deux flèches de part et d'autre.

   Pas repris : la police étroite du modèle (le client veut la même écriture
   partout), ses chiffres (133 avis — ici les vrais, 5,0 sur 35), le jaune
   (le rouge KAM le remplace, sauf pour les étoiles, dorées comme sur Google)
   et le logo « Google » en couleurs, que l'on ne redessine pas : le G
   officiel, non modifié, suivi du mot écrit simplement.

   Les flèches sont deux paragraphes que le script transforme en boutons, et
   elles restent masquées tant qu'il ne les a pas branchées (.avec-fleches) :
   sans lui elles ne feraient rien. Sur téléphone, le doigt suffit.

   Remplace, sur les mêmes cibles, les étoiles rouges en tête de carte, le G
   à côté du nom et le texte centré posés plus haut.
   -------------------------------------------------------------------------- */
:root {
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
}

.avis-pastille {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font: 900 12px/1 var(--sans);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--encre);
}

.avis-pastille::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rouge);
}

/* Excellent · étoiles et note · G Google */
.avis-synthese {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 30px;
}

.avis-synthese p { margin: 0; }

.synthese-mot {
  font: 900 22px/1 var(--sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--encre);
}

.synthese-note {
  font: 400 13px/1 var(--sans);
  color: var(--gris-texte);
  text-align: left;
}

.synthese-note::before {
  content: '\2605\2605\2605\2605\2605';
  content: '\2605\2605\2605\2605\2605' / '';
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #fbbc05;
}

.synthese-google a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 20px/1 var(--sans);
  color: var(--encre);
}

.synthese-google a::before {
  content: '';
  width: 26px;
  height: 26px;
  background: var(--logo-google) center / contain no-repeat;
}

.synthese-google a:hover { color: var(--rouge); }

/* Le rail : trois cartes visibles, un écart resserré. */
.avis-defile {
  position: relative;
  margin-top: 40px;
}

.avis-defile .grille-avis {
  margin-top: 0;
  gap: 28px;
  grid-auto-columns: calc((100% - 2 * 28px) / 3);
}

.avis-carte {
  text-align: left;
  padding: 32px 32px 34px;
  background: var(--casse);
  border: 1px solid var(--trait);
}

.avis-carte::before { content: none; }

/* initiale | nom et source | G — puis les étoiles sur toute la largeur */
.avis-tete {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  column-gap: 16px;
  align-items: center;
}

.avis-tete p { margin: 0; }

.avis-carte .avis-initiale {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rouge);
  color: var(--blanc);
  font: 900 21px/1 var(--sans);
}

/* une couleur par carte, comme les pastilles de Google ; la sixième
   reprend la première */
.avis-carte:nth-child(5n+2) .avis-initiale { background: #7b3fb5; }
.avis-carte:nth-child(5n+3) .avis-initiale { background: #1e4f8f; }
.avis-carte:nth-child(5n+4) .avis-initiale { background: #188038; }
.avis-carte:nth-child(5n+5) .avis-initiale { background: #c26401; }

.avis-carte .avis-auteur {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font: 900 14px/1.25 var(--sans);
  letter-spacing: .6px;
}

.avis-carte .avis-auteur::after { content: none; }

.avis-carte .avis-source {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 3px;
  font: 400 13px/1.3 var(--sans);
  color: var(--gris-texte);
}

.avis-tete::before {
  content: '';
  grid-column: 3;
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  background: var(--logo-google) center / contain no-repeat;
}

.avis-tete::after {
  content: '\2605\2605\2605\2605\2605';
  content: '\2605\2605\2605\2605\2605' / '';
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 3px;
  color: #fbbc05;
}

.avis-carte .avis-texte {
  margin-top: 14px;
  font: 400 15px/1.85 var(--sans);
  color: #4a4a4a;
}

.avis-carte .avis-texte::before { content: '«\00A0'; }
.avis-carte .avis-texte::after  { content: '\00A0»'; }

/* Les flèches, hors du rail à gauche et à droite. */
.avis-fleche {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin: -27px 0 0;
  border-radius: 50%;
  place-items: center;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  transition: background-color .15s, border-color .15s;
}

.avis.avec-fleches .avis-fleche { display: grid; }

.avis-fleche::before {
  content: '';
  width: 18px;
  height: 18px;
  -webkit-mask: var(--i-chevron) center / contain no-repeat;
  mask: var(--i-chevron) center / contain no-repeat;
}

.avis-prec {
  left: -84px;
  background: var(--blanc);
  border: 1px solid var(--trait);
}

.avis-prec::before { background: var(--encre); transform: rotate(180deg); }
.avis-prec:hover { border-color: var(--encre); }

.avis-suiv {
  right: -84px;
  background: var(--rouge);
}

.avis-suiv::before { background: var(--blanc); }
.avis-suiv:hover { background: var(--rouge-fonce); }

/* sous 1320 px, plus de marge hors du conteneur : les flèches mordent sur le
   bord des cartes, dans leur marge intérieure, sans toucher au texte */
@media (max-width: 1320px) {
  .avis-fleche { width: 46px; height: 46px; margin-top: -23px; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); }
  .avis-prec { left: -20px; }
  .avis-suiv { right: -20px; }
}

@media (max-width: 900px) {
  .avis-defile .grille-avis { grid-auto-columns: 82%; gap: 18px; }
}

@media (max-width: 760px) {
  .avis.avec-fleches .avis-fleche { display: none; }
  .avis-carte { padding: 26px 22px 28px; }
  .synthese-mot { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   Bande des marques qui défile — demandée le 31/10/2026, sur le modèle d'une
   bande de logos montrée par le client.

   Les noms sont écrits, pas dessinés : reproduire les logos des fabricants
   demande leurs fichiers officiels et leur accord. Le client peut fournir
   ces fichiers (souvent remis par les grossistes) ; en attendant, une même
   écriture pour toutes les marques, grise, qui fonce au survol.

   La liste existe deux fois dans la page : la piste glisse de la moitié de
   sa largeur — une liste entière — puis repart, et la seconde liste a pris
   exactement la place de la première. Le script cache la copie aux lecteurs
   d'écran. Pause au survol ; à l'arrêt complet, et la copie masquée, quand
   le visiteur a demandé à réduire les animations.
   -------------------------------------------------------------------------- */
.marques {
  padding: 46px 0 52px;
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  overflow: hidden;
}

.marques .marques-titre {
  margin: 0 0 30px;
  padding: 0 24px;
  text-align: center;
  font: 700 12px/1.5 var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gris-texte);
}

/* les bords s'effacent au lieu de couper les noms net */
.marques-bande {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marques-piste {
  display: flex;
  width: max-content;
  animation: marques-defile 48s linear infinite;
}

.marques-bande:hover .marques-piste { animation-play-state: paused; }

.marques-liste {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.marques-liste p {
  margin: 0;
  padding: 0 34px;
  font: 900 22px/1 var(--sans);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #b9b9b9;
  transition: color .2s;
}

.marques-liste p:hover { color: var(--encre); }

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

@media (max-width: 760px) {
  .marques { padding: 36px 0 40px; }
  .marques .marques-titre { margin-bottom: 22px; font-size: 11px; letter-spacing: 2px; }
  .marques-liste p { padding: 0 22px; font-size: 17px; }
  .marques-piste { animation-duration: 36s; }
}

@media (prefers-reduced-motion: reduce) {
  .marques-piste { width: auto; animation: none; justify-content: center; }
  .marques-liste { flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  .marques-copie { display: none; }
}

/* --------------------------------------------------------------------------
   Bande des marques : les vrais logos, en couleur — demandé le 31/10/2026.

   Remplace les noms écrits du bloc précédent. Logos pris sur le site
   officiel de chaque fabricant, avec l'accord du client : bandeau de cookies
   pour les marques ASSA ABLOY (Vachette, Fichet, Mottura, JPM, Mul-T-Lock)
   et dormakaba, en-tête du site pour les autres. Les SVG (ISEO, Picard,
   CISA, DOM, dormakaba) ont été rendus en PNG.

   Chaque PNG fait 120 px de haut, logo centré sur fond transparent : sa
   taille dans ce cadre a été réglée pour que tous pèsent pareil à l'œil
   (surface constante, 190 px de large au plus), si bien qu'une seule
   hauteur suffit ici. Valente (aucun site ni logo officiel trouvé) et ABUS
   (son site refuse les téléchargements automatisés) restent écrits.

   .marques devant : le CSS du bloc Image, imprimé après cette feuille,
   pose height:auto et une marge basse avec la même spécificité.
   -------------------------------------------------------------------------- */
.marques .marques-liste figure {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 30px;
}

.marques .marques-liste img {
  display: block;
  height: 60px;
  width: auto;
  max-width: none;
}

/* les deux marques sans logo : écrites en noir, comme un logotype */
.marques .marques-liste p {
  padding: 0 30px;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--encre);
}

@media (max-width: 760px) {
  .marques .marques-liste figure { padding: 0 20px; }
  .marques .marques-liste img { height: 46px; }
  .marques .marques-liste p { padding: 0 20px; font-size: 19px; }
}

/* --------------------------------------------------------------------------
   Curseur avant / après — demandé le 31/10/2026, sur un modèle montré par le
   client. Remplace l'image fixe côte à côte de la prestation « Cornière
   anti-pince & poignée blindée ».

   Les deux photos sont empilées ; celle d'après est découpée à partir de la
   position du curseur (--pos). On fait glisser à la souris ou au doigt, un
   clic amène la ligne là où l'on clique, les flèches du clavier la
   déplacent. Le script ne règle que cette variable : les deux photos sont
   de vraies images de la page, remplaçables dans l'éditeur (règle 7).
   Sans script, la ligne reste au milieu.

   Les photos ont été recalées l'une sur l'autre avant publication (l'après
   était décalé de 20 px et 48 px et 1,3 % plus petit) : sans ce recalage,
   la porte « sauterait » au passage de la ligne. Format 2:3, serré sur la
   porte.

   touch-action: pan-y laisse la page défiler verticalement au doigt ; seul
   un glissement horizontal déplace le curseur.
   -------------------------------------------------------------------------- */
:root {
  --i-fleches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
}

.avant-apres {
  --pos: 50%;
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  overflow: hidden;
  background: var(--encre);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.avant-apres figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.avant-apres figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.avant-apres .aa-apres { clip-path: inset(0 0 0 var(--pos)); }

.avant-apres figure figcaption {
  position: absolute;
  top: 16px;
  margin: 0;
  padding: 8px 12px 7px;
  font: 900 12px/1 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blanc);
}

.avant-apres .aa-avant figcaption { left: 16px; background: var(--encre); }
.avant-apres .aa-apres figcaption { right: 16px; background: var(--rouge); }

/* la ligne de partage et sa poignée */
.avant-apres::before,
.avant-apres::after {
  content: '';
  position: absolute;
  left: var(--pos);
  pointer-events: none;
}

.avant-apres::before {
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--blanc);
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.avant-apres::after {
  z-index: 3;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--rouge) var(--i-fleches) center / 26px 26px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

/* un clic fait glisser la ligne ; pendant qu'on la tire, elle suit sans retard */
.avant-apres.anime .aa-apres { transition: clip-path .35s ease; }
.avant-apres.anime::before,
.avant-apres.anime::after { transition: left .35s ease; }

.avant-apres:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }

/* dans une prestation, le curseur prend la place de la photo */
.presta.inverse > .avant-apres { order: 2; }

@media (max-width: 1040px) {
  .presta.inverse > .avant-apres { order: 0; }
  .presta > .avant-apres { margin: 0; }
}

/* Format 3:4 pour les portes doubles, plus larges en proportion :
   même hauteur à l'écran que le format 2:3 (627 px), un peu plus large. */
.avant-apres.aa-34 { aspect-ratio: 3 / 4; max-width: 470px; }
/* Format porte seule, cadrée comme le client l'a fait (mur et interrupteur
   à gauche, rien à droite du bâti) : même hauteur à l'écran, environ 630 px. */
.avant-apres.aa-porte { aspect-ratio: 651 / 1500; max-width: 274px; }

/* Thème seulement : l'étiquette « Urgence » des prestations est un
   paragraphe dans le thème (un <span> dans la maquette). La règle
   .presta p, plus précise que .marqueur, lui imposait le texte courant :
   gris, 15 px, marge haute — vu sur une capture du client le 31/10/2026. */
.presta .marqueur {
  margin-top: 0;
  font: 900 10px/1 var(--sans);
  letter-spacing: 1.6px;
  color: var(--blanc);
}