/* ==================================================================
   JO & TOIT — feuille de styles principale
   Charpente, couverture & zinguerie — Besançon
   ------------------------------------------------------------------
   Les largeurs de colonnes (29.666 % / 47.25 % / 64.833 % + gouttière
   de 5.5 %) et le rythme vertical (section 54px / rangée 27px,
   conteneur 1080px) reprennent exactement la maquette d'origine.
   ------------------------------------------------------------------
   Sommaire
   1.  Variables & réglages
   2.  Reset & bases
   3.  Utilitaires de mise en page
   4.  Boutons
   5.  En-tête (barre noire + navigation)
   6.  Menu mobile
   7.  Section Hero
   8.  Section Services
   9.  Section Chiffres
   10. Section Entreprise
   11. Section Réalisations (galerie)
   12. Section Témoignages
   13. Section Contact + formulaire
   14. Pied de page
   15. Visionneuse (lightbox)
   16. Pages secondaires
   17. Pages services
   18. Animations
   19. Responsive — tablette (≤ 980px)
   20. Responsive — mobile (≤ 767px)
   ================================================================== */


/* ==================================================================
   1. VARIABLES & RÉGLAGES
   ================================================================== */

:root {
  /* Couleurs */
  --jaune:        #ffd000;
  --jaune-fonce:  #d9b100;
  --noir:         #000000;
  --blanc:        #ffffff;
  --texte:        #666666;
  --texte-clair:  #a0a0a0;
  --gris-footer:  #cecece;
  --gris-champ:   #999999;

  /* Typographie */
  --f-titre: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-corps: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-deco:  'Kanit', 'Roboto Condensed', Helvetica, Arial, sans-serif;

  /* Rythme vertical */
  --section-y: 54px;
  --row-y:     27px;
  --conteneur: 1080px;
  --gouttiere: 5.5%;

  /* Hauteur de l'en-tête fixe et de sa barre noire de contact */
  --header-h: 85px;
  --barre-infos: 31px;
}


/* ==================================================================
   2. RESET & BASES
   ================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--f-corps);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7em;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Une révélation qui glisse latéralement ne doit jamais faire apparaître
   de barre de défilement horizontale. */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  font-family: var(--f-titre);
  font-weight: 700;
  line-height: 1em;
  color: var(--noir);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Zone de texte administrée. Elle peut contenir plusieurs paragraphes et
   des listes : ce ne peut donc pas être un <p>, mais elle doit se comporter
   comme le paragraphe qu'elle remplace. */
.texte-libre { margin: 0 0 1em; }
.texte-libre:last-child { margin-bottom: 0; }
.texte-libre > :first-child { margin-top: 0; }
.texte-libre > :last-child { margin-bottom: 0; }

a {
  color: var(--noir);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}
a:hover { color: var(--jaune-fonce); }

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

/* La règle [hidden]{display:none} du navigateur vient de sa feuille par
   défaut : n'importe quel display: block/flex/grid posé sur une classe
   l'emporte sur elle. On la remet au-dessus une bonne fois pour toutes. */
[hidden] { display: none !important; }

ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .2em; }

/* Ordre de dégradation : les moteurs qui ignorent :focus-visible
   gardent au moins l'anneau de :focus. */
:focus { outline: 3px solid var(--jaune); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: 0; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
/* Sur les aplats jaunes, l'anneau jaune serait invisible. */
.nav__devis a:focus-visible,
.btn--jaune:focus-visible,
.menu-mobile li:last-child a:focus-visible { outline-color: var(--noir); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--jaune);
  color: var(--noir);
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }


/* ==================================================================
   3. UTILITAIRES DE MISE EN PAGE
   ================================================================== */

.section {
  position: relative;
  padding: var(--section-y) 0;
}

.conteneur {
  width: 80%;
  max-width: var(--conteneur);
  margin: 0 auto;
}

.rangee { padding: var(--row-y) 0; }

/* Colonnes : flex + gouttière en pourcentage, comme la maquette */
.grille {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gouttiere);
}
.grille--3 > * { flex: 0 0 29.666%; min-width: 0; }
.grille--2 > * { flex: 0 0 47.25%;  min-width: 0; }

.titre-section {
  font-size: 44px;
  line-height: 1em;
  margin-bottom: 10px;
}


/* ==================================================================
   4. BOUTONS
   ================================================================== */

.btn {
  display: inline-block;
  padding: 15px 40px;
  font-family: var(--f-corps);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blanc);
  background: var(--noir);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.btn::after {
  content: '\2192';
  display: inline-block;
  width: 0;
  margin-left: 0;
  height: 1em;
  opacity: 0;
  overflow: hidden;
  vertical-align: -.12em;
  transition: width .3s ease, margin .3s ease, opacity .3s ease;
}
.btn:hover {
  color: var(--noir);
  background: var(--jaune);
}
.btn:hover::after {
  width: 1em;
  margin-left: .3em;
  opacity: 1;
}

/* Variante entourée de blanc (hero) */
.btn--halo { box-shadow: 0 0 0 10px var(--blanc); }

.btn--jaune {
  color: var(--noir);
  background: var(--jaune);
}
.btn--jaune:hover {
  color: var(--blanc);
  background: var(--noir);
}


/* ==================================================================
   5. EN-TÊTE
   ================================================================== */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* --- Barre noire de contact --- */
.entete__infos {
  background: var(--noir);
  color: var(--blanc);
  font-size: 12px;
  line-height: 1;
}
.entete__infos .conteneur {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 9px 0 10px;
}
.entete__infos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blanc);
  font-weight: 600;
}
.entete__infos a:hover { color: var(--jaune); }
/* Le numéro est le principal appel à l'action mobile : 12px de haut ne
   suffisent pas au doigt. Zone de clic élargie sans décaler la barre. */
.entete__infos a { position: relative; }
.entete__infos a::after {
  content: '';
  position: absolute;
  inset: -11px -8px;
}
.entete__infos svg { width: 12px; height: 12px; fill: currentColor; }

/* --- Barre blanche : logo + navigation --- */
.entete__barre {
  position: relative;
  background: var(--blanc);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.entete__barre .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
}

