/* ==========================================================================
   JETONS DE DESIGN — Repar'Quincaille V2
   Les couleurs sont celles de la marque, reprises telles quelles du site
   d'origine : orange #FF6600, anthracite #333333, gris #444444.
   Elles ne sont pas retouchées.

   L'orange de marque donne 2,94:1 en texte sur blanc. Plutôt que de le
   foncer — ce qui trahirait l'identité — il est employé là où il donne le
   meilleur de lui-même : en aplats, en filets, en icônes, et en texte sur
   fond sombre où il atteint 6,33:1. Les textes courants restent en
   anthracite, comme sur le site d'origine.
   ========================================================================== */

/* --- POLICES (hébergées localement : aucune requête vers Google, RGPD) --- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('polices/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('polices/archivo-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('polices/plex-sans-600.woff2') format('woff2');
}

:root {
  /* --- COULEURS DE MARQUE (identiques au site d'origine) --------------- */
  --orange: #FF6600;        /* la couleur de l'entreprise, jamais modifiée  */
  --orange-fonce: #E65C00;  /* uniquement pour l'état survolé d'un bouton   */
  --anthracite: #333333;    /* sur blanc : 12.63:1 AAA — texte principal    */
  --gris: #444444;          /* sur blanc :  9.74:1 AAA — texte secondaire   */
  --blanc: #FFFFFF;

  /* --- SURFACES -------------------------------------------------------- */
  --gris-clair: #F7F7F7;    /* fond de section clair                        */
  --filet: #E4E4E4;         /* filets et bordures décoratives               */
  --bord-champ: #767676;    /* 4.54:1 — bordure des champs de saisie, qui
                               doivent atteindre 3:1 (WCAG 1.4.11)          */
  --noir: #1A1A1A;          /* fond sombre, comme le pied de page d'origine */
  --noir-relief: #242424;   /* carte posée sur fond sombre                  */
  --noir-filet: #3A3A3A;    /* filets sur fond sombre                       */
  --sur-noir: #B4B4B4;      /* sur --noir : 8.13:1 — texte secondaire       */

  /* --- ACTION ---------------------------------------------------------- */
  --whatsapp: #25D366;      /* APLAT. Texte posé dessus : --noir (9.13:1).
                               Le blanc sur ce vert donne 1.98:1 — proscrit. */
  --whatsapp-fonce: #1FBE5B;
  --focus: #0B5FFF;         /* anneau de focus, 5.13:1 sur blanc            */
  --alerte: #B3261E;        /* 6.24:1 sur blanc — messages d'erreur         */

  /* --- TYPOGRAPHIE ------------------------------------------------------
     Deux familles seulement. Les intitulés courts (catégories, repères)
     sont composés en Archivo capitales espacées, pas en machine à écrire. */
  --police-titre: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --police-texte: 'Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --t-micro: 0.75rem;
  --t-legende: 0.8125rem;
  --t-petit: 0.9375rem;
  --t-base: 1rem;
  --t-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --t-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-h2: clamp(1.625rem, 1.35rem + 1.4vw, 2.5rem);
  --t-h1: clamp(2rem, 1.5rem + 2.6vw, 3.75rem);
  --t-geant: clamp(2.5rem, 1.6rem + 4.4vw, 5rem);

  /* --- ESPACEMENT ------------------------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* --- MISE EN PAGE ------------------------------------------------------ */
  --largeur-max: 76rem;
  --largeur-texte: 42rem;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);

  /* --- RAYONS ET RELIEFS -------------------------------------------------
     Le site d'origine assume des angles francs et des ombres larges et
     douces : on garde cette signature. */
  --rayon-net: 3px;
  --rayon-doux: 8px;
  --rayon-pilule: 999px;
  --ombre-carte: 0 15px 40px rgba(0, 0, 0, .07);
  --ombre-levee: 0 22px 50px rgba(0, 0, 0, .13);
  --ombre-flottante: 0 4px 12px rgba(0, 0, 0, .12), 0 16px 40px rgba(0, 0, 0, .16);

  /* --- MOUVEMENT ---------------------------------------------------------- */
  --vitesse-vive: 140ms;
  --vitesse: 260ms;
  --vitesse-ample: 620ms;
  --courbe: cubic-bezier(.2, .7, .3, 1);

  /* --- CIBLES TACTILES ----------------------------------------------------- */
  --cible-min: 44px;
}


/* ==========================================================================
   BASE — remise à zéro, éléments natifs, typographie
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* compense l'en-tête collant sur les ancres */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--anthracite);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 var(--e4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--anthracite); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

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

ul, ol { margin: 0 0 var(--e4); padding-left: var(--e5); }
li { margin-bottom: var(--e2); }

strong, b { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--filet); margin: var(--e7) 0; }

/* --- Focus clavier : visible partout, jamais supprimé -------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--rayon-net);
}
.bloc--noir :focus-visible,
.heros :focus-visible,
.pied :focus-visible { outline-color: var(--orange); }

/* --- Lien d'évitement : premier élément atteint au clavier --------------- */
.evitement {
  position: absolute;
  left: var(--e4);
  top: -100%;
  z-index: 2000;
  background: var(--anthracite);
  color: var(--blanc);
  padding: var(--e3) var(--e5);
  font-weight: 600;
  border-radius: var(--rayon-doux);
  transition: top var(--vitesse-vive) var(--courbe);
}
.evitement:focus { top: var(--e4); color: var(--blanc); }

/* --- Réservé aux lecteurs d'écran ---------------------------------------- */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Structure de page ---------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.bloc { padding-block: var(--section-y); }
.bloc--gris { background: var(--gris-clair); }
.bloc--noir { background: var(--noir); color: var(--blanc); }
.bloc--noir h1, .bloc--noir h2, .bloc--noir h3, .bloc--noir h4 { color: var(--blanc); }
.bloc--noir a { color: var(--orange); }
.bloc--serre { padding-block: calc(var(--section-y) * 0.62); }

/* Colonne de texte étroite. Posée sur l'enveloppe elle-même, elle ne doit
   pas centrer le bloc dans la page : la grille reste à sa place et ce sont
   les enfants qui se limitent en largeur. Sans quoi le texte de ces pages
   flotte au milieu, décalé par rapport à tout le reste du site. */
.mesure { max-width: var(--largeur-texte); }
.enveloppe.mesure { max-width: var(--largeur-max); }
.enveloppe.mesure > * { max-width: var(--largeur-texte); }

/* --- Intitulé de section --------------------------------------------------
   Composé dans la police de titre, en capitales espacées : le repère reste
   lisible sans recourir à une police de machine à écrire. Le carré orange
   qui le précède rappelle la couleur de l'entreprise. */
.chapeau {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--police-titre);
  font-size: var(--t-legende);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 var(--e4);
}
.chapeau::before {
  content: "";
  width: 26px;
  height: 4px;
  background: var(--orange);
  flex-shrink: 0;
}
.bloc--noir .chapeau { color: var(--orange); }
.bloc--noir .chapeau::before { background: var(--orange); }

