/* ==========================================================================
   POESAGES — feuille de style unique
   Système de design repris de LIBER.ARCHI (charte v1.0, juillet 2026).
   Marque distincte : typographie, grille et respirations de LIBER ;
   verts, nom et logo propres à POESAGES.
   Rédigée le 2026-09-03. Remplace bootstrap, font-awesome, owl, slick, parallax.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — Jetons
   -------------------------------------------------------------------------- */

:root {
  /* Neutres — repris de LIBER */
  --noir: #18140E;
  --blanc: #F4F0E8;          /* parchemin : fond par défaut */
  --blanc-pur: #FFFFFF;
  --gris-chaud: #9A8E7A;     /* texte secondaire, légendes */
  --gris-froid: #7A7060;     /* texte doux, méta */

  /* Verts — propres à POESAGES */
  --vert-profond: #28341E;   /* fonds sombres, aplats */
  --vert-vif: #5F8540;       /* accent, trait de section, filets */
  --vert-clair: #7BA45B;     /* survol, second vert */

  /* Terre — accent chaud du système */
  --ocre-pale: #D4A96A;

  /* Filets */
  --ligne: rgba(255, 248, 235, 0.14);
  --ligne-clair: rgba(24, 20, 14, 0.10);

  /* Jetons de rôle — ils basculent dans .sombre (voir § 04).
     Toute couleur de texte ou de filet passe par eux : c'est ce qui
     empêche d'écrire du vert profond sur du vert profond. */
  --texte-fort: var(--vert-profond);   /* titres, citations, exergues */
  --texte-doux: var(--gris-froid);     /* légendes, texte secondaire */
  --filet: var(--ligne-clair);         /* séparateurs */

  /* Familles */
  --display: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --titre: "Syne", ui-sans-serif, system-ui, sans-serif;
  --corps: "Outfit", ui-sans-serif, system-ui, sans-serif;

  /* Rythme */
  --marge-page: 1.5rem;
  --largeur-max: 1440px;
  --largeur-texte: 680px;    /* le corps de texte ne dépasse jamais cette laisse */
  --hauteur-entete: 6rem;
}

@media (min-width: 768px) {
  :root {
    --marge-page: 5rem;
    --hauteur-entete: 8rem;
  }
}

/* --------------------------------------------------------------------------
   02 — Remise à zéro
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background-color: var(--blanc);
  color: var(--noir);
  font-family: var(--corps);
  font-size: 1.125rem;      /* 18 px */
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection { background: var(--vert-vif); color: var(--blanc-pur); }

/* --------------------------------------------------------------------------
   03 — Typographie
   Règle de charte : jamais de gras sur les grands titres, la taille suffit.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
}

.display em { font-style: italic; }

h2, .h2 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.1;
  font-size: clamp(2.125rem, 5vw, 3rem);
}

h3, .h3 {
  font-family: var(--titre);
  font-weight: 500;
  line-height: 1.15;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
}

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

.texte { max-width: var(--largeur-texte); }

.chapo {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  line-height: 1.45;
  color: var(--texte-fort);
}

.petit { font-size: 0.875rem; line-height: 1.5; color: var(--texte-doux); }

/* Le label et son trait : la signature de section de la charte */
.label {
  display: block;
  margin: 0 0 1.25rem;
  font-family: var(--corps);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vert-vif);
}

.trait::before {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  margin-bottom: 1.75rem;
  background: var(--vert-vif);
}

.sombre .label { color: var(--vert-clair); }
.sombre .trait::before { background: var(--vert-clair); }

/* Lettrine — reprise du traitement d'article de liber.archi */
.lettrine::first-letter {
  float: left;
  margin: 0.06em 0.12em 0 0;
  font-family: var(--display);
  font-size: 4.25em;
  font-weight: 300;
  line-height: 0.78;
  color: var(--texte-fort);
}

/* --------------------------------------------------------------------------
   04 — Gabarits de page
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.section { padding-block: clamp(4.5rem, 11vw, 9rem); }
.section--serree { padding-block: clamp(3rem, 7vw, 5.5rem); }

.section.sombre,
.sombre {
  background: var(--vert-profond);
  color: var(--blanc);

  /* Bascule des trois jetons de rôle. Tout ce qui les emploie suit,
     sans qu'il faille écrire une surcharge par composant. */
  --texte-fort: var(--blanc-pur);
  --texte-doux: var(--gris-chaud);
  --filet: var(--ligne);
}