/* Le logo est plus haut que la barre : il déborde vers le BAS.
   Aligné en haut, il ne peut jamais être rogné par le bord de l'écran,
   y compris quand l'en-tête se compacte au défilement. */
.entete__logo {
  position: relative;
  z-index: 10;
  display: block;
  width: 125px;
  flex: 0 0 auto;
  align-self: flex-start;
}
.entete__logo img {
  width: 125px;
  height: 125px;
  margin-top: 0;
}

/* --- Navigation principale --- */
.nav__liste {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__liste li { margin: 0; }
.nav__liste a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--noir);
}
.nav__liste a:hover,
.nav__liste a[aria-current='page'] { color: var(--jaune-fonce); }

/* Le bouton renvoie vers #contact, comme le lien « Contact » : le
   repérage de section les marquait tous deux comme actifs et le texte
   passait en doré sur fond jaune. Il reste noir en toutes circonstances. */
.nav__liste .nav__devis a,
.nav__liste .nav__devis a[aria-current='page'] {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 20px;
  background: var(--jaune);
  color: var(--noir);
  font-weight: 600;
}
.nav__liste .nav__devis a:hover {
  background: var(--noir);
  color: var(--jaune);
}

/* --- Sous-menu des prestations ---
   S'ouvre au survol et à la tabulation (:focus-within), sans JavaScript.
   Le lien parent reste cliquable et mène à la section « Les services ». */
.nav__deroulant { position: relative; }
.nav__liste .nav__deroulant > a {
  display: flex;
  align-items: center;
  height: 54px;
}
.nav__deroulant > a::after {
  content: '';
  width: 6px;
  height: 6px;
  margin: -3px 0 0 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease, margin .25s ease;
}
.nav__deroulant:hover > a::after,
.nav__deroulant:focus-within > a::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.nav__sous {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 20;
  min-width: 210px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--blanc);
  border-top: 3px solid var(--jaune);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.nav__deroulant:hover > .nav__sous,
.nav__deroulant:focus-within > .nav__sous,
.nav__sous[data-ouvert='true'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.nav__sous li { margin: 0; }
.nav__liste .nav__sous a {
  display: block;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--noir);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.nav__sous li:last-child a { border-bottom: 0; }
.nav__liste .nav__sous a:hover,
.nav__liste .nav__sous a[aria-current='page'] {
  background: var(--jaune);
  color: var(--noir);
}

/* Bouton hamburger (masqué sur ordinateur) */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: var(--noir);
  transition: transform .3s ease, opacity .2s ease;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==================================================================
   6. MENU MOBILE
   ================================================================== */

.menu-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blanc);
  border-top: 3px solid var(--jaune);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.menu-mobile[data-ouvert='true'] { display: block; }
.menu-mobile ul { margin: 0; padding: 0; list-style: none; }
.menu-mobile li { margin: 0; }
.menu-mobile a {
  display: block;
  padding: 17px 6%;
  font-size: 15px;
  font-weight: 600;
  color: var(--noir);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.menu-mobile li:last-child a {
  border-bottom: 0;
  background: var(--jaune);
}


/* ==================================================================
   7. SECTION HERO
   ================================================================== */

.hero {
  margin-bottom: 80px;
  padding: 0;
}
.hero__grille {
  display: flex;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
.hero__grille > * { flex: 1 1 50%; min-width: 0; }

/* --- Colonne gauche : présentation --- */
.hero__intro {
  position: relative;
  padding: 5%;
  text-align: center;
}
.hero__logo {
  width: 225px;
  height: 225px;
  margin: 0 auto 30px;
}
/* Conteneur neutralisé : le h1 réunit deux lignes qui gardent chacune son
   propre style, exactement comme quand elles étaient un <p> et un <h1>. */
.hero__h1 {
  margin: 0;
  font: inherit;
  color: inherit;
}
.hero__h1 > span { display: block; }

.hero__surtitre {
  margin: 0 0 10px;
  font-family: var(--f-deco);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--jaune);
}
.hero__titre {
  margin: 0 0 10px;
  font-family: var(--f-titre);
  font-size: 4vw;
  font-weight: 500;
  line-height: 1em;
  color: var(--noir);
}
.hero__accroche {
  margin: 0 0 10px;
  font-family: var(--f-titre);
  font-size: 26px;
  font-weight: 700;
  line-height: 1em;
  color: var(--noir);
}
.hero__texte {
  font-size: 16px;
  line-height: 2em;
}

/* Triptyque flottant, en débord sous la colonne.
   Le PNG est un cache blanc percé de trois arches : la photo placée
   en fond de l'image apparaît à travers les découpes. */
.hero__triptyque {
  position: absolute;
  right: 10px;
  bottom: -80px;
  width: 40%;
  max-width: 300px;
  background: url('../img/galerie/toiture-2.webp') center / cover no-repeat;
}

/* --- Colonne droite : photo + toit jaune --- */
.hero__panneau {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: url('../img/galerie/toiture-23.webp') center / cover no-repeat;
}

/* Toit jaune décoratif, posé derrière le texte.
   Le sommet n'est pas une valeur arbitraire : il se déduit de la pente.
   La colonne de texte vaut 0.754 fois la largeur du toit (padding de 8 %
   du panneau de chaque côté), donc le jaune ne couvre une ligne entière
   qu'à 0.754 x --roof sous le sommet. On remonte le sommet d'autant pour
   que la première ligne (le h2, à 130px du haut) soit toujours sur le
   jaune. Plancher à -52px : il faut 36px de descente pour que le pignon
   soit plus large que l'icône (100px) — sans ce plancher, le faîtage
   traverserait le dessin entre 1000 et 1300px de large.
   Le toit étant en position absolue, rien ne bouge dans le flux. */
.hero__toit {
  --roof: 165px;              /* hauteur de la pente */
  --ratio-texte: .754;        /* largeur du texte / largeur du toit */
  --depart-texte: 130px;      /* icône 100px + sa marge basse 30px */
  --garde: 8px;               /* sécurité au-dessus de la 1re ligne */
  --sommet: min(-52px, calc(var(--depart-texte) - var(--garde)
                            - var(--ratio-texte) * var(--roof)));
  position: absolute;
  top: var(--sommet);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--jaune);
  -webkit-clip-path: polygon(50% 0, 100% var(--roof), 100% 100%, 0 100%, 0 var(--roof));
  clip-path: polygon(50% 0, 100% var(--roof), 100% 100%, 0 100%, 0 var(--roof));
}
/* La pente du toit suit la largeur du panneau là où les unités de
   conteneur sont disponibles (angle identique à toute largeur). */
