/* Les polices des sites, hébergées avec eux et jamais chargées d'ailleurs : Barlow Semi Condensed 700 pour les titres, Barlow 400 et 600
   pour le texte, en sous-ensemble latin (woff2). Licence SIL Open Font License 1.1 (LICENSE-barlow.txt) ; leur origine et la façon de les
   retrouver sont dans LISEZMOI.md. `swap` : le texte s'affiche tout de suite dans la police de repli (jetons --police-titre et --police),
   puis prend Barlow dès qu'elle est arrivée. Les adresses sont relatives à ce fichier. */

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../polices/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../polices/barlow-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../polices/barlow-latin-600-normal.woff2") format("woff2");
}

/* La feuille de base des sites modèles : structure, composants et mouvement, communs aux cinq métiers (spec § 4 et § 5). Elle ne fixe
   aucune couleur : toutes viennent des jetons du métier (modeles/{metier}/jetons.css), et les voiles translucides se font par color-mix.

   Jetons lus (définis par jetons.css sur :root) :
   - --fond, --surface : le fond sombre, et les surfaces et filets posés dessus ;
   - --texte, --texte-doux : le texte et le texte secondaire sur le fond sombre ;
   - --action, --action-texte : la seule couleur d'action (boutons d'appel et d'envoi, étoiles) et le texte posé dessus ;
   - --fond-clair, --texte-sur-clair, --texte-doux-sur-clair : les sections claires, leur texte et leur texte secondaire ;
   - --police-titre, --police : les titres et le texte ;
   - --cadrage-entete : le cadrage (object-position) de la photo d'en-tête ; centrée sans lui.
   Posés par le rendu dans un attribut style : --taille-titre (la taille du titre sur téléphone, calculée d'après le mot le plus long) et
   --pos (la position du curseur avant / après, que site.js suit).
   Propres à cette feuille : --ton-doux, --ton-filet et --ton-focus, le texte secondaire, les filets et le contour de focus du ton courant
   (sombre par défaut, redéfinis par les sections claires : un composant les lit sans savoir sur quel fond il est) ; --hauteur-apercu, la
   hauteur du bandeau d'aperçu ; --rang, le rang d'un élément du premier écran dans la chorégraphie d'entrée.

   Téléphone d'abord, ordinateur à partir de 900 px (dernier bloc) ; gouttières de 20 px puis 40 px, contenu de 1 160 px au plus. */

/* ----- Jetons du ton courant */

:root {
  --ton-doux: var(--texte-doux);
  --ton-filet: var(--surface);
  --ton-focus: var(--action);
  --hauteur-apercu: 60px;
}

/* ----- Base */

*, *::before, *::after { box-sizing: border-box; margin: 0; }
/* Garde : aucune règle d'affichage ne montre ce que l'attribut hidden cache (le pot de miel du formulaire, un message d'erreur). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--ton-focus); outline-offset: 3px; }

/* ----- Bandeau d'aperçu (aperçu seulement) : la seule trace de l'agence sur la page, fixé en haut */

.apercu {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--hauteur-apercu);
  padding: 0 16px;
  background: var(--fond);
  border-bottom: 1px solid var(--surface);
}
.apercu-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.apercu-texte small { color: var(--texte-doux); font-size: 12px; }
.apercu-texte strong { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.apercu a {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--action);
  border-radius: 4px;
  color: var(--action);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* ----- 1. Premier écran : une couverture de magazine. La photo plein cadre, un voile sombre en bas pour la lecture (le seul dégradé de
   la page), l'enseigne en très gros, un seul bouton ambre. */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh; /* la hauteur visible sous la barre d'adresse d'un téléphone : les boutons ne passent pas dessous */
  padding-top: 64px;
  overflow: hidden;
}
.apercu ~ main .hero { padding-top: calc(var(--hauteur-apercu) + 32px); }
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cadrage-entete, 50% 50%);
}
/* Deux voiles. Sur toute la photo, un voile uni et léger : le haut de la photo reste clair. Sous le texte, le dégradé de lecture : il est accroché
   au bloc de texte (plus bas) et non à la hauteur du premier écran, parce que le texte a une hauteur fixe en pixels : sur un écran bas (un
   téléphone en paysage, un portable de 650 px), un dégradé en pourcentage de l'écran laissait la ligne du métier sur le ciel clair. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--fond) 18%, transparent);
}
/* position et z-index : le bloc de texte passe au-dessus de la photo et forme son propre empilement, où son dégradé (z-index -1) se glisse
   sous le texte. */
