@charset "utf-8";

/* ══════════════════════════════════════════════════════════════════════════
   Couverture Entreprise Prevel — feuille unique
   ══════════════════════════════════════════════════════════════════════════

   TROIS DÉCISIONS TIENNENT TOUT LE SITE, ne pas les défaire sans les relire :

   1. LES COULEURS SORTENT DES MATÉRIAUX DU MÉTIER, pas d'une palette de
      dépôt. L'ardoise (#2A3138) est le bleu-gris du toit mouillé, le zinc
      (#7C8894) celui d'une gouttière neuve, la brique (#A8442C) celle des
      murs du pays de Lyons. Le fond clair est un blanc LÉGÈREMENT FROID
      (#F2F3F1), pas un crème : le crème chaud est le réflexe qu'on trouve
      sur tous les sites d'artisan « authentique », et il jure avec l'ardoise.

   2. LA BRIQUE NE DIT QU'UNE CHOSE : « ici on agit ». Boutons d'appel,
      numéro de téléphone, liens de contact. Jamais un titre, jamais un
      filet décoratif. Un titre en brique, et la couleur cesse
      instantanément de vouloir dire quelque chose.

   3. AUCUN ARRONDI, AUCUNE OMBRE PORTÉE. L'ardoise et la brique sont des
      matériaux à arêtes vives ; les cartes molles à ombre grise sont la
      signature d'un gabarit qui pourrait vendre n'importe quoi. La
      hiérarchie se fait au filet et au fond, jamais à l'ombre.

   La signature du site est la FRISE D'ARDOISE (.frise, .carte::before) :
   deux rangs de rectangles décalés d'une demi-largeur, dessinés en CSS pur,
   sans une image. C'est la pose d'un toit d'ardoise, et c'est le seul
   ornement du site — d'où sa rareté : le hero, et le liseré des cartes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ————————————————————————————— Polices ————————————————————————————— */

/* Deux familles, franchement distinctes. Archivo Black a la présence d'une
   enseigne peinte — celle de « E. PREVEL Sr » sur la photo de 1880 ; Public
   Sans (dérivée de Libre Franklin) se lit comme un devis bien tapé et porte
   des chiffres nets, ce qui compte : sur ce site le numéro de téléphone EST
   l'élément principal.
   Le sous-ensemble latin suffit au français (œ, æ et les accents y sont) ;
   charger latin-ext ajouterait 30 Ko pour des caractères jamais employés. */

@font-face {
  font-family: 'Archivo Black';
  src: url('/assets/polices/archivo-black-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  src: url('/assets/polices/public-sans-latin.woff2') format('woff2');
  font-weight: 100 900; /* fichier variable : une seule requête pour tout */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ————————————————————————————— Variables ————————————————————————————— */

:root {
  /* Matériaux */
  --ardoise: #2a3138;
  --ardoise-profonde: #1b2126;
  --ardoise-claire: #3d4750;
  --zinc: #7c8894;
  --encre-douce: #5a6570; /* 5,9:1 sur blanc — le zinc n'atteint que 3,6:1
                             et ne doit donc JAMAIS porter de texte */
  --brique: #a8442c;
  --brique-sombre: #8e3823;
  --chaux: #f2f3f1;
  --blanc: #fff;

  /* Filets */
  --filet: rgba(124, 136, 148, 0.32);
  --filet-fort: rgba(42, 49, 56, 0.16);
  --filet-clair: rgba(255, 255, 255, 0.18);

  /* Rythme vertical — une seule échelle, multiples de 4 */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e12: 3rem;
  --e16: 4rem;
  --e20: 5rem;

  /* Typographie */
  --titre: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --texte: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;

  /* Largeurs */
  --large: 1180px;
  --etroit: 68ch;
}

/* ————————————————————————————— Socle ————————————————————————————— */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--ardoise);
  font-family: var(--texte);
  /* 17 px : le public de ce site a souvent passé cinquante ans, et lit
     souvent depuis un téléphone, dehors. 16 px y est petit. */
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ————————————————————————————— Titres ————————————————————————————— */

h1,
h2,
h3,
h4 {
  font-family: var(--titre);
  font-weight: 400; /* Archivo Black n'a qu'une graisse : demander 700
                       ferait synthétiser un faux gras, baveux à l'écran */
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--e4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.625rem);
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1.0625rem;
}

