/* Les tokens de couleur/typo/rayon sont definis dans tokens.css, charge
   avant ce fichier. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--blanc);
  color: var(--noir);
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  background: rgba(43,38,34,0.95);
  backdrop-filter: blur(10px);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--blanc);
  letter-spacing: 0.05em;
  text-decoration: none;
}

.nav-logo span { color: var(--terre); }

nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
}

nav ul a {
  color: var(--sable);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

nav ul a:hover { color: var(--terre); }

.nav-back {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sable);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-back:hover { color: var(--terre); }
.nav-back::before { content: '←'; font-size: 1rem; }

/* NAVIGATION FLUIDE : fondu bref entre deux pages du site (Chrome et Safari recents ; les autres navigateurs ne changent pas,
   et aucun JavaScript n'est utilise). Le menu principal porte un nom de transition : il reste en place pendant le fondu.
   Un seul element peut porter ce nom par page (le fil d'Ariane est un autre <nav> : il n'est pas concerne). */
@view-transition { navigation: auto; }
nav[aria-label="Navigation principale"] { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* HERO COMMON CLASSES FOR BACKGROUND IMAGES */
.hero-cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(43, 38, 34, 0.92) 0%, rgba(43, 38, 34, 0.75) 50%, rgba(43, 38, 34, 0.96) 100%);
  z-index: 1;
}

/* HERO (Home) */
#hero {
  min-height: 100vh;
  background: var(--noir);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 140px 60px 80px;
  position: relative;
  overflow: hidden;
}

.hero-left { 
  padding-right: 60px;
  position: relative;
  z-index: 2;
}

.hero-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terre);
  border: 1px solid var(--terre);
  padding: 6px 14px;
  margin-bottom: 32px;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 600;
  color: var(--blanc);
  line-height: 1.1;
  margin-bottom: 28px;
}

.hero-title em {
  font-style: italic;
  color: var(--terre);
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--sable);
  line-height: 1.7;
  margin-bottom: 48px;
  font-weight: 300;
  max-width: 440px;
}

/* Bouton primaire -- composant unique reutilise par .hero-cta,
   .contact-submit et .newsletter-form button (voir plus bas), au lieu
   de trois copies du meme style. */
.hero-cta,
.contact-submit,
.newsletter-form button {
  display: inline-block;
  background: var(--terre);
  color: var(--blanc);
  border: none;
  padding: 16px 36px;
  font-family: var(--font-body);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.hero-cta:hover,
.contact-submit:hover,
.newsletter-form button:hover {
  color: var(--blanc) !important;
  background: var(--terre-claire);
  transform: scale(1.04);
  box-shadow: var(--shadow-soft);
}

.hero-cta:active,
.contact-submit:active,
.newsletter-form button:active {
  transform: scale(0.98);
}

/* DIAPORAMA DU BANDEAU D'ACCUEIL (.hero-slider) : les trois derniers contenus, à droite du titre (source réglable dans
   « Textes du site »). Le défilement est du CSS pur (scroll-snap : il se glisse au doigt et fonctionne sans JavaScript) ;
   assets/js/main.js ajoute flèches, points, pause et défilement automatique lent. Sans diapositive, #hero.hero--seul. */
.hero-right {
  position: relative;
  z-index: 2;
  min-width: 0;   /* le défilement ne doit pas élargir la grille */
}

.hero--seul { grid-template-columns: 1fr; }

.hero-slider {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid var(--border-strong);
}

.hero-slider-track::-webkit-scrollbar { display: none; }

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--noir);
}

.hero-slide-link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 34px;
  overflow: hidden;
  text-decoration: none;
}

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

/* Voile sombre sous le texte */
.hero-slide-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43,38,34,0.94) 0%, rgba(43,38,34,0.55) 45%, rgba(43,38,34,0.1) 100%);
}

.hero-slide-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-slide-eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
}

.hero-slide-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--blanc);
}

.hero-slide-meta {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--sable);
}

.hero-slide-more {
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
  transition: transform 0.3s var(--ease);
}

.hero-slide-link:hover .hero-slide-img { transform: scale(1.05); }
.hero-slide-link:hover .hero-slide-more { transform: translateX(6px); }

/* Sans image à la une : fond aux couleurs de la marque et initiale du titre */
.hero-slide--vide .hero-slide-link {
  background: radial-gradient(circle at 30% 20%, rgba(196,98,45,0.4), rgba(196,98,45,0) 60%), var(--noir-clair);
}

.hero-slide-initial {
  position: absolute;
  top: -4%;
  left: 24px;
  font-family: var(--font-heading);
  font-size: 12rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(245,242,237,0.07);
  user-select: none;
}

.hero-slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.hero-slider-controls[hidden] { display: none; }

.hero-slider-dots { display: flex; gap: 2px; }

.hero-slider-dot {
  position: relative;
  width: 34px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hero-slider-dot::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 9px;
  height: 3px;
  background: rgba(245,242,237,0.3);
  transition: background 0.3s var(--ease);
}

.hero-slider-dot[aria-current="true"]::after { background: var(--terre); }
.hero-slider-dot:hover::after { background: var(--terre-claire); }

.hero-slider-buttons { display: flex; gap: 6px; }

.hero-slider-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  color: var(--blanc);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hero-slider-btn:hover { background: var(--noir-clair); border-color: var(--terre); }

.hero-slider-icon-pause, .hero-slider-icon-play { display: inline-flex; }
.hero-slider-icon-play { display: none; }
.hero-slider-toggle[aria-pressed="true"] .hero-slider-icon-pause { display: none; }
.hero-slider-toggle[aria-pressed="true"] .hero-slider-icon-play { display: inline-flex; }

.hero-slider-all {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--terre-texte-sombre);
  transition: color 0.2s;
}

.hero-slider-all:hover { color: var(--blanc); }

/* HERO (Pages de Détails & Sous-pages) */
.article-hero {
  min-height: 60vh;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 140px 60px 60px;
  position: relative;
  overflow: hidden;
}

.article-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

/* FIL D'ARIANE (bandeau des pages de detail) : texte secondaire en --gris-sur-noir-clair (contraste AA sur fond sombre), page courante en blanc */
/* La regle generale « nav { position: fixed; ... } » (menu principal) s'applique a tout <nav> : on la neutralise ici */
.breadcrumb { position: static; z-index: auto; display: block; padding: 0; background: none; backdrop-filter: none; margin: 0 0 20px; font-size: 0.8rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--gris-sur-noir-clair); }
.breadcrumb li + li::before { content: '\203A'; content: '\203A' / ''; color: var(--gris-sur-noir-clair); }
.breadcrumb a { display: inline-block; padding: 4px 0; color: var(--gris-sur-noir-clair); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--blanc); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--blanc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }

.article-meta-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.article-category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--terre);
  padding: 5px 12px;
}

.article-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  border: 1px solid var(--terre);
  padding: 5px 12px;
}

.article-date, .article-lieu {
  font-size: 0.72rem;
  color: var(--sable);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-lieu::before {
  content: '·';
  margin-right: 16px;
  color: var(--terre);
}

.article-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 600;
  color: var(--blanc);
  line-height: 1.1;
  margin-bottom: 20px;
}

.article-title em {
  font-style: italic;
  color: var(--terre);
}

.article-intro {
  font-size: 1.05rem;
  color: var(--sable);
  line-height: 1.75;
  font-weight: 300;
  max-width: 680px;
}

/* CHIFFRES CLÉS */
.key-numbers {
  display: flex;
  gap: 2px;
  margin-top: 48px;
}

.key-number {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  padding: 20px 28px;
  flex: 1;
  backdrop-filter: blur(5px);
}

.key-number-val {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--terre);
  line-height: 1;
  margin-bottom: 4px;
}

.key-number-label {
  font-size: 0.65rem;
  color: var(--sable);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
}

/* IDENTITÉ (Home) */
#identite {
  padding: var(--section-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 28px;
}

.section-body {
  font-size: 1rem;
  color: var(--gris);
  line-height: 1.8;
  font-weight: 300;
}

/* IMAGE D'IDENTITÉ (accueil et page Agence), à la place de l'ancien bloc citation.
   Au survol : zoom lent de la photo, voile de marque qui monte du bas, cadre qui se resserre,
   légende qui apparaît. Sans photo choisie, un panneau de marque (halo terre + monogramme) tient la
   place (.identite-visual--vide). Écran tactile : pas de survol, la légende reste visible. */
.identite-visual {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 580px;
  overflow: hidden;
  isolation: isolate;
  background: var(--noir);
  color: var(--blanc);
}

.identite-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

/* Voile de marque (terre foncée) : visible au survol */
.identite-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(154, 74, 31, 0.72), rgba(43, 38, 34, 0) 65%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

