/* ==========================================================================
   PRO ARBOR — Feuille de style
   ---------------------------------------------------------------------------
   Organisation
     1.  Variables de marque
     2.  Reinitialisation et bases
     3.  Typographie
     4.  Mise en page et grilles
     5.  Motif topographique (signature visuelle)
     6.  En-tete et navigation
     7.  Boutons
     8.  Banniere d'accueil
     9.  Bandeau de credibilite
     10. Cartes
     11. Parcours clientele
     12. Etapes numerotees
     13. Encadres et listes
     14. Tableaux techniques
     15. Questions frequentes
     16. Territoire
     17. Appel a l'action
     18. Formulaires
     19. Pages interieures
     20. Pied de page
     21. Utilitaires
     22. Adaptation mobile
     23. Accessibilite et impression
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de marque
   -------------------------------------------------------------------------- */
:root {
  /* --------------------------------------------------------------------
     Fonds sombres — charcoal chaud presque noir, comme le bandeau
     de marque. Le vert forest a ete abandonne : trop attendu, et il
     etouffe les photos d'automne.
     -------------------------------------------------------------------- */
  --nuit:         #101316;  /* le plus profond */
  --sombre:       #1A1E23;  /* fond principal des sections sombres */
  --brun:         #2B323A;  /* liens et icones sur fond clair, survols */

  /* Gris neutres - fonds de sections alternees, sans teinte beige */
  --sable:        #F1F3F5;  /* nuance a l interieur d un panneau blanc */
  --sable-2:      #E6E9EB;

  /* Or — plus vif et plus chaud que le laiton precedent */
  --or:           #C9A24A;
  --or-clair:     #E0C078;
  --or-sombre:    #7C5E17;  /* seul l or fonce passe le seuil AA sur le gris de page */
  --or-voile:     rgba(201, 162, 74, .12);

  /* Vert feuille — reprend les icones du bandeau. Sert d'accent
     secondaire, notamment pour distinguer le parcours acericole. */
  --feuille:       #A7C56A;  /* sur fond sombre */
  --feuille-fonce: #5E7A2E;  /* sur fond clair */

  /* Neutres - le fond de page est gris, les panneaux sont blancs */
  --taupe:        #9AA0A6;
  --creme:        #EAEBED;  /* fond de page : gris neutre, aucune chaleur */
  --blanc:        #FFFFFF;
  --bordure:      #E4E6E9;
  --bordure-forte:#C6CBD1;

  /* Encres */
  --encre:        #15181C;
  --encre-douce:  #4E545C;
  --encre-claire: #666C74;

  /* Encres sur fond sombre */
  --sur-sombre:       #E6E8EB;
  --sur-sombre-douce: #A6ABB2;
  --sur-sombre-filet: rgba(255, 255, 255, .11);

  --brique:       #A8452F;

  /* Typographie */
  --titre: "Poppins", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  --texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rythme et formes */
  --largeur:      1200px;
  --largeur-etroite: 860px;
  --mesure:       70ch;
  --rayon:        10px;
  --rayon-panneau: 24px;
  --rayon-xl:     30px;
  --rayon-lg:     16px;
  --gouttiere:    clamp(1.25rem, 4vw, 2.5rem);

  /* Ombres — discretes */
  --ombre-1: 0 1px 2px rgba(16, 19, 22, .06);
  --ombre-2: 0 2px 6px rgba(16, 19, 22, .05), 0 12px 32px rgba(16, 19, 22, .08);
  --ombre-3: 0 4px 12px rgba(16, 19, 22, .07), 0 24px 56px rgba(16, 19, 22, .12);

  --glisse: 170ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reinitialisation et bases
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--encre);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
}

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

a {
  color: var(--brun);
  text-decoration-color: rgba(43, 50, 58, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--glisse), text-decoration-color var(--glisse);
}
a:hover { color: var(--or-sombre); text-decoration-color: currentColor; }

hr.filet {
  border: 0;
  border-top: 1px solid var(--bordure);
  margin-block: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: var(--sombre);
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.15rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.65rem, 3vw, 2.3rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.3rem); letter-spacing: -.015em; }
h4 { font-size: 1.05rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--sombre); }

/* Etiquette de section : petite capitale precedee d'un filet */
.etiquette {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--titre);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--or-sombre);
  margin: 0 0 1.1rem;
}
.etiquette::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--or);
  flex-shrink: 0;
}
.etiquette.centre { justify-content: center; }

.section--sombre .etiquette { color: var(--or-clair); }
.section--sombre .etiquette::before { background: var(--or-clair); }

/* Paragraphe d'introduction */
.plomb {
  font-size: clamp(1.075rem, 1.55vw, 1.22rem);
  line-height: 1.62;
  color: var(--encre-douce);
}
.section--sombre .plomb, .entete-page .plomb { color: var(--sur-sombre-douce); }

/* Citation / mise en exergue */
.exergue {
  font-family: var(--titre);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.018em;
  color: var(--sombre);
  border-left: 3px solid var(--or);
  padding-left: clamp(1.2rem, 2.5vw, 1.9rem);
  margin-block: clamp(2rem, 4vw, 2.8rem);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   4. Mise en page et grilles
   -------------------------------------------------------------------------- */
.contenant {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.contenant--etroit { max-width: var(--largeur-etroite); }

.section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.section--serree { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

.section--sombre  { background: var(--sombre); color: var(--sur-sombre); }
.section--nuit  { background: var(--nuit);  color: var(--sur-sombre); }
.section--sombre h2, .section--sombre h3, .section--sombre h4,
.section--nuit h2, .section--nuit h3, .section--nuit h4 { color: var(--blanc); }
.section--sombre a, .section--nuit a { color: var(--or-clair); }

.section--pale  { background: var(--sable); }
.section--blanche { background: var(--blanc); }

.entete-section { max-width: 60ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section.centre .plomb { margin-inline: auto; }

/* Grilles */
.grille { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); }

/* Deux colonnes asymetriques : texte + panneau */
.duo-texte {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  /* minmax(0, 1fr) empeche un enfant large (tableau a defilement)
     d'elargir la colonne et de faire deborder la page. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .duo-texte { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .duo-texte--panneau { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* Les enfants de grille ne doivent jamais imposer leur largeur intrinseque. */
.duo-texte > * { min-width: 0; }

/* --------------------------------------------------------------------------
   5. Motif topographique (signature visuelle)
   -------------------------------------------------------------------------- */
.motif {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}

.motif--clair { background-image: url("../images/motif-topo-clair.svg"); }

/* Placement dans la banniere : deborde a droite */
.motif--banniere {
  top: 50%;
  right: -14%;
  transform: translateY(-50%);
  width: min(760px, 82%);
  aspect-ratio: 4 / 3;
  opacity: .30;
}

/* Placement discret en filigrane de section */
.motif--filigrane {
  top: -8%;
  right: -18%;
  width: min(620px, 70%);
  aspect-ratio: 4 / 3;
  opacity: .11;
}

/* Vignette decorative autonome (remplace une photo) */
.vignette-topo {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon-lg);
  background: linear-gradient(155deg, var(--sombre), var(--nuit));
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  isolation: isolate;
}
.vignette-topo::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  background: url("../images/motif-topo-clair.svg") center/contain no-repeat;
  opacity: .34;
  z-index: -1;
}
.vignette-topo__interieur { text-align: center; max-width: 30ch; }
.vignette-topo img { height: 84px; width: auto; margin: 0 auto 1.1rem; }
.vignette-topo p {
  font-family: var(--titre);
  font-size: .93rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sur-sombre-douce);
  margin: 0;
}
.vignette-topo .devise {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: .7rem;
}

/* --------------------------------------------------------------------------
   6. En-tete et navigation
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sombre);
  border-bottom: 1px solid var(--sur-sombre-filet);
}

.entete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.entete__logo { display: flex; align-items: center; flex-shrink: 0; }
.entete__logo img { height: 54px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(.15rem, .9vw, .8rem); }

.nav__lien, .nav__declencheur {
  font-family: var(--titre);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--sur-sombre);
  text-decoration: none;
  padding: .6rem .75rem;
  border-radius: var(--rayon);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--glisse), background var(--glisse);
}
.nav__lien:hover, .nav__declencheur:hover {
  color: var(--blanc);
  background: rgba(255, 255, 255, .07);
}
.nav__lien[aria-current="page"] { color: var(--or-clair); }

.nav__groupe { position: relative; }

.nav__declencheur { display: inline-flex; align-items: center; gap: .38rem; font: inherit; font-family: var(--titre); font-size: .92rem; font-weight: 500; }
.nav__declencheur svg { transition: transform var(--glisse); flex-shrink: 0; }
.nav__declencheur[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__sousmenu {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 285px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-3);
  padding: .45rem;
  margin: 0;
  list-style: none;
  display: none;
}
.nav__sousmenu[data-ouvert="true"] { display: block; }

.nav__sousmenu a {
  display: block;
  padding: .65rem .8rem;
  border-radius: var(--rayon);
  color: var(--sombre);
  text-decoration: none;
  font-family: var(--titre);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.35;
}
.nav__sousmenu a:hover { background: var(--sable-2); color: var(--sombre); }
.nav__desc {
  display: block;
  font-family: var(--texte);
  font-size: .8rem;
  font-weight: 400;
  color: var(--encre-douce);
  margin-top: .12rem;
}

/* Bouton telephone */
.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--titre);
  font-size: .92rem;
  font-weight: 600;
  color: var(--sombre);
  background: var(--or);
  padding: .62rem 1.05rem;
  border-radius: var(--rayon);
  text-decoration: none;
  white-space: nowrap;
  margin-left: .4rem;
  transition: background var(--glisse);
}
.entete__tel:hover { background: var(--or-clair); color: var(--sombre); }
.entete__tel svg { flex-shrink: 0; }

