/* =========================================================================
   Talañ Avocats — feuille de style du thème
   Les valeurs sont reprises de la maquette du créa, propriété par propriété.
   Ne rien « arrondir » ici : le moindre écart se voit à la comparaison.
   ========================================================================= */

:root {
  --noir:            #0A0D0D;
  --noir-pur:        #000000;
  --blanc:           #FFFFFF;
  --creme:           #FAF5EB;
  --creme-nav:       #FAF7EB;
  --beige:           #F5E9DE;
  --kaki:            #5E501E;
  --kaki-heros:      #5A5233;
  --or:              #D9BD49;
  /* Le doré de la charte est illisible en texte sur fond clair : 1,85:1 sur
     blanc, là où la norme en demande 4,5. Cette variante assombrie garde la
     teinte et la saturation et atteint 4,94:1 sur blanc, 4,55:1 sur crème.
     Elle ne sert QUE pour du texte doré sur fond clair — sur fond noir, le
     doré d'origine est à 10,5:1 et reste inchangé. */
  --or-texte:        #836F17;
  --or-clair:        #D3AA68;
  --or-fonce:        #C5AE50;
  --kaki-clair:      #E7DFB8;
  --texte-clair:     #D6D2C4;
  --gris:            #3A3F44;
  --pastille-active: #F2ECD8;
  --encre-bouton:    #39352F;
  --bord-carte:      #EDEAE0;

  --marge-laterale:  clamp(20px, 5vw, 75px);
  --titres:          'DM Sans', system-ui, sans-serif;
  --courant:         'Inter', system-ui, sans-serif;
  --courbe:          cubic-bezier(.4, 0, .2, 1);
  /* Courbe « lente », réservée au bloc Domaines de l'accueil. */
  --courbe-lente:    cubic-bezier(.25, .1, .25, 1);
  /* Hauteur réelle de la barre de navigation, mesurée en JS. La valeur de
     repli sert le temps que le script s'exécute, et si JS est désactivé. */
  --hauteur-entete:  100px;

  /* Échelle typographique du lot 3 (30/09). Le créa a unifié des tailles qui
     variaient d'une page à l'autre pour un même niveau : H1 48 px, H2 38/36/
     32/28/40, titres de carte 24/26/27/22/19/18. Tout passe par ces trois
     valeurs. Les modifier ici les modifie partout — c'est le but. */
  --t-h1:            clamp(26px, 3vw, 30px);
  --t-h2:            clamp(23px, 2.6vw, 27px);
  --t-carte:         clamp(18px, 1.6vw, 21px);
}

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--courant);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* Sans cela, la marge basse du bandeau vert et la marge haute du pied de
   page fusionnent (comportement normal de CSS) : on obtient 72 px au lieu
   des 112 px de la maquette, où les deux blocs sont des enfants de flexbox
   et ne fusionnent donc pas. « flow-root » rétablit le même espacement. */
main { display: flow-root; }

a { color: var(--noir); }

.lien-evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--noir); color: var(--blanc);
  padding: 12px 20px; z-index: 100; border-radius: 0 0 8px 0;
}
.lien-evitement:focus { left: 0; }

/* ---------- En-tête / navigation ------------------------------------- */

/* La barre ne défile plus avec la page : elle reste en haut. Une zone vide
   de même hauteur est réservée sous elle, sinon le contenu passerait dessous
   — un élément en position fixe ne prend plus de place dans le flux. */
.entete {
  position: fixed;
  top: 0;
  left: clamp(40px, 5vw, 75px);
  right: clamp(40px, 5vw, 75px);
  z-index: 20;
}

.entete-reserve {
  height: var(--hauteur-entete);
  flex: none;
}

.entete__barre {
  background: var(--blanc);
  border-radius: 0 0 10px 10px;
  transition: border-radius .32s var(--courbe);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  flex-wrap: nowrap;
  padding: clamp(20px, 2.6vw, 30px) 24px;
  font-family: var(--courant);
}
.entete.a-volet-ouvert .entete__barre { border-radius: 0; }

.entete__logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.entete__logo img { height: clamp(30px, 3.6vw, 48px); width: auto; }

.entete__liens {
  display: flex;
  gap: clamp(8px, 2.2vw, 48px);
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 400;
  margin-left: auto;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  flex-shrink: 1;
  white-space: nowrap;
}

.entete__lien {
  flex: none;
  padding: 6px 0;
  color: var(--noir);
  text-decoration: none;
}

/* Les trois entrées « pastille » : Secteurs, Missions, FR */
.entete__pastille {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  margin: -10px -16px;
  flex: none;
  border-radius: 8px;
  color: var(--noir);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
}
.entete__pastille.est-page-active { background: var(--pastille-active); }
.entete__pastille.est-ouvert      { background: var(--kaki-clair); }
.entete__pastille svg { transition: transform .32s var(--courbe); }
.entete__pastille.est-ouvert svg { transform: rotate(180deg); }

.entete__volet {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--blanc);
  border-radius: 0 0 10px 10px;
  border-top: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .32s var(--courbe), opacity .22s ease;
}
.entete__volet.est-ouvert { max-height: 220px; opacity: 1; }

.entete__volet-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
  padding: 24px 24px 32px;
}

.entete__tuile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 140px;
  border-radius: 10px;
  background: var(--creme-nav);
  color: var(--noir);
  font-size: 17px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.entete__tuile:hover { background: var(--kaki); color: var(--blanc); }

.entete__tuile--langue { gap: 14px; }