/* Cadre fin qui se resserre autour de l'image */
.identite-visual::before {
  content: '';
  position: absolute;
  inset: 32px;
  z-index: 2;
  border: 1px solid rgba(245, 242, 237, 0.6);
  opacity: 0;
  transition: inset 0.6s var(--ease), opacity 0.6s var(--ease);
  pointer-events: none;
}

.identite-visual-caption {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 36px;
  z-index: 3;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.identite-visual-caption strong { font-weight: 600; font-style: normal; }

.identite-visual:hover img { transform: scale(1.06); }
.identite-visual:hover::after { opacity: 1; }
.identite-visual:hover::before { inset: 18px; opacity: 1; }
.identite-visual:hover .identite-visual-caption { opacity: 1; transform: none; }

/* Panneau de marque quand aucune photo n'est choisie */
.identite-visual--vide {
  background:
    radial-gradient(circle at 50% 50%, rgba(196, 98, 45, 0.5), rgba(196, 98, 45, 0) 55%),
    var(--noir);
  background-size: 160% 160%, 100% 100%;
  background-position: 20% 20%, 0 0;
  background-repeat: no-repeat;
  transition: background-position 0.9s var(--ease);
}

.identite-visual--vide:hover { background-position: 70% 60%, 0 0; }

.identite-visual-mark {
  position: absolute;
  right: 6%;
  bottom: -4%;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(11rem, 22vw, 19rem);
  line-height: 0.8;
  color: rgba(196, 98, 45, 0.28);
  transition: transform 0.9s var(--ease);
  user-select: none;
}

.identite-visual--vide:hover .identite-visual-mark { transform: translate(-14px, -14px) scale(1.05); }

@media (hover: none) {
  .identite-visual--legende::after { opacity: 1; }
  .identite-visual--legende .identite-visual-caption { opacity: 1; transform: none; }
}

/* EXPERTISES (Home) */
#expertises {
  padding: var(--section-pad);
  background: var(--noir);
}

#expertises .section-title { color: var(--blanc); }
#expertises .section-label { color: var(--terre); }

.expertises-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.expertise-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  padding: 44px 32px;
  transition: background 0.3s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.expertise-card:hover {
  background: rgba(196,98,45,0.1);
  border-color: rgba(196,98,45,0.3);
}

/* Icône de l'expertise (méta `icon`, sinon icône sobre selon le rang) : remplace les numéros 01, 02, 03... */
.expertise-icon {
  margin-bottom: 24px;
  line-height: 0;
  color: var(--terre-texte-sombre);
  transition: transform 0.35s var(--ease-bounce), color 0.3s var(--ease);
}

.expertise-card:hover .expertise-icon {
  transform: translateY(-3px) scale(1.06);
  color: var(--terre-claire);
}

.expertise-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 14px;
}

.expertise-body {
  font-size: 0.82rem;
  color: var(--sable);
  line-height: 1.7;
  font-weight: 300;
}

/* EXPERTISES (page dediee) */
#expertises-list {
  background: var(--blanc);
  padding: 80px 60px;
}

.expertise-item {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
  padding: 40px;
  background: var(--noir);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.expertise-item-side { flex: 0 0 100px; }

/* Icône de l'expertise (méta `icon`, sinon icône sobre selon le rang) : remplace l'ancien numéro 01, 02, 03... */
.expertise-item-icon {
  line-height: 0;
  color: var(--terre-texte-sombre);
}

/* min-width: 0 : sans lui, un mot long ou une image large du contenu riche
   empeche la colonne de retrecir et fait deborder la page en mobile. */
.expertise-item-main { flex: 1; min-width: 0; }

.expertise-item-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 15px;
}

.expertise-item-lead {
  font-size: 1.1rem;
  margin-bottom: 25px;
  color: var(--sable);
  font-weight: 300;
  line-height: 1.6;
  border-left: 2px solid var(--terre);
  padding-left: 15px;
}

.expertise-item-body {
  color: var(--blanc);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.9;
  overflow-wrap: anywhere;
}

.expertise-item-body img { max-width: 100%; height: auto; }

@media (max-width: 900px) {
  #expertises-list { padding: 60px 24px; }
  .expertise-item { flex-direction: column; gap: 16px; padding: 28px 22px; margin-bottom: 32px; }
  .expertise-item-side { flex: none; }
  .expertise-item-icon svg { width: 44px; height: 44px; }
  .expertise-item-title { font-size: 1.5rem; }
  .expertise-item-lead { font-size: 1rem; }
}

/* Lien vers la page de l'expertise (idiome « lien CTA en majuscules », comme .fiche-link et .initiative-link) */
.expertise-more {
  display: inline-block;
  margin-top: 28px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terre-texte-sombre);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.expertise-more::after { content: ' →'; }
.expertise-more:hover { color: var(--terre-claire); }
.article-body a.expertise-more { color: var(--terre-texte); text-decoration: none; }
.article-body a.expertise-more:hover { color: var(--terre); }

/* SERVICES d'une expertise : deux colonnes de cartes plates ; l'image du service, si elle existe, prend la place de l'icône */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 8px 0 0;
}
.article-body .service-grid { margin: 24px 0 36px; }

.service-card {
  background: var(--noir-clair);
  border: 1px solid var(--border-subtle);
  padding: 28px 26px 30px;
  transition: border-color 0.35s var(--ease);
}
.service-card:hover { border-color: var(--terre); }

.service-media { margin-bottom: 18px; line-height: 0; }
.service-media--image { overflow: hidden; }

.service-icon {
  display: inline-block;
  color: var(--terre-texte-sombre);
  transition: transform 0.35s var(--ease-bounce), color 0.3s var(--ease);
}
.service-card:hover .service-icon { transform: translateY(-3px) scale(1.06); color: var(--terre-claire); }

.service-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--noir);
  transition: transform 0.9s var(--ease);
}
.service-card:hover .service-image { transform: scale(1.04); }

/* Les sélecteurs à deux classes l'emportent sur le style du texte d'article (.article-body h3, .article-body p) */
.service-card .service-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.service-card .service-text {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--sable);
  margin: 0;
}

/* RÉALISATIONS ASSOCIÉES : carrés image + titre ; au survol et au focus clavier, le résumé se déploie (écran tactile : toujours visible) */
.expertise-realisations { margin-top: 40px; }

.expertise-realisations-label {
  margin: 0 0 14px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terre-texte-sombre);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.article-body .tile-grid { margin: 24px 0 8px; }

a.realisation-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--noir-clair);
  color: var(--blanc);
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.article-body a.realisation-tile,
.article-body a.realisation-tile:hover { color: var(--blanc); text-decoration: none; }

a.realisation-tile:hover,
a.realisation-tile:focus-visible {
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-soft);
}

/* Voile du bas (lisibilité du titre) puis voile plein qui apparaît au survol */
a.realisation-tile::before,
a.realisation-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
a.realisation-tile::before { background: linear-gradient(to top, rgba(43,38,34,0.92) 0%, rgba(43,38,34,0.25) 62%, rgba(43,38,34,0) 100%); }
a.realisation-tile::after { background: rgba(43,38,34,0.9); opacity: 0; transition: opacity 0.4s var(--ease); }
a.realisation-tile:hover::after,
a.realisation-tile:focus-visible::after { opacity: 1; }

.tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
a.realisation-tile:hover .tile-img,
a.realisation-tile:focus-visible .tile-img { transform: scale(1.06); }

/* Sans image à la une : fond aux couleurs de la marque et initiale du titre (comme .realisation-card--vide) */
.realisation-tile--vide { background: radial-gradient(circle at 20% 15%, rgba(196,98,45,0.38), rgba(196,98,45,0) 65%), var(--noir-clair); }
.tile-initial {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 0 0 16px;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--blanc);
  opacity: 0.15;
}

.tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px;
}
.tile-pays {
  display: block;
  margin-bottom: 6px;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terre-texte-sombre);
}
.tile-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
}

/* Résumé et « Voir la réalisation » : repliés au repos, déployés vers le haut au survol / au focus (le texte reste lu par les lecteurs d'écran) */
.tile-extra {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease), opacity 0.4s var(--ease);
}
.tile-extra-inner { display: block; overflow: hidden; min-height: 0; }
.tile-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--sable);
}
.tile-more {
  display: block;
  margin-top: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terre-texte-sombre);
}
a.realisation-tile:hover .tile-extra,
a.realisation-tile:focus-visible .tile-extra { grid-template-rows: 1fr; opacity: 1; }