.entete__bascule {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--rayon);
  padding: .5rem .58rem;
  cursor: pointer;
  color: var(--sur-sombre);
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--titre);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  padding: .92rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 100px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--glisse), border-color var(--glisse), color var(--glisse), box-shadow var(--glisse);
}
.bouton svg { flex-shrink: 0; }

.bouton--or { background: var(--or); color: var(--sombre); border-color: var(--or); }
.bouton--or:hover { background: var(--or-clair); border-color: var(--or-clair); color: var(--sombre); box-shadow: var(--ombre-2); }

.bouton--sombre { background: var(--sombre); color: var(--blanc); border-color: var(--sombre); }
.bouton--sombre:hover { background: var(--brun); border-color: var(--brun); color: var(--blanc); box-shadow: var(--ombre-2); }

.bouton--contour { background: transparent; color: var(--sombre); border-color: var(--bordure-forte); }
.bouton--contour:hover { background: var(--sombre); border-color: var(--sombre); color: var(--blanc); }

.bouton--fantome { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .38); }
.bouton--fantome:hover { background: var(--blanc); border-color: var(--blanc); color: var(--sombre); }

.bouton--large { width: 100%; }
.bouton--petit { padding: .65rem 1.15rem; font-size: .89rem; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: .8rem; }
.groupe-boutons.centre { justify-content: center; }

/* Lien flechle discret */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--titre);
  font-size: .93rem;
  font-weight: 600;
  color: var(--or-sombre);
  text-decoration: none;
}
.lien-fleche svg { transition: transform var(--glisse); }
.lien-fleche:hover { color: var(--or-sombre); }
.lien-fleche:hover svg { transform: translateX(3px); }
.section--sombre .lien-fleche, .section--nuit .lien-fleche { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   8. Banniere d'accueil
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: clip;   /* clip et non hidden : hidden ferait de l element un conteneur de defilement, ce qui casse les timelines view() de ses enfants */
  background: linear-gradient(158deg, var(--sombre) 0%, var(--nuit) 100%);
  color: var(--sur-sombre);
  padding-block: clamp(3.5rem, 8.5vw, 7rem);
}
.hero__interieur { position: relative; z-index: 2; }
.hero__contenu { max-width: 34em; }

/* ---- Variante avec video de fond -------------------------------------------
   La video n'a aucune piste audio : elle ne peut pas emettre de son.
   Elle est purement decorative, donc masquee aux lecteurs d'ecran.
   --------------------------------------------------------------------------- */
.hero--video { position: relative; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--nuit) center/cover no-repeat;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le voile assure la lisibilite du texte par-dessus les images qui bougent.
   Il est plus opaque que sur une photo fixe : un fond en mouvement fatigue
   davantage la lecture, et la luminosite varie d'une image a l'autre. */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(14, 16, 19, .90) 0%,
      rgba(14, 16, 19, .84) 34%,
      rgba(14, 16, 19, .62) 68%,
      rgba(14, 16, 19, .46) 100%),
    linear-gradient(to top, rgba(14, 16, 19, .55) 0%, transparent 45%);
}

/* Bouton de pause — exige par les regles d'accessibilite des le moment
   ou une animation depasse cinq secondes. */
.hero__pause {
  position: absolute;
  z-index: 3;
  right: var(--gouttiere);
  bottom: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .8rem;
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sur-sombre);
  background: rgba(14, 16, 19, .55);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--glisse), color var(--glisse), border-color var(--glisse);
}
.hero__pause:hover { background: rgba(14, 16, 19, .8); color: var(--blanc); border-color: rgba(255, 255, 255, .4); }
.hero__pause-lecture { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-pause { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-lecture { display: block; }

/* ---- Effet au defilement ---------------------------------------------------
   Le contenu de la banniere s'estompe et remonte legerement quand on
   descend. Les variables sont mises a jour par le JavaScript.
   Sans JavaScript, --defilement vaut 0 : rien ne bouge, tout est visible.
   --------------------------------------------------------------------------- */
.hero__contenu, .hero .credibilite {
  --defilement: 0;
  opacity: calc(1 - var(--defilement) * 1.15);
  transform: translate3d(0, calc(var(--defilement) * 44px), 0);
  will-change: opacity, transform;
}
/* Le bandeau de credibilite part un peu plus vite : ca cree de la profondeur */
.hero .credibilite {
  opacity: calc(1 - var(--defilement) * 1.45);
  transform: translate3d(0, calc(var(--defilement) * 68px), 0);
}

/* Revelation des sections a l'entree dans l'ecran.
   Etat par defaut : visible. La classe est ajoutee par le JavaScript,
   ce qui garantit que le contenu reste lisible s'il ne s'execute pas. */
.js-revelation .revelation {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 620ms cubic-bezier(.2, .7, .3, 1),
              transform 620ms cubic-bezier(.2, .7, .3, 1);
}
.js-revelation .revelation.est-visible {
  opacity: 1;
  transform: none;
}
/* Decalage en cascade pour les elements d'une meme grille */
.js-revelation .revelation[data-retard="1"] { transition-delay: 90ms; }
.js-revelation .revelation[data-retard="2"] { transition-delay: 180ms; }
.js-revelation .revelation[data-retard="3"] { transition-delay: 270ms; }
.js-revelation .revelation[data-retard="4"] { transition-delay: 360ms; }
.js-revelation .revelation[data-retard="5"] { transition-delay: 450ms; }

/* ---- Variante avec photo de fond -------------------------------------------
   S'active en posant la variable --photo sur l'element, par exemple :
     <section class="hero hero--photo" style="--photo: url('images/photos/tubulure.jpg')">
   Le voile degrade garantit que le texte blanc reste lisible quelle que soit
   la photo. Si le fichier est absent, seul le degrade s'affiche : la page
   reste correcte, jamais cassee.
   --------------------------------------------------------------------------- */
/* Le voile doit atteindre au moins 70 % d'opacite la ou le texte blanc
   se pose : plusieurs des photos sont claires (brume, neige) et un voile
   plus leger ferait tomber le contraste sous le seuil AA. A droite,
   ou il n'y a pas de texte, on laisse la photo respirer. */
/* Les selecteurs doublent la classe volontairement. Sans cela, la regle
   .entete-page de la section 19 — plus bas dans le fichier, meme specificite —
   ecrase le fond photo avec son degrade en propriete raccourcie. */
.hero.hero--photo, .entete-page.entete-page--photo {
  background-image:
    linear-gradient(100deg,
      rgba(14, 16, 19, .80) 0%,
      rgba(14, 16, 19, .70) 34%,
      rgba(14, 16, 19, .42) 68%,
      rgba(14, 16, 19, .22) 100%),
    var(--photo, none);
  background-size: cover, cover;
  background-position: center, center center;
  background-repeat: no-repeat, no-repeat;
}

/* Sur mobile, la colonne de texte occupe toute la largeur : on assombrit
   davantage, sinon le bas de la photo passe sous le texte. */
@media (max-width: 760px) {
  .hero.hero--photo, .entete-page.entete-page--photo {
    background-image:
      linear-gradient(178deg,
        rgba(14, 16, 19, .78) 0%,
        rgba(14, 16, 19, .88) 42%,
        rgba(14, 16, 19, .92) 100%),
      var(--photo, none);
    background-position: center, center 22%;
  }
}

/* Quand une photo est presente, le motif topographique devient superflu :
   deux textures qui se superposent font du bruit. */
.hero--photo .motif, .entete-page--photo .motif { display: none; }

.hero__devise {
  font-family: var(--titre);
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin: 0 0 1.35rem;
}

.hero h1 { color: var(--blanc); margin-bottom: 1.1rem; }
/* Accent dore dans les titres. Deux tons : l'or clair sur fond marine,
   l'or fonce sur fond blanc — seul celui-la passe le seuil de contraste. */
.accent { color: var(--or-sombre); }
.hero .accent,
.entete-page .accent,
.section--sombre .accent,
.section--nuit .accent,
.bandeau-cta .accent,
.bande-video .accent,
.atterrissage .accent { color: var(--or-clair); }

.hero__plomb {
  font-size: clamp(1.08rem, 1.75vw, 1.28rem);
  line-height: 1.6;
  color: var(--sur-sombre-douce);
  margin-bottom: 2.1rem;
  max-width: 33em;
}

/* --------------------------------------------------------------------------
   9. Bandeau de credibilite
   -------------------------------------------------------------------------- */
.credibilite {
  border-top: 1px solid var(--sur-sombre-filet);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 188px), 1fr));
}

.credibilite__item { display: flex; gap: .85rem; align-items: flex-start; }
.credibilite__item svg {
  width: 21px; height: 21px;
  color: var(--or-clair);
  flex-shrink: 0;
  margin-top: .18rem;
}
.credibilite__titre {
  display: block;
  font-family: var(--titre);
  font-size: .95rem;
  font-weight: 600;
  color: var(--blanc);
  line-height: 1.3;
  margin-bottom: .18rem;
}
.credibilite__note {
  display: block;
  font-size: .855rem;
  line-height: 1.5;
  color: var(--sur-sombre-douce);
}