/* Drapeaux dessinés, pas d'image (comme la maquette) */
.drapeau { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; position: relative; }
.drapeau--uk { background: #00247D; }
.drapeau--uk i { position: absolute; left: 50%; top: 50%; background: var(--blanc); }
.drapeau--uk i:nth-child(1) { width: 150%; height: 14%; transform: translate(-50%,-50%) rotate(45deg); }
.drapeau--uk i:nth-child(2) { width: 150%; height: 14%; transform: translate(-50%,-50%) rotate(-45deg); }
.drapeau--uk i:nth-child(3) { width: 150%; height: 6%;  background: #CF142B; transform: translate(-50%,-50%) rotate(45deg); }
.drapeau--uk i:nth-child(4) { width: 150%; height: 6%;  background: #CF142B; transform: translate(-50%,-50%) rotate(-45deg); }
.drapeau--uk i:nth-child(5) { left: 50%; top: 0; width: 16%; height: 100%; transform: translateX(-50%); }
.drapeau--uk i:nth-child(6) { top: 50%; left: 0; width: 100%; height: 16%; transform: translateY(-50%); }
.drapeau--uk i:nth-child(7) { left: 50%; top: 0; width: 7%;  height: 100%; background: #CF142B; transform: translateX(-50%); }
.drapeau--uk i:nth-child(8) { top: 50%; left: 0; width: 100%; height: 7%;  background: #CF142B; transform: translateY(-50%); }
.drapeau--fr { display: flex; }
.drapeau--fr i { height: 100%; }
.drapeau--fr i:nth-child(1) { width: 33.4%; background: #0055A4; }
.drapeau--fr i:nth-child(2) { width: 33.3%; background: var(--blanc); }
.drapeau--fr i:nth-child(3) { width: 33.3%; background: #EF4135; }

/* Bouton burger — absent de la maquette, ajouté pour le mobile */
.entete__burger {
  display: none;
  margin-left: auto;
  flex: none;
  width: 44px; height: 44px;
  border: 0; padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}
.entete__burger span {
  display: block;
  width: 22px; height: 2px;
  margin: 5px auto;
  background: var(--noir);
  transition: transform .3s var(--courbe), opacity .2s ease;
}
.entete__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.entete__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Boutons --------------------------------------------------- */

/* Bouton noir simple : sections « Consulter… », « Toutes les études » */
.bouton-noir {
  height: 50px;
  flex: none;
  border-radius: 10px;
  background: var(--noir);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  text-decoration: none;
  transition: background .4s ease, color .4s ease;
}
.bouton-noir:hover { background: var(--or); color: #080C0C; }
.bouton-noir--secteurs { width: 220px; }
.bouton-noir--missions { width: 240px; }
.bouton-noir--etudes   { width: 203px; }
.bouton-noir--domaine  { width: 192px; }

/* Bouton à panneau coulissant : les deux appels à l'action principaux */
.bouton-coulissant {
  position: relative;
  display: block;
  width: 243px;
  height: 58px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  flex: none;
}
.bouton-coulissant span { position: absolute; top: 0; height: 58px; display: flex; align-items: center; justify-content: center; }
.bouton-coulissant__fleche-g { left: 0;  width: 60px; background: var(--or-fonce); color: var(--blanc); font-size: 20px; font-weight: 300; }
.bouton-coulissant__fond     { left: 60px; right: 0; background: var(--kaki-heros); }
.bouton-coulissant__fleche-d { right: 0; width: 50px; color: var(--blanc); font-size: 20px; font-weight: 300; }
.bouton-coulissant__etiquette {
  left: 0;
  width: 193px;
  border-radius: 10px;
  transform: translateX(0);
  transition: transform .35s var(--courbe);
  background: var(--beige);
  color: var(--encre-bouton);
  font-size: 14px;
}
.bouton-coulissant:hover .bouton-coulissant__etiquette { transform: translateX(50px); }

.bouton-coulissant--contact { width: 203px; height: 50px; }
.bouton-coulissant--contact span { height: 50px; }
.bouton-coulissant--contact .bouton-coulissant__fleche-g { background: var(--or); color: var(--encre-bouton); }
.bouton-coulissant--contact .bouton-coulissant__fond     { background: var(--beige); }
.bouton-coulissant--contact .bouton-coulissant__fleche-d { color: var(--encre-bouton); }
.bouton-coulissant--contact .bouton-coulissant__etiquette { width: 153px; background: var(--blanc); color: var(--encre-bouton); }

/* ---------- Héros ----------------------------------------------------- */

.heros { position: relative; background: var(--noir-pur); display: flex; flex-direction: column; }
/* Le motif décoratif.
 *
 * La maquette l'utilise en deux planches de 286 Ko chacune — même dessin,
 * deux couleurs — étirées en object-fit:cover. On le remplace par le module
 * répétable fourni par le créa (8,7 Ko), teinté en CSS : un seul fichier
 * pour les deux couleurs.
 *
 * Contrôlé avant adoption : à échelle égale, la couverture d'encre est de
 * 18,78 % pour la planche et 18,82 % pour le module répété. 0,04 point
 * d'écart, aucune couture visible.
 *
 * ⚠️ Choix assumé sur l'échelle. Dans la maquette, object-fit:cover fait
 * varier la taille du motif avec la hauteur du bloc : le même décor est à
 * 43 px de pas sur le hero de l'accueil et à 31 px sur la section crème.
 * C'est un effet de bord de l'étirement, pas une intention. On fixe donc une
 * échelle par bloc, calibrée sur la maquette à 1440 px — une texture
 * décorative garde ainsi la même finesse quelle que soit la largeur. */
.heros__motif { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.heros__motif::before {
  content: '';
  position: absolute; top: -10%; right: -10%;
  height: 120%; width: 65%;
  background-color: #35301D;
  -webkit-mask: url(../img/motif-module.svg) 0 0 / 43.29px 132.6px repeat;
          mask: url(../img/motif-module.svg) 0 0 / 43.29px 132.6px repeat;
}
.heros__interieur {
  position: relative;
  padding: clamp(48px, 7vw, 88px) var(--marge-laterale) 0;
  display: flex; flex-direction: column; gap: 80px;
}
.heros__bloc { position: relative; display: flex; flex-direction: column; gap: 22px; }
.heros__titre {
  margin: 0; width: 66.66%; min-width: 260px;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h1); line-height: 1.1;
  color: var(--blanc); text-wrap: pretty;
}
.heros__chapo {
  margin: 0; width: 50%; min-width: 220px;
  font-size: 16px; line-height: 1.6;
  color: var(--texte-clair); text-wrap: pretty;
}
.heros__image {
  position: relative; z-index: 2;
  width: 100%; height: clamp(260px, 34vw, 500px);
  object-fit: cover; border-radius: 10px;
}

/* ---------- Empilement des sections -----------------------------------
   Chaque section remonte de 24 px sur la précédente, avec des coins hauts
   arrondis et un z-index croissant : les sections se chevauchent comme des
   cartes posées les unes sur les autres. */
.section-empilee {
  position: relative;
  margin-top: -24px;
  border-radius: 20px 20px 0 0;
}

/* ---------- Une expertise reconnue ------------------------------------ */

/* ⚠️ L'échelle des plans va en montant, de la première section à la
   dernière : 1, 2, 3, 4… La photo du héros est au plan 2, elle doit donc
   passer DEVANT la première section crème, qui remonte de 187 px derrière
   elle. Avec un plan 3, cette section recouvrait la photo et la coupait
   net au bord du crème. */
.expertise {
  position: relative; z-index: 1;
  margin-top: calc(-1 * clamp(100px, 13vw, 190px));
  background: var(--creme);
  border-radius: 20px 20px 0 0;
  padding: calc(clamp(40px, 6vw, 64px) + clamp(100px, 13vw, 190px)) var(--marge-laterale) clamp(90px, 11vw, 130px);
  display: flex; flex-direction: column; gap: 32px;
}
.expertise__titre { margin: 0; line-height: 1.15; }
.expertise__titre span {
  display: block;
  font-family: var(--titres);
  font-size: var(--t-h2);
  color: var(--noir);
}
.expertise__titre span:first-child { font-weight: 700; }
.expertise__titre span:last-child  { font-weight: 400; }

.expertise__duo { display: grid; grid-template-columns: minmax(280px, 7fr) minmax(280px, 5fr); gap: 32px; }
.expertise__duo--inverse { grid-template-columns: minmax(280px, 5fr) minmax(280px, 7fr); }
.expertise__photo { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; }
.expertise__texte {
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
  height: 400px;
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
  padding: 28px;
}
.expertise__texte--droite {
  border-left: none;
  border-right: 1px solid var(--or-clair);
  border-radius: 0 10px 0 0;
}
.expertise__accroche { font-family: var(--titres); font-weight: 600; font-size: var(--t-carte); line-height: 1.3; color: var(--noir); }
.expertise__corps { font-size: 16px; line-height: 1.6; color: var(--noir); }

/* ---------- Bandeau de section (titre + bouton) ------------------------ */

.bandeau {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px; align-items: flex-start;
}
.bandeau__texte { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.bandeau__texte--large { max-width: 560px; }
.titre-section {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h2);
  color: var(--noir);
}
.bandeau__chapo { margin: 0; font-size: 16px; line-height: 1.6; color: var(--noir); }

/* ---------- Domaines d'intervention ----------------------------------- */

/* Depuis l'export du 23/09, ce bloc est sur fond NOIR — il l'était sur fond
   blanc jusque-là. Titres, textes et filets passent en blanc, et les boutons
   s'inversent : crème au repos, doré au survol comme partout ailleurs. */
.domaines {
  position: relative;
  z-index: 2;
  margin-top: -24px;
  background: var(--noir);
  color: var(--blanc);
  border-radius: 20px 20px 0 0;
  padding: clamp(70px, 9vw, 110px) var(--marge-laterale) clamp(80px, 10vw, 120px);
  display: flex; flex-direction: column; gap: 36px;
}
.domaines .titre-section,
.domaines .bandeau__chapo { color: var(--blanc); }

/* Bouton plein, variante du bloc Domaines : crème au repos. */
.domaines .bouton-noir {
  background: var(--creme);
  color: var(--noir);
}
.domaines .bouton-noir:hover {
  background: var(--or);
  color: #080C0C;
}
.domaines__liste { display: flex; flex-direction: column; }

.domaine { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); position: relative; }
.domaine__interieur {
  grid-column: 3 / 13;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
}
.domaines .domaine__bascule { color: var(--blanc); }
.domaine__texte {
  grid-column: 1 / 6;
  padding: 14px 24px 14px 28px;
  gap: 14px;
  transition: padding .6s var(--courbe-lente), gap .6s var(--courbe-lente);
  display: flex; flex-direction: column; justify-content: center;
}
.domaine__titre { font-family: var(--titres); font-weight: 600; font-size: var(--t-carte); color: var(--blanc); }
.domaine__corps {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--courbe-lente), opacity .5s ease;
}
.domaine__texte-corps { font-size: 16px; line-height: 1.5; color: var(--blanc); }
.domaine__photo {
  grid-column: 6 / 11;
  align-self: center; justify-self: center;
  position: relative; z-index: 3;
  width: 75%; height: 340px;
  object-fit: cover; border-radius: 10px;
  object-position: var(--cadrage, center);
  transform: scale(.85);
  opacity: 0;
  margin: -166px 0;
  transition: transform .6s var(--courbe-lente), margin .6s var(--courbe-lente), opacity .5s ease;
}
.domaine.est-actif .domaine__texte { padding: 56px 24px 56px 28px; gap: 16px; }
.domaine.est-actif .domaine__corps { max-height: 170px; opacity: 1; }
.domaine.est-actif .domaine__photo {
  transform: scale(1);
  opacity: 1;
  margin: -90px 0;
}

/* Affordance tactile : un « + » qui ne s'affiche que sans souris */
.domaine__bascule {
  display: none;
  border: 0; background: transparent; padding: 0;
  font: inherit; color: var(--noir); cursor: pointer;
  text-align: left; width: 100%;
}

/* ---------- Nos expertises (missions) --------------------------------- */

.missions {
  position: relative; z-index: 3;
  margin-top: -24px;
  background: var(--creme);
  border-radius: 20px;
  padding: clamp(40px, 6vw, 80px) var(--marge-laterale) clamp(80px, 10vw, 120px);
  display: flex; flex-direction: column; gap: 36px;
  overflow: hidden;
}
.missions__motif {
  position: absolute; top: -15%; left: -15%; z-index: 0;
  width: 130%; height: 130%;
  pointer-events: none;
  background-color: #EFE6C6;
  -webkit-mask: url(../img/motif-module.svg) 0 0 / 30.8px 94.33px repeat;
          mask: url(../img/motif-module.svg) 0 0 / 30.8px 94.33px repeat;
}
.missions > .bandeau,
.missions__grille { position: relative; z-index: 1; }
/* ⚠️ Quatre colonnes franches, et non une grille automatique : en
   « auto-fit » elle tombait à 3 + 1 vers 1024 px, avec une carte seule sur
   la deuxième rangée. Le créa fixe 4 → 2 (≤ 1023) → 1 (≤ 559). */
.missions__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.mission {
  background: var(--kaki-clair);
  border-radius: 10px;
  padding: 24px;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  transition: background .2s ease;
  text-decoration: none; color: inherit;
}
.mission__pastille {
  align-self: flex-end;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--noir); color: var(--creme);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500;
  transition: background .2s ease, color .2s ease,
              width .3s var(--courbe), height .3s var(--courbe);
}
.mission__fleche { display: none; }
.mission__bas { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mission__titre {
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.2; color: var(--noir);
  transition: color .2s ease;
}
.mission__sous {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 0; opacity: 0; transform: translateY(12px);
  transition: max-height .4s var(--courbe), opacity .35s ease, transform .4s var(--courbe);
}
.mission__filet { height: 1px; background: var(--blanc); width: 100%; flex: none; }
.mission__corps { font-size: 14px; line-height: 1.5; color: var(--noir); }

.mission.est-actif { background: var(--kaki); }
.mission.est-actif .mission__pastille { width: 64px; height: 64px; background: var(--blanc); color: var(--noir); }
.mission.est-actif .mission__numero { display: none; }
.mission.est-actif .mission__fleche { display: block; }
.mission.est-actif .mission__titre,
.mission.est-actif .mission__corps { color: var(--blanc); }
.mission.est-actif .mission__sous { max-height: 100px; opacity: 1; transform: translateY(0); }

/* ---------- Études et analyses ---------------------------------------- */

.etudes {
  position: relative;
  z-index: 4;
  background: var(--blanc);
  border-radius: 20px 20px 0 0;
  padding: clamp(90px, 11vw, 130px) var(--marge-laterale) clamp(40px, 6vw, 80px);
  display: flex; flex-direction: column; gap: 36px;
}
.etudes__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }

.etude { text-decoration: none; color: var(--noir); display: flex; flex-direction: column; }
.etude__cadre {
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-top-left-radius: 10px;
  overflow: hidden;
}
.etude__cadre img {
  display: block; width: 100%; height: 320px;
  object-fit: cover; transform-origin: center;
  transform: scale(1);
  transition: transform .5s var(--courbe);
}
.etude:hover .etude__cadre img { transform: scale(1.06); }
.etude__corps { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
/* Les deux étiquettes d'une carte analyse : le type, puis le domaine. */
.etude__etiquettes { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.etude__type,
.etude__categorie {
  font-family: var(--titres); font-weight: 600;
  font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase;
}
.etude__type { color: var(--kaki); }
.etude__categorie { color: var(--or-texte); }
.etude__titre { font-family: var(--titres); font-weight: 600; font-size: var(--t-carte); line-height: 1.3; text-wrap: pretty; }
/* L'extrait tient sur deux lignes, comme dans la maquette : au-delà, il est
   coupé proprement plutôt que de déformer la carte. */
.etude__extrait {
  font-size: 16px; line-height: 1.55; color: var(--gris);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.etude__lien {
  font-size: 16px; line-height: 1.55; color: var(--gris); margin-top: 4px;
  transition: color .3s ease, opacity .3s ease;
}
.etude__lien:hover { color: var(--or-texte); opacity: .7; }

/* Variante « Études et analyses liées », en bas des pages secteur et
   mission : deux cartes couchées, photo à gauche, filet doré en haut et à
   gauche. La variante verticale de l'accueil reste au-dessus, inchangée.
   Relevé sur la maquette : grille 638/638 écart 20, photo 202x270. */
.etudes__grille--liees { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Un seul article rattaché : la carte garde sa demi-largeur et reste à
   gauche, plutôt que de s'étirer sur toute la rangée. */
.etudes__grille--seule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.etudes__grille--seule > :only-child { grid-column: 1; }
.etude--liee {
  display: grid; grid-template-columns: 202px minmax(0, 1fr); gap: 32px;
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
}
.etude--liee .etude__cadre { height: 270px; border-radius: 10px 0 0 0; }
.etude--liee .etude__cadre img { height: 100%; }
.etude--liee .etude__corps { padding: 16px 16px 16px 0; gap: 12px; }
/* Un emplacement d'attente ne mène nulle part : pas de curseur de lien. */
.etude--attente { cursor: default; }

@media (max-width: 859px) {
  .etudes__grille--liees { grid-template-columns: 1fr; }
  .etude--liee { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
  .etude--liee .etude__cadre { height: 100%; min-height: 180px; }
}

/* ---------- Appel à l'action olive ------------------------------------ */

.cta-olive {
  position: relative; z-index: 5;
  background: var(--kaki);
  margin: 40px var(--marge-laterale) 72px;
  border-radius: 20px;
  padding: clamp(28px, 4vw, 40px);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 32px;
}
/* Sur les pages intérieures, le bandeau porte deux boutons côte à côte.
   Le bouton contour y fait 50 px de contenu plus ses bordures, soit 52. */
.cta-olive__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* ⚠️ La maquette n'est pas cohérente d'une page à l'autre : ce bouton a
   20 px de part et d'autre sur Le cabinet, 22 px sur les pages secteur et
   mission. On reproduit les deux. À faire trancher par le créa : une même
   règle ne devrait pas donner deux résultats. */
.cta-olive .bouton-contour { height: 50px; padding: 0 20px; }
.cta-olive__actions--contour-dabord .bouton-contour { padding: 0 22px; }

.cta-olive__texte {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: 21px; line-height: 1.5;
  color: var(--blanc); max-width: 700px;
}

/* ---------- Pied de page ---------------------------------------------- */

.pied {
  background: var(--noir);
  color: var(--blanc);
  padding: 80px var(--marge-laterale) 56px;
  display: flex; flex-direction: column; gap: 64px;
  font-family: var(--courant);
  border-radius: 20px 20px 0 0;
  /* La maquette du 23/09 laisse 72 px entre le bandeau olive et le pied de
     page — la seule marge basse du bandeau. Le pied n'ajoute plus rien. */
  margin-top: 0;
}
.pied__haut { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.pied__logo { display: flex; flex-direction: column; gap: 20px; }
.pied__logo img { height: 52px; width: auto; }
.pied__colonne { display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
/* Sous 960 px, la maquette retire la colonne de navigation du pied de page :
   les mêmes cinq liens sont déjà dans le menu replié, et les répéter allonge
   la page d'autant. Le seuil est celui du burger. */
@media (max-width: 959px) {
  nav.pied__colonne { display: none; }
}
.pied__adresse { display: flex; gap: 10px; font-size: 17px; }
.pied__adresse > img { width: 14px; height: 20px; flex: none; margin-top: 3px; }
.pied__adresse-lignes { display: flex; flex-direction: column; gap: 14px; }
.pied a { color: var(--blanc); text-decoration: none; transition: color .35s ease; }
.pied a:hover { color: var(--or); }
.pied__contact-lien { display: flex; align-items: center; gap: 10px; }
/* Variante sans lien : même aspect que les autres lignes de contact, tant
   que l'adresse LinkedIn n'a pas été renseignée en back-office. */
.pied__contact-lien--inactif { color: var(--blanc); }
.pied__bas {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 16px;
  padding-top: 32px; font-size: 16px;
}
.pied__legaux { display: flex; gap: 32px; flex-wrap: wrap; }

/* ---------- Image absente (filet de sécurité) -------------------------- */

.image-absente {
  display: flex; align-items: center; justify-content: center;
  background: var(--creme);
  border: 1px dashed var(--or-clair);
  color: var(--gris);
  font-size: 13px; text-align: center; padding: 16px;
  border-radius: 10px;
}

/* =========================================================================
   ADAPTATION AUX PETITS ÉCRANS
   Aucune de ces règles ne vient de la maquette : elle s'arrête à 1440 px.
   Proposition à valider par le créa.
   ========================================================================= */

/* --- Sous 1024 px : la grille 12 colonnes des domaines se resserre -----
   Placé en dessous de 1060 px volontairement : au-dessus, on doit être
   au pixel près sur la maquette, qui n'a aucun point de rupture. */
@media (max-width: 1023px) {
  /* Les grilles de quatre passent à deux : « Nos expertises » sur l'accueil,
     « Par domaine » sur la page Missions, et la liste des études. */
  .domaine__interieur { grid-column: 2 / 13; }
}

/* --- Sous 1024 px : menu replié en burger ------------------------------ */
/* ⚠️ Le menu replié ne dépend pas que de la largeur : il s'applique aussi à
   TOUT écran tactile, quelle que soit sa taille. Sans cela, une tablette en
   paysage (1024 px et plus) affichait les panneaux Secteurs / Missions, qui
   s'ouvrent au survol — et ne s'ouvrent donc jamais au doigt. */
@media (max-width: 959px), (hover: none) and (pointer: coarse) {
  .entete__burger { display: block; }
  .entete__liens {
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin-left: 0;
    background: var(--blanc);
    border-radius: 0 0 10px 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 17px;
    white-space: normal;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* ⚠️ « max-height: 0 » réduit le conteneur, pas ses enfants : les cinq
       liens gardaient leur boîte, restaient atteignables au clavier et
       annoncés par les lecteurs d'écran, dans un menu pourtant fermé.
       « visibility » les retire vraiment, sans casser l'animation —
       contrairement à « display: none ». */
    visibility: hidden;
    /* Le remplissage est nul tant que le menu est replié : avec
       box-sizing:border-box, un remplissage non nul empêche la hauteur de
       descendre à zéro et laisse une bande blanche sous la barre. */
    padding: 0 16px;
    transition: max-height .32s var(--courbe), padding .32s var(--courbe),
                opacity .22s ease, visibility 0s linear .32s;
  }
  .entete__liens.est-deploye {
    max-height: 80vh;
    overflow-y: auto;
    opacity: 1;
    padding: 8px 16px 20px;
    /* À l'ouverture, la visibilité revient tout de suite ; à la fermeture,
       elle attend la fin du repli (le délai est posé ci-dessus). */
    visibility: visible;
    transition: max-height .32s var(--courbe), padding .32s var(--courbe),
                opacity .22s ease, visibility 0s;
  }
  .entete__lien, .entete__pastille {
    margin: 0; padding: 16px 12px;
    border-bottom: 1px solid #ece4d4;
    border-radius: 0;
    justify-content: space-between;
  }
  .entete__volet {
    position: static;
    background: var(--creme-nav);
    border-radius: 8px;
    margin: 0 0 4px;
  }
  .entete__volet.est-ouvert { max-height: 700px; }
  .entete__volet-grille { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .entete__tuile { height: 56px; justify-content: flex-start; padding: 0 16px; text-align: left; }
}

/* --- Sous 900 px : les blocs à deux colonnes passent l'un sous l'autre -- */
@media (max-width: 859px) {
  .heros__titre, .heros__chapo { width: 100%; }
  .heros__interieur { gap: 48px; }

  .expertise__duo,
  .expertise__duo--inverse { grid-template-columns: 1fr; }
  .expertise__photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .expertise__texte { height: auto; padding: 24px; }
  /* l'ordre visuel garde toujours la photo au-dessus du texte */
  .expertise__duo--inverse .expertise__texte { order: 2; }
  .expertise__duo--inverse .expertise__photo { order: 1; }

  /* Domaines : la ligne redevient un bloc simple, et la PHOTO DISPARAÎT.
     Le créa l'écrit noir sur blanc (`[data-dom-img] { display: none }`) :
     en pleine largeur sur un téléphone, elle repoussait le texte d'un écran
     entier. Nous l'avions gardée, repliée en hauteur — ce n'est pas la même
     chose, et cela se voyait. */
  .domaine__interieur { display: block; }
  .domaine__texte { grid-column: 1 / -1; padding: 22px 20px; }
  .domaine.est-actif .domaine__texte { padding: 22px 20px; }
  .domaine__photo { display: none; }

  /* Le bandeau ne passe PAS en colonne à ce seuil : la maquette le laisse
     sur une ligne tant que le bouton tient à côté du texte, et ne le replie
     que par manque de place (`flex-wrap`). Le forcer en colonne dès 859 px
     le faisait grandir de 63 px pour rien. */
}

/* --- Sous 680 px : une seule colonne partout --------------------------- */
@media (max-width: 559px) {
  .entete { margin: 0 16px; }
  .heros__interieur { padding-top: 40px; gap: 36px; }
  .heros__titre { min-width: 0; }
  .heros__chapo { min-width: 0; }
  .heros__image { height: clamp(200px, 50vw, 300px); }

  .missions__grille { grid-template-columns: 1fr; gap: 12px; }
  .mission { aspect-ratio: auto; min-height: 180px; }
  /* Pas de taille forcée ici : l'échelle du créa descend déjà à 18 px sur
     cette largeur. Un 23 px choisi à la main la contredisait. */

  .etude__cadre img { height: clamp(200px, 55vw, 320px); }


  .bandeau { flex-direction: column; }
  .bouton-noir { width: 100%; max-width: 320px; }
  .bouton-noir--secteurs,
  .bouton-noir--missions,
  .bouton-noir--etudes { width: 100%; max-width: 320px; }

  .pied { padding: 56px 16px 40px; gap: 40px; }
  .pied__haut { gap: 32px; }
  .pied__bas { flex-direction: column; gap: 12px; }
  .pied__legaux { flex-direction: column; gap: 12px; }
}

/* =========================================================================
   APPAREILS SANS SURVOL (téléphones, tablettes)
   Rien ne doit rester caché derrière un survol qui n'existe pas.
   ========================================================================= */
@media (hover: none) {
  /* Les quatre expertises affichent leur sous-titre en permanence */
  .mission__sous { max-height: 200px; opacity: 1; transform: none; }
  .mission__filet { background: rgba(10,13,13,.18); }

  /* Les domaines deviennent un accordéon qui s'ouvre au doigt */
  .domaine__bascule { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .domaine__bascule::after {
    content: '+';
    font-size: 26px; font-weight: 300; line-height: 1;
    color: var(--or-clair); flex: none;
    transition: transform .3s var(--courbe);
  }
  .domaine.est-actif .domaine__bascule::after { transform: rotate(45deg); }
  .domaine__titre--statique { display: none; }

  /* Le panneau coulissant des deux boutons principaux n'a pas de sens
     sans survol : il reste en position de repos. */
  .bouton-coulissant:hover .bouton-coulissant__etiquette { transform: translateX(0); }
}

/* =========================================================================
   MOUVEMENT RÉDUIT — respect du réglage système
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* =========================================================================
   PAGES INTÉRIEURES — bibliothèque de blocs partagés
   Les 12 pages reposent sur le même squelette : un hero noir, puis des
   sections qui s'empilent en remontant de 24 px les unes sur les autres,
   et un bandeau de contact en bas. Tout ce qui suit sert à plusieurs pages.
   ========================================================================= */

/* ---------- Hero de page intérieure ----------------------------------- */

.heros-page {
  position: relative;
  background: var(--noir-pur);
  display: flex; flex-direction: column;
}
.heros-page__interieur {
  position: relative;
  padding: clamp(48px, 7vw, 88px) var(--marge-laterale) clamp(60px, 8vw, 96px);
  display: grid;
  grid-template-columns: minmax(280px, 6fr) minmax(280px, 5fr);
  gap: 40px;
  align-items: center;
}
/* Variante des pages liste : une seule colonne, pas de photo.
 *
 * ⚠️ La maquette écrit « max-width: 800px » sur un élément qui a aussi des
 * marges internes. Elle n'applique pas box-sizing:border-box, donc ses
 * 800 px sont ceux du CONTENU. Le thème, lui, compte les marges dedans :
 * repris tel quel, le texte tombait à 656 px. On ajoute donc les marges. */
.heros-page__interieur--simple {
  display: flex;
  flex-direction: column;
  /* Sans « stretch » explicite, l'unique colonne se réduit à la largeur de
     son texte : la page Secteurs le masquait (son chapô est long et
     atteignait les 800 px), la page Contact le révélait à 705 px. */
  align-items: stretch;
  gap: 22px;
  max-width: calc(800px + 2 * var(--marge-laterale));
}
.heros-page__texte { position: relative; display: flex; flex-direction: column; gap: 22px; }
.heros-page__surtitre {
  font-family: var(--titres); font-weight: 600;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--or);
}
.heros-page__titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h1); line-height: 1.1;
  color: var(--blanc); text-wrap: pretty;
}
.heros-page__chapo {
  margin: 0; font-size: 18px; line-height: 1.6;
  color: var(--texte-clair); text-wrap: pretty;
}
.heros-page__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.heros-page__image {
  position: relative; z-index: 2;
  width: 100%; height: clamp(320px, 40vw, 480px);
  object-fit: cover; border-radius: 10px;
}

/* Bouton contour, sur fond sombre uniquement. */
/* ⚠️ 58 px de contenu PLUS 1 px de bordure de chaque côté = 60 px mesurés.
   La maquette n'applique pas box-sizing:border-box ; repris tel quel, notre
   bouton faisait 58 px au total et 2 px de moins que le sien. */
.bouton-contour {
  box-sizing: content-box;
  display: flex; align-items: center;
  height: 58px; padding: 0 24px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--blanc); font-size: 14px; text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.bouton-contour:hover { border-color: var(--or); color: var(--or); }

/* Variante du bouton coulissant présente sur les pages intérieures :
   203 px de large mais 58 px de haut, panneau de 153 px. */
.bouton-coulissant--page { width: 203px; height: 58px; }
.bouton-coulissant--page span { height: 58px; }
.bouton-coulissant--page .bouton-coulissant__etiquette { width: 153px; }

/* ---------- Sections empilées ----------------------------------------- */

.section {
  position: relative;
  margin-top: -24px;
  border-radius: 20px 20px 0 0;
  padding: clamp(70px, 9vw, 110px) var(--marge-laterale) clamp(80px, 10vw, 110px);
  display: flex; flex-direction: column; gap: 36px;
}
/* La première section sous le hero respire moins en haut. */
.section--premiere { padding-top: clamp(40px, 6vw, 64px); }

.section--creme { background: var(--creme); }
.section--blanc { background: var(--blanc); }
.section--noir  { background: var(--noir); color: var(--blanc); }

/* Sur fond noir, titre, chapô et corps passent en blanc.
   Cette règle avait été cassée : un commentaire s'était inséré au milieu de
   sa liste de sélecteurs, et le titre restait noir sur noir — invisible,
   tout en étant bien présent dans le code. */
.section--noir .section__titre,
.section--noir .section__intro,
.section--noir .section__corps { color: var(--blanc); }

.section__titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h2); line-height: 1.2;
  color: var(--noir);
}
/* ⚠️ L'interligne des H2 n'est pas cohérent d'une page à l'autre dans la
   maquette : 1,2 sur les quatre pages secteur, non défini sur les pages
   liste, Le cabinet, Contact et les pages mission. Le README annonce 1,2
   partout. La maquette fait foi — on isole donc la variante, qui se retire
   en une ligne le jour où le créa tranche. */
.section__titre--interligne-libre { line-height: normal; }
/* Le titre « Études et analyses liées » des pages secteur et mission fait
   36 px, là où celui de l'accueil en fait 40. */
.section__titre--36 { font-size: var(--t-h2); }
.section--creme .accordeon + *, .section__titre--libre { line-height: normal; }
/* En-tête de section : titre et chapô.
 *
 * La maquette écrit « max-width: 70ch ». L'unité « ch » vaut la largeur du
 * zéro dans la police RÉELLEMENT servie — elle ne donne donc pas la même
 * chose des deux côtés (9,23 px chez elle, 10,09 px chez nous), et l'écart
 * atteint 60 px. On fixe la valeur qu'elle produit : la taille de texte de
 * ce bloc est constante, la largeur l'est donc aussi. */
.section__entete {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 70ch;
}

/* ⚠️ La maquette déclare « max-width: 70ch » sur ces blocs, mais le rendu
   donne trois largeurs différentes selon les pages : 706 px sur les pages
   liste, 646 px sur les pages secteur et mission, 620 px sur Le cabinet.
   On reproduit les trois. À signaler au créa : une même règle ne devrait
   pas produire trois résultats. */
.section__entete--moyen  { max-width: 646px; }
.section__entete--etroit { max-width: 620px; }

.section__intro {
  margin: 0; max-width: 70ch;
  font-size: 19px; line-height: 1.6;
  color: var(--noir); text-wrap: pretty;
}
.section__corps {
  font-size: 16px; line-height: 1.6; max-width: 70ch;
  /* Le corps de texte est gris foncé dans la maquette, pas noir. */
  color: var(--gris);
}
/* L'accroche des sections de page secteur et mission : plus petite et plus
   grasse que le chapô des pages liste. Relevé : 18 px, graisse 600, noir. */
.section__intro--accroche { font-size: 18px; font-weight: 600; color: var(--noir); }
/* L'accroche de la décision de référence : 17 px, graisse normale, noir. */
.section__intro--17-noir { font-size: 17px; color: var(--noir); }
/* Relevés dans la maquette, page par page : la taille du chapô n'y est pas
   constante — 19 px sur les pages secteur, 18 px sur la liste des missions,
   16 px sous le titre de la chaîne juridictionnelle. */
.section__intro--18 { font-size: 18px; }
.section__intro--16 { font-size: 16px; }
/* Le titre de la chaîne juridictionnelle fait 28 px dans la maquette. */
.section__titre--28 { font-size: var(--t-h2); }
.section__entete--600 { max-width: 600px; }

/* ---------- Sections à deux colonnes (texte + photo) ------------------- */

/* Deux dispositions relevées dans la maquette :
   « texte-photo » — texte 646 px à gauche, colonne de 520 px à droite
                     portant le chiffre encadré puis la photo ;
   « photo-texte » — photo à gauche, texte à droite, colonnes égales. */
.duo { display: grid; align-items: start; }
/* ⚠️ Des proportions, pas des pixels. Ces deux colonnes étaient écrites
   « 646px 520px » — les valeurs mesurées sur la maquette à 1440 px, figées
   telles quelles. Elles tenaient à cette largeur-là et à aucune autre : en
   dessous de 1240 px, les deux colonnes plus leur gouttière réclamaient
   1214 px dans un conteneur qui n'en offrait que 921, et la page entière
   se mettait à défiler horizontalement — visible sur toutes les pages
   secteur, entre 860 et 1240 px, soit une tablette ou un petit portable.

   Le créa, lui, écrit des proportions, qui s'adaptent à toute largeur :
       minmax(280px, 7fr) minmax(260px, 5fr)
   Elles redonnent exactement 728/520 à 1440 px, et 509/364 à 1023 px.
   Le `minmax` garde une largeur minimale à chaque colonne avant que la
   règle d'empilement ne les passe l'une sous l'autre. */
.duo--texte-photo { grid-template-columns: minmax(280px, 7fr) minmax(260px, 5fr); gap: 48px; }
.duo--photo-texte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.duo--egal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
/* Une grille NON marquée se replie quand la place manque, et non à un seuil :
   c'est ce qu'écrit la maquette (`auto-fit` + `minmax`). En pratique elle
   garde deux colonnes jusque vers 560 px. */
.duo:not([data-stack]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.section--deux-colonnes:not([data-stack]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
/* L'encadré posé à droite d'un texte : filet doré, coin arrondi en haut
   à gauche, et son texte en noir et non en gris. */
.encadre {
  padding: 32px; gap: 14px;
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
}
.encadre .section__corps { color: var(--noir); }
.section__surtitre--12 { font-size: 12px; }
.duo__texte { display: flex; flex-direction: column; gap: 20px; }
.duo__cote  { display: flex; flex-direction: column; gap: 20px; }
.duo__photo { width: 100%; overflow: hidden; border-radius: 10px; }
/* ⚠️ « max-height » sur le cadre ne retient pas l'image : elle gardait sa
   hauteur propre (580 px) et débordait sous un cadre plafonné à 460, que
   « overflow: hidden » masquait à l'œil mais pas à la mesure. Le plafond
   doit être reporté sur l'image elle-même. */
.duo__photo img, .duo__photo video {
  width: 100%; height: 100%; max-height: 100%;
  object-fit: cover; display: block; border-radius: 10px;
}
/* Dans ces sections le texte occupe déjà sa colonne : pas de bride en plus. */
.duo .section__entete, .duo .section__corps, .duo .section__intro { max-width: none; }

/* Le chiffre mis en avant, dans son encadré à filet doré. */
.chiffre {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px;
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
}
.chiffre__valeur { font-family: var(--titres); font-weight: 700; font-size: 44px; color: var(--noir); }
.chiffre__legende { font-size: 15px; color: var(--gris); }

/* Le paragraphe en aparté, souligné d'un filet vertical olive. */
.aparte {
  margin: 0; max-width: 70ch;
  padding-left: 18px; border-left: 2px solid var(--kaki);
  font-size: 15.5px; line-height: 1.6; color: var(--kaki);
}
.duo .aparte { max-width: none; }

/* Le second bloc titré, sous le premier (« Résultats obtenus »). */
.sous-bloc { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }

/* Le lien olive souligné, posé en fin de texte. */
.lien-en-ligne {
  align-self: flex-start;
  font-size: 16px; color: var(--kaki); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity .3s ease;
}
.lien-en-ligne:hover { opacity: .7; }

/* ---------- Sections « étapes » et « flèches » (pages mission) --------- */

/* Titre de second rang, 21 px : celui des blocs intérieurs. La maquette
   l'écrit en h3 ; on garde un h2 pour que la page reste navigable au
   lecteur d'écran, et on ne reprend que son apparence. */
.titre-bloc {
  margin: 0;
  font-family: var(--titres); font-weight: 600; font-size: 21px; line-height: 1.3;
  color: var(--noir);
}
.section--noir .titre-bloc { color: var(--blanc); }

.etapes { display: flex; flex-direction: column; gap: 20px; }
/* Les étapes se replient par la place, pas par un nombre de colonnes fixé :
   la maquette écrit `auto-fit` + `minmax(min(100%, 240px), 1fr)`. Avec un
   nombre figé, quatre étapes restaient sur quatre colonnes de 209 px à
   1023 px, là où la maquette en montre trois de 288. */
.cartes-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.carte-etape {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px;
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
}
.carte-etape__numero { font-family: var(--titres); font-weight: 700; font-size: 32px; color: var(--or); }
.carte-etape__titre  { font-family: var(--titres); font-weight: 600; font-size: var(--t-carte); color: var(--noir); }
.carte-etape__texte  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gris); }

/* Le second bloc de la section « étapes » est détaché du premier. */
.duo--suite { margin-top: 88px; }

/* La section « rôle du cabinet » : entête à gauche, liste à droite. */
/* Les deux colonnes sont dans un RAPPORT (1 et 1,2), pas en largeurs fixes.
   Un « 567px » figé coïncidait à 1440 px et se trompait partout ailleurs :
   à 1023 px la maquette donne 397/476, nous donnions 567 et une colonne. */
.section--deux-colonnes {
  display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
  gap: 48px; align-items: start;
}
.fleches__entete { display: flex; flex-direction: column; gap: 16px; }
.fleches__intro  { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-clair); }
.fleches {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--or);
}
/* Chaque point est souligné d'un filet doré, et pas seulement la liste :
   la maquette pose un filet au-dessus du premier et sous chacun d'eux. */
.fleches__point {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--or);
}
.fleches__signe { font-size: 20px; line-height: 1.4; color: var(--or); flex: none; }
.fleches__texte { font-size: 15px; line-height: 1.65; color: var(--texte-clair); }

/* La phrase qui ferme l'accordéon des pages secteur. */
.accordeon__apres { margin: 32px 0 0; max-width: 70ch; font-size: 16px; line-height: 1.6; }
.section--noir .accordeon__apres { color: var(--texte-clair); }

/* ⚠️ Le créa ne replie PAS ses blocs à deux colonnes à un seuil donné : il
   les laisse se replier quand la place manque (`auto-fit` + `minmax`). Les
   forcer à une colonne dès 859 px les repliait trop tôt, et la comparaison
   le voyait sur dix pages. On reprend son mécanisme. */
@media (max-width: 859px) {
  .duo--suite { margin-top: 48px; }
}

@media (max-width: 859px) {
  /* Seules les grilles MARQUÉES se replient à ce seuil. Les autres se
     replient quand la place manque — voir la règle générale plus bas. */
  /* La règle du créa, telle quelle : toute grille marquée « 2 » passe à une
     colonne ici, quelle que soit la classe qui la porte. */
  [data-stack="2"] { grid-template-columns: 1fr !important; gap: 32px; }
  .duo--photo-texte .duo__photo { order: 2; }
  /* Le créa écrit, pour toute photo d'un bloc à deux colonnes replié :
     `height:auto; min-height:0; aspect-ratio:4/3`. Une hauteur en clamp,
     choisie de notre côté faute de référence, donnait un cadrage différent
     du sien sur une vingtaine de blocs. */
  .duo__photo { height: auto !important; min-height: 0 !important; }
  .duo__photo, .duo__photo img, .duo__photo video { aspect-ratio: 4 / 3; height: auto; }
  .expertise__photo { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Cartes « enjeux » (numérotées, filet doré) ---------------- */

.cartes-enjeux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.carte-enjeu {
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.carte-enjeu__numero {
  font-family: var(--titres); font-weight: 700;
  font-size: 32px; color: var(--or);
}
.carte-enjeu__texte { margin: 0; font-size: 16px; line-height: 1.65; }

/* ---------- Carte simple à filet doré --------------------------------- */

.carte-filet {
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.carte-filet__accroche {
  font-family: var(--titres); font-weight: 600;
  font-size: 19px; line-height: 1.3;
}

/* ---------- Accordéon « Nos missions types » --------------------------
 *
 * ⚠️ Les valeurs viennent du fichier de maquette, pas du README : celui-ci
 * annonce des titres de 19 px là où la page en dessine 24, et un corps de
 * 15 px là où elle en met 18. Le README lui-même précise qu'en cas de doute,
 * c'est le fichier qui fait foi. À signaler au créa.
 *
 * L'accordéon est réparti sur deux colonnes, avec un filet de fermeture
 * sous la dernière ligne de chacune. */
.accordeon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 48px;
}
.accordeon__colonne { display: flex; flex-direction: column; }
.accordeon__ligne { border-top: 1px solid var(--or); }
.accordeon__fin { height: 1px; background: var(--or); }

/* La maquette met la typographie sur le libellé, pas sur le bouton — qui,
   lui, est en « all: unset » et hérite donc du corps de texte. Reproduire
   cette répartition compte : sinon la boîte mesurée n'est pas la même. */
.accordeon__bouton {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
}
.accordeon__libelle {
  font-family: var(--titres); font-weight: 500;
  font-size: 24px; line-height: 1.3;
  color: var(--blanc);
}
.accordeon__fleche {
  flex: none; font-size: 32px; line-height: 1;
  color: var(--or);
  transition: transform .3s var(--courbe);
}
.accordeon__ligne.est-ouvert .accordeon__fleche { transform: rotate(90deg); }

.accordeon__corps {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--courbe), opacity .3s ease;
}
.accordeon__ligne.est-ouvert .accordeon__corps { max-height: 200px; opacity: 1; }
.accordeon__texte {
  margin: 0; padding: 0 4px 22px;
  font-size: 18px; line-height: 1.6;
  color: var(--texte-clair);
}

/* ---------- Cartes de liste (pages Secteurs et Missions) -------------- */

.cartes-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.carte-liste {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--noir);
  background: var(--blanc);
  border-radius: 10px;
  overflow: hidden;
}
.carte-liste__cadre { overflow: hidden; }
.carte-liste__cadre img {
  display: block; width: 100%; height: 200px;
  object-fit: cover; transform-origin: center;
  transform: scale(1);
  transition: transform .5s var(--courbe);
}
.carte-liste:hover .carte-liste__cadre img { transform: scale(1.06); }
.carte-liste__corps {
  padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.carte-liste__titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.3;
}
.carte-liste__accroche {
  font-size: 15px; line-height: 1.5;
  color: var(--kaki); font-weight: 600;
}
.carte-liste__texte {
  margin: 0; flex: 1;
  font-size: 15px; line-height: 1.65; color: var(--gris);
}
.carte-liste__lien {
  font-size: 14px; color: var(--kaki); margin-top: 6px;
  transition: opacity .3s ease;
}
.carte-liste__lien:hover { opacity: .7; }

/* Sur les pages liste, le bandeau de contact est DANS la section crème :
   il n'a donc pas les marges latérales de la version pleine page. */
.cta-olive--dans-section {
  margin: 16px 0 0;
}

/* ---------- Bandeau de contact, commun à toutes les pages ------------- */

.section--noir .carte-enjeu,
.section--noir .carte-filet,
.section--noir .accordeon__ligne { border-color: var(--or-clair); }


/* ---------- Blocs propres à la page Missions -------------------------- */

.section__surtitre {
  font-family: var(--titres); font-weight: 600;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--or);
}

/* La chaîne des juridictions : une suite d'étiquettes. */
/* Les étapes de la chaîne juridictionnelle : des pastilles à la largeur de
   leur texte, et non quatre colonnes égales. Relevé : écart de 14 px,
   fond doré très pâle, filet olive, coins arrondis de 10 px. */
.chaine {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.chaine__etape {
  background: rgba(217, 189, 73, .06);
  border: 1px solid var(--kaki);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 15px; line-height: 1.25;
  color: var(--blanc);
}

/* Les quatre entrées « Par domaine ».
   Relevé sur la maquette : quatre colonnes jointives de 324 px, sans écart ;
   chaque entrée porte une photo de 284x140, puis son nom, puis le lien.
   Ni filet doré ni coin arrondi — je les avais ajoutés, ils n'y sont pas. */
.entrees-domaine {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.entree-domaine {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 20px;
  text-decoration: none; color: var(--noir);
  transition: opacity .3s ease;
}
.entree-domaine:hover { opacity: .7; }
.entree-domaine__cadre { width: 100%; height: 140px; overflow: hidden; }
.entree-domaine__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entree-domaine__titre {
  font-family: var(--titres); font-weight: 600; font-size: var(--t-carte);
}
.entree-domaine__lien { font-size: 14px; color: var(--kaki); }

@media (max-width: 559px) {
  .entrees-domaine { grid-template-columns: 1fr; }
}

/* ---------- Page « Le cabinet » ---------------------------------------
   Relevé section par section dans la maquette : fonds, grilles, cartes.
   ---------------------------------------------------------------------- */

/* Notre histoire — deux colonnes égales, texte à gauche, photo à droite. */
.cabinet-histoire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.cabinet-histoire__texte {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 64ch;
}
.cabinet-histoire__texte p {
  margin: 0;
  font-size: 16px; line-height: 1.75; color: var(--gris);
}
.cabinet-histoire__photo {
  width: 100%; height: 400px;
  object-fit: cover; border-radius: 10px;
}

/* L'approche — trois cartes à filet doré, sur fond NOIR. */
.engagements {
  display: grid;
  /* ⚠️ `min(100%, 240px)` et non `240px`. Un minimum exprimé en pixels est
     un plancher que la colonne ne peut pas franchir : trois colonnes de
     240 px réclamaient 776 px avec les gouttières, dans un conteneur qui
     n'en offrait que 503 sur téléphone — la page entière se mettait à
     défiler latéralement. Le `min(100%, …)` laisse le plancher s'abaisser
     jusqu'à la largeur disponible. C'est la formule qu'écrit le créa. */
  grid-template-columns: repeat(3, minmax(min(100%, 240px), 1fr));
  gap: 28px;
}
.engagement {
  display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
  padding: 28px 24px;
}
.engagement__numero {
  font-family: var(--titres); font-weight: 700;
  font-size: 32px; color: var(--or);
}
.engagement__titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.3; color: var(--blanc);
}
.engagement__texte p {
  margin: 0 0 .9em;
  font-size: 15px; line-height: 1.7; color: var(--texte-clair);
}
.engagement__texte p:last-child { margin-bottom: 0; }

/* La rangée de liens vers les secteurs, sous les trois cartes. */

/* L'équipe — deux colonnes de cartes CRÈME sur fond BLANC. */
.equipe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.fiche-equipe {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 22px;
  border-radius: 10px;
  background: var(--creme);
  padding: 24px;
}
/* Le portrait occupe toute la hauteur de la carte, pas un ratio fixe :
   la maquette lui donne « aspect-ratio: 4/5 » mais son emplacement s'étire
   sur la rangée de grille, ce qui fait 264 px et non 175. */
.fiche-equipe__portrait {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 8px;
}
/* Le bouton de repli n'a de sens que sous 859 px : au-dessus, le nom, le
   rôle, le portrait et le parcours sont tous visibles d'emblée. */
.fiche-equipe__bascule { display: none; }

.fiche-equipe__texte { display: flex; flex-direction: column; gap: 10px; }
.fiche-equipe__identite { display: flex; flex-direction: column; gap: 3px; }
.fiche-equipe__nom {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); color: var(--noir);
}
.fiche-equipe__role { font-size: 13px; color: var(--kaki); }
.fiche-equipe__parcours p {
  margin: 0 0 .8em;
  font-size: 14px; line-height: 1.65; color: var(--gris);
}
.fiche-equipe__parcours p:last-child { margin-bottom: 0; }
.fiche-equipe__langues {
  margin-top: 2px; padding-top: 10px;
  border-top: 1px solid #E5DCC3;
  font-size: 13px; color: var(--kaki);
}

/* Mécénat — trois cartes BLANCHES sur fond CRÈME. */
/* Trois cartes qui se replient par la place et non par seuil : trois de
   front, puis deux, puis une, sans qu'aucun seuil ne soit écrit. C'est ce
   que fait la maquette, qui ne marque pas cette grille. */
.cartes-mecenat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
}
.carte-mecenat {
  display: flex; flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blanc);
}
.carte-mecenat__visuel { position: relative; }
.carte-mecenat img { display: block; width: 100%; height: 260px; object-fit: cover; }
/* Crédit photographique posé sur l'image : l'ombre portée le garde lisible
   quel que soit le fond, sans voile ni cartouche. */
.carte-mecenat__credit {
  position: absolute; left: 10px; bottom: 8px;
  font-family: var(--courant); font-size: 11px; line-height: 1;
  color: var(--blanc); text-shadow: 0 0 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.carte-mecenat__corps { padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.carte-mecenat__titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.35; color: var(--noir);
}
.carte-mecenat__texte p {
  margin: 0 0 .8em;
  font-size: 14px; line-height: 1.65; color: var(--gris);
}
.carte-mecenat__texte p:last-child { margin-bottom: 0; }

/* ---------- E brezhoneg ------------------------------------------------
   Section apparue dans l'export du 30/09 : le texte breton et sa traduction
   française, côte à côte avec une photo de la côte. Les deux colonnes sont
   de même hauteur — la photo s'étire sur la hauteur de la carte. */
.brezhoneg__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 28px;
  align-items: stretch;
}
.brezhoneg__image {
  display: block;
  width: 100%; height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 10px;
}
/* Deux filets dorés seulement, en haut et à gauche : la carte est « ouverte »
   vers le bas et la droite, comme dans la maquette. */
.brezhoneg__carte {
  border-top: 1px solid var(--or-clair);
  border-left: 1px solid var(--or-clair);
  border-radius: 10px 0 0 0;
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 14px;
}
.brezhoneg__titre {
  margin: 0 0 6px;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h2); color: var(--blanc);
}
.brezhoneg__breton {
  margin: 0;
  font-size: 17px; line-height: 1.6; color: var(--blanc);
  text-wrap: pretty;
}
/* La signature ferme le texte breton : même corps que lui, mais en italique
   et alignée à droite, comme une signature de lettre. */
.brezhoneg__signature {
  margin: 6px 0 0;
  align-self: flex-end;
  font-size: 17px; line-height: 1.6; font-style: italic;
  color: var(--blanc);
}
.brezhoneg__filet { height: 1px; background: var(--creme); margin: 12px 0 6px; }
.brezhoneg__francais {
  margin: 0;
  font-size: 14px; line-height: 1.65; color: var(--creme);
  text-wrap: pretty;
}

/* Le bandeau de contact de cette page est posé sur un fond crème. */
.cta-sur-fond {
  position: relative;
  margin-top: -24px;
  border-radius: 20px 20px 0 0;
  background: var(--creme);
  padding: 56px var(--marge-laterale) 72px;
}
.cta-sur-fond .cta-olive { margin: 0; }
.cta-olive__texte--court { max-width: 600px; }

/* Le chapô des sections de cette page : 17 px, gris. */
.section__intro--17 { font-size: 17px; line-height: 1.6; color: var(--gris); }

/* ---------- Page Contact ---------------------------------------------- */

/* Relevé sur la maquette : formulaire 682 px, coordonnées 558 px, 56 px
   entre les deux. */
.contact-duo {
  display: grid;
  grid-template-columns: minmax(0, 682fr) minmax(0, 558fr);
  gap: 56px;
  align-items: start;
}
.contact-formulaire form { display: flex; flex-direction: column; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-size: 14px; color: var(--noir); }
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--or-clair);
  border-radius: 10px;
  background: var(--blanc);
  font-family: var(--courant); font-size: 16px; color: var(--noir);
}
.champ textarea { height: 140px; padding: 14px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--kaki);
  outline-offset: 1px;
  border-color: var(--kaki);
}