.hero-contenu { position: relative; z-index: 1; width: 100%; padding: 0 20px 26px; }
/* Le dégradé de lecture : de 220 px au-dessus du bloc de texte (300 px sur ordinateur, où le titre est plus grand) jusqu'au bas du bloc, sur toute la
   largeur de l'écran (le bloc est une colonne centrée sur ordinateur ; le premier écran, overflow: hidden, rogne ce qui dépasse). Ses paliers sont
   comptés en pixels depuis son haut (--arret-leger : 35 % du fond, --arret-fort : 70 %) et non en pourcentage du bloc : la ligne du métier, en haut
   du bloc, reçoit le même voile qu'importe la hauteur du bloc (un titre sur trois lignes, une longue promesse), et le voile s'épaissit jusqu'à 94 %
   au bas du bloc. Réglés sur la photo de la maquette pour que la ligne du métier garde 4,5:1 de contraste et le titre 3:1, du téléphone tenu en
   paysage à l'écran d'ordinateur. Le seul dégradé de la page. */
.hero-contenu::before {
  --arret-leger: 136px;
  --arret-fort: 340px;
  content: "";
  position: absolute;
  top: -220px;
  right: calc(50% - 50vw);
  bottom: 0;
  left: calc(50% - 50vw);
  z-index: -1;
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--fond) 35%, transparent) var(--arret-leger),
    color-mix(in srgb, var(--fond) 70%, transparent) var(--arret-fort),
    color-mix(in srgb, var(--fond) 94%, transparent) 100%);
  pointer-events: none;
}
.kicker { margin-bottom: 10px; font-size: 15px; }
/* La taille vient du rendu (le mot le plus long tient dans 350 px) ; les téléphones plus étroits la réduisent (fin de feuille). Un mot de plus de
   quinze lettres environ ne tiendrait pas : il se coupe plutôt que de sortir de l'écran. */