/* Écran tactile : pas de survol, le résumé reste affiché sur un voile un peu plus fort */
@media (hover: none) {
  a.realisation-tile::before { background: linear-gradient(to top, rgba(43,38,34,0.96) 0%, rgba(43,38,34,0.8) 55%, rgba(43,38,34,0.1) 100%); }
  .tile-extra { grid-template-rows: 1fr; opacity: 1; }
}

@media (max-width: 700px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-card { padding: 24px 22px 26px; }
}
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: 1fr; }
  a.realisation-tile { aspect-ratio: 16 / 10; }
  .tile-text { -webkit-line-clamp: 2; }
}

/* RÉALISATIONS (Home) */
#realisations {
  padding: var(--section-pad);
}

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.portfolio-filters select {
  background: #fff;
  border: 1px solid var(--sable);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--noir);
}

.portfolio-filters-reset {
  font-size: 0.75rem;
  color: var(--terre);
  text-decoration: underline;
  transition: color 0.2s;
}

.portfolio-filters-reset:hover { color: var(--terre-dark); }

.realisations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.realisation-card {
  background: var(--noir);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  text-decoration: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.realisation-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-soft);
}

.realisation-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43,38,34,0.92) 0%, rgba(43,38,34,0.4) 100%);
  z-index: 1;
  transition: opacity 0.3s;
}

.realisation-card:hover::before {
  background: linear-gradient(to top, rgba(196,98,45,0.85) 0%, rgba(43,38,34,0.5) 100%);
}

.realisation-pays {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 10px;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.realisation-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.realisation-type {
  font-size: 0.75rem;
  color: var(--sable);
  font-weight: 300;
  position: relative;
  z-index: 2;
}

/* Sans image à la une : fond aux couleurs de la marque (et l'initiale du titre, .realisation-bg) */
.realisation-card--vide {
  background: radial-gradient(circle at 20% 15%, rgba(196,98,45,0.38), rgba(196,98,45,0) 65%), var(--noir-clair);
}

.realisation-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  opacity: 0.15;
  font-family: var(--font-heading);
  font-size: 7rem;
  font-weight: 600;
  color: var(--blanc);
  display: flex;
  align-items: center;
  padding-left: 20px;
  overflow: hidden;
  z-index: 0;
}

/* APPELS A CANDIDATURES */
.appels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .appels-grid { grid-template-columns: 1fr; }
}

.appel-card {
  display: flex;
  flex-direction: column;
  background: var(--noir);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  border: 1px solid var(--sable);
}

.appel-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-soft);
}

.appel-card-visual {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px;
}

.appel-badge {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 2px;
  color: var(--blanc);
}

.appel-badge-ouvert { background: var(--terre); }
.appel-badge-avenir { background: #2980b9; color: var(--blanc); }
.appel-badge-cloture { background: #555; }
.appel-badge-resultats { background: #2ecc71; color: var(--noir); }

.appel-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appel-card-projet {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre-claire);
  font-weight: 500;
}

.appel-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--blanc);
}

.appel-card-dates {
  font-size: 0.75rem;
  color: var(--sable);
  font-weight: 300;
}

/* INITIATIVES */
#initiatives {
  padding: var(--section-pad);
  background: #1a1512;
}

#initiatives .section-title { color: var(--blanc); }
#initiatives .section-label { color: var(--terre); }

.initiatives-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.initiative-card {
  border: 1px solid var(--border-strong);
  padding: 44px 36px;
  position: relative;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.initiative-card:hover {
  border-color: var(--terre);
  transform: translateY(var(--card-lift));
  background-color: rgba(196,98,45,0.02);
  box-shadow: var(--shadow-soft);
}

.initiative-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--terre);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--blanc);
  overflow: hidden;
  transition: transform 0.4s var(--ease-bounce);
}

.initiative-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.initiative-card:hover .initiative-icon {
  transform: scale(1.15) rotate(5deg);
}

.initiative-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 14px;
}

.initiative-body {
  font-size: 0.82rem;
  color: var(--sable);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 24px;
}

.initiative-link {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terre);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--terre);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s, padding-left 0.3s;
}

.initiative-card:hover .initiative-link {
  color: var(--terre-claire);
  border-color: var(--terre-claire);
  padding-left: 5px;
}

/* ÉQUIPE & DOUBLE AVATAR */
#equipe {
  padding: var(--section-pad);
}

.equipe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.membre-card {
  background: var(--noir);
  padding: 40px 28px;
  text-align: center;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.membre-card:hover {
  transform: translateY(var(--card-lift));
  background-color: var(--noir-clair);
  box-shadow: var(--shadow-soft);
}

.membre-avatar-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 20px;
  position: relative;
  height: 90px;
}

.membre-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--terre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--blanc);
  overflow: hidden;
  transition: transform 0.4s var(--ease-bounce), border-color 0.3s;
  border: 2px solid transparent;
}

.membre-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.membre-card:hover .membre-avatar {
  transform: scale(1.1);
  border-color: var(--terre);
}

.membre-secondary-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sable);
  border: 2px solid var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--noir);
  margin-left: -18px;
  z-index: 2;
  overflow: hidden;
  transition: transform 0.4s var(--ease-bounce);
}

.membre-secondary-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.membre-card:hover .membre-secondary-logo {
  transform: scale(1.15) translateY(-2px);
}

.membre-nom {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 6px;
}

.membre-pays {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 10px;
  font-weight: 500;
}

/* Drapeau(x) du pays, avant son nom */
.membre-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  vertical-align: -2px;
  margin-right: 6px;
  border: 1px solid var(--border-strong);
}

/* Compétences : petites étiquettes à angles francs, centrées sous la fonction */
.membre-competences {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.membre-competence {
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sable);
  border: 1px solid var(--border-strong);
  padding: 3px 9px;
}

.membre-expertise {
  font-size: 0.78rem;
  color: var(--sable);
  font-weight: 300;
  line-height: 1.5;
}

.membre-structure {
  font-size: 0.7rem;
  color: var(--gris);
  font-style: italic;
  margin-top: 6px;
}

/* RÉSEAU */
#reseau {
  padding: var(--section-pad);
  background: var(--noir);
}

#reseau .section-title { color: var(--blanc); }
#reseau .section-label { color: var(--terre); }

.reseau-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}

.pays-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  padding: 36px 28px;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.pays-card:hover {
  border-color: var(--terre);
  transform: translateY(var(--card-lift));
  background-color: rgba(255,255,255,0.05);
  box-shadow: var(--shadow-soft);
}

.pays-card.siege {
  background: rgba(196,98,45,0.08);
  border-color: rgba(196,98,45,0.3);
}

.pays-card.siege:hover {
  background-color: rgba(196,98,45,0.12);
  border-color: var(--terre);
}

.pays-card--sans-lien:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); background-color: rgba(255,255,255,0.03); }
.pays-card--sans-lien.siege:hover { border-color: rgba(196,98,45,0.3); background-color: rgba(196,98,45,0.08); }

.pays-flag {
  margin-bottom: 14px;
  display: inline-block;
}

.pays-flag img {
  transition: transform 0.4s var(--ease-bounce);
}

.pays-card:hover .pays-flag img {
  transform: scale(1.15) rotate(-5deg);
}

.pays-nom {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--blanc);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pays-statut {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: 10px;
  font-weight: 500;
}

.pays-detail {
  font-size: 0.8rem;
  color: var(--sable);
  font-weight: 300;
  line-height: 1.6;
}

/* ACTUALITÉS & MINIATURES */
#actualites {
  padding: var(--section-pad);
}

/* Sur l'accueil, Actualités suit Réalisations : deux sections claires, un filet les sépare */
#realisations + #actualites {
  border-top: 1px solid var(--sable);
}

.actu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.actu-card {
  border-top: 2px solid var(--sable);
  /* Marge intérieure + fond plein : au survol l'ombre dessine une vraie carte, le texte ne colle plus à ses bords */
  padding: 28px 24px;
  background: var(--blanc);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.actu-card:hover {
  border-color: var(--terre);
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-soft);
}

.actu-card:hover .actu-title { color: var(--terre); }
.actu-card:hover .actu-thumbnail { border-color: var(--terre); }

.actu-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--noir);
  border: 1px solid var(--border-subtle);
  margin-bottom: 4px;
  transition: border-color 0.35s var(--ease);
}

.actu-date {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  font-weight: 500;
}

.actu-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--noir);
  line-height: 1.3;
  transition: color 0.35s var(--ease);
}

.actu-body {
  font-size: 0.82rem;
  color: var(--gris);
  line-height: 1.7;
  font-weight: 300;
}

/* DETAILED ARTICLES LAYOUT */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 60px;
  align-items: start;
}

.article-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--sable);
}

