/* =============================================================
   CYRVAL — maquette de référence
   Studio Toinon pour SEDICOM — juillet 2026
   Feuille de styles unique, partagée par toutes les pages.
   Ordre : police, tokens, base, utilitaires, composants,
   sections, pied de page, responsive.
   ============================================================= */

/* ---------- 1. Police ---------- */

/* Lato n'existe qu'en graisses discretes : 400, 700 et 900 couvrent la
   maquette. Les 500 (medium) rendus par le navigateur retombent sur le 400,
   les 600 (semibold) sur le 700. Le 900 (black) est reserve aux capitales. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-latin-900.woff2') format('woff2');
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Couleurs de marque */
  --bleu: #00374D;
  --bleu-appui: #002A3B;
  --or: #C69970;
  --sable: #F4EAE1;

  /* Extension web */
  --encre: #1C2B33;
  --gris: #5A6C74;       /* 4,6:1 sur sable, AA en petit gras ; #5C6E76 tombait à 4,49 */
  --gris-clair: #8FA0A7;
  --clair-sur-fonce: #C9D3D6;
  --bord: #DDE4E5;
  --blanc: #FFFFFF;
  --fond: #F7F9FA;

  /* Typographie */
  --font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --t-hero: 56px;
  --t-hero-page: 44px;
  --t-section: 40px;
  --t-carte: 24px;

  /* Grille */
  --largeur-max: 1440px;
  --marge-laterale: 48px;

  /* Décroché : l'onglet qui plonge depuis l'arête haute.
     Les rayons se déduisent de la hauteur du bloc, voir 5.1. */
  --h-onglet: 56px;     /* profondeur de l'onglet de section */
  --r-arrondi: 26px;    /* arrondi des visuels et des blocs */
}

/* ---------- 3. Base ---------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--bleu); }
a:hover { color: var(--bleu-appui); }

h1, h2, h3, p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; }

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

/* ---------- 4. Utilitaires ---------- */

.wrap {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 130px var(--marge-laterale);
}

.wrap--court { padding: 120px var(--marge-laterale); }
.wrap--serre { padding: 110px var(--marge-laterale); }

.section--blanc { background: var(--blanc); }
.section--fond { background: var(--fond); }
.section--sable { background: var(--sable); }
.section--bleu { background: var(--bleu); }

/* Toutes les sections servent d'ancrage à leur décroché */
main > section { position: relative; }

.surtitre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font: 900 13px/1.2 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

.surtitre--centre { justify-content: center; }
.surtitre--clair { color: var(--sable); }
.surtitre--doux { color: var(--clair-sur-fonce); }

.surtitre::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
}

.surtitre--trait::before {
  width: 22px; height: 1.5px;
  border-radius: 0;
}

.titre-section {
  font: 600 var(--t-section) / 1.15 var(--font);
  color: var(--bleu);
}

.titre-section--clair { color: var(--blanc); }

.chapo {
  font: 400 24px/1.4 var(--font);
  color: var(--gris);
  max-width: 640px;
}

.chapo--clair { color: var(--sable); }

.texte {
  font: 400 18px/1.7 var(--font);
  color: var(--encre);
}

.texte--doux { color: var(--clair-sur-fonce); }

.entete-bloc {
  text-align: center;
  margin-bottom: 64px;
}

.entete-bloc .chapo { margin: 20px auto 0; }

.filet-or {
  width: 44px; height: 2px;
  background: var(--or);
  flex-shrink: 0;
}

.centre { text-align: center; }

/* Apparition au défilement (activée seulement si JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.js .reveal.est-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .etape,
  .js .domaine,
  .js .parcours__etape { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- 5. Composants ---------- */

/* 5.1 Décroché

   Le motif de la maquette : un onglet collé à l'arête haute d'un bloc,
   dans la couleur de ce qui précède, raccordé de chaque côté par un
   congé concave qui étale la couleur le long de l'arête. Le bandeau de
   navigation plonge dans le hero, chaque section plonge dans la
   précédente. Les deux congés sont les pseudo-éléments, posés à
   l'extérieur de l'onglet, tangents à l'arête. */

/* Géométrie. En vertical, le congé concave et l'arrondi du bas se partagent
   toute la hauteur du bloc (0,42 + 0,58 = 1) : les deux courbes sont donc
   tangentes, sans segment droit entre elles, le flanc est une seule vague
   continue. Toute autre répartition laisse une goutte au-dessus du coin.

   En horizontal, les deux arcs sont étirés du même facteur : ils restent
   tangents, mais le flanc s'allonge et s'aplatit. --etirement est le seul
   réglage : 1 donne des arcs de cercle, au-delà des arcs d'ellipse de plus
   en plus couchés. Il coûte de la largeur, le bandeau déborde de
   --rx-conge de chaque côté. Essayé à 1,6, écarté : la courbe couchée ne
   tenait pas. On reste sur le cercle. */
.nav,
.decroche {
  --etirement: 1;
  --ry-conge: calc(var(--h-bloc) * .42);
  --rx-conge: calc(var(--ry-conge) * var(--etirement));
  --ry-bas: calc(var(--h-bloc) * .58);
  --rx-bas: calc(var(--ry-bas) * var(--etirement));
  position: relative;
  border-radius: 0 0 var(--rx-bas) var(--rx-bas) / 0 0 var(--ry-bas) var(--ry-bas);
}

/* Le congé recouvre l'onglet d'1 px. Deux bords anticrénelés posés côte à côte
   laissent un liseré clair, très visible depuis que l'onglet est centré et
   tombe donc souvent sur un demi-pixel. Ce pixel de recouvrement est en dehors
   de la forme du dégradé, donc opaque : la courbe n'est pas modifiée, seul le
   raccord est franc. */
.nav::before, .nav::after,
.decroche::before, .decroche::after {
  content: '';
  position: absolute;
  top: 0;
  width: calc(var(--rx-conge) + 1px);
  height: var(--ry-conge);
  pointer-events: none;
}

.nav::before,
.decroche::before { left: calc(-1 * var(--rx-conge)); }

.nav::after,
.decroche::after { right: calc(-1 * var(--rx-conge)); }