.intro-section {
  font-size: var(--t-lead);
  color: var(--gris);
  max-width: var(--largeur-texte);
  margin-top: var(--e4);
}
.bloc--noir .intro-section { color: var(--sur-noir); }

/* Petit repère technique : une catégorie, une référence de pièce.
   En capitales dans la police de titre, jamais en machine à écrire. */
.repere {
  font-family: var(--police-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --- Mouvement : révélation au défilement -------------------------------- */
.reveler {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--vitesse-ample) var(--courbe),
              transform var(--vitesse-ample) var(--courbe);
}
.reveler.vu { opacity: 1; transform: none; }
.sans-js .reveler { opacity: 1; transform: none; }

/* --- Mouvement réduit : on respecte le réglage système ------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveler { opacity: 1; transform: none; }
}

/* --- Impression ----------------------------------------------------------- */
@media print {
  .entete, .pied, .barre-action, .cookies, .bandeau-defilant, .heros__scene { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .ariane, .evitement, .sans-impression { display: none !important; }
  .entree > * { animation: none !important; }
  body { padding-bottom: 0 !important; }
  .bloc--serre { padding-bottom: 0; }
  .texte-legal h2, .texte-legal h3, .texte-legal dt { break-after: avoid; }
  /* Le PDF des conditions circule hors du site : adresses complètes, et pas de
     « mailto: » ni de « tel: » répétés après une coordonnée déjà écrite en clair. */
  .texte-legal a[href$=".html"]::after { content: " (www.repar-quincaille.be/" attr(href) ")"; }
  .texte-legal a[href^="mailto:"]::after, .texte-legal a[href^="tel:"]::after, .texte-legal a[href*="wa.me"]::after { content: none; }
}


/* ==========================================================================
   COMPOSANTS
   Règle tenue partout : aucune information ni aucune action n'apparaît
   uniquement au survol. Le survol ne fait que renforcer ce qui est déjà là.
   Toute action fait au moins 44 px de haut.
   ========================================================================== */

/* --------------------------------------------------------------------------
   EN-TÊTE
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--blanc);
  border-bottom: 4px solid var(--orange);   /* le filet orange du site d'origine */
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: 4.8rem;
}
@media (min-width: 48rem) { .entete__barre { min-height: 6.2rem; } }
@media (min-width: 64rem) { .entete__barre { min-height: 7.6rem; } }

/* Le logo de l entreprise, tel quel. Aucun texte de remplacement : c est
   une marque déposée, on ne la recompose pas en typographie approchante. */
.logo {
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
  text-decoration: none;
  flex-shrink: 0;      /* sans quoi la barre comprime le logo et le nom déborde */
}


.entete__espace { flex: 1; }

/* Navigation bureau — le seuil est calé sur la place réellement occupée par
   le logo, les sept intitulés et le téléphone réunis. En dessous, le menu
   déroulant prend le relais : jamais de barre qui déborde. */
.nav-bureau { display: none; }
@media (min-width: 80rem) {
  .nav-bureau { display: flex; align-items: center; gap: 0; }
}
.nav-bureau a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  min-height: var(--cible-min);
  padding-inline: var(--e2);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--gris);
  text-decoration: none;
  border-radius: var(--rayon-net);
  position: relative;
}
.nav-bureau a:hover { color: var(--anthracite); background: var(--gris-clair); }
.nav-bureau a[aria-current="page"] { color: var(--anthracite); }
.nav-bureau a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--e2); right: var(--e2); bottom: 9px;
  height: 3px;
  background: var(--orange);
}

/* Téléphone d'en-tête */
.tel-entete {
  display: none;
  align-items: center;
  gap: var(--e2);
  min-height: var(--cible-min);
  padding-inline: var(--e4);
  border: 2px solid var(--orange);
  border-radius: var(--rayon-doux);
  font-weight: 700;
  font-size: var(--t-petit);
  color: var(--anthracite);
  text-decoration: none;
  white-space: nowrap;
}
.tel-entete:hover { background: var(--orange); color: var(--noir); }
@media (min-width: 48rem) { .tel-entete { display: inline-flex; } }

/* Bouton menu */
.bouton-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--cible-min);
  min-width: var(--cible-min);
  padding-inline: var(--e3);
  background: none;
  border: 2px solid var(--filet);
  border-radius: var(--rayon-doux);
  font-family: var(--police-texte);
  font-size: var(--t-legende);
  font-weight: 700;
  color: var(--anthracite);
  cursor: pointer;
}
@media (min-width: 80rem) { .bouton-menu { display: none; } }
.bouton-menu__traits { display: grid; gap: 4px; width: 18px; }
.bouton-menu__traits span {
  height: 3px;
  background: var(--orange);
  transition: transform var(--vitesse) var(--courbe), opacity var(--vitesse-vive);
}
.bouton-menu[aria-expanded="true"] .bouton-menu__traits span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] .bouton-menu__traits span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panneau de navigation mobile */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--filet);
  background: var(--blanc);
  padding-block: var(--e3) var(--e5);
}
.nav-mobile[data-ouvert="true"] { display: block; }
@media (min-width: 80rem) { .nav-mobile { display: none !important; } }
.nav-mobile a {
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
  padding: var(--e2) var(--e3);
  font-weight: 600;
  color: var(--anthracite);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-clair);
}
.nav-mobile a:hover { background: var(--gris-clair); }
.nav-mobile a[aria-current="page"] { border-left: 4px solid var(--orange); }

/* --------------------------------------------------------------------------
   BOUTONS
   Les variantes sont écrites en double classe pour passer devant les règles
   de couleur de lien des sections (« .bloc--noir a »).
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 3.4rem;
  padding: var(--e3) var(--e6);
  border: 3px solid transparent;
  border-radius: var(--rayon-doux);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform var(--vitesse-vive) var(--courbe),
              box-shadow var(--vitesse-vive) var(--courbe),
              background-color var(--vitesse-vive);
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-levee); }
.bouton:active { transform: none; box-shadow: none; }

/* WhatsApp : le vert de marque, texte noir. Le blanc dessus donne 1.98:1. */
.bouton.bouton--whatsapp { background: var(--whatsapp); color: var(--noir); }
.bouton.bouton--whatsapp:hover { background: var(--whatsapp-fonce); color: var(--noir); }

/* Orange de marque en aplat : le texte posé dessus est noir (5.93:1) */
.bouton.bouton--orange { background: var(--orange); color: var(--noir); }
.bouton.bouton--orange:hover { background: var(--orange-fonce); color: var(--noir); }

.bouton.bouton--noir { background: var(--anthracite); color: var(--blanc); }
.bouton.bouton--noir:hover { background: var(--noir); color: var(--blanc); }

.bouton.bouton--contour { background: transparent; border-color: var(--anthracite); color: var(--anthracite); }
.bouton.bouton--contour:hover { background: var(--anthracite); color: var(--blanc); }
/* Sur fond sombre — bloc noir et héros — le contour passe en orange :
   la couleur de marque ressort, et le bouton reste parfaitement lisible. */
.bloc--noir .bouton.bouton--contour,
.heros .bouton.bouton--contour { border-color: var(--orange); color: var(--blanc); }
.bloc--noir .bouton.bouton--contour:hover,
.heros .bouton.bouton--contour:hover { background: var(--orange); color: var(--noir); }