/* Version sur fond clair */
.credibilite--claire { border-top-color: var(--bordure); }
.credibilite--claire .credibilite__item svg { color: var(--or-sombre); }
.credibilite--claire .credibilite__titre { color: var(--sombre); }
.credibilite--claire .credibilite__note { color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   10. Cartes
   -------------------------------------------------------------------------- */
.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: clamp(1.5rem, 2.4vw, 1.95rem);
  transition: border-color var(--glisse), box-shadow var(--glisse);
}

a.carte { text-decoration: none; color: inherit; }
a.carte:hover { border-color: var(--taupe); box-shadow: var(--ombre-2); color: inherit; }

.carte__icone {
  width: 34px; height: 34px;
  color: var(--brun);
  margin-bottom: 1.15rem;
  flex-shrink: 0;
}
.carte h3 { margin-bottom: .45rem; }
.carte p { font-size: .95rem; line-height: 1.62; color: var(--encre-douce); }
.carte > :last-child { margin-bottom: 0; }
.carte .lien-fleche { margin-top: 1.15rem; }
.carte .carte__pied { margin-top: auto; padding-top: 1.15rem; }

/* Cartes sur fond vert */
.section--sombre .carte, .section--nuit .carte {
  background: rgba(255, 255, 255, .045);
  border-color: var(--sur-sombre-filet);
}
.section--sombre .carte:hover, .section--nuit .carte:hover { border-color: rgba(255, 255, 255, .26); box-shadow: none; }
.section--sombre .carte p, .section--nuit .carte p { color: var(--sur-sombre-douce); }
.section--sombre .carte__icone, .section--nuit .carte__icone { color: var(--or-clair); }

/* Carte numerotee (variante sobre) */
.carte__numero {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--or-sombre);
  margin-bottom: .9rem;
  display: block;
}
.section--sombre .carte__numero { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   11. Parcours clientele
   -------------------------------------------------------------------------- */
.parcours {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr));
}

.carte-parcours {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-top: 3px solid var(--or);
  border-radius: 0 0 var(--rayon-lg) var(--rayon-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: box-shadow var(--glisse);
}
.carte-parcours:hover { box-shadow: var(--ombre-2); }
.carte-parcours--acericole { border-top-color: var(--feuille-fonce); }

.carte-parcours__pour {
  font-family: var(--titre);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or-sombre);
  margin: 0 0 .85rem;
}
.carte-parcours--acericole .carte-parcours__pour { color: var(--feuille-fonce); }

.carte-parcours h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); margin-bottom: .6rem; }
.carte-parcours > p { color: var(--encre-douce); font-size: .98rem; }

.carte-parcours__liste {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 1.9rem;
  display: grid;
  gap: .68rem;
  border-top: 1px solid var(--bordure);
  padding-top: 1.4rem;
}
.carte-parcours__liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .955rem;
  line-height: 1.55;
}
.carte-parcours__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}
.carte-parcours--acericole .carte-parcours__liste li::before { background: var(--feuille-fonce); }

.carte-parcours .groupe-boutons { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. Etapes numerotees
   -------------------------------------------------------------------------- */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.etape {
  counter-increment: etape;
  position: relative;
  padding: 0 0 1.9rem 4.4rem;
}
.etape:last-child { padding-bottom: 0; }

.etape::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0; top: -.12em;
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--or-sombre);
  letter-spacing: .02em;
}

/* Filet vertical reliant les etapes */
.etape::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.1rem;
  bottom: .35rem;
  width: 1px;
  background: var(--bordure);
}
.etape:last-child::after { display: none; }

.etape h3 { margin-bottom: .35rem; }
.etape p { font-size: .965rem; color: var(--encre-douce); margin-bottom: 0; }

.section--sombre .etape::before, .section--nuit .etape::before { color: var(--or-clair); }
.section--sombre .etape::after, .section--nuit .etape::after { background: var(--sur-sombre-filet); }
.section--sombre .etape p, .section--nuit .etape p { color: var(--sur-sombre-douce); }

/* --------------------------------------------------------------------------
   13. Encadres et listes
   -------------------------------------------------------------------------- */
.encadre {
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--or);
  background: var(--blanc);
  padding: 1.35rem 1.55rem;
  border-radius: 0 var(--rayon-lg) var(--rayon-lg) 0;
  margin-block: 1.8rem;
}
.encadre h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.encadre p { font-size: .955rem; }
.encadre > :last-child { margin-bottom: 0; }

.encadre--info   { border-left-color: var(--brun); background: var(--sable); }
.encadre--alerte { border-left-color: var(--brique); background: #FCF4F1; }

/* Liste a crochets */
.liste-crochets { list-style: none; padding: 0; margin: 1.35rem 0; display: grid; gap: .72rem; }
.liste-crochets li { position: relative; padding-left: 1.85rem; line-height: 1.6; }
.liste-crochets li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .34em;
  width: .95rem; height: .5rem;
  border-left: 2px solid var(--or);
  border-bottom: 2px solid var(--or);
  transform: rotate(-45deg);
}
.section--sombre .liste-crochets li::before, .section--nuit .liste-crochets li::before { border-color: var(--or-clair); }

/* Liste de definitions techniques */
.definitions { display: grid; gap: 1.3rem; margin-block: 1.7rem; }
.definitions > div { display: grid; gap: .2rem; }
.definitions dt {
  font-family: var(--titre);
  font-size: .95rem;
  font-weight: 600;
  color: var(--sombre);
}
.definitions dd { margin: 0; font-size: .95rem; color: var(--encre-douce); line-height: 1.6; }

/* --------------------------------------------------------------------------
   14. Tableaux techniques
   -------------------------------------------------------------------------- */
.tableau-enveloppe {
  overflow-x: auto;
  max-width: 100%;
  margin-block: 1.8rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  background: var(--blanc);
  /* Indique au doigt qu'il y a du contenu a faire defiler. */
  overscroll-behavior-x: contain;
}

table.tableau {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: .945rem;
}
table.tableau caption {
  text-align: left;
  padding: 1rem 1.15rem .35rem;
  font-family: var(--titre);
  font-size: .95rem;
  font-weight: 600;
  color: var(--sombre);
}
table.tableau th, table.tableau td {
  text-align: left;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
  line-height: 1.55;
}
table.tableau thead th {
  font-family: var(--titre);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-douce);
  background: var(--sable);
  white-space: nowrap;
}
table.tableau tbody th { font-weight: 600; color: var(--sombre); }
table.tableau tbody tr:last-child th,
table.tableau tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   15. Questions frequentes
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .6rem; margin-block: 1.8rem; }

.faq details {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  transition: border-color var(--glisse);
}
.faq details[open] { border-color: var(--bordure-forte); }

.faq summary {
  cursor: pointer;
  padding: 1.05rem 1.3rem;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  color: var(--sombre);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: .62rem; height: .62rem;
  border-right: 2px solid var(--or-sombre);
  border-bottom: 2px solid var(--or-sombre);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: -.2rem;
  transition: transform var(--glisse);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.faq summary:hover { color: var(--or-sombre); }

.faq__reponse {
  padding: 0 1.3rem 1.25rem;
  font-size: .96rem;
  color: var(--encre-douce);
  line-height: 1.68;
  max-width: 68ch;
}
.faq__reponse > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. Territoire
   -------------------------------------------------------------------------- */
.regions { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.regions li {
  font-family: var(--titre);
  font-size: .885rem;
  font-weight: 500;
  padding: .48rem 1rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px;
  color: var(--sur-sombre);
}
.regions--claire li { border-color: var(--bordure-forte); color: var(--encre); }

/* --------------------------------------------------------------------------
   17. Appel a l'action
   -------------------------------------------------------------------------- */
.bandeau-cta {
  position: relative;
  overflow: clip;
  background: linear-gradient(140deg, var(--sombre), var(--nuit));
  color: var(--sur-sombre);
  border-radius: var(--rayon-lg);
  padding: clamp(2.1rem, 5vw, 3.6rem);
  isolation: isolate;
}
.bandeau-cta::before {
  content: "";
  position: absolute;
  top: -30%; right: -12%;
  width: min(560px, 62%);
  aspect-ratio: 4 / 3;
  background: url("../images/motif-topo-clair.svg") center/contain no-repeat;
  opacity: .18;
  z-index: -1;
}
.bandeau-cta h2 { color: var(--blanc); }
.bandeau-cta p { color: var(--sur-sombre-douce); max-width: 52ch; }
.bandeau-cta .groupe-boutons { margin-top: 1.85rem; }
.bandeau-cta__contenu { max-width: 44em; }

/* --------------------------------------------------------------------------
   17a. Figures photographiques
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
  display: grid;
  gap: .85rem;
}

.figure img {
  width: 100%;
  height: auto;
  border-radius: var(--rayon-lg);
  background: var(--sable-2);
}

.figure figcaption {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--encre-douce);
  padding-left: .9rem;
  border-left: 2px solid var(--or);
  max-width: 52ch;
}

/* Figure occupant toute la largeur de la colonne de texte */
.figure--large { margin-block: clamp(2rem, 4vw, 2.8rem); }
.figure--large figcaption { max-width: none; }

.section--sombre .figure figcaption,
.section--nuit .figure figcaption { color: var(--sur-sombre-douce); border-left-color: var(--or-clair); }

/* --------------------------------------------------------------------------
   17b. Section video
   Lecteur cliquable avec image d'apercu. La video ne se telecharge que si
   le visiteur decide de la regarder (preload="none").
   -------------------------------------------------------------------------- */
.cadre-video {
  position: relative;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  background: var(--nuit);
  aspect-ratio: 16 / 9;
  box-shadow: var(--ombre-3);
}

.cadre-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--nuit);
}