/* Le bouton d'envoi est olive dans la maquette, et non noir : 14 px,
   graisse 500, 26 px de part et d'autre du texte. */
.bouton-noir--envoyer {
  align-self: flex-start;
  background: var(--kaki);
  padding: 0 26px; height: 50px;
  border: 0; cursor: pointer; border-radius: 10px;
  font-family: var(--courant); font-size: 14px; font-weight: 500;
  color: var(--blanc);
}
.bouton-noir--envoyer:hover { opacity: .88; }

/* Le pot de miel doit être invisible à l'œil mais présent pour un robot :
   ni display:none ni hidden, que les robots savent détecter. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.message {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 16px; line-height: 1.6;
}
.message--succes { background: #E7DFB8; color: var(--noir); }
.message--erreur { background: #F5E9DE; color: var(--noir); border-left: 3px solid var(--kaki); }

.contact-mention { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gris); }

.contact-coordonnees { display: flex; flex-direction: column; gap: 28px; font-size: 16px; line-height: 1.7; }
.contact-bloc { display: flex; flex-direction: column; gap: 4px; }
.contact-bloc__titre { font-family: var(--titres); font-weight: 600; font-size: var(--t-carte); margin-bottom: 4px; }
.contact-bloc a { color: var(--noir); text-decoration: none; }
.contact-bloc a:hover { color: var(--kaki); }

.contact-plan { display: flex; flex-direction: column; gap: 10px; }
.contact-plan__bouton {
  align-self: flex-start;
  height: 50px; padding: 0 22px;
  border: 1px solid var(--or-clair); border-radius: 10px;
  background: var(--blanc); color: var(--noir);
  font-family: var(--courant); font-size: 14px; cursor: pointer;
  transition: background .2s ease;
}
.contact-plan__bouton:hover { background: var(--beige); }
.contact-plan__mention { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gris); }
.contact-plan iframe { width: 100%; height: 320px; border: 0; border-radius: 10px; }

@media (max-width: 859px) {
  .duo-texte-image,
  .contact-duo,
  .heros-page__interieur { grid-template-columns: 1fr; }
  /* La fiche devient un accordéon : le bouton porte le nom et le rôle, et
     le reste — portrait et parcours — se replie. Une seule fiche ouverte à
     la fois ; la première l'est au chargement. */
  .fiche-equipe { grid-template-columns: 1fr; gap: 16px; padding: 16px 20px; }

  .fiche-equipe__bascule {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; min-height: 44px;
    padding: 0; border: none; background: none; cursor: pointer;
    text-align: left; font-family: inherit; color: inherit;
  }
  .fiche-equipe__bascule-textes { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .fiche-equipe__chevron {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    background: var(--kaki-clair);
    display: flex; align-items: center; justify-content: center;
    color: var(--noir);
    transition: transform .3s ease;
  }
  .fiche-equipe[data-ouvert="true"] .fiche-equipe__chevron { transform: rotate(180deg); }

  /* L'identité est portée par le bouton : la répéter ferait doublon. */
  .fiche-equipe__identite { display: none; }
  .fiche-equipe[data-ouvert="false"] .fiche-equipe__repliable { display: none; }

  .fiche-equipe__portrait { max-width: none; aspect-ratio: 1 / 1; height: auto; }
}

