/* ==========================================================================
   BATINOWAK — Site vitrine (lot 23)
   Charte : marine dominant, pierre en respiration, orange < 5 % de la surface (traits de cote, bouton principal,
   survols). RÈGLE : aucune couleur en dur hors du bloc :root ci-dessous (contrôlé par tests/php/verifier-code.php).
   Signatures : 1. trame de briques (fond des sections marine, 4 %) · 2. traits de cote devant chaque surtitre ·
   3. cadres fenêtre des photos (montant bas 6 px, montants latéraux 2 px, survol orange).
   Mouvement : fondu d'apparition des sections (une fois) et survols ; rien d'autre ; prefers-reduced-motion respecté.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --bn-marine: #062A4B; --bn-marine-900: #041E36; --bn-marine-700: #0B3A63;
  --bn-orange: #F6A01F; --bn-orange-600: #D98910;
  --bn-pierre: #F3F0EB; --bn-blanc: #FFFFFF;
  --bn-texte: #0F1B2A; --bn-texte-doux: #5A6875;
}
:root {
  /* Dérivés : mélanges des tokens, jamais de nouvelle teinte */
  --bn-sur-marine: color-mix(in srgb, var(--bn-blanc) 80%, var(--bn-marine));       /* texte courant sur marine */
  --bn-trait-marine: color-mix(in srgb, var(--bn-blanc) 18%, var(--bn-marine));     /* filets sur marine */
  --bn-cadre-marine: color-mix(in srgb, var(--bn-blanc) 88%, var(--bn-marine));     /* cadres fenêtre sur marine */
  --bn-trait-pierre: color-mix(in srgb, var(--bn-texte) 14%, var(--bn-pierre));     /* filets sur pierre */
  --bn-voile: color-mix(in srgb, var(--bn-marine-900) 92%, transparent);

  --police-titre: 'Archivo', 'Archivo repli', 'Arial Narrow', Arial, sans-serif;
  --police-texte: 'Inter', 'Inter repli', Arial, sans-serif;
  --largeur: 1200px;
  --gouttiere: clamp(20px, 4vw, 40px);
  --espace-section: clamp(72px, 10vw, 128px);
  --duree: 180ms;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --focus: var(--bn-orange);
  --hauteur-entete: 112px;
}

/* --------------------------------------------------------------------------
   2. Polices locales (jamais Google Fonts) + replis métriques (pas de saut au chargement)
   -------------------------------------------------------------------------- */
/* Titres : optional (préchargée dans la page) — le titre principal, plus grand élément du premier écran, n'est jamais
   repeint à l'arrivée de la police : pas de retard d'affichage, pas de décalage ; repli métrique ajusté sinon */
