/* ============================================================
   AIDA — AFRITECH INCLUSION DIGITAL ACADEMY
   Feuille de style principale
   Charte : marine #06448B · bleu #07739C · turquoise #008F9C
            vert #289367 · vert clair #59A644 · sable #DDEBEA
   Polices auto-hébergées (aucune ressource tierce).
   ============================================================ */

/* ---------- Polices (self-hosted) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Montserrat-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Montserrat-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/OpenSans-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/OpenSans-600-latin.woff2") format("woff2");
}

/* ---------- Jetons ---------- */
:root {
  /* Palette alignée sur le logo AIDA.
     --marine, --bleu et --vert sont les trois couleurs du logo lui-même ;
     --turquoise et --vert-clair sont interpolées entre elles, ce qui donne
     la même rampe que le dégradé de l'emblème.

     --vert-texte est une variante assombrie du vert du logo, réservée au
     texte et aux fonds portant du texte blanc : le vert du logo n'atteint
     que 3,19 de contraste sur blanc, en dessous du seuil de 4,5 exigé pour
     du texte courant. Le vert du logo reste utilisé partout ailleurs
     (icônes, bandes, aplats décoratifs) où le seuil est de 3,0. */
  --marine: #052F60;
  --bleu: #0756A5;
  --turquoise: #338279;
  --vert: #06A64F;
  --vert-texte: #007D2A;
  --vert-clair: #4BB86A;
  --sable: #E6FAF9;
  --gris: #BCDCDB;
  --encre: #1C2E49;
  --encre-60: rgba(28, 46, 73, 0.72);
  --blanc: #FFFFFF;

  --degrade-aida: linear-gradient(100deg, var(--marine) 0%, var(--bleu) 34%, var(--turquoise) 62%, var(--vert) 100%);
  --bande-tissee: linear-gradient(90deg,
      var(--marine) 0 25%, var(--bleu) 25% 50%,
      var(--turquoise) 50% 75%, var(--vert-clair) 75% 100%);
  /* Variante pour fonds sombres : le premier segment de la bande ci-dessus est
     --marine, qui est aussi la couleur du pied de page — il y disparaîtrait.
     Cette rampe est décalée d'un cran vers le clair pour rester lisible. */
  --vert-pale: #72C986;
  --bande-tissee-claire: linear-gradient(90deg,
      var(--bleu) 0 25%, var(--turquoise) 25% 50%,
      var(--vert) 50% 75%, var(--vert-pale) 75% 100%);

  --font-display: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;

  --largeur: 1140px;
  --radius: 14px;
  --radius-s: 8px;
  --ombre: 0 10px 30px rgba(7, 86, 165, 0.10);
  --ombre-forte: 0 18px 44px rgba(7, 86, 165, 0.16);
  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--encre);
  text-wrap: balance;
}

p { margin: 0 0 1em; }

a { color: var(--marine); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--turquoise); }

:focus-visible {
  outline: 3px solid var(--turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--turquoise); color: var(--blanc); }

.conteneur {
  width: min(var(--largeur), 100% - 2.5rem);
  margin-inline: auto;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marine);
  color: var(--blanc);
  padding: 0.8rem 1.4rem;
  z-index: 200;
  border-radius: 0 0 var(--radius-s) 0;
  font-weight: 600;
}
.lien-evitement:focus { left: 0; color: var(--blanc); }

/* ---------- Signature : bande tissée 4 couleurs ---------- */
.bande-tissee {
  height: 6px;
  background: var(--bande-tissee);
}
/* Sur les fonds sombres (pied de page, section marine), la bande bascule
   automatiquement sur la rampe claire. Aucune classe à ajouter dans le HTML. */
.pied .bande-tissee,
.section-marine .bande-tissee {
  background: var(--bande-tissee-claire);
}