/* L'accordéon existe sur fond noir (pages secteur) comme sur fond crème
   (pages mission) : les couleurs suivent le fond de leur section. */
.section--creme .accordeon__libelle,
.section--blanc .accordeon__libelle { color: var(--noir); }
.section--creme .accordeon__texte,
.section--blanc .accordeon__texte { color: var(--gris); }

/* =========================================================================
   Page « Études et analyses » — lot 3
   Valeurs relevées dans `Zoning V2 - 06 Etudes et analyses.dc.html`.
   ========================================================================= */

.etudes-liste { gap: 40px; padding-bottom: clamp(60px, 7vw, 90px); }
.etudes-liste__corps { display: flex; flex-direction: column; gap: 40px; }
.etudes-liste__vide { margin: 0; font-size: 18px; line-height: 1.6; color: var(--gris); max-width: 60ch; }
.etudes-liste__compte { font-size: 15px; color: var(--gris); }

/* ---------- Les filtres ------------------------------------------------- */

.filtres { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* Le groupe est une gélule blanche ; les pastilles vivent dedans. */
.filtres__groupe {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: var(--blanc); border-radius: 32px; padding: 10px;
}
.filtre {
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 14px; line-height: 1.2;
  text-decoration: none;
  /* Cible tactile d'au moins 44 px, comme le demande le créa. */
  min-height: 44px; display: flex; align-items: center;
  transition: background .2s ease, color .2s ease;
}
.filtre--domaine { border: 1px solid var(--or); color: var(--noir); }
.filtre--type    { border: 1px solid var(--kaki); color: var(--noir); }
.filtre--domaine.filtre--actif { background: var(--or-texte); color: var(--blanc); }
.filtre--type.filtre--actif    { background: var(--kaki); color: var(--blanc); }
@media (hover: hover) {
  .filtre:not(.filtre--actif):hover { background: var(--kaki-clair); }
}

/* ---------- La carte « à la une » --------------------------------------- */

.etude-une {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 10px; overflow: hidden;
  background: var(--blanc);
  text-decoration: none; color: var(--noir);
}
.etude-une__cadre { overflow: hidden; }
.etude-une__cadre img {
  display: block; width: 100%; height: 100%;
  min-height: 280px; object-fit: cover;
}
.etude-une__corps { padding: 36px 36px 40px; display: flex; flex-direction: column; gap: 16px; }
.etude-une__etiquettes {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--titres); font-weight: 600;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.etude-une__titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h2); line-height: 1.3; color: var(--noir);
  text-wrap: pretty;
}
/* « flex: 1 » pousse le lien en bas de carte quelle que soit la longueur
   de l'accroche — sans quoi il remonterait coller au texte. */