.hero h1 {
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-size: var(--taille-titre);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.promesse { max-width: 34ch; margin-bottom: 14px; opacity: .92; }
.hero .avis { margin-bottom: 20px; font-size: 15px; }
.hero .avis b { color: var(--action); letter-spacing: .08em; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.confiance { display: flex; flex-wrap: wrap; color: var(--texte-doux); font-size: 13px; }
.confiance span { padding: 2px 12px; border-left: 1px solid color-mix(in srgb, var(--texte-doux) 45%, transparent); }
.confiance span:first-child { padding-left: 0; border-left: 0; }

/* Les boutons : coins de 6 px, l'ambre pour appeler et pour envoyer, un contour pour le devis ; ni flèche ni ombre. */
.bouton {
  display: block;
  padding: 16px 18px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.bouton-appel, .bouton-envoyer { background: var(--action); color: var(--action-texte); }
.bouton-devis { border: 1px solid color-mix(in srgb, var(--texte) 55%, transparent); color: var(--texte); }

/* ----- Sections 2 à 8 : deux tons, des filets, beaucoup d'air
   Sombres (ardoise, texte craie) : prestations, avis, zone, contact. Claires (craie, texte ardoise) : réalisations (comme sur la maquette),
   certifications, à propos. Après le premier écran, sombre, elles alternent quand toutes sont là. Chaque section ouvre sur un filet de son
   ton : il se fond dans le ton voisin, et sépare deux sections du même ton quand celle qui les séparait manque. Une section ajoutée prend
   le ton sombre, ou rejoint la liste des claires. */

[data-section] {
  padding: 56px max(20px, (100% - 1160px) / 2) 64px;
  border-top: 1px solid var(--ton-filet);
}
.realisations, .certifications, .a-propos {
  --ton-doux: var(--texte-doux-sur-clair);
  --ton-filet: color-mix(in srgb, var(--texte-sur-clair) 18%, var(--fond-clair));
  --ton-focus: var(--texte-sur-clair);
  background: var(--fond-clair);
  color: var(--texte-sur-clair);
}
/* Le bandeau d'aperçu est fixé en haut : une ancre (« Demander un devis », la navigation) ne cache pas le titre de sa section dessous. */
.apercu ~ main [data-section] { scroll-margin-top: var(--hauteur-apercu); }
[data-section] > h2 {
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
}
/* L'air entre les blocs d'une section, quels qu'ils soient (un bloc peut manquer) ; sans poids, pour que chaque composant règle le sien. */
:where([data-section]) > * + * { margin-top: 28px; }
.prestation h3, .certification h3 {
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

/* ----- 2. Prestations : une liste à filets, sans icône */

.prestations ul { display: grid; padding: 0; list-style: none; }
.prestation { padding: 20px 0 22px; border-top: 1px solid var(--ton-filet); }
.prestation p { margin-top: 6px; color: var(--ton-doux); }

/* ----- Le badge « Exemple » (démonstration et aperçu) : un contour dans le texte, une étiquette sur une photo */

.badge { padding: 1px 6px; border: 1px solid; border-radius: 4px; font-size: 13px; font-weight: 600; }

/* ----- 3. Réalisations : le curseur avant / après de la maquette, la grille des photos, la galerie plein écran */

.realisations .intro { max-width: 40ch; margin-top: 10px; color: var(--ton-doux); }
.comparateur {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface);
  -webkit-user-select: none;
  user-select: none;
}
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparateur .avant { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.comparateur .ligne {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--texte);
  transform: translateX(-1px);
  pointer-events: none;
}
.comparateur .poignee {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--texte);
  color: var(--fond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
/* Le curseur natif, invisible, couvre la photo : il se prend au doigt, à la souris et au clavier ; son focus entoure la photo. */
.comparateur input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparateur:has(input:focus-visible) { outline: 3px solid var(--ton-focus); outline-offset: 3px; }
.etiquette, .comparateur .badge, .realisation .badge, .portrait-cadre .badge, .realisation-avant {
  position: absolute;
  padding: 5px 9px;
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fond) 78%, transparent);
  color: var(--texte);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}
.etiquette { top: 12px; }
.etiquette.a { left: 12px; }
.etiquette.b { right: 12px; }
.comparateur .badge { bottom: 12px; left: 12px; }
.realisations .legende { margin-top: 12px; color: var(--ton-doux); font-size: 14px; } /* son lien, souligné, ouvre la photo en grand */

.grille-realisations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.realisation { position: relative; display: block; text-decoration: none; }
.realisation img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--surface); }
.realisation .badge { top: 8px; left: 8px; }
.realisation-legende { display: block; margin-top: 8px; font-size: 15px; line-height: 1.35; }
.realisation-legende strong { display: block; }
.realisation-legende span { color: var(--ton-doux); }
.realisation:hover strong { text-decoration: underline; }
/* Une seconde paire avant / après : l'enveloppe porte le lien « Avant » (l'aspect d'un badge), en haut à droite de la vignette, le badge « Exemple » restant à gauche. */
.realisation-paire { position: relative; }
/* Un lien se clique : il reprend les événements du pointeur que la règle des badges coupe. */
.realisation-avant { position: absolute; top: 8px; right: 8px; z-index: 1; text-decoration: none; pointer-events: auto; }

/* La galerie : un <dialog> plein écran sur le fond sombre (il vit dans une section claire : son focus redevient ambre), la photo entière,
   trois boutons à la taille d'un pouce. La règle des navigateurs qui cache un <dialog> fermé est redite pour ceux qui ne le connaissent pas. */
