/*
Theme Name: BIM Avenue 2026
Theme URI: https://bimavenue.com
Author: BIM AVENUE
Description: Thème sur mesure pour BIM AVENUE — design inspiré du dessin technique (grille de plan, annotations), palette sarcelle enrichie d'accents bleu, ambre et cuivre, visuel de maquette numérique éclatée, optimisé SEO et performance. Page d'accueil de présentation, sans empilement de contenus.
Version: 1.8.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bimavenue2026
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  --encre: #122120;          /* encre bleu-vert, quasi noir */
  --teal: #0F6E6A;           /* couleur de marque */
  --teal-fonce: #0A4B48;
  --teal-pale: #E3EFEE;
  --calque: #F4F7F6;         /* papier calque */
  --blanc: #FFFFFF;
  --cuivre: #A8663A;         /* accent cuivre (marron) */
  --bleu: #2F6FD0;           /* accent fluides / modélisation */
  --bleu-pale: #E4EDFB;
  --ambre: #C97F16;          /* accent structure / formation */
  --ambre-pale: #FBEEDB;
  --gris-texte: #3C4A49;
  --trait: rgba(18, 33, 32, 0.14);   /* traits fins de plan */
  --trait-clair: rgba(255, 255, 255, 0.22);

  --police-titre: 'Sora', system-ui, sans-serif;
  --police-texte: 'Inter', system-ui, sans-serif;
  --police-plan: 'IBM Plex Mono', ui-monospace, monospace;

  --largeur: 1140px;
  --rayon: 10px;

  /* Logo animé de l'en-tête */
  --logo-h: 84px;            /* hauteur sur ordinateur — même empreinte que l'ancien rendu */
  --logo-h-compact: 56px;    /* hauteur quand l'en-tête se réduit */
  --logo-h-mobile: 52px;
}

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

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

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

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

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1.1em; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-fonce); text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--cuivre);
  outline-offset: 2px;
  border-radius: 3px;
}

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

/* Sur-titre façon annotation de plan */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-plan);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--cuivre);
}
.eyebrow .ref { color: var(--cuivre); }

.section { padding: 84px 0; }
.section--calque { background: var(--calque); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.section-intro { max-width: 640px; margin-bottom: 44px; }

/* =========================================================
   BOUTONS
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 26px;
  border-radius: var(--rayon);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--plein { background: var(--teal); color: var(--blanc); }
.btn--plein:hover { background: var(--teal-fonce); color: var(--blanc); }
.btn--contour { border-color: var(--trait); color: var(--encre); background: transparent; }
.btn--contour:hover { border-color: var(--teal); color: var(--teal); }
.btn--inverse { background: var(--blanc); color: var(--teal-fonce); }
.btn--inverse:hover { background: var(--teal-pale); color: var(--teal-fonce); }

/* =========================================================
   EN-TÊTE
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.site-branding { display: flex; align-items: center; gap: 12px; }
.site-branding img { max-height: var(--logo-h); width: auto; }

/* ---------------------------------------------------------
   Logo animé
   Le logo contient déjà le nom « BIM AVENUE » : le titre texte
   est masqué visuellement mais reste lu par les moteurs et
   les lecteurs d'écran.
   --------------------------------------------------------- */
.bv-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  isolation: isolate;
  padding: 0;
  background: none;
  box-shadow: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1);
  will-change: transform;
}
.bv-logo:hover { text-decoration: none; }

.bv-logo__img {
  position: relative;
  z-index: 2;
  display: block;
  height: var(--logo-h);
  width: auto;
  max-height: none;
  filter: none;
  transition: height 0.35s cubic-bezier(0.2, 0.8, 0.25, 1), filter 0.45s ease;
  animation: bv-logo-entree 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}


.bv-logo:hover, .bv-logo:focus-visible { transform: translateY(-2px); }

.bv-logo:active { transform: translateY(0) scale(0.985); }

/* En-tête réduit au défilement */
.site-header.is-compact .bv-logo__img { height: var(--logo-h-compact); }