/* Pastilles de séquence devant les kickers de section */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 0.9rem;
}
.kicker .seq {
  display: inline-grid;
  grid-template-columns: repeat(4, 9px);
  gap: 3px;
}
.kicker .seq i {
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--gris);
}
.kicker .seq i:nth-child(1) { background: var(--marine); }
.kicker[data-etape="2"] .seq i:nth-child(2) { background: var(--bleu); }
.kicker[data-etape="3"] .seq i:nth-child(2) { background: var(--bleu); }
.kicker[data-etape="3"] .seq i:nth-child(3) { background: var(--turquoise); }
.kicker[data-etape="4"] .seq i:nth-child(2) { background: var(--bleu); }
.kicker[data-etape="4"] .seq i:nth-child(3) { background: var(--turquoise); }
.kicker[data-etape="4"] .seq i:nth-child(4) { background: var(--vert-clair); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  transition: box-shadow var(--transition);
}
.entete.est-defilee { box-shadow: 0 6px 24px rgba(6, 68, 139, 0.12); }

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}
.marque-logo {
  display: block;
  height: 52px;
  width: auto;
}
.pied .marque-logo { height: 96px; }

.marque-texte { line-height: 1.15; }
.marque-nom {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--encre);
}
.marque-slogan {
  font-size: 0.76rem;
  color: var(--encre-60);
}

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principale a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--encre);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-principale a:hover { background: var(--sable); color: var(--marine); }
.nav-principale a.est-active { background: var(--marine); color: var(--blanc); }
.nav-principale a.nav-cta {
  background: var(--vert-texte);
  color: var(--blanc);
  margin-left: 0.4rem;
}
.nav-principale a.nav-cta:hover { background: var(--marine); }

.bouton-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 10px;
  border: 2px solid var(--sable);
  border-radius: 10px;
  background: var(--blanc);
  cursor: pointer;
}
.bouton-menu span {
  height: 3px;
  border-radius: 3px;
  background: var(--marine);
  transition: transform var(--transition), opacity var(--transition);
}
.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Héros ---------- */
.heros {
  position: relative;
  color: var(--blanc);
  background: var(--degrade-aida);
  overflow: hidden;
}
.heros::before {
  /* trame tissée oblique, rappel textile — très discrète */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
      rgba(255, 255, 255, 0.05) 0 14px,
      transparent 14px 46px);
  pointer-events: none;
}
.heros-int {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  padding: 5.5rem 0 6.5rem;
}
.heros .kicker { color: rgba(255, 255, 255, 0.92); }
.heros .kicker .seq i { background: rgba(255, 255, 255, 0.35); }
.heros .kicker .seq i:nth-child(1) { background: var(--blanc); }

.heros h1 {
  color: var(--blanc);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.45em;
}
.heros h1 .souligne {
  background: linear-gradient(transparent 72%, rgba(89, 166, 68, 0.85) 72%);
  padding: 0 0.08em;
}
.heros-texte p {
  max-width: 34rem;
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.92);
}

.heros-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.8rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover { transform: translateY(-2px); }
.bouton-plein { background: var(--vert-clair); color: var(--blanc); }
.bouton-plein:hover { background: var(--vert); color: var(--blanc); }
.bouton-contour { border-color: rgba(255, 255, 255, 0.7); color: var(--blanc); }
.bouton-contour:hover { background: rgba(255, 255, 255, 0.14); color: var(--blanc); }
.bouton-marine { background: var(--marine); color: var(--blanc); }
.bouton-marine:hover { background: var(--bleu); color: var(--blanc); }
.bouton-clair { background: var(--sable); color: var(--marine); }
.bouton-clair:hover { background: var(--gris); color: var(--marine); }

/* Panneau visuel du héros : les 4 lettres monumentales */
.heros-visuel {
  display: flex;
  justify-content: center;
  justify-self: center;
}
.heros-logo {
  width: min(380px, 78vw);
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.28));
}