/* Grille asymétrique 7/5 — signature de mise en page de la charte.
   Jamais de partage 6/6. */
.grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .grille--7-5 { grid-template-columns: 7fr 5fr; }
  .grille--5-7 { grid-template-columns: 5fr 7fr; }
  .grille--8-4 { grid-template-columns: 8fr 4fr; }
  .grille--decalee > :last-child { padding-top: 4.5rem; }
}

/* Image en débord : elle sort de la laisse de texte */
.plein-cadre {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-block: clamp(3.5rem, 9vw, 7rem);
}

.plein-cadre img {
  width: 100%;
  height: clamp(300px, 55vh, 640px);
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   05 — En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;                 /* plancher : marque et menu ne se touchent jamais */
  height: var(--hauteur-entete);
  padding-inline: var(--marge-page);
  color: var(--blanc);
  transition: height .5s ease, background-color .5s ease, backdrop-filter .5s ease;
}

.entete.est-defile {
  height: 4rem;
  background: rgba(24, 20, 14, 0.85);
  backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .entete.est-defile { height: 5rem; }
}

.entete__marque {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.entete__marque img {
  height: 2.25rem;
  width: auto;
}

.entete__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.entete__nom span { opacity: 0.6; font-weight: 500; }

.nav { display: none; }

/* Le menu complet ne s'affiche qu'à partir de 1150 px : en dessous il
   vient toucher le nom de la marque (mesuré : 3 px d'écart à 1100 px).
   Entre 1150 et 1440, l'espacement entre entrées est resserré. */
@media (min-width: 1150px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .nav { gap: 2.25rem; }
}

.nav a {
  font-family: var(--corps);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color .3s ease;
}

.nav a:hover,
.nav a.est-active { color: var(--vert-clair); }

.nav__contact {
  padding: 0.65rem 1.35rem;
  border: 1px solid rgba(244, 240, 232, 0.3);
  border-radius: 2px;
  font-weight: 600;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.nav__contact:hover {
  background: var(--blanc-pur);
  border-color: var(--blanc-pur);
  color: var(--noir);
}

/* Bouton menu */
.burger {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
}

/* Ce seuil DOIT rester égal à celui du menu complet (.nav, 1150 px).
   S'ils divergent, il existe une plage de largeurs sans aucun menu. */
@media (min-width: 1150px) { .burger { display: none; } }

.burger span {
  display: block;
  width: 1.5rem;
  height: 1.5px;
  background: var(--blanc);
  transition: transform .3s ease, opacity .3s ease;
}

.burger span + span { margin-top: 0.25rem; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu plein écran */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 6rem 1.5rem 3rem;
  background: var(--noir);
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}

.menu-mobile.est-ouvert {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Même seuil que .nav et .burger : au-delà, le menu complet suffit. */
@media (min-width: 1150px) { .menu-mobile { display: none; } }

.menu-mobile a {
  font-family: var(--corps);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc);
  transition: color .3s ease;
}

.menu-mobile a:hover { color: var(--vert-clair); }

.menu-mobile__filet {
  width: 3rem;
  height: 1px;
  background: var(--ligne);
  margin-block: 0.5rem;
}

.menu-mobile__contact {
  padding: 0.85rem 2rem;
  border: 1px solid rgba(244, 240, 232, 0.3);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   06 — Bandeau d'ouverture
   -------------------------------------------------------------------------- */

.banniere {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--hauteur-entete) var(--marge-page) 6rem;
  background: var(--noir);
  overflow: hidden;
  text-align: center;
}

.banniere__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banniere__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.banniere__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--noir) 0%, rgba(24, 20, 14, 0.1) 55%, rgba(24, 20, 14, 0.35) 100%);
}

.banniere__contenu {
  position: relative;
  z-index: 1;
  max-width: 72rem;
}

/* Petites capitales très espacées : elles supposent des lignes courtes.
   Le nom porte seul la grande taille ; les deux lignes de qualification
   descendent d'un cran, ce qui leur permet de tenir sur une seule ligne
   du téléphone à l'écran large. Sans cela chaque phrase se casse en deux
   et le bandeau devient une muraille. */