@font-face { font-family: 'Archivo'; font-weight: 700; font-style: normal; font-display: optional; src: url('../fonts/archivo-700.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-style: normal; font-display: optional; src: url('../fonts/archivo-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter repli'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo repli'; src: local('Arial'); size-adjust: 103%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hauteur-entete) + 16px); }
body { margin: 0; font-family: var(--police-texte); font-size: 1.0625rem; line-height: 1.6; color: var(--bn-texte); background-color: var(--bn-pierre); text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: 1.3125rem; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.chiffres, .tel, time { font-variant-numeric: tabular-nums; }
.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.visuellement-masque { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lien-evitement { position: absolute; left: var(--gouttiere); top: -100px; z-index: 100; padding: 12px 18px; background-color: var(--bn-orange); color: var(--bn-marine); font-weight: 500; text-decoration: none; }
.lien-evitement:focus { top: 12px; }
.icone { width: 24px; height: 24px; flex-shrink: 0; }
.icone-sm { width: 20px; height: 20px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   4. Sections : alternance stricte marine / pierre, ruptures nettes
   -------------------------------------------------------------------------- */
.section { padding-block: var(--espace-section); position: relative; }
.section--marine { background-color: var(--bn-marine); color: var(--bn-blanc); --focus: var(--bn-orange); }
.section--pierre { background-color: var(--bn-pierre); color: var(--bn-texte); --focus: var(--bn-marine); }
.section--marine p, .section--marine li { color: var(--bn-sur-marine); }
.section--pierre p { color: var(--bn-texte-doux); }

/* Signature 1 — trame de briques reprise du logo, opacité 4 %, en fond uniquement */
.trame { isolation: isolate; }
.trame::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bn-blanc); opacity: .04;
  -webkit-mask-image: url('../images/trame-briques.svg'); mask-image: url('../images/trame-briques.svg');
  -webkit-mask-size: 136px 66px; mask-size: 136px 66px;
}

/* Signature 2 — trait de cote d'architecte devant chaque surtitre (40 px, orange) */
.surtitre { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 20px; font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.surtitre::before {
  content: ''; width: 40px; height: 10px; flex-shrink: 0; background-color: var(--bn-orange);
  -webkit-mask: url('../images/cote.svg') no-repeat center / 40px 10px; mask: url('../images/cote.svg') no-repeat center / 40px 10px;
}
.section--marine .surtitre { color: var(--bn-sur-marine); }
.section--pierre .surtitre { color: var(--bn-texte-doux); }
.section--pierre .surtitre::before { background-color: var(--bn-orange-600); }
.entete-section { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.entete-section h2, .pourquoi h2, .zone-grille h2 { margin-bottom: 18px; }
.entete-section p { font-size: 1.125rem; margin: 0; }

/* Signature 3 — cadre fenêtre : montant bas épais, latéraux fins, aucun arrondi ; survol : montant orange */
.cadre { margin: 0; border-style: solid; border-width: 2px 2px 6px; border-color: var(--bn-cadre-marine); transition: border-color var(--duree) var(--courbe); }
.section--pierre .cadre { border-color: var(--bn-marine); }
.cadre:hover { border-bottom-color: var(--bn-orange); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }
.cadre picture { display: block; height: 100%; }

/* --------------------------------------------------------------------------
   5. Boutons (survol seulement : couleur, jamais d'ombre colorée ni de dégradé)
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  font: 500 1rem/1.2 var(--police-texte); text-decoration: none; white-space: nowrap; border: 2px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color var(--duree) var(--courbe), border-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.bouton--orange { background-color: var(--bn-orange); color: var(--bn-marine); }       /* texte marine sur orange : 7:1 */
.bouton--orange:hover { background-color: var(--bn-orange-600); }
.bouton--contour { border-color: var(--bn-trait-marine); color: var(--bn-blanc); }
.bouton--contour:hover { border-color: var(--bn-blanc); }
.bouton--marine { background-color: var(--bn-marine); color: var(--bn-blanc); }
.bouton--marine:hover { background-color: var(--bn-marine-700); }
.bouton[disabled] { opacity: .6; cursor: progress; }

/* --------------------------------------------------------------------------
   6. En-tête : bandeau de contact permanent + navigation (collants)
   -------------------------------------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 50; background-color: var(--bn-marine); color: var(--bn-blanc); --focus: var(--bn-orange); }
.bandeau { background-color: var(--bn-marine-900); font-size: .875rem; }
.bandeau .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.bandeau a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 500; text-decoration: none; color: var(--bn-blanc); white-space: nowrap; }
.bandeau a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bandeau .zone { display: inline-flex; align-items: center; gap: 8px; color: var(--bn-sur-marine); white-space: nowrap; }
.bandeau .horaires { color: var(--bn-sur-marine); white-space: nowrap; }
@media (max-width: 1099px) { .bandeau .horaires { display: none; } }
@media (max-width: 767px) { .bandeau .zone-detail { display: none; } }
.navigation { border-bottom: 1px solid var(--bn-trait-marine); }
.navigation .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bn-blanc); }
.marque .logo { width: 40px; height: 40px; color: var(--bn-orange); }
.marque .logotype { width: 150px; height: auto; color: var(--bn-blanc); }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap; text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--bn-sur-marine); border-bottom: 2px solid transparent; transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe); }
.menu a:hover { color: var(--bn-blanc); border-bottom-color: var(--bn-orange); }
.navigation .bouton { margin-left: 12px; }
.burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: none; border: 1px solid var(--bn-trait-marine); color: var(--bn-blanc); cursor: pointer; }
@media (max-width: 1099px) {
  .burger { display: inline-flex; }
  .menu-panneau { display: none; position: absolute; left: 0; right: 0; top: 100%; background-color: var(--bn-marine); border-bottom: 1px solid var(--bn-trait-marine); padding: 8px var(--gouttiere) 20px; }
  .menu-panneau.ouvert { display: block; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu a { min-height: 52px; border-bottom: 1px solid var(--bn-trait-marine); padding: 0; }
  .navigation .bouton { margin: 16px 0 0; width: 100%; }
}
@media (min-width: 1100px) { .menu-panneau { display: flex; align-items: center; } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(48px, 8vw, 104px) clamp(56px, 8vw, 104px); }
.hero .conteneur { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 1024px) { .hero .conteneur { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { margin-bottom: 24px; max-width: 17ch; }
.hero .accroche { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 34rem; margin-bottom: 32px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.engagements { display: grid; gap: 1px; background-color: var(--bn-trait-marine); border: 1px solid var(--bn-trait-marine); }
@media (min-width: 640px) { .engagements { grid-template-columns: repeat(3, 1fr); } }
.engagements li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background-color: var(--bn-marine); color: var(--bn-blanc); font-weight: 500; font-size: .9375rem; line-height: 1.3; }
.engagements .icone { color: var(--bn-sur-marine); }
.hero-photo { aspect-ratio: 4 / 5; }
.hero-photo figcaption, .realisation figcaption { padding: 12px 0 0; font-size: .875rem; color: var(--bn-sur-marine); }
.hero figure.cadre-photo { margin: 0; }
@media (max-width: 1023px) { .hero-photo { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------------------
   8. Prestations : 6 cartes, la menuiserie en tête
   -------------------------------------------------------------------------- */
.prestations { display: grid; gap: 16px; }
@media (min-width: 700px) { .prestations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prestations { grid-template-columns: repeat(3, 1fr); } }
.prestation { display: flex; flex-direction: column; padding: 28px 26px 30px; background-color: var(--bn-blanc); border: 1px solid var(--bn-trait-pierre); border-top: 3px solid var(--bn-trait-pierre); transition: border-color var(--duree) var(--courbe); }
.prestation:hover { border-top-color: var(--bn-orange); }
.prestation .icone-prestation { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid var(--bn-trait-pierre); color: var(--bn-marine); }
.prestation h3 { margin-bottom: 10px; color: var(--bn-marine); }
.prestation p { margin-bottom: 18px; font-size: 1rem; }
.prestation ul { margin-top: auto; border-top: 1px solid var(--bn-trait-pierre); padding-top: 14px; }
.prestation li { position: relative; padding: 5px 0 5px 18px; font-size: .9375rem; color: var(--bn-texte); }
.prestation li::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 2px; background-color: var(--bn-marine); }
.prestation--phare { background-color: var(--bn-marine); border-color: var(--bn-marine); color: var(--bn-blanc); --focus: var(--bn-orange); }
.prestation--phare h3 { color: var(--bn-blanc); }
.prestation--phare p, .prestation--phare li { color: var(--bn-sur-marine); }
.prestation--phare .icone-prestation { border-color: var(--bn-trait-marine); color: var(--bn-blanc); }
.prestation--phare ul { border-top-color: var(--bn-trait-marine); }
.prestation--phare li::before { background-color: var(--bn-orange); }
.etiquette { align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--bn-trait-marine); color: var(--bn-blanc); }

/* --------------------------------------------------------------------------
   9. Réalisations (photos en cadres fenêtre)
   -------------------------------------------------------------------------- */
.realisations { display: grid; gap: clamp(24px, 3vw, 36px); }
@media (min-width: 640px) { .realisations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .realisations { grid-template-columns: repeat(3, 1fr); } }
.realisation { margin: 0; }
.realisation .cadre { aspect-ratio: 4 / 3; }
.realisation figcaption strong { display: block; color: var(--bn-blanc); font-weight: 500; font-size: 1rem; }
.note-realisations { margin-top: 40px; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   10. Pourquoi nous
   -------------------------------------------------------------------------- */
.pourquoi { display: grid; gap: clamp(40px, 6vw, 72px); align-items: start; }
@media (min-width: 1024px) { .pourquoi { grid-template-columns: 1fr 1fr; } }
.atouts { display: grid; gap: 0; border-top: 1px solid var(--bn-trait-pierre); }
@media (min-width: 640px) { .atouts { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
.atout { padding: 24px 0; border-bottom: 1px solid var(--bn-trait-pierre); }
.atout .icone { color: var(--bn-marine); margin-bottom: 14px; }
.atout h3 { margin-bottom: 8px; color: var(--bn-marine); font-size: 1.1875rem; }
.atout p { margin: 0; font-size: 1rem; }
.pourquoi .cadre { aspect-ratio: 3 / 4; }
.gerant { margin-top: 32px; padding: 22px 24px; background-color: var(--bn-blanc); border-left: 3px solid var(--bn-marine); }
.gerant p { margin: 0; color: var(--bn-texte); }

/* --------------------------------------------------------------------------
   11. Méthode
   -------------------------------------------------------------------------- */
.etapes { display: grid; gap: 1px; background-color: var(--bn-trait-marine); border: 1px solid var(--bn-trait-marine); counter-reset: etape; }
@media (min-width: 700px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etape { padding: 28px 24px 32px; background-color: var(--bn-marine); }
.etape .numero { display: block; margin-bottom: 18px; font-family: var(--police-titre); font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--bn-blanc); font-variant-numeric: tabular-nums; }
.etape h3 { margin-bottom: 8px; }
.etape p { margin: 0; font-size: 1rem; }

/* --------------------------------------------------------------------------
   12. Zone d'intervention : plan coté (positions relatives réelles autour d'Autun)
   -------------------------------------------------------------------------- */
.zone-grille { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 1024px) { .zone-grille { grid-template-columns: .9fr 1.1fr; } }
.villes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 28px 0; border-top: 1px solid var(--bn-trait-pierre); }
.villes li { padding: 12px 0; border-bottom: 1px solid var(--bn-trait-pierre); font-weight: 500; color: var(--bn-marine); }
.villes li.siege { font-weight: 500; }
.plan { width: 100%; height: auto; color: var(--bn-marine); background-color: var(--bn-blanc); border: 1px solid var(--bn-trait-pierre); }
.plan .rayon { fill: none; stroke: var(--bn-trait-pierre); stroke-width: 1.5; stroke-dasharray: 6 6; }
.plan .liaison { stroke: var(--bn-trait-pierre); stroke-width: 1.5; }
.plan .ville { fill: var(--bn-marine); }
.plan .siege-point { fill: var(--bn-orange); stroke: var(--bn-marine); stroke-width: 3; }
.plan .massif { fill: var(--bn-pierre); stroke: var(--bn-trait-pierre); stroke-width: 1.5; }
.plan text { font-family: var(--police-texte); font-size: 15px; font-weight: 500; fill: var(--bn-texte); }
.plan .texte-siege { font-family: var(--police-titre); font-weight: 800; font-size: 18px; fill: var(--bn-marine); }
.plan .texte-massif { font-size: 13px; font-weight: 400; fill: var(--bn-texte-doux); letter-spacing: .12em; text-transform: uppercase; }
.plan .cote-echelle { stroke: var(--bn-texte-doux); stroke-width: 1.5; }
.plan .texte-echelle { font-size: 12px; font-weight: 400; fill: var(--bn-texte-doux); }
@media (max-width: 639px) { .plan { display: none; } } /* trop petit pour être lu : la liste des villes suffit */

/* --------------------------------------------------------------------------
   13. Contact + formulaire (le comportement est dans demande.js, inchangé)
   -------------------------------------------------------------------------- */
.contact-grille { display: grid; gap: clamp(40px, 6vw, 64px); }
@media (min-width: 1024px) { .contact-grille { grid-template-columns: .8fr 1.2fr; } }
.coordonnees { display: grid; gap: 0; border-top: 1px solid var(--bn-trait-marine); margin-bottom: 32px; }
.coordonnees li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--bn-trait-marine); }
.coordonnees .icone { color: var(--bn-sur-marine); margin-top: 2px; }
.coordonnees .libelle { display: block; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bn-sur-marine); }
.coordonnees a, .coordonnees .valeur { color: var(--bn-blanc); font-weight: 500; text-decoration: none; }
.coordonnees a:hover { text-decoration: underline; text-underline-offset: 3px; }
.coordonnees .tel-grand { font-family: var(--police-titre); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.horaires-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.horaires-table caption { text-align: left; margin-bottom: 10px; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bn-sur-marine); }
.horaires-table th { text-align: left; font-weight: 400; color: var(--bn-sur-marine); padding: 7px 0; }
.horaires-table td { text-align: right; color: var(--bn-blanc); font-weight: 500; padding: 7px 0; font-variant-numeric: tabular-nums; }
.formulaire { padding: clamp(24px, 4vw, 40px); background-color: var(--bn-pierre); color: var(--bn-texte); --focus: var(--bn-marine); }
.formulaire h3 { color: var(--bn-marine); font-size: 1.5rem; margin-bottom: 24px; }
.section--marine .formulaire p { color: var(--bn-texte-doux); }   /* le formulaire est sur pierre : jamais le texte clair des sections marine */
.champs { display: grid; gap: 18px; }
@media (min-width: 640px) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.champ label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .9375rem; color: var(--bn-texte); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; font: 400 1rem/1.4 var(--police-texte); color: var(--bn-texte);
  background-color: var(--bn-blanc); border: 1px solid var(--bn-texte-doux); border-radius: 0;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--bn-marine); outline-offset: 1px; border-color: var(--bn-marine); }
