/* ============================================================
   ATELIER ORIEL — components.css
   Composants spécifiques à chaque section de page
   ============================================================ */

/* ════════════════════════════════════════════════════
   SECTION IDENTITÉ
════════════════════════════════════════════════════ */
.identity-section {
  padding: 36px 48px 20px;
  background: var(--blanc);
}
.identity-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;   /* logo et contenu même hauteur */
  gap: 48px;
}
.identity-logo-wrap {
  flex-shrink: 0;
  width: 130px;
  display: flex;
  align-items: center;
}
.identity-logo {
  width: 130px;
  height: auto;
  display: block;
  /* Active la couleur bleu atelier pour le SVG via currentColor */
  color: var(--bleu);
}
.identity-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;  /* répartit l'espace : titre en haut, bouton en bas */
}
.identity-services {
  font-family: var(--f-titre);
  font-size: clamp(12px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bleu);
  margin-bottom: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.identity-rule {
  width: 100%;
  height: 1px;
  background: var(--rouge);
  margin: 6px 0;
}
.identity-desc {
  font-family: var(--f-corps);
  font-size: 16px;
  line-height: 1.75;
  color: var(--texte);
  max-width: 520px;
  text-align: justify;
}
.identity-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

/* ════════════════════════════════════════════════════
   PRÉSENCE LOCALE — carte iframe pleine largeur
════════════════════════════════════════════════════ */
.presence-section {
  /* Même couleur que le fond de la carte Cassini → les bords se fondent */
  background: #f5f0e8;
  /* Aucun padding horizontal : la carte touche les bords */
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.presence-section .section-titre {
  padding-top: 40px;
  /* Le titre garde ses marges latérales pour rester lisible */
  padding-left: 24px;
  padding-right: 24px;
}
.map-iframe-wrapper {
  /* Pleine largeur stricte — ni max-width, ni margin, ni padding */
  display: block;
  width: 100%;
  /* Hauteur : au plus 65% de la fenêtre, au moins 400px.
     Cela garantit que la légende (bas gauche) et les boutons zoom
     (haut droit) restent simultanément visibles sans scroller. */
  height: clamp(400px, 65vh, 800px);
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.map-iframe-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════════════════════
   RÉALISATIONS — tuile base commune
════════════════════════════════════════════════════ */
.realisations-section {
  background: var(--blanc);
  padding-bottom: 48px;
}
.realisations-section .section-titre {
  padding-top: 28px;
  padding-bottom: 28px;
}
.realisations-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Tuile */
.realisation-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.realisation-card-bg {
  position: absolute;
  inset: -4px;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
}
.realisation-card:hover .realisation-card-bg { transform: scale(1.05); }

.realisation-card-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  transition: opacity 0.4s;
}
.realisation-card:hover .realisation-card-overlay { opacity: 0.52; }

.realisation-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 18px 18px;
  z-index: 2;
}
.realisation-card-body h3 {
  font-family: var(--f-titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc);
  line-height: 1.4;
}
.realisation-card-body p {
  font-family: var(--f-corps);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.5s ease, opacity 0.4s, margin-top 0.3s;
}
.realisation-card:hover .realisation-card-body p {
  max-height: 160px;
  opacity: 1;
  margin-top: 8px;
}
.link-more {
  display: inline-block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-family: var(--f-titre);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc);
  border-bottom: 1px solid rgba(255,255,255,0.45);
  padding-bottom: 2px;
  transition: max-height 0.4s ease 0.1s, opacity 0.4s ease 0.1s, margin-top 0.3s;
}
.realisation-card:hover .link-more {
  max-height: 40px;
  opacity: 1;
  margin-top: 10px;
}

/* ── Layout compact (< 900px) : carré 3+2 ── */
@media (max-width: 899px) {
  .realisations-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .realisations-row-top {
    display: flex;
    gap: 3px;
    height: calc((100vw - 48px) / 3);
    max-height: 280px;
  }
  .realisations-row-bot {
    display: flex;
    gap: 3px;
    height: calc((100vw - 48px) / 2);
    max-height: 420px;
  }
  .realisations-row-top .realisation-card,
  .realisations-row-bot .realisation-card {
    flex: 1;
    height: 100%;
  }
}

/* ── Layout étendu (≥ 900px) : bandeau horizontal ── */
@media (min-width: 900px) {
  .realisations-grid {
    display: flex;
    flex-direction: row;
    gap: 3px;
    height: clamp(200px, 22vw, 340px);
  }
  .realisations-row-top,
  .realisations-row-bot {
    display: contents; /* wrappers transparents — toutes les tuiles en ligne */
  }
  .realisation-card {
    flex: 1;
    height: 100%;
  }
}