/* Auteur d'un article (bloc au-dessus de la signature) et page auteur */
.article-author {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 48px;
}
.article-author + .article-signature { margin-top: 28px; }
.article-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.article-author-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terre);
  color: var(--blanc);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
}
.article-author-name { font-size: 0.9rem; color: var(--noir); margin: 0 0 4px; }
.article-author-name a {
  color: var(--noir);
  border-bottom: 1px solid var(--sable);
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.article-author-name a:hover { color: var(--terre-dark); border-color: var(--terre); }
.article-author-bio { font-size: 0.82rem; line-height: 1.6; color: var(--gris); margin: 0; }
.author-hero-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 2px solid var(--terre);
}

.article-signature img {
  opacity: 0.85;
}

.article-signature p {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--gris);
  margin: 0;
}


.appel-notice {
  font-size: 0.82rem;
  color: var(--terre);
  background: rgba(196, 98, 45, 0.08);
  border-left: 3px solid var(--terre);
  padding: 12px 16px;
  margin-bottom: 20px;
}

.appel-closed-notice {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
  border-left: 3px solid #e74c3c;
  padding: 16px 20px;
  margin-bottom: 20px;
}

/* SIDEBAR STYLES */
.article-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fiche-mission, .fiche-initiative {
  background: var(--noir);
  padding: 36px 32px;
}

.fiche-title {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  font-weight: 500;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.fiche-item {
  margin-bottom: 20px;
}

.fiche-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sable);
  font-weight: 500;
  margin-bottom: 5px;
  opacity: 0.8;
}

.fiche-value {
  font-size: 0.88rem;
  color: var(--blanc);
  font-weight: 300;
  line-height: 1.5;
}

.fiche-value strong {
  color: var(--terre-texte-sombre);
  font-weight: 500;
}

.fiche-link {
  display: block;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.fiche-link:hover {
  color: var(--terre-claire);
  border-color: var(--terre);
}
.fiche-link::after { content: ' →'; }

/* EXPERTISE TAGS */
.expertise-tags, .intervenants-block, .partenaires-block {
  border: 1px solid rgba(196,98,45,0.15);
  padding: 24px 28px;
}

.expertise-tags {
  background: rgba(196,98,45,0.08);
}

.expertise-tags-title, .intervenants-title, .partenaires-title {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre-texte);   /* fond clair : --terre-dark (5,6:1) */
  font-weight: 500;
  margin-bottom: 14px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 0.72rem;
  color: var(--gris);
  background: var(--blanc);
  border: 1px solid var(--sable);
  padding: 5px 12px;
  font-weight: 400;
}

.intervenant, .partenaire {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(196,98,45,0.1);
}

.intervenant:last-child, .partenaire:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.intervenant-nom, .partenaire-nom {
  font-size: 0.85rem;
  color: var(--noir);
  font-weight: 500;
}

.intervenant-detail, .partenaire-role {
  font-size: 0.72rem;
  color: var(--gris);
  font-weight: 300;
}

.sidebar-cta {
  background: var(--terre);
  padding: 28px;
  text-align: center;
}

.sidebar-cta p {
  font-size: 0.82rem;
  color: var(--blanc);
  line-height: 1.5;
  margin-bottom: 16px;
  font-weight: 300;
}

.sidebar-cta a {
  display: inline-block;
  background: var(--blanc);
  color: var(--terre);
  padding: 12px 24px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.sidebar-cta a:hover {
  color: var(--terre-dark);
  transform: scale(1.04);
  box-shadow: var(--shadow-soft);
}

/* ARTICLE SUITE (READ ALSO) */
.article-suite {
  background: var(--noir);
  padding: 80px 60px;
}

.suite-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
  margin-bottom: 40px;
}

.suite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.suite-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  padding: 36px 32px;
  text-decoration: none;
  transition: border-color 0.3s;
  display: block;
}

.suite-card:hover { border-color: var(--terre); }

.suite-card-cat {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
  margin-bottom: 12px;
  font-weight: 500;
}

.suite-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--blanc);
  line-height: 1.3;
  margin-bottom: 10px;
}

.suite-card-date {
  font-size: 0.72rem;
  color: var(--sable);
  font-weight: 300;
}

/* REALISATION : faits cles, resultats, galeries, partenaires, partage
   Faits cles sous le bandeau (pays avec drapeau, lieu, annee, budget, maitre d'ouvrage...). Les galeries s'ouvrent dans une
   visionneuse (assets/js/main.js) ; sans JavaScript, la vignette mene a l'image en grand. */
.realisation-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 60px;
  background: var(--noir-clair);
  border-top: 1px solid var(--border-subtle);
}

.fact {
  padding: 28px 56px 28px 0;
  min-width: 160px;
}

.fact-label {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
}

.fact-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 2px;
  background: var(--terre);
}

.fact-value {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--blanc);
}

.fact-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 18px;
  color: var(--blanc);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.fact-country:hover { color: var(--terre-claire); border-bottom-color: var(--terre-claire); }

.fact-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
}

.article-body .resultats { margin-top: 48px; }

.article-body .resultats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-body .resultats-list li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 32px;
  border-bottom: 1px solid rgba(196,98,45,0.18);
}

.article-body .resultats-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.45em;
  width: 14px;
  height: 2px;
  background: var(--terre);
}

.gallery { margin-top: 48px; }
.article-body .gallery-title { margin-top: 0; }

.article-body .gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
}

.article-body .gallery-grid li { margin: 0; padding: 0; }

.gallery-thumb {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--noir-clair);
}

.article-body a.gallery-thumb { text-decoration: none; }

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.gallery-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.3s var(--ease);
}

.gallery-thumb:hover img { transform: scale(1.06); }
.gallery-thumb:hover::after, .gallery-thumb:focus-visible::after { border-color: var(--terre); }

.partenaires-band {
  background: var(--blanc);
  border-top: 1px solid var(--sable);
  padding: 64px 60px;
}

.partenaires-band-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.partenaires-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.partenaire-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 24px 16px 20px;
  border: 1px solid var(--sable);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

a.partenaire-card:hover {
  border-color: var(--terre);
  transform: translateY(var(--card-lift));
  box-shadow: var(--shadow-soft);
}

.partenaire-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 84px;
  margin-bottom: 8px;
}

.partenaire-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partenaire-initiale {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--sable);
}

.partenaire-card-nom {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--noir);
  line-height: 1.35;
}

.partenaire-card-role {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--gris);
}

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.share-label {
  width: 100%;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gris);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--sable);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.share-btn svg {
  width: 14px;
  height: 14px;
  fill: var(--terre);
  flex-shrink: 0;
  transition: fill 0.25s var(--ease);
}

.share-btn:hover {
  color: var(--blanc);
  background: var(--terre);
  border-color: var(--terre);
  transform: translateY(-2px);
}

.share-btn:hover svg {
  fill: var(--blanc);
}

.share-status {
  width: 100%;
  min-height: 1.3em;
  font-size: 0.72rem;
  color: var(--terre-texte);
}

/* Encart de partage horizontal (articles & appels) */
.share-banner {
  background: var(--blanc);
  border: 1px solid var(--sable);
  padding: 16px 20px;
  margin: 32px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.share-banner-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noir);
}

.share-banner-label svg {
  width: 18px;
  height: 18px;
  stroke: var(--terre);
  fill: none;
  flex-shrink: 0;
}

.share-banner-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Encart de partage vertical (colonne latérale) */
.sidebar-share-card {
  background: var(--blanc);
  border: 1px solid var(--sable);
  padding: 22px;
  margin-bottom: 24px;
}

.sidebar-share-card .share-card-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terre);
  margin: 0 0 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-share-card .share-card-title svg {
  width: 16px;
  height: 16px;
  stroke: var(--terre);
  fill: none;
  flex-shrink: 0;
}

.sidebar-share-card .share-card-desc {
  font-size: 0.78rem;
  color: var(--gris);
  line-height: 1.45;
  margin: 0 0 16px;
}

.sidebar-share-card .sidebar-share-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-share-card .share-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 10px 14px;
  box-sizing: border-box;
}

.sidebar-share-card .share-btn:hover {
  transform: translateX(3px);
}

/* Boutons d'assistance latérale */
.sidebar-cta-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--terre);
  border: 1px solid var(--terre);
  color: var(--blanc);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.sidebar-cta-whatsapp svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