.nav::before {
  background: radial-gradient(var(--rx-conge) var(--ry-conge) at 0 100%,
    transparent 99.5%, var(--blanc) 100%);
}

.nav::after {
  background: radial-gradient(var(--rx-conge) var(--ry-conge) at 100% 100%,
    transparent 99.5%, var(--blanc) 100%);
}

.decroche::before {
  background: radial-gradient(var(--rx-conge) var(--ry-conge) at 0 100%,
    transparent 99.5%, var(--precedent) 100%);
}

.decroche::after {
  background: radial-gradient(var(--rx-conge) var(--ry-conge) at 100% 100%,
    transparent 99.5%, var(--precedent) 100%);
}

/* L'onglet de section porte le surtitre : le motif sert à quelque chose */
.decroche {
  --h-bloc: var(--h-onglet);
  position: absolute;
  top: 0;
  /* centré sur la page, comme le bandeau de navigation */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--h-onglet);
  padding: 0 38px 6px;
  margin: 0;
  background: var(--precedent);
  font: 900 13px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.decroche__point {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
}

/* Onglet posé sur une couleur foncée */
.decroche--clair { color: var(--sable); }

/* Variante d'angle : le même décroché mordu dans le coin haut gauche d'une
   image, pour y loger le thème de l'article. Deux congés là aussi, mais l'un
   file le long de l'arête haute et l'autre le long de l'arête gauche. Le coin
   extérieur reprend l'arrondi de l'image pour que le contour reste continu.
   La tangence joue sur le flanc droit : congé + arrondi = hauteur du bloc.

   L'étiquette déborde d'1 px en haut et à gauche, avec 1 px de rayon en plus :
   son arc de coin garde le même centre que celui de l'image et passe donc
   juste à l'extérieur. Sans ce décalage, les deux arcs se superposent au pixel
   près et l'anticrénelage laisse voir l'image sous le blanc. Le débord se fait
   sur le fond de la section, de la même couleur : invisible. */
.decroche--coin {
  position: absolute;
  top: -1px;
  left: -1px;
  /* .decroche centre l'onglet sur la page avec left:50% + translateX(-50%).
     La variante d'angle se cale sur le coin de l'image : sans cette remise à
     zéro, le translate subsiste et sort l'étiquette d'une demi-largeur hors
     du visuel, vers la gauche. */
  transform: none;
  z-index: 2;
  height: calc(var(--h-bloc) + 1px);
  padding: 1px 24px 0 23px;
  border-radius: calc(var(--r-arrondi) + 1px) 0 var(--ry-bas) 0;
}

/* Congé du bas : même recouvrement d'1 px, mais vers le haut. Le bord bas du
   bloc ne bouge pas, donc le centre du dégradé et la courbe non plus. */
.decroche--coin::before {
  left: 0;
  top: calc(100% - 1px);
  width: var(--rx-conge);
  height: calc(var(--ry-conge) + 1px);
  background: radial-gradient(var(--rx-conge) var(--ry-conge) at 100% 100%,
    transparent 99.5%, var(--precedent) 100%);
}

/* 5.2 Bouton */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 6px 4px 26px;
  height: 50px;
  border-radius: 999px;
  font: 500 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--bleu);
  color: var(--blanc);
  border: 1.5px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.btn__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 16px;
  background: rgba(255, 255, 255, .2);
  color: inherit;
  flex-shrink: 0;
}

.btn:hover { background: var(--bleu-appui); color: var(--blanc); }

.btn--secondaire {
  background: transparent;
  color: var(--bleu);
  border-color: var(--bleu);
}

.btn--secondaire .btn__fleche { background: rgba(0, 55, 77, .08); }
.btn--secondaire:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.btn--secondaire:hover .btn__fleche { background: rgba(255, 255, 255, .2); }

.btn--sur-fonce {
  background: var(--blanc);
  color: var(--bleu);
}

.btn--sur-fonce .btn__fleche { background: rgba(0, 55, 77, .12); }
.btn--sur-fonce:hover { background: var(--sable); color: var(--bleu); }

/* 5.3 Média (image ou bloc de remplacement) */

.media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sable);
}

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

.media--vide {
  background: repeating-linear-gradient(135deg, #F4EAE1, #F4EAE1 12px, #ECE0D2 12px, #ECE0D2 24px);
}

.media--vide .media__legende {
  font: 400 13px/1.5 'SFMono-Regular', Consolas, Menlo, monospace;
  color: #8A7256;
  text-align: center;
  letter-spacing: .02em;
  padding: 16px;
  max-width: 78%;
}

/* Découpes issues du logo */
.media--arche { border-radius: 50% 50% 0 0; }
.media--biseau { border-radius: 0 88px 0 0; }
.media--arrondi { border-radius: var(--r-arrondi); }

/* 5.4 Carte d'information */

.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-arrondi);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.carte__titre {
  font: 600 var(--t-carte) / 1.25 var(--font);
  color: var(--bleu);
}

.carte__texte {
  font: 400 18px/1.7 var(--font);
  color: var(--encre);
  flex: 1;
}

.carte .btn { align-self: flex-start; }

/* 5.5 Article

   Pas de carte : le visuel arrondi porte le bloc, le texte se pose dessous
   à même le fond de la section. L'étiquette de thème est mordue dans le coin
   haut gauche du visuel (voir .decroche--coin). */

.article__media {
  --precedent: var(--blanc);   /* le fond qui entoure l'image */
  --h-bloc: 44px;              /* hauteur de l'étiquette de thème */
  position: relative;
}

.article__corps { padding-top: 22px; }

.article__titre {
  font: 600 21px/1.35 var(--font);
  color: var(--bleu);
  margin-bottom: 10px;
}

.article__resume {
  font: 400 15px/1.6 var(--font);
  color: var(--gris);
  margin-bottom: 18px;
}

.lien-fleche {
  display: inline-block;
  font: 500 16px/1 var(--font);
  color: var(--bleu);
  text-decoration: none;
  border-bottom: 1px solid var(--or);
  padding-bottom: 4px;
  transition: border-color .25s ease;
}

.lien-fleche:hover { border-bottom-color: var(--bleu); }

/* ---------- 6. En-tête ---------- */