.etude-une__accroche { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gris); flex: 1; }
.etude-une__lien { font-size: 14px; color: var(--kaki); margin-top: 6px; }

/* ---------- Aucun résultat ---------------------------------------------- */

.etudes-liste__aucun {
  background: var(--blanc); border-radius: 10px;
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.etudes-liste__aucun-titre {
  margin: 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.4; color: var(--noir);
}

/* ---------- La grille --------------------------------------------------- */

.etudes-grille-section { gap: 36px; padding-bottom: clamp(40px, 6vw, 80px); }
.etudes-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.carte-etude {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--bord-carte);
  text-decoration: none; color: var(--noir);
}
.carte-etude__cadre { overflow: hidden; }
.carte-etude__cadre img {
  display: block; width: 100%; height: 140px; object-fit: cover;
  transition: transform .5s var(--courbe);
}
/* Le zoom au survol n'existe pas au doigt : sur tactile, la carte reste
   immobile plutôt que de garder un agrandissement qu'on ne peut pas défaire. */
@media (hover: hover) {
  .carte-etude:hover .carte-etude__cadre img { transform: scale(1.06); }
}
.carte-etude__corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-etude__etiquettes {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--titres); font-weight: 600;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
/* Les étiquettes portent déjà une taille sur les cartes d'une page secteur.
   Dans ces deux grilles-ci, c'est le conteneur qui la fixe — 11 px dans la
   grille, 12 px sur la carte « à la une ». */
