/* ==========================================================================
   EDEA environnement — feuille de style
   Direction : les couleurs du logo — l'herbe et le ciel (demande de Julie,
   Ébauche site 2 : « un vert plus clair, plus le vert du logo »).
   Vert prairie profond pour les fonds, vert anis et cyan du logo en accents,
   angles nets, filets fins, isolignes en fond des bandeaux.
   Polices auto-hébergées (fonts.css) : aucun appel vers un tiers.
   ========================================================================== */

:root {
  --encre:        #1B2216;
  /* Verts de fond : l'olive #8FA747 donné par Julie (Ébauche site 3), en
     version assombrie pour rester lisible. Blanc sur --profond : 7,0. */
  --profond:      #4E5F27;
  --profond-2:    #5E7231;
  /* L'olive de Julie tel quel, et ses déclinaisons lisibles */
  --olive:        #8FA747;
  --olive-clair:  #C9DE94;   /* texte d'accent sur fond sombre : 4,8 */
  --olive-fonce:  #556A22;   /* texte d'accent sur papier : 5,6 */
  /* anciens noms conservés : le reste de la feuille les utilise */
  --herbe:        #C9DE94;
  --herbe-fonce:  #556A22;
  --herbe-clair:  #DCEBBB;
  --eau:          #0E7391;   /* cyan du logo assombri pour rester lisible */
  --eau-fonce:    #0A5C74;
  --eau-vif:      #12C6F2;   /* le cyan du logo, sur fond sombre */
  --eau-clair:    #A8E8F8;
  --mousse:       #6A8F3F;
  --papier:       #F6F7F0;
  --blanc:        #FFFFFF;
  --gris:         #55625C;
  --gris-clair:   #66736D;
  --filet:        #DCDFD0;
  --filet-fort:   #BDC3A8;

  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --corps:   "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --largeur: 1160px;
  --gouttiere: clamp(1.25rem, 5vw, 3.5rem);
  --mesure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--eau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--eau-fonce); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--encre);
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.25; }

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

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.lede { font-size: 1.22rem; line-height: 1.55; color: var(--gris); max-width: 58ch; }

/* Étiquette mono : le vocabulaire des cartouches de carte et des rapports */
.surtitre {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eau);
  margin: 0 0 1.1rem;
}

/* --- Accessibilité --------------------------------------------------------- */

.evitement {
  position: absolute; left: -9999px;
  background: var(--profond); color: var(--blanc);
  padding: .75rem 1.25rem; z-index: 100; font-family: var(--mono);
}
.evitement:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--eau); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
  position: sticky; top: 0; z-index: 50;
}
.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 112px;
}
.logo { display: block; line-height: 0; }
.logo img { height: 92px; width: auto; }

.nav ul { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a {
  font-size: .94rem; font-weight: 600; letter-spacing: .01em;
  color: var(--encre); text-decoration: none; padding: .85rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--eau-fonce); border-bottom-color: var(--eau); }
.nav a.bouton { border-bottom: 0; }

.menu-bascule { display: none; }
.menu-etiquette {
  display: none; cursor: pointer; padding: .5rem .9rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--profond); border: 1px solid var(--filet-fort);
}

/* --- Boutons --------------------------------------------------------------- */