.bouton--large { width: 100%; }
@media (min-width: 30rem) { .bouton--large { width: auto; } }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e5);
}

/* --------------------------------------------------------------------------
   HÉROS
   -------------------------------------------------------------------------- */
.heros {
  position: relative;
  background: var(--noir);
  color: var(--blanc);
  isolation: isolate;
  overflow: hidden;
}
.heros__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(16,16,16,.94) 0%, rgba(16,16,16,.82) 44%, rgba(16,16,16,.50) 100%),
    linear-gradient(to top, rgba(16,16,16,.88) 0%, rgba(16,16,16,0) 52%);
}
.heros__contenu {
  padding-block: clamp(3.5rem, 2rem + 9vw, 7.5rem);
  max-width: 46rem;
}
.heros h1 { color: var(--blanc); }
.heros h1 em { font-style: normal; color: var(--orange); display: block; }
.heros__accroche {
  font-size: var(--t-lead);
  color: #DCDCDC;                /* sur le voile sombre : très lisible      */
  margin-top: var(--e5);
  max-width: 34rem;
}
.heros__accroche strong { color: var(--blanc); font-weight: 600; }

.heros__etiquette {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--police-titre);
  font-size: var(--t-legende);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--orange);      /* aplat de marque, franc et visible      */
  border-radius: var(--rayon-net);
  padding: var(--e2) var(--e4);
  margin-bottom: var(--e5);
}

/* Héros à deux colonnes : le texte et la scène animée de l'accueil */
.heros--anime .heros__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e6);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 6vw, 5rem);
}
@media (min-width: 62rem) {
  .heros--anime .heros__grille { grid-template-columns: 1.05fr 1fr; gap: var(--e8); }
}
.heros--anime .heros__contenu { padding-block: 0; max-width: none; }

/* --------------------------------------------------------------------------
   BANDEAU DÉFILANT
   -------------------------------------------------------------------------- */
.bandeau-defilant {
  background: var(--orange);
  color: var(--noir);
  overflow: hidden;
}
.bandeau-defilant__piste {
  display: flex;
  width: max-content;
  animation: defiler 34s linear infinite;
}
.bandeau-defilant:hover .bandeau-defilant__piste,
.bandeau-defilant:focus-within .bandeau-defilant__piste { animation-play-state: paused; }
.bandeau-defilant__groupe { display: flex; align-items: center; flex-shrink: 0; }
.bandeau-defilant__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  font-family: var(--police-titre);
  font-size: var(--t-legende);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bandeau-defilant__item::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--noir);
  transform: rotate(45deg);
  flex-shrink: 0;
}
@keyframes defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bandeau-defilant__piste { animation: none; }
  .bandeau-defilant { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   CARTES DE SERVICE
   Reprend la forme du site d'origine — filet orange en tête, icône, titre en
   capitales, ombre large — avec une pastille orange pleine qui donne à la
   couleur de marque la place qu'elle mérite.
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .services { grid-template-columns: repeat(4, 1fr); } }

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e3);
  background: var(--blanc);
  border-top: 6px solid var(--orange);
  padding: var(--e6) var(--e5) var(--e5);
  text-decoration: none;
  color: var(--anthracite);
  box-shadow: var(--ombre-carte);
  transition: transform var(--vitesse) var(--courbe),
              box-shadow var(--vitesse) var(--courbe),
              border-color var(--vitesse) var(--courbe);
}
.service:hover {
  color: var(--anthracite);
  transform: translateY(-10px);
  box-shadow: var(--ombre-levee);
  border-top-color: var(--anthracite);
}

/* Pastille de l'icône : l'aplat orange, bien franc */
.service__icone {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  background: var(--orange);
  border-radius: 50%;
  margin-bottom: var(--e2);
  transition: background-color var(--vitesse) var(--courbe);
}
.service__icone svg { width: 40px; height: 40px; display: block; }
.service:hover .service__icone { background: var(--anthracite); }
.service__icone svg [stroke] { stroke: var(--noir); transition: stroke var(--vitesse); }
.service:hover .service__icone svg [stroke] { stroke: var(--orange); }

.service h3 {
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}
.service__resume { font-size: var(--t-petit); color: var(--gris); margin: 0; flex: 1; }

/* Toujours visible : jamais réservé au survol de la souris */
.service__lien {
  font-weight: 700;
  font-size: var(--t-petit);
  color: var(--anthracite);
  border-bottom: 3px solid var(--orange);
  padding-bottom: 4px;
  margin-top: var(--e3);
}
.service:hover .service__lien { border-bottom-color: var(--anthracite); }

/* --------------------------------------------------------------------------
   FICHES DE DIAGNOSTIC
   -------------------------------------------------------------------------- */
.fiches {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e7);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .fiches { grid-template-columns: repeat(2, 1fr); gap: var(--e5); } }

.fiche {
  background: var(--blanc);
  border-left: 6px solid var(--orange);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  box-shadow: var(--ombre-carte);
}
.fiche:nth-child(even) { border-left-color: var(--anthracite); }
.bloc--noir .fiche { background: var(--noir-relief); box-shadow: none; }
.bloc--noir .fiche:nth-child(even) { border-left-color: var(--sur-noir); }

.fiche__reference { margin: 0; }
.fiche__symptome { font-size: var(--t-h4); }
.fiche__diagnostic { color: var(--gris); font-size: var(--t-petit); margin: 0; }
.bloc--noir .fiche__diagnostic { color: var(--sur-noir); }
.bloc--noir .repere { color: var(--orange); }

/* --------------------------------------------------------------------------
   COMPARATIF DE COÛT
   -------------------------------------------------------------------------- */
.comparatif {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e6);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 40rem) { .comparatif { grid-template-columns: 1fr auto 1fr; gap: var(--e5); } }

.comparatif__volet {
  border: 2px solid var(--noir-filet);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.comparatif__volet--nous { border-color: var(--orange); background: rgba(255,102,0,.10); }
.comparatif__etiquette { color: var(--sur-noir); margin: 0; }
.comparatif__volet--nous .comparatif__etiquette { color: var(--orange); }
.comparatif__prix {
  font-family: var(--police-titre);
  font-size: var(--t-geant);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
}
.comparatif__volet--nous .comparatif__prix { color: var(--orange); }
.comparatif__detail { font-size: var(--t-petit); color: var(--sur-noir); margin: 0; }
.comparatif__separateur {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sur-noir);
  margin: 0;
}

/* --------------------------------------------------------------------------
   MARQUES
   -------------------------------------------------------------------------- */
.marques { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); padding: 0; list-style: none; }
.marques li {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-legende);
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 2px solid var(--filet);
  border-radius: var(--rayon-net);
  padding: var(--e2) var(--e4);
  color: var(--gris);
  background: var(--blanc);
}
.marques li:hover { border-color: var(--orange); color: var(--anthracite); }

/* Code postal accolé au nom de commune : la graisse le distingue, pas l'opacité —
   à 0.75 le contraste tombait à 4,74:1 quand tout le site tient 9,74:1 */