.banniere h1 {
  font-family: var(--display);
  font-weight: 400;
  font-variant: small-caps;
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: 1.24;
  letter-spacing: 0.07em;
  color: var(--blanc-pur);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
  .banniere h1 { letter-spacing: 0.16em; }
}

.banniere h1 span { display: block; }

.banniere h1 .est-attenue,
.banniere h1 .est-accentue {
  font-size: clamp(1.0625rem, 2.5vw, 2.125rem);
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.banniere h1 .est-attenue { margin-top: 0.6rem; }
.banniere h1 .est-attenue { color: rgba(244, 240, 232, 0.75); }
.banniere h1 .est-accentue { color: var(--ocre-pale); }

.banniere__accroche {
  margin-top: 2.25rem;
  font-family: var(--corps);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blanc);
}

/* Indicateur de défilement */
.defiler {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.defiler span {
  font-family: var(--corps);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-chaud);
}

.defiler__rail {
  position: relative;
  width: 1px;
  height: 3rem;
  background: var(--ligne);
  overflow: hidden;
}

.defiler__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blanc-pur);
  animation: defilement 2s ease-in-out infinite;
}

@keyframes defilement {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   07 — Cartes de service
   -------------------------------------------------------------------------- */

.services {
  display: grid;
  gap: 1px;
  background: var(--filet);
  border-block: 1px solid var(--filet);
}

@media (min-width: 820px) {
  .services { grid-template-columns: repeat(3, 1fr); }
}

.service {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--blanc);
  transition: background-color .4s ease;
}

.service:hover { background: var(--blanc-pur); }

.service__num {
  font-family: var(--corps);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--gris-chaud);
}

.service h3 { color: var(--texte-fort); }

.service p { color: var(--texte-doux); flex-grow: 1; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--corps);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vert-vif);
  transition: gap .3s ease, color .3s ease;
}

.lien-fleche::after { content: "→"; font-size: 0.9rem; }
.lien-fleche:hover { gap: 0.9rem; color: var(--vert-profond); }
.sombre .lien-fleche { color: var(--vert-clair); }
.sombre .lien-fleche:hover { color: var(--ocre-pale); }

/* --------------------------------------------------------------------------
   08 — Réalisations
   -------------------------------------------------------------------------- */

.projets {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 640px) { .projets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .projets { grid-template-columns: repeat(4, 1fr); } }

/* Décalage vertical : la grille ne s'aligne pas au cordeau */
@media (min-width: 1100px) {
  .projets > :nth-child(4n + 2),
  .projets > :nth-child(4n + 4) { transform: translateY(2.75rem); }
}

.projet { display: block; }

.projet__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--vert-profond);
}

.projet__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.projet:hover .projet__image img { transform: scale(1.06); }

.projet h3 {
  margin-top: 1.15rem;
  font-size: 1.125rem;
  color: var(--texte-fort);
  transition: color .3s ease;
}

.projet:hover h3 { color: var(--vert-vif); }

.projet p {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   09 — Témoignages
   -------------------------------------------------------------------------- */

.temoignages {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 760px) { .temoignages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .temoignages { grid-template-columns: repeat(3, 1fr); } }

.temoignage {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--filet);
}

.temoignage blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--texte-fort);
}

.temoignage figcaption {
  font-family: var(--corps);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texte-doux);
}