/* ════════════════════════════════════════════════════
   CONTACT — design épuré, fond blanc, trois colonnes
════════════════════════════════════════════════════ */
.contact-band {
  background: var(--blanc);
  padding: 64px 40px 72px;
  border-top: 1px solid var(--gris-bord);
}
.contact-band-inner {
  max-width: 860px;
  margin: 0 auto;
}
.contact-band .section-titre {
  padding-top: 0;
  padding-bottom: 48px;
}
/* Titre et trait en couleur charte sur fond blanc */
.contact-band .section-titre h2 {
  color: var(--bleu);
}
.contact-band .section-titre .rule-rouge {
  background: var(--rouge);
}

/* Grille trois colonnes égales */
.contact-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Chaque bloc */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 36px;
  border-left: 1px solid var(--gris-bord);
  text-align: center;
  transition: background var(--ease);
}
.contact-item:first-child { border-left: none; }
.contact-item:hover { background: var(--gris-clair); }

/* Icône SVG discrète au-dessus */
.contact-item-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: var(--bleu);
  opacity: 0.7;
}

/* Étiquette */
.contact-item .label {
  font-family: var(--f-titre);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rouge);
  display: block;
  margin-bottom: 10px;
}

/* Valeur principale */
.contact-item a {
  font-family: var(--f-corps);
  font-size: 17px;
  color: var(--texte);
  line-height: 1.5;
  transition: color var(--ease);
}
.contact-item a:hover { color: var(--bleu); }

/* Séparateur — non utilisé dans le nouveau design */
.contact-sep { display: none; }


/* ════════════════════════════════════════════════════
   PAGE L'ATELIER — composants spécifiques
════════════════════════════════════════════════════ */

/* ── Hero page intérieure ────────────────────────────────── */
.page-hero {
  position: relative;
  background: var(--bleu-fonce);
  overflow: hidden;
  height: clamp(200px, 28vw, 380px);
  display: flex;
  align-items: flex-end;
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.35;
  filter: grayscale(30%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg) var(--space-md);
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
}
.page-hero-content .label {
  font-family: var(--f-titre);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
  display: block;
}
.page-hero-content h1 {
  color: var(--blanc);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.1em;
}
.page-hero-tagline {
  font-family: var(--f-corps);
  font-style: italic;
  color: rgba(255,255,255,0.65);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(45,85,98,0.6), transparent);
  pointer-events: none;
}

/* ── Section header générique (filet rouge centré + titre) ── */
.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.section-header h2 {
  letter-spacing: 0.1em;
  margin-top: var(--space-xs);
}
.section-header .label {
  font-family: var(--f-titre);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu);
  display: block;
}
.rule {
  width: 36px;
  height: 1px;
  background: var(--rouge);
  margin: var(--space-sm) 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* ── HISTOIRE — disposition en deux colonnes ─────────────── */
.histoire-section {
  background: var(--blanc);
  padding: var(--space-xl) 0;
}
.histoire-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.histoire-text h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  letter-spacing: 0.14em;
  color: var(--bleu);
  margin-bottom: var(--space-sm);
}
.histoire-text .rule {
  margin-bottom: var(--space-md);
}
.histoire-text p {
  color: var(--texte-leger);
  line-height: 1.9;
}
.histoire-aside {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Encart Oriel — définition + logo en filigrane */
.oriel-definition {
  border: 1px solid var(--gris-bord);
  background: transparent;
  display: flex;
  flex-direction: column;
}
.oriel-definition-header {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.oriel-definition .def-title {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bleu);
  line-height: 1.4;
  white-space: nowrap;
}
.oriel-definition-body {
  position: relative;
  padding: 0 var(--space-lg) var(--space-lg);
  overflow: hidden;
}
.oriel-logo-aside {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  /* Active la couleur bleu atelier pour le SVG via currentColor */
  color: var(--bleu);
}
.oriel-definition-body p {
  position: relative;
  font-size: 0.83rem;
  color: var(--texte-leger);
  font-style: italic;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 0.8em;
}
.oriel-definition-body p:last-child { margin-bottom: 0; }

/* Séparateur ornemental */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--gris-moyen);
}
.ornament::before, .ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-bord);
}
.ornament-glyph {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: var(--f-titre);
  color: var(--gris-moyen);
  white-space: nowrap;
}

