/*
 * Site styles — built from the validated mock-up design/accueil.html (client reference).
 * Colors, fonts and sizes come from tokens.css. No inline style in the HTML (Content-Security-Policy).
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-blanc);
  color: var(--color-encre);
  font-family: var(--font-texte);
  font-size: var(--fs-base);
  line-height: var(--lh-texte);
}
body.avec-barre-mobile { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 700; line-height: var(--lh-titre); margin: 0; }
p { margin: 0; }
a { color: var(--color-bouton); text-decoration: none; }
a:hover { color: var(--color-lien-survol); text-decoration: underline; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-decalage); }
.sur-sombre :focus-visible { outline: var(--focus-sur-sombre); }

.conteneur { max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); }
.lien-evitement { position: absolute; left: var(--space-4); top: -100px; z-index: 60; background: var(--color-blanc); padding: var(--space-2) var(--space-4); }
.lien-evitement:focus { top: var(--space-4); }

/* Unconfirmed content marker ({{A_COMPLETER}}): must never remain at launch (checked during acceptance) */
.a-completer { background: var(--color-a-completer-fond); color: var(--color-encre); box-shadow: inset 0 -2px 0 var(--color-a-completer-bord); padding: 0 0.15em; }

/* Buttons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible-tactile);
  background: var(--color-bouton); color: var(--color-blanc);
  font-weight: 700; font-size: 1.09375rem; padding: 0.9375rem 1.625rem; border-radius: var(--rayon); border: 0;
}
.bouton:hover { background: var(--color-bouton-survol); color: var(--color-blanc); text-decoration: none; }
.bouton--contour { background: transparent; border: 1.5px solid var(--color-blanc); padding: 0.875rem 1.625rem; }
.bouton--contour:hover { background: var(--color-blanc); color: var(--color-encre); }
.bouton--blanc { background: var(--color-blanc); color: var(--color-lien-survol); }
.bouton--blanc:hover { background: var(--color-marine); color: var(--color-blanc); }
.bouton--secondaire { background: var(--color-blanc); color: var(--color-bouton); border: 1.5px solid var(--color-bouton); padding: 0.875rem 1.625rem; }
.bouton--secondaire:hover { background: var(--color-gris-fond); color: var(--color-lien-survol); }

/* Header */
.entete { border-bottom: 1px solid var(--color-trait); background: var(--color-blanc); }
.entete__haut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) 1.5rem; padding-block: 0.875rem; }
.entete__logo { margin-right: auto; }
.entete__logo img { width: auto; height: 3.5rem; }
.entete__tel { display: none; align-items: center; gap: 0.625rem; }
.entete__picto { width: 2.125rem; height: 2.125rem; border: 1.5px solid var(--color-marque); border-radius: var(--rayon); display: flex; align-items: center; justify-content: center; flex: none; color: var(--color-marque); }
.entete__libelle { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-4); }
.entete__numero { display: inline-flex; align-items: center; min-height: var(--cible-tactile); font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-tel); color: var(--color-encre); line-height: 1.15; }
.entete__numero:hover { color: var(--color-bouton); text-decoration: none; }
.entete__devis { display: none; }