p {
  margin: 0 0 var(--e4);
  max-width: var(--etroit);
}

a {
  color: var(--brique);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brique-sombre);
}

/* Un contour visible au clavier, sur toutes les couleurs de fond : le
   contour du navigateur disparaît sur l'ardoise. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brique);
  outline-offset: 2px;
  border-radius: 1px;
}

.sombre a:focus-visible,
.sombre button:focus-visible,
.sombre summary:focus-visible,
.banniere a:focus-visible,
.section--sombre a:focus-visible,
.section--sombre summary:focus-visible,
.pied a:focus-visible {
  outline-color: #f2b8a6;
}

/* ————————————————————————————— Mise en page ————————————————————————————— */

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--e6);
}

.section {
  padding-block: clamp(var(--e12), 6vw, var(--e20));
}

.section--chaux {
  background: var(--chaux);
}

.section--sombre {
  background: var(--ardoise);
  color: var(--chaux);
}

.section--serree {
  padding-block: clamp(var(--e8), 4vw, var(--e12));
}

/* Un titre de section porte un filet court au-dessus, jamais un libellé en
   capitales espacées : l'œil comprend la coupure sans qu'on la lui nomme. */
.titre-section {
  padding-top: var(--e4);
  border-top: 3px solid var(--ardoise);
  display: inline-block;
  max-width: 22ch;
}

.section--sombre .titre-section {
  border-top-color: var(--zinc);
}

.intro {
  font-size: 1.1875rem;
  color: var(--encre-douce);
  max-width: 60ch;
  margin-bottom: var(--e8);
}

.section--sombre .intro {
  color: #c3ccd4;
}

.saut {
  margin-top: var(--e8);
}

/* ————————————————————————— Frise d'ardoise ————————————————————————— */

/* Deux rangs de rectangles décalés d'une demi-largeur : la pose d'un toit.
   Trois couches — les joints verticaux du rang du haut, ceux du rang du bas
   décalés de 11 px, et le joint horizontal qui sépare les deux rangs. Rien
   d'autre ne dessine ce site ; en ajouter un second ornement le banaliserait. */
.frise {
  height: 28px;
  background-color: var(--ardoise);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(255, 255, 255, 0.13) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(255, 255, 255, 0.13) 21px 22px),
    linear-gradient(180deg, transparent 0 13px, rgba(0, 0, 0, 0.3) 13px 14px, transparent 14px);
  background-size: 22px 14px, 22px 14px, 100% 28px;
  background-position: 11px 14px, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
}

/* ————————————————————————————— Boutons ————————————————————————————— */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 0.9rem 1.6rem;
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bouton--devis {
  background: var(--brique);
  color: var(--blanc);
  border-color: var(--brique);
}

.bouton--devis:hover {
  background: var(--brique-sombre);
  border-color: var(--brique-sombre);
  color: var(--blanc);
}

.bouton--appel {
  background: transparent;
  color: var(--ardoise);
  border-color: var(--ardoise);
}

.bouton--appel:hover {
  background: var(--ardoise);
  color: var(--blanc);
}

.sombre .bouton--appel,
.banniere .bouton--appel,
.section--sombre .bouton--appel {
  color: var(--blanc);
  border-color: var(--zinc);
}

.sombre .bouton--appel:hover,
.banniere .bouton--appel:hover,
.section--sombre .bouton--appel:hover {
  background: var(--blanc);
  color: var(--ardoise);
  border-color: var(--blanc);
}

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

/* Un lien d'action sans habillage de bouton : précédé d'un chevron dessiné
   en CSS. Pas de « → » collé au texte — un caractère qui n'est pas du texte
   se fait lire par les lecteurs d'écran et se copie avec la phrase. */
.lien-suite {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
}