.marques li .cp { font-weight: 400; letter-spacing: 0.02em; }
.bloc--noir .marques li { border-color: var(--noir-filet); background: var(--noir-relief); color: var(--sur-noir); }

/* --------------------------------------------------------------------------
   DÉMARCHE EN TROIS TEMPS — c'est une séquence réelle : la numérotation informe
   -------------------------------------------------------------------------- */
.demarche {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e7);
  counter-reset: etape;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .demarche { grid-template-columns: repeat(3, 1fr); } }
.etape {
  counter-increment: etape;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding-top: var(--e5);
  border-top: 4px solid var(--orange);
  position: relative;
}
.etape::before {
  content: counter(etape);
  position: absolute;
  top: calc(var(--e5) * -1 - 2px);
  left: 0;
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--noir);
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 50%;
}
.etape h3 { font-size: var(--t-h4); margin-top: var(--e5); }
.etape p { font-size: var(--t-petit); color: var(--gris); margin: 0; }
.bloc--noir .etape p { color: var(--sur-noir); }

/* --------------------------------------------------------------------------
   ZONES D'INTERVENTION
   -------------------------------------------------------------------------- */
.zones { display: grid; gap: var(--e5); margin-top: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .zones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .zones { grid-template-columns: repeat(3, 1fr); } }

.zone {
  position: relative;
  border-top: 4px solid var(--orange);
  padding: var(--e5);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
  transition: transform var(--vitesse) var(--courbe), box-shadow var(--vitesse) var(--courbe);
}
.zone:has(h3 a:hover) { transform: translateY(-6px); box-shadow: var(--ombre-levee); }

.zone__province { margin: 0 0 var(--e2); min-height: 2.4em; }
.zone h3 { font-size: var(--t-h4); margin-bottom: var(--e3); }
.zone h3 a { color: var(--anthracite); text-decoration: none; }
.zone h3 a:hover { color: var(--anthracite); text-decoration: underline; text-decoration-color: var(--orange); }
/* Le titre seul ne ferait que 21 px de haut : sa zone de clic couvre la carte */
.zone h3 a::after { content: ""; position: absolute; inset: 0; }
.zone h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.zone .bouton { position: relative; z-index: 1; }

.zone__communes { font-size: var(--t-petit); color: var(--gris); margin: 0; line-height: 1.5; }

.zone__secteurs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: var(--e4) 0 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--filet);
}
.zone__secteurs-intitule {
  flex-basis: 100%;
  font-family: var(--police-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--e1);
}
.zone__secteurs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: var(--e1) var(--e3);
  border: 2px solid var(--filet);
  border-radius: var(--rayon-net);
  font-size: var(--t-legende);
  font-weight: 700;
  color: var(--anthracite);
  text-decoration: none;
  background: var(--blanc);
}
.zone__secteurs a:hover { background: var(--orange); color: var(--noir); border-color: var(--orange); }

/* --------------------------------------------------------------------------
   FORMULAIRE DE DEVIS
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: var(--e5); margin-top: var(--e6); }
.champ { display: flex; flex-direction: column; gap: var(--e2); }
.champ__paire { display: grid; gap: var(--e5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .champ__paire { grid-template-columns: 1fr 1fr; } }

.champ label { font-weight: 700; font-size: var(--t-petit); color: var(--anthracite); }
.champ__aide { font-size: var(--t-legende); color: var(--gris); margin: 0; }
.champ__requis {
  font-family: var(--police-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: var(--e3) var(--e4);
  border: 2px solid var(--bord-champ);
  border-radius: var(--rayon-net);
  background: var(--blanc);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  color: var(--anthracite);
  transition: border-color var(--vitesse-vive);
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--anthracite); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--orange); border-width: 3px; }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"], .champ select[aria-invalid="true"] { border-color: var(--alerte); }

.champ__consentement {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  cursor: pointer;
  font-weight: 400;
  font-size: var(--t-petit);
  color: var(--gris);
  padding: var(--e2) 0;
}
.champ__consentement input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem; min-height: 1.5rem;
  margin: 1px 0 0;
  accent-color: var(--orange);
  flex-shrink: 0;
}

.champ__erreur {
  font-size: var(--t-legende);
  font-weight: 700;
  color: var(--alerte);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.champ__erreur:empty { display: none; }

/* Dépôt de photo */
.depot {
  border: 3px dashed var(--bord-champ);
  border-radius: var(--rayon-doux);
  padding: var(--e6) var(--e5);
  text-align: center;
  background: var(--gris-clair);
  transition: border-color var(--vitesse-vive), background-color var(--vitesse-vive);
}
.depot[data-survol="true"] { border-color: var(--orange); background: rgba(255,102,0,.07); }
.depot__intitule { font-weight: 700; margin-bottom: var(--e2); }
.depot__detail { font-size: var(--t-legende); color: var(--gris); margin: 0 0 var(--e4); }
.depot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-min);
  padding: var(--e3) var(--e5);
  border: 3px solid var(--anthracite);
  border-radius: var(--rayon-doux);
  font-weight: 700;
  font-size: var(--t-petit);
  cursor: pointer;
  background: var(--blanc);
}
.depot__bouton:hover { background: var(--orange); border-color: var(--orange); color: var(--noir); }
.depot input[type="file"]:focus-visible + .depot__bouton { outline: 3px solid var(--focus); outline-offset: 2px; }

.apercus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--e3);
  margin-top: var(--e4);
  padding: 0;
  list-style: none;
}
.apercus:empty { display: none; }
.apercu { position: relative; margin: 0; border: 2px solid var(--filet); overflow: hidden; background: var(--blanc); }
.apercu img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.apercu__retirer {
  position: absolute;
  top: var(--e2); right: var(--e2);
  width: var(--cible-min); height: var(--cible-min);
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: var(--rayon-net);
  background: rgba(26,26,26,.88);
  color: var(--blanc);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.apercu__retirer:hover { background: var(--orange); color: var(--noir); }
.apercu__nom { font-size: var(--t-micro); color: var(--gris); padding: var(--e2); }

.formulaire__envoi { display: flex; flex-direction: column; gap: var(--e3); }
.formulaire__mention { font-size: var(--t-legende); color: var(--gris); margin: 0; }

.message-etat {
  border-left: 6px solid var(--orange);
  background: var(--gris-clair);
  padding: var(--e4) var(--e5);
  font-size: var(--t-petit);
}
.message-etat:empty { display: none; }
.message-etat--succes { border-left-color: #0E7A41; }
.message-etat--erreur { border-left-color: var(--alerte); }

/* --------------------------------------------------------------------------
   QUESTIONS FRÉQUENTES
   -------------------------------------------------------------------------- */
.questions { margin-top: var(--e6); border-top: 2px solid var(--filet); }
.question { border-bottom: 2px solid var(--filet); }
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 3.6rem;
  padding: var(--e4) 0;
  font-family: var(--police-titre);
  font-size: var(--t-h4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--orange);
  clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
  transition: transform var(--vitesse) var(--courbe);
}
.question[open] summary::after { transform: rotate(45deg); }
.question summary:hover { color: var(--gris); }
.question__reponse { padding-bottom: var(--e5); color: var(--gris); max-width: var(--largeur-texte); }

/* --------------------------------------------------------------------------
   GALERIE AVANT / APRÈS
   -------------------------------------------------------------------------- */
.chantiers { display: grid; gap: var(--e5); margin-top: var(--e7); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .chantiers { grid-template-columns: repeat(2, 1fr); } }
.chantier {
  margin: 0;
  border: 2px solid var(--noir-filet);
  border-top: 6px solid var(--orange);
  overflow: hidden;
  background: var(--noir-relief);
}
.chantier video, .chantier img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #101010; }
.chantier figcaption { padding: var(--e4) var(--e5); }
.chantier__titre { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-h4); }
.chantier__detail { font-size: var(--t-petit); color: var(--sur-noir); margin: var(--e2) 0 0; }