.entete {
  --pad-entete: 13px;   /* marge au-dessus et en dessous de la ligne */
  /* Deux hauteurs distinctes depuis que le viewBox du logo est resserre.
     Avant, le viewBox portait 44 % de vide et une seule variable faisait les
     deux : la ligne etait haute, le dessin petit. Les separer permet de
     grossir le dessin sans toucher a la hauteur du bandeau. */
  --h-ligne: 66px;      /* hauteur de la ligne, pilote le bandeau */
  --h-logo: 58px;       /* hauteur du dessin lui-meme */
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}

.entete__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--pad-entete) var(--marge-laterale);
  transition: padding .25s ease;
}

.entete__logo {
  display: flex;
  align-items: center;
  height: var(--h-ligne);   /* la ligne garde sa hauteur, le dessin s'y centre */
  flex-shrink: 0;
  color: var(--blanc);
  text-decoration: none;
  transform-origin: left center;
  transition: transform .25s ease, color .3s ease;
}

.entete__logo svg {
  display: block;
  height: var(--h-logo);
  width: calc(var(--h-logo) * 3.5522);   /* rapport exact du dessin, 532.44 / 149.89 */
}

/* État défilé */
.entete.est-defilee {
  --pad-entete: 9px;
  background: var(--blanc);
  box-shadow: 0 1px 0 var(--bord), 0 8px 24px rgba(0, 55, 77, .06);
}

.entete.est-defilee .entete__logo { color: var(--bleu); transform: scale(.82); }

/* Navigation : le décroché de l'accueil, collé au bord haut de la page.
   Le retrait négatif annule la marge de l'en-tête pour que l'onglet
   parte de l'arête ; le rembourrage haut ramène les liens sur la ligne
   du logo. Une seule formule pour les deux états : quand l'en-tête
   blanchit au défilement, l'onglet blanc s'y fond sans raccord visible. */
.nav {
  --h-bloc: calc(var(--pad-entete) * 2 + var(--h-ligne));
  display: flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
  align-self: flex-start;
  height: var(--h-bloc);
  margin: calc(-1 * var(--pad-entete)) var(--rx-conge) 0;
  padding: 0 36px;
  background: var(--blanc);
  transition: height .25s ease, margin .25s ease;
}

/* Même traitement que les décrochés : capitales espacées. La pastille dorée
   du survol est posée hors flux, dans l'espace entre deux liens : elle
   apparaît sans décaler la navigation. */
.nav a {
  position: relative;
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
  transition: color .2s ease;
}

.nav a::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--or);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
}

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

.nav a:hover::before,
.nav a.est-active::before { opacity: 1; transform: scale(1); }

/* Rubrique à sous-pages : libellé non cliquable + menu déroulant */
.nav-groupe { position: relative; display: flex; align-items: center; }

.nav-groupe__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre);
  transition: color .2s ease;
}

.nav-groupe__label::after {
  content: '';
  width: 5px; height: 5px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-groupe:hover .nav-groupe__label,
.nav-groupe:focus-within .nav-groupe__label,
.nav-groupe__label.est-active { color: var(--bleu); }

.nav-groupe:hover .nav-groupe__label::after,
.nav-groupe:focus-within .nav-groupe__label::after { transform: rotate(225deg); opacity: 1; }

/* La pastille dorée de la rubrique active, comme les liens simples */
.nav-groupe__label.est-active::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--or);
}

.nav-groupe__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 210px;
  transform: translateX(-50%) translateY(10px);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 55, 77, .14);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 20;
}

.nav-groupe:hover .nav-groupe__menu,
.nav-groupe:focus-within .nav-groupe__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}