.lien-suite::before {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-0.06em);
  flex: none;
}

.lien-suite:hover {
  border-bottom-color: transparent;
}

/* ————————————————————————————— En-tête ————————————————————————————— */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--filet-fort);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: var(--e6);
  min-height: 76px;
  padding-block: var(--e3);
}

/* Le nom tient sur DEUX lignes voulues, « Couverture Entreprise » puis
   « Prevel », et non sur trois lignes subies. C'est la place libérée par le
   menu regroupé qui le permet : à neuf entrées, la barre écrasait le nom. */
.marque {
  font-family: var(--titre);
  font-size: 1.0625rem;
  line-height: 1.14;
  max-width: 15rem;
  letter-spacing: -0.025em;
  color: var(--ardoise);
  text-decoration: none;
  margin-right: auto;
  display: block;
  padding-block: 2px;
}

.marque__nom {
  display: block;
}

.marque__metier {
  display: block;
  font-family: var(--texte);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--e4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  color: var(--ardoise);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding-block: var(--e2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav__lien:hover {
  color: var(--ardoise);
  border-bottom-color: var(--zinc);
}

.nav__lien[aria-current='page'] {
  border-bottom-color: var(--brique);
  color: var(--ardoise);
}

/* ————————————————————— Sous-menu des prestations ————————————————————— */

/* Les six prestations tiennent sous une seule entrée. À neuf entrées, la barre
   écrasait le nom de l'entreprise et personne ne lisait la neuvième.
   Le maillage interne, lui, ne perd rien : le pied de page garde les six
   liens sur TOUTES les pages, chaque page de prestation renvoie aux cinq
   autres, et l'accueil porte ses six cartes. Ce qui compte pour un moteur,
   c'est qu'un lien existe, pas qu'il soit dans la barre du haut. */

.nav__groupe {
  position: relative;
}

.nav__deploie {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--texte);
  cursor: pointer;
}

.nav__deploie::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.14em);
  transition: transform 0.16s ease;
  flex: none;
}

.nav__deploie[aria-expanded='true']::after {
  transform: rotate(-135deg) translateY(-0.1em);
}

/* La branche courante : sur une page de prestation, c'est le lien du
   sous-menu qui porte aria-current ; le bouton parent le signale à l'œil,
   sans quoi la barre n'indiquerait plus du tout où l'on est. */
.nav__deploie[data-branche] {
  border-bottom-color: var(--brique);
}

.nav__sous {
  display: none;
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--e3));
  min-width: 15rem;
  margin: 0;
  padding: var(--e2) 0;
  list-style: none;
  background: var(--blanc);
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  z-index: 60;
}

/* Trois façons d'ouvrir, et c'est délibéré. Le clic passe par le script ;
   `:focus-within` ouvre au clavier MÊME SI LE SCRIPT NE CHARGE PAS, sinon les
   six pages deviendraient inatteignables au clavier ; le survol n'est offert
   qu'aux pointeurs fins, un `:hover` au doigt restant collé après le tap. */
.nav__sous[data-ouvert],
.nav__groupe:focus-within .nav__sous {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .nav__groupe:hover .nav__sous {
    display: block;
  }
}

.nav__sous a {
  display: block;
  padding: 0.5rem var(--e4);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ardoise);
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
}

.nav__sous a:hover {
  background: var(--chaux);
  color: var(--ardoise);
  border-left-color: var(--zinc);
}

.nav__sous a[aria-current='page'] {
  border-left-color: var(--brique);
  background: var(--chaux);
}

/* Le téléphone de l'en-tête : la seule chose qu'un visiteur pressé cherche.
   Il est en brique, en chiffres tabulaires, et il ne disparaît sur aucun
   format — sur mobile il devient une icône avec le numéro à côté. */
.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--titre);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--brique);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entete__tel:hover {
  color: var(--brique-sombre);
}

.entete__tel svg {
  flex: none;
}

/* Le bouton de devis de la barre. Plus petit que ceux du corps : il
   accompagne le numéro, il ne se dispute pas la vedette avec lui. */