/* Legende sous la video */
.video-legende {
  font-size: .875rem;
  color: var(--encre-douce);
  margin-top: .9rem;
  max-width: 60ch;
}
.section--sombre .video-legende, .section--nuit .video-legende { color: var(--sur-sombre-douce); }

/* --------------------------------------------------------------------------
   18. Formulaires
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: 1.15rem; }

.champ { display: grid; gap: .38rem; }
.champ label {
  font-family: var(--titre);
  font-size: .89rem;
  font-weight: 600;
  color: var(--sombre);
}
.champ .facultatif { font-family: var(--texte); font-weight: 400; color: var(--encre-claire); font-size: .82rem; }
.champ .aide { font-size: .84rem; color: var(--encre-douce); line-height: 1.5; }

.champ input, .champ select, .champ textarea {
  font-family: var(--texte);
  font-size: 1rem;
  width: 100%;
  padding: .78rem .92rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  transition: border-color var(--glisse), box-shadow var(--glisse);
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--encre-douce) 50%), linear-gradient(135deg, var(--encre-douce) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }

/* Groupes du menu deroulant : le libelle du groupe doit se distinguer
   nettement des options, sinon on le prend pour un choix possible. */
.champ select optgroup {
  font-family: var(--titre);
  font-weight: 600;
  font-style: normal;
  color: var(--sombre);
  background: var(--sable);
}
.champ select option {
  font-family: var(--texte);
  font-weight: 400;
  color: var(--encre);
  background: var(--blanc);
}

.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--brun);
  box-shadow: 0 0 0 3px rgba(43, 50, 58, .12);
}
.champ input:invalid:not(:placeholder-shown) { border-color: var(--brique); }

.champ--duo { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.note-formulaire { font-size: .855rem; color: var(--encre-douce); line-height: 1.6; }

/* Coordonnees */
.coordonnees { display: grid; gap: 1.55rem; list-style: none; padding: 0; margin: 0; }
.coordonnee { display: flex; gap: .95rem; align-items: flex-start; }
.coordonnee svg { width: 20px; height: 20px; color: var(--or-sombre); flex-shrink: 0; margin-top: .35rem; }
.coordonnee__etiquette {
  display: block;
  font-family: var(--titre);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-claire);
  margin-bottom: .18rem;
}
.coordonnee__valeur { font-size: 1.04rem; color: var(--sombre); line-height: 1.5; }
.coordonnee a.coordonnee__valeur { font-weight: 600; text-decoration: none; }
.coordonnee a.coordonnee__valeur:hover { color: var(--or-sombre); text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. Pages interieures
   -------------------------------------------------------------------------- */
.entete-page {
  position: relative;
  overflow: clip;
  background: linear-gradient(158deg, var(--sombre), var(--nuit));
  color: var(--sur-sombre);
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(2.5rem, 5.5vw, 4.25rem);
}
.entete-page__interieur { position: relative; z-index: 1; }
.entete-page h1 { color: var(--blanc); max-width: 26em; }
.entete-page .plomb { max-width: 54ch; }

/* Fil d'Ariane */
.fil-ariane { font-size: .85rem; margin-bottom: 1.5rem; }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.fil-ariane li { display: flex; gap: .45rem; align-items: center; }
.fil-ariane li:not(:last-child)::after { content: "/"; color: var(--encre-claire); }
.fil-ariane a { color: var(--encre-douce); text-decoration: none; }
.fil-ariane a:hover { color: var(--or-sombre); text-decoration: underline; }
.fil-ariane [aria-current="page"] { color: var(--sombre); font-weight: 500; }

.entete-page .fil-ariane a { color: var(--sur-sombre-douce); }
.entete-page .fil-ariane [aria-current="page"] { color: var(--or-clair); font-weight: 500; }
.entete-page .fil-ariane li:not(:last-child)::after { color: rgba(255, 255, 255, .3); }

/* Corps d'article */
.article { max-width: var(--mesure); min-width: 0; }
.article > h2 { margin-top: 2.7rem; }
.article > h2:first-child { margin-top: 0; }
.article > h3 { margin-top: 2rem; }
.article ul:not([class]), .article ol:not([class]) { padding-left: 1.35rem; margin-block: 1.1rem; }
.article ul:not([class]) li, .article ol:not([class]) li { margin-bottom: .5rem; line-height: 1.65; }

/* Panneau lateral */
.panneau {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 1.6rem;
  box-shadow: var(--ombre-1);
}
@media (min-width: 900px) { .panneau--collant { position: sticky; top: 102px; } }
.panneau h3 { font-size: 1.08rem; }
.panneau p { font-size: .93rem; color: var(--encre-douce); }
.panneau .bouton { margin-top: .3rem; }
.panneau .bouton + .bouton { margin-top: .55rem; }
.panneau__filet { border: 0; border-top: 1px solid var(--bordure); margin-block: 1.25rem; }

/* Sommaire de page */
.sommaire ol { list-style: none; counter-reset: som; padding: 0; margin: 0; display: grid; gap: .55rem; }
.sommaire li { counter-increment: som; }
.sommaire a {
  display: flex;
  gap: .65rem;
  font-size: .92rem;
  color: var(--encre-douce);
  text-decoration: none;
  line-height: 1.45;
}
.sommaire a::before {
  content: counter(som, decimal-leading-zero);
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  color: var(--or-sombre);
  flex-shrink: 0;
  padding-top: .1rem;
}
.sommaire a:hover { color: var(--sombre); }

/* --------------------------------------------------------------------------
   20. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--nuit);
  color: var(--sur-sombre-douce);
  font-size: .94rem;
  padding-top: clamp(2.75rem, 5.5vw, 4rem);
}

.pied__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: 2.5rem;
}
.pied__marque { grid-column: span 1; }
@media (min-width: 700px) { .pied__marque { max-width: 30ch; } }

.pied__logo img { height: 72px; width: auto; margin-bottom: 1.15rem; }
.pied__devise { font-size: .89rem; line-height: 1.65; color: var(--sur-sombre-douce); }

.pied h4 {
  font-family: var(--titre);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-clair);
  margin-bottom: 1.1rem;
}

.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .62rem; }
.pied a { color: var(--sur-sombre); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied address { font-style: normal; line-height: 1.6; }

.pied__bas {
  border-top: 1px solid var(--sur-sombre-filet);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: #8A8F96;
}
.pied__bas p { margin: 0; }
.pied__bas a { color: #8A8F96; }
.pied__bas a:hover { color: var(--sur-sombre); }
.pied__legal { display: flex; flex-wrap: wrap; gap: 1.15rem; }

/* --------------------------------------------------------------------------
   21. Utilitaires
   -------------------------------------------------------------------------- */
.centre { text-align: center; }
.mesure { max-width: var(--mesure); }
.sans-marge { margin: 0; }
.marge-t { margin-top: 1.6rem; }
.marge-t-lg { margin-top: clamp(2rem, 4vw, 3rem); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--or);
  color: var(--sombre);
  font-family: var(--titre);
  font-weight: 600;
  padding: .85rem 1.25rem;
  border-radius: 0 0 var(--rayon) 0;
  text-decoration: none;
}
.saut-contenu:focus { left: 0; color: var(--sombre); }

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

:focus-visible { outline: 2.5px solid var(--or); outline-offset: 3px; border-radius: 2px; }
.entete :focus-visible, .hero :focus-visible, .section--sombre :focus-visible,
.section--nuit :focus-visible, .pied :focus-visible, .entete-page :focus-visible,
.bandeau-cta :focus-visible { outline-color: var(--or-clair); }

/* --------------------------------------------------------------------------
   22. Adaptation mobile
   -------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .entete__bascule { display: block; }

  .nav {
    position: fixed;
    inset: 78px 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--sombre);
    border-bottom: 1px solid var(--sur-sombre-filet);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
    padding: .75rem var(--gouttiere) 1.6rem;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
  }
  .nav[data-ouvert="true"] { display: flex; }

  .nav__lien, .nav__declencheur {
    width: 100%;
    justify-content: space-between;
    padding: .95rem .25rem;
    font-size: 1.04rem;
    border-radius: 0;
    border-bottom: 1px solid var(--sur-sombre-filet);
  }
  .nav__lien:hover, .nav__declencheur:hover { background: none; }

  .nav__groupe { position: static; }
  .nav__sousmenu {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    background: rgba(255, 255, 255, .04);
    border: 0;
    border-radius: var(--rayon);
    box-shadow: none;
    margin: .45rem 0 .6rem;
    padding: .3rem;
  }
  .nav__sousmenu[data-ouvert="true"] { display: block; }
  .nav__sousmenu a { color: var(--sur-sombre); }
  .nav__sousmenu a:hover { background: rgba(255, 255, 255, .07); color: var(--blanc); }
  .nav__desc { color: #9AA0A7; }

  .entete__tel { display: none; }
  .nav .entete__tel { display: inline-flex; justify-content: center; margin: 1.15rem 0 0; padding: .85rem 1.2rem; font-size: 1rem; }

  .motif--banniere { opacity: .17; right: -30%; width: 115%; }
  .motif--filigrane { opacity: .07; }
}

@media (max-width: 580px) {
  body { font-size: 1.02rem; }
  .groupe-boutons { flex-direction: column; align-items: stretch; }
  .groupe-boutons .bouton { width: 100%; }
  .etape { padding-left: 3.3rem; }
  .etape::after { left: .78rem; }
  .exergue { padding-left: 1.1rem; }
}

/* Cibles tactiles : sur mobile, les liens du pied de page et les liens
   legaux doivent atteindre une hauteur confortable au doigt (~44 px). */