@supports (width: 1cqw) {
  .hero__panneau { container-type: inline-size; }
  .hero__toit { --roof: 23.18cqw; }
}

.hero__panneau-contenu {
  position: relative;
  z-index: 2;
  flex: 0 0 65%;
  padding: 0 8% 15%;
  text-align: center;
  color: var(--noir);
  font-weight: 700;
  line-height: 2em;
}
.hero__panneau-contenu .icone {
  width: 100px;
  height: 100px;
  margin: 0 auto 30px;
}
.hero__panneau-contenu h2 {
  font-size: 20px;
  line-height: 1em;
  margin-bottom: 10px;
}
.hero__panneau-contenu p,
.hero__panneau-contenu li { color: var(--noir); font-weight: 700; }
.hero__panneau-contenu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
.hero__panneau-contenu li { line-height: 1.85em; }
/* La puce est posée dans le flux du texte, et non par list-style : sur un
   bloc centré, un marqueur de liste resterait collé à gauche alors que la
   ligne, elle, est centrée.
   La marge négative annule exactement la largeur de la puce (5 + 9 - 14 = 0) :
   elle déborde donc à gauche du texte au lieu de le pousser. Sans cela, vers
   1000 px, deux intitulés passaient sur deux lignes et le panneau jaune
   s'allongeait. */
.hero__panneau-contenu li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  margin-left: -14px;
  vertical-align: .2em;
  background: currentColor;
  border-radius: 50%;
}

.hero__cta {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}


/* ==================================================================
   8. SECTION SERVICES
   ================================================================== */

.service__icone {
  width: 100px;
  height: 100px;
  margin-bottom: 30px;
  background: url('../img/ui/oval.png') left top no-repeat;
}
.service__icone img { width: 100px; height: 100px; }

.service__titre {
  margin: 0 0 10px;
  font-family: var(--f-deco);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3em;
  color: var(--noir);
}
.service__accroche {
  margin: 0 0 10px;
  font-family: var(--f-titre);
  font-size: 20px;
  font-weight: 700;
  line-height: 1em;
  color: var(--noir);
}
.service__texte { line-height: 1.8em; }
.service__texte strong { color: var(--noir); }

/* Bouton des trois cartes : le dessin des autres boutons du site, resserré
   pour tenir dans une colonne de 320 px. Le métier reste dans le libellé
   lu par les moteurs et les lecteurs d'écran, sans allonger le bouton. */
.btn--carte {
  margin-top: 20px;
  padding: 14px 32px;
}

/* Les trois textes n'ont pas la même longueur : sans cela les boutons se
   retrouvent à trois hauteurs différentes, ce qui se voit maintenant
   qu'ils sont pleins. La colonne s'étire, le bouton se cale en bas. */
.service { display: flex; flex-direction: column; }
.service__texte { display: flex; flex-direction: column; flex: 1 1 auto; }
.service__texte .btn--carte { margin-top: auto; align-self: flex-start; }


/* ==================================================================
   9. SECTION CHIFFRES
   ================================================================== */

.chiffres {
  padding: var(--section-y) 0 0;
  overflow: hidden;
  background: url('../img/galerie/toiture-10.webp') center / cover no-repeat;
}
.chiffres__bloc {
  position: relative;
  z-index: 10;
  margin-top: 300px;
  padding: 60px 20px;
  background: var(--jaune);
}
.chiffre {
  text-align: center;
  font-family: var(--f-deco);
  color: var(--noir);
}
.chiffre__valeur {
  margin: 0 0 20px;
  font-size: 72px;
  font-weight: 700;
  line-height: 82px;
  font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
  margin: 0;
  font-family: var(--f-deco);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5em;
  color: var(--noir);
}


/* ==================================================================
   10. SECTION ENTREPRISE
   ================================================================== */

.entreprise {
  padding-top: 0;
  overflow: hidden;
}