.bouton {
  display: inline-block;
  font-family: var(--corps); font-size: .94rem; font-weight: 600; letter-spacing: .01em;
  padding: .78rem 1.4rem; border: 1px solid var(--eau);
  background: var(--eau); color: var(--blanc) !important;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bouton:hover { background: var(--eau-fonce); border-color: var(--eau-fonce); }
.bouton--creux { background: transparent; color: var(--eau-fonce) !important; }
.bouton--creux:hover { background: var(--eau); color: var(--blanc) !important; }
.nav .bouton { padding: .62rem 1.15rem; background: var(--profond); border-color: var(--profond); }
.nav .bouton:hover { background: var(--profond-2); border-color: var(--profond-2); }

/* --- Fonds profonds : isolignes ------------------------------------------- */

.sombre {
  position: relative; background: var(--profond); color: var(--blanc); overflow: hidden;
}
.sombre::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/isolignes.svg") center / cover no-repeat;
  opacity: .3; pointer-events: none;
}
.sombre > * { position: relative; z-index: 1; }
.sombre h1, .sombre h2, .sombre h3 { color: var(--blanc); }
.sombre p { color: rgba(255,255,255,.82); }
.sombre .surtitre { color: var(--herbe); }
.sombre a:not(.bouton) { color: var(--eau-clair); }
.sombre .bouton { background: var(--blanc); border-color: var(--blanc); color: var(--profond) !important; }
.sombre .bouton:hover { background: var(--eau-clair); border-color: var(--eau-clair); }
.sombre .bouton--creux { background: transparent; color: var(--blanc) !important; border-color: rgba(255,255,255,.55); }
.sombre .bouton--creux:hover { background: rgba(255,255,255,.1); border-color: var(--blanc); }

/* --- Bandeau d'accueil : les photos défilent en fondu ----------------------
   Demande de Julie (Ébauche site 2, p. 9) : « j'aime bien des bandeaux qui
   changent en haut ». Le défilement est fait en CSS seul — le site ne charge
   aucun JavaScript — et s'arrête si le visiteur a demandé moins d'animations.
   -------------------------------------------------------------------------- */

.heros {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(80vh, 760px);
  padding: clamp(5rem, 12vw, 9rem) 0 0;
}
.heros.sombre::before { display: none; }   /* les photos remplacent les isolignes */

.heros__fond,
.bandeau__fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--profond); }
.heros__fond img,
.bandeau__fond img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: fondu-bandeau 40s linear infinite;
}
.heros__fond img:first-child { opacity: 1; }
/* Le bandeau des pages intérieures ne montre qu'une photo : pas de fondu. */
.bandeau__fond img { opacity: 1; animation: none; }
.heros__fond img:nth-child(2) { animation-delay:  8s; }
.heros__fond img:nth-child(3) { animation-delay: 16s; }
.heros__fond img:nth-child(4) { animation-delay: 24s; }
.heros__fond img:nth-child(5) { animation-delay: 32s; }

/* Voile vert : c'est lui qui rend le texte lisible par-dessus la photo. */
/* Julie demande un filtre plus léger et dans son olive : le dégradé garde
   juste ce qu'il faut de densité à gauche pour que le texte reste lisible. */
.heros__fond::after,
.bandeau__fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(94deg, rgba(31,38,16,.88) 0%, rgba(62,76,31,.74) 40%,
                           rgba(78,95,39,.44) 72%, rgba(120,142,63,.24) 100%),
    linear-gradient(180deg, rgba(31,38,16,.42) 0%, rgba(31,38,16,0) 38%),
    linear-gradient(0deg, rgba(31,38,16,.5) 0%, rgba(31,38,16,0) 20%);
}

/* Chaque photo est visible un cinquième du cycle, avec un fondu de 2 s. */
@keyframes fondu-bandeau {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  20%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}