/* --------------------------------------------------------------------------
   BARRE D'ACTION MOBILE — toujours visible, jamais au survol
   -------------------------------------------------------------------------- */
.barre-action {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--anthracite);
  border-top: 3px solid var(--orange);
  box-shadow: 0 -4px 18px rgba(0,0,0,.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 62rem) { .barre-action { display: none; } }
.barre-action a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 3.5rem;
  font-weight: 700;
  font-size: var(--t-petit);
  text-decoration: none;
}
.barre-action__tel { background: var(--blanc); color: var(--anthracite); }
.barre-action__wa { background: var(--whatsapp); color: var(--noir); }
@media (max-width: 61.99rem) { body { padding-bottom: 3.6rem; } }

/* --------------------------------------------------------------------------
   BANNIÈRE DES COOKIES
   Posée au-dessus de la barre d'action, jamais dessus ni dessous : les deux
   restent utilisables. Non bloquante : la page défile et se lit derrière.
   Les deux choix ont exactement le même aspect, y compris au survol.
   -------------------------------------------------------------------------- */
:root { --barre-action-h: calc(3.5rem + 3px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 62rem) { :root { --barre-action-h: 0px; } }
/* Au clavier, un lien du bas de page ne doit pas finir caché sous la barre (WCAG 2.4.11). */
html { scroll-padding-bottom: var(--barre-action-h); }

.cookies {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--barre-action-h);
  z-index: 960;
  max-height: calc(100vh - var(--barre-action-h));
  max-height: calc(100dvh - var(--barre-action-h));
  overflow-y: auto;
  padding-block: var(--e4);
  background: var(--noir);
  color: var(--sur-noir);
  border-top: 3px solid var(--orange);
  box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}
.cookies[hidden], .cookies [hidden] { display: none; }
.cookies :focus-visible { outline-color: var(--orange); }
.cookies__corps { display: grid; gap: var(--e3) var(--e6); }
@media (min-width: 44rem) {
  .cookies__corps { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.cookies__titre {
  margin: 0 0 var(--e1);
  font-family: var(--police-titre);
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--blanc);
}
.cookies__texte, .cookies__etat { margin: 0; font-size: var(--t-petit); line-height: 1.45; }
.cookies__etat { margin-top: var(--e2); font-weight: 600; color: var(--blanc); }
.cookies__texte a { color: var(--orange); white-space: nowrap; }
.cookies__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e3); }
@media (min-width: 44rem) { .cookies__actions { width: 23rem; } }
.cookies__choix, .cookies__fermer {
  min-height: var(--cible-min);
  padding: var(--e2) var(--e3);
  border-radius: var(--rayon-doux);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  font-weight: 700;
  cursor: pointer;
}
.cookies__choix { background: var(--blanc); color: var(--noir); border: 2px solid var(--blanc); }
.cookies__choix:hover { background: var(--orange); border-color: var(--orange); }
.cookies__fermer {
  grid-column: 1 / -1;
  background: none;
  color: var(--blanc);
  border: 2px solid var(--noir-filet);
}
.cookies__fermer:hover { border-color: var(--blanc); }

/* Tant qu'elle est ouverte, la fin de page et le focus clavier ne passent pas
   sous la bannière. La hauteur est mesurée par site.js. */
html.cookies-ouvert { scroll-padding-bottom: calc(var(--cookies-h, 0px) + var(--barre-action-h)); }
html.cookies-ouvert body { padding-bottom: calc(var(--cookies-h, 0px) + var(--barre-action-h)); }

/* --------------------------------------------------------------------------
   FIL D'ARIANE
   -------------------------------------------------------------------------- */
.ariane { padding-block: var(--e4); border-bottom: 1px solid var(--filet); font-size: var(--t-legende); }
.ariane ol { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; margin: 0; padding: 0; }
.ariane li { margin: 0; display: flex; align-items: center; gap: var(--e2); color: var(--gris); }
.ariane li + li::before { content: "›"; color: var(--orange); font-weight: 700; }
.ariane a {
  color: var(--gris);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding-inline: 2px;
}
.ariane a:hover { color: var(--anthracite); text-decoration: underline; text-decoration-color: var(--orange); }

/* --------------------------------------------------------------------------
   PIED DE PAGE
   -------------------------------------------------------------------------- */
.pied { background: var(--noir); color: var(--sur-noir); padding-block: var(--e8) var(--e6); border-top: 5px solid var(--orange); }
.pied__grille { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e7); } }
.pied__titre {
  font-family: var(--police-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--e4);
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: var(--e1); }
.pied a {
  color: var(--sur-noir);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
  font-size: var(--t-petit);
}
.pied a:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--orange); }
.pied__resume { font-size: var(--t-petit); max-width: 26rem; }
.pied__bas {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--noir-filet);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-legende);
}
.pied__bas a { display: inline-flex; min-height: auto; }
.pied__legaux { display: flex; flex-wrap: wrap; gap: var(--e4); }

/* --------------------------------------------------------------------------
   PAGES DE TEXTE
   -------------------------------------------------------------------------- */
.texte-legal { max-width: var(--largeur-texte); overflow-wrap: break-word; }
.texte-legal h2 { font-size: var(--t-h3); margin-top: var(--e7); margin-bottom: var(--e3); padding-left: var(--e4); border-left: 5px solid var(--orange); }
.texte-legal h3 { font-size: var(--t-h4); margin-top: var(--e5); margin-bottom: var(--e2); }
.texte-legal ul, .texte-legal p { color: var(--gris); }

/* Tableaux de la page cookies : colonnes sur grand écran, fiches empilées sur
   téléphone, où quatre colonnes déborderaient. */
.tableau-cookies table { width: 100%; border-collapse: collapse; font-size: var(--t-petit); color: var(--gris); }
.tableau-cookies th, .tableau-cookies td { padding: var(--e2) var(--e3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); overflow-wrap: break-word; }
.tableau-cookies thead th { font-family: var(--police-titre); color: var(--anthracite); border-bottom: 2px solid var(--orange); }
.tableau-cookies tbody th { font-weight: 600; color: var(--anthracite); }
@media (max-width: 43.99rem) {
  .tableau-cookies thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau-cookies table, .tableau-cookies tbody, .tableau-cookies tr, .tableau-cookies th, .tableau-cookies td { display: block; }
  .tableau-cookies tr { padding-block: var(--e2); border-bottom: 2px solid var(--filet); }
  .tableau-cookies tbody th, .tableau-cookies td { padding: var(--e1) 0; border: 0; }
  .tableau-cookies td::before { content: attr(data-libelle) " : "; font-weight: 600; color: var(--anthracite); }
}
.texte-legal .tableau-cookies + h3 { margin-top: var(--e6); }