.requis { color: var(--bn-texte-doux); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mention-formulaire { margin: 20px 0; font-size: .875rem; color: var(--bn-texte-doux); }
.mention-formulaire a { color: var(--bn-marine); font-weight: 500; }
.formulaire .bouton { width: 100%; }
.statut { min-height: 1.5em; margin: 16px 0 0; text-align: center; font-size: .9375rem; }
.statut--ok { color: var(--bn-marine); font-weight: 500; }
.statut--erreur { color: var(--bn-texte); font-weight: 500; border-left: 3px solid var(--bn-marine); padding-left: 10px; text-align: left; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.pied { background-color: var(--bn-marine-900); color: var(--bn-sur-marine); padding-block: 64px 32px; font-size: .9375rem; --focus: var(--bn-orange); }
.pied-grille { display: grid; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--bn-trait-marine); }
@media (min-width: 768px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied h2 { font-family: var(--police-texte); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bn-blanc); margin-bottom: 16px; }
.pied li { margin-bottom: 4px; }
.pied a { display: inline-flex; align-items: center; min-height: 32px; color: var(--bn-sur-marine); text-decoration: none; }
.pied a:hover { color: var(--bn-blanc); text-decoration: underline; text-underline-offset: 3px; }
.pied .marque { margin-bottom: 18px; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: .8125rem; }
.pied-bas p { margin: 0; }

/* --------------------------------------------------------------------------
   15. Bouton d'appel flottant (mobile uniquement)
   -------------------------------------------------------------------------- */
.appel-flottant { display: none; }
@media (max-width: 767px) {
  .appel-flottant {
    display: grid; place-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 60px; height: 60px;
    background-color: var(--bn-marine); color: var(--bn-blanc); border: 2px solid var(--bn-blanc); border-radius: 50%;
    --focus: var(--bn-orange);
  }
  .appel-flottant .icone { width: 26px; height: 26px; }
  .pied { padding-bottom: 104px; } /* le bouton ne masque jamais le bas de page */
}

/* --------------------------------------------------------------------------
   16. Pages légales
   -------------------------------------------------------------------------- */
.page-legale { padding-block: clamp(56px, 8vw, 96px); }
.page-legale .conteneur { max-width: calc(820px + 2 * var(--gouttiere)); }
.page-legale h1 { font-size: clamp(2rem, 5vw, 3.25rem); color: var(--bn-marine); margin-bottom: 16px; }
.page-legale h2 { font-size: 1.5rem; letter-spacing: -0.01em; color: var(--bn-marine); margin: 48px 0 14px; }
.page-legale p, .page-legale li { color: var(--bn-texte); }
.page-legale ul { margin: 0 0 1em; }
.page-legale li { position: relative; padding: 4px 0 4px 18px; }
.page-legale li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 2px; background-color: var(--bn-marine); }
.page-legale a { color: var(--bn-marine); font-weight: 500; }
.page-legale dl { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--bn-trait-pierre); }
@media (min-width: 640px) { .page-legale dl { grid-template-columns: 240px minmax(0, 1fr); } }
.page-legale dt, .page-legale dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--bn-trait-pierre); }
.page-legale dt { color: var(--bn-texte-doux); }
@media (min-width: 640px) { .page-legale dt { padding-right: 16px; } }
.page-legale .mise-a-jour { color: var(--bn-texte-doux); }

/* --------------------------------------------------------------------------
   17. Apparition en fondu simple (une seule fois) — site.js ne masque que les blocs sous la ligne de flottaison ;
       sans JavaScript, tout reste visible
   -------------------------------------------------------------------------- */
.apparition.masquee { opacity: 0; transition: opacity 600ms var(--courbe); }
.apparition.masquee.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .apparition.masquee { opacity: 1; }
  *, *::before, *::after { transition-duration: 0ms !important; }
}
@media (max-width: 359px) { .bouton { white-space: normal; } } /* très petits écrans : le libellé peut passer à la ligne */