.heros__interieur { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.heros h1 { max-width: 20ch; margin-bottom: 1rem; }
.heros__accroche {
  font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35; color: var(--herbe-clair) !important; max-width: 46ch;
  margin-bottom: 1.4rem;
}
.heros .lede { color: rgba(255,255,255,.88); font-size: 1.18rem; max-width: 52ch; }
.heros__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* Cartouche : la ligne de méta d'une carte */
.cartouche {
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .05em;
  color: rgba(255,255,255,.82);
  padding: 1rem 0;
  display: flex; flex-wrap: wrap; gap: .5rem 0;
}
.cartouche span + span::before { content: "·"; margin: 0 .8rem; color: var(--herbe); }
.cartouche b { color: var(--herbe); font-weight: 500; }

/* Apparition au chargement, depuis un état déjà lisible */
@keyframes lever { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.heros__interieur > * { animation: lever .7s cubic-bezier(.2,.7,.2,1) both; }
.heros__interieur > :nth-child(2) { animation-delay: .08s; }
.heros__interieur > :nth-child(3) { animation-delay: .16s; }
.heros__interieur > :nth-child(4) { animation-delay: .24s; }
.heros__interieur > :nth-child(5) { animation-delay: .32s; }
.heros__interieur > :nth-child(6) { animation-delay: .40s; }

/* --- Bandeau des pages intérieures -----------------------------------------
   Julie : « faire un bandeau avec photos comme sur la page accueil », et
   « reprendre cette photo dans tous les bandeaux du haut, sur toutes les
   pages » — c'est la photo de coquelicots.
   -------------------------------------------------------------------------- */

.bandeau { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(2.2rem, 5vw, 3.4rem); }
.bandeau--photo { position: relative; padding-top: clamp(3.4rem, 8vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.bandeau--photo.sombre::before { display: none; }   /* la photo remplace les isolignes */
.bandeau--photo > *:not(.bandeau__fond) { position: relative; z-index: 1; }
.bandeau h1 { margin-bottom: .6rem; max-width: 20ch; }
.bandeau p { max-width: 58ch; font-size: 1.15rem; }
.bandeau .ariane { padding: 0 0 1.6rem; }
/* Le fond olive est plus clair que l'ancien vert sapin : le fil d'Ariane
   demande un peu plus de blanc pour rester au-dessus de 4,5:1. */
.bandeau .ariane, .bandeau .ariane a { color: rgba(255,255,255,.82); }
.bandeau .ariane li:not(:last-child)::after { color: var(--eau-clair); }

/* --- Marque dans les bandeaux ----------------------------------------------
   Julie (Ébauche site 4) : « Rajouter EDEA environnement sur les bandeaux de
   toutes les pages du site », avec le nom posé en haut du bandeau. Le nom
   n'est pas un titre : le h1 de la page reste le titre, la marque n'est
   qu'une signature au-dessus.
   -------------------------------------------------------------------------- */

.marque {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1; letter-spacing: -.005em;
  margin: 0 0 1.25rem;
}
.sombre .marque { color: var(--herbe-clair); }
/* Dans le bandeau intérieur, le fil d'Ariane vient juste après : il porte
   déjà son propre espacement, la marque se resserre. */
.bandeau .marque { margin-bottom: .95rem; }

/* --- Sections -------------------------------------------------------------- */

.section { padding: clamp(3.2rem, 7vw, 5.8rem) 0; }
.section--sable { background: var(--papier); }
.section--blanc { background: var(--blanc); }
.section + .section--blanc, .section--blanc + .section--sable { border-top: 1px solid var(--filet); }
.section__entete { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --- Registre de prestations : lignes, pas de boîtes ----------------------- */

.nomenclature { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet-fort); }
.nomenclature__item {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem; align-items: start;
  padding: 1.9rem 0; border-bottom: 1px solid var(--filet);
}
.nomenclature__ref {
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  color: var(--eau); letter-spacing: .02em; padding-top: .45rem;
}
.nomenclature__ref small { display: block; color: var(--gris-clair); letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; margin-top: .25rem; }
.nomenclature__item h3 { margin-bottom: .45rem; }
.nomenclature__item p { color: var(--gris); max-width: var(--mesure); }
.nomenclature__lien {
  font-weight: 600; font-size: .94rem; text-decoration: none; white-space: nowrap;
  color: var(--eau); display: inline-block; padding: .7rem 0; margin: -.2rem 0 -.7rem;
}
.nomenclature__lien::after { content: " →"; transition: margin-left .15s ease; }
.nomenclature__lien:hover::after { margin-left: .25rem; }

/* --- Vignettes photo : les « onglets » de l'accueil, les prestations -------
   Julie demande une page d'accueil réduite à deux entrées illustrées
   (Notre histoire / Nos prestations) et une page Prestations où chaque photo
   renvoie vers le détail de la prestation.
   -------------------------------------------------------------------------- */

.vignettes {
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.vignette { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.vignette__photo { overflow: hidden; background: var(--filet); aspect-ratio: 4 / 3; }
.vignette__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.vignette:hover .vignette__photo img,
.vignette:focus-visible .vignette__photo img { transform: scale(1.04); }
.vignette h2, .vignette h3 {
  margin: 1.1rem 0 .45rem; padding-top: 1rem;
  border-top: 2px solid var(--herbe);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  transition: color .15s ease;
}
.vignette:hover h2, .vignette:hover h3 { color: var(--herbe-fonce); }
.vignette p { color: var(--gris); font-size: 1rem; }
.vignette__action {
  margin-top: auto; padding-top: .9rem;
  font-weight: 600; font-size: .94rem; color: var(--eau);
}
.vignette__action::after { content: " →"; }

/* Les deux entrées de l'accueil : plus grandes, photo plus large */
.vignettes--duo { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.vignettes--duo .vignette__photo { aspect-ratio: 16 / 10; }
.vignettes--duo h2, .vignettes--duo h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.vignettes--duo p { font-size: 1.05rem; }

/* --- Blocs "note" : titre serif sur filet, sans boîte ---------------------- */

.grille { display: grid; gap: 2rem 2.5rem; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.carte { border-top: 2px solid var(--herbe-fonce); padding-top: 1.3rem; }
.carte h3 { margin-bottom: .5rem; }
.carte p { color: var(--gris); font-size: 1rem; }
.carte__lien { display: inline-block; margin-top: .3rem; padding: .7rem 0; font-weight: 600; font-size: .94rem; text-decoration: none; color: var(--eau); }
.carte__lien::after { content: " →"; }
.carte__lien:hover { text-decoration: underline; }
.carte--public { border-top-color: var(--profond); }

/* --- Galerie en fondu : « les photos qui se succèdent doucement » ----------
   Même principe que le bandeau de l'accueil : aucune image n'est cachée à
   la souris, tout se fait en CSS, et l'animation s'arrête si le visiteur a
   demandé moins d'animations.
   -------------------------------------------------------------------------- */

.galerie {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--filet);
  margin: 2.2rem 0;
}
.galerie img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.galerie img:first-child { opacity: 1; }

.galerie--5 img { animation: fondu-5 35s linear infinite; }
.galerie--5 img:nth-child(2) { animation-delay:  7s; }
.galerie--5 img:nth-child(3) { animation-delay: 14s; }
.galerie--5 img:nth-child(4) { animation-delay: 21s; }
.galerie--5 img:nth-child(5) { animation-delay: 28s; }

.galerie--4 img { animation: fondu-4 28s linear infinite; }
.galerie--4 img:nth-child(2) { animation-delay:  7s; }
.galerie--4 img:nth-child(3) { animation-delay: 14s; }
.galerie--4 img:nth-child(4) { animation-delay: 21s; }

.galerie--3 img { animation: fondu-3 21s linear infinite; }
.galerie--3 img:nth-child(2) { animation-delay:  7s; }
.galerie--3 img:nth-child(3) { animation-delay: 14s; }

/* Galerie de colonne : la « petite dimension » demandée pour les photos
   posées à côté du texte, au format des photos reçues. */
.galerie--vignette { aspect-ratio: 3 / 2; margin: 0; }

@keyframes fondu-5 {
  0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 23% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fondu-4 {
  0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes fondu-3 {
  0% { opacity: 0; } 5% { opacity: 1; } 33.33% { opacity: 1; } 38.33% { opacity: 0; } 100% { opacity: 0; }
}

.galerie__legende {
  font-family: var(--mono); font-size: .76rem; line-height: 1.55;
  color: var(--gris); margin: -1.4rem 0 2.2rem; letter-spacing: .01em;
}

/* --- Listes ---------------------------------------------------------------- */

.liste-coches { list-style: none; padding: 0; margin: 0; }
.liste-coches li { position: relative; padding-left: 1.6rem; margin-bottom: .75rem; color: var(--gris); }
.liste-coches li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; background: var(--herbe-fonce);
}
.liste-coches strong { color: var(--encre); font-weight: 600; }

/* Julie (Ébauche site 4), page Expertises : « texte plus gros par rapport aux
   photos ». La liste des prestations y tient lieu de corps de page, elle est
   donc portée à la taille du chapeau. */
.liste-coches--large li {
  font-size: 1.22rem; line-height: 1.55;
  margin-bottom: 1.15rem; padding-left: 1.9rem;
}
.liste-coches--large li::before { width: 9px; height: 9px; top: .58em; }

/* Tableau des rubriques */
.tableau { width: 100%; border-collapse: collapse; font-size: .96rem; margin: 1.8rem 0 2.4rem; }
.tableau th, .tableau td { text-align: left; padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau th { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair); font-weight: 500; border-bottom-color: var(--filet-fort); }
.tableau td:first-child { font-family: var(--mono); color: var(--eau); font-size: .88rem; white-space: nowrap; font-weight: 500; }
.tableau td { font-variant-numeric: tabular-nums; }
.tableau-defilant { overflow-x: auto; }
.tableau-note { font-size: .86rem; color: var(--gris); margin: -1.4rem 0 2.2rem; }

/* --- Calendrier des inventaires ------------------------------------------- */

.calendrier { border-top: 1px solid var(--filet-fort); margin: 2rem 0 1rem; font-size: .92rem; }
.calendrier__ligne {
  display: grid; grid-template-columns: 12rem repeat(12, minmax(0, 1fr));
  align-items: center; border-bottom: 1px solid var(--filet); min-height: 3rem;
}
.calendrier__ligne--mois { min-height: 2.2rem; border-bottom-color: var(--filet-fort); }
.calendrier__ligne--mois span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-clair); text-align: center; padding: .5rem 0;
}
.calendrier__ligne--mois span:first-child { text-align: left; }
.calendrier__groupe { font-weight: 600; color: var(--encre); padding-right: 1rem; grid-column: 1; }
.calendrier__groupe small { display: block; font-weight: 400; color: var(--gris); font-size: .8rem; }
.calendrier__barre {
  grid-column: calc(var(--de) + 1) / calc(var(--a) + 2); grid-row: 1;
  height: .9rem; background: var(--eau); margin: 0 1px;
}
.calendrier__barre--secondaire {
  background: repeating-linear-gradient(135deg, var(--eau-clair) 0 3px, transparent 3px 6px);
  border: 1px solid var(--eau-clair); height: .8rem;
}
.calendrier__ligne > .calendrier__cellules { display: contents; }
.calendrier__legende { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .84rem; color: var(--gris); margin-top: 1rem; align-items: center; }
.calendrier__legende i { display: inline-block; width: 1.6rem; height: .7rem; vertical-align: middle; margin-right: .5rem; background: var(--eau); }
.calendrier__legende i.secondaire { background: repeating-linear-gradient(135deg, var(--eau-clair) 0 3px, transparent 3px 6px); border: 1px solid var(--eau-clair); }
.calendrier__ligne:nth-child(odd):not(.calendrier__ligne--mois) { background: rgba(42,95,64,.04); }
@media (max-width: 720px) {
  .calendrier__ligne { grid-template-columns: 7.5rem repeat(12, minmax(0, 1fr)); font-size: .84rem; }
  .calendrier__groupe small { display: none; }
}

/* --- Questions fréquentes -------------------------------------------------- */

.faq { border-top: 1px solid var(--filet-fort); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.3rem; color: var(--eau); transition: transform .15s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--eau-fonce); }
.faq .faq__reponse { padding: 0 0 1.5rem; color: var(--gris); max-width: var(--mesure); }
.faq .faq__reponse p:last-child { margin: 0; }

/* --- Contenu rédactionnel -------------------------------------------------- */

.prose { max-width: var(--mesure); }
.prose h2 { margin-top: 2.8rem; padding-top: 1.1rem; border-top: 1px solid var(--filet-fort); font-size: clamp(1.5rem, 2.8vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; color: var(--eau-fonce); }
.prose figure { margin: 2.5rem 0; }

figcaption {
  font-family: var(--mono); font-size: .76rem; line-height: 1.55;
  color: var(--gris); margin-top: .8rem; letter-spacing: .01em;
}

.citation {
  border-left: 2px solid var(--eau); padding-left: 1.5rem; margin: 2.5rem 0;
  font-family: var(--display); font-size: 1.35rem; font-style: italic; line-height: 1.4; color: var(--gris);
}
.citation cite { display: block; font-family: var(--mono); font-style: normal; font-size: .74rem; letter-spacing: .06em; margin-top: .8rem; color: var(--eau); }

.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.4rem 0 0; list-style: none; }
.etiquettes li {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .03em;
  color: var(--profond); border: 1px solid var(--filet-fort); background: var(--blanc);
  padding: .4rem .75rem;
}

/* --- Photographies --------------------------------------------------------- */

.photo { overflow: hidden; background: var(--filet); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--paysage  { aspect-ratio: 3 / 2; }
.photo--large    { aspect-ratio: 21 / 9; }
.photo--cadre { border: 1px solid var(--filet-fort); padding: .5rem; background: var(--blanc); }
.photo--cadre img { aspect-ratio: inherit; }
.photo-attente {
  border: 1px dashed var(--filet-fort); min-height: 260px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono); font-size: .8rem; color: var(--gris); padding: 2rem;
}

.mosaique { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mosaique .photo { aspect-ratio: 1; }

.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }

/* Texte courant d'un côté, photos en petit format de l'autre. La colonne de
   texte garde la mesure de lecture ; la photo prend ce qui reste. */
.duo--vignette {
  grid-template-columns: minmax(0, var(--mesure)) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}
/* La photo se cale sur le bord droit du conteneur, comme les autres blocs
   de la page, plutôt que de laisser une bande vide à sa droite. La largeur
   est explicite : les images de la galerie étant en position absolue, une
   largeur « auto » vaudrait zéro. */
.duo--vignette .galerie--vignette {
  width: 100%; max-width: 380px; margin-left: auto;
}
/* Même respiration entre ce bloc et les paragraphes voisins qu'entre deux
   titres de la même page. */
.prose + .duo--vignette, .duo--vignette + .prose { margin-top: 2.8rem; }

/* --- Bande d'appel : pleine largeur ---------------------------------------- */

.encadre { padding: clamp(2.8rem, 6vw, 4.5rem) var(--gouttiere); text-align: left; }
.encadre__interieur { max-width: var(--largeur); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: center; }
.encadre h2 { margin-bottom: .5rem; }
/* Bande d'appel réduite au seul titre (page Expertises, Ébauche site 4). */
.encadre h2:only-child { margin-bottom: 0; }
.encadre p { max-width: 56ch; }
.encadre .bouton { justify-self: start; }

/* --- Fil d'Ariane ---------------------------------------------------------- */

.ariane { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--gris); padding: 1.25rem 0; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.ariane li:not(:last-child)::after { content: "/"; margin-left: .5rem; color: var(--filet-fort); }
.ariane a { color: var(--gris); text-decoration: none; }
.ariane a:hover { text-decoration: underline; }

/* --- Coordonnées ----------------------------------------------------------- */

.coordonnees { list-style: none; padding: 0; margin: 0; }
.coordonnees li { margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--filet); }
.coordonnees li:last-child { border-bottom: 0; }
.coordonnees .etiquette {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-clair); margin-bottom: .3rem;
}
.coordonnees a { font-size: 1.15rem; font-weight: 600; text-decoration: none; }
.coordonnees p { color: var(--gris); }

/* --- Formulaire ------------------------------------------------------------ */

.champ { margin-bottom: 1.4rem; }
.champ label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .94rem; }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: .75rem .85rem; border: 1px solid var(--filet-fort); border-radius: 0;
  font-family: inherit; font-size: 1rem; background: var(--blanc); color: var(--encre);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--eau); box-shadow: 0 0 0 3px rgba(14,115,145,.18);
}
.champ textarea { min-height: 170px; resize: vertical; }
.champ__aide { font-size: .86rem; color: var(--gris); margin-top: .4rem; }
.obligatoire { color: var(--eau); }