.nav-principale { background: linear-gradient(180deg, var(--color-nav-haut) 0%, var(--color-nav-bas) 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.nav-principale ul { list-style: none; margin: 0 auto; max-width: var(--largeur-max); padding: 0 0.75rem; display: flex; gap: 2px; overflow-x: auto; }
.nav-principale a { display: flex; align-items: center; min-height: var(--cible-tactile); color: var(--color-blanc); font-weight: 600; font-size: 0.96875rem; padding: 0.875rem 0.8125rem; white-space: nowrap; }
.nav-principale a:hover, .nav-principale a[aria-current="page"] { background: rgba(0, 0, 0, 0.16); color: var(--color-blanc); text-decoration: none; }
.nav-principale a:focus-visible, .barre-mobile a:focus-visible { outline-offset: -5px; } /* inside: these containers clip outer outlines */

/* Home hero */
.hero { position: relative; min-height: clamp(26.875rem, 54vw, 38.75rem); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--color-photo-attente); }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__degrade { position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(180deg, rgba(9, 22, 29, 0) 0%, rgba(9, 22, 29, 0.5) 55%, rgba(9, 22, 29, 0.75) 100%); }
.hero__cadre { position: relative; width: 100%; padding-block: clamp(1.75rem, 4vw, 3.25rem); }
.hero__panneau { max-width: 41.25rem; background: var(--color-voile); padding: clamp(1.375rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.125rem); }
.hero h1 { font-size: var(--fs-h1); color: var(--color-blanc); margin-bottom: 0.75rem; max-width: 22ch; text-wrap: pretty; }
.hero__intro { font-size: var(--fs-lead); color: var(--color-texte-sur-voile); max-width: 56ch; margin-bottom: 1.375rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Sections */
.section { padding-top: var(--espace-section); }
.section h2 { font-size: var(--fs-h2); }
.section__intro { color: var(--color-texte-2); max-width: var(--measure); margin: 0.375rem 0 1.625rem; }
.section > h2 + .produits, .section > h2 + .chantiers, .section > h2 + .documents { margin-top: 1.5rem; }
main > :last-child:not(.appel-devis) { margin-bottom: var(--espace-section); }

.produits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; }
.produit { display: block; height: 100%; border: 1px solid var(--color-trait); border-radius: var(--rayon); color: inherit; }
.produit:hover { border-color: var(--color-marque); text-decoration: none; color: inherit; }
.produit img, .photo-attente { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.produit__titre { padding: 0.9375rem 1rem; font-family: var(--font-titre); font-weight: 600; font-size: var(--fs-carte); }
/* Card without photo: text only, same frame, a brand line on top so that it reads as intended and not as missing */
.produit--texte { position: relative; display: flex; flex-direction: column; border-top: 4px solid var(--color-marque); background: var(--color-gris-fond); }
.produit--texte:hover, .produit--texte:focus-within { border-color: var(--color-marque); }
.produit--texte .produit__titre { display: block; padding-bottom: 0.375rem; color: inherit; }
.produit__lien::after { content: ""; position: absolute; inset: 0; }
.produit__resume { margin: 0; padding: 0 1rem; color: var(--color-texte-2); font-size: var(--fs-secondaire); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.produit__suite { margin-top: auto; padding: 0.75rem 1rem 0.9375rem; font-weight: 600; font-size: var(--fs-secondaire); text-decoration: underline; text-underline-offset: 0.2em; }
.photo-attente {
  display: flex; align-items: center; justify-content: center; padding: 0.875rem; text-align: center;
  background: var(--color-photo-attente) repeating-linear-gradient(135deg, var(--color-photo-attente-raie) 0 10px, var(--color-photo-attente) 10px 20px);
  color: var(--color-texte-2); font-size: var(--fs-petit);
}

.bande { margin-top: var(--espace-section); background: var(--color-gris-fond); border-block: 1px solid var(--color-trait); }
.atouts { list-style: none; margin: 0; padding-block: var(--espace-bandeau); display: grid; grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr)); gap: var(--space-6); }
.atout { display: flex; gap: 0.875rem; align-items: flex-start; }
.atout svg { flex: none; margin-top: 2px; color: var(--color-marque); }
.atout h3 { font-weight: 600; font-size: 1.125rem; margin-bottom: 3px; }
.atout p { font-size: var(--fs-secondaire); color: var(--color-texte-2); }

.titre-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin-bottom: 1.5rem; }
.titre-ligne a { margin-left: auto; font-weight: 600; display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.chantiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16.875rem, 1fr)); gap: 1.375rem; }
.chantiers figure { margin: 0; }
.chantiers img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.chantiers figcaption { padding-top: 0.75rem; font-size: var(--fs-secondaire); }
/* Job validated from the installers' photos: « avant » and « après » side by side */
.chantiers__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.chantiers__paire div { position: relative; }
.chantiers__paire span { position: absolute; left: 0; bottom: 0; padding: 0.125rem 0.5rem; font-size: var(--fs-petit); font-weight: 700; color: var(--color-blanc); background: var(--color-voile-plein); }
.chantiers figcaption span { display: block; margin-top: 2px; color: var(--color-texte-2); }