@media (hover: none) and (pointer: coarse) {
  .pied ul { gap: .15rem; }
  .pied ul li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: .25rem;
  }
  .pied__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .fil-ariane a { display: inline-flex; align-items: center; min-height: 34px; }
}

/* --------------------------------------------------------------------------
   23. Accessibilite et impression
   -------------------------------------------------------------------------- */
/* Sur petit ecran la video joue aussi : c'est la demande d'Alex, et le
   fichier de la banniere ne pese que 2,5 Mo. L'image fixe reste posee en
   fond du conteneur, ce qui couvre le cas ou le telephone refuse la lecture
   (mode economie d'energie d'iOS, economiseur de donnees). Le voile est
   plus opaque qu'en grand ecran : en portrait, le cadrage serre laisse
   passer plus de mouvement derriere le texte. */
@media (max-width: 760px) {
  .hero__media { background-image: url("../images/photos/fond-accueil.jpg"); }
  .hero__voile {
    background:
      linear-gradient(178deg,
        rgba(14, 16, 19, .82) 0%,
        rgba(14, 16, 19, .90) 45%,
        rgba(14, 16, 19, .94) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .lien-fleche:hover svg { transform: none; }

  /* Aucun mouvement : la video cede la place a l'image fixe et
     les effets de defilement sont neutralises. */
  .hero__video { display: none; }
  .hero__media { background-image: url("../images/photos/fond-accueil.jpg"); }
  .hero__pause { display: none; }
  .hero__contenu, .hero .credibilite { opacity: 1 !important; transform: none !important; }
  .js-revelation .revelation { opacity: 1 !important; transform: none !important; }
}

@media print {
  .entete, .pied, .nav, .bandeau-cta, .motif, .vignette-topo, .saut-contenu, .panneau { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .hero, .entete-page, .section--sombre, .section--nuit { background: #fff !important; color: #000 !important; padding-block: 1rem !important; }
  .hero h1, .entete-page h1, .section--sombre h2, .section--nuit h2 { color: #000 !important; }
  .hero__plomb, .plomb { color: #333 !important; }
  .section { padding-block: 1rem; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .carte, .carte-parcours, .encadre { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* ---------------------------------------------------------------------------
   PAGE D'ATTERRISSAGE PUBLICITAIRE (soumission.html)
   Page vers laquelle pointent les publicites Facebook / Instagram / TikTok.
   Volontairement depouillee : pas de menu, pas de liens de fuite, un seul
   objectif — que le visiteur coche ses services et laisse ses coordonnees.
   -------------------------------------------------------------------------- */

/* En-tete sobre : logo + telephone seulement.
   Le <nav> et son bouton hamburger n'existent pas dans le balisage de la page;
   il reste seulement a forcer le telephone visible, puisque la regle mobile
   generale le masque au profit du menu deroulant. */
.entete--sobre .entete__bascule { display: none; }
.entete--sobre .entete__tel { display: inline-flex; }
@media (max-width: 420px) {
  .entete--sobre .entete__tel { padding: .55rem .8rem; font-size: .86rem; }
  .entete--sobre .entete__logo img { height: 42px; }
}

/* Banniere de la page */
.atterrissage {
  background: var(--sombre);
  color: var(--sur-sombre);
  position: relative;
  overflow: clip;
  padding-block: clamp(2.25rem, 6vw, 4rem);
}
.atterrissage__interieur { position: relative; z-index: 2; max-width: 46ch; }
.atterrissage h1 {
  color: var(--blanc);
  font-size: clamp(1.75rem, 5.2vw, 2.9rem);
  line-height: 1.14;
  margin-bottom: .85rem;
}
.atterrissage__plomb {
  font-size: clamp(1rem, 2.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--sur-sombre);
  margin: 0;
}

/* Les trois reperes de confiance sous le titre */
.reperes {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
}
.reperes li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--titre);
  font-size: .845rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--or-clair);
  background: var(--or-voile);
  border: 1px solid rgba(201, 162, 74, .3);
  border-radius: 100px;
  padding: .4rem .85rem;
}
.reperes svg { flex-shrink: 0; color: var(--feuille); }

/* Etapes numerotees du formulaire */
.bloc-form { margin-bottom: 2.5rem; }
.bloc-form__titre {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-family: var(--titre);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--encre);
  margin: 0 0 .35rem;
}
.bloc-form__numero {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--sombre);
  color: var(--or-clair);
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}
.bloc-form__note {
  font-size: .87rem;
  color: var(--encre-douce);
  line-height: 1.55;
  margin: 0 0 1.05rem 2.4rem;
}

/* Groupes de cases a cocher */
.groupe-choix { margin-bottom: 1.4rem; border: 0; padding: 0; margin-inline: 0; }
.groupe-choix__legende {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--or-sombre);
  padding: 0;
  margin-bottom: .6rem;
}
.choix-grille {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

/* Une case a cocher = une carte cliquable en entier */
.choix {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .95rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  cursor: pointer;
  line-height: 1.4;
  font-size: .935rem;
  color: var(--encre);
  transition: border-color var(--glisse), background var(--glisse), box-shadow var(--glisse);
  /* cible tactile confortable sur telephone */
  min-height: 52px;
}
.choix:hover { border-color: var(--bordure-forte); background: var(--sable); }

.choix input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--bordure-forte);
  border-radius: 4px;
  background: var(--blanc);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--glisse), border-color var(--glisse);
}
.choix input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 120ms cubic-bezier(.4, 0, .2, 1);
  background: var(--sombre);
  clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 9%, 38% 71%);
}
.choix input[type="checkbox"]:checked { background: var(--or); border-color: var(--or); }
.choix input[type="checkbox"]:checked::before { transform: scale(1); }
.choix input[type="checkbox"]:focus-visible { outline: 2px solid var(--or-sombre); outline-offset: 2px; }

.choix:has(input:checked) {
  border-color: var(--or);
  background: var(--or-voile);
  box-shadow: inset 0 0 0 1px var(--or);
}
/* Repli pour les navigateurs sans :has() — le JS pose la classe */
.choix.est-coche {
  border-color: var(--or);
  background: var(--or-voile);
  box-shadow: inset 0 0 0 1px var(--or);
}
.choix--urgence { border-left: 4px solid var(--brique); }

/* Barre d'appel collee en bas sur telephone */
.barre-appel { display: none; }
@media (max-width: 700px) {
  .barre-appel {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--sombre);
    border-top: 1px solid var(--sur-sombre-filet);
    color: var(--or-clair);
    font-family: var(--titre);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
  }
  .barre-appel svg { flex-shrink: 0; }
  /* espace pour que la barre ne masque pas le bas de page */
  body.a-barre-appel { padding-bottom: 4.5rem; }
}

/* Pied de page allege de la page publicitaire */
.pied--sobre { background: var(--nuit); padding-block: 2rem; }
.pied--sobre .contenant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pied--sobre img { height: 46px; width: auto; }
.pied--sobre p { margin: 0; font-size: .84rem; color: var(--sur-sombre-douce); }
.pied--sobre a { color: var(--sur-sombre-douce); }

/* ==========================================================================
   24. Cartes en pastille et grille decalee
   Inspire de la mise en page demandee par Alex : cartes blanches a grands
   coins arrondis, icone dans une pastille ronde, colonnes decalees en
   quinconce pour casser l'alignement rigide.
   ========================================================================== */

/* Pastille ronde autour de l'icone */
.carte--pastille { text-align: center; align-items: center; padding-block: clamp(2.2rem, 4vw, 3rem); }

.carte--pastille .carte__icone,
.pastille {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sombre);
  color: var(--or);
  margin: 0 auto 1.35rem;
  flex-shrink: 0;
  transition: background var(--glisse), color var(--glisse), transform var(--glisse);
}
.pastille svg { width: 30px; height: 30px; }
.carte--pastille .carte__icone { padding: 19px; }

a.carte--pastille:hover .pastille,
a.carte--pastille:hover .carte__icone { background: var(--or); color: var(--sombre); transform: scale(1.06); }

.carte--pastille p { text-align: center; }
.carte--pastille .carte__numero { color: var(--or-sombre); }

/* Sur fond sombre, la pastille s'inverse */
.section--sombre .carte--pastille .pastille,
.section--nuit .carte--pastille .pastille { background: var(--or); color: var(--sombre); }