@keyframes bv-logo-entree {
  from { opacity: 0; transform: translateY(9px) scale(0.965); filter: blur(3px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

/* Le nom du site reste dans le code pour le référencement */
.site-branding .site-title.est-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-title {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.02em;
  color: var(--encre);
}
.site-title:hover { text-decoration: none; color: var(--teal); }
.site-title span { color: var(--teal); }

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-principale a {
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--encre);
}
.nav-principale a:hover { background: var(--teal-pale); color: var(--teal-fonce); text-decoration: none; }
.nav-principale .current-menu-item > a,
.nav-principale .current_page_item > a { color: var(--teal); }
.nav-principale .menu-cta > a,
.nav-principale li:last-child > a.est-contact {
  background: var(--teal);
  color: var(--blanc);
}
.nav-principale .menu-cta > a:hover { background: var(--teal-fonce); }

.menu-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--trait);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--police-plan);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--encre);
}

@media (max-width: 880px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .nav-principale {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--blanc);
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 18px 30px -18px rgba(18, 33, 32, 0.25);
  }
  .nav-principale.est-ouvert { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px; }
  .nav-principale a { padding: 13px 12px; }
}

/* =========================================================
   HÉROS — le cartouche de plan
   ========================================================= */
.hero {
  position: relative;
  background:
    radial-gradient(560px 420px at 84% 30%, rgba(47, 111, 208, 0.10), transparent 70%),
    radial-gradient(520px 400px at 12% 85%, rgba(201, 127, 22, 0.09), transparent 70%),
    radial-gradient(620px 460px at 30% 10%, rgba(15, 110, 106, 0.12), transparent 70%),
    linear-gradient(rgba(244, 247, 246, 0.82), rgba(244, 247, 246, 0.9)),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--trait) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--trait) 39px 40px),
    var(--calque);
  border-bottom: 1px solid var(--trait);
  overflow: hidden;
}
.h1-grad {
  background: linear-gradient(100deg, var(--teal) 0%, var(--bleu) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
  gap: 56px;
  align-items: center;
  padding: 88px 0 92px;
}
.hero p.hero__texte {
  font-size: 1.14rem;
  max-width: 560px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 30px; }
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--police-plan);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--gris-texte);
  padding: 0;
  margin: 0;
  list-style: none;
}
.hero__badges li { display: flex; align-items: center; gap: 8px; }
.hero__badges li::before {
  content: "";
  width: 8px; height: 8px;
  border: 1.5px solid var(--cuivre);
  transform: rotate(45deg);
}
.hero__badges li:nth-child(1)::before { border-color: var(--teal); background: rgba(15, 110, 106, 0.18); }
.hero__badges li:nth-child(2)::before { border-color: var(--bleu); background: rgba(47, 111, 208, 0.18); }
.hero__badges li:nth-child(3)::before { border-color: var(--ambre); background: rgba(201, 127, 22, 0.18); }

/* Maquette numérique éclatée à droite */
.hero__visuel { max-width: 520px; margin-left: auto; }
.hero__visuel svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Variante vidéo du visuel d'accueil */
.hero__visuel--video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(18, 33, 32, 0.25);
  background: var(--teal-pale);
}