/* Bandeau diagonal blanc qui coiffe la section */
.entreprise__diagonale {
  position: absolute;
  top: 0; left: 0;
  z-index: 10;
  width: 100%;
  height: 10vw;
  background: var(--blanc);
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.entreprise__grille {
  display: flex;
  gap: 0 var(--gouttiere);
  align-items: flex-start;
}
.entreprise__visuel { position: relative; flex: 0 0 64.833%; min-width: 0; }
/* La colonne de texte doit passer DEVANT le visuel : .entreprise__visuel
   est positionné, pas .entreprise__texte — la photo, la bande de tuiles
   et le motif se peignaient donc par-dessus le texte. */
.entreprise__texte {
  position: relative;
  z-index: 2;
  flex: 0 0 29.666%;
  min-width: 0;
  padding-top: 16%;
}

.entreprise__photo {
  width: calc(100% + 20vw);
  max-width: none;
  margin-left: -20vw;
}
/* Bande de tuiles jaune, calée en bas de la photo */
.entreprise__bande {
  position: absolute;
  left: -20vw;
  bottom: 0;
  width: calc(100% + 20vw);
  max-width: none;
}
/* Motif d'arches noir, en débord bas-droite */
.entreprise__motif {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 190px;
}

/* Carte blanche sous le texte : le bloc chevauche la photo sur ~146px et
   le corps de texte gris y tombait à 1,5:1 de contraste sur les tuiles.
   Les respirations sont reprises sur la largeur et sur les marges, si
   bien que la longueur des lignes, les retours à la ligne et la position
   du bouton restent identiques au pixel près. */
.entreprise__texte .bloc-texte {
  --carte-x: 30px;
  --carte-y: var(--row-y);

  width: calc(100% + 64% + 2 * var(--carte-x));
  margin: calc(-1 * var(--carte-y)) 0 calc(-1 * var(--carte-y)) calc(-64% - var(--carte-x));
  padding: var(--carte-y) var(--carte-x);
  background: var(--blanc);
  line-height: 1.8em;
}
.entreprise__texte h2 {
  font-size: 44px;
  line-height: 1.1em;
  margin-bottom: 10px;
}
.entreprise__texte strong { color: var(--noir); }
.entreprise__texte > .btn { margin-top: 30px; }


/* ==================================================================
   11. SECTION RÉALISATIONS (MOSAÏQUE FILTRABLE)
   ================================================================== */

.realisations__intro {
  max-width: 720px;
  margin-bottom: 30px;
  line-height: 1.9em;
}

/* --- Barre de filtres --- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.filtres li { margin: 0; }
.filtres button {
  padding: 11px 22px;
  border: 2px solid #e4e4e4;
  border-radius: 0;
  background: transparent;
  font-family: var(--f-corps);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--noir);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.filtres button:hover { border-color: var(--jaune); }
.filtres button[aria-pressed='true'] {
  background: var(--jaune);
  border-color: var(--jaune);
}
.filtres .compte {
  margin-left: 7px;
  font-weight: 400;
  color: var(--texte);
}
.filtres button[aria-pressed='true'] .compte { color: var(--noir); }

/* --- Mosaïque ---
   La hauteur de rangée est calculée pour que chaque tuile garde le
   format 3:2 des photos, à toutes les largeurs. */
.mosaique {
  --cols: 4;
  --ecart: 14px;
  --largeur: min(80vw, 1080px);

  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: calc((var(--largeur) - (var(--cols) - 1) * var(--ecart)) / var(--cols) / 1.5);
  gap: var(--ecart);
  grid-auto-flow: dense;
}

.mosaique__item {
  position: relative;
  grid-column: span 1;
  grid-row: span 1;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #ececec;
  cursor: zoom-in;
}
.mosaique__item--large { grid-column: span 2; grid-row: span 2; }
.mosaique__item:focus-visible { outline-offset: -6px; }

.mosaique__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mosaique__item:hover img,
.mosaique__item:focus-visible img { transform: scale(1.06); }

.mosaique__voile {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, .78));
  opacity: 0;
  transition: opacity .3s ease;
}
.mosaique__item:hover .mosaique__voile,
.mosaique__item:focus-visible .mosaique__voile { opacity: 1; }
.mosaique__cat {
  font-family: var(--f-deco);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--jaune);
}

.mosaique__loupe {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--jaune);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease;
}
.mosaique__loupe svg { width: 16px; height: 16px; fill: var(--noir); }
.mosaique__item:hover .mosaique__loupe,
.mosaique__item:focus-visible .mosaique__loupe { opacity: 1; transform: none; }

.realisations__plus {
  display: block;
  margin: 34px auto 0;
}
.realisations__vide {
  padding: 40px 0;
  text-align: center;
  color: var(--texte);
}


/* Flèches */
.diapo-fleche {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .85);
  border: 0;
  color: var(--noir);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background-color .2s ease;
}
.temoignages:hover .diapo-fleche,
.temoignages:focus-within .diapo-fleche { opacity: 1; }
.diapo-fleche:hover { background: var(--jaune); }
.diapo-fleche--prec { left: 0; }
.diapo-fleche--suiv { right: 0; }
/* Écran tactile : le survol n'existe pas, les flèches resteraient
   invisibles à tout jamais. */
@media (hover: none), (pointer: coarse) {
  .diapo-fleche { opacity: 1; }
}

/* Pastilles de navigation */
.diapo-points {
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0 20px;
  list-style: none;
}
.diapo-points li { margin: 0; }
.diapo-points button {
  display: block;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--noir);
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.diapo-points button[aria-current='true'] {
  opacity: 1;
  transform: scale(1.4);
}
/* Cible de pointage portée à ~30px sans toucher au dessin (WCAG 2.5.8) */
.diapo-points button { position: relative; }
.diapo-points button::after {
  content: '';
  position: absolute;
  inset: -12px;
}
/* ==================================================================
   12. SECTION TÉMOIGNAGES
   ================================================================== */

/* Empilement en grille : toutes les citations occupent la même cellule,
   la scène prend donc la hauteur de la plus longue. Avec l'ancien
   min-height figé, la 2e citation débordait de 93px sur les pastilles
   entre 981 et 1150px de large. */
.temoignages__scene {
  position: relative;
  display: grid;
}
.temoignage {
  grid-area: 1 / 1;
  justify-self: center;
  width: 100%;
  /* 56px de gouttière de chaque côté pour les flèches de 48px */
  max-width: min(950px, calc(100% - 112px));
  padding-bottom: 30px;
  margin: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  /* La citation sortante s'efface AVANT que l'entrante n'apparaisse :
     sans ce décalage les deux textes se superposent sur le fond blanc. */
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.temoignage[data-actif='true'] {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s ease .3s, visibility 0s;
}
.temoignage blockquote {
  margin: 0 0 10px;
  font-family: var(--f-titre);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--noir);
}
.temoignage figcaption {
  font-size: 15px;
  line-height: 1.6em;
  color: var(--texte-clair);
}
.temoignage figcaption em { font-style: italic; }

.temoignages .diapo-points { position: static; margin-top: 24px; }
.temoignages .diapo-fleche { top: 40%; }


/* ==================================================================
   13. SECTION CONTACT + FORMULAIRE
   ================================================================== */

.contact {
  padding-top: 0;
  background: var(--noir);
  color: var(--blanc);
  overflow: hidden;
}
.contact__grille {
  display: flex;
  gap: 0 var(--gouttiere);
  padding-bottom: var(--section-y);
}
.contact__visuels { flex: 0 0 47.25%; min-width: 0; }
.contact__panneau { flex: 0 0 47.25%; min-width: 0; padding-top: 10.75%; }

.contact__visuels img {
  width: calc(100% + 10vw);
  max-width: none;
  margin-left: -10vw;
}
.contact__visuels img + img { margin-top: 30px; }

.contact__titre {
  font-family: var(--f-deco);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--blanc);
  margin-bottom: 10px;
}