/* Les entrées du déroulé n'héritent pas du style capitales/pastille de .nav a */
.nav-groupe__menu a {
  position: static;
  padding: 11px 14px;
  border-radius: 9px;
  font: 700 13px/1.3 var(--font);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.nav-groupe__menu a::before { display: none; }

.nav-groupe__menu a:hover,
.nav-groupe__menu a.est-active { background: var(--fond); color: var(--bleu); }

.entete__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Les trois pastilles de l'en-tête (accès client, LinkedIn, menu) sont en
   verre dépoli sur la photo du hero. Le flou tombe dès que l'en-tête blanchit :
   il n'y a plus rien à flouter derrière, et il coûterait une couche de
   composition pour rien. */
.lien-acces {
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.entete.est-defilee .lien-acces {
  color: var(--bleu);
  border-color: var(--bord);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lien-linkedin {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--font);
  text-decoration: none;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .15);
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.entete.est-defilee .lien-linkedin {
  background: var(--bleu);
  color: var(--blanc);
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Bouton menu (tablette et mobile) */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .3s ease, border-color .3s ease;
}

.burger__trait {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: var(--blanc);
  transition: background .3s ease, transform .3s ease;
}

.burger__trait::before,
.burger__trait::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: inherit;
  transition: transform .3s ease, opacity .2s ease;
}

.burger__trait::before { top: -6px; }
.burger__trait::after { top: 6px; }

.entete.est-defilee .burger {
  border-color: var(--bord);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.entete.est-defilee .burger__trait { background: var(--bleu); }

.entete.menu-ouvert .burger {
  border-color: var(--bord);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.entete.menu-ouvert .burger__trait { background: transparent; }
.entete.menu-ouvert .burger__trait::before { transform: translateY(6px) rotate(45deg); background: var(--bleu); }
.entete.menu-ouvert .burger__trait::after { transform: translateY(-6px) rotate(-45deg); background: var(--bleu); }

/* Panneau de menu déroulant */
.menu-mobile {
  display: none;
  background: var(--blanc);
  border-top: 1px solid var(--bord);
  box-shadow: 0 16px 32px rgba(0, 55, 77, .08);
}

.menu-mobile__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 24px var(--marge-laterale) 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-mobile a {
  font: 400 18px/1 var(--font);
  color: var(--encre);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--bord);
}

.menu-mobile a.est-active { color: var(--bleu); font-weight: 500; }

.menu-mobile__rubrique {
  margin: 0;
  padding: 20px 0 6px;
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.menu-mobile a.menu-mobile__sous { padding-left: 16px; font-size: 16px; }

.menu-mobile__pied {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
}

.menu-mobile__pied .lien-acces,
.menu-mobile__pied .lien-linkedin {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.menu-mobile__pied .lien-acces {
  color: var(--bleu);
  border-color: var(--bord);
  background: transparent;
}

.menu-mobile__pied .lien-linkedin {
  background: var(--bleu);
  color: var(--blanc);
  border-color: transparent;
}

/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  overflow: hidden;
}

.hero__fond { position: absolute; inset: 0; }

.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(0, 55, 77, .92) 0%,
    rgba(0, 55, 77, .72) 42%,
    rgba(0, 55, 77, .28) 75%,
    rgba(0, 55, 77, .08) 100%);
}

.hero__contenu {
  position: relative;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 228px var(--marge-laterale) 96px;
}

.hero__titre {
  font: 600 var(--t-hero) / 1.1 var(--font);
  color: var(--blanc);
  max-width: 820px;
  margin-bottom: 44px;
}

.souligne-or {
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

/* Hero de page intérieure : aplat bleu, sans motif */
.hero-page {
  position: relative;
  overflow: hidden;
  background: var(--bleu);
}

.hero-page__contenu {
  position: relative;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 224px var(--marge-laterale) 96px;
}

.hero-page__titre {
  font: 600 var(--t-hero-page) / 1.15 var(--font);
  color: var(--blanc);
  max-width: 820px;
}

.hero-page__titre .souligne-or { text-underline-offset: 6px; }

/* ---------- 8. Sections d'accueil ---------- */

/* 8.1 Manifeste */

.manifeste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.manifeste__texte { max-width: 520px; }

.manifeste__phrase {
  font: 400 32px/1.4 var(--font);
  color: var(--bleu);
  margin-bottom: 32px;
}

.manifeste__intro {
  font: 400 18px/1.7 var(--font);
  color: var(--encre);
  max-width: 44ch;
  margin-bottom: 40px;
}

.manifeste__visuel {
  position: relative;
  height: 520px;
}

/* 8.2 Vos besoins */

.grille-deux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.grille-trois {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* 8.3 Les deux pôles */

.poles {
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}

.poles__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pole { padding: 56px 64px 56px 0; }

.pole:first-child { border-right: 1px solid var(--bord); }
.pole:last-child { padding: 56px 0 56px 64px; }

.pole__label {
  font: 900 13px/1.2 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

.pole .filet-or { margin: 20px 0 24px; }

.pole__texte {
  font: 400 18px/1.7 var(--font);
  color: var(--encre);
  margin-bottom: 32px;
}

/* 8.4 Méthode */

.methode__titre { margin-bottom: 88px; }

.methode__etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  margin-bottom: 72px;
}

.methode__rail,
.methode__progression {
  position: absolute;
  top: 23px;
  left: 0;
  height: 2px;
}

.methode__rail { right: 0; background: rgba(244, 234, 225, .2); }

.methode__progression {
  width: 0;
  background: var(--or);
  transition: width .6s ease;
}

.etape { position: relative; }

.js .etape {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}

.js .etape.est-visible { opacity: 1; transform: translateY(0); }

.etape__numero {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bleu);
  border: 2px solid var(--or);
  color: var(--sable);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 var(--font);
  margin-bottom: 24px;
}

.etape__titre {
  font: 600 18px/1.3 var(--font);
  color: var(--blanc);
  margin-bottom: 8px;
}

.etape__texte {
  font: 400 15px/1.6 var(--font);
  color: var(--clair-sur-fonce);
}

/* 8.5 Actualités */

.actus__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Grille dissymétrique : l'article à la une occupe la colonne large, les deux
   brèves s'empilent à côté. Les brèves s'étirent pour que les deux colonnes
   se terminent à la même ligne : les trois articles forment un seul bloc. */
.actus__grille {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.article--une .article__media { aspect-ratio: 16 / 9; }
.article--une .article__corps { padding-top: 28px; }

.article--une .article__titre {
  font: 600 var(--t-carte) / 1.3 var(--font);
  margin-bottom: 14px;
}

.article__auteur {
  font: 400 14px/1.6 var(--font);
  color: var(--gris);
  margin-bottom: 10px;
}

/* La gouttière porte tout l'écart entre les deux brèves, filet compris. Voir
   le filet plus bas : le sortir du modèle de boîte est ce qui garantit que les
   deux brèves ont exactement la même hauteur. */
.actus__breves {
  display: flex;
  flex-direction: column;
  gap: 60px;
  height: 100%;
}

.article--breve {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 24px;
  align-items: stretch;
  flex: 1;
  position: relative;
}

/* Pas de proportion imposée : le visuel prend la hauteur de la brève, c'est ce
   qui aligne le bas des deux colonnes. Il est sorti du flux pour ne pas peser
   dans le calcul de cette hauteur, sinon la proportion de la photo source
   commanderait la grille au lieu de l'article à la une. */
.article--breve .article__media {
  --h-bloc: 34px;
  --r-arrondi: 20px;
}

.article--breve .media {
  position: absolute;
  inset: 0;
}

.article--breve .article__corps { align-self: center; }

/* Le 1 px de padding haut compense le débord de l'étiquette, comme sur
   l'article à la une : sans lui, le libellé remonte d'un demi-pixel. */
.article--breve .decroche--coin {
  padding: 1px 17px 0 15px;
  font-size: 11px;
}

.article--breve .article__corps { padding-top: 0; }
.article--breve .article__titre { font-size: 18px; }

/* Le filet se trace au milieu de la gouttière, hors du flux. Il était posé en
   border-top + padding-top sur la seconde brève : en box-sizing border-box et
   avec flex:1, les deux brèves recevaient bien la même hauteur de boîte, mais
   la seconde perdait 31 px de hauteur de contenu. Sa vignette, qui s'étire sur
   la hauteur de la ligne, était donc 31 px plus courte que la première. */
.actus__breves .article--breve + .article--breve::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  border-top: 1px solid var(--bord);
}

/* ---------- 9. Sections Pôle Conseil ---------- */

.accompagnement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}

.accompagnement__texte { max-width: 560px; }
.accompagnement__texte .titre-section { display: block; margin-bottom: 32px; }
.accompagnement__texte .texte + .texte { margin-top: 28px; }

/* le visuel se cale sur la hauteur du texte, avec un plancher : sinon il
   dépasse de très haut dès qu'on retire un paragraphe */
.accompagnement__visuel { min-height: 360px; }

/* Variante verticale (page Notre équipe) : la photo est un portrait 3/4,
   c'est elle qui donne la hauteur et le texte se centre en face. */
.accompagnement--portrait { align-items: center; }

.accompagnement--portrait .accompagnement__visuel {
  min-height: 0;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  justify-self: center;
}

/* Méthode de la page Pôle Conseil : titre à gauche, texte à droite */
.methode-page {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 72px;
  align-items: start;
}

.methode-page__titre .titre-section { display: block; margin-bottom: 28px; }

.domaines__entete {
  max-width: 720px;
  margin: 0 auto 88px;
  text-align: center;
}

.domaines__corps {
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: 56px;
  max-width: 960px;
  margin: 0 auto;
}

.domaines__rail {
  position: relative;
  width: 2px;
  background: rgba(244, 234, 225, .2);
  justify-self: center;
}

.domaines__progression {
  position: absolute;
  top: 0; left: 0;
  width: 2px;
  height: 0;
  background: var(--or);
  transition: height .6s ease;
}

.domaines__liste {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.js .domaine {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

.js .domaine.est-visible { opacity: 1; transform: translateY(0); }

.domaine__numero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  font: 600 13px/1 var(--font);
  color: var(--or);
}

.domaine__numero::after {
  content: '';
  width: 32px; height: 1px;
  background: rgba(244, 234, 225, .4);
}

.domaine__titre {
  font: 600 var(--t-carte) / 1.25 var(--font);
  color: var(--blanc);
  margin-bottom: 16px;
}

.domaine__texte { max-width: 64ch; }

.transition-bloc {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px var(--marge-laterale);
  text-align: center;
}

.transition-bloc .texte {
  text-align: left;
  margin-bottom: 48px;
}

.transition-bloc .titre-section {
  display: block;
  margin-bottom: 40px;
}

/* ---------- 10. Contact ---------- */

.formulaire {
  max-width: 760px;
  margin: 0 auto;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-arrondi);
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.champ__label,
.formulaire__legende {
  font: 900 13px/1.2 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.formulaire__legende { margin-bottom: 12px; }

.formulaire input[type="text"],
.formulaire textarea {
  border: 1px solid var(--bord);
  border-radius: 12px;   /* des champs carrés dans un bloc arrondi jurent */
  padding: 14px 16px;
  font: 400 16px/1.4 var(--font);
  color: var(--encre);
  background: var(--fond);
}

.formulaire textarea { line-height: 1.7; resize: vertical; }

.formulaire input[type="text"]:focus,
.formulaire textarea:focus {
  outline: 2px solid var(--or);
  outline-offset: -1px;
}

.choix {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.choix label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 16px/1 var(--font);
  color: var(--encre);
}

.champs-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* L'astérisque prend l'or de la marque : repérable sans crier. */
.champ__requis { color: var(--or); }

/* Les deux lignes de service se rapprochent de ce qu'elles commentent :
   le gap de 28px du formulaire les détacherait trop.
   ⚠️ --gris et pas --gris-clair : ce dernier ne donne que 2,7:1 sur blanc,
   sous le seuil AA. Une mention légale illisible ne vaut pas mieux qu'absente. */
.formulaire__obligatoires {
  margin-top: -14px;
  font: 400 14px/1.4 var(--font);
  color: var(--gris);
}

.formulaire__mentions {
  margin-top: -10px;
  font: 400 13px/1.6 var(--font);
  color: var(--gris);
}

.formulaire__mentions a {
  color: var(--bleu);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.formulaire__mentions a:hover { color: var(--bleu); }

/* ---------- 11. Signature ---------- */

.signature {
  background: var(--blanc);
  border-top: 1px solid var(--bord);
}

.signature__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 64px var(--marge-laterale);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.signature__inner svg {
  width: 240px; height: 67.56px;
  color: var(--bleu);
  flex-shrink: 0;
}

.signature__phrase {
  font: 400 24px/1.4 var(--font);
  color: var(--bleu);
  max-width: 520px;
  text-align: right;
}

/* ---------- 12. Pied de page ---------- */

.pied { background: var(--bleu); }

.pied__inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 80px var(--marge-laterale) 40px;
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(244, 234, 225, .18);
}

/* Agrandi pour que la baseline se lise. C'est la largeur qui commande :
   le viewBox du logo porte 44 % de vide en hauteur, jamais en largeur, donc
   la hauteur de la boite ne sert qu'a loger ce vide. La marge basse est
   reduite d'autant pour que l'ecart sous le dessin ne bouge pas. */
.pied__logo {
  width: 240px; height: 67.56px;
  color: var(--or);
  margin-bottom: 32px;
  display: block;
}

.pied p {
  font: 400 15px/1.6 var(--font);
  color: var(--sable);
}

.pied__titre {
  font: 900 13px/1.2 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 20px;
}

.pied__liens {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pied__liens a {
  font: 400 15px/1.6 var(--font);
  color: var(--sable);
  text-decoration: none;
  transition: color .2s ease;
}

.pied__liens a:hover { color: var(--or); }

.pied__reseaux {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.pied__reseaux .lien-linkedin {
  width: 38px; height: 38px;
  font-size: 13px;
  background: rgba(244, 234, 225, .12);
  color: var(--sable);
  border: 0;
}

.pied__reseaux .lien-linkedin:hover { background: var(--or); color: var(--bleu); }

.pied__bas {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.pied__bas span,
.pied__bas a {
  font: 400 13px/1.5 var(--font);
  color: var(--gris-clair);
  text-decoration: none;
}

.pied__bas a:hover { color: var(--sable); }

.pied__legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* Signature de conception. Les liens gardent le soulignement au survol, sinon
   rien ne dit qu'ils en sont : le pied retire le soulignement par défaut. */
.pied__conception { display: flex; gap: 6px; flex-wrap: wrap; }

.pied__conception a:hover { text-decoration: underline; }

/* =============================================================
   13. Actualités : liste (archive) et article (single)
   ============================================================= */

/* 13.1 Filtres par thème */

.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 56px;
}

.chip {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--blanc);
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.chip:hover { border-color: var(--bleu); color: var(--bleu); }
.chip.est-active { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }

/* 13.2 Grille d'archive : des articles de taille égale, trois par ligne.
   Même composant .article que l'accueil, mais le visuel prend un rapport
   fixe pour que toutes les cartes s'alignent. */

.actus-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
}

.actus-grille .article__media { aspect-ratio: 3 / 2; }
.actus-grille .article__corps { padding-top: 22px; }

/* 13.3 Pagination */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 72px;
}

.pagination a,
.pagination span {
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: 600 15px/1 var(--font);
  text-decoration: none;
  color: var(--gris);
  border: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.pagination a:hover { color: var(--bleu); border-color: var(--bord); }
.pagination .est-active { background: var(--bleu); color: var(--blanc); }
.pagination .pagination__fleche { color: var(--bleu); }
.pagination .est-desactive { color: var(--gris-clair); pointer-events: none; }

/* 13.4 En-tête d'article : le hero bleu porte le thème, la date et la durée */

.hero-page__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  font: 400 14px/1.5 var(--font);
  color: var(--clair-sur-fonce);
}

.hero-page__meta .puce-theme {
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bleu);
  background: var(--sable);
  padding: 8px 14px;
  border-radius: 999px;
}

.hero-page__meta .sep { opacity: .45; }

/* 13.5 Corps d'article : une colonne lisible, centrée */

.retour-actus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 44px;
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
  transition: color .2s ease;
}

.retour-actus:hover { color: var(--bleu); }

.article-colonne {
  max-width: 760px;
  margin: 0 auto;
}

.corps-article {
  max-width: 760px;
  margin: 0 auto;
}

.corps-article > * + * { margin-top: 28px; }

.corps-article .chapo {
  max-width: none;
  color: var(--bleu);
}

.corps-article p {
  font: 400 18px/1.75 var(--font);
  color: var(--encre);
}

.corps-article h2 {
  font: 600 26px/1.35 var(--font);
  color: var(--bleu);
  margin-top: 12px;
}

.corps-article ul {
  margin: 0;
  padding-left: 24px;
}

.corps-article li {
  font: 400 18px/1.75 var(--font);
  color: var(--encre);
}

.corps-article li + li { margin-top: 8px; }

.corps-article li::marker { color: var(--or); }

.corps-article blockquote {
  margin: 8px 0;
  padding-left: 28px;
  border-left: 3px solid var(--or);
  font: 400 24px/1.5 var(--font);
  color: var(--bleu);
}

.corps-article figure { margin: 8px 0; }

.corps-article figure img {
  display: block;
  width: 100%;
  border-radius: var(--r-arrondi);
}

.corps-article figcaption {
  margin-top: 12px;
  font: 400 14px/1.6 var(--font);
  color: var(--gris);
  text-align: center;
}

/* Partage, en bas de l'article */
.partage {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 760px;
  margin: 56px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--bord);
}