/* ── ÉQUIPE ──────────────────────────────────────────────── */
.equipe-section {
  background: var(--gris-clair);
  padding: var(--space-xl) 0;
}
.equipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  /* Marge haute augmentée : le médaillon déborde désormais vers le haut
     (margin-top négatif), il faut de la place au-dessus de la rangée. */
  margin-top: calc(var(--space-lg) + 90px);
}
.membre-card {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  display: flex;
  flex-direction: column;
  /* Espace réservé en haut de la carte pour la moitié du médaillon qui
     déborde sur le fond beige de la section. */
  margin-top: 90px;
}
.membre-photo {
  /* Médaillon rond — agrandi ×1,5 (était clamp(120,45vw,160)).
     Largeur ET hauteur explicitement égales = cercle parfait garanti.
     margin-top négatif : la photo remonte hors du cadre blanc et se
     pose sur le fond beige (--gris-clair) de la .equipe-section. */
  width: clamp(180px, 68vw, 240px);
  height: clamp(180px, 68vw, 240px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  margin: -90px auto var(--space-sm);
  /* Liseré blanc + ombre douce : détache le médaillon du fond beige
     et renforce l'effet « posé au-dessus » du cadre. */
  border: 5px solid var(--blanc);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  background: var(--blanc);
  filter: grayscale(15%);
  transition: filter 0.4s ease;
  display: block;
}
.membre-card:hover .membre-photo { filter: grayscale(0%); }
.membre-body {
  padding: 0 var(--space-md) var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.membre-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}
.membre-name {
  font-family: var(--f-titre);
  font-size: clamp(0.9rem, 1.8vw, 1.15rem);
  letter-spacing: 0.1em;
  color: var(--texte);
}
.membre-title {
  font-family: var(--f-titre);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-top: 2px;
}
.membre-social {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 2px;
}
.membre-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--gris-bord);
  color: var(--gris-moyen);
  transition: color var(--ease), border-color var(--ease);
}
.membre-social a:hover { color: var(--bleu); border-color: var(--bleu); }
.membre-social svg { width: 13px; height: 13px; fill: currentColor; }
.membre-diplomes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.membre-diplomes li {
  font-size: 0.92rem;
  color: var(--texte-leger);
  line-height: 1.6;
  padding-left: 14px;
  position: relative;
}
.membre-diplomes li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--rouge);
  font-size: 0.75rem;
}

/* ── ENGAGEMENTS ─────────────────────────────────────────── */
.engagements-section {
  background: var(--blanc);
  padding: var(--space-xl) 0;
}

/* Citation introductive */
.citation {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-xl);
}
.citation p {
  font-family: var(--f-corps);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.75;
  color: var(--texte-leger);
}
.citation .rule { margin: var(--space-md) auto; }

/* Blocs texte engagements */
.engagements-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.engagement-block h3 {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: var(--space-sm);
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--gris-bord);
}
.engagement-block p {
  font-size: 0.98rem;
  color: var(--texte-leger);
  line-height: 1.9;
}

/* Liste contexte (à puces personnalisées) */
.contexte-list {
  list-style: none;
  margin: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contexte-list li {
  font-size: 0.98rem;
  color: var(--texte-leger);
  padding-left: 18px;
  position: relative;
  line-height: 1.7;
}
.contexte-list li::before {
  content: '·';
  position: absolute;
  left: 5px;
  color: var(--rouge);
  font-size: 1.2em;
  line-height: 1.5;
}
.contexte-list strong {
  font-weight: 500;
  color: var(--texte);
  font-style: italic;
}

/* Bloc SYN-PA encadré */
.synpa-block {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: 1px solid var(--gris-bord);
  padding: var(--space-md);
  margin-top: var(--space-lg);
  background: var(--gris-clair);
}
.synpa-block p {
  font-size: 0.95rem;
  color: var(--texte-leger);
  margin-bottom: 0;
}
.synpa-block a {
  color: var(--bleu);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease);
}
.synpa-block a:hover { border-bottom-color: var(--bleu); }
.synpa-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--bleu);
  display: flex;
  align-items: center;
  justify-content: center;
}
.synpa-icon svg { width: 18px; height: 18px; fill: white; }

/* ── Bande philosophie (fond bleu foncé) ──────────────────── */
.philosophie-band {
  background: var(--bleu-fonce);
  padding: var(--space-xl) 0;
}
.philosophie-band .section-header .label { color: rgba(255,255,255,0.5); }
.philosophie-band .section-header h2 { color: var(--blanc); }
.philosophie-band .rule { background: rgba(255,255,255,0.3); }
.philosophie-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.philosophie-inner p {
  color: rgba(255,255,255,0.7);
  font-size: 1.05rem;
  line-height: 1.9;
}
.philosophie-inner .cta-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.btn--white {
  border-color: rgba(255,255,255,0.5);
  color: rgba(255,255,255,0.85);
}
.btn--white:hover {
  background: rgba(255,255,255,0.12);
  color: var(--blanc);
  border-color: var(--blanc);
}