.entete__devis {
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.bascule {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  color: var(--ardoise);
  cursor: pointer;
}

/* ————————————————————————————— Bannière ————————————————————————————— */

.banniere {
  position: relative;
  background: var(--ardoise-profonde);
  color: var(--blanc);
  isolation: isolate;
}

.banniere__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Voile UNIFORME et dense, jamais un dégradé : sur une photo de chantier, un
   dégradé laisse le titre sur ce que le photographe a cadré au milieu, et le
   texte devient illisible pour un visiteur sur deux. */
.banniere__voile {
  position: absolute;
  inset: 0;
  background: rgba(21, 26, 31, 0.74);
  z-index: -1;
}

.banniere__contenu {
  padding-block: clamp(var(--e16), 9vw, 7.5rem);
}

.banniere h1 {
  color: var(--blanc);
  max-width: 20ch;
  margin-bottom: var(--e6);
}

.banniere__accroche {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: #d5dce2;
  max-width: 54ch;
  margin-bottom: 0;
}

/* La ligne de preuves sous la bannière : trois faits vérifiables, séparés
   par des filets verticaux. Ce sont des FAITS, pas des promesses — ce que
   l'entreprise peut prouver, et rien d'autre. */
.preuves {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--e12);
  border-top: 1px solid var(--filet-clair);
  padding-top: var(--e6);
}

.preuves__item {
  padding-right: var(--e8);
  margin-right: var(--e8);
  border-right: 1px solid var(--filet-clair);
  margin-bottom: var(--e4);
}

.preuves__item:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0;
}

.preuves__chiffre {
  display: block;
  font-family: var(--titre);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}

.preuves__libelle {
  display: block;
  font-size: 0.9375rem;
  color: #b6c0c9;
  margin-top: var(--e1);
}

/* ————————————————————————— Cartes de prestations ————————————————————————— */

.grille-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--filet-fort);
  padding: var(--e6);
  padding-top: calc(var(--e6) + 10px);
  text-decoration: none;
  color: var(--ardoise);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Le liseré d'ardoise en tête de carte : la frise, à échelle réduite. */
.carte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background-color: var(--ardoise);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, 0.16) 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(255, 255, 255, 0.16) 13px 14px),
    linear-gradient(180deg, transparent 0 4px, rgba(0, 0, 0, 0.3) 4px 5px, transparent 5px);
  background-size: 14px 5px, 14px 5px, 100% 10px;
  background-position: 7px 5px, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
}

.carte:hover {
  border-color: var(--ardoise);
  background: var(--chaux);
  color: var(--ardoise);
}

.carte h3 {
  margin-bottom: var(--e2);
}

.carte p {
  color: var(--encre-douce);
  font-size: 1rem;
  margin-bottom: var(--e4);
  flex: 1;
}

.carte__suite {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brique);
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
}

.carte__suite::before {
  content: '';
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-0.06em);
  flex: none;
}

.section--chaux .carte {
  background: var(--blanc);
}

.section--chaux .carte:hover {
  background: var(--blanc);
  border-color: var(--ardoise);
}

/* ————————————————————————— Blocs texte + image ————————————————————————— */

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--e6), 4vw, var(--e12));
  align-items: center;
}

.duo--large-texte {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.duo__figure {
  margin: 0;
}

.duo__figure img {
  width: 100%;
  border: 1px solid var(--filet-fort);
}

.duo__legende {
  font-size: 0.875rem;
  color: var(--encre-douce);
  margin-top: var(--e2);
  max-width: 46ch;
}

.section--sombre .duo__legende {
  color: #b6c0c9;
}

/* ————————————————————————————— Listes ————————————————————————————— */

/* Les interventions d'une prestation : une liste à puce carrée en ardoise,
   pas une coche verte. Une coche promet un résultat ; un carré énumère. */
.liste-travaux {
  list-style: none;
  margin: 0 0 var(--e6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e2) var(--e6);
}

.liste-travaux li {
  position: relative;
  padding-left: 1.4rem;
  padding-block: var(--e2);
  border-bottom: 1px solid var(--filet-fort);
  max-width: 46ch;
}

.liste-travaux li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 7px;
  height: 7px;
  background: var(--brique);
}