.partage__label {
  font: 900 12px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.partage__liens { display: flex; gap: 10px; }

.partage__liens a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--font);
  text-decoration: none;
  color: var(--bleu);
  background: var(--fond);
  border: 1px solid var(--bord);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.partage__liens a:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* =============================================================
   13bis. Pages intérieures : équipe, parcours, portails
   ============================================================= */

/* Équipe : cartes membres, photo ronde */
/* Fiches en bandeau horizontal : identité à gauche, biographie à droite.
   Les biographies fournies vont d'un à trois paragraphes ; en colonnes
   côte à côte l'écart sautait aux yeux, empilées en pleine largeur il ne
   se voit plus. */
.equipe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 72px;
  max-width: 980px;
  margin: 0 auto;
}

.membre {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}

.membre__identite { text-align: center; }

/* sans plafond, la biographie court sur ~100 caractères par ligne */
.membre__texte { max-width: 600px; }

.membre__photo {
  width: 176px; height: 176px;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sable);
}

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

.membre__nom { font: 600 var(--t-carte) / 1.2 var(--font); color: var(--bleu); }

.membre__fonction {
  margin: 8px 0 16px;
  font: 900 12px/1.2 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or);
}

.membre__bio {
  margin: 0;
  font: 400 16px/1.7 var(--font);
  color: var(--gris);
}