.contact__coordonnees {
  display: grid;
  /* minmax(0,1fr) : sans lui les colonnes refusent de descendre sous la
     largeur de l'adresse e-mail et débordent du panneau entre 981 et 1345px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 60px;
  margin: 50px 0;
}
.coordonnee { display: flex; gap: 15px; }
.coordonnee > div { min-width: 0; }
.coordonnee p,
.coordonnee a { overflow-wrap: anywhere; }
.coordonnee__icone {
  flex: 0 0 32px;
  width: 32px;
  color: var(--jaune);
}
.coordonnee__icone svg { width: 24px; height: 24px; fill: currentColor; }
.coordonnee h3 {
  margin: 0 0 10px;
  font-family: var(--f-deco);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--blanc);
}
.coordonnee p,
.coordonnee .texte-libre { margin: 0; color: var(--blanc); line-height: 1.8em; }
.coordonnee a { color: var(--blanc); }
.coordonnee a:hover { color: var(--jaune); }

/* --- Formulaire --- */
.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.formulaire__champ { min-width: 0; }
.formulaire__champ--large { grid-column: 1 / -1; }

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  min-width: 0;
  padding: 16px;
  font-family: var(--f-corps);
  font-size: 14px;
  line-height: 1.2;
  color: var(--noir);
  background: var(--blanc);
  border: 2px solid transparent;
  border-radius: 0;
  appearance: none;
}
.formulaire textarea { height: 150px; resize: vertical; }
.formulaire select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 7px;
  padding-right: 40px;
  cursor: pointer;
}
/* « Objet » grisé tant qu'aucune valeur n'est choisie */
.formulaire select:invalid { color: var(--gris-champ); }
.formulaire select:has(option[value='']:checked) { color: var(--gris-champ); }
.formulaire ::placeholder { color: var(--gris-champ); opacity: 1; }
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: 0;
  border-color: var(--jaune);
  box-shadow: 0 0 0 3px rgba(255, 208, 0, .45);
}
.formulaire input:user-invalid,
.formulaire select:user-invalid,
.formulaire textarea:user-invalid { border-color: #e05252; }

.formulaire__pied {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}
/* Mention exigée par Google. Elle remplace le badge flottant, qu'on a le
   droit de masquer à cette condition — et qui recouvrait le contenu en
   bas à droite de chaque page. */
.formulaire__recaptcha {
  flex: 1 1 200px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5em;
  color: #9a9a9a;
}
.formulaire__recaptcha a { color: #c9c9c9; text-decoration: underline; }
.formulaire__recaptcha a:hover { color: var(--jaune); }
.grecaptcha-badge { visibility: hidden; }

.formulaire button[type='submit'] {
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Champ anti-spam invisible */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messages de retour */
.formulaire__message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  font-weight: 700;
  line-height: 1.5;
}
.formulaire__message[data-etat='ok']     { background: var(--jaune); color: var(--noir); }
.formulaire__message[data-etat='erreur'] { background: #e05252; color: var(--blanc); }
.formulaire__message[hidden] { display: none; }


/* ==================================================================
   14. PIED DE PAGE
   ================================================================== */

.pied {
  padding: 15px 0 5px;
  background: var(--noir);
}
.pied .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pied__mentions {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7em;
  color: var(--gris-footer);
}
.pied__mentions a { color: var(--gris-footer); font-weight: 700; }
.pied__mentions a:hover { color: var(--jaune); }


/* ==================================================================
   15. VISIONNEUSE (LIGHTBOX)
   ================================================================== */

/* Sans cette règle, un moteur qui ignore <dialog> affiche la visionneuse
   en bas de page au lieu de la masquer. */
dialog.visionneuse:not([open]) { display: none; }

.visionneuse {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 40px;
  background: transparent;
  border: 0;
  overflow: hidden;
}
.visionneuse::backdrop { background: rgba(11, 11, 11, .93); }
.visionneuse__cadre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.visionneuse img {
  max-width: 100%;
  max-height: calc(100% - 40px);
  width: auto;
  object-fit: contain;
}
.visionneuse__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  padding: 0 60px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--blanc);
}
.visionneuse__compteur {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--f-deco);
  font-weight: 700;
  color: var(--jaune);
}

.visionneuse__fermer {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--blanc);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.visionneuse__fermer:hover { color: var(--jaune); }
.visionneuse .diapo-fleche { opacity: 1; }


/* ==================================================================
   16. PAGES SECONDAIRES
   ================================================================== */

/* Le logo déborde de 71 px sous l'en-tête : sur ces pages, dont le titre
   commence en haut à gauche, il le recouvrait. */
.page-texte { padding: calc(var(--section-y) + 44px) 0 80px; }
.page-texte h1 {
  font-size: 44px;
  line-height: 1.1em;
  margin-bottom: 30px;
}
.page-texte h2 {
  font-size: 24px;
  line-height: 1.3em;
  margin: 40px 0 12px;
}
.page-texte p,
.page-texte li { line-height: 1.9em; }
.page-texte a { text-decoration: underline; }
.page-texte strong { color: var(--noir); }
/* Bouton présenté comme un lien à l'intérieur d'un texte courant */
.lien-bouton {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--jaune-fonce); }

.tableau-cookies {
  width: 100%;
  margin: 0 0 1.4em;
  border-collapse: collapse;
  font-size: 15px;
}
.tableau-cookies th,
.tableau-cookies td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e2e2e2;
}
.tableau-cookies th { font-weight: 700; color: var(--noir); }
.tableau-cookies code { font-size: 14px; }

.page-texte .a-completer {
  padding: 2px 6px;
  background: var(--jaune);
  color: var(--noir);
  font-weight: 700;
}



/* ==================================================================
   17. PAGES SERVICES
   ================================================================== */

/* --- Fil d'Ariane --- */
.fil {
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--texte);
}
.fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fil li { margin: 0; display: flex; gap: 8px; align-items: center; }
.fil li + li::before { content: '\203A'; color: var(--texte-clair); }
.fil a { color: var(--texte); text-decoration: underline; }
.fil a:hover { color: var(--noir); }
.fil [aria-current] { font-weight: 700; color: var(--noir); }