.section--sombre .liste-travaux li {
  border-bottom-color: var(--filet-clair);
}

/* ————————————————————————————— Galerie ————————————————————————————— */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.galerie figure {
  margin: 0;
}

.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--filet-fort);
}

.galerie figcaption {
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin-top: var(--e2);
}

.section--sombre .galerie figcaption {
  color: #b6c0c9;
}

/* ————————————————————————————— Preuves ————————————————————————————— */

/* Les diplômes et certificats : ce que l'entreprise peut MONTRER. Ils
   valent plus que dix adjectifs, et c'est pour ça qu'ils ont leur bloc. */
.attestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.attestation figure {
  margin: 0;
}

.attestation img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--filet-clair);
}

.attestation h3 {
  margin: var(--e3) 0 var(--e1);
  font-size: 1.0625rem;
}

.attestation p {
  font-size: 0.9375rem;
  color: #b6c0c9;
  margin: 0;
}

/* ————————————————————————— Zone d'intervention ————————————————————————— */

.communes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 62ch;
}

.communes li {
  border: 1px solid var(--filet);
  padding: 0.35rem 0.75rem;
  font-size: 0.9375rem;
  border-radius: 2px;
}

/* ————————————————————————————— Questions ————————————————————————————— */

/* <details> natif : un accordéon sans une ligne de JavaScript, dont le
   contenu reste dans le HTML servi — donc indexé, replié ou non. */
.questions {
  max-width: 78ch;
  margin: 0;
  border-top: 1px solid var(--filet-fort);
}

.question {
  border-bottom: 1px solid var(--filet-fort);
}

.question > summary {
  cursor: pointer;
  padding: var(--e4) 2.5rem var(--e4) 0;
  font-family: var(--texte);
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
  position: relative;
}

.question > summary::-webkit-details-marker {
  display: none;
}

.question > summary::after {
  content: '';
  position: absolute;
  right: 0.6rem;
  top: 1.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--brique);
  border-bottom: 2px solid var(--brique);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.question[open] > summary::after {
  transform: rotate(-135deg);
  top: 1.75rem;
}

.question > summary:hover {
  color: var(--brique);
}

.question__corps {
  padding-bottom: var(--e4);
}

.question__corps p:last-child {
  margin-bottom: 0;
}

/* ————————————————————————— Bloc de rappel ————————————————————————— */

/* Le numéro traité comme un objet typographique : c'est la seule chose que
   la moitié des visiteurs cherchent, et aucun site de couvreur ne le montre
   autrement qu'en 14 px dans un coin. */
.rappel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(var(--e8), 5vw, var(--e16));
  align-items: start;
}

.numero {
  display: inline-block;
  font-family: var(--titre);
  font-size: clamp(1.875rem, 1.1rem + 3.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blanc);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 3px solid var(--brique);
  padding-bottom: var(--e2);
  margin-bottom: var(--e2);
}

.numero:hover {
  color: var(--blanc);
  border-bottom-color: var(--blanc);
}

.numero--clair {
  color: var(--ardoise);
}

.numero--clair:hover {
  color: var(--ardoise);
  border-bottom-color: var(--ardoise);
}

.numero__mention {
  display: block;
  font-family: var(--texte);
  font-size: 0.875rem;
  font-weight: 600;
  color: #b6c0c9;
  letter-spacing: 0.01em;
  margin-bottom: var(--e2);
}

.secondaire {
  font-size: 1rem;
  color: #c3ccd4;
}

.secondaire a {
  color: var(--blanc);
}

/* ————————————————————————————— Horaires ————————————————————————————— */

.horaires {
  margin: 0;
  border-top: 1px solid var(--filet-clair);
  max-width: 30rem;
}

.horaires__ligne {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: var(--e2);
  border-bottom: 1px solid var(--filet-clair);
}

.horaires dt {
  font-weight: 600;
}