.sidebar-cta-whatsapp:hover {
  background: var(--terre-claire);
  border-color: var(--terre-claire);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.sidebar-cta-contact {
  display: block;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--sable);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.sidebar-cta-contact:hover {
  border-color: var(--blanc);
  color: var(--blanc);
  background: rgba(255, 255, 255, 0.05);
}

a.tag { text-decoration: none; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
a.tag:hover { color: var(--terre-texte); border-color: var(--terre); }

/* Visionneuse des galeries (creee par assets/js/main.js a la premiere ouverture) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 84px;
  background: rgba(43,38,34,0.96);
}

.lightbox[hidden] { display: none; }
html.lightbox-open { overflow: hidden; }

.lightbox-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.lightbox-fig img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  box-shadow: var(--shadow-soft);
}

.lightbox-caption {
  min-height: 1.4em;
  max-width: 70ch;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: var(--sable);
}

.lightbox-count {
  position: absolute;
  top: 26px;
  left: 28px;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--sable);
}

.lightbox-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blanc);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.lightbox-btn:hover { background: var(--noir-clair); border-color: var(--terre); }
.lightbox-btn[hidden] { display: none; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) {
  .realisation-facts { padding: 0 24px; }
  .fact { padding-right: 36px; }
  .partenaires-band { padding: 48px 24px; }
  .partenaires-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .article-body .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .lightbox { padding: 64px 12px 92px; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 20px; transform: none; }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }
}

/* PRESSE / PHOTOS */
.presse-section, .photos-section {
  margin: 36px 0;
}

.presse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 16px;
}

.presse-item {
  background: var(--blanc);
  border: 1px solid var(--sable);
  padding: 20px 24px;
}

.presse-media {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  font-weight: 500;
  margin-bottom: 8px;
}

.presse-titre {
  font-size: 0.85rem;
  color: var(--noir);
  line-height: 1.4;
  font-weight: 400;
}

.presse-titre a {
  color: var(--noir);
  text-decoration: none;
  border-bottom: 1px solid var(--sable);
  transition: border-color 0.2s;
}

.presse-titre a:hover { border-color: var(--terre); }

.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 16px;
}

.photo-placeholder {
  background: var(--noir);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  opacity: 0.6;
}

.photo-placeholder span {
  font-size: 0.65rem;
  color: var(--sable);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.photo-placeholder .photo-icon {
  font-size: 1.5rem;
  opacity: 0.4;
}

/* CONTACT SECTION */
#contact {
  padding: var(--section-pad);
  background: var(--noir);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

#contact .section-title { color: var(--blanc); }
#contact .section-body { color: var(--sable); }

.contact-info {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-info-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terre);
  font-weight: 500;
}

.contact-info-value {
  font-size: 0.9rem;
  color: var(--sable);
  font-weight: 300;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-strong);
  color: var(--blanc);
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,0.3); }

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--terre);
}

.contact-form select option { background: var(--noir); }

.contact-form textarea { height: 120px; resize: vertical; }

.alerte-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alerte-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.alerte-form-row input,
.alerte-form-row select {
  flex: 1;
  min-width: 160px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-strong);
  color: var(--blanc);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}

.alerte-form-row input:focus,
.alerte-form-row select:focus {
  border-color: var(--terre);
}

.alerte-form-row select option { background: var(--noir); }

/* Le style de base vient de la regle .hero-cta, .contact-submit plus haut
   dans ce fichier -- ici seulement les ecarts propres a ce contexte. */
.contact-submit {
  padding: 18px 36px;
  align-self: flex-start;
}

/* Champ de formulaire hors ecran (invisible a l'ecran, jamais en display:none) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* FOOTER : bande newsletter (plus bas), puis 4 colonnes (marque, deux menus, collaborer), puis barre basse
   (copyright, mentions légales, confidentialité). Pas de <nav> ici : la règle `nav` du site est faite pour l'en-tête. */
footer {
  background: #080808;
  padding: 72px 60px 0;
  border-top: 1px solid var(--border-subtle);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 60px;
}

.footer-logo { display: inline-block; }
.footer-logo img { display: block; height: 32px; width: auto; }

.footer-about {
  margin: 24px 0 26px;
  max-width: 340px;
  font-size: 0.88rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sable);
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terre-texte-sombre);
  margin-bottom: 22px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-contact {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gris-sur-noir);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--border-subtle);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: var(--sable);
  fill: var(--sable);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), fill 0.3s var(--ease), transform 0.3s var(--ease);
}

.social-icon svg {
  width: 16px;
  height: 16px;
}

.social-icon:hover {
  background: var(--terre);
  border-color: var(--terre);
  color: var(--blanc);
  fill: var(--blanc);
  transform: translateY(-3px);
}

.footer-legal {
  display: flex;
  gap: 28px;
}

.footer-legal a {
  font-size: 0.72rem;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.footer-copy { font-size: 0.72rem; color: var(--gris); }

/* HAMBURGER */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  /* c'est un <button> : on retire son habillage natif */
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blanc);
  transition: all 0.3s;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* DIVIDER */
.divider {
  width: 60px;
  height: 2px;
  background: var(--terre);
  margin-bottom: 28px;
}

/* PAGES D'ERREUR (404, 500, 503) */
.error-page {
  background: var(--noir);
  color: var(--blanc);
  padding: 170px 60px 110px;
  min-height: 70vh;
  text-align: center;
}
.error-page-standalone { min-height: 100vh; padding-top: 90px; }
.error-page-inner { max-width: 620px; margin: 0 auto; }
.error-page-inner .divider { margin-left: auto; margin-right: auto; }
.error-page .section-title { color: var(--blanc); }
.error-page .section-body { color: var(--sable); }
.error-page-logo { height: 32px; width: auto; margin-bottom: 60px; }
.error-page-code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--terre);
  margin-bottom: 24px;
}
.error-page-cta { margin-top: 34px; }
.error-page-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-top: 40px;
  padding: 0;
}
.error-page-links a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sable);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease);
}
.error-page-links a:hover { color: var(--terre-claire); }
.error-page-ref { margin-top: 36px; font-size: 0.78rem; color: var(--gris); }
.error-page-ref strong { color: var(--sable); font-weight: 600; letter-spacing: 0.05em; }
@media (max-width: 900px) {
  .error-page { padding: 130px 24px 80px; }
  .error-page-standalone { padding-top: 60px; }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  :root { --section-pad: 80px 24px; }

  /* NAV MOBILE */
  nav { padding: 16px 24px; }
  .nav-hamburger { display: flex; }
  
  nav ul {
    display: none;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: rgba(43,38,34,0.98);
    flex-direction: column;
    gap: 0;
    padding: 20px 0;
    z-index: 99;
  }
  nav ul.open { display: flex; }
  nav ul li a {
    display: block;
    padding: 14px 24px;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  /* HERO MOBILE */
  #hero {
    grid-template-columns: 1fr;
    padding: 120px 24px 60px;
    min-height: auto;
    gap: 48px;
  }
  .hero-left { padding-right: 0; }

  /* IDENTITÉ MOBILE */
  #identite {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .identite-visual { aspect-ratio: 16 / 10; max-height: 380px; }

  /* EXPERTISES MOBILE */
  .expertises-grid { grid-template-columns: 1fr; }

  /* RÉALISATIONS MOBILE */
  .realisations-grid { grid-template-columns: 1fr; }
  .realisation-card { min-height: 200px; }

  /* INITIATIVES MOBILE */
  .initiatives-grid { grid-template-columns: 1fr; }

  /* ÉQUIPE MOBILE */
  .equipe-grid { grid-template-columns: 1fr 1fr; }

  /* RÉSEAU MOBILE */
  .reseau-grid { grid-template-columns: 1fr 1fr; }

  /* ACTUALITÉS MOBILE */
  .actu-grid { grid-template-columns: 1fr; }

  /* CONTACT MOBILE */
  #contact {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* DETAILED ARTICLES LAYOUT MOBILE */
  .article-hero { padding: 120px 24px 48px; min-height: auto; }
  .key-numbers { flex-wrap: wrap; }
  .key-number { flex: 1 1 calc(50% - 1px); min-width: 120px; }

  .article-layout {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 48px;
  }

  .article-sidebar { position: static; }
  .photos-grid { grid-template-columns: 1fr 1fr; }
  .presse-grid { grid-template-columns: 1fr; }
  .suite-grid { grid-template-columns: 1fr; }
  .article-suite { padding: 60px 24px; }

  /* FOOTER MOBILE */
  footer { padding: 56px 24px 0; }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px 28px;
    padding-bottom: 44px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .hero-slide { aspect-ratio: 1 / 1; }
  .hero-slide-link { padding: 22px 20px; }
  .hero-slide-initial { font-size: 8rem; }
  .equipe-grid { grid-template-columns: 1fr; }
  .reseau-grid { grid-template-columns: 1fr; }
  .photos-grid { grid-template-columns: 1fr; }
  .key-number { flex: 1 1 100%; }
  .footer-main { grid-template-columns: 1fr; }
}