.atelier { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: var(--space-6); align-items: center; }
.atelier img { width: 100%; max-width: 35rem; border: 1px solid var(--color-trait); border-radius: var(--rayon); }
.atelier h2 { margin-bottom: 0.75rem; }

.partenaires { border: 1px solid var(--color-trait); border-radius: var(--rayon); padding: 1.375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.125rem 2rem; }
.partenaires p { font-size: var(--fs-secondaire); color: var(--color-texte-2); max-width: 46ch; }
.partenaires a { margin-left: auto; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--cible-tactile); }

.texte-local { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); }
.texte-local h2 { font-size: var(--fs-h2-petit); }

.zone h2 { font-size: var(--fs-h2-petit); margin-bottom: 0.875rem; }
.zone p { color: var(--color-texte-3); max-width: var(--measure); }
.zone p + p { margin-top: 0.875rem; }
.zone__departements { font-weight: 700; color: var(--color-encre); }
.zone__villes { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; }
.zone__villes li { border: 1px solid var(--color-trait); border-radius: var(--rayon); padding: 0.125rem 0.625rem; font-size: var(--fs-secondaire); color: var(--color-texte-3); }

.confiance { padding-block: var(--espace-bandeau); }
.confiance h2 { font-size: var(--fs-h2-petit); }

/* Rich text from the admin editor (h2, h3, p, lists, links) */
.prose { color: var(--color-texte-3); max-width: var(--measure); }
.prose h2 { font-size: var(--fs-h2-petit); color: var(--color-encre); margin: 1.75rem 0 0.75rem; }
.prose h3 { font-size: 1.1875rem; color: var(--color-encre); margin: 1.5rem 0 0.5rem; }
.prose > :first-child { margin-top: 0; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p { margin-top: 0.875rem; }
.prose ul, .prose ol { margin: 0.875rem 0 0; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.25rem; }
.prose strong { color: var(--color-encre); }
.prose a, .faq__reponse a, .entete-page__intro a { text-decoration: underline; text-underline-offset: 0.15em; }
.prose--avant-liste { margin-bottom: 1.75rem; }

/* Inner page header */
.entete-page { background: var(--color-gris-fond); border-bottom: 1px solid var(--color-trait); padding-block: 1.25rem clamp(1.75rem, 4vw, 2.75rem); }
.entete-page h1 { font-size: var(--fs-h1); max-width: 26ch; text-wrap: pretty; }
.entete-page__intro { margin-top: 0.875rem; font-size: var(--fs-lead); color: var(--color-texte-3); max-width: var(--measure); }
.entete-page__intro p + p { margin-top: 0.75rem; }
.entete-page__maj { margin-top: 0.75rem; font-size: var(--fs-petit); color: var(--color-texte-2); }
.fil-ariane ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.5rem; font-size: var(--fs-petit); color: var(--color-texte-2); }
.fil-ariane li + li::before { content: "›"; margin-right: 0.5rem; color: var(--color-texte-2); }
.fil-ariane a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.fil-ariane li { display: flex; align-items: center; }
.actions-404 { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.contenu-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: var(--space-6); align-items: start; }
.contenu-page__image { width: 100%; border-radius: var(--rayon); }

.tableau-defilant { overflow-x: auto; margin-top: 1.25rem; }
.tableau { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: var(--fs-secondaire); }
.tableau th, .tableau td { border: 1px solid var(--color-trait); padding: 0.75rem 0.875rem; text-align: left; vertical-align: top; }
.tableau thead th { background: var(--color-gris-fond); font-family: var(--font-titre); font-weight: 600; }

.faq details { border-bottom: 1px solid var(--color-trait); max-width: 50rem; }
.faq h2 + details { margin-top: 1.25rem; border-top: 1px solid var(--color-trait); }
.faq summary { min-height: var(--cible-tactile); display: flex; align-items: center; padding-block: 0.75rem; font-weight: 600; cursor: pointer; }
.faq__reponse { padding-bottom: 1rem; color: var(--color-texte-3); max-width: var(--measure); }
.faq__reponse p + p { margin-top: 0.75rem; }