/* --------------------------------------------------------------------------
   10 — Foire aux questions
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--filet); }

.faq__item { border-bottom: 1px solid var(--filet); }

.faq__bouton {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.75rem 0;
  text-align: left;
  font-family: var(--titre);
  font-weight: 500;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--texte-fort);
  transition: color .3s ease;
}

.faq__bouton:hover { color: var(--vert-vif); }

.faq__signe {
  flex-shrink: 0;
  font-family: var(--corps);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vert-vif);
  transition: transform .4s ease;
}

.faq__bouton[aria-expanded="true"] .faq__signe { transform: rotate(45deg); }

.faq__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1);
}

.faq__bouton[aria-expanded="true"] + .faq__reponse { grid-template-rows: 1fr; }

.faq__reponse > div { overflow: hidden; }

.faq__reponse .texte { padding-bottom: 2rem; color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   11 — Appel au contact
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 2.25rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--corps);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color .35s ease, color .35s ease;
}

.bouton:hover { background: var(--noir); color: var(--blanc); }
.sombre .bouton:hover { background: var(--blanc-pur); color: var(--vert-profond); }

/* --------------------------------------------------------------------------
   12 — Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: var(--noir);
  color: var(--blanc);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.5rem;
}

.pied__grille {
  display: grid;
  gap: 3rem;
}

@media (min-width: 860px) {
  .pied__grille { grid-template-columns: 5fr 3fr 4fr; }
}

.pied__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: var(--blanc-pur);
}

.pied p, .pied address {
  font-style: normal;
  color: var(--gris-chaud);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.pied a { transition: color .3s ease; }
.pied a:hover { color: var(--vert-clair); }

.pied__liens {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pied__liens a {
  font-family: var(--titre);
  font-weight: 500;
  font-size: 1.0625rem;
  width: fit-content;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ligne);
  font-size: 0.8125rem;
  color: var(--gris-froid);
}

/* --------------------------------------------------------------------------
   13 — Apparition au défilement
   -------------------------------------------------------------------------- */

.apparait {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1);
}

.apparait.est-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparait { opacity: 1; transform: none; transition: none; }
  .defiler__rail::after { animation: none; }
  .projet__image img { transition: none; }
}

/* --------------------------------------------------------------------------
   15 — Listes de points (pages Prestations, Architecture)
   -------------------------------------------------------------------------- */

.liste-points {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 2rem;
}

.liste-points li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.liste-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 1px;
  background: var(--vert-vif);
}

.sombre .liste-points li::before { background: var(--vert-clair); }

/* Deux colonnes de points côte à côte, sur large écran */
@media (min-width: 780px) {
  .liste-points--double { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
}

/* Lien dans le corps du texte */
.lien-souligne {
  color: var(--vert-vif);
  border-bottom: 1px solid currentColor;
  transition: color .3s ease;
}

.lien-souligne:hover { color: var(--vert-profond); }
.sombre .lien-souligne { color: var(--vert-clair); }
.sombre .lien-souligne:hover { color: var(--ocre-pale); }

/* Figure légendée.
   Hors galerie (portraits de la page Infos), la légende reste sous l'image :
   elle porte un nom et une fonction, elle doit se lire sans manipulation. */
.figure { margin: 0; position: relative; }
.figure img { width: 100%; height: auto; object-fit: cover; }
.figure figcaption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

/* En galerie, la légende se pose SUR la photo au lieu de s'empiler dessous.
   Soixante légendes sous soixante photos allongeaient la page pour rien.
   Là où le survol existe, elle n'apparaît qu'au survol ; sur écran tactile,
   où le survol n'existe pas — et c'est le terrain où le site se classe le
   mieux — elle reste affichée, mais en incrustation : la page ne s'allonge
   dans aucun des deux cas. */
.pile .figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 3rem 1rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--blanc);
  background: linear-gradient(to top,
              rgba(24, 20, 14, 0.92) 0%,
              rgba(24, 20, 14, 0.70) 55%,
              rgba(24, 20, 14, 0) 100%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (hover: hover) and (pointer: fine) {
  .pile .figure figcaption {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity .35s ease, transform .35s ease;
  }

  .pile .figure:hover figcaption,
  .pile .figure:focus-within figcaption {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pile .figure figcaption { transition: none; }
}

/* Grilles d'images */
.pile { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 640px) { .pile--deux { grid-template-columns: repeat(2, 1fr); } }

/* Photos : format commun, on rogne. Sans cela les hauteurs varient et la
   grille part en escalier. */
.pile--photos img,
.pile--deux img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Plans, coupes et rendus : format commun aussi, mais on ne rogne JAMAIS —
   couper un plan, c'est en perdre le contenu. */
.pile--plans img {
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--blanc-pur);
}

.sombre .pile--plans img { background: rgba(255, 255, 255, 0.04); }

/* --------------------------------------------------------------------------
   14 — Accessibilité
   -------------------------------------------------------------------------- */

.saut-contenu {
  position: absolute;
  left: -9999px;
  z-index: 60;
  padding: 1rem 1.5rem;
  background: var(--noir);
  color: var(--blanc);
  font-size: 0.875rem;
}

.saut-contenu:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--vert-clair);
  outline-offset: 3px;
}

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