.hero__visuel .calque__label {
  font-family: var(--police-plan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.hero__visuel .calque__titre {
  font-family: var(--police-plan);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Flottement doux permanent, décalé par calque */
.hero__visuel .calque__flotte {
  animation: bv-flotte 7s ease-in-out infinite;
  will-change: transform;
}
.hero__visuel .calque--arc .calque__flotte { animation-delay: 0s; }
.hero__visuel .calque--cvc .calque__flotte { animation-delay: 1.2s; }
.hero__visuel .calque--str .calque__flotte { animation-delay: 2.4s; }
.hero__visuel .calque--ter .calque__flotte { animation-delay: 3.6s; }

@keyframes bv-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Au survol : la maquette s'éclate, les calques s'écartent */
.hero__visuel .calque {
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1.15);
  will-change: transform;
}
.hero__visuel svg:hover .calque--arc { transform: translateY(-24px); }
.hero__visuel svg:hover .calque--cvc { transform: translateY(-6px); }
.hero__visuel svg:hover .calque--str { transform: translateY(10px); }
.hero__visuel svg:hover .calque--ter { transform: translateY(26px); }

/* Marqueur de contrôle : onde pulsante */
.hero__visuel .clash__onde {
  transform-origin: center;
  transform-box: fill-box;
  animation: bv-onde 2.6s ease-out infinite;
}
@keyframes bv-onde {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Balayage lumineux traversant la maquette */
.hero__visuel .balayage {
  animation: bv-balayage 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes bv-balayage {
  0%, 55%  { transform: translateX(0); }
  85%, 100% { transform: translateX(1150px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visuel .calque { transition: none; }
  .hero__visuel svg:hover .calque--arc,
  .hero__visuel svg:hover .calque--cvc,
  .hero__visuel svg:hover .calque--str,
  .hero__visuel svg:hover .calque--ter { transform: none; }
  .hero__visuel .clash__onde,
  .hero__visuel .balayage { animation: none; }
}

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; padding: 60px 0 64px; gap: 40px; }
  .hero__visuel { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 782px) {
  .bv-logo__img { height: var(--logo-h-mobile); }
}

/* =========================================================
   CARTES EXPERTISES
   ========================================================= */
.grille-expertises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1020px) { .grille-expertises { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grille-expertises { grid-template-columns: 1fr; } }

.carte {
  --accent: var(--teal);
  --accent-pale: var(--teal-pale);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--accent);
  border-radius: var(--rayon);
  padding: 24px 24px 22px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.carte:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.carte__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-pale);
  color: var(--accent);
  margin-bottom: 16px;
}
.carte__icone svg { width: 24px; height: 24px; }
.carte__ref {
  font-family: var(--police-plan);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
}
.carte h3 { margin-bottom: 10px; }
.carte p { font-size: 0.97rem; flex-grow: 1; }
.carte__lien {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 6px;
}
.carte__lien:hover { color: var(--accent); }
.carte__lien::after { content: " →"; }

/* =========================================================
   BANDEAU CHIFFRES
   ========================================================= */
.bandeau-chiffres {
  background: var(--encre);
  color: var(--blanc);
  border-top: 1px solid var(--teal-fonce);
}
.bandeau-chiffres .conteneur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 54px;
  padding-bottom: 54px;
}
@media (max-width: 760px) { .bandeau-chiffres .conteneur { grid-template-columns: repeat(2, 1fr); } }
.chiffre { border-left: 2px solid var(--trait-clair); padding-left: 20px; }
.chiffre__valeur {
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  color: var(--blanc);
}
.chiffre__valeur em { font-style: normal; color: #63C1BC; }
.chiffre:nth-child(1) { border-left-color: #63C1BC; }
.chiffre:nth-child(2) { border-left-color: #7FA9EA; }
.chiffre:nth-child(3) { border-left-color: #EBB35C; }
.chiffre:nth-child(4) { border-left-color: #D89A6F; }
.chiffre:nth-child(2) .chiffre__valeur em { color: #7FA9EA; }
.chiffre:nth-child(3) .chiffre__valeur em { color: #EBB35C; }
.chiffre:nth-child(4) .chiffre__valeur em { color: #D89A6F; }
.chiffre__label {
  font-family: var(--police-plan);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 6px;
}

/* =========================================================
   ARGUMENTS (Pourquoi BIM AVENUE)
   ========================================================= */
.grille-arguments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 34px;
}
@media (max-width: 880px) { .grille-arguments { grid-template-columns: 1fr; } }
.argument h3 { display: flex; align-items: baseline; gap: 12px; }
.argument h3::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border: 2px solid var(--teal);
  transform: rotate(45deg);
  position: relative;
  top: -1px;
}
.argument:nth-child(1) h3::before { border-color: var(--teal); background: rgba(15, 110, 106, 0.15); }
.argument:nth-child(2) h3::before { border-color: var(--bleu); background: rgba(47, 111, 208, 0.15); }
.argument:nth-child(3) h3::before { border-color: var(--ambre); background: rgba(201, 127, 22, 0.15); }
.argument p { font-size: 0.99rem; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final {
  background:
    linear-gradient(120deg, rgba(10, 75, 72, 0.93) 0%, rgba(20, 58, 110, 0.90) 100%),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--trait-clair) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--trait-clair) 39px 40px),
    var(--teal-fonce);
  color: var(--blanc);
  text-align: center;
}
.cta-final h2 { color: var(--blanc); }
.cta-final p { color: rgba(255, 255, 255, 0.88); max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-final .eyebrow { color: #8FD6D2; justify-content: center; }
.cta-final .eyebrow::before { background: var(--cuivre); }
.cta-final__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.cta-final__coord {
  margin-top: 26px;
  font-family: var(--police-plan);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
}
.cta-final__coord a { color: var(--blanc); text-decoration: underline; }

/* =========================================================
   PAGE FORMATIONS
   ========================================================= */
.hero--formations .conteneur { padding: 72px 24px 64px; max-width: 1020px; }
.hero--formations h1 { margin-bottom: 0.4em; }
.hero--formations .hero__texte { font-size: 1.1rem; }
.hero--formations .hero__badges { margin-top: 22px; }

.grille-formations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 820px) { .grille-formations { grid-template-columns: 1fr; } }

.fcarte {
  --accent: var(--teal);
  --accent-pale: var(--teal-pale);
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--accent);
  border-radius: var(--rayon);
  padding: 24px 26px 22px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.fcarte:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.fcarte__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fcarte__badge {
  font-family: var(--police-plan);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.fcarte__badge--duree { background: var(--accent); color: var(--blanc); }
.fcarte h3 { margin-bottom: 8px; }
.fcarte__objectif { font-size: 0.97rem; }
.fcarte__public { font-size: 0.88rem; color: var(--gris-texte); margin-bottom: 14px; }
.fcarte__details { margin-bottom: 16px; }
.fcarte__details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--accent);
  list-style: none;
}
.fcarte__details summary::-webkit-details-marker { display: none; }
.fcarte__details summary::after { content: " +"; }
.fcarte__details[open] summary::after { content: " −"; }
.fcarte__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.fcarte__themes li {
  font-size: 0.82rem;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--accent-pale);
  color: var(--encre);
}
.fcarte__cta {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}
.fcarte__cta:hover { color: var(--accent); }
.fcarte__cta::after { content: " →"; }

/* =========================================================
   PAGES ET ARTICLES
   ========================================================= */
.entete-page {
  background: var(--calque);
  border-bottom: 1px solid var(--trait);
  padding: 58px 0 44px;
}
.entete-page h1 { margin-bottom: 0; }

/* En-tête décoré : grille de plan, lavis coloré, motif maquette */
.entete-page--deco {
  --page-accent: var(--teal);
  --page-accent-pale: var(--teal-pale);
  background:
    radial-gradient(480px 320px at 85% 20%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 70%),
    radial-gradient(420px 300px at 8% 90%, rgba(201, 127, 22, 0.07), transparent 70%),
    linear-gradient(rgba(244, 247, 246, 0.85), rgba(244, 247, 246, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--trait) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--trait) 39px 40px),
    var(--calque);
  border-bottom: 2px solid var(--page-accent);
}
.entete-page--deco .eyebrow { color: var(--page-accent); }
.entete-page__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.entete-page__motif { width: 190px; flex: none; overflow: visible; }
.entete-page__motif .motif__calque { animation: bv-flotte 7s ease-in-out infinite; }
.entete-page__motif .motif__calque:nth-of-type(2) { animation-delay: 1.2s; }
.entete-page__motif .motif__calque:nth-of-type(3) { animation-delay: 2.4s; }
@media (max-width: 700px) { .entete-page__motif { display: none; } }

/* Bloc de téléchargement de l'outil hotline */
.telechargement-hotline { padding: 0 0 80px; background: var(--blanc); }
.telechargement-hotline__carte {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--page-accent-pale, var(--teal-pale));
  border: 1px solid var(--page-accent, var(--teal));
  border-left: 4px solid var(--page-accent, var(--teal));
  border-radius: var(--rayon);
  padding: 28px 30px;
}
.telechargement-hotline__icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--page-accent, var(--teal));
  color: var(--blanc);
}
.telechargement-hotline__icone svg { width: 26px; height: 26px; }
.telechargement-hotline__carte h2 { margin: 0 0 8px; }
.telechargement-hotline__carte .btn { margin-top: 6px; }
.telechargement-hotline__note {
  font-family: var(--police-plan);
  font-size: 0.78rem;
  color: var(--gris-texte);
  margin: 12px 0 0;
}
@media (max-width: 620px) { .telechargement-hotline__carte { flex-direction: column; } }

/* Contenu des pages : rythme et couleur */
.contenu-page { padding: 56px 0 80px; }
.contenu-page--deco {
  --page-accent: var(--teal);
  --page-accent-pale: var(--teal-pale);
  background:
    radial-gradient(600px 380px at 100% 0%, color-mix(in srgb, var(--page-accent) 5%, transparent), transparent 70%),
    var(--blanc);
}
.contenu-page .conteneur--etroit { max-width: 780px; }
.contenu-page h2 { margin-top: 1.7em; display: flex; align-items: baseline; gap: 12px; }
.contenu-page--deco h2::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border: 2px solid var(--page-accent);
  background: color-mix(in srgb, var(--page-accent) 16%, transparent);
  transform: rotate(45deg);
  position: relative;
  top: -2px;
}
.contenu-page--deco h3 { color: var(--encre); margin-top: 1.4em; }
.contenu-page--deco h3::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border: 2px solid var(--page-accent);
  transform: rotate(45deg);
  margin-right: 10px;
  position: relative;
  top: -1px;
}
.contenu-page--deco a:not(.btn) {
  color: var(--page-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--page-accent) 40%, transparent);
  text-underline-offset: 3px;
}
.contenu-page--deco ul { list-style: none; padding-left: 0.2em; }
.contenu-page--deco ul > li {
  padding-left: 1.35em;
  position: relative;
}
.contenu-page--deco ul > li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.52em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--page-accent);
  transform: rotate(45deg);
}
.contenu-page--deco hr {
  border: none;
  border-top: 1.5px dashed var(--trait);
  margin: 2.2em 0;
}
.contenu-page--deco img {
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--page-accent) 12%, transparent);
}
.contenu-page--deco blockquote { border-left-color: var(--page-accent); }
.contenu-page--deco table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.contenu-page--deco th {
  font-family: var(--police-plan);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--page-accent);
  border-bottom: 2px solid var(--page-accent);
  padding: 10px 12px;
}
.contenu-page--deco td { border-bottom: 1px solid var(--trait); padding: 10px 12px; }
.contenu-page ul, .contenu-page ol { margin-bottom: 1.2em; }
.contenu-page li { margin-bottom: 0.45em; }
.contenu-page blockquote {
  border-left: 3px solid var(--teal);
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  color: var(--encre);
  font-style: italic;
}
.contenu-page table { border-collapse: collapse; width: 100%; margin-bottom: 1.4em; }
.contenu-page th, .contenu-page td { border: 1px solid var(--trait); padding: 10px 12px; text-align: left; }
.contenu-page th { background: var(--calque); font-family: var(--police-titre); font-size: 0.92rem; }

.liste-articles article {
  border-bottom: 1px solid var(--trait);
  padding: 28px 0;
}
.liste-articles h2 { font-size: 1.35rem; margin-bottom: 8px; }
.meta-article {
  font-family: var(--police-plan);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gris-texte);
  margin-bottom: 10px;
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-footer {
  background: var(--encre);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.92); }
.site-footer a:hover { color: #8FD6D2; }
.site-footer__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding: 58px 0 40px;
}
@media (max-width: 760px) { .site-footer__grille { grid-template-columns: 1fr; gap: 30px; } }
.site-footer h4 {
  color: var(--blanc);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer__legal {
  border-top: 1px solid var(--trait-clair);
  padding: 20px 0 26px;
  font-family: var(--police-plan);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
.site-footer__legal a { color: rgba(255, 255, 255, 0.75); }

/* =========================================================
   ACCESSIBILITÉ / DIVERS
   ========================================================= */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
}
.aller-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal);
  color: var(--blanc);
  padding: 10px 18px;
  z-index: 100;
}
.aller-contenu:focus { left: 12px; top: 12px; }