/* ---- Grille decalee en quinconce -------------------------------------------
   Une colonne sur deux descend d'un cran. L'effet ne s'active qu'a partir
   de deux colonnes : en dessous, un decalage vertical n'aurait aucun sens.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* Marge plutot que transform : la revelation au defilement remet
     transform:none sur les elements visibles et annulerait le decalage. */
  .grille--decalee > *:nth-child(even) { margin-top: clamp(2rem, 4vw, 3.5rem); }
  .grille--decalee { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
}

/* Intro de section plus ample, centree */
.entete-section.centre h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.entete-section.centre .plomb { font-size: clamp(1.1rem, 1.8vw, 1.32rem); max-width: 56ch; }

/* Bloc d'accroche pleine largeur, gros texte centre */
.accroche {
  text-align: center;
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--titre);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.022em;
  color: var(--sombre);
  text-wrap: balance;
}
.accroche--large { max-width: 34ch; }
.section--sombre .accroche, .section--nuit .accroche { color: var(--blanc); }

/* Le numero de service devient la pastille ronde du haut de carte */
.carte--pastille .carte__numero {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sombre);
  color: var(--or);
  font-family: var(--titre);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 auto 1.4rem;
  flex-shrink: 0;
  transition: background var(--glisse), color var(--glisse), transform var(--glisse);
}
a.carte--pastille:hover .carte__numero {
  background: var(--or);
  color: var(--sombre);
  transform: scale(1.06);
}
/* La fleche se recentre sous le texte */
.carte--pastille .carte__pied { margin-top: auto; padding-top: 1.35rem; }
.carte--pastille .lien-fleche { justify-content: center; }

/* ==========================================================================
   25. Transitions de page et animations de texte
   Tout est desactive si le visiteur a demande de reduire les animations
   (voir la section 23). Rien ici n'est necessaire a la lecture du site :
   sans JavaScript ni support navigateur, le contenu reste visible et lisible.
   ========================================================================== */

/* ---- Transition d'une page a l'autre ---------------------------------------
   L'API View Transitions fait le fondu au changement de page. Les navigateurs
   qui ne la connaissent pas naviguent normalement, sans transition.
   --------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@keyframes vt-sortie { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(10px); } }

::view-transition-old(root) { animation: vt-sortie 200ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-entree 340ms cubic-bezier(0,0,.2,1) both; }

/* ---- Apparition du titre, mot par mot -------------------------------------- */
.mot {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: mot-entree 620ms cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--rang, 0) * 65ms);
}
@keyframes mot-entree { to { opacity: 1; transform: none; } }

/* Le soulignement des mots en or se dessine de gauche a droite */
.accent-souligne {
  position: relative;
  white-space: nowrap;
}
.accent-souligne::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.08em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(.2,.7,.3,1) 220ms;
}
.est-visible .accent-souligne::after,
.accent-souligne.est-visible::after { transform: scaleX(1); }

/* ---- Survol des cartes : leger soulevement ---------------------------------- */
a.carte { transition: border-color var(--glisse), box-shadow var(--glisse), transform var(--glisse); }
a.carte:hover { transform: translateY(-4px); }

/* ---- Lien de navigation : trait qui se deploie ------------------------------ */
.nav__lien { position: relative; }
.nav__lien::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .35rem;
  height: 1.5px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Bouton : le reflet passe au survol ------------------------------------- */
.bouton--or { position: relative; overflow: hidden; }
.bouton--or::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  transition: left 620ms cubic-bezier(.3,0,.2,1);
}
.bouton--or:hover::before { left: 120%; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .mot { opacity: 1 !important; transform: none !important; animation: none !important; }
  .accent-souligne::after { transition: none; transform: scaleX(1); }
  a.carte:hover { transform: none; }
  .bouton--or::before { display: none; }
}

/* ==========================================================================
   26. Bandes video pleine largeur
   Langage visuel de type plein cadre : la video occupe toute la largeur,
   le texte se pose en bas a gauche sur un voile degrade. La video ne se
   telecharge que lorsqu'elle approche de l'ecran (voir js/main.js).
   ========================================================================== */
.bande-video {
  position: relative;
  isolation: isolate;
  min-height: clamp(380px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: clip;
  background: var(--nuit);
}

.bande-video__media { position: absolute; inset: 0; z-index: 0; }
.bande-video__media video,
.bande-video__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Voile : sombre en bas ou se pose le texte, transparent en haut */
.bande-video__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(14, 16, 19, .92) 0%, rgba(14, 16, 19, .62) 38%, rgba(14, 16, 19, .18) 72%, rgba(14, 16, 19, .08) 100%);
}

.bande-video__contenu {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  color: var(--sur-sombre);
  max-width: 46em;
}
.bande-video__contenu h2 { color: var(--blanc); margin-bottom: .7rem; }
.bande-video__contenu .etiquette { color: var(--or-clair); }
.bande-video__contenu .etiquette::before { background: var(--or-clair); }
.bande-video__contenu p { color: var(--sur-sombre-douce); max-width: 46ch; }
.bande-video__contenu .groupe-boutons { margin-top: 1.7rem; }


@media (max-width: 700px) {
  .bande-video { min-height: clamp(340px, 58vh, 460px); }
}

/* Sans mouvement : l'image fixe remplace la video */
@media (prefers-reduced-motion: reduce) {
  .bande-video__media video { display: none; }
  .bande-video__media { background-size: cover; background-position: center; }
}

/* ==========================================================================
   27. Photos de banniere, declarees dans la feuille de style
   ---------------------------------------------------------------------------
   A NE PAS remettre en style inline dans le HTML : une url() relative placee
   dans une variable CSS est resolue par rapport a la FEUILLE DE STYLE, pas
   par rapport a la page. Ecrite dans le HTML, « images/photos/x.jpg » etait
   cherchee dans « css/images/photos/x.jpg » et renvoyait une erreur 404,
   sans que rien ne paraisse a l'ecran puisque le degrade restait visible.
   Declarees ici, les chemins « ../images/... » resolvent correctement.
   ========================================================================== */
.hero--accueil            { --photo: url("../images/photos/fond-accueil.jpg"); }
.entete-page--urbaine     { --photo: url("../images/photos/foresterie-urbaine.jpg"); }
.entete-page--privee      { --photo: url("../images/photos/vallee-hiver.jpg"); }
.entete-page--acericole   { --photo: url("../images/photos/tubulure.jpg"); }
.entete-page--sylvicole   { --photo: url("../images/photos/plantation.jpg"); }
.entete-page--carto       { --photo: url("../images/photos/vue-aerienne.jpg"); }
.entete-page--carrieres   { --photo: url("../images/photos/debroussaillage.jpg"); }

/* ==========================================================================
   28. Finition du style plein cadre
   Boutons carres en capitales espacees, titres de banniere en majuscules,
   intros de section alignees a gauche. Remplace les pilules et le centrage
   de la variante precedente.
   ========================================================================== */
.bouton {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  font-size: .86rem;
  padding: 1.05rem 2rem;
}
.bouton--petit { padding: .72rem 1.3rem; font-size: .78rem; }
.bouton--or::before { display: none; } /* le reflet ne convient pas a un bouton carre */

/* Titres de plein cadre : majuscules, serres, plus lourds */
.hero h1,
.bande-video__contenu h2 {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.04;
}
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.6rem); }
.bande-video__contenu h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }

/* Intros alignees a gauche plutot que centrees */
.entete-section.centre { text-align: left; margin-inline: 0; }
.entete-section.centre .plomb { margin-inline: 0; }
.etiquette.centre { justify-content: flex-start; }

/* Cartes : coins carres, numero en gros chiffre dore plutot qu'en pastille */
.carte--pastille { text-align: left; align-items: stretch; }
.carte--pastille p { text-align: left; }
.carte--pastille .lien-fleche { justify-content: flex-start; }
.carte--pastille .carte__numero {
  width: auto; height: auto;
  display: block;
  border-radius: 0;
  background: none;
  color: var(--or-sombre);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 1.1rem;
  transform: none;
}
a.carte--pastille:hover .carte__numero { background: none; color: var(--or-sombre); transform: none; }

/* La grille decalee alourdit un style deja tres cadre : on la neutralise */
@media (min-width: 900px) {
  .grille--decalee > *:nth-child(even) { margin-top: 0; }
  .grille--decalee { padding-bottom: 0; }
}

/* Banniere : le titre en majuscules prenait quatre lignes et repoussait le
   bandeau de credibilite sous la ligne de flottaison. On elargit la colonne,
   on plafonne la taille et on resserre les marges pour que les quatre
   signaux de confiance restent visibles des l'arrivee. */