.galerie { --ton-focus: var(--action); margin: 0; padding: 0; border: 0; }
.galerie:not([open]) { display: none; }
.galerie[open] {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: "fermer fermer fermer" auto "image image image" minmax(0, 1fr) "precedent . suivant" auto / auto minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 12px;
  background: var(--fond);
  color: var(--texte);
}
html:has(.galerie[open]) { overflow: hidden; }
/* La photo garde ses proportions et n'occupe qu'elle-même : un clic à côté tombe sur le fond, et ferme la galerie (site.js). */
.galerie-image { grid-area: image; place-self: center; max-width: 100%; max-height: 100%; object-fit: contain; }
.galerie button {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.galerie-fermer { grid-area: fermer; justify-self: end; }
.galerie-precedent { grid-area: precedent; }
.galerie-suivant { grid-area: suivant; }

/* ----- 4. Avis clients : la note globale, puis les témoignages séparés par des filets (l'ambre des étoiles veut le fond sombre) */

.note-globale { font-size: 18px; }
.etoiles { color: var(--action); letter-spacing: .08em; }
.temoignages { display: grid; }
.temoignage { padding: 24px 0; border-top: 1px solid var(--ton-filet); }
.temoignage blockquote { margin: 10px 0 12px; font-size: 18px; }
.temoignage figcaption { color: var(--ton-doux); font-size: 15px; }
.temoignage figcaption strong { color: var(--texte); }

/* ----- 5. Certifications et garanties : un bloc par certification, séparés par des filets */

.certification { padding: 24px 0; border-top: 1px solid var(--ton-filet); }
.certification p { margin-top: 6px; }
.certification ul { margin-top: 10px; padding-left: 20px; }
.certification li::marker { color: var(--ton-doux); }

/* ----- 6. Zone d'intervention : la phrase, les communes (site livré), la carte (un SVG en ligne) et la mention de source de ses données */

.zone-phrase { max-width: 56ch; font-size: 20px; text-wrap: balance; } /* sur deux lignes, de longueurs voisines : jamais « km » seul */
/* Les communes sur une ligne, séparées par des filets comme les rappels du premier écran ; elles passent à la ligne quand elles ne tiennent pas. Le filet qui
   ouvrirait une ligne est rogné : la liste est décalée de 14 px (le retrait d'une commune) vers la gauche et cache ce qui dépasse, chaque commune tire son filet 1 px en arrière. */
.zone-communes { display: flex; flex-wrap: wrap; overflow: hidden; margin-left: -14px; padding: 0; list-style: none; color: var(--ton-doux); }
.zone-communes li { margin-left: -1px; padding: 2px 14px; border-left: 1px solid color-mix(in srgb, var(--texte-doux) 45%, transparent); }
/* La carte : le contour prend la couleur du SVG (stroke="currentColor"), le texte doux ; le cercle, le point et le nom de la ville, le texte. Les unités du SVG sont des
   kilomètres (carte.js) : un trait de 1,5 px garde cette épaisseur à l'écran (non-scaling-stroke), et la taille du nom est celle de l'attribut font-size que carte.js
   calcule d'après la largeur de la carte : un font-size de la feuille vaudrait ici des kilomètres (14px, ce serait 14 km). Le liseré du nom est de la couleur du fond. */
.zone svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; color: var(--texte-doux); }
.zone svg path, .zone svg circle { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.zone svg .carte-rayon, .zone svg .carte-point, .zone svg text { color: var(--texte); }
.zone svg text { font-weight: 600; paint-order: stroke; stroke: var(--fond); stroke-width: .3em; stroke-linejoin: round; }
.zone .credit { max-width: 520px; margin: 12px auto 0; color: var(--texte-doux); font-size: 13px; } /* sous la carte, à sa largeur */

/* ----- 7. À propos : le portrait en 4:5 (à gauche du texte sur ordinateur), le texte, l'année de création */

.a-propos-contenu { display: grid; gap: 24px; }
.portrait-cadre { position: relative; max-width: 480px; } /* en démonstration et en aperçu : le cadre du portrait, qui porte le badge « Exemple » */
.portrait-cadre .badge { bottom: 12px; left: 12px; }
.portrait { width: 100%; max-width: 480px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--surface); }
.a-propos-texte { max-width: 60ch; font-size: 18px; }
.creation { margin-top: 12px; color: var(--ton-doux); font-size: 15px; }

/* ----- 8. Contact et devis : les coordonnées, puis le formulaire. En démonstration et en aperçu le fieldset est désactivé et atténué ;
   la note qui le dit est hors de lui, pleinement lisible. */