.documents { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; max-width: 50rem; }
.documents li { border: 1px solid var(--color-trait); border-radius: var(--rayon); padding: 1rem 1.125rem; }
.documents a { font-weight: 700; display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.documents__poids { margin-left: 0.5rem; font-size: var(--fs-petit); color: var(--color-texte-2); }
.documents p { color: var(--color-texte-2); font-size: var(--fs-secondaire); }

.modele { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: var(--space-6); align-items: start; }
.modele__galerie { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.modele h2 { font-size: var(--fs-h2-petit); margin: 1.5rem 0 0.75rem; }
.caracteristiques { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--color-trait); }
.caracteristiques div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--color-trait); }
.caracteristiques dt { font-weight: 600; }
.caracteristiques dd { margin: 0; color: var(--color-texte-3); }
.note { color: var(--color-texte-2); }

/* « Quelle ouverture remplacer ? » block (templates/partials/cotes.php): plain GET form, decorative dimension drawing */
.cotes { border: 1px solid var(--color-trait-2); border-radius: var(--rayon); background: var(--color-gris-fond); padding: clamp(1.25rem, 3vw, 2rem); }
.cotes__formulaire { display: grid; gap: 1.125rem 2.5rem; align-items: start; }
.cotes__titre { font-size: var(--fs-h2-petit); }
.cotes__modele { color: var(--color-texte-3); }
.cotes__aide { font-size: var(--fs-secondaire); color: var(--color-texte-2); max-width: var(--measure); margin-top: -0.5rem; }
.cotes__plan { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); gap: 1rem 1.25rem; align-items: center; }
.cotes__dessin { grid-row: span 2; width: 100%; height: auto; color: var(--color-texte-2); }
.cotes__construction { stroke: var(--color-trait-2); }
.cotes__trace { color: var(--color-marque); stroke: var(--color-marque); }
.cotes label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.cotes__facultatif { display: block; font-weight: 400; color: var(--color-texte-2); font-size: var(--fs-petit); }
.cotes__saisie { display: flex; align-items: center; gap: 0.5rem; }
.cotes input, .cotes select { min-width: 0; min-height: var(--cible-tactile); font: inherit; color: var(--color-encre); background: var(--color-blanc); border: 1px solid var(--color-texte-4); border-radius: var(--rayon); padding: 0.5rem 0.75rem; }
.cotes input { width: 6.5rem; }
.cotes select { width: 100%; max-width: 24rem; }
.cotes input[aria-invalid="true"] { border: 2px solid var(--color-erreur); }
.cotes__unite { color: var(--color-texte-2); }
.cotes__erreur { margin-top: 0.375rem; font-size: var(--fs-secondaire); font-weight: 600; color: var(--color-erreur); }
.cotes__bouton { justify-self: start; font-family: inherit; cursor: pointer; }
/* Full quote form on /demande-de-devis/ (templates/partials/devis-champs.php) */
.cotes__suite { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.125rem 2.5rem; }
.cotes__suite legend { padding: 0; margin-bottom: 0.875rem; font-family: var(--font-titre); font-weight: 700; font-size: 1.1875rem; }
.cotes__suite input[type="text"], .cotes__suite input[type="tel"], .cotes__suite input[type="email"], .cotes__suite input[type="file"], .cotes__suite textarea { width: 100%; max-width: 32rem; }
.cotes textarea { min-width: 0; font: inherit; color: var(--color-encre); background: var(--color-blanc); border: 1px solid var(--color-texte-4); border-radius: var(--rayon); padding: 0.5rem 0.75rem; resize: vertical; }
.cotes__suite textarea { max-width: var(--measure); }
.cotes textarea[aria-invalid="true"], .cotes select[aria-invalid="true"] { border: 2px solid var(--color-erreur); }
.cotes__suite .cotes__aide { margin-top: 0.375rem; }
.cotes .cotes__case { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 400; max-width: var(--measure); min-height: var(--cible-tactile); }
.cotes .cotes__case input { width: 1.5rem; height: 1.5rem; min-height: 0; flex: none; margin-top: 0.125rem; padding: 0; accent-color: var(--color-bouton); }
.cotes__alerte { border-left: 4px solid var(--color-erreur); background: var(--color-blanc); padding: 0.75rem 1rem; font-weight: 600; color: var(--color-erreur); max-width: var(--measure); }
.cotes__alerte a { white-space: nowrap; }
.cotes__piege { position: absolute; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }
.cotes--envoye { border-left: 4px solid var(--color-bouton); }
.cotes--envoye p { margin-top: 0.75rem; max-width: var(--measure); }
.cotes + .note { margin-top: 1rem; }
.cotes__urgence { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-trait-2); color: var(--color-texte-3); }
.cotes__urgence a { font-weight: 700; white-space: nowrap; }
@media (min-width: 56.25rem) {
  .cotes__formulaire { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cotes__titre, .cotes__modele, .cotes__aide, .cotes__alerte, .cotes__suite { grid-column: 1 / -1; }
  .cotes__suite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cotes__suite legend, .cotes__ligne--large { grid-column: 1 / -1; }
  .cotes__plan { grid-row: span 2; }
  .cotes__type { align-self: end; }
}

/* Quote call-to-action band */
.appel-devis { margin-top: var(--espace-section); background: var(--color-bouton); color: var(--color-blanc); }
.appel-devis .conteneur { padding-block: clamp(2.25rem, 4.5vw, 3.375rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.appel-devis h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); margin-bottom: var(--space-2); }
.appel-devis p { font-size: 1.125rem; max-width: 52ch; }
.appel-devis__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; margin-left: auto; }
.appel-devis__tel { display: inline-flex; align-items: center; min-height: var(--cible-tactile); color: var(--color-blanc); font-family: var(--font-titre); font-weight: 700; font-size: 1.625rem; border-bottom: 2px solid rgba(255, 255, 255, 0.6); }
.appel-devis__tel:hover { color: var(--color-blanc); text-decoration: none; border-bottom-color: var(--color-blanc); }