.hero__contenu { max-width: 46em; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); }
.hero { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.hero__plomb { margin-bottom: 1.7rem; }
.credibilite { margin-top: clamp(1.9rem, 3.5vw, 2.6rem); padding-top: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ==========================================================================
   29. Feuilles arrondies posees sur un gris neutre
   --------------------------------------------------------------------------
   Reference donnee par Alex : les pages secondaires de incogroup.co. Le
   principe y tient en trois niveaux, et c'est ce qui donne l'impression de
   proprete sans jamais rechauffer la couleur :

     niveau 1   la page est un gris neutre froid, jamais un blanc casse ;
     niveau 2   le contenu repose sur des feuilles blanches arrondies qui
                n'occupent que la place du texte ;
     niveau 3   dans une feuille, les encadres reprennent un gris tres pale
                plutot qu'une seconde couche de blanc.

   Les titres de section restent poses a meme le gris, sans feuille. C'est
   volontaire : si tout flotte dans une boite, la page prend un air de
   catalogue et la hierarchie disparait. Sur incogroup.co les titres sont
   traites exactement de la meme maniere.
   ========================================================================== */

:root {
  /* Une ombre portee tres basse en opacite, tres large en rayon : c'est ce
     qui detache la feuille du gris sans dessiner de contour visible. */
  --ombre-feuille: 0 1px 2px rgba(16, 19, 22, .04),
                   0 18px 40px -24px rgba(16, 19, 22, .26);
  --ombre-feuille-levee: 0 2px 4px rgba(16, 19, 22, .05),
                         0 28px 56px -26px rgba(16, 19, 22, .34);
  --feuille-marge: clamp(1.4rem, 3vw, 2.6rem);
}

/* -- 29.1 Les sections claires n'ont plus de fond propre ------------------
   Le fond reste declare (et non "transparent") parce que les sections
   doivent masquer la banniere quand elles glissent par-dessus (voir 30.1). */
.section,
.section--pale,
.section--blanche { background: var(--creme); }

/* Redeclarees apres .section : a specificite egale, la derniere regle du
   fichier l'emporte. Sans ce rappel, les sections sombres viraient au gris. */
.section--sombre { background: var(--sombre); }
.section--nuit   { background: var(--nuit); }

/* -- 29.2 La feuille blanche ---------------------------------------------- */
.feuille,
.article,
.panneau,
.formulaire,
.etapes,
.carte,
.carte-parcours {
  background: var(--blanc);
  border: 1px solid transparent;
  border-radius: var(--rayon-panneau);
  box-shadow: var(--ombre-feuille);
}

.feuille,
.article,
.formulaire,
.etapes {
  padding: var(--feuille-marge);
}
.panneau { padding: clamp(1.4rem, 2.4vw, 1.9rem); }

/* Le texte garde sa longueur de ligne confortable malgre la marge interieure. */
.article { max-width: calc(var(--mesure) + 2 * var(--feuille-marge)); }
.article > :first-child, .feuille > :first-child { margin-top: 0; }
.article > :last-child,  .feuille > :last-child  { margin-bottom: 0; }

/* Les cartes se soulevent au survol par l'ombre, plus par un trait de bordure.
   Le deplacement passe par `transform`, laisse libre expres : les animations
   de defilement de la section 30 utilisent `translate` et `scale`, qui sont
   des proprietes distinctes et se composent avec lui. */
a.carte:hover,
a.carte:focus-visible {
  border-color: transparent;
  box-shadow: var(--ombre-feuille-levee);
  transform: translateY(-3px);
}
.carte-parcours:hover { box-shadow: var(--ombre-feuille-levee); }

/* -- 29.3 Niveau 3 : ce qui vit deja dans une feuille --------------------- */
.article .etapes,
.feuille .etapes,
.formulaire .etapes {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
}

.article .encadre,
.feuille .encadre,
.encadre {
  background: var(--sable);
  border: 0;
  border-left: 3px solid var(--or);
  border-radius: var(--rayon-lg);
}
.encadre--info   { background: var(--sable); border-left-color: var(--brun); }
.encadre--alerte { background: #FDF3F0; border-left-color: var(--brique); }

.article .tableau-enveloppe,
.feuille .tableau-enveloppe,
.tableau-enveloppe {
  background: var(--sable);
  border: 0;
  border-radius: var(--rayon-lg);
}

.faq details {
  background: var(--sable);
  border: 0;
  border-radius: var(--rayon-lg);
}
.faq details[open] { background: var(--sable-2); }

/* -- 29.4 Les blocs sombres deviennent eux aussi des feuilles ------------- */
.bandeau-cta { border-radius: var(--rayon-panneau); overflow: clip; }

@media (min-width: 900px) {
  .section--sombre,
  .section--nuit,
  .bande-video {
    border-radius: var(--rayon-xl);
    margin-inline: clamp(1rem, 2.2vw, 2rem);
    overflow: clip;
  }
}

/* -- 29.5 Coins arrondis rendus aux commandes ----------------------------- */
/* La finition Sitka de la section 28 avait mis tous les boutons au carre.
   Le repere est maintenant incogroup.co, ou les boutons sont arrondis et
   en casse normale. La banniere garde ses capitales : c'est le seul endroit
   du site ou elles servent encore de signature. */
.bouton {
  border-radius: var(--rayon);
  text-transform: none;
  letter-spacing: -.005em;
  font-size: .95rem;
}
.bouton--petit { font-size: .875rem; }
.champ input, .champ select, .champ textarea { border-radius: var(--rayon); }
.choix { border-radius: var(--rayon); }
.entete__tel { border-radius: var(--rayon); }
.figure img { border-radius: var(--rayon-lg); }

/* -- 29.6 Mobile : marges et rayons resserres ----------------------------- */
@media (max-width: 760px) {
  :root { --rayon-panneau: 18px; --rayon-xl: 20px; --feuille-marge: 1.25rem; }
}

/* ==========================================================================
   30. Effets de defilement continus
   --------------------------------------------------------------------------
   Demande d'Alex : qu'il se passe quelque chose en permanence pendant qu'on
   descend, et que les blocs aient l'air de se superposer.

   Deux mecanismes, volontairement separes :

   30.1 et 30.2 sont de la mise en page pure. Ils marchent partout, y compris
   sur un vieux navigateur : la premiere feuille mord sur la banniere, ce qui
   suffit deja a lire une superposition.

   30.3 a 30.5 utilisent les animations pilotees par le defilement
   (`animation-timeline`). La progression suit la molette au lieu de se
   declencher une seule fois : c'est ce qui donne l'effet continu. Ce n'est pas
   encore universel, d'ou le `@supports`. Quand ce n'est pas reconnu, la
   revelation JavaScript de la section 25 prend le relais, et le site reste
   parfaitement utilisable sans aucune des deux.

   Tout est enferme dans `prefers-reduced-motion: no-preference` : un visiteur
   sujet au vertige ne recoit rien de tout ca.
   ========================================================================== */

/* -- 30.1 La premiere feuille mord sur la banniere ------------------------ */
.hero + .section,
.hero + .bande-video,
.entete-page + .section,
.entete-page + .bande-video,
.atterrissage + .section {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--rayon-xl) * -1);
  border-start-start-radius: var(--rayon-xl);
  border-start-end-radius: var(--rayon-xl);
}
/* L'ombre est projetee vers le haut : c'est elle qui fait lire un plan
   au-dessus d'un autre plutot qu'un simple changement de couleur. */
.hero + .section,
.entete-page + .section,
.atterrissage + .section {
  box-shadow: 0 -22px 40px -26px rgba(10, 12, 15, .6);
}

@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {

  /* Les deux systemes feraient double emploi : on rend la main au defilement. */
  .js-revelation .revelation {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* -- 30.2 Parallaxe des images de fond ---------------------------------- */
  /* Le fond avance moins vite que la page. L'ecart entre les deux vitesses
     est ce qui cree la profondeur. */
  .hero__media {
    scale: 1.14;
    animation: parallaxe-media linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallaxe-media {
    from { translate: 0 -4%; }
    to   { translate: 0 6%; }
  }

  .entete-page.entete-page--photo {
    animation: parallaxe-photo linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallaxe-photo {
    to { background-position: center, center 72%; }
  }

  /* -- 30.3 Les feuilles montent, puis passent dessous -------------------- */
  /* `translate` et `scale` plutot que `transform` : ce sont des proprietes
     distinctes, elles se composent avec le `transform` du survol au lieu de
     l'annuler. */
  @keyframes feuille-entre {
    from { opacity: 0; translate: 0 52px; scale: .972; }
    to   { opacity: 1; translate: 0 0;    scale: 1; }
  }
  @keyframes feuille-sort {
    from { opacity: 1;   translate: 0 0;     scale: 1; }
    to   { opacity: .28; translate: 0 -38px; scale: .952; }
  }
  @keyframes texte-entre {
    from { opacity: 0; translate: 0 26px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* Entree ET sortie. Reserve aux blocs qui tiennent dans une hauteur
     d'ecran : en s'effacant vers le haut, ils laissent le bloc suivant
     passer par-dessus, et c'est la que se lit la superposition.
     Deux exclusions volontaires :
       - le panneau lateral collant, parce qu'une animation de defilement
         sur un element deja `sticky` se bat contre lui-meme ;
       - tout bloc plus haut qu'un ecran (liste d'etapes, tableau, FAQ,
         formulaire, article), parce que la sortie commence des que le haut
         du bloc quitte l'ecran : le bas serait encore en train d'etre lu
         qu'il palirait deja. Ceux-la n'ont que l'entree, plus bas. */
  .entete-section,
  .carte,
  .carte-parcours,
  .figure,
  .bandeau-cta,
  .credibilite--claire,
  .bande-video__contenu {
    animation-name: feuille-entre, feuille-sort;
    animation-timeline: view(), view();
    animation-range: entry 0% entry 62%, exit 6% exit 94%;
    animation-fill-mode: both, forwards;
    animation-timing-function: cubic-bezier(.22, .68, .28, 1), linear;
  }

  /* Entree seule : les blocs hauts, ou ceux qu'on lit longtemps. */
  .etapes,
  .tableau-enveloppe,
  .faq,
  .panneau:not(.panneau--collant) {
    animation: feuille-entre cubic-bezier(.22, .68, .28, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }


  /* Entree seule : tout ce qui se lit. Un paragraphe qui palit en montant
     gene la lecture, alors qu'une carte qui s'efface ne gene personne. */
  .article > h2,
  .article > h3,
  .article > p,
  .article > dl,
  .article > ul,
  .article > ol,
  .article > .encadre,
  .exergue,
  .bloc-form,
  .coordonnees li,
  .definitions > div {
    animation: texte-entre cubic-bezier(.22, .68, .28, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 46%;
  }

  /* -- 30.4 Reperes de progression dans l'en-tete ------------------------- */
  /* Un filet dore qui suit l'avancee dans la page : discret, mais c'est un
     mouvement present en permanence, ce qui etait la demande. */
  .entete::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--or);
    transform-origin: 0 50%;
    scale: 0 1;
    animation: progression-page linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progression-page { to { scale: 1 1; } }

  /* L'en-tete se detache du contenu des qu'on quitte le haut de page. */
  .entete {
    animation: entete-detachee linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 200px;
  }
  @keyframes entete-detachee {
    to { box-shadow: 0 12px 30px -14px rgba(8, 10, 12, .7); }
  }

  /* -- 30.5 Bandes video : le contenu glisse sur l'image ------------------ */
  .bande-video__media {
    animation: parallaxe-bande linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallaxe-bande {
    from { scale: 1.16; translate: 0 -3%; }
    to   { scale: 1.16; translate: 0 5%; }
  }
}
}
/* ==========================================================================
   31. Contraste sur fond sombre
   --------------------------------------------------------------------------
   Le site compte six contextes sombres : `.section--sombre`, `.section--nuit`,
   `.hero`, `.entete-page`, `.atterrissage` et `.bande-video`. Les regles de
   couleur n'en couvraient que deux, et les quatre autres heritaient de
   l'encre prevue pour le fond clair. Trois textes etaient concernes :

     - l'etiquette doree tombait a 2,9:1 sur les bannieres de page ;
     - le paragraphe d'introduction de la section `--nuit` de l'accueil
       tombait a 2,4:1 ;
     - la mise en exergue de l'accueil etait carrement invisible : sa couleur
       etait exactement celle du fond (1:1). Seul le filet dore se voyait.

   Le passage au fond gris a rendu le probleme mesurable, il ne l'a pas cree.
   ========================================================================== */
.section--sombre .etiquette,
.section--nuit .etiquette,
.entete-page .etiquette,
.atterrissage .etiquette,
.bande-video .etiquette,
.pied .etiquette { color: var(--or-clair); }

.section--sombre .etiquette::before,
.section--nuit .etiquette::before,
.entete-page .etiquette::before,
.atterrissage .etiquette::before,
.bande-video .etiquette::before,
.pied .etiquette::before { background: var(--or-clair); }

.section--sombre .plomb,
.section--nuit .plomb,
.hero .plomb,
.entete-page .plomb,
.atterrissage .plomb,
.bande-video .plomb { color: var(--sur-sombre-douce); }

.section--sombre .exergue,
.section--nuit .exergue,
.bande-video .exergue { color: var(--blanc); }

/* --------------------------------------------------------------------------
   32. Panneau lateral reellement collant
   --------------------------------------------------------------------------
   `.duo-texte` aligne ses colonnes sur `start`, ce qui donnait a la colonne
   de droite exactement la hauteur de son panneau. Un element `sticky` ne peut
   se deplacer que dans son bloc conteneur : avec une colonne aussi haute que
   lui, il n'avait aucune course et suivait la page comme un bloc ordinaire.
   On rend la colonne pleine hauteur ; le panneau, lui, garde sa taille.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .duo-texte > aside { align-self: stretch; }
}

/* Les pastilles de region gardent leur forme allongee ; sur le gris de page,
   un simple filet ne se voyait plus, elles prennent donc le blanc des
   feuilles. */
.regions--claire li {
  background: var(--blanc);
  border-color: transparent;
  box-shadow: var(--ombre-feuille);
}

/* --------------------------------------------------------------------------
   33. Bande video large
   --------------------------------------------------------------------------
   La bande « Territoire desservi » ne porte pas qu'une phrase : elle a absorbe
   la liste des sept regions, qui occupait une section entiere en dessous.
   Elle a donc besoin de plus de largeur que les bandes purement narratives.
   -------------------------------------------------------------------------- */
.bande-video--large .bande-video__contenu { max-width: 64em; }
.bande-video--large .bande-video__contenu p { max-width: 62ch; }
.bande-video--large .regions { margin-top: 1.5rem; }

/* Cette bande porte beaucoup plus de texte que les autres, et ce texte monte
   donc plus haut, la ou le voile d origine etait presque transparent. On
   assombrit sur toute la hauteur utile plutot que seulement en bas. */
.bande-video--large .bande-video__voile {
  background:
    linear-gradient(to top,
      rgba(14, 16, 19, .94) 0%,
      rgba(14, 16, 19, .88) 46%,
      rgba(14, 16, 19, .66) 80%,
      rgba(14, 16, 19, .30) 100%);
}
.bande-video--large .bande-video__contenu p { color: var(--sur-sombre); max-width: 58ch; }



/* ==========================================================================
   34. Carte du Quebec en points
   --------------------------------------------------------------------------
   Meme idee que le fond de incogroup.co, ou une carte du monde en pixels
   passe derriere le texte. Le fichier est genere a partir d'un contour
   geographique reel : une grille reguliere est posee sur la province et seuls
   les points qui tombent sur la terre ferme sont conserves. Voir
   `outils/carte-quebec-points.pl`.

   Elle vit dans le bandeau d'appel a l'action de la page d'accueil, et nulle
   part ailleurs. Deux essais ont precede celui-la :

     - en filigrane de la section des services : le Quebec est une forme en
       hauteur, cette section n'offre qu'une bande libre d'environ 190 px, et
       les trois quarts de la carte disparaissaient derriere les cartes ;
     - dans la bande « Territoire desservi » : lisible, mais elle se retrouvait
       a deux ecrans de celle du bandeau, et la meme silhouette repetee de si
       pres se lit comme une erreur, pas comme une signature.

   Le bandeau est le seul bloc de la page ou elle tient en entier sans rien
   recouvrir : fond uni, texte limite a 44em, toute la droite disponible.
   ========================================================================== */

.bandeau-cta--carte { padding-block: clamp(2.8rem, 6.5vw, 4.6rem); }

.bandeau-cta--carte::before {
  background-image: url("../images/carte-quebec-points.svg");
  background-position: center right;
  top: 50%;
  right: clamp(1rem, 4vw, 3.5rem);
  translate: 0 -50%;
  width: auto;
  height: 92%;
  aspect-ratio: 420 / 544;
  opacity: .28;
}

/* Sous 820px le texte occupe toute la largeur : la carte repasse derriere lui,
   nettement plus discrete, plutot que de lui voler la place. */
@media (max-width: 820px) {
  .bandeau-cta--carte::before {
    right: -18%;
    height: 96%;
    opacity: .13;
  }
}

/* ==========================================================================
   35. Carte du Canada en fond de la section des services
   --------------------------------------------------------------------------
   Le Canada entier, au trait gris, sans aucun aplat : le Quebec s'y distingue
   par un filet un peu plus appuye que celui de ses voisins, pas par une
   couleur de remplissage. C'est ce qu'Alex a demande, exemple a l'appui —
   « juste un trait gris pour la delimitation », « je veux que ca soit sans
   fond ».

   Le fichier est large (rapport 1,18) alors que la section est plutot haute :
   avec `contain`, la carte occupe toute la largeur et se place en haut, la ou
   le fond est le plus expose. Comme c'est un dessin au trait sur fond
   transparent, elle s'arrete sans laisser de bord visible.

   Voir `outils/carte-canada.pl`.
   ========================================================================== */
.section--carte {
  position: relative;
  overflow: clip;   /* clip et non hidden : voir la note de la section 30 */
}

.fond-carte {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/carte-canada.svg");
  background-repeat: no-repeat;
  /* `contain` plutot que `cover` : le cadre a ete dessine au rapport de la
     section, donc la carte la remplit d'un bord a l'autre — et surtout, aucun
     morceau du Quebec n'est coupe. */
  /* Ancree en haut : c'est la partie la plus exposee de la section. Quand
     les cartes de services passent sur deux colonnes, la section s'allonge et
     la carte n'atteint plus le bas — mais comme c'est un dessin au trait sur
     fond transparent, elle s'arrete sans laisser de bord visible. */
  background-position: center top;
  background-size: contain;
  /* Le trait s'attenue vers la gauche, la ou se trouve le chapeau, sans
     jamais disparaitre : le texte reste net et la carte occupe quand meme
     toute la largeur. */
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.68) 26%, rgba(0,0,0,.92) 58%, #000 78%);
          mask-image: linear-gradient(100deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.68) 26%, rgba(0,0,0,.92) 58%, #000 78%);
}

/* Le contenu repasse devant. */
.section--carte .contenant { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .fond-carte {
    background-size: 150% auto;
    background-position: 62% top;
    opacity: .55;
  }
}