.membre__bio + .membre__bio { margin-top: 16px; }

/* Parcours vertical, animé au défilement (Notre méthode).
   Réutilise les hameçons JS data-sequence="verticale" / data-etape /
   data-progression : le filet doré central se remplit au scroll. */
.parcours {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.parcours__rail,
.parcours__progression {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}

.parcours__rail { bottom: 8px; background: var(--bord); }
.parcours__progression { height: 0; background: var(--or); transition: height .6s ease; }

.parcours__etape {
  position: relative;
  width: 50%;
  margin-bottom: 56px;
  padding: 0 52px;
}

.parcours__etape:last-child { margin-bottom: 0; }
.parcours__etape:nth-of-type(odd) { text-align: right; }
.parcours__etape:nth-of-type(even) { margin-left: 50%; text-align: left; }

.parcours__etape::before {
  content: '';
  position: absolute;
  top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blanc);
  border: 3px solid var(--or);
  z-index: 1;
}

.parcours__etape:nth-of-type(odd)::before { right: -9px; }
.parcours__etape:nth-of-type(even)::before { left: -9px; }

.js .parcours__etape {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

.js .parcours__etape.est-visible { opacity: 1; transform: translateY(0); }

.parcours__numero {
  font: 600 13px/1 var(--font);
  letter-spacing: .1em;
  color: var(--or);
  margin-bottom: 12px;
}

.parcours__titre { font: 600 var(--t-carte) / 1.2 var(--font); color: var(--bleu); margin-bottom: 10px; }
.parcours__lead { font: 400 18px/1.6 var(--font); color: var(--encre); margin-bottom: 10px; }
.parcours__texte { font: 400 15px/1.7 var(--font); color: var(--gris); }

/* Répertoire des portails clients (Accès client) */
.portails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.portail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-arrondi);
  text-decoration: none;
  color: var(--bleu);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.portail:hover {
  border-color: var(--bleu);
  box-shadow: 0 12px 28px rgba(0, 55, 77, .08);
  transform: translateY(-2px);
}