/* ── BANDE « NOS ENGAGEMENTS ET SOUTIENS » (fond bleu) ─────────
   Réutilise le fond bleu foncé de l'ancienne bande Réflexions, mais
   avec un titre au style des sections d'accueil (.section-titre).
   En contexte .soutiens-band, le h2 passe en blanc ; le filet rouge
   reste rouge, cohérent avec les autres titres du site. */
.soutiens-band {
  background: var(--bleu-fonce);
  padding: var(--space-xl) 0;
}
.soutiens-band .section-titre h2 { color: var(--blanc); }
/* (.rule-rouge garde sa couleur rouge — défini globalement) */
.soutiens-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.soutiens-inner p {
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
  line-height: 1.9;
}
.soutiens-inner p:not(:last-child) { margin-bottom: 0.9em; }
/* Liens éditoriaux (issus de [texte](url) dans content.md) :
   semi-gras, bleu clair, lisibles sur le fond bleu foncé. */
.soutiens-inner a {
  color: var(--bleu-clair);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease), opacity var(--ease);
}
.soutiens-inner a:hover {
  border-bottom-color: var(--bleu-clair);
  opacity: 0.85;
}

/* ── BANDE « RÉFLEXIONS D'ATELIER » (fond blanc) ───────────────
   Anciennement sur fond bleu (.philosophie-band) ; bascule en blanc.
   Le titre suit .section-titre (bleu + filet rouge), les boutons sont
   les .btn standard (bleu), lisibles sur fond clair. */
.reflexions-band {
  background: var(--blanc);
  padding: var(--space-xl) 0;
}
.reflexions-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.reflexions-inner p {
  color: var(--texte-leger);
  font-size: 1.05rem;
  line-height: 1.9;
}
.reflexions-inner .cta-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

/* ── Espacement des titres de section sur la page L'Atelier ────
   Chaque section porte déjà son propre padding vertical (--space-xl).
   Le .section-titre ajoutait par-dessus 60px (haut) + 44px (bas),
   d'où un vide excessif AVANT le titre. On neutralise ce padding
   vertical ici (le padding horizontal est conservé pour le confort
   de lecture sur petits écrans). Ne touche pas à l'accueil. */
.histoire-section .section-titre,
.equipe-section .section-titre,
.engagements-section .section-titre,
.soutiens-band .section-titre,
.reflexions-band .section-titre {
  padding-top: 0;
  padding-bottom: var(--space-md);
}
/* Section Équipe : réduit aussi l'espace APRÈS le titre.
   La grille garde une marge haute suffisante pour le débordement
   du médaillon (≈90px), mais on supprime le --space-lg additionnel
   qui creusait l'écart sous le filet rouge. */
.equipe-section .section-titre { padding-bottom: var(--space-sm); }
.equipe-grid { margin-top: 90px; }

/* ── Footer sobre (mise en page interne) ─────────────────── */
.site-footer .footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  text-align: left;
}
.site-footer .footer-inner > * {
  flex: 0 1 auto;
}
.site-footer .footer-inner a {
  color: inherit;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 1px;
  transition: color var(--ease), border-color var(--ease);
}
.site-footer .footer-inner a:hover {
  color: var(--bleu-clair);
  border-bottom-color: var(--bleu-clair);
}

/* ── Responsive pages intérieures ──────────────────────────
   Bascule du CONTENU à 900 px (convention METHODO-mobile.md §4.3),
   et non 780 : entre 781 et 900 px la grille restait en 2 colonnes. */
@media (max-width: 900px) {
  .histoire-layout    { grid-template-columns: 1fr; }
  .equipe-grid        { grid-template-columns: 1fr; }
  .engagements-layout { grid-template-columns: 1fr; }

  /* Médaillon équipe : débordement réduit en colonne unique
     (les cartes empilées ont déjà l'écart de gap entre elles). */
  .equipe-grid  { margin-top: 70px; }
  .membre-card  { margin-top: 70px; }
  .membre-photo { margin-top: -70px; }

  /* L'aside repasse en colonne pleine largeur sous le texte.
     (Le flex-row tablette débordait sur petit écran.) */
  .histoire-aside { width: 100%; }

  /* Le titre de l'encart oriel ne doit plus être forcé sur une seule
     ligne : nowrap provoquait un débordement horizontal sous ~360 px. */
  .oriel-definition .def-title { white-space: normal; }

  /* Retrait latéral de l'encart oriel réduit en mobile : --space-lg
     (4rem) laissait le texte très en retrait sur un encart pleine
     largeur. On repasse à --space-md (2rem) gauche/droite, en gardant
     les espacements verticaux d'origine. */
  .oriel-definition-header {
    padding: var(--space-md) var(--space-md) var(--space-md);
  }
  .oriel-definition-body {
    padding: 0 var(--space-md) var(--space-md);
  }
}
@media (max-width: 600px) {
  .site-footer .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}