/* Fiche d'un traitement de données : intitulé à gauche sur grand écran,
   au-dessus de sa valeur sur téléphone. */
.traitement { margin: 0; color: var(--gris); }
.traitement dt { font-weight: 600; color: var(--anthracite); margin-top: var(--e3); }
.traitement dd { margin: 0; }
@media (min-width: 44rem) {
  .traitement { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--e4); }
  .traitement dd { margin-top: var(--e3); }
}
.texte-legal h4 { margin-top: var(--e5); }
.texte-legal .version-texte { font-size: var(--t-petit); }

/* Notice officielle : l'image n'est ni retouchée ni recadrée. */
.notice-garantie { margin: var(--e5) 0; }
.notice-garantie img { display: block; width: 100%; height: auto; border: 1px solid var(--filet); }
.notice-garantie figcaption { margin-top: var(--e2); font-size: var(--t-petit); color: var(--gris); }

/* --------------------------------------------------------------------------
   AVIS
   -------------------------------------------------------------------------- */
.avis-grille { display: grid; gap: var(--e5); margin-top: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .avis-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .avis-grille { grid-template-columns: repeat(3, 1fr); } }
.avis {
  margin: 0;
  background: var(--blanc);
  border-top: 5px solid var(--orange);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  box-shadow: var(--ombre-carte);
}
/* Les étoiles portent la note : elles doivent être franchement lisibles.
   L'orange de marque donne 2,94:1 sur blanc — insuffisant. Posé sur une
   pastille noire il atteint 5,93:1, et la note ressort mieux. */
.avis__etoiles {
  display: inline-flex;
  align-self: flex-start;
  background: var(--noir);
  color: var(--orange);
  letter-spacing: 0.16em;
  font-size: 1rem;
  margin: 0;
  padding: var(--e1) var(--e3);
  border-radius: var(--rayon-net);
}
.avis blockquote { margin: 0; font-size: var(--t-petit); color: var(--gris); }
.avis figcaption {
  font-family: var(--police-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anthracite);
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--filet);
}

/* --------------------------------------------------------------------------
   SCEAU DE GARANTIE
   Posé dans le héros, en haut à droite. Sur petit écran il repasse dans le
   flux, sous le contenu : jamais par-dessus le texte.
   -------------------------------------------------------------------------- */
.sceau {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  width: 6.6rem;
  height: 6.6rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--noir);            /* 5.93:1 sur l'orange de marque */
  border: 3px solid var(--noir);
  box-shadow: 0 0 0 3px var(--orange), 0 8px 20px rgba(0,0,0,.4);
  text-align: center;
  transform: rotate(-9deg);      /* posé à la main, comme un tampon */
  flex-shrink: 0;
}
.sceau__haut,
.sceau__bas {
  font-family: var(--police-titre);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
}
.sceau__chiffre {
  font-family: var(--police-titre);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.04em;
}

/* Dans le héros : posé en haut à droite, hors du chemin du texte */
@media (min-width: 62rem) {
  .heros { position: relative; }
  .heros__sceau {
    position: absolute;
    top: var(--e7);
    right: var(--gouttiere);
    z-index: 2;
  }
}
/* En dessous, le sceau accompagne les boutons dans le flux */
@media (max-width: 61.99rem) {
  .heros__sceau { margin-top: var(--e5); }
  .sceau { width: 5.6rem; height: 5.6rem; }
  .sceau__chiffre { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   LE NOM DE LA MARQUE ÉCRIT EN TOUTES LETTRES
   Reprend la composition du logo : « Repar' » en orange, « Quincaille » en
   gris. Sur fond sombre, le gris du logo deviendrait illisible : la seconde
   moitié passe alors en clair, la couleur de marque restant sur la première.
   -------------------------------------------------------------------------- */
.marque {
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marque__repar { color: var(--orange); }
.marque__quincaille { color: var(--anthracite); }

.bloc--noir .marque__quincaille,
.heros .marque__quincaille,
.pied .marque__quincaille { color: #E8E8E8; }

/* Le logo, tel qu'il est fourni. Il porte déjà le nom de l'entreprise :
   on ne le double pas d'un texte à côté. Sa hauteur commande celle de la barre. */
.logo img {
  height: 3.4rem;
  width: auto;
}
/* Sur grand écran le logo prend toute sa place ; sur téléphone il reste
   compact, l en-tête étant collant et l espace vertical compté. */
@media (min-width: 48rem) { .logo img { height: 5.2rem; } }
@media (min-width: 64rem) { .logo img { height: 6.6rem; } }

.pied__logo {
  height: 4.4rem;
  width: auto;
  margin: 0 0 var(--e4);
}

/* En-tête de page sans photo : le voile n'a rien à assombrir, c'est le fond
   noir qui porte le titre. Un filet orange marque la limite avec le contenu. */
.heros--texte {
  border-bottom: 5px solid var(--orange);
}
.heros--texte .heros__contenu {
  padding-block: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  max-width: 44rem;
}
.heros--texte h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); }

/* --------------------------------------------------------------------------
   PAGE AVIS — appel à témoigner, avec le code QR
   -------------------------------------------------------------------------- */
.avis-appel {
  display: grid;
  gap: var(--e6);
  margin-top: var(--e6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 52rem) {
  .avis-appel { grid-template-columns: 1.4fr auto; gap: var(--e8); }
}

.avis-qr {
  margin: 0;
  text-align: center;
  background: var(--blanc);
  border-top: 5px solid var(--orange);
  box-shadow: var(--ombre-carte);
  padding: var(--e5);
  max-width: 17rem;
  justify-self: center;
}
.avis-qr img {
  width: 100%;
  height: auto;
  max-width: 13rem;
  margin-inline: auto;
  /* Un code QR ne doit jamais être lissé : ses carrés restent francs. */
  image-rendering: pixelated;
}
.avis-qr figcaption {
  font-size: var(--t-legende);
  color: var(--gris);
  margin-top: var(--e4);
  line-height: 1.45;
}

/* Auteur et source, sous chaque témoignage */
.avis figcaption { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: baseline; }
.avis__auteur { color: var(--anthracite); }
.avis__source {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0;
  text-transform: none;
  color: var(--blanc);
  background: var(--anthracite);
  padding: 2px var(--e2);
  border-radius: var(--rayon-net);
}


/* ==========================================================================
   1. LA BAIE COULISSANTE DU HÉROS
   Une baie à deux vantaux. L'animation désigne d'abord, une à une, les quatre
   pièces qui la bloquent — rail, chariots, crémone, compas — puis fait
   glisser le vantail : la baie coulisse à nouveau.

   Cycle de 13 s. Seuls transform et opacity sont animés : composition GPU,
   aucun recalcul de mise en page, fluide sur téléphone.
   ========================================================================== */

.scene {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto 3.6rem;      /* place pour la mention d'état, dessous */
}

/* Le jour derrière la baie : un halo chaud qui s'ouvre avec le vantail */
.scene::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255,102,0,.26), rgba(255,102,0,.05) 60%, transparent 74%);
  animation: baie-jour 13s var(--courbe) infinite;
}
@keyframes baie-jour {
  0%, 60%   { opacity: .5;  transform: scale(.95); }
  78%, 88%  { opacity: 1;   transform: scale(1.05); }
  98%, 100% { opacity: .5;  transform: scale(.95); }
}