/* Footer */
.pied { background: var(--color-nuit); color: var(--color-texte-sur-nuit); padding: clamp(2.375rem, 5vw, 3.625rem) 0 1.625rem; font-size: var(--fs-secondaire); }
.pied__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 2.125rem; }
.pied__logo { width: auto; height: 3.875rem; margin-bottom: var(--space-4); filter: brightness(0) invert(1); }
.pied h2 { font-weight: 600; font-size: 1.0625rem; color: var(--color-blanc); margin-bottom: 0.75rem; }
.pied address { font-style: normal; }
.pied__tel { display: inline-flex; align-items: center; min-height: var(--cible-tactile); font-weight: 700; font-size: 1.25rem; color: var(--color-blanc); }
.pied a:not(.pied__tel) { color: var(--color-texte-sur-nuit); }
.pied a:hover { color: var(--color-marque); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied ul a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.pied__attenue { color: var(--color-texte-sur-nuit-2); margin-top: 0.625rem; }
.pied__bas { margin-top: 2rem; padding-top: 1.125rem; border-top: 1px solid #21333d; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.375rem; font-size: 0.96875rem; color: var(--color-texte-sur-nuit-2); }
.pied__bas a:not(.pied__tel) { color: var(--color-texte-sur-nuit-2); display: inline-flex; align-items: center; min-height: var(--cible-tactile); }

/* Mobile call bar */
.barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; border-top: 1px solid var(--color-marine); background: var(--color-marine); padding-bottom: env(safe-area-inset-bottom); }
.barre-mobile a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5625rem; padding: 1.1875rem 0.625rem; color: var(--color-blanc); font-weight: 700; font-size: var(--fs-base); }
.barre-mobile a:hover { color: var(--color-blanc); text-decoration: none; }
.barre-mobile__appel { background: var(--color-marine); }
.barre-mobile__devis { background: var(--color-bouton); }