.portail__nom { font: 600 18px/1.3 var(--font); }

.portail__fleche {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fond);
  color: var(--bleu);
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
}

.portail:hover .portail__fleche { background: var(--bleu); color: var(--blanc); }

/* Accordéon (exemples d'investissement, pages Vos besoins) */
.accordeon {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.accordeon__item {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 16px;
}

.accordeon__tete {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: 600 18px/1.35 var(--font);
  color: var(--bleu);
  transition: color .2s ease;
}

.accordeon__tete:hover { color: var(--bleu-appui); }

/* Icône + / − construite en CSS */
.accordeon__icone {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}

.accordeon__icone::before,
.accordeon__icone::after {
  content: '';
  position: absolute;
  background: var(--or);
  transition: transform .25s ease, opacity .25s ease;
}

.accordeon__icone::before { top: 9px; left: 0; width: 20px; height: 2px; }
.accordeon__icone::after { left: 9px; top: 0; width: 2px; height: 20px; }

.accordeon__item.est-ouvert .accordeon__icone::after { transform: scaleY(0); opacity: 0; }

.accordeon__corps {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.accordeon__item.est-ouvert .accordeon__corps { max-height: 320px; }

.accordeon__corps-inner {
  padding: 0 26px 24px;
  font: 400 16px/1.7 var(--font);
  color: var(--gris);
}

/* =============================================================
   14. Responsive
   ============================================================= */

/* Sous 1350 px, la navigation complète et ses congés ne tiennent plus
   entre le logo et l'accès client : menu déplié. Seuil remonté de 1300 à
   1350 quand le logo est passé de 113 à 149 px de large : la pastille
   LinkedIn était repoussée hors champ juste au-dessus de l'ancien seuil. */
@media (max-width: 1400px) {
  .nav { display: none; }
  .entete__actions { display: none; }
  .burger { display: flex; }
  .entete.menu-ouvert { background: var(--blanc); box-shadow: 0 1px 0 var(--bord); }
  .entete.menu-ouvert .entete__logo { color: var(--bleu); }
  .entete.menu-ouvert .menu-mobile { display: block; }
}

/* Tablette */
@media (max-width: 1023px) {
  :root {
    --t-hero: 46px;
    --t-hero-page: 38px;
    --t-section: 34px;
    --marge-laterale: 32px;
    --h-onglet: 50px;
  }

  .wrap, .wrap--court, .wrap--serre { padding-top: 96px; padding-bottom: 96px; }
  .hero__contenu { padding-top: 200px; padding-bottom: 80px; }
  .hero-page__contenu { padding-top: 196px; padding-bottom: 80px; }
  .manifeste, .accompagnement { gap: 40px; }
  .methode-page { gap: 40px; }
  .manifeste__visuel { height: 420px; }
  .accompagnement__visuel { min-height: 320px; }
  .actus__grille { gap: 36px; }
  .article--breve { grid-template-columns: 42% 1fr; gap: 18px; }
  .article--breve .article__media { --h-bloc: 30px; --r-arrondi: 16px; }
  .formulaire { padding: 40px; }
  .carte { padding: 36px 32px; }
  .actus-grille { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .equipe { gap: 56px; }
  .membre { grid-template-columns: 168px 1fr; gap: 36px; }
  .membre__photo { width: 144px; height: 144px; }
  .portails { grid-template-columns: repeat(2, 1fr); }
  .pole { padding-right: 40px; }
  .pole:last-child { padding-left: 40px; }
  .methode__etapes { gap: 24px; }
  .etape__texte { font-size: 14px; }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --t-hero: 36px;
    --t-hero-page: 32px;
    --t-section: 28px;
    --t-carte: 21px;
    --marge-laterale: 24px;
    --h-onglet: 44px;
  }

  .entete { --h-ligne: 50px; --h-logo: 37px; }

  .decroche { padding: 0 26px 4px; gap: 10px; font-size: 11px; }
  .decroche__point { width: 6px; height: 6px; }

  .wrap, .wrap--court, .wrap--serre { padding-top: 72px; padding-bottom: 72px; }

  .hero { min-height: 520px; }
  .hero__contenu { padding-top: 160px; padding-bottom: 64px; }
  .hero__titre { margin-bottom: 32px; }
  .hero-page__contenu { padding-top: 152px; padding-bottom: 64px; }
  .hero-page__pont { height: 46%; }

  .surtitre { font-size: 12px; }
  .chapo { font-size: 20px; }
  .texte { font-size: 17px; }

  .manifeste,
  .accompagnement,
  .methode-page,
  .grille-deux,
  .grille-trois,
  .actus__grille,
  .poles__grille,
  .champs-double { grid-template-columns: 1fr; }

  .manifeste__phrase { font-size: 24px; }
  .manifeste__visuel { height: 360px; }
  .accompagnement__visuel { min-height: 280px; }

  .pole,
  .pole:last-child { padding: 40px 0; }
  .pole:first-child { border-right: 0; border-bottom: 1px solid var(--bord); }

  .methode__titre { margin-bottom: 48px; }
  .methode__etapes { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; }
  .methode__rail, .methode__progression { display: none; }
  .etape__numero { width: 40px; height: 40px; margin-bottom: 16px; }

  /* la brève repasse en pile : une image de 130 px de large ne laisse
     pas la place à l'étiquette de thème */
  .article--breve { grid-template-columns: 1fr; gap: 0; }
  .article--breve .article__media { aspect-ratio: 16 / 9; --h-bloc: 40px; --r-arrondi: 20px; }
  .article--breve .article__corps { padding-top: 18px; }
  .actus__breves { gap: 72px; }
  .actus__breves .article--breve + .article--breve::before { top: -36px; }

  .domaines__corps { grid-template-columns: 1fr; gap: 0; }
  .domaines__rail { display: none; }
  .domaines__liste { gap: 48px; }
  .domaines__entete { margin-bottom: 56px; }

  .transition-bloc { padding: 72px var(--marge-laterale); }

  .formulaire { padding: 28px 22px; }
  .article__corps { padding: 24px; }

  .actus-grille { grid-template-columns: 1fr; gap: 48px; }
  .actus-grille .article__corps { padding: 18px 0 0; }
  .equipe { gap: 48px; }
  /* plus la place pour deux colonnes : l'identité repasse au-dessus */
  .membre { grid-template-columns: 1fr; gap: 24px; }
  .portails { grid-template-columns: 1fr; }
  .accordeon__tete { font-size: 16px; padding: 18px 20px; }
  .accordeon__corps-inner { padding: 0 20px 20px; }
  .accordeon__item.est-ouvert .accordeon__corps { max-height: 420px; }

  /* parcours en une colonne, ligne à gauche */
  .parcours__rail, .parcours__progression { left: 9px; }
  .parcours__etape,
  .parcours__etape:nth-of-type(odd),
  .parcours__etape:nth-of-type(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 0 40px;
    text-align: left;
  }
  .parcours__etape:nth-of-type(odd)::before,
  .parcours__etape:nth-of-type(even)::before { left: 0; right: auto; }
  .filtres { margin-bottom: 40px; }
  .pagination { margin-top: 48px; }
  .corps-article h2 { font-size: 22px; }
  .corps-article blockquote { font-size: 20px; padding-left: 20px; }
  .partage { flex-direction: column; align-items: flex-start; gap: 14px; }

  .signature__inner { padding: 48px var(--marge-laterale); }
  .signature__phrase { font-size: 20px; text-align: left; }

  .pied__inner { padding: 56px var(--marge-laterale) 32px; }
  .pied__haut { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .pied__bas { flex-direction: column; gap: 8px; }

  .btn { font-size: 15px; padding-left: 22px; }
}

/* ---------- 15. Passage en thème WordPress ---------- */
/* Ajouts liés à l'intégration. Rien des sections 1 à 14 n'est modifié :
   ces règles ne couvrent que le markup qui n'existait pas en maquette, à
   savoir les titres devenus cliquables et le contenu produit par l'éditeur. */

/* 15.1 Éléments devenus des liens */

.article__titre a,
.pied a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

.article__titre a:hover { color: var(--bleu-appui); }

/* La puce de thème garde sa couleur de la section 13 (bleu sur sable) : elle
   est posée sur fond foncé, où hériter donnerait du gris clair illisible.
   Seul le soulignement de lien est à retirer. */
.hero-page__meta .puce-theme { text-decoration: none; }

.pagination__points { opacity: .45; }

/* 15.2 Contenu de l'éditeur de blocs, dans .corps-article

   Le CSS de la maquette cible déjà les balises brutes (p, h2, ul, blockquote,
   figure) : l'essentiel passe sans rien faire. Ne restent que les cas où
   Gutenberg imbrique une balise supplémentaire ou en produit une nouvelle. */

.corps-article blockquote p,
.corps-article .wp-block-quote p {
  font: inherit;
  color: inherit;
}

.corps-article blockquote cite,
.corps-article .wp-block-quote cite {
  display: block;
  margin-top: 12px;
  font: 400 15px/1.6 var(--font);
  font-style: normal;
  color: var(--gris);
}

.corps-article ol {
  margin: 0;
  padding-left: 24px;
}

.corps-article h3 {
  font: 600 20px/1.4 var(--font);
  color: var(--bleu);
  margin-top: 8px;
}

.corps-article a {
  color: var(--bleu);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-underline-offset: 3px;
}

.corps-article a:hover { color: var(--bleu-appui); }

.corps-article strong { font-weight: 700; }

/* La colonne de lecture est fixée à 760 px : les blocs « pleine largeur » de
   l'éditeur ne doivent pas la faire déborder. */
.corps-article .alignwide,
.corps-article .alignfull {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.corps-article .wp-block-image { margin: 8px 0; }

.corps-article .wp-block-image img {
  display: block;
  width: 100%;
  border-radius: var(--r-arrondi);
}

.corps-article .wp-block-table { overflow-x: auto; }

.corps-article .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font: 400 16px/1.6 var(--font);
}

.corps-article .wp-block-table th,
.corps-article .wp-block-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bord);
  text-align: left;
}

.corps-article .wp-block-separator {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--bord);
}