.carte-etude__etiquettes .etude__type,
.carte-etude__etiquettes .etude__categorie,
.etude-une__etiquettes .etude__type,
.etude-une__etiquettes .etude__categorie {
  font-size: inherit; letter-spacing: inherit;
}
.carte-etude__titre {
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.35; color: var(--noir);
  text-wrap: pretty; flex: 1;
}
.carte-etude__lien { font-size: 13px; color: var(--kaki); margin-top: 4px; }

/* ---------- La pagination ----------------------------------------------- */

.pagination { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pagination__bouton {
  border: 1px solid var(--or-clair); border-radius: 8px;
  padding: 9px 16px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--gris); background: var(--blanc);
  text-decoration: none;
  transition: background .2s ease;
}
.pagination__bouton--actuel { background: var(--kaki); border-color: var(--kaki); color: var(--blanc); }
.pagination__coupure { color: var(--gris); padding: 0 4px; }
@media (hover: hover) {
  .pagination__bouton:not(.pagination__bouton--actuel):hover { background: var(--kaki-clair); }
}

/* ---------- Petits écrans ------------------------------------------------ */

@media (max-width: 1023px) { .etudes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px)  { .etude-une { grid-template-columns: 1fr; } }
@media (max-width: 559px)  {
  .etudes-grille { grid-template-columns: 1fr; }
  /* Les deux analyses de l'accueil tiennent côte à côte jusqu'ici : le créa
     les range parmi les grilles de quatre (2 colonnes sous 1023, 1 sous 559)
     et non parmi les blocs à deux colonnes, qui se replient dès 859. */
  .etudes__grille { grid-template-columns: 1fr; }
}