.scene svg { width: 100%; height: auto; display: block; overflow: visible; }

/* --- Le vantail mobile : il coulisse devant le vantail fixe --------------- */
.baie-vantail { animation: baie-glisse 13s var(--courbe) infinite; }
@keyframes baie-glisse {
  0%, 62%   { transform: translateX(0); }
  80%, 90%  { transform: translateX(222px); }
  99%, 100% { transform: translateX(0); }
}

/* Les roues tournent en même temps que le vantail avance */
.baie-roue {
  transform-box: fill-box;
  transform-origin: center;
  animation: baie-roule 13s var(--courbe) infinite;
}
@keyframes baie-roule {
  0%, 62%   { transform: rotate(0deg); }
  80%, 90%  { transform: rotate(1080deg); }
  99%, 100% { transform: rotate(0deg); }
}

/* --- Les quatre repères, désignés l'un après l'autre ---------------------- */
.baie-repere {
  opacity: 0;
  animation: baie-repere 13s var(--courbe) infinite;
}
/* Chaque repère occupe sa propre fenêtre de temps : ils ne se chevauchent
   jamais, et tous ont disparu avant que le vantail ne se mette à glisser. */
.baie-repere--rail    { animation-name: repere-1; }
.baie-repere--chariot { animation-name: repere-2; }
.baie-repere--cremone { animation-name: repere-3; }
.baie-repere--compas  { animation-name: repere-4; }