/* --- Bandeau de titre : photo puis bloc jaune en recouvrement --- */
.service-hero { position: relative; }
.service-hero__photo {
  height: 380px;
  overflow: hidden;
  background: #dddddd;
}
.service-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-hero__bloc {
  position: relative;
  max-width: 760px;
  margin-top: -90px;
  padding: 40px 48px 44px;
  background: var(--jaune);
}
.service-hero__surtitre {
  margin: 0 0 10px;
  font-family: var(--f-deco);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--noir);
}
.service-hero h1 {
  margin: 0 0 12px;
  font-size: 46px;
  line-height: 1.05em;
}
.service-hero__accroche {
  margin: 0;
  font-family: var(--f-titre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25em;
  color: var(--noir);
}

/* --- Colonne de lecture --- */
.prose { max-width: 760px; }
.prose p { font-size: 16px; line-height: 1.9em; }
.prose strong { color: var(--noir); }

.titre-bloc {
  font-size: 32px;
  line-height: 1.15em;
  margin-bottom: 24px;
}

/* --- Cartes « nos interventions » --- */
.carte {
  padding: 28px 30px 30px;
  background: #f7f7f7;
  border-top: 4px solid var(--jaune);
}
.carte h3 {
  margin: 0 0 10px;
  font-family: var(--f-deco);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3em;
}
.carte > p,
.carte > .texte-libre { margin: 0; line-height: 1.8em; }
.grille--3 > .carte { margin-bottom: 30px; }

/* --- Liste à puces en forme de pignon --- */
.liste-toit { list-style: none; padding: 0; margin: 0 0 1.4em; }
.liste-toit li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 30px;
  line-height: 1.75em;
}
.liste-toit li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 14px;
  height: 10px;
  background: var(--jaune);
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.liste-toit strong { color: var(--noir); }

/* --- Deux colonnes texte + photo --- */
.duo {
  display: flex;
  gap: 0 var(--gouttiere);
  align-items: flex-start;
}
.duo > * { flex: 0 0 47.25%; min-width: 0; }
.duo img { width: 100%; }

/* --- Étapes numérotées --- */
.etapes {
  counter-reset: etape;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px var(--gouttiere);
}
.etapes li {
  flex: 0 0 47.25%;
  min-width: 0;
  margin: 0;
  padding-left: 62px;
  position: relative;
  line-height: 1.8em;
}
.etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--noir);
  color: var(--jaune);
  font-family: var(--f-deco);
  font-size: 20px;
  font-weight: 700;
}
.etapes h3 {
  margin: 0 0 6px;
  font-family: var(--f-titre);
  font-size: 18px;
  line-height: 1.3em;
}

/* --- Trois photos --- */
.mini-galerie {
  display: flex;
  gap: 0 var(--gouttiere);
}
.mini-galerie figure { flex: 0 0 29.666%; min-width: 0; margin: 0; }
.mini-galerie img { width: 100%; }
.mini-galerie figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6em;
  color: var(--texte);
}

/* --- Questions fréquentes --- */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid #e2e2e2; }
.faq summary {
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--f-titre);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35em;
  color: var(--noir);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 3px solid var(--jaune);
  border-bottom: 3px solid var(--jaune);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > p,
.faq details > .texte-libre {
  margin: 0 0 22px;
  padding-right: 44px;
  line-height: 1.9em;
}

/* --- Bande d'appel à l'action --- */
.bande-cta {
  background: var(--noir);
  color: var(--blanc);
  padding: 48px 0;
}
.bande-cta .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.bande-cta h2 {
  margin: 0 0 8px;
  font-family: var(--f-deco);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25em;
  color: var(--blanc);
}
.bande-cta p { margin: 0; color: var(--blanc); }
.bande-cta a.tel { color: var(--jaune); font-weight: 700; }

/* --- Autres prestations --- */
.autres { display: flex; gap: 0 var(--gouttiere); }
.autres a {
  flex: 0 0 47.25%;
  min-width: 0;
  display: block;
  padding: 26px 30px;
  background: #f7f7f7;
  border-left: 4px solid var(--jaune);
  transition: background-color .25s ease, transform .25s ease;
}
.autres a:hover { background: var(--jaune); transform: translateY(-3px); }
.autres span {
  display: block;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--texte);
}
.autres a:hover span { color: var(--noir); }
.autres strong {
  display: block;
  margin-top: 6px;
  font-family: var(--f-deco);
  font-size: 22px;
  font-weight: 600;
  color: var(--noir);
}

/* --- Lien « En savoir plus » des cartes de la page d'accueil --- */
.service__lien {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--noir);
  border-bottom: 2px solid var(--jaune);
}
.service__lien::after {
  content: ' \2192';
  transition: margin-left .25s ease;
}
.service__lien:hover { color: var(--jaune-fonce); }
.service__lien:hover::after { margin-left: .25em; }

/* --- Liens de prestations dans le pied de page --- */
.pied__prestations {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--gris-footer);
}
.pied__prestations a { color: var(--gris-footer); font-weight: 700; }
.pied__prestations a:hover { color: var(--jaune); }


/* ==================================================================
   17 bis. BANDEAU DE CONSENTEMENT
   ------------------------------------------------------------------
   Les deux boutons ont exactement la même taille et la même surface
   cliquable : refuser doit être aussi simple qu'accepter, c'est une
   obligation, pas une préférence.
   ================================================================== */

.consentement {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  padding: 18px 0;
  background: var(--noir);
  border-top: 3px solid var(--jaune);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
}
.consentement__boite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
}
.consentement__titre {
  margin: 0 0 4px;
  font-family: var(--f-deco);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--jaune);
}
.consentement__texte {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6em;
  color: #d8d8d8;
}
.consentement__texte a { color: var(--blanc); text-decoration: underline; }
.consentement__texte a:hover { color: var(--jaune); }