/* ════════════════════════════════════════════════════
   PAGE PROJET — composants spécifiques
   Modèle réutilisable pour toutes les fiches-projet.
   Ordre des sections (calé sur le HTML) :
     1. Hero projet           .page-hero.projet
     2. Fiche projet          .fiche-section
     3. Galeries justifiées   .galerie-section / .galerie
     4. Exposition (bleu)     .expo-section
     5. Navigation projets    .projet-nav
     6. Reveal au scroll      [data-reveal]
════════════════════════════════════════════════════ */


/* ── 1. HERO PROJET ──────────────────────────────────────────
   Surcharges du .page-hero standard pour les pages projet :
   fond blanc, image plein cadre N&B, voile sombre uniquement
   en bas, +20% de hauteur, label plus marqué.
   ─────────────────────────────────────────────────────────── */
.page-hero.projet {
  background: var(--blanc);
  height: clamp(420px, 65vh, 720px);   /* +20% par rapport au hero standard */
  align-items: flex-end;
}
.page-hero.projet .page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 1;                          /* image pleine — pas d'opacité réduite */
  filter: grayscale(100%) brightness(0.88);
}
/* Voile sombre concentré sur le bas, pour lisibilité du titre */
.page-hero.projet::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0)    100%
  );
  pointer-events: none;
  z-index: 1;
}
.page-hero.projet .page-hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-md);
}
.page-hero.projet .page-hero-content .label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.92);
  margin-bottom: 0.75rem;
}
.page-hero.projet .page-hero-content h1 {
  color: var(--blanc);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
}
.page-hero.projet .page-hero-tagline {
  font-family: var(--f-corps);
  font-style: italic;
  color: rgba(255,255,255,0.78);
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.04em;
  margin-top: 0.5rem;
}


/* ── 2. FICHE PROJET ─────────────────────────────────────────
   Récit narratif à gauche + plan & encart résumé à droite.
   ─────────────────────────────────────────────────────────── */
.fiche-section {
  background: var(--blanc);
  padding: 0;            /* padding reporté sur chaque colonne */
}
.fiche-layout {
  display: grid;
  /* 3 colonnes : visite (beige) | récit | plan + résumé
     Proportions : colonne droite élargie d'environ +25% par rapport
     à la version initiale (1/2/1), colonne centrale resserrée en
     conséquence — l'ensemble texte/plan se décale visuellement vers
     la gauche et libère l'air à droite. */
  grid-template-columns: 1fr 1.55fr 1.25fr;
  gap: 0;
  align-items: stretch;
}

/* La section .fiche-section a un fond blanc — on annule le padding
   horizontal pour permettre à la colonne beige de toucher les bords.
   Les colonnes texte et droite gardent leur padding via .container. */
.fiche-section .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* Colonne 1 — Visite (fond beige)
   Padding vertical généreux ; comme .fiche-section n'a plus de
   padding, c'est ici qu'on porte la respiration de la section.
   Le bas n'a aucun padding-bottom : le fond beige descend ras
   du bord pour fusionner avec la galerie .alt suivante. */
.fiche-visite {
  background: var(--gris-clair);
  padding: var(--space-xl) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.fiche-visite h2 {
  font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texte);
  line-height: 2em;
  margin-bottom: var(--space-sm);
}
.fiche-visite .rule-rouge-long {
  width: 100px;
  height: 1px;
  background: var(--rouge);
  margin: 0 0 var(--space-md);
}

/* Bloc adresse : titre rouge + 2 lignes en italique semi-bold */
.fiche-visite-adresse {
  margin: 0 0 var(--space-md);
}
.fiche-visite-adresse-label {
  display: block;
  font-family: var(--f-titre);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 0.65em;
}
.fiche-visite-adresse-l1,
.fiche-visite-adresse-l2 {
  display: block;
  font-family: var(--f-corps);
  font-style: italic;
  font-weight: 600;             /* EB Garamond semi-bold italic */
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--texte);
}
.fiche-visite-adresse-l2 {
  color: var(--texte-leger);
}

/* Mini-carte IGN : cadre net, fond clair, légende IGN visible */
.fiche-visite-carte {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--gris-bord);
  background: #ededeb;
  position: relative;
  overflow: hidden;
}
/* Pour la carte IGN, on garde les couleurs (la légende IGN
   ne se lit bien qu'en couleur). Pour un rendu plus sobre on
   peut désaturer légèrement. */