/* Focal point of a photo (set in the admin, percent in steps of 5): keeps the important part visible when cropped. */
.fx-0 { --fx: 0%; } .fx-5 { --fx: 5%; } .fx-10 { --fx: 10%; } .fx-15 { --fx: 15%; } .fx-20 { --fx: 20%; } .fx-25 { --fx: 25%; } .fx-30 { --fx: 30%; } .fx-35 { --fx: 35%; } .fx-40 { --fx: 40%; } .fx-45 { --fx: 45%; } .fx-50 { --fx: 50%; } .fx-55 { --fx: 55%; } .fx-60 { --fx: 60%; } .fx-65 { --fx: 65%; } .fx-70 { --fx: 70%; } .fx-75 { --fx: 75%; } .fx-80 { --fx: 80%; } .fx-85 { --fx: 85%; } .fx-90 { --fx: 90%; } .fx-95 { --fx: 95%; } .fx-100 { --fx: 100%; }
.fy-0 { --fy: 0%; } .fy-5 { --fy: 5%; } .fy-10 { --fy: 10%; } .fy-15 { --fy: 15%; } .fy-20 { --fy: 20%; } .fy-25 { --fy: 25%; } .fy-30 { --fy: 30%; } .fy-35 { --fy: 35%; } .fy-40 { --fy: 40%; } .fy-45 { --fy: 45%; } .fy-50 { --fy: 50%; } .fy-55 { --fy: 55%; } .fy-60 { --fy: 60%; } .fy-65 { --fy: 65%; } .fy-70 { --fy: 70%; } .fy-75 { --fy: 75%; } .fy-80 { --fy: 80%; } .fy-85 { --fy: 85%; } .fy-90 { --fy: 90%; } .fy-95 { --fy: 95%; } .fy-100 { --fy: 100%; }
img[class*="fx-"] { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }

/* Mobile navigation (under 1100 px: below that, the desktop bar does not fit on one line). Default = plain list under the header (works without JavaScript).
   The « js » class, set by /assets/js/site.js before the first paint, turns it into a side panel. */