.horaires dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.horaires--clair {
  border-top-color: var(--filet-fort);
}

.horaires--clair .horaires__ligne {
  border-bottom-color: var(--filet-fort);
}

.horaires__ferme {
  color: var(--zinc);
}

/* ————————————————————————————— Formulaire ————————————————————————————— */

.formulaire {
  display: grid;
  gap: var(--e4);
  max-width: 34rem;
}

.champ {
  display: grid;
  gap: var(--e2);
}

.champ > label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.champ input,
.champ textarea,
.champ select {
  font-family: var(--texte);
  font-size: 1.0625rem;
  color: var(--ardoise);
  background: var(--blanc);
  border: 1px solid var(--zinc);
  border-radius: 2px;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
  border-color: var(--ardoise);
}

.obligatoire {
  color: var(--brique);
}

.mention-rgpd {
  font-size: 0.875rem;
  color: var(--encre-douce);
  max-width: 60ch;
}

/* Le piège à robots : un champ que personne ne voit et qu'aucun clavier
   n'atteint. Il ne remplace pas le filtre de la Pages Function — les outils
   de spam lisent le HTML et sautent ce champ — mais il ne coûte rien et
   attrape les plus simples. `display:none` le ferait ignorer de certains
   robots ; on le sort du cadre. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ————————————————————————————— Partenaires ————————————————————————————— */

.partenaires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--e6), 5vw, var(--e16));
  list-style: none;
  margin: 0;
  padding: 0;
}

.partenaires img {
  height: 44px;
  width: auto;
  /* Les logos partenaires ne sont pas des arguments : ils sont en gris pour
     ne pas se disputer l'attention avec l'accent brique, qui, lui, indique
     où agir. */
  filter: grayscale(1);
  opacity: 0.72;
}

/* ————————————————————————————— Fil d'Ariane ————————————————————————————— */

.ariane {
  padding-block: var(--e3);
  border-bottom: 1px solid var(--filet-fort);
  font-size: 0.875rem;
}

.ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--encre-douce);
}

.ariane li + li::before {
  content: '/';
  margin-right: var(--e2);
  color: var(--zinc);
}

.ariane a {
  color: var(--encre-douce);
}

.ariane a:hover {
  color: var(--brique);
}

/* ————————————————————————— Autres prestations ————————————————————————— */

.autres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.autres a {
  display: inline-block;
  border: 1px solid var(--filet);
  padding: 0.45rem 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ardoise);
  text-decoration: none;
  border-radius: 2px;
}

.autres a:hover {
  border-color: var(--ardoise);
  background: var(--ardoise);
  color: var(--blanc);
}

/* ————————————————————————————— Contenu légal ————————————————————————————— */

.legal {
  max-width: 72ch;
}

.legal h2 {
  margin-top: var(--e12);
  font-size: 1.5rem;
}

.legal h3 {
  margin-top: var(--e8);
}

.legal dl {
  margin: 0 0 var(--e6);
}

.legal dt {
  font-weight: 700;
  margin-top: var(--e3);
}

.legal dd {
  margin: 0;
}

.legal ul {
  padding-left: 1.2rem;
  max-width: var(--etroit);
}

.legal li {
  margin-bottom: var(--e2);
}

/* ————————————————————————————— Pied de page ————————————————————————————— */

.pied {
  background: var(--ardoise-profonde);
  color: #c3ccd4;
  padding-block: var(--e12) var(--e6);
  font-size: 1rem;
}

.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e8);
}

.pied h2 {
  font-size: 1rem;
  font-family: var(--texte);
  font-weight: 700;
  color: var(--blanc);
  letter-spacing: 0.01em;
  margin-bottom: var(--e3);
}

.pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied li {
  margin-bottom: var(--e2);
}

.pied a {
  color: #c3ccd4;
  text-decoration: none;
}

.pied a:hover {
  color: var(--blanc);
  text-decoration: underline;
}

.pied address {
  font-style: normal;
}