.fiche-visite-carte .leaflet-tile-pane {
  filter: saturate(0.75) contrast(1.02);
}
.fiche-visite-carte .leaflet-control-zoom { display: none; }
.fiche-visite-carte .leaflet-control-attribution {
  font-size: 9px;
  opacity: 0.7;
}

/* Bouton « Itinéraire » — moderne, centré, fond plein
   Style affirmé : bleu charte, capitales espacées, micro-flèche. */
.fiche-visite-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}
/* Bouton itinéraire — pill arrondi, contour bleu, fond transparent,
   icône SVG « navigation » à gauche du libellé.
   Hover : remplissage bleu progressif + texte blanc. */
.fiche-visite-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1.5em;
  font-family: var(--f-titre);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bleu);
  background: transparent;
  border: 1.5px solid var(--bleu);
  border-radius: 999px;                /* pill : bord totalement arrondi */
  position: relative;
  overflow: hidden;
  transition: color var(--ease),
              background var(--ease),
              border-color var(--ease),
              transform 0.25s ease;
}
/* Icône SVG en pseudo-élément ::before — un petit pictogramme de
   navigation (cône directionnel) qui colle à la sémantique « itinéraire ».
   Construite en mask-image pour qu'elle prenne automatiquement la couleur
   du texte (currentColor) au hover. */
.fiche-visite-cta::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 22l8-4 8 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 22l8-4 8 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  transition: transform 0.3s ease;
}
.fiche-visite-cta:hover {
  color: var(--blanc);
  background: var(--bleu);
  border-color: var(--bleu);
}
.fiche-visite-cta:hover::before {
  transform: translateX(2px);
}

/* Colonne 2 — récit
   Padding-left augmenté pour ouvrir un vide à gauche
   qui aère la composition entre Visite et récit. */
.fiche-texte {
  padding: var(--space-xl) var(--space-md) var(--space-xl) var(--space-xl);
}

/* Colonne 3 — plan + résumé
   Padding-right augmenté pour décaler du bord droit,
   créant la marge de respiration demandée. */
.fiche-aside {
  padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Récit — colonne gauche */
.fiche-texte h2 {
  /* Titre noir/gras aligné sur le modèle Wix : Helvetica Bold
     15 px / interligne 2em, capitales, sans letter-spacing. */
  font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texte);
  line-height: 2em;
  margin-bottom: var(--space-sm);
}
.fiche-texte .rule-rouge-long {
  width: 240px;                /* ×5 longueur du standard */
  height: 1px;                 /* affiné à 1px (anciennement 4px puis 3px puis 2px) */
  background: var(--rouge);
  margin: 0 0 var(--space-md);
}
.fiche-texte p {
  font-family: var(--f-corps);
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--texte-leger);
  margin-bottom: 1.1em;
}
.fiche-texte p:last-child { margin-bottom: 0; }

/* Mises en exergue dans le récit */
.em-bleu {
  color: var(--bleu);
}
.em-bleu-gras {
  color: var(--bleu);
  font-weight: 600;   /* EB Garamond semi-bold (Google Fonts propose 600) */
}

/* Plan dans la colonne droite */
.fiche-plan-img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  /* Pas de cadre ni de fond — le plan respire seul */
}

/* Encart résumé sous le plan — fiche d'identité du projet.
   Deux colonnes (label gras / valeur), filets fins continus en
   bleu atelier entre les lignes, intégralement bleu atelier.
   ─ Astuce filets continus : on supprime le column-gap et on
     restitue la respiration entre colonnes par un padding-right
     sur les <dt> ; ainsi la bordure du dt et celle du dd
     se rejoignent sans coupure visuelle.
   ─ Étiquettes ET valeurs : Helvetica 15px / interligne 2em
     (caractéristiques reprises du modèle Wix existant).
     Étiquettes en gras, valeurs en normal, alignées à droite.
   ─ Tous les textes forcés en capitales d'imprimerie via CSS,
     pour uniformité quel que soit la casse saisie dans le HTML.
     Padding vertical réduit pour que les filets viennent au plus
     près du texte (comme sur le modèle). */
.fiche-resume {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0;
  row-gap: 0;
  margin: 0;
  border-top: 1px solid var(--bleu);
}
.fiche-resume dt,
.fiche-resume dd {
  padding: 0.25em 0;
  border-bottom: 1px solid var(--bleu);
  margin: 0;
  color: var(--bleu);
  font-family: 'Helvetica', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  line-height: 2em;
  text-transform: uppercase;
}
.fiche-resume dt {
  font-weight: 700;
  white-space: nowrap;
  padding-right: var(--space-md);
}
.fiche-resume dd {
  font-weight: 400;
  text-align: right;
}