/* ---------- Bandeau chiffres ---------- */
.chiffres {
  background: var(--blanc);
  border-bottom: 1px solid var(--sable);
}
.chiffres-int {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.6rem 0;
}
.chiffre {
  text-align: center;
  padding: 0.4rem 0.6rem;
  border-left: 4px solid var(--sable);
}
.chiffre:nth-child(1) { border-color: var(--marine); }
.chiffre:nth-child(2) { border-color: var(--bleu); }
.chiffre:nth-child(3) { border-color: var(--turquoise); }
.chiffre:nth-child(4) { border-color: var(--vert-clair); }
.chiffre strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--marine);
}
.chiffre span { font-size: 0.88rem; color: var(--encre-60); }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section-sable { background: var(--sable); }
.section-marine {
  background: linear-gradient(135deg, var(--marine), #052F60 70%);
  color: var(--blanc);
}
.section-marine h2, .section-marine h3 { color: var(--blanc); }
.section-marine .kicker { color: var(--turquoise); }
.section-marine .section-intro { color: rgba(255, 255, 255, 0.85); }

.section-tete { max-width: 46rem; margin-bottom: 2.6rem; }
.section-tete h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-intro { color: var(--encre-60); font-size: 1.08rem; margin: 0; }

/* ---------- À propos ---------- */
.apropos-grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: start;
}
.apropos-cartes {
  display: grid;
  gap: 1.1rem;
}
.carte-mission {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--ombre);
  border-top: 5px solid var(--marine);
}
.carte-mission.est-vision { border-top-color: var(--vert-texte); }
.carte-mission h3 { font-size: 1.12rem; margin-bottom: 0.35em; }
.carte-mission p { margin: 0; color: var(--encre-60); }

.badge-lieu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blanc);
  border: 1.5px solid var(--gris);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--marine);
  margin-bottom: 1.2rem;
}
.badge-lieu svg { width: 16px; height: 16px; stroke: var(--vert); fill: none; }

/* ---------- Cartes domaines ---------- */
.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.carte {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--ombre);
  border: 1px solid rgba(176, 204, 206, 0.35);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-forte); }
.carte h3 { font-size: 1.14rem; }
.carte p { color: var(--encre-60); margin-bottom: 0; }

.icone {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: var(--sable);
}
.icone svg { width: 26px; height: 26px; stroke: var(--marine); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-marine { background: rgba(7, 86, 165, 0.10); }  .icone-marine svg { stroke: var(--marine); }
.icone-bleu { background: rgba(7, 115, 156, 0.12); }   .icone-bleu svg { stroke: var(--bleu); }
.icone-turquoise { background: rgba(0, 143, 156, 0.12); } .icone-turquoise svg { stroke: var(--turquoise); }
.icone-vert { background: rgba(6, 166, 79, 0.14); }  .icone-vert svg { stroke: var(--vert); }
.icone-vert-clair { background: rgba(75, 184, 106, 0.16); } .icone-vert-clair svg { stroke: var(--vert-clair); }

/* ---------- Formations ---------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.filtre {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 2px solid var(--gris);
  background: var(--blanc);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--encre);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtre:hover { border-color: var(--turquoise); color: var(--turquoise); }
.filtre[aria-pressed="true"] {
  background: var(--marine);
  border-color: var(--marine);
  color: var(--blanc);
}

.carte-formation { position: relative; }
.carte-formation.est-masquee { display: none; }
.carte-formation .etiquette {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert-texte);
  background: rgba(6, 166, 79, 0.14);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.carte-formation .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 0.2rem 0 0.8rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--bleu);
}
.meta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -2px; display: inline; }
.carte-formation .carte-pied { margin-top: auto; padding-top: 1.2rem; }
.lien-fleche {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--marine);
}
.lien-fleche::after { content: " →"; }
.lien-fleche:hover { color: var(--turquoise); }

.formations-cta { text-align: center; margin-top: 2.4rem; }

/* ---------- Plateau technique (section sombre) ---------- */
.plateau-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.carte-plateau {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem;
}
.carte-plateau .icone { background: rgba(255, 255, 255, 0.12); margin-bottom: 0.9rem; }
.carte-plateau .icone svg { stroke: var(--turquoise); }
.carte-plateau h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.carte-plateau p { color: rgba(255, 255, 255, 0.78); margin: 0; font-size: 0.95rem; }

/* ---------- Inclusion ---------- */
.inclusion-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.liste-coches {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.liste-coches li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-weight: 600;
}
.liste-coches svg {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  stroke: var(--vert);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panneau-inclusion {
  background: var(--degrade-aida);
  border-radius: var(--radius);
  color: var(--blanc);
  padding: 2.6rem 2.4rem;
  box-shadow: var(--ombre-forte);
  position: relative;
  overflow: hidden;
}
.panneau-inclusion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 12px, transparent 12px 40px);
}
.panneau-inclusion > * { position: relative; z-index: 1; }
.panneau-inclusion .pictogramme {
  width: 68px; height: 68px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  margin-bottom: 1.2rem;
}
.panneau-inclusion .pictogramme svg { width: 36px; height: 36px; stroke: var(--blanc); fill: none; stroke-width: 1.8; }
.panneau-inclusion h3 { color: var(--blanc); font-size: 1.3rem; }
.panneau-inclusion p { color: rgba(255, 255, 255, 0.9); margin: 0; }