/* TOAST NOTIFICATION CHARTE GRAPHIQUE */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-toast {
  background: rgba(43, 38, 34, 0.95);
  border: 1px solid rgba(196, 98, 45, 0.4);
  backdrop-filter: blur(10px);
  color: var(--blanc);
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  min-width: 320px;
  max-width: 450px;
  transform: translateX(120%);
  transition: transform 0.4s var(--ease-bounce), opacity 0.4s;
  opacity: 0;
  position: relative;
  overflow: hidden;
}

.custom-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.custom-toast-icon {
  color: var(--terre);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-toast-content {
  flex-grow: 1;
  line-height: 1.4;
}

.custom-toast-close {
  background: none;
  border: none;
  color: var(--sable);
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 0 4px;
  display: flex;
  align-items: center;
}

.custom-toast-close:hover {
  opacity: 1;
  color: var(--terre);
}

.custom-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--terre);
  width: 100%;
  transform-origin: left;
  animation: toast-progress 4s linear forwards;
}

@keyframes toast-progress {
  to { transform: scaleX(0); }
}

/* BANDE NEWSLETTER : premier élément du pied de page. Fond plus clair que la dernière section de la page et
   filet de marque en haut : on voit où le pied de page commence. Même largeur que le contenu des sections. */
.newsletter-section {
  padding: 48px 60px;
  background: var(--noir-clair);
  border-top: 2px solid var(--terre);
  position: relative;
  overflow: hidden;
}

.newsletter-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.newsletter-text h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--blanc);
  margin-bottom: 12px;
  font-weight: 400;
}

.newsletter-text p {
  color: var(--sable);
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 300;
}

.newsletter-form-container {
  position: relative;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  width: 100%;
}

.newsletter-form input[type="email"] {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  color: var(--blanc);
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
}

.newsletter-form input[type="email"]:focus {
  border-color: var(--terre);
}

/* Le style de base vient de la regle .hero-cta, .contact-submit,
   .newsletter-form button plus haut -- ici seulement la mise en page
   propre a l'icone + texte inline de ce bouton. */
.newsletter-form button {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .newsletter-section {
    padding: 44px 24px;
  }
  .newsletter-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .newsletter-text {
    text-align: center;
  }
  .newsletter-form {
    flex-direction: column;
  }
}

/* ACCESSIBILITE
   Lien d'evitement (visible au clavier seulement), indicateur de focus au clavier
   et respect de la preference systeme "reduire les animations". */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  background: var(--blanc);
  color: var(--noir);
  padding: 12px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* <main> reçoit le focus quand on suit le lien d'evitement : pas de cadre a dessiner */
main:focus { outline: none; }

/* Anneau de focus visible uniquement a la navigation clavier (pas au clic souris) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--terre-claire);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CONTRASTES (WCAG AA, 4,5:1 pour le texte normal)
   --terre (#c4622d) ne fait que 3,66:1 sur fond clair comme sur fond sombre : il reste la couleur
   des fonds, filets et grands titres, mais le TEXTE courant prend une variante lisible :
   terre foncee sur fond clair, terre claire sur fond sombre, et fond de bouton terre foncee.
   Les variables --terre-texte, --terre-texte-sombre et --gris-sur-noir sont definies dans tokens.css. */

.section-label, .actu-date, .partenaires-title, .intervenants-title { color: var(--terre-texte); }
#expertises .section-label, #initiatives .section-label, #reseau .section-label,
#contact .section-label, .dialogue-section .section-label, #hero .section-label,
.article-hero .section-label, .membre-card .section-label, .newsletter-section .section-label { color: var(--terre-texte-sombre); }

.fiche-title, .membre-pays, .contact-info-label, .hero-tag, .pays-statut,
.initiative-link, .fiche-mission strong, .fiche-initiative strong, #hero strong,
.article-intro strong, .contact-info strong { color: var(--terre-texte-sombre); }

.hero-cta, .contact-submit, .newsletter-form button, .appel-badge-ouvert, .article-category { background: var(--terre-dark); }
.hero-cta:hover, .contact-submit:hover, .newsletter-form button:hover { background: #7f3d19; color: var(--blanc) !important; }

.footer-copy, footer a { color: var(--gris-sur-noir); }
footer a:hover { color: var(--terre-claire); }

/* Formulaire pose sur fond CLAIR (candidature a un appel) : la version sombre du formulaire y est illisible */
.contact-form--clair input, .contact-form--clair textarea, .contact-form--clair select {
  background: #fff;
  border: 1px solid rgba(43, 38, 34, 0.3);
  color: var(--noir);
}
.contact-form--clair input::placeholder, .contact-form--clair textarea::placeholder { color: var(--gris); }
.contact-form--clair select option { background: #fff; color: var(--noir); }
.contact-form--clair label { color: var(--gris) !important; }
.contact-form--clair label a { color: var(--terre-texte) !important; }
.sidebar-cta { background: var(--terre-dark); }
.sidebar-cta a { color: var(--terre-texte); }
.error-page .section-label { color: var(--terre-texte-sombre); }
.contact-form input[type="checkbox"] { width: auto; padding: 0; flex: none; margin-top: 3px; }

/* Liens du texte des articles, realisations et expertises : couleur de la marque (le bleu par defaut du navigateur detonne).
   Gardes ici, en fin de fichier : ils l'emportent sur .article-author-name a et les liens de composants. */
.article-body a { color: var(--terre-texte); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--terre); }

/* EXEMPTION ABSOLUE : Boutons de partage et composants d'action poses dans le corps d'un article ou appel.
   Ils ne doivent JAMAIS heriter du soulignement ni du texte marron au survol (qui les rendrait invisibles). */
.article-body a.share-btn,
.article-body .share-banner a.share-btn,
.share-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 15px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--noir) !important;
  background: var(--blanc) !important;
  border: 1px solid var(--sable) !important;
  cursor: pointer !important;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease) !important;
}