/* ── 3. GALERIES JUSTIFIÉES ──────────────────────────────────
   Modèle Flickr/Google Photos : chaque <figure> porte une
   variable --ar (ratio L/H) et flex: var(--ar) 1 0 distribue
   l'espace au prorata. Pas de crop, bords alignés, gap uniforme.
   ─────────────────────────────────────────────────────────── */
.galerie-section {
  background: var(--blanc);
  padding: var(--space-xl) 0;
}
.galerie-section.alt {
  background: var(--gris-clair);
}

/* Titre de galerie : ×2 par rapport au standard, bleu, gras */
.galerie-section .section-header,
.expo-section .section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.galerie-section .section-header h2 {
  font-family: var(--f-titre);
  font-size: clamp(1.45rem, 2.6vw, 2rem);   /* ÷1,5 par rapport à l'XL précédent */
  font-weight: 400;                         /* regular au lieu de bold */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.rule-rouge-section {
  width: 192px;             /* ×3 longueur */
  height: 1px;              /* affiné à 1px (anciennement 4px puis 3px puis 2px) */
  background: var(--rouge);
  margin: 0 auto;
}

/* ── CARROUSEL HORIZONTAL (avant / chantier / après) ─────────
   Bande scrollable, photos à hauteur fixe, ratio conservé.
   ─────────────────────────────────────────────────────────── */
.carousel-wrap {
  position: relative;
  /* Déborde du .container pour occuper toute la largeur */
  width: 100%;
  overflow: hidden;           /* masque le scroll-bar natif */
}

/* Boutons précédent / suivant */
.carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--gris-bord);
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--bleu);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), opacity var(--ease);
  opacity: 0.82;
  padding: 0;
}
.carousel-btn:hover { background: var(--blanc); opacity: 1; color: var(--rouge); }
.carousel-btn--prev { left: 12px; }
.carousel-btn--next { right: 12px; }

/* Masquer les boutons sur mobile (swipe natif suffit) */
@media (max-width: 600px) { .carousel-btn { display: none; } }

/* La piste scrollable */
.galerie-carousel {
  --carousel-h: 420px;
  display: flex;
  flex-wrap: nowrap;          /* bande horizontale sans retour à la ligne */
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px 12px;       /* petit padding latéral + espace pour la scrollbar */
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: var(--bleu) transparent;
}
.galerie-carousel::-webkit-scrollbar { height: 4px; }
.galerie-carousel::-webkit-scrollbar-thumb { background: var(--bleu); border-radius: 2px; }
.galerie-carousel::-webkit-scrollbar-track { background: transparent; }

.galerie-carousel figure {
  flex: 0 0 auto;             /* largeur définie par inline-style depuis le ratio réel */
  height: var(--carousel-h);
  /* --fig-w est injecté en JS : width = carousel-h × (naturalWidth / naturalHeight) */
  width: var(--fig-w, auto);
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--gris-clair);
  scroll-snap-align: start;
  cursor: pointer;
}
.galerie-carousel figure a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.galerie-carousel figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* remplit la figure sans déformation */
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.galerie-carousel figure:hover img { transform: scale(1.04); }

/* Légende au survol */
.galerie-carousel figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 12px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0)    100%
  );
  font-family: var(--f-titre);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.galerie-carousel figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* Responsive hauteur du carrousel */
@media (max-width: 900px) { .galerie-carousel { --carousel-h: 300px; } }
@media (max-width: 600px) { .galerie-carousel { --carousel-h: 220px; padding: 0 8px 10px; } }

/* ── ANCIEN .galerie (conservé pour rétrocompatibilité éventuelle) ── */
.galerie {
  /* Hauteur cible des rangées, ajustée en responsive plus bas */
  --row-height: 440px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.galerie figure {
  /* --ar fourni en inline-style sur chaque figure */
  flex: var(--ar, 1.333) 1 0;
  height: var(--row-height);
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--gris-clair);
}
.galerie figure a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.galerie figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.galerie figure:hover img {
  transform: scale(1.04);
}

/* Légende : apparition au hover en bas */
.galerie figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 12px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0)    100%
  );
  font-family: var(--f-titre);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.galerie figure:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive galeries */
@media (max-width: 900px) {
  .galerie { --row-height: 280px; }
}
@media (max-width: 600px) {
  .galerie { --row-height: 220px; }
}


/* ── 4. SECTION EXPOSITION — cadre bleu centré ───────────────
   Le fond bleu ne s'étale pas sur toute la largeur : il forme
   un cadre rectangulaire centré autour du titre + sous-titre
   + mosaïque, posé sur le fond blanc de la page.
   ─────────────────────────────────────────────────────────── */