.pied__bas {
  margin-top: var(--e12);
  padding-top: var(--e4);
  border-top: 1px solid var(--filet-clair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  align-items: center;
  font-size: 0.875rem;
  color: var(--zinc);
}

.pied__bas a {
  color: var(--zinc);
}

.pied__tel {
  font-family: var(--titre);
  font-size: 1.375rem;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* La signature de l'atelier. Elle se tient au registre des liens légaux :
   lisible, jamais mise en avant — la page est celle du couvreur, pas celle de
   son prestataire. Poussée à droite de la ligne pour ne pas se mêler aux
   mentions obligatoires, avec lesquelles elle n'a rien à voir.
   `target="_blank"` parce qu'elle emmène hors du site du client, et le `rel`
   qui va avec : sans `noopener`, la page ouverte garde une prise sur celle-ci. */
.pied__signature {
  margin-left: auto;
}

.pied__signature:hover {
  color: var(--blanc);
}

@media (max-width: 640px) {
  /* Sur une seule colonne, `margin-left: auto` la collerait au bord droit,
     seule sur sa ligne, ce qui la mettrait en avant — l'inverse de ce qu'on
     veut. Elle reprend donc sa place dans le fil. */
  .pied__signature {
    margin-left: 0;
    flex-basis: 100%;
    padding-top: var(--e2);
  }
}

/* ————————————————————————————— Utilitaires ————————————————————————————— */

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brique);
  color: var(--blanc);
  padding: var(--e3) var(--e4);
  z-index: 100;
  font-weight: 700;
}

.saut-contenu:focus {
  left: 0;
  color: var(--blanc);
}

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

/* ————————————————————————————— Formats ————————————————————————————— */

@media (max-width: 960px) {
  .duo,
  .duo--large-texte,
  .rappel {
    grid-template-columns: minmax(0, 1fr);
  }

  .duo__figure {
    order: -1;
  }
}

@media (max-width: 860px) {
  .bascule {
    display: inline-flex;
  }

  .entete__barre {
    flex-wrap: wrap;
  }

  /* Le tiroir est fermé par défaut et n'ouvre qu'au clic : `hidden` sur le
     <ul> plutôt qu'une classe, pour que l'état soit lisible sans JS. */
  .nav {
    order: 3;
    width: 100%;
    display: none;
    padding-bottom: var(--e4);
  }

  .nav[data-ouvert] {
    display: block;
  }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__lien {
    display: block;
    padding: var(--e3) 0;
    border-bottom: 1px solid var(--filet-fort);
    border-left: 3px solid transparent;
    padding-left: var(--e3);
  }

  .nav__lien:hover,
  .nav__lien[aria-current='page'] {
    border-bottom-color: var(--filet-fort);
    border-left-color: var(--brique);
    background: var(--chaux);
  }

  /* Dans le tiroir, les six prestations sont DÉPLIÉES. Un second niveau à
     ouvrir sur un écran de téléphone, c'est un geste de plus pour atteindre
     les pages qui vendent ; la place, elle, ne manque pas : le tiroir défile.
     Le bouton devient donc un simple intertitre, et son chevron disparaît. */
  .nav__deploie {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--encre-douce);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: var(--e4) 0 var(--e2) var(--e3);
    border-bottom: 0;
    cursor: default;
    pointer-events: none;
  }

  /* Le chevron n'a plus de sens : le sous-menu est déjà déplié. */
  .nav__deploie::after {
    display: none;
  }

  /* Le soulignement de branche non plus : c'est le lien lui-même qui porte
     aria-current, et il est visible juste en dessous. Les deux sélecteurs
     étaient groupés, et `display: none` masquait alors l'intertitre entier
     sur les six pages où il sert le plus. */
  .nav__deploie[data-branche] {
    border-bottom-color: transparent;
  }

  .nav__sous,
  .nav__sous[data-ouvert] {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
  }

  .nav__sous a {
    padding: var(--e3) 0 var(--e3) var(--e6);
    border-bottom: 1px solid var(--filet-fort);
    border-left: 3px solid transparent;
    white-space: normal;
  }

  /* Deux étages : le nom et le hamburger, puis une bande d'action qui porte
     le numéro en toutes lettres et le devis. Sans cet ordre, le lien
     téléphone tombait seul sur une ligne, réduit à son icône de 17 px — et
     c'est l'élément que la moitié des visiteurs cherchent. */
  .entete__barre {
    row-gap: var(--e2);
    column-gap: var(--e4);
  }

  .marque {
    flex: 1 1 auto;
    margin-right: 0;
  }

  .bascule {
    order: 2;
  }

  .entete__tel {
    order: 3;
    flex: 1 1 auto;
    font-size: 1.25rem;
    padding: var(--e2) 0;
  }

  .entete__devis {
    order: 4;
    flex: 0 0 auto;
    display: inline-flex;
  }

  .nav {
    order: 5;
  }

  .marque__metier {
    display: none;
  }

  .preuves__item {
    padding-right: var(--e4);
    margin-right: var(--e4);
  }
}