.article-body a.share-btn span,
.share-btn span {
  color: var(--noir) !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.article-body a.share-btn:hover,
.article-body a.share-btn:focus-visible,
.article-body .share-banner a.share-btn:hover,
.share-btn:hover,
.share-btn:focus-visible {
  text-decoration: none !important;
  color: #ffffff !important;
  background: var(--terre) !important;
  border-color: var(--terre) !important;
  transform: translateY(-2px) !important;
}

.article-body a.share-btn:hover span,
.article-body a.share-btn:focus-visible span,
.share-btn:hover span,
.share-btn:focus-visible span {
  color: #ffffff !important;
}

.share-btn svg {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* EXEMPTION ABSOLUE : Boutons d'action prioritaires (.hero-cta) dans le texte des articles ou appels.
   Ils ne doivent JAMAIS heriter de la couleur marron au survol (.article-body a:hover) qui les rendrait illisibles. */
.article-body a.hero-cta,
.article-body a.hero-cta:hover,
.article-body a.hero-cta:focus-visible,
.call-docs-top-box a.hero-cta,
.call-docs-top-box a.hero-cta:hover,
.call-docs-top-box a.hero-cta:focus-visible,
.candidature-cta-card a.hero-cta,
.candidature-cta-card a.hero-cta:hover,
.candidature-cta-card a.hero-cta:focus-visible {
  color: #ffffff !important;
  text-decoration: none !important;
}

.article-body a.hero-cta *,
.article-body a.hero-cta:hover *,
.call-docs-top-box a.hero-cta *,
.call-docs-top-box a.hero-cta:hover *,
.candidature-cta-card a.hero-cta *,
.candidature-cta-card a.hero-cta:hover * {
  color: #ffffff !important;
}

/* Icones sociales (remplies) */
.share-btn svg:not([stroke]):not(.icon-link) {
  fill: var(--terre) !important;
  transition: fill 0.2s var(--ease) !important;
}

.article-body a.share-btn:hover svg:not([stroke]):not(.icon-link),
.article-body a.share-btn:focus-visible svg:not([stroke]):not(.icon-link),
.share-btn:hover svg:not([stroke]):not(.icon-link),
.share-btn:focus-visible svg:not([stroke]):not(.icon-link) {
  fill: #ffffff !important;
}

/* Icones lineaires / traits (copier le lien, share-2) */
.share-btn svg[stroke],
.share-btn svg.icon-link {
  fill: none !important;
  stroke: var(--terre) !important;
  transition: stroke 0.2s var(--ease) !important;
}

.article-body a.share-btn:hover svg[stroke],
.article-body a.share-btn:hover svg.icon-link,
.share-btn:hover svg[stroke],
.share-btn:hover svg.icon-link {
  fill: none !important;
  stroke: #ffffff !important;
}

/* Encart lateral : boutons de partage pleine largeur */
.sidebar-share-card .share-btn {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;
  padding: 11px 16px !important;
  min-height: 42px !important;
  background: #ffffff !important;
  border: 1px solid var(--sable) !important;
  color: var(--noir) !important;
  border-radius: 2px !important;
}

.sidebar-share-card .share-btn:hover {
  transform: translateX(4px) !important;
  background: var(--terre) !important;
  border-color: var(--terre) !important;
  color: #ffffff !important;
}

/* Boutons d'assistance latérale : priorite absolue sur .sidebar-cta a */
.sidebar-cta a.sidebar-cta-whatsapp,
.sidebar-cta-whatsapp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 46px !important;
  padding: 12px 18px !important;
  background: var(--terre) !important;
  border: 1px solid var(--terre) !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
}

.sidebar-cta a.sidebar-cta-whatsapp span,
.sidebar-cta-whatsapp span {
  color: #ffffff !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.sidebar-cta a.sidebar-cta-whatsapp svg,
.sidebar-cta-whatsapp svg {
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.sidebar-cta a.sidebar-cta-whatsapp:hover,
.sidebar-cta a.sidebar-cta-whatsapp:focus-visible,
.sidebar-cta-whatsapp:hover,
.sidebar-cta-whatsapp:focus-visible {
  background: var(--terre-claire) !important;
  border-color: var(--terre-claire) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-soft) !important;
}

.sidebar-cta a.sidebar-cta-contact,
.sidebar-cta-contact {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 11px 18px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: var(--blanc) !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease) !important;
}

.sidebar-cta a.sidebar-cta-contact:hover,
.sidebar-cta a.sidebar-cta-contact:focus-visible,
.sidebar-cta-contact:hover,
.sidebar-cta-contact:focus-visible {
  border-color: #ffffff !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

/* CARTE DU RÉSEAU
   Fond sombre comme #reseau. Le dessin est un SVG decoratif ; les reperes sont des liens HTML poses en pourcentages par-dessus
   (nets a toute taille). Le resume d'un consultant s'ouvre au survol ET au focus clavier (CSS seul), jamais au seul toucher. */
.reseau-carte-section { padding: var(--section-pad); background: var(--noir); }
.reseau-carte-section .section-title { color: var(--blanc); }
.reseau-carte-section .section-label { color: var(--terre-texte-sombre); }
.reseau-carte-intro { color: var(--sable); font-weight: 300; line-height: 1.7; max-width: 62ch; margin: 18px 0 0; }

.reseau-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 24px; padding: 0; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sable); }
.reseau-legende li { display: flex; align-items: center; gap: 9px; }
.legende-pastille { width: 16px; height: 16px; border: 1px solid rgba(212, 196, 168, 0.5); flex: none; }
.legende-siege { background: var(--terre); border-color: var(--terre); }
.legende-implantation { background: rgba(196, 98, 45, 0.45); }
.legende-consultants { background: rgba(212, 196, 168, 0.22); }
.legende-repere { width: 12px; height: 12px; border-radius: 50%; background: var(--terre-claire); border: 2px solid var(--blanc); flex: none; }

.reseau-carte { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.reseau-carte-fond { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.carte-pays { fill: rgba(255, 255, 255, 0.07); stroke: rgba(212, 196, 168, 0.35); stroke-width: 1; stroke-linejoin: round; transition: fill 0.3s var(--ease); }
.carte-pays.a-consultants { fill: rgba(212, 196, 168, 0.22); }
.carte-pays.est-implantation { fill: rgba(196, 98, 45, 0.45); }
.carte-pays.est-siege { fill: var(--terre); }
.carte-pays.est-actif { fill: rgba(232, 132, 90, 0.8); }

.reseau-pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.reseau-pin { position: absolute; width: 0; height: 0; z-index: 1; }
.reseau-pin:hover, .reseau-pin:focus-within, .reseau-pin.est-ouvert { z-index: 10; }
/* zone cliquable de 28 px (cible tactile minimale WCAG 2.2) autour d'un point de 16 px */
.reseau-pin-lien { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: inherit; text-decoration: none; }
.reseau-pin-point { width: 16px; height: 16px; border-radius: 50%; background: var(--terre-claire); border: 2px solid var(--blanc); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); transition: transform 0.25s var(--ease-bounce); }
.reseau-pin-lien:hover .reseau-pin-point, .reseau-pin-lien:focus-visible .reseau-pin-point, .reseau-pin.est-ouvert .reseau-pin-point { transform: scale(1.4); }
.reseau-pin-lien:focus-visible { outline: 2px solid var(--blanc); outline-offset: 1px; }

/* Resume : ouvert au-dessus du repere ; la bordure transparente de 10 px relie le point au resume (le survol ne se perd pas
   en route). .vers-* : il s'ouvre de l'autre cote quand le repere est pres d'un bord de la carte. */
.reseau-pin-resume { position: absolute; left: 50%; bottom: 100%; width: 264px; max-width: calc(100vw - 32px); box-sizing: border-box; display: block;
  padding: 16px 16px 14px; border-bottom: 10px solid transparent; background: var(--blanc); background-clip: padding-box; color: var(--noir); text-align: left;
  box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s; }
.reseau-pin.vers-left .reseau-pin-resume { left: -12px; transform: translate(0, 6px); }
.reseau-pin.vers-right .reseau-pin-resume { left: auto; right: -12px; transform: translate(0, 6px); }
.reseau-pin.vers-below .reseau-pin-resume { bottom: auto; top: 100%; border-bottom: 0; border-top: 10px solid transparent; transform: translate(-50%, -6px); }
.reseau-pin.vers-below.vers-left .reseau-pin-resume { transform: translate(0, -6px); }
.reseau-pin.vers-below.vers-right .reseau-pin-resume { transform: translate(0, -6px); }
.reseau-pin:hover .reseau-pin-resume, .reseau-pin:focus-within .reseau-pin-resume, .reseau-pin.est-ouvert .reseau-pin-resume { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.reseau-pin.vers-left:hover .reseau-pin-resume, .reseau-pin.vers-left:focus-within .reseau-pin-resume, .reseau-pin.vers-left.est-ouvert .reseau-pin-resume,
.reseau-pin.vers-right:hover .reseau-pin-resume, .reseau-pin.vers-right:focus-within .reseau-pin-resume, .reseau-pin.vers-right.est-ouvert .reseau-pin-resume { transform: translate(0, 0); }
/* Echap : le resume se masque sans deplacer le focus (WCAG 1.4.13) */
.reseau-pin.est-masque .reseau-pin-resume { opacity: 0; visibility: hidden; }

.reseau-pin-photo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 10px; border-radius: 50%; overflow: hidden;
  background: var(--terre-dark); color: var(--blanc); font-family: var(--font-heading); font-size: 1.4rem; }
.reseau-pin-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reseau-pin-nom { display: block; font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.25; color: var(--noir); }
.reseau-pin-role { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.45; color: var(--gris); }
.reseau-pin-pays { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terre-texte); font-weight: 500; }
.reseau-pin-comp { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sable); font-size: 0.75rem; line-height: 1.5; color: var(--gris); }
.reseau-pin-cta { display: block; margin-top: 10px; font-size: 0.75rem; font-weight: 500; color: var(--terre-texte); }

.reseau-carte-aide { max-width: 980px; margin: 22px auto 0; font-size: 0.8rem; line-height: 1.6; color: var(--sable); font-weight: 300; }
.reseau-hors-carte { max-width: 980px; margin: 14px auto 0; font-size: 0.85rem; line-height: 1.7; color: var(--sable); }
.reseau-hors-carte a, .reseau-liens a { color: var(--terre-texte-sombre); text-underline-offset: 3px; }
.reseau-hors-carte strong { color: var(--blanc); font-weight: 500; }
.reseau-liens { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 40px 0 0; font-size: 0.9rem; }
.reseau-pin-pays img { outline: 1px solid rgba(43, 38, 34, 0.25); }   /* drapeaux clairs (Algerie...) lisibles sur la fiche blanche */