.expo-section {
  /* La section conserve son padding vertical, mais son fond
     redevient transparent — c'est le cadre intérieur qui porte
     la couleur. */
  background: transparent;
  padding: var(--space-xl) 0;
  color: var(--texte);
}
.expo-cadre {
  /* Cadre centré, largeur contenue (clairement plus étroite que la
     largeur de page, max-w=1200 dans la charte), padding interne
     généreux, fond bleu foncé charte. */
  max-width: 1000px;
  margin: 0 auto;
  background: var(--bleu-fonce);
  padding: var(--space-xl) var(--space-lg);
  color: rgba(255,255,255,0.85);
}
.expo-section .section-header h2 {
  font-family: var(--f-titre);
  font-size: clamp(1.45rem, 2.6vw, 2rem);   /* ÷1,5 par rapport à l'XL précédent */
  font-weight: 400;                         /* regular au lieu de bold */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.rule-blanc-section {
  width: 192px;             /* ×3 longueur */
  height: 1px;              /* affiné à 1px (anciennement 4px puis 3px puis 2px) */
  background: var(--blanc);
  margin: 0 auto;
}

.expo-intro {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  font-family: var(--f-corps);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
  text-align: center;
}

/* Mosaïque : 4 colonnes, ratio 1:1 par défaut.
   Dernier rang centré : les figures orphelines sont précédées d'un
   espace fictif généré en JS (.expo-spacer) qui les pousse au centre. */
.expo-mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  justify-items: center;  /* centre les items dans leur cellule */
}
/* Spacer invisible — pousse les figures du dernier rang vers le centre */
.expo-spacer {
  visibility: hidden;
  pointer-events: none;
}
.expo-mosaique figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}
.expo-mosaique figure.expo-double {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}
.expo-mosaique figure a {
  display: block;
  width: 100%;
  height: 100%;
}
.expo-mosaique figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.expo-mosaique figure:hover img {
  transform: scale(1.03);
}

@media (max-width: 900px) {
  .expo-cadre { padding: var(--space-lg) var(--space-md); margin: 0 var(--space-md); }
  .expo-mosaique { grid-template-columns: repeat(2, 1fr); }
  .expo-mosaique figure.expo-double { grid-column: span 2; }
}
@media (max-width: 500px) {
  .expo-cadre { padding: var(--space-md) var(--space-sm); margin: 0 var(--space-sm); }
  .expo-mosaique { grid-template-columns: 1fr; gap: 4px; }
  .expo-mosaique figure.expo-double { grid-column: span 1; aspect-ratio: 2 / 1; }
}


/* ── 5. NAVIGATION ENTRE PROJETS ─────────────────────────────
   Bande sobre, fond blanc, deux liens (prev / next).
   ─────────────────────────────────────────────────────────── */
.projet-nav {
  background: var(--blanc);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--gris-bord);
  border-bottom: 1px solid var(--gris-bord);
}
.projet-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.projet-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-titre);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu);
  padding: 0.4em 0;
  position: relative;
  transition: color var(--ease);
}
.projet-nav-link:hover { color: var(--rouge); }

.projet-nav-link .arrow {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.3s ease;
}
.projet-nav-link .arrow::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.projet-nav-link.prev .arrow::before {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-135deg);
}
.projet-nav-link.next .arrow::before {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.projet-nav-link:hover .arrow {
  width: 36px;
}


/* ── 6. REVEAL AU SCROLL ─────────────────────────────────────
   Activé par IntersectionObserver côté JS — classe .revealed.
   Délais cascadés via data-reveal-d="1|2|3".
   ─────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-d="1"] { transition-delay: 0.12s; }
[data-reveal][data-reveal-d="2"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-d="3"] { transition-delay: 0.36s; }


/* ── 7. RESPONSIVE PAGE PROJET ───────────────────────────────
   Adaptations tablette et mobile.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* En-dessous de 1100px, on passe à 2 colonnes : la visite passe en bandeau
     supérieur sur toute la largeur, le récit + le plan restent côte à côte. */
  .fiche-layout {
    grid-template-columns: 1.4fr 1fr;
  }
  .fiche-visite {
    grid-column: 1 / -1;
    padding: var(--space-md) var(--space-md);
  }
  .fiche-visite-carte { aspect-ratio: 16 / 5; max-height: 220px; }
}
@media (max-width: 900px) {
  /* En tablette/mobile, tout passe sur une seule colonne. */
  .fiche-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .fiche-visite,
  .fiche-texte,
  .fiche-aside {
    padding: var(--space-md);
  }
  .fiche-visite-carte { aspect-ratio: 4 / 3; max-height: none; }
  .fiche-aside { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .page-hero.projet { height: clamp(360px, 55vh, 480px); }
  .fiche-texte .rule-rouge-long { width: 180px; }
}