@keyframes repere-1 {
  0%, 3%   { opacity: 0; }
  7%, 14%  { opacity: 1; }
  18%, 100% { opacity: 0; }
}
@keyframes repere-2 {
  0%, 18%  { opacity: 0; }
  22%, 29% { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes repere-3 {
  0%, 33%  { opacity: 0; }
  37%, 44% { opacity: 1; }
  48%, 100% { opacity: 0; }
}
@keyframes repere-4 {
  0%, 48%  { opacity: 0; }
  52%, 58% { opacity: 1; }
  62%, 100% { opacity: 0; }
}

/* Les pièces désignées s'éclairent au moment où on les nomme */
.baie-rail    { animation: piece-designee 13s var(--courbe) infinite; }
.baie-chariots{ animation: piece-designee-2 13s var(--courbe) infinite; }
.baie-cremone { animation: piece-designee-3 13s var(--courbe) infinite; }
.baie-compas  { animation: piece-designee-4 13s var(--courbe) infinite; }

@keyframes piece-designee {
  0%, 5%, 18%, 100% { opacity: .75; }
  8%, 14%           { opacity: 1; }
}
@keyframes piece-designee-2 {
  0%, 20%, 33%, 100% { opacity: .8; }
  23%, 29%           { opacity: 1; }
}
@keyframes piece-designee-3 {
  0%, 35%, 48%, 100% { fill: #9A9A9A; }
  38%, 44%           { fill: #FF6600; }
}
@keyframes piece-designee-4 {
  0%, 50%, 62%, 100% { opacity: .8; }
  53%, 58%           { opacity: 1; }
}

/* --- Mention d'état ------------------------------------------------------- */
.scene__etat {
  position: absolute;
  left: 50%;
  bottom: -3.4rem;
  transform: translateX(-50%);
  display: grid;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}
.scene__etat span {
  grid-area: 1 / 1;
  font-family: var(--police-titre);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: var(--e2) var(--e5);
}
/* Les deux bornes se recouvrent : l'emplacement n'est jamais vide. */
.scene__etat span:first-child {
  color: #E4E4E4;
  border: 2px solid rgba(255,255,255,.3);
  animation: etat-avant 13s var(--courbe) infinite;
}
.scene__etat span:last-child {
  color: var(--noir);
  background: var(--orange);
  border: 2px solid var(--orange);
  animation: etat-apres 13s var(--courbe) infinite;
}
@keyframes etat-avant {
  0%, 62%   { opacity: 1; }
  68%, 92%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes etat-apres {
  0%, 62%   { opacity: 0; }
  68%, 92%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* --- Mouvement réduit : la baie reste ouverte, les repères restent lisibles
   sur la première pièce. L'image garde son sens, le mouvement disparaît. --- */
@media (prefers-reduced-motion: reduce) {
  .scene::before,
  .baie-vantail, .baie-roue,
  .baie-rail, .baie-chariots, .baie-cremone, .baie-compas { animation: none; }
  .baie-vantail { transform: translateX(222px); }
  .baie-cremone { fill: #FF6600; }
  .baie-repere { animation: none; opacity: 0; }
  .baie-repere--chariot { opacity: 1; }
  .scene__etat span:first-child { animation: none; opacity: 0; }
  .scene__etat span:last-child { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   LE RÉPARATEUR
   Tant que la baie résiste, il tire par à-coups : chaque secousse est une
   tentative. Quand le vantail cède, il lâche la poignée et saute.
   -------------------------------------------------------------------------- */
/* La rotation doit se faire depuis les pieds, pas depuis le centre du
   dessin : sinon il pivote comme une aiguille au lieu de s'arc-bouter. */
.gars {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gars-cycle 13s var(--courbe) infinite;
}

@keyframes gars-cycle {
  /* Les à-coups : il tire, ça résiste, il repart en arrière */
  0%    { transform: translate(0, 0) rotate(0deg); }
  6%    { transform: translate(9px, 0) rotate(3deg); }
  10%   { transform: translate(0, 0) rotate(0deg); }
  16%   { transform: translate(9px, 0) rotate(3deg); }
  20%   { transform: translate(0, 0) rotate(0deg); }
  26%   { transform: translate(10px, 0) rotate(3.5deg); }
  30%   { transform: translate(0, 0) rotate(0deg); }
  36%   { transform: translate(10px, 0) rotate(3.5deg); }
  40%   { transform: translate(0, 0) rotate(0deg); }
  46%   { transform: translate(11px, 0) rotate(4deg); }
  50%   { transform: translate(0, 0) rotate(0deg); }
  56%   { transform: translate(11px, 0) rotate(4deg); }
  61%   { transform: translate(0, 0) rotate(0deg); }
  /* Le vantail cède : il est entraîné d'un coup vers la droite */
  66%   { transform: translate(16px, 0) rotate(5deg); }
  /* Puis il saute de joie, deux fois */
  72%   { transform: translate(6px, -34px) rotate(0deg); }
  77%   { transform: translate(6px, 0) rotate(0deg); }
  82%   { transform: translate(6px, -22px) rotate(0deg); }
  87%   { transform: translate(6px, 0) rotate(0deg); }
  92%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* L'ombre se rétracte quand il décolle : c'est ce qui donne le poids du saut */
.gars-ombre { animation: gars-ombre 13s var(--courbe) infinite; }
@keyframes gars-ombre {
  0%, 68%   { transform: scale(1); opacity: .45; }
  72%       { transform: scale(.62); opacity: .2; }
  77%       { transform: scale(1); opacity: .45; }
  82%       { transform: scale(.75); opacity: .28; }
  87%, 100% { transform: scale(1); opacity: .45; }
}
.gars-ombre { transform-box: fill-box; transform-origin: center; }

/* Bras et jambes : deux poses qui se relaient, jamais les deux à la fois */
.gars-bras--tire,  .gars-jambes--effort { animation: pose-effort 13s step-end infinite; }
.gars-bras--joie,  .gars-jambes--saut   { animation: pose-joie 13s step-end infinite; }

@keyframes pose-effort {
  0%, 65%   { opacity: 1; }
  66%, 90%  { opacity: 0; }
  91%, 100% { opacity: 1; }
}
@keyframes pose-joie {
  0%, 65%   { opacity: 0; }
  66%, 90%  { opacity: 1; }
  91%, 100% { opacity: 0; }
}

/* Mouvement réduit : il reste debout, bras levés, baie ouverte. */
@media (prefers-reduced-motion: reduce) {
  .gars, .gars-ombre { animation: none; transform: none; }
  .gars-bras--tire, .gars-jambes--effort { animation: none; opacity: 0; }
  .gars-bras--joie, .gars-jambes--saut   { animation: none; opacity: 1; }
}


/* ==========================================================================
   LES DEUX ANIMATIONS DU SITE

   1. LA BAIE COULISSANTE DU HÉROS — voir 4-baie.css.

   2. LE SCHÉMA DE CRÉMONE — plus bas dans la page, le détail du mécanisme
      interne, celui que le client ne voit jamais.

   Performance : seuls transform et opacity sont animés — composition GPU,
   aucun recalcul de mise en page, donc fluide sur téléphone.
   ========================================================================== */

/* ==========================================================================
   2. LE SCHÉMA DE CRÉMONE
   ========================================================================== */

.mecanisme {
  display: grid;
  gap: var(--e6);
  align-items: center;
  grid-template-columns: 1fr;
  margin-top: var(--e7);
}
@media (min-width: 56rem) {
  .mecanisme { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--e7); }
}

.mecanisme__schema {
  position: relative;
  background: var(--noir-relief);
  border-top: 5px solid var(--orange);
  padding: var(--e5);
}

.mecanisme__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
  margin: 0 0 var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--noir-filet);
  font-family: var(--police-titre);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-noir);
}
.mecanisme__etat { display: flex; align-items: center; gap: var(--e2); color: var(--orange); }
.mecanisme__voyant {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulsation 3.6s var(--courbe) infinite;
}
@keyframes pulsation {
  0%, 44%   { opacity: .35; transform: scale(1); }
  52%, 92%  { opacity: 1;   transform: scale(1.3); }
  100%      { opacity: .35; transform: scale(1); }
}

.mecanisme svg { width: 100%; height: auto; display: block; }

/* --- Les pièces animées ------------------------------------------------- */
/* La poignée part à l'horizontale — fenêtre ouverte — et se rabat VERS LE BAS
   pour verrouiller. C'est le sens réel : poignée en bas, pênes sortis. */
.piece-poignee {
  transform-box: fill-box;
  transform-origin: 14% 50%;
  animation: poignee 3.6s var(--courbe) infinite;
}
@keyframes poignee {
  0%, 8%    { transform: rotate(0deg); }
  30%, 78%  { transform: rotate(90deg); }
  96%, 100% { transform: rotate(0deg); }
}

.piece-tringle { animation: tringle 3.6s var(--courbe) infinite; }
@keyframes tringle {
  0%, 12%   { transform: translateY(0); }
  34%, 76%  { transform: translateY(-26px); }
  96%, 100% { transform: translateY(0); }
}

.piece-galet {
  transform-box: fill-box;
  transform-origin: center;
  animation: galet 3.6s var(--courbe) infinite;
}
@keyframes galet {
  0%, 12%   { transform: translateY(0) rotate(0deg); }
  34%, 76%  { transform: translateY(-26px) rotate(90deg); }
  96%, 100% { transform: translateY(0) rotate(0deg); }
}

.piece-gache { animation: gache 3.6s var(--courbe) infinite; }
@keyframes gache {
  0%, 30%   { stroke: #4A4A4A; fill: rgba(74,74,74,.25); }
  40%, 74%  { stroke: #FF6600; fill: rgba(255,102,0,.22); }
  90%, 100% { stroke: #4A4A4A; fill: rgba(74,74,74,.25); }
}

.piece-galet--haut, .piece-gache--haut { animation-delay: .10s; }
.piece-galet--bas,  .piece-gache--bas  { animation-delay: .05s; }

.piece-verrou { animation: verrou 3.6s var(--courbe) infinite; }
@keyframes verrou {
  0%, 40%   { opacity: 0; transform: translateY(4px); }
  50%, 74%  { opacity: 1; transform: translateY(0); }
  86%, 100% { opacity: 0; transform: translateY(4px); }
}

.piece-cote { stroke-dasharray: 3 3; }

/* --- Légende des pièces -------------------------------------------------- */
.mecanisme__legende { list-style: none; margin: var(--e5) 0 0; padding: 0; }
.mecanisme__legende li {
  display: flex;
  gap: var(--e4);
  align-items: flex-start;
  padding: var(--e4) 0;
  border-top: 1px solid var(--noir-filet);
  margin: 0;
}
.mecanisme__ref {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--orange);
  flex-shrink: 0;
  width: 2.6rem;
}
.mecanisme__piece { font-weight: 700; color: var(--blanc); display: block; }
.mecanisme__role { font-size: var(--t-petit); color: var(--sur-noir); }

@media (prefers-reduced-motion: reduce) {
  .piece-poignee { animation: none; transform: rotate(90deg); }
  .piece-tringle { animation: none; transform: translateY(-26px); }
  .piece-galet   { animation: none; transform: translateY(-26px) rotate(90deg); }
  .piece-gache   { animation: none; stroke: #FF6600; fill: rgba(255,102,0,.22); }
  .piece-verrou  { animation: none; opacity: 1; transform: none; }
  .mecanisme__voyant { animation: none; opacity: 1; }
}

/* ==========================================================================
   ENTRÉE DE PAGE — une seule séquence, jouée une fois
   ========================================================================== */
.entree > * { animation: monter 700ms var(--courbe) backwards; }
.entree > *:nth-child(1) { animation-delay: 60ms; }
.entree > *:nth-child(2) { animation-delay: 160ms; }
.entree > *:nth-child(3) { animation-delay: 260ms; }
.entree > *:nth-child(4) { animation-delay: 360ms; }
.entree > *:nth-child(5) { animation-delay: 460ms; }

@keyframes monter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entree > * { animation: none; }
}