/* =============================================================
   18. Bandeau de consentement aux cookies
   ============================================================= */

/* Le bandeau n'existe dans la page que si une mesure d'audience à cookies est
   déclarée, voir cyrval_bandeau_cookies() dans functions.php. Il est posé en
   bas à gauche : au centre il masquerait le formulaire de contact, et en pleine
   largeur il couvrirait le pied de page. */

.cookies {
  position: fixed;
  left: var(--marge-laterale);
  bottom: var(--marge-laterale);
  z-index: 200;
  max-width: 440px;
}

.cookies[hidden] { display: none; }

.cookies__carte {
  padding: 28px 30px 24px;
  border-radius: var(--r-arrondi);
  background: var(--blanc);
  border: 1px solid var(--bord);
  box-shadow: 0 18px 36px rgba(0, 55, 77, .14);
}

.cookies__titre {
  margin: 0 0 10px;
  font: 700 20px/1.3 var(--font);
  color: var(--bleu);
}

.cookies__texte {
  margin: 0 0 22px;
  font: 400 15px/1.6 var(--font);
  color: var(--gris);
}

/* Refuser et accepter ont la même taille et la même place : le refus doit
   être aussi simple que l'accord, c'est la position constante de la CNIL. */
.cookies__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookies__actions .btn { flex: 1 1 0; justify-content: space-between; }

.cookies__lien { margin: 18px 0 0; }

.cookies__lien a {
  font: 400 14px/1.4 var(--font);
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid var(--bord);
}

.cookies__lien a:hover { color: var(--bleu); border-bottom-color: var(--bleu); }

/* Rouvrir le choix depuis le pied : un bouton, mais qui doit se lire comme les
   liens légaux qui l'entourent. */
.pied__cookies {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.pied__cookies:hover { text-decoration: underline; }

@media (max-width: 767px) {
  /* Sur mobile le bandeau prend toute la largeur : une carte flottante à
     440 px n'a plus de place, et les deux boutons doivent rester atteignables
     au pouce. */
  .cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .cookies__carte { padding: 24px 22px 20px; }
  .cookies__titre { font-size: 18px; }
  .cookies__actions .btn { flex: 1 1 100%; }
}