.coordonnees { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; }
.coordonnees dt { color: var(--ton-doux); }
.coordonnees dd { font-weight: 600; overflow-wrap: anywhere; }
form { max-width: 640px; }
fieldset { min-width: 0; padding: 0; border: 0; }
fieldset:disabled { opacity: .55; }
.note-formulaire { margin-bottom: 20px; padding-left: 12px; border-left: 3px solid var(--action); font-weight: 600; }
.champ { margin-top: 18px; }
.champ label { display: block; margin-bottom: 6px; font-weight: 600; }
.champ input, .champ textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--texte-doux);
  border-radius: 6px;
  background: var(--surface);
  color: var(--texte);
  font: inherit; /* 17 px : un téléphone ne zoome pas sur le champ */
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { min-height: 128px; resize: vertical; }
/* Le message que site.js pose après le téléphone quand il n'est pas valide. */
.champ [aria-invalid="true"] { border-color: var(--action); }
.erreur { display: block; margin-top: 6px; color: var(--action); font-size: 15px; font-weight: 600; }
.rgpd { margin-top: 18px; color: var(--ton-doux); font-size: 14px; }
.bouton-envoyer { width: 100%; margin-top: 20px; border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.bouton-envoyer:disabled { cursor: not-allowed; }

/* ----- 9. Pied de page */

.pied {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 28px max(20px, (100% - 1160px) / 2) 36px;
  border-top: 1px solid var(--ton-filet);
  color: var(--texte-doux);
  font-size: 14px;
}
.pied a { color: var(--texte); }
.pied-apercu p { max-width: 72ch; }

/* ----- La page des mentions légales : une colonne étroite, au bord du contenu comme les sections et le pied de page */

.mentions { padding: 56px max(20px, (100% - 1160px) / 2) 64px; }
.mentions > * { max-width: 68ch; }
.mentions h1 {
  margin-bottom: 28px;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
}
.mentions section + section { margin-top: 28px; }
.mentions h2 { margin-bottom: 6px; font-family: var(--police-titre); font-size: 24px; font-weight: 700; line-height: 1.1; }

/* ----- Éléments fixes : la barre de navigation (ordinateur) et le bouton d'appel (téléphone). Cachés jusqu'à ce que site.js leur pose la
   classe visible, quand le premier écran est sorti de l'écran ; sans JavaScript ils restent cachés (le premier écran a son bouton d'appel). */

.nav-sections {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
  display: none;
  gap: 32px;
  padding: 0 max(40px, (100% - 1160px) / 2);
  background: var(--fond);
  border-bottom: 1px solid var(--surface);
  font-size: 15px;
  font-weight: 600;
}
.apercu ~ .nav-sections { top: var(--hauteur-apercu); }
.nav-sections a { padding: 14px 0; text-decoration: none; }
.nav-sections a:hover { text-decoration: underline; }
.appel-fixe {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 8;
  display: none;
  padding: 16px;
  border-radius: 6px;
  background: var(--action);
  color: var(--action-texte);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* ----- Navigateurs sans color-mix (avant 2023) : un voile uni à la place du dégradé et des étiquettes translucides, pour que le texte posé
   sur une photo reste lisible ; le contour du bouton de devis en plein. */

@supports not (color: color-mix(in srgb, currentcolor 50%, transparent)) {
  .hero::after { background: rgba(0, 0, 0, .55); }
  .etiquette, .comparateur .badge, .realisation .badge, .portrait-cadre .badge, .realisation-avant { background: rgba(0, 0, 0, .7); }
  .bouton-devis { border: 1px solid; }
}

/* ----- Mouvement : une seule chorégraphie, à l'arrivée du premier écran. La photo se révèle (opacité, et zoom de 1,04 à 1) en 1,2 s, puis
   le texte et les boutons montent de 16 px, chacun 80 ms après le précédent. Rien au défilement ; rien du tout si le visiteur a demandé
   moins de mouvement. Les images clés ne partent que de leur état de départ : chaque élément arrive à son état ordinaire (l'opacité
   de la promesse comprise). */

@keyframes photo-entete {
  from { opacity: 0; transform: scale(1.04); }
}
@keyframes texte-entete {
  from { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero img { animation: photo-entete 1.2s ease-out both; }
  .hero-contenu > * { animation: texte-entete .6s ease-out both; animation-delay: calc(.3s + var(--rang, 0) * 80ms); }
  .hero-contenu > :nth-child(2) { --rang: 1; }
  .hero-contenu > :nth-child(3) { --rang: 2; }
  .hero-contenu > :nth-child(4) { --rang: 3; }
  .hero-contenu > :nth-child(5) { --rang: 4; }
  .hero-contenu > :nth-child(6) { --rang: 5; }
}

/* ----- Téléphone seulement (moins de 900 px ; 899,98 px pour qu'une largeur fractionnaire, un zoom par exemple, ne tombe entre aucun des deux) */

@media (max-width: 899.98px) {
  .appel-fixe.visible { display: block; }
  .appel-fixe ~ .pied { padding-bottom: 96px; } /* la fin de la page ne reste pas sous le bouton fixe */
}

/* Les téléphones plus étroits que la largeur prévue par le rendu (350 px de texte, soit 390 px d'écran) : le titre se réduit. Mesuré avec Barlow, le
   mot le plus long fait environ 340 px à la taille du rendu : 0,91 le fait tenir de 360 à 389 px d'écran, 0,8 de 320 à 359 px. */
@media (max-width: 389.98px) {
  .hero h1 { font-size: calc(var(--taille-titre) * .91); }
}
@media (max-width: 359.98px) {
  .hero h1 { font-size: calc(var(--taille-titre) * .8); }
}

/* ----- Ordinateur (900 px et plus) */

@media (min-width: 900px) {
  .apercu { padding: 0 40px; }
  .apercu-texte { flex-direction: row; align-items: baseline; gap: 10px; }

  .hero-contenu { max-width: 1240px; margin: 0 auto; padding: 0 40px 56px; }
  .hero-contenu::before { top: -300px; --arret-leger: 177px; --arret-fort: 442px; } /* le titre jusqu'à 150 px : le dégradé monte et ses paliers suivent */
  .kicker { font-size: 19px; }
  /* Le titre grandit avec l'écran, 150 px au plus, et garde des lignes courtes de couverture. Un mot très long dépasse cette mesure plutôt que
     d'être coupé : il tient toujours dans la largeur du contenu. */
  .hero h1 { max-width: 14ch; font-size: min(var(--taille-titre) * 2.4, 9.5vw, 150px); overflow-wrap: normal; }
  .promesse { max-width: 40ch; font-size: 21px; }
  .actions { flex-direction: row; }
  .bouton { padding: 18px 28px; font-size: 18px; }
  .confiance { font-size: 15px; }

  [data-section] { padding: 88px max(40px, (100% - 1160px) / 2) 96px; }
  [data-section] > h2 { font-size: 64px; }
  :where([data-section]) > * + * { margin-top: 40px; }

  .prestations ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .realisations .intro { font-size: 20px; }
  .grille-realisations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .galerie[open] { grid-template: ". . fermer" auto "precedent image suivant" minmax(0, 1fr) / auto minmax(0, 1fr) auto; gap: 24px; padding: 24px; }
  .galerie-precedent, .galerie-suivant { align-self: center; }
  .temoignages { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .certifications { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
  .certifications > h2 { grid-column: 1 / -1; }
  .a-propos:not(.sans-photo) .a-propos-contenu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .coordonnees { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px 32px; }
  .bouton-envoyer { width: auto; }

  .mentions { padding: 88px max(40px, (100% - 1160px) / 2) 96px; }
  .nav-sections.visible { display: flex; }
}

/* Les jetons du couvreur : les couleurs des matières du métier (ardoise, zinc, craie, pierre) et une seule couleur d'action, l'ambre,
   validées sur la maquette (sites/maquette/index.html) ; les polices et leurs replis ; le cadrage de la photo d'en-tête.
   La feuille de base (modeles/base.css) ne lit que ces jetons : un autre métier change ce fichier, jamais la base. */

:root {
  --fond: #1a2126;                  /* ardoise : fond du premier écran et des sections sombres */
  --surface: #2b353b;               /* zinc : surfaces et filets sur fond sombre */
  --texte: #f4f1ea;                 /* craie : texte sur fond sombre */
  --texte-doux: #aab4b9;            /* pierre : texte secondaire sur fond sombre */
  --action: #e4a53a;                /* ambre : boutons d'appel et d'envoi, étoiles, focus sur fond sombre */
  --action-texte: #1a2126;          /* le texte posé sur l'ambre */

  --fond-clair: #f4f1ea;            /* craie : fond des sections claires */
  --texte-sur-clair: #1a2126;       /* ardoise : texte sur fond clair */
  --texte-doux-sur-clair: #4a555b;  /* texte secondaire sur fond clair */

  --police-titre: "Barlow Semi Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --police: "Barlow", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --cadrage-entete: 74% 50%;        /* le couvreur de la photo d'en-tête reste dans le cadre d'un écran de téléphone */
}