.consentement__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.consentement__bouton {
  min-width: 150px;
  padding: 14px 26px;
  font-family: var(--f-corps);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--blanc);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .25s ease;
}
.consentement__bouton:hover { background: #dcdcdc; }
.consentement__bouton--oui { background: var(--jaune); }
.consentement__bouton--oui:hover { background: #e6bc00; }

/* Bouton présenté comme un lien, dans le pied de page */
.pied__lien {
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--gris-footer);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.pied__lien:hover { color: var(--jaune); }


/* ==================================================================
   18. ANIMATIONS
   ------------------------------------------------------------------
   L'état masqué de départ n'existe QUE si le JS a posé .anim-actif sur
   <html> : sans JavaScript, ou si le script échoue, tout reste visible.
   Seuls transform et opacity sont animés : aucun recalcul de mise en page.
   ================================================================== */

.anim-actif [data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
}
.anim-actif [data-anim='gauche'] { transform: translateX(-22px); }
.anim-actif [data-anim='droite'] { transform: translateX(22px); }
.anim-actif [data-anim='pose']   { transform: translateY(22px) scale(.985); }

.anim-actif [data-anim].est-visible {
  opacity: 1;
  transform: none;
}

/* Les 8 techniques de couverture se posent une à une, comme des tuiles. */
.anim-actif .hero__panneau-contenu li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.anim-actif .hero__panneau-contenu.est-visible li { opacity: 1; transform: none; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(1) { transition-delay: .10s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(2) { transition-delay: .16s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(3) { transition-delay: .22s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(4) { transition-delay: .28s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(5) { transition-delay: .34s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(6) { transition-delay: .40s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(7) { transition-delay: .46s; }
.anim-actif .hero__panneau-contenu.est-visible li:nth-child(8) { transition-delay: .52s; }

/* --- En-tête qui se compacte au défilement --------------------------
   La barre noire se retire vers le haut ; l'en-tête étant en position
   fixe, body{padding-top} ne bouge pas : aucun saut du contenu. */
.entete {
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.entete-compacte .entete { transform: translateY(calc(-1 * var(--barre-infos))); }
.entete-compacte .entete__barre { box-shadow: 0 6px 22px rgba(0, 0, 0, .14); }
.entete__logo img {
  transform-origin: 50% 0;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.entete-compacte .entete__logo img { transform: scale(.86); }

/* --- Décors en parallaxe : le JS écrit un transform en ligne --------- */
.hero__triptyque,
.entreprise__motif { will-change: transform; }

/* --- Cartes de service : le survol soulève la carte ------------------ */
.service__icone img,
.service__titre { transition: transform .3s ease, color .2s ease; }
.service:hover .service__icone img,
.service:focus-within .service__icone img { transform: scale(1.06) rotate(-2deg); }
.service:hover .service__titre,
.service:focus-within .service__titre { color: var(--jaune-fonce); }

/* --- Message du formulaire : arrivée en fondu glissé ----------------- */
.formulaire__message[data-entre] { animation: message-entre .4s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes message-entre {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Visionneuse : ouverture en fondu -------------------------------- */
.visionneuse[open] { animation: visionneuse-entre .25s ease both; }
@keyframes visionneuse-entre {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Débranchement complet : la classe .anim-actif n'est jamais posée, et
   ces règles neutralisent ce qui ne dépend pas d'elle. */
@media (prefers-reduced-motion: reduce) {
  .entete,
  .entete__logo img,
  .service__icone img,
  .service__titre,
  .mosaique__item img { transition: none !important; }
  .entete-compacte .entete { transform: none; }
  .formulaire__message[data-entre],
  .visionneuse[open] { animation: none; }
}


/* ==================================================================
   19. RESPONSIVE — TABLETTE (≤ 980px)
   ================================================================== */

@media (max-width: 980px) {
  :root {
    --section-y: 40px;
    --row-y: 20px;
    /* Hauteur réelle mesurée : barre noire 31px + barre blanche 60px.
       Elle pilote body{padding-top}, scroll-padding-top et la hauteur
       maximale du menu mobile : une valeur fausse décale les ancres. */
    --header-h: 91px;
  }

  .conteneur { width: 88%; }

  .titre-section,
  .entreprise__texte h2 { font-size: 32px; }

  /* --- En-tête --- */
  .nav { display: none; }
  .nav__sous { display: none; }
  /* Le logo déborde de 40px sous la barre : sans cette réserve il
     recouvrirait le premier lien du menu déroulant. */
  .menu-mobile { padding-top: 44px; }
  .burger { display: block; }
  .entete__barre .conteneur { height: 60px; }
  .entete__logo { width: 100px; }
  .entete__logo img { width: 100px; height: 100px; margin-top: 0; }
  .entete__infos .conteneur { gap: 16px; }

  /* --- Hero --- */
  .hero { margin-bottom: 0; }
  .hero__grille { display: block; }
  .hero__intro { padding: 40px 6% 0; }
  .hero__logo { width: 180px; height: 180px; margin-bottom: 24px; }
  .hero__titre { font-size: 48px; }
  .hero__accroche { font-size: 24px; line-height: 1.2em; }
  .hero__texte { font-size: 15px; }
  .hero__triptyque {
    position: static;
    width: 100%;
    max-width: 340px;
    margin: 30px auto 0;
  }

  /* Le panneau devient : bandeau photo + bloc jaune en toit */
  .hero__panneau {
    display: block;
    margin-top: 40px;
    padding-top: 250px;
    background-position: center top;
    background-size: cover;
  }
  .hero__toit { display: none; }
  .hero__panneau-contenu {
    position: relative;
    width: 100%;
    padding: 120px 8% 96px;
    background: var(--jaune);
    clip-path: polygon(50% 0, 100% 90px, 100% 100%, 0 100%, 0 90px);
  }
  /* Le bouton se pose au centre, dans le bas du bloc jaune.
     Surtout pas de translateX(-50%) : l'animation d'apparition écrit elle
     aussi un transform sur ce bouton et écrasait le recentrage — il partait
     du milieu vers la droite et sortait du panneau. Un centrage par marges
     automatiques ne peut pas être écrasé. */
  .hero__cta {
    left: 0;
    right: 0;
    bottom: 20px;
    width: fit-content;
    margin: 0 auto;
  }
  .btn--halo { box-shadow: none; }

  /* --- Services --- */
  .grille--3 { display: block; }
  .grille--3 > * + * { margin-top: 40px; }

  /* --- Chiffres --- */
  .chiffres__bloc { margin-top: 180px; padding: 40px 20px; }
  .chiffre__valeur { font-size: 60px; line-height: 1.2em; }
  .chiffre__libelle { font-size: 20px; }

  /* --- Entreprise --- */
  .entreprise__diagonale { height: 8vw; }
  .entreprise__grille { display: block; }
  .entreprise__visuel { margin-bottom: 50px; }
  .entreprise__photo { width: calc(100% + 12vw); margin-left: -6vw; }
  .entreprise__bande { left: -6vw; width: calc(100% + 12vw); }
  .entreprise__visuel { overflow: visible; }
  .entreprise__motif { width: 130px; right: -10px; bottom: -25px; }
  .entreprise__texte { padding-top: 0; }
  /* Une seule colonne : plus de chevauchement, donc plus de carte. */
  .entreprise__texte .bloc-texte {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
  }

  /* --- Révélations : en une colonne, les blocs occupent toute la largeur.
     Une translation latérale déborderait de l'écran : on repasse tout
     en vertical. --- */
  .anim-actif [data-anim='gauche'],
  .anim-actif [data-anim='droite'] { transform: translateY(14px); }

  /* --- Diaporamas : sans survol possible, les flèches doivent rester
     visibles et atteignables au doigt --- */
  .diapo-fleche { opacity: 1; width: 44px; height: 44px; }

  /* --- Témoignages --- */
  .temoignage { max-width: 100%; }
  .temoignage blockquote { font-size: 26px; }

  /* --- Contact --- */
  .contact__grille { display: block; }
  .contact__visuels img { width: 100%; max-width: 100%; margin-left: 0; }
  .contact__visuels img:first-child { display: none; }
  .contact__panneau { padding-top: 40px; }
  .contact__titre { font-size: 36px; }
  .contact__coordonnees { margin: 30px 0; gap: 24px 40px; }

  /* --- Réalisations --- */
  .mosaique { --cols: 3; --largeur: 88vw; }

  /* --- Pages services --- */
  .service-hero__photo { height: 260px; }
  .service-hero__bloc { margin-top: -60px; padding: 30px 30px 32px; }
  .service-hero h1 { font-size: 34px; }
  .service-hero__accroche { font-size: 19px; }
  .titre-bloc { font-size: 26px; }
  .duo { display: block; }
  .duo > * + * { margin-top: 30px; }
  .etapes { display: block; }
  .etapes li + li { margin-top: 26px; }
  .mini-galerie { display: block; }
  .mini-galerie figure + figure { margin-top: 24px; }
  .autres { display: block; }
  .autres a + a { margin-top: 16px; }
  .bande-cta .conteneur { justify-content: center; text-align: center; }

  /* --- Pied de page --- */
  .pied .conteneur { justify-content: center; text-align: center; }
  .pied__mentions,
  .pied__prestations { margin-bottom: 0; }
}


/* ==================================================================
   20. RESPONSIVE — MOBILE (≤ 767px)
   ================================================================== */

@media (max-width: 767px) {
  :root {
    --section-y: 32px;
    /* barre noire 26px + barre blanche 60px */
    --header-h: 86px;
    --barre-infos: 26px;
  }

  .conteneur { width: 90%; }

  .titre-section,
  .entreprise__texte h2 { font-size: 24px; }

  /* --- Barre de contact : téléphone seul --- */
  .entete__infos { font-size: 11px; }
  .entete__infos .conteneur { justify-content: center; padding: 7px 0 8px; }
  .entete__infos .entete__mail { display: none; }

  /* --- Hero --- */
  .hero__intro { padding: 32px 6% 0; }
  .hero__logo { width: 150px; height: 150px; }
  .hero__surtitre { font-size: 15px; letter-spacing: 2px; }
  .hero__titre { font-size: 40px; }
  .hero__accroche { font-size: 20px; }
  .hero__texte { font-size: 14px; line-height: 1.9em; }

  .hero__panneau { padding-top: 190px; }
  .hero__panneau-contenu {
    padding: 90px 8% 88px;
    clip-path: polygon(50% 0, 100% 60px, 100% 100%, 0 100%, 0 60px);
  }
  .hero__cta { bottom: 16px; }
  .hero__panneau-contenu .icone { width: 74px; height: 74px; margin-bottom: 20px; }

  /* --- Chiffres --- */
  .chiffres__bloc { margin-top: 140px; padding: 32px 10px; }
  .chiffre__valeur { font-size: 44px; }
  .chiffre__libelle { font-size: 16px; line-height: 1.35em; }

  /* --- Entreprise --- */
  .entreprise__motif { width: 96px; right: 0; bottom: -18px; }

  .diapo-points { bottom: 12px; gap: 10px; }
  .temoignages .diapo-points button { width: 10px; height: 10px; }

  /* --- Témoignages --- */
  .temoignage blockquote { font-size: 20px; line-height: 1.4em; }
  .temoignages .diapo-fleche { display: none; }

  /* --- Contact --- */
  .contact__titre { font-size: 28px; }
  .contact__coordonnees { grid-template-columns: 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  /* Sous 16px, Safari iOS zoome la page à chaque prise de focus. */
  .formulaire input,
  .formulaire select,
  .formulaire textarea { font-size: 16px; }
  /* --- Bandeau de consentement --- */
  .consentement__boite { width: 90%; gap: 16px; }
  .consentement__actions { width: 100%; }
  .consentement__bouton { flex: 1 1 0; min-width: 0; padding: 14px 12px; }

  .formulaire__pied { flex-direction: column; align-items: stretch; }
  /* En colonne, la base de 200px devient une hauteur : sans ce retour à
     « auto », un vide de 200px se creusait avant le bouton. */
  .formulaire__recaptcha { flex: 0 0 auto; text-align: center; }
  .formulaire button[type='submit'] { width: 100%; }

  /* --- Visionneuse --- */
  .visionneuse { padding: 16px; }

  /* --- Réalisations --- */
  .mosaique { --cols: 2; --ecart: 10px; --largeur: 90vw; }
  .filtres button { padding: 9px 15px; font-size: 12px; }

  /* --- Pages services --- */
  .service-hero__photo { height: 200px; }
  .service-hero__bloc { margin-top: -46px; padding: 24px 22px 26px; }
  .service-hero h1 { font-size: 27px; }
  .service-hero__accroche { font-size: 17px; }
  .service-hero__surtitre { font-size: 13px; letter-spacing: 2px; }
  .titre-bloc { font-size: 22px; }
  .prose p { font-size: 15px; }
  .faq summary { font-size: 17px; }
  .bande-cta h2 { font-size: 23px; }
  .bande-cta { padding: 36px 0; }
  .carte { padding: 22px 22px 24px; }

  /* --- Pages secondaires --- */
  .page-texte h1 { font-size: 28px; }
}