.entete__appel, .entete__menu { display: none; }
.menu-mobile { background: var(--color-blanc); border-top: 1px solid var(--color-trait); }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile a, .menu-mobile summary { display: flex; align-items: center; min-height: 3rem; padding: 0.375rem var(--gouttiere); color: var(--color-encre); font-weight: 600; border-bottom: 1px solid var(--color-trait); }
.menu-mobile a:hover { color: var(--color-lien-survol); text-decoration: none; }
.menu-mobile a[aria-current="page"] { color: var(--color-lien-survol); box-shadow: inset 4px 0 0 var(--color-marque); }
.menu-mobile summary { cursor: pointer; justify-content: space-between; list-style: none; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary::after { content: ""; width: 0.625rem; height: 0.625rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 0.25rem; }
.menu-mobile details[open] > summary::after { transform: rotate(-135deg); }
.menu-mobile details ul a { padding-left: calc(var(--gouttiere) + 1rem); font-weight: 400; background: var(--color-gris-fond); }
.menu-mobile :focus-visible { outline-offset: -3px; }
.menu-mobile__fermer { display: none; }
.menu-mobile__bas { display: grid; gap: 0.75rem; padding: 1rem var(--gouttiere); }
.menu-mobile__bas .bouton { justify-content: center; border: 0; color: var(--color-blanc); }
.menu-mobile__bas .bouton:hover { color: var(--color-blanc); }
.menu-mobile__bas .menu-mobile__tel { justify-content: center; border: 0; font-family: var(--font-titre); font-weight: 700; font-size: 1.5rem; }
@media (max-width: 68.6875rem) {
  .nav-principale { display: none; }
  .entete__haut { flex-wrap: nowrap; gap: 0.625rem; }
  .entete__appel { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border: 1.5px solid var(--color-bouton); border-radius: var(--rayon); color: var(--color-lien-survol); }
  .js .entete__menu { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none; width: 6.75rem; min-height: 3rem; padding: 0; font: inherit; font-weight: 700; color: var(--color-blanc); background: var(--color-bouton); border: 0; border-radius: var(--rayon); cursor: pointer; }
  .js .menu-mobile { position: fixed; inset: 0; z-index: 70; border: 0; background: rgba(9, 22, 29, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .js .menu-mobile__panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 24rem); display: flex; flex-direction: column; background: var(--color-blanc); overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0; transform: translateX(100%); transition: transform 0.25s ease; }
  .menu-ouvert .menu-mobile { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
  .menu-ouvert .menu-mobile__panneau { transform: none; }
  .js .menu-mobile__fermer { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-end; min-height: 3rem; margin: 0.5rem var(--gouttiere); padding: 0 0.875rem; font: inherit; font-weight: 700; color: var(--color-encre); background: var(--color-blanc); border: 1.5px solid var(--color-texte-4); border-radius: var(--rayon); cursor: pointer; }
  .js .menu-mobile__liste { border-top: 1px solid var(--color-trait); }
  .js .menu-mobile__bas { margin-top: auto; border-top: 1px solid var(--color-trait); }
  html.menu-ouvert { overflow: hidden; }
}
@media (min-width: 37.5rem) and (max-width: 68.6875rem) { .entete__appel { display: none; } }
@media (min-width: 68.75rem) { .menu-mobile { display: none; } }

/* Motion (CLAUDE.md § 8): transform and opacity only, 150 to 600 ms, nothing blocks, nothing shifts the layout.
   « a-venir » is only ever set by the script, on elements still below the screen: without JavaScript all is visible. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }
@keyframes hero-glisser { from { transform: translateY(0.75rem); } to { transform: none; } }
@keyframes hero-entrer { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.hero__intro { animation: hero-glisser 0.5s ease both; }
.hero__actions { animation: hero-entrer 0.5s ease 0.1s both; }
.bouton, .barre-mobile a { transition: background-color 0.15s ease, transform 0.15s ease; }
.bouton:active, .barre-mobile a:active { transform: scale(0.97); }
.produit { overflow: hidden; }
@media (hover: hover) {
  .produit img { transition: transform 0.4s ease; }
  .produit:hover img { transform: scale(1.04); }
}
.apparait { transition: opacity 0.5s ease, transform 0.5s ease; }
.a-venir { opacity: 0; transform: translateY(1rem); }
.cotes__dessin.a-venir { opacity: 1; transform: none; }
.cotes__trace { transform-box: fill-box; transform-origin: center; transition: transform 0.6s ease 0.15s; }
.cotes__dessin.a-venir .cotes__trace { transform: scale(0); }

/* Mobile (< 600 px): compact photo band above the dark panel, quote button above the fold on 375 x 667 */
@media (max-width: 37.4375rem) {
  .hero { display: block; min-height: 0; background: var(--color-voile-plein); }
  .hero__photo { position: relative; height: 12.5rem; }
  .hero__degrade { display: none; }
  .hero__cadre { padding: 0; }
  .hero__panneau { max-width: none; background: var(--color-voile-plein); padding: 1rem var(--gouttiere) 1.25rem; }
  .hero h1 { margin-bottom: 0.5rem; }
  .hero__intro { margin-bottom: 1rem; }
  .entete__haut { padding-block: 0.625rem; }
  .entete__logo img { height: 3rem; }
  .nav-principale ul { scrollbar-width: none; }
  .nav-principale ul::-webkit-scrollbar { display: none; }
}
@media (min-width: 37.5rem) {
  .entete__logo img { height: 4.125rem; }
  .entete__tel { display: flex; }
}
@media (min-width: 56.25rem) { /* 900 px, breakpoint of the reference mock-up */
  body.avec-barre-mobile { padding-bottom: 0; }
  .barre-mobile { display: none; }
  .entete__devis { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* Test site (« recette ») only: always visible, never mistaken for the real site. */
.bandeau-recette { margin: 0; padding: var(--space-2) var(--space-5); background: var(--color-a-completer-fond); border-bottom: 2px solid var(--color-a-completer-bord); color: var(--color-encre); font-weight: 700; text-align: center; }

/* Contact page: address, phone, e-mail and opening hours in the page itself. */
.coordonnees { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.coordonnees h2 { font-size: var(--fs-h2-petit); margin-bottom: 0.875rem; }
.coordonnees address { font-style: normal; color: var(--color-texte-3); }
.coordonnees p, .coordonnees dl { color: var(--color-texte-3); margin: 0; }
.coordonnees p + p { margin-top: var(--space-3); }
.coordonnees__tel { display: inline-flex; align-items: center; min-height: var(--cible-tactile); font-weight: 700; font-size: 1.25rem; }
.coordonnees__horaires { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); }
.coordonnees__horaires dt { font-weight: 600; }
.coordonnees__horaires dd { margin: 0; }