/* ---------- Entreprises / Partenaires ---------- */
.carte .carte-pied { margin-top: auto; padding-top: 1.2rem; }

/* ---------- Actualités ---------- */
.carte-actu time {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--bleu);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 1rem;
}
.carte-actu h3 { font-size: 1.1rem; }

/* Image à la une : plein cadre en haut de carte, au-dessus du padding */
.carte-actu-image {
  margin: -1.7rem -1.6rem 1.1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sable);
}
.carte-actu-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Image d'en-tête d'un article individuel */
.article-image {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.6rem;
  aspect-ratio: 16 / 8;
  background: var(--sable);
}
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Vidéo d'article : autohébergée ou intégration YouTube/Vimeo, format 16:9 responsive */
.article-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 1.6rem;
  background: var(--encre);
}
.article-video video,
.article-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Corps d'article : images insérées dans le texte, en Markdown */
.contenu-article { color: var(--encre-60); line-height: 1.7; }
.contenu-article > * + * { margin-top: 1.1rem; }
.contenu-article h2, .contenu-article h3 { color: var(--encre); margin-top: 1.8rem; }
.contenu-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}
.contenu-article figure { margin: 0; }
.contenu-article figcaption {
  font-size: 0.85rem;
  color: var(--encre-60);
  text-align: center;
  margin-top: 0.5rem;
}

/* ---------- Ressources ---------- */
.grille-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

/* ---------- Contact ---------- */
.contact-grille {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: start;
}
.coordonnees { display: grid; gap: 1.1rem; }
.coordonnee {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--ombre);
}
.coordonnee .icone { margin: 0; width: 46px; height: 46px; flex: none; }
.coordonnee h3 { font-size: 0.98rem; margin-bottom: 0.15em; }
.coordonnee p { margin: 0; color: var(--encre-60); font-size: 0.95rem; }
.coordonnee a { font-weight: 600; }

.formulaire {
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 2.2rem 2.2rem 2rem;
  box-shadow: var(--ombre-forte);
  border-top: 6px solid;
  border-image: var(--bande-tissee) 1;
}
.formulaire h3 { font-size: 1.25rem; }
.champ { margin-bottom: 1.15rem; }
.champ label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.champ label .req { color: var(--vert-texte); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 2px solid var(--gris);
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  transition: border-color var(--transition);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(0, 143, 156, 0.18);
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ .aide-erreur {
  display: none;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #B3261E;
}
.champ.est-invalide input,
.champ.est-invalide select,
.champ.est-invalide textarea { border-color: #B3261E; }
.champ.est-invalide .aide-erreur { display: block; }

.champ-consentement {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--encre-60);
}
.champ-consentement input {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--vert-texte);
  flex: none;
}