/* --- Pied de page ---------------------------------------------------------- */

.pied { background: var(--encre); color: rgba(255,255,255,.72); padding: clamp(3rem, 6vw, 4.5rem) 0 1.8rem; font-size: .94rem; }
.pied h2, .pied h3 { color: var(--blanc); }
.pied h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--eau-clair); margin-bottom: 1.1rem; }
.pied a { color: rgba(255,255,255,.72); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .1rem; }
.pied li a { display: inline-block; padding: .45rem 0; }
.pied__adresse a { display: inline-block; padding: .5rem 0; }
.pied__grille { display: grid; gap: 2.5rem 3rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-bottom: 2.8rem; }
.wordmark { font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--blanc); letter-spacing: -.01em; margin-bottom: .9rem; }
.wordmark small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eau-clair); margin-top: .45rem; }
.pied__adresse { font-family: var(--mono); font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,.72); }
.pied__bas {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .03em; color: rgba(255,255,255,.5);
}
.pied__bas p { margin: 0; }
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied__bas li { margin: 0; }

/* --- Adaptations ----------------------------------------------------------- */

@media (max-width: 960px) {
  .heros { min-height: min(86vh, 680px); padding-top: clamp(4rem, 14vw, 7rem); }
  .heros__fond::after {
    background:
      linear-gradient(180deg, rgba(31,38,16,.45) 0%, rgba(62,76,31,.62) 45%, rgba(31,38,16,.88) 100%);
  }
  .nomenclature__item { grid-template-columns: 1fr; gap: .4rem; }
  .nomenclature__ref { padding-top: 0; }
  .nomenclature__lien { padding-top: .2rem; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .encadre__interieur { grid-template-columns: 1fr; }
  /* Sous cette largeur, la colonne de photos devient trop étroite pour la
     mesure de lecture : les photos passent sous le texte. */
  .duo--vignette { grid-template-columns: 1fr; }
  .duo--vignette .galerie--vignette { max-width: 420px; margin-left: 0; }
}

@media (max-width: 860px) {
  .menu-etiquette { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); border-bottom: 1px solid var(--filet);
    padding: .5rem var(--gouttiere) 1.5rem; box-shadow: 0 12px 24px rgba(22,36,28,.1);
  }
  .menu-bascule:checked ~ .nav { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--filet); }
  .nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .nav a { display: block; padding: .9rem 0; border-bottom: 0; }
  .nav .bouton { text-align: center; }
  .entete__interieur { position: relative; min-height: 84px; }
  .logo img { height: 68px; }
}

@media (max-width: 560px) {
  .pied__grille { grid-template-columns: 1fr; }
  .cartouche span + span::before { margin: 0 .5rem; }
}

@media print {
  .entete, .pied, .heros__actions, .encadre, .sombre::before, .heros__fond, .bandeau__fond, .galerie { display: none; }
  body { background: #fff; font-size: 11pt; }
  .sombre { background: #fff; color: #000; }
  .sombre h1, .sombre p { color: #000; }
}