@media (max-width: 560px) {
  .enveloppe {
    padding-inline: var(--e4);
  }

  /* Le numéro reste en toutes lettres jusqu'en bas : depuis que la barre
     mobile a deux étages, il a une ligne à lui. Il n'est JAMAIS masqué en
     `display: none` — cela le retirerait aussi de l'arbre d'accessibilité, et
     le lien deviendrait un bouton muet pour un lecteur d'écran. */
  .entete__tel {
    font-size: 1.125rem;
  }

  .entete__devis {
    padding: 0.5rem 0.8rem;
    font-size: 0.875rem;
  }

  .preuves {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e3);
  }

  .preuves__item {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-bottom: var(--e3);
    border-bottom: 1px solid var(--filet-clair);
  }

  .preuves__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .boutons .bouton {
    flex: 1 1 100%;
  }
}

/* ————————————————————————————— Confort ————————————————————————————— */

@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;
  }
}

@media print {
  .entete,
  .pied,
  .bascule,
  .boutons,
  .saut-contenu {
    display: none;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }

  .question__corps {
    display: block !important;
  }
}

/* ————————————————————— Bannière des pages intérieures ————————————————————— */

/* Plus basse que celle de l'accueil : sur une page de prestation, le visiteur
   est déjà entré, il vient lire. Une bannière pleine hauteur ne ferait que
   repousser le texte sous la ligne de flottaison. */
.banniere--page .banniere__contenu {
  padding-block: clamp(var(--e12), 6vw, var(--e16));
}

.banniere--page h1 {
  max-width: 24ch;
  margin-bottom: var(--e4);
}

/* Sans photo : l'aplat d'ardoise. Une page dont nous n'avons pas de
   photographie ne reçoit PAS une image de banque — le reste du site ne montre
   que des chantiers réels, et une image achetée au milieu se voit. */
.banniere--unie {
  background: var(--ardoise);
}

.banniere--unie .banniere__voile {
  display: none;
}

/* ————————————————————————————— Ancres ————————————————————————————— */

/* L'en-tête est collant : sans ce décalage, une ancre place le titre visé
   DERRIÈRE la barre de navigation. */
:target {
  scroll-margin-top: 5.5rem;
}

/* ————————————————————————————— Témoignages ————————————————————————————— */

/* Les cinq avis Google, reproduits tels qu'ils ont été écrits. Ils sont
   volontairement SANS balisage schema.org `Review` ni `AggregateRating` :
   rebaliser sur son propre site des avis venus de Google contrevient à ses
   règles, et une pénalité pour balisage trompeur coûterait bien plus que
   l'étoile gagnée dans un résultat de recherche. La note se dit en toutes
   lettres au-dessus du bloc, et le lien vers la fiche permet de vérifier. */
.temoignage {
  margin: 0;
  padding: var(--e4) 0 var(--e4) var(--e4);
  border-left: 3px solid var(--brique);
  height: 100%;
}

.temoignage p {
  margin: 0 0 var(--e3);
  font-size: 1rem;
  max-width: none;
}

.temoignage__signature {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--encre-douce);
}

.section--sombre .temoignage__signature {
  color: #b6c0c9;
}