.reseau-carte-glisse { display: none; }
@media (max-width: 760px) {
  .reseau-carte-section { padding: 64px 24px; }
  /* La carte garde une taille lisible : elle se fait glisser de gauche a droite dans son cadre (le JS la centre sur les reperes) */
  .reseau-carte-cadre { overflow-x: auto; margin: 0 -24px; padding: 0 24px; -webkit-overflow-scrolling: touch; }
  .reseau-carte { min-width: 800px; }
  .reseau-carte-glisse { display: inline; }
  /* Petit ecran : le resume devient une fiche fixee en bas de l'ecran (plus de risque de sortir de la carte) */
  .reseau-pin-resume, .reseau-pin.vers-left .reseau-pin-resume, .reseau-pin.vers-right .reseau-pin-resume, .reseau-pin.vers-below .reseau-pin-resume {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; border: 0; transform: translateY(8px); }
  .reseau-pin:hover .reseau-pin-resume, .reseau-pin:focus-within .reseau-pin-resume, .reseau-pin.est-ouvert .reseau-pin-resume,
  .reseau-pin.vers-left:hover .reseau-pin-resume, .reseau-pin.vers-right:hover .reseau-pin-resume, .reseau-pin.vers-below:hover .reseau-pin-resume { transform: translateY(0); }
  .reseau-pin-point { width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .reseau-pin-resume, .reseau-pin-point, .carte-pays { transition: none; }
}

/* SIGNATURE D'AGENCE, VERSION ET JOURNAL
   Écrit MOBILE-FIRST : la base vaut pour un petit écran, @media (min-width) ajoute ce qui s'élargit. Le voyant vert est décoratif
   (il ne mesure rien : la version est celle du code déployé) et son pouls s'arrête si l'on demande moins d'animations. */
.footer-edition { display: block; margin-top: 4px; }
.footer-edition a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-edition a:hover, .footer-edition a:focus-visible { color: var(--blanc); }

.version-badge { display: inline-flex; align-items: center; gap: 9px; min-height: 28px; padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255, 255, 255, 0.04); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.footer-legal a.version-badge { text-transform: none; letter-spacing: 0.04em; }
.version-badge:hover, .version-badge:focus-visible { border-color: var(--terre-claire); color: var(--blanc); }
.version-voyant { position: relative; flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--voyant-ok); }
.version-voyant::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--voyant-ok); animation: voyant-pouls 2.4s ease-out infinite; }
@keyframes voyant-pouls { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* Page /changelog */
.changelog-hero-bg { background: linear-gradient(135deg, var(--noir) 0%, var(--noir-clair) 100%); }
.changelog-section { background: var(--blanc); padding: 48px 20px 72px; }
.changelog-inner { max-width: 880px; margin: 0 auto; display: grid; gap: 28px; }

.changelog-courant { display: grid; gap: 16px; padding: 24px; background: var(--noir); color: var(--blanc); }
.changelog-etat { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--voyant-ok); }
.changelog-courant-version { margin: 0; font-family: var(--font-heading); font-size: 1.8rem; line-height: 1.15; }
.changelog-courant-date, .changelog-courant-edition { margin: 6px 0 0; font-size: 0.82rem; color: var(--sable); }
.changelog-courant-edition a { color: var(--blanc); text-underline-offset: 3px; }

.changelog-engagement { padding: 24px; background: #fff; border: 1px solid var(--sable); }
.changelog-engagement h2 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 400; font-size: 1.4rem; color: var(--noir); }
.changelog-engagement p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--gris); }
.changelog-engagement ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; }
.changelog-engagement li { font-size: 0.85rem; line-height: 1.6; color: var(--gris); }
.changelog-engagement li strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--noir); }

.changelog-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--sable); display: grid; gap: 26px; }
.changelog-release { position: relative; }
.changelog-release::before { content: ""; position: absolute; left: -31px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--sable); border: 3px solid var(--blanc); }
.changelog-release.est-courante::before { background: var(--terre); }
.changelog-carte { padding: 20px; background: #fff; border: 1px solid var(--sable); }
.changelog-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.changelog-numero { padding: 3px 11px; background: var(--noir); color: var(--blanc); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; }
.est-courante .changelog-numero { background: var(--terre-dark); }
.changelog-date { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.changelog-actuelle { padding: 2px 9px; border: 1px solid var(--terre-dark); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terre-texte); }
.changelog-carte h3 { margin: 14px 0 6px; font-family: var(--font-heading); font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--noir); }
.changelog-resume { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--gris); }
.changelog-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.changelog-points li { font-size: 0.88rem; line-height: 1.6; color: var(--noir-clair); }
.changelog-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 3px; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px; }
.tag-nouveau { background: #dcebe1; color: #264a33; }
.tag-amelioration { background: #f0e6cf; color: #5f4510; }

@media (min-width: 761px) {
  .footer-edition { display: inline; margin: 0 0 0 10px; }
  .changelog-section { padding: 72px 60px 96px; }
  .changelog-courant { grid-template-columns: 1fr auto; align-items: center; padding: 30px 34px; }
  .changelog-courant-version { font-size: 2.3rem; }
  .changelog-courant-edition { margin: 0; }
  .changelog-engagement { padding: 32px 34px; }
  .changelog-engagement ul { grid-template-columns: 1fr 1fr; gap: 22px 32px; }
  .changelog-timeline { padding-left: 34px; gap: 30px; }
  .changelog-release::before { left: -43px; }
  .changelog-carte { padding: 28px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .version-voyant::after { animation: none; opacity: 0; }
  .version-badge { transition: none; }
}

/* Huit icônes sociales possibles (Instagram et TikTok ajoutés) : elles passent à la ligne au lieu de faire déborder la page sur petit écran */
.footer-socials { flex-wrap: wrap; gap: 12px 14px; }
.footer-legal { flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.version-badge { white-space: nowrap; }

/* Contraste (WCAG AA) : la ligne « structure » d'un consultant est posee sur la carte sombre (--noir) ; --gris n'y faisait que 2,6:1 */

/* -------------------------------------------------------------
   MODALE DE CANDIDATURE ASYNCHRONE & RESPONSIVE
   ------------------------------------------------------------- */
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

.candidature-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.candidature-modal[hidden] {
  display: none !important;
}

.candidature-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 12, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.candidature-modal-dialog {
  position: relative;
  background: #faf7f2;
  border: 1px solid var(--sable, #e0d7cb);
  border-radius: 8px;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 34px 38px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  animation: modalFadeIn 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.candidature-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  color: var(--noir, #1f1b18);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.candidature-modal-close:hover {
  background: var(--terre, #c4622d);
  color: #ffffff;
  border-color: var(--terre, #c4622d);
}

.candidature-modal-header {
  border-bottom: 1px solid var(--sable, #e0d7cb);
  padding-bottom: 18px;
  margin-bottom: 22px;
  padding-right: 40px;
}

.candidature-modal-title {
  font-family: var(--font-heading, serif);
  font-size: 1.45rem;
  color: var(--noir, #1f1b18);
  margin: 6px 0 6px;
  line-height: 1.3;
}

.candidature-modal-subtitle {
  font-size: 0.88rem;
  color: var(--gris, #666);
  margin: 0;
  line-height: 1.5;
}

.modal-notice-error {
  background: #fdf2f2;
  border: 1px solid #f8b4b4;
  border-left: 4px solid #e02424;
  color: #9b1c1c;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.5;
}

.modal-notice-success {
  background: #f3faf7;
  border: 1px solid #bcf0da;
  border-left: 4px solid #0e9f6e;
  color: #03543f;
  padding: 28px 24px;
  border-radius: 6px;
  text-align: center;
  margin: 10px 0 20px;
}

.modal-notice-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #def7ec;
  color: #0e9f6e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.modal-notice-success-title {
  font-family: var(--font-heading, serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: #03543f;
  margin: 0 0 10px;
}

.modal-dossier-pill {
  display: inline-block;
  background: #ffffff;
  border: 2px dashed #0e9f6e;
  padding: 10px 22px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 1.3rem;
  font-weight: 700;
  color: #03543f;
  letter-spacing: 0.08em;
  margin: 14px 0;
}

.spinner-svg {
  animation: spinLoader 0.75s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

/* CARTE D'AMORCE CANDIDATURE SUR LA PAGE */
.candidature-cta-card {
  background: #ffffff;
  border: 1px solid var(--sable, #e0d7cb);
  border-radius: 6px;
  padding: 30px 34px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.candidature-cta-card h4 {
  font-family: var(--font-heading, serif);
  font-size: 1.25rem;
  color: var(--noir, #1f1b18);
  margin: 0 0 6px;
}

.candidature-cta-card p {
  font-size: 0.88rem;
  color: var(--gris, #666);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 680px) {
  .candidature-modal {
    padding: 0;
  }
  .candidature-modal-dialog {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    padding: 24px 20px 40px;
  }
  .candidature-modal-header {
    padding-right: 36px;
  }
  .candidature-modal-title {
    font-size: 1.2rem;
  }
  .candidature-cta-card {
    padding: 22px;
    flex-direction: column;
    align-items: stretch;
  }
  .candidature-cta-card .hero-cta {
    text-align: center;
  }
}

.membre-structure { color: var(--gris-sur-noir-clair); }