/* Pot de miel anti-spam : hors écran, hors tabulation, hors lecteur d'écran */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulaire-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.4rem;
}
.statut-formulaire {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-s);
  font-weight: 600;
  display: none;
}
.statut-formulaire.est-succes {
  display: block;
  background: rgba(6, 166, 79, 0.14);
  color: var(--vert-texte);
}
.statut-formulaire.est-erreur {
  display: block;
  background: rgba(179, 38, 30, 0.1);
  color: #B3261E;
}

/* ---------- Pied de page ---------- */
.pied {
  background: #052F60;
  color: rgba(255, 255, 255, 0.85);
  padding: 3.5rem 0 0;
}
.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.pied h3 {
  color: var(--blanc);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.pied a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.pied a:hover { color: var(--turquoise); text-decoration: underline; }
.pied .marque-slogan { color: rgba(255, 255, 255, 0.7); }
.pied .marque-nom { color: var(--blanc); }
.pied-base {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.3rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}
.pied-base ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }

/* ---------- Révélation au défilement ---------- */
.revele {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.revele.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revele { opacity: 1; transform: none; transition: none; }
  .bouton:hover, .carte:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grille-3 { grid-template-columns: repeat(2, 1fr); }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .heros-int { grid-template-columns: 1fr; padding: 4rem 0 4.5rem; }
  .heros-visuel { max-width: 300px; justify-self: start; }
}

@media (max-width: 900px) {
  .bouton-menu { display: flex; }
  .nav-principale {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--blanc);
    box-shadow: 0 18px 30px rgba(6, 68, 139, 0.15);
    display: none;
  }
  .nav-principale.est-ouverte { display: block; }
  .nav-principale ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.8rem 1.2rem 1.2rem;
  }
  .nav-principale a { border-radius: var(--radius-s); padding: 0.85rem 1rem; }
  .nav-principale a.nav-cta { margin: 0.4rem 0 0; text-align: center; }

  .apropos-grille,
  .inclusion-grille,
  .contact-grille { grid-template-columns: 1fr; }
  .chiffres-int { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .section { padding: 3.6rem 0; }
  .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .marque-texte { display: none; }
  .formulaire { padding: 1.6rem 1.3rem 1.4rem; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Sélecteur de langue dans la navigation */
.nav-langue a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--gris);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--marine);
  text-decoration: none;
}
.nav-langue a:hover,
.nav-langue a:focus-visible {
  background: var(--sable);
  border-color: var(--marine);
}

/* Légende sous l'image d'en-tête d'un article */
.article-figure { margin: 0 0 1.6rem; }
.article-figure .article-image { margin-bottom: 0; }
.article-figure figcaption {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--encre-60);
  padding: 0.7rem 0.1rem 0;
  border-bottom: 1px solid var(--gris);
}

/* Note de mise à jour en tête d'article : l'article d'origine n'est pas
   réécrit, on signale simplement qu'une suite existe. */
.note-maj {
  background: var(--sable);
  border-left: 4px solid var(--bleu);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--encre);
}
.note-maj p { margin: 0; }
.note-maj a { color: var(--bleu); font-weight: 600; }

/* Filet de sécurité pour les icônes au trait.
   Toutes les icônes du site suivent la même convention : viewBox 24×24, tracés
   sans attribut fill, destinés à être dessinés au contour. Placée dans un
   contexte que le CSS ne prévoyait pas, une telle icône retombe sur le
   remplissage noir par défaut du format SVG — d'où des aplats noirs.
   Cette règle garantit qu'aucune ne peut se remplir accidentellement. */
svg[viewBox="0 0 24 24"]:not([fill]) { fill: none; }

/* Lien de don dans la navigation : présent en permanence, en retrait visuel
   par rapport au bouton de contact pour ne pas créer deux appels concurrents */
.nav-principale a.nav-don {
  color: var(--vert-texte);
  font-weight: 700;
}
.nav-principale a.nav-don:hover { background: rgba(6, 166, 79, 0.10); color: var(--vert-texte); }