/* =========================================================================
   Gabarit d'article — lot 3
   Valeurs relevées dans `Zoning V2 - Article - Lorem telecom.dc.html`, qui
   est la page de référence : le créa y a réuni TOUS les éléments de texte
   riche, précisément pour qu'aucun ne se retrouve sans apparence le jour où
   la cliente s'en sert.
   ========================================================================= */

/* ---------- Le hero ------------------------------------------------------ */

.heros-article__interieur {
  position: relative;
  padding: clamp(48px, 7vw, 88px) var(--marge-laterale) clamp(60px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.heros-article__texte { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
/* ⚠️ « height: auto » est indispensable. WordPress pose sur ses images des
   attributs `width` et `height` repris du fichier : sans cette ligne, une
   photo en hauteur de 1 350 × 1 800 était étirée sur 1 800 px de haut, le
   ratio 3/2 ignoré. L'attribut HTML l'emporte tant qu'aucune hauteur CSS ne
   le contredit. */
.heros-article__image {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px;
}

.fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--texte-clair); }
.fil-ariane a { color: var(--texte-clair); text-decoration: none; }
.fil-ariane__actuel { color: var(--blanc); }

.article-etiquettes {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--titres); font-weight: 600;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.article-etiquettes__type    { color: var(--blanc); }
.article-etiquettes__domaine { color: var(--or); }

.signature { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--texte-clair); }
.signature__portrait {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  display: block; flex: none;
}

/* ---------- La colonne de lecture et sa colonne latérale ----------------- */

.article-corps {
  position: relative; z-index: 1;
  margin-top: -24px;
  background: var(--creme);
  border-radius: 20px 20px 0 0;
  padding: clamp(60px, 8vw, 96px) var(--marge-laterale) clamp(60px, 7vw, 90px);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.article-texte {
  background: var(--blanc); border-radius: 10px;
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 20px;
  font-size: 16px; line-height: 1.75; color: var(--gris);
  /* 820 px, c'est la largeur du TEXTE, pas celle du bloc : la maquette ne
     pose pas `box-sizing: border-box`, et sa marge intérieure s'ajoute donc
     à cette valeur. D'où le calcul, qui reproduit les 932 px mesurés à
     1440 px comme aux largeurs intermédiaires. */
  max-width: calc(820px + 2 * clamp(28px, 4vw, 56px));
}

/* La pastille de référence de décision, au-dessus du chapô. */
.article-reference {
  align-self: flex-start;
  background: var(--creme); border-radius: 20px;
  padding: 8px 16px;
  font-family: var(--titres); font-weight: 600;
  font-size: 14px; color: var(--kaki);
}
.article-chapo { margin: 0; font-size: 18px; line-height: 1.7; color: var(--noir); text-wrap: pretty; }

/* ---------- Le texte riche saisi par la cliente -------------------------- */
/* Ces règles visent les enfants directs de l'article, c'est-à-dire ce que
   l'éditeur de WordPress produit. Chacune correspond à un élément dessiné
   par le créa ; aucune n'est inventée. */

.article-texte > p { margin: 0; }
.article-texte > h2 {
  margin: 24px 0 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-h2); line-height: 1.25; color: var(--noir); text-wrap: pretty;
}
.article-texte > h3 {
  margin: 12px 0 0;
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); line-height: 1.35; color: var(--noir); text-wrap: pretty;
}
.article-texte strong, .article-texte b { font-weight: 600; color: var(--noir); }
.article-texte em, .article-texte i { font-style: italic; }
.article-texte a {
  color: var(--kaki);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .article-texte a:hover { color: var(--noir); text-decoration-color: var(--noir); }
}

.article-texte > ul, .article-texte > ol {
  margin: 0; display: flex; flex-direction: column; gap: 8px;
}
.article-texte > ul { padding: 0 0 0 22px; list-style-type: square; }
.article-texte > ol { padding: 0 0 0 24px; }
.article-texte li { padding-left: 6px; }

.article-texte blockquote {
  margin: 12px 0;
  background: var(--creme); border-radius: 10px;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.article-texte blockquote p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--noir); text-wrap: pretty; }
.article-texte blockquote cite {
  font-style: normal;
  font-family: var(--titres); font-weight: 600;
  font-size: 13px; letter-spacing: .04em; color: var(--kaki);
}
/* Posé en tête du bloc, le <cite> n'est pas une source mais un intitulé —
   « Conclusions du rapporteur public ». Le créa l'écrit alors plus petit et
   en capitales. */
.article-texte blockquote cite:first-child {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}

.article-texte figure { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.article-texte figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.article-texte figcaption { font-size: 13px; line-height: 1.5; color: var(--kaki); }

/* Un tableau large ne doit pas élargir la page : il défile sur lui-même.
   C'est le seul endroit du site où un défilement horizontal est voulu. */
.article-texte .wp-block-table { overflow-x: auto; margin: 4px 0 12px; }
.article-texte .wp-block-table figcaption { margin-top: 10px; }
/* Le soulignement du créa : simple trait, sans décalage ni couleur — à ne
   pas confondre avec celui des liens, qui est doré. */
.article-texte u { text-decoration: underline; }
.article-texte table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 480px; }
.article-texte thead tr { border-bottom: 1px solid var(--or); }
.article-texte th {
  text-align: left; padding: 10px 12px 10px 0;
  font-family: var(--titres); font-weight: 600;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--noir);
}
.article-texte tbody tr { border-bottom: 1px solid var(--bord-carte); }
.article-texte td { padding: 12px; }
.article-texte td:first-child { padding-left: 0; color: var(--noir); }
.article-texte td:last-child  { padding-right: 0; }

/* ---------- Le pied de l'article ---------------------------------------- */

.article-pied {
  border-top: 1px solid var(--bord-carte);
  margin-top: 12px; padding-top: 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
}
.article-pied__auteur {
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); color: var(--noir);
}
.article-pied__partage a {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--kaki); text-decoration: none; padding: 10px 4px;
}
.pastille-linkedin {
  width: 44px; height: 44px;
  border: 1px solid var(--or); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.pastille-linkedin img { width: 18px; height: 18px; display: block; }
.article-pied__partage .pastille-linkedin { width: 36px; height: 36px; }
.article-pied__partage .pastille-linkedin img { width: 16px; height: 16px; }

/* ---------- La colonne latérale ------------------------------------------ */

/* Elle suit la lecture : sous 860 px elle repasse sous l'article, où une
   colonne collante n'aurait plus de sens. */
.article-cote { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }

.carte-domaine { border-radius: 10px; overflow: hidden; background: var(--blanc); }
.carte-domaine img { display: block; width: 100%; height: 160px; object-fit: cover; }
.carte-domaine__corps { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.carte-domaine__sur {
  font-family: var(--titres); font-weight: 600;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--kaki);
}
.carte-domaine__nom {
  font-family: var(--titres); font-weight: 600;
  font-size: var(--t-carte); color: var(--noir); text-decoration: none;
}
.carte-domaine__lien { font-size: 14px; color: var(--kaki); text-decoration: none; }

.bloc-partage {
  border-radius: 10px; background: var(--blanc); padding: 20px;
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--noir);
  transition: background .2s ease;
}
@media (hover: hover) { .bloc-partage:hover { background: var(--beige); } }
.bloc-partage__textes { display: flex; flex-direction: column; gap: 4px; }
.bloc-partage__titre { font-family: var(--titres); font-weight: 600; font-size: 17px; }
.bloc-partage__sous { font-size: 14px; color: var(--kaki); }

/* ---------- Publications liées ------------------------------------------- */

.publications-liees { gap: 32px; padding-bottom: clamp(40px, 6vw, 60px); }
.publications-liees__entete {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px;
}
.publications-liees__lien { font-size: 14px; color: var(--kaki); text-decoration: none; }
.publications-liees__grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 24px;
}
.publications-liees .carte-etude__cadre img { height: 160px; }

/* ---------- Petits écrans ------------------------------------------------ */

/* Le créa fixe le seuil à 860 px pour l'article : deux colonnes tant que
   chacune garde au moins 420 px. */
@media (max-width: 859px) {
  /* ⚠️ `minmax(0, 1fr)` et non `1fr`. Une colonne `1fr` refuse de devenir
     plus étroite que son contenu le plus large : une image de carte en
     imposait la largeur, et l'article dépassait de 5 px — assez pour que
     la page défile latéralement sur téléphone. Le minimum à zéro autorise
     la colonne à se resserrer, et le contenu suit. */
  .article-corps { grid-template-columns: minmax(0, 1fr); }
  .article-cote  { position: static; }
}


/* =========================================================================
   Repli des grilles — le mécanisme du créa, repris tel quel
   -------------------------------------------------------------------------
   Deux familles, qu'il distingue par un attribut dans son HTML :
     · `data-stack="4"` : quatre de front, deux sous 1023 px, une sous 559 ;
     · `data-stack="2"` : deux de front, une sous 859 px.
   Une grille SANS attribut se replie quand la place manque, pas à un seuil.

   ⚠️ Ce bloc est volontairement le DERNIER du fichier. Posé plus haut, il
   était annulé par les règles de base déclarées après lui — les quatre
   entrées « Par domaine » restaient sur quatre colonnes à 1023 px alors que
   la règle existait bel et bien.
   ========================================================================= */

@media (max-width: 1023px) {
  [data-stack="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  [data-stack="2"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  [data-stack="4"] { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Vidéos à la place des photos ------------------------------
   Un emplacement photo accepte une vidéo (voir talan_video dans
   inc/images.php). Elle doit occuper exactement le cadre de l'image
   qu'elle remplace, sans quoi la page bouge au moment où la vidéo arrive.
   Les emplacements dont la règle vise une CLASSE la transmettent déjà à la
   balise video ; il ne reste à reprendre que « display: block », qu'une
   vidéo n'a pas par défaut, et la découpe. */
video.heros__image,
video.expertise__photo,
video.domaine__photo,
video.heros-article__image {
  display: block;
  object-fit: cover;
}