/* ==========================================================================
   ETL Expertise — feuille de styles du site
   Contraintes de portabilité Elementor (AGENTS.md, règle 7) :
   chaque section suit l'anatomie conteneur > conteneur interne > colonnes,
   et n'emploie que des effets qu'un widget sait reproduire.
   Mouvement : plaques photo épinglées, révélation au défilement, compteurs —
   réemployés de la page d'attente ; équivalents Elementor dans SPEC §10.
   ========================================================================== */

/* ── jetons : trois palettes, une seule active via <html data-palette> ── */

:root, :root[data-palette="actuel"] {
  --bar-bg: #200A2E; --utility-bg: #1A0725;
  --bar-fg: #F4EFF7; --bar-fg-mid: rgba(244,239,247,.84);
  --bar-fg-dim: rgba(244,239,247,.52); --bar-fg-faint: rgba(244,239,247,.22);
  --panel-bg: #F5F1EA; --panel-fg: #200A2E; --panel-fg-dim: rgba(32,10,46,.68);
  --feature-bg: #200A2E; --feature-fg: #F4EFF7; --feature-fg-dim: rgba(244,239,247,.62);
  --notes-bg: #1A0725; --notes-fg: #F4EFF7;
  --notes-fg-dim: rgba(244,239,247,.62); --notes-fg-faint: rgba(244,239,247,.55);
  --gold: #C9A227; --gold-bright: #E4C25C; --accent-panel: #7A6010;
  --rule-gold: rgba(244,239,247,.09); --rule-ink: rgba(32,10,46,.14);
  --hairline: rgba(201,162,39,.16); --cta-line: rgba(201,162,39,.55);
  --flag-bg: rgba(201,162,39,.13); --glow: rgba(201,162,39,.16);
  --cta-fg: #200A2E;
  --tuile-bg: #FFFFFF; --voile-fort: rgba(26,7,37,.94); --voile-faible: rgba(26,7,37,.58);
  --volet-relief: rgba(244,239,247,.05);
}

:root[data-palette="sobre"] {
  --bar-bg: #1C1A21; --utility-bg: #141318;
  --bar-fg: #F2F1EF; --bar-fg-mid: rgba(242,241,239,.82);
  --bar-fg-dim: rgba(242,241,239,.50); --bar-fg-faint: rgba(242,241,239,.20);
  --panel-bg: #F7F6F3; --panel-fg: #1C1A21; --panel-fg-dim: rgba(28,26,33,.66);
  --feature-bg: #232028; --feature-fg: #F2F1EF; --feature-fg-dim: rgba(242,241,239,.58);
  --notes-bg: #141318; --notes-fg: #F2F1EF;
  --notes-fg-dim: rgba(242,241,239,.58); --notes-fg-faint: rgba(242,241,239,.55);
  --gold: #C0982F; --gold-bright: #D9B65B; --accent-panel: #7E6317;
  --rule-gold: rgba(242,241,239,.08); --rule-ink: rgba(28,26,33,.13);
  --hairline: rgba(242,241,239,.10); --cta-line: rgba(192,152,47,.5);
  --flag-bg: rgba(28,26,33,.05); --glow: rgba(242,241,239,.04);
  --cta-fg: #141318;
  --tuile-bg: #FFFFFF; --voile-fort: rgba(20,19,24,.94); --voile-faible: rgba(20,19,24,.58);
  --volet-relief: rgba(242,241,239,.05);
}

:root[data-palette="clair"] {
  --bar-bg: #FFFFFF; --utility-bg: #F4F3F1;
  --bar-fg: #1F1C24; --bar-fg-mid: rgba(31,28,36,.78);
  --bar-fg-dim: rgba(31,28,36,.66); --bar-fg-faint: rgba(31,28,36,.24);
  --panel-bg: #FFFFFF; --panel-fg: #1F1C24; --panel-fg-dim: rgba(31,28,36,.66);
  --feature-bg: #221E29; --feature-fg: #F4F3F1; --feature-fg-dim: rgba(244,243,241,.60);
  --notes-bg: #F7F6F4; --notes-fg: #1F1C24;
  --notes-fg-dim: rgba(31,28,36,.70); --notes-fg-faint: rgba(31,28,36,.62);
  --gold: #7C6216; --gold-bright: #5F4B11; --accent-panel: #7C6216;
  --rule-gold: rgba(31,28,36,.08); --rule-ink: rgba(31,28,36,.12);
  --hairline: rgba(31,28,36,.10); --cta-line: rgba(150,119,27,.45);
  --flag-bg: rgba(31,28,36,.04); --glow: rgba(31,28,36,.03);
  --cta-fg: #FFFFFF;
  --tuile-bg: #FFFFFF; --voile-fort: rgba(255,255,255,.94); --voile-faible: rgba(255,255,255,.62);
  --volet-relief: rgba(31,28,36,.04);
}

:root {
  --display: Rajdhani, "Arial Narrow", sans-serif;
  --body: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(20px, 5vw, 64px);
  --measure: 1280px;
  --ease: cubic-bezier(.22,.7,.2,1);
}

/* ── base ── */

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

html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--panel-bg);
  color: var(--panel-fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent-panel); text-underline-offset: 3px; }
::selection { background: var(--gold); color: var(--cta-fg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

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

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 100;
  padding: 12px 20px; background: var(--gold); color: var(--cta-fg);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

/* ── en-tête : bandeau utilitaire + barre ── */

/* L'en-tête suit le défilement : « position: sticky » sur le bloc entier, car
   une barre collante à l'intérieur d'un en-tête relatif s'arrêterait au bas de
   celui-ci. Passé cent pixels, le bandeau utilitaire se replie et la barre
   s'abaisse : le menu reste atteignable sans occuper cent quatorze pixels
   d'écran en permanence.
   Elementor : conteneur d'en-tête → Advanced → Position « Fixed » (gratuit) ou
   Motion Effects → Sticky « Top » (Pro). Le repli du bandeau est un agrément,
   pas une exigence : sans lui, l'en-tête reste simplement à sa hauteur pleine. */
.entete { position: relative; z-index: 30; }

/* L'en-tête a son propre point de bascule, plus haut que celui des colonnes :
   logo, six entrées et le bouton de contact demandent environ 1120 px pour
   tenir sur une ligne. En deçà, c'est le volet qui prend la main — sinon la
   barre déborde et la page défile latéralement. */
@media (min-width: 1140px) {
  .entete { position: sticky; top: 0; }
  .entete .bandeau {
    overflow: hidden; max-height: var(--bandeau-h, 120px);
    transition: max-height 260ms var(--ease);
  }
  .entete.est-fige .bandeau { max-height: 0; }
  .entete.est-fige .barre__inner { min-height: 62px; }
  .entete.est-fige .marque img { --l: clamp(104px, 11vw, 138px); }
  .entete.est-fige .scene { box-shadow: 0 18px 34px -24px rgba(0,0,0,.55); }
  .barre__inner, .marque img { transition: min-height 260ms var(--ease), width 260ms var(--ease); }
}

.bandeau { background: var(--utility-bg); border-bottom: 1px solid var(--hairline); }
.bandeau__inner {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad);
  min-height: 38px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 4px 20px;
  font-size: 11.5px; color: var(--bar-fg-dim);
}
.bandeau__droite { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.bandeau a { color: var(--bar-fg-dim); text-decoration: none; }
.bandeau a:hover { color: var(--gold); }
.bandeau sup { font-size: .7em; }

/* ── sélecteur de langue ──
   Deux ou trois codes dans le bandeau utilitaire. La langue courante est
   marquée, pas cliquable à l'œil : elle garde la couleur du texte, les
   autres s'éclairent au survol comme les autres liens du bandeau. */
.langues { display: inline-flex; align-items: center; gap: 2px; }
.langues__lien {
  padding: 2px 6px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bar-fg-dim); text-decoration: none;
}
.langues__lien:hover { color: var(--gold); }
.langues__lien.est-actuelle { color: var(--bar-fg); background: var(--volet-relief); }

.scene {
  position: relative;
  background: radial-gradient(120% 140% at 82% 0%, var(--glow) 0%, transparent 62%), var(--bar-bg);
}

.barre { position: relative; z-index: 3; }
.barre__inner {
  max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 24px; min-height: 76px;
}

.marque { display: flex; align-items: center; flex: 0 0 auto; }
.marque img { --l: clamp(124px, 14vw, 170px); width: var(--l); height: auto; margin-left: calc(var(--l) * -.122); }

/* Le menu se range à droite, contre le bouton de contact : la marge
   automatique absorbe tout l'espace libre que « space-between » laissait
   au milieu. Le logo reste seul à gauche. */
.menu { display: flex; margin-inline-start: auto; }
.menu__liste { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }

.menu__btn {
  height: 100%; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 11px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--bar-fg-mid); font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.menu__btn:hover { color: var(--gold); }
.menu__btn[aria-expanded="true"], .menu__btn[aria-current="page"] {
  color: var(--gold); border-bottom-color: var(--gold);
}

.chevron {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 260ms var(--ease);
}
.menu__btn[aria-expanded="true"] .chevron { transform: translateY(1px) rotate(-135deg); }

.barre__droite { display: flex; align-items: center; }

/* ── bouton du menu mobile ──
   Trois traits : le trait du milieu est l'élément, les deux autres ses
   pseudo-éléments. Ouvert, le milieu s'efface et les deux autres se
   croisent. Zone tactile de 44 px, le minimum confortable au pouce. */
.burger {
  display: none; width: 44px; height: 44px; flex: 0 0 auto;
  align-items: center; justify-content: center;
  margin-inline-end: -10px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--bar-fg);
}
.burger__traits, .burger__traits::before, .burger__traits::after {
  display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.burger__traits { position: relative; }
.burger__traits::before, .burger__traits::after { content: ""; position: absolute; left: 0; }
.burger__traits::before { top: -7px; }
.burger__traits::after  { top: 7px; }
.burger[aria-expanded="true"] .burger__traits { background: transparent; }
.burger[aria-expanded="true"] .burger__traits::before { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__traits::after  { transform: translateY(-7px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.bouton-contact {
  display: inline-flex; align-items: center; padding: 11px 20px;
  background: var(--gold); color: var(--cta-fg);
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background 150ms ease;
}
.bouton-contact:hover { background: var(--gold-bright); }

/* panneaux du méga-menu */
/* « display » ne se transitionne pas : le panneau s'ouvrait en 200 ms et se
   fermait d'un coup. L'opacité et la translation, elles, se transitionnent
   dans les deux sens ; « visibility » le retire du parcours au clavier comme
   le faisait « display: none », et son délai attend la fin du fondu.
   Elementor : Motion Effects → Entrance Animation, Fade In Down. */
.panneau {
  position: absolute; inset: auto 0 auto 0; z-index: 2;
  background: var(--panel-bg); color: var(--panel-fg);
  border-top: 1px solid var(--rule-gold);
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.45);
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease),
              visibility 0s linear 260ms;
}
.panneau.est-ouvert {
  visibility: visible; opacity: 1; transform: translateY(0);
  pointer-events: auto;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease),
              visibility 0s;
}

.panneau__grille {
  max-width: var(--measure); margin: 0 auto; padding: 34px var(--pad) 38px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 44px;
}
.colonne { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.colonne__titre {
  margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--rule-ink);
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-panel);
}
.entree { display: block; padding: 8px 0; color: var(--panel-fg); text-decoration: none; }
.entree:hover { color: var(--accent-panel); }
.entree:hover .entree__nom { text-decoration: underline; text-underline-offset: 3px; }
.entree__nom { display: block; font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.2; }
.entree__note { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--panel-fg-dim); }
.entree--phare { margin: -4px 0 4px; padding: 12px 14px; background: var(--flag-bg); border-inline-start: 2px solid var(--gold); }

.colonne--une {
  background: var(--feature-bg); color: var(--feature-fg);
  margin: -34px 0 -38px; margin-inline-end: calc(var(--pad) * -1);
  padding: 34px 0 38px; padding-inline: 30px var(--pad);
}
.colonne--une .colonne__titre { color: var(--gold); border-bottom-color: var(--rule-gold); }
.une__phrase { margin: 0 0 6px; font-family: var(--display); font-size: clamp(24px,2.6vw,31px); font-weight: 300; line-height: 1.16; text-wrap: balance; }
.une__corps { margin: 0 0 20px; font-size: 13.5px; line-height: 1.62; color: var(--feature-fg-dim); }
.une__lien {
  align-self: flex-start; display: inline-flex; align-items: center; padding: 11px 20px;
  border: 1px solid var(--cta-line); color: var(--gold);
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; transition: background 160ms ease, color 160ms ease;
}
.une__lien:hover { background: var(--gold); color: var(--feature-bg); border-color: var(--gold); }

/* ── sections : conteneur > conteneur interne > colonnes ── */

.sec { padding: clamp(52px, 7vw, 104px) var(--pad); }
.sec__inner { max-width: var(--measure); margin: 0 auto; }

.sec--encre { background: var(--bar-bg); color: var(--bar-fg); }
.sec--profond { background: var(--utility-bg); color: var(--notes-fg); }
.sec--clair { background: var(--panel-bg); color: var(--panel-fg); }
/* « sec--bord » ne trace plus de trait : deux sections de même fond se
   séparent par leur respiration. Le trait doré cassait le registre. */
.sec--bord { border-top: 0; }

.cols { display: grid; gap: clamp(32px, 5vw, 64px); }
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cols--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Deux colonnes inégales : le corps du texte, et la colonne d'appui qui porte
   les faits de la mission. Elementor : conteneur à deux colonnes 66 / 33. */
.cols--appui { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cols--appui { grid-template-columns: 1fr; } }

/* ── typographie ── */

.surtitre { margin: 0 0 18px; font-size: 10px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.sec--clair .surtitre { color: var(--accent-panel); }

.t1 { margin: 0 0 22px; font-family: var(--display); font-weight: 600; font-size: clamp(34px,6vw,64px); line-height: 1.04; letter-spacing: .005em; text-wrap: balance; }
.t2 { margin: 0 0 22px; font-family: var(--display); font-weight: 300; font-size: clamp(28px,3.8vw,46px); line-height: 1.12; text-wrap: balance; max-width: 22ch; }
.t3 { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: clamp(21px,2.4vw,27px); line-height: 1.2; }

.chapo { margin: 0 0 20px; font-size: clamp(17px,1.7vw,19px); line-height: 1.66; max-width: 62ch; color: inherit; }
.texte { margin: 0 0 16px; max-width: 68ch; text-wrap: pretty; }
.sec--encre .texte, .sec--profond .texte { color: var(--notes-fg-dim); }
.sec--clair .texte { color: var(--panel-fg-dim); }

/* ── composants ── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; background: var(--gold); color: var(--cta-fg);
  border: 1px solid var(--gold); font-size: 11px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--ligne { background: transparent; color: var(--gold); border-color: var(--cta-line); }
.btn--ligne:hover { background: var(--gold); color: var(--cta-fg); border-color: var(--gold); }

/* Un bouton qui suit un paragraphe respire. Règle de voisinage plutôt que
   vingt marges posées à la main dans les gabarits : elle ne s'applique ni
   quand le bouton est seul, ni dans une rangée de boutons. */
p + .btn, .texte + .btn, .chapo + .btn, .studio__mention + .btn { margin-top: 26px; }
.sec--clair .btn--ligne { color: var(--accent-panel); border-color: var(--rule-ink); }
.sec--clair .btn--ligne:hover { background: var(--accent-panel); color: var(--panel-bg); border-color: var(--accent-panel); }

.chiffre { display: flex; flex-direction: column; gap: 10px; }
.chiffre__val { font-family: var(--display); font-weight: 500; font-size: clamp(40px,5vw,62px); line-height: .9; }
.chiffre__lib { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--notes-fg-faint); }
.sec--clair .chiffre__lib { color: var(--panel-fg-dim); }

.liste-num { margin: 0; padding: 0; list-style: none; }
.liste-num li { display: flex; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule-ink); }
.sec--encre .liste-num li, .sec--profond .liste-num li { border-bottom-color: var(--rule-gold); }
.liste-num li:last-child { border-bottom: 0; }
.liste-num__num { min-width: 28px; font-size: 10px; letter-spacing: .16em; color: var(--gold); }
.sec--clair .liste-num__num { color: var(--accent-panel); }
.liste-num__nom { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; }
/* Un titre de publication ne se lit pas en capitales : la liste des sources
   garde la casse d'origine. */
.sources .liste-num__nom { font-size: 16px; letter-spacing: 0; text-transform: none; line-height: 1.45; }

.carte { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--rule-ink); }
.carte__note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--panel-fg-dim); }
.carte a { text-decoration: none; }

.puces { margin: 0 0 16px; padding-inline-start: 20px; max-width: 62ch; }
.puces li { margin-bottom: 8px; }

/* ── colonne d'appui : les faits de la mission, d'un coup d'œil ──
   Elle suit le défilement sur grand écran ; sous 901 px elle repasse dans le
   flux, sous le texte. Elementor : conteneur avec Position « Sticky » (Pro) ou
   simple colonne — rien du contenu ne dépend du collage. */
/* La colonne d'appui ne porte ni fond ni cadre : elle se tient par sa
   typographie et par un seul filet vertical, discret. Un aplat beige et une
   bordure dorée faisaient encart publicitaire. */
.appui {
  align-self: start;              /* sinon la grille l'étire sur toute la hauteur */
  padding: 2px 0; padding-inline-start: 26px;
  border-inline-start: 1px solid var(--rule-ink);
}
.sec--encre .appui, .sec--profond .appui { border-inline-start-color: var(--rule-gold); }
@media (min-width: 901px) { .appui { position: sticky; top: 88px; } }

.appui__titre {
  margin: 0 0 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-panel);
}
.sec--encre .appui__titre, .sec--profond .appui__titre { color: var(--gold); }
.sec--encre .appui__liste dt, .sec--profond .appui__liste dt { color: var(--notes-fg-faint); }
.appui__liste { margin: 0; }
.appui__liste dt {
  margin-top: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--panel-fg-dim);
}
.appui__liste dt:first-of-type { margin-top: 0; }
.appui__liste dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.5; }
.appui__liste dd a { color: var(--accent-panel); text-decoration: none; border-bottom: 1px solid var(--rule-ink); }
.appui__liste dd a:hover { border-bottom-color: var(--accent-panel); }

/* Les chiffres d'une mission ne s'inventent pas : tant que le cabinet ne les a
   pas fournis, la liste reste vide et le bloc ne s'affiche pas. */
.appui__chiffres { margin: 22px 0 0; display: grid; gap: 16px; }
.appui__chiffre { display: flex; flex-direction: column; gap: 4px; }
.appui__chiffre b { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: .95; }
.appui__chiffre span { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--panel-fg-dim); }

/* ── photographie de mission ──
   La légende n'est pas décorative : elle dit ce que l'image montre, et c'est
   ce qui permet de la publier. Une photographie ne tient jamais lieu d'une
   mission qu'elle n'illustre pas (règle 2 du briefing).
   Elementor : widget Image, « Caption : Custom caption ». */
.figure { margin: 0; max-width: 900px; }
/* L'image garde ses proportions — on ne recadre pas une photographie de
   mission pour la faire entrer dans un format : le plafond de hauteur suffit
   à tenir les clichés verticaux. */
.figure img {
  display: block; width: auto; max-width: 100%;
  height: auto; max-height: min(62vh, 560px);
}
.figure__legende {
  margin-top: 12px; max-width: 74ch;
  font-size: 12.5px; line-height: 1.6; color: var(--panel-fg-dim);
}
.sec--encre .figure__legende, .sec--profond .figure__legende { color: var(--notes-fg-dim); }

/* ── plaques photo, parallaxe épinglé — idiome de la page d'attente ──
   Une plaque par section, photo et voile sur le même élément : c'est
   « Background + Background Overlay » d'un conteneur Elementor. La section
   porteuse découpe la plaque ; sans JavaScript, inset:0 la fait couvrir. */
.sec--plaque { position: relative; overflow: hidden; isolation: isolate; }
.sec--plaque > .sec__inner { position: relative; z-index: 1; }
/* La plaque déborde de 90 px en haut et en bas : c'est la réserve dans
   laquelle elle glisse au défilement, sans jamais découvrir un bord. */
.plaque {
  position: absolute; inset: -90px 0; min-height: calc(100% + 180px); z-index: 0;
  background-color: var(--bar-bg);
  background-image: linear-gradient(96deg, var(--voile-fort) 0%, var(--voile-fort) 46%, var(--voile-faible) 100%), var(--plaque-photo);
  background-size: cover; background-position: center;
  will-change: transform; pointer-events: none;
}
.plaque--reunion  { --plaque-photo: url("assets/hero-fusion-c.jpg"); }
.plaque--dossiers { --plaque-photo: url("assets/metiers.jpg"); }
.plaque--tour     { --plaque-photo: url("assets/alerte.jpg"); }
/* photographies réelles des missions, récupérées de l'ancien site */
/* Non pas la photo de groupe — sept personnes alignées face à
   l'objectif — mais la même mission en action. Une photo posée fait
   trombinoscope sous un titre, et le voile en écrase les visages. */
.plaque--arsat    { --plaque-photo: url("assets/mission-arsat-2.jpg"); }
.plaque--sonacim  { --plaque-photo: url("assets/mission-sonacim.jpg"); }
.plaque--bcc      { --plaque-photo: url("assets/mission-bcc.jpg"); }

/* ── révélation au défilement — Elementor : Entrance Animation, Fade In Up ── */
[data-reveal] { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
[data-reveal].is-hidden { opacity: 0; transform: translateY(22px); }

/* ── survol des cartes — Elementor : Border, onglet Hover ── */
.carte { transition: border-color 200ms var(--ease); }
.carte:hover { border-color: var(--accent-panel); }

/* ── bandeau de références : les logos défilent de droite à gauche ──
   Deux listes identiques se suivent ; l'animation translate l'ensemble de la
   moitié de sa largeur, puis reprend — la bascule tombe pile sur le début de
   la seconde liste, donc le défilement paraît sans fin.

   Elementor : widget Image Carousel (gratuit), lecture automatique, boucle
   infinie, vitesse lente, flèches et points désactivés. SPEC §10. */

.refs { overflow: hidden; position: relative; }
.refs::before, .refs::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
  pointer-events: none;
}
.refs::before { left: 0;  background: linear-gradient(90deg, var(--panel-bg), transparent); }
.refs::after  { right: 0; background: linear-gradient(270deg, var(--panel-bg), transparent); }

/* La piste n'a pas de sens de lecture : ce sont des marques latines, et
   « direction: ltr » garde le calcul de la boucle identique dans les deux
   sens. Le mouvement, lui, se retourne plus bas pour l'arabe. */
.refs__piste { direction: ltr; display: flex; width: max-content; animation: defile 42s linear infinite; }
.refs:hover .refs__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

.refs__lot { display: flex; align-items: center; gap: 18px; padding-right: 18px; }

.refs__item {
  flex: 0 0 auto; display: grid; place-items: center;
  height: 96px; min-width: 176px; padding: 0 26px;
  background: var(--tuile-bg); border: 1px solid var(--rule-ink);
}
.refs__item img { height: 52px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .refs { overflow-x: auto; }
  .refs__piste { animation: none; }
}

/* ── image à la une, en tête de carte ── */
/* « height: auto » n'est pas décoratif : les attributs width et height de la
   balise <img> valent indication de présentation, et leur hauteur écraserait
   le rapport demandé — l'image reprendrait sa hauteur d'origine. */
.carte__image {
  display: block; width: calc(100% + 56px); max-width: none; height: auto;
  margin: -26px -28px 12px; aspect-ratio: 16 / 9; object-fit: cover;
}

/* ── article : fil d'Ariane, méta, sommaire, encart, partage ──
   Tout ce qu'un lecteur d'article attend d'un blog tenu. Chaque élément a son
   équivalent Elementor : fil d'Ariane = widget Breadcrumbs (Pro) ou un simple
   conteneur de liens ; sommaire = Table of Contents (Pro) ou une liste de
   liens d'ancre écrite à la main ; encart = conteneur bordé ; partage =
   widget Share Buttons (Pro) ou trois liens. Aucun n'est indispensable au
   sens de la page : sans eux, l'article se lit entièrement. */

.fil { margin: 0 0 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.fil a, .fil span { color: var(--notes-fg-faint); text-decoration: none; }
.fil a:hover { color: var(--gold); }
.fil a::after { content: " / "; color: var(--bar-fg-faint); }
.fil span { color: var(--gold); }

.meta-article {
  margin: 18px 0 0; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--notes-fg-faint);
}

/* Le corps d'article : une mesure de lecture, et des liens qui se voient. */
.corps .texte { max-width: 72ch; font-size: 17px; }
.corps .texte a { color: var(--accent-panel); text-decoration: none;
  border-bottom: 1px solid var(--cta-line); }
.corps .texte a:hover { border-bottom-color: var(--accent-panel); background: var(--flag-bg); }
.corps .t3 { scroll-margin-top: 120px; }

.sommaire { margin: 0; padding: 0; padding-inline-start: 18px; font-size: 14px; line-height: 1.5; }
.sommaire li { margin-bottom: 9px; }
.sommaire a { color: var(--panel-fg-dim); text-decoration: none; }
.sommaire a:hover { color: var(--accent-panel); text-decoration: underline; text-underline-offset: 3px; }

/* L'encart n'a pas d'aplat : un filet à gauche, une graisse un peu plus
   haute, et il arrête l'œil sans faire bloc publicitaire. */
.encart {
  margin: 32px 0; padding: 4px 0; padding-inline-start: 24px;
  border-inline-start: 2px solid var(--accent-panel);
}
.encart__label {
  margin: 0 0 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-panel);
}
.encart__texte { margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 64ch;
  font-family: var(--display); font-weight: 400; }
.encart__texte a { color: var(--accent-panel); border-bottom: 1px solid var(--cta-line); text-decoration: none; }
.encart__lien {
  display: inline-block; margin-top: 12px; color: var(--accent-panel);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--cta-line);
}
.encart__lien:hover { border-bottom-color: var(--accent-panel); }

/* Partage, en fin d'article : les marques dessinées, pas nommées. */
.partage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule-ink);
}
.partage__label {
  margin-inline-end: 6px; font-size: 10px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--panel-fg-dim);
}
.partage__lien {
  width: 40px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--rule-ink);
  color: var(--panel-fg-dim); text-decoration: none;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.partage__lien:hover {
  color: var(--panel-bg); background: var(--accent-panel); border-color: var(--accent-panel);
}

/* L'image à la une reste dans la colonne de texte : pleine largeur, elle
   écrasait la page et repoussait le premier paragraphe sous la ligne de
   flottaison. */
.figure--une { max-width: 100%; margin: 0 0 30px; }
.figure--une img { width: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── le blog : article de tête, puis liste ──
   Aucune étiquette « à la une » : c'est la taille qui dit le rang. Elementor :
   widget Posts en disposition « Grid » limité à un article, puis un second en
   disposition « List » avec décalage de un. */

.tete { display: grid; gap: 0; margin-bottom: clamp(34px, 5vw, 56px); }
.tete__image { display: block; overflow: hidden; }
.tete__image img {
  width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.tete:hover .tete__image img { transform: scale(1.02); }
.tete__corps { padding: 22px 0 0; }
.tete__meta { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-panel); }
.tete__titre { margin: 0 0 12px; font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; max-width: 20ch; text-wrap: balance; }
.tete__titre a { color: inherit; text-decoration: none; }
.tete__titre a:hover { color: var(--accent-panel); }
.tete__chapo { margin: 0 0 20px; font-size: 17px; line-height: 1.6;
  max-width: 60ch; color: var(--panel-fg-dim); }

.playlist { margin: 0; padding: 0; list-style: none; }
.piste {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--rule-ink);
}
.piste:last-child { border-bottom: 1px solid var(--rule-ink); }
.piste__image { display: block; overflow: hidden; align-self: start; }
.piste__image img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 600ms var(--ease); }
.piste:hover .piste__image img { transform: scale(1.03); }
.piste__meta { margin: 0 0 6px; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--panel-fg-dim); }
.piste__titre { margin: 0 0 6px; font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.22; }
.piste__titre a { color: inherit; text-decoration: none; }
.piste__titre a:hover { color: var(--accent-panel); }
.piste__chapo { margin: 0; font-size: 14.5px; line-height: 1.58; max-width: 62ch;
  color: var(--panel-fg-dim); }
@media (max-width: 620px) { .piste { grid-template-columns: 1fr; gap: 14px; } }

/* Colonne latérale : listes nues et vignettes, sans aplat ni cadre. */
.liste-nue { margin: 0; padding: 0; list-style: none; font-size: 14.5px; }
.liste-nue li { padding: 7px 0; border-bottom: 1px solid var(--rule-ink); }
.liste-nue li:last-child { border-bottom: 0; }
.liste-nue a { color: var(--panel-fg); text-decoration: none; }
.liste-nue a:hover { color: var(--accent-panel); }
.liste-nue .compte { float: right; font-size: 12px; color: var(--panel-fg-dim); }

/* Variante large : la même liste, mais posée en pleine colonne — un nom, son
   périmètre en dessous, le compte à droite. Sert à la liste des secteurs sur
   la page Réalisations. */
.liste-nue--large li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; font-size: 17px; font-family: var(--display); font-weight: 500;
}
.liste-nue--large .compte { float: none; flex: 0 0 auto; font-size: 13px; }
.liste-nue__note {
  display: block; margin-top: 3px;
  font-family: var(--body); font-size: 12.5px; font-weight: 400;
  line-height: 1.45; color: var(--panel-fg-dim);
}

/* Portrait d'un membre de l'équipe : carré, recadré, posé en tête de carte
   comme l'image d'un article. Absent, il ne laisse pas de trou — la carte est
   d'abord typographique. */
.carte__portrait {
  display: block; width: 84px; height: 84px; margin: 0 0 14px;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--rule-ink);
}

.vignettes { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.vignettes a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px;
  align-items: center; color: var(--panel-fg); text-decoration: none; }
.vignettes img { width: 76px; height: 52px; object-fit: cover; }
.vignettes span { font-size: 13.5px; line-height: 1.4; }
.vignettes a:hover span { color: var(--accent-panel); }

/* ── icône de métier ──
   Tracée en SVG dans le contenu, sans bibliothèque ni appel réseau. Elle prend
   la couleur du texte, donc elle suit la palette sans valeur en dur.
   Elementor : widget Icon Box, icône SVG téléversée. */
.icone { width: 30px; height: 30px; stroke: var(--accent-panel); stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sec--encre .icone, .sec--profond .icone { stroke: var(--gold); }
.carte .icone { margin-bottom: 4px; }

/* ── le processus, en étapes reliées ──
   Une bande de quatre jalons : le numéro, le nom, la ligne qui les relie.
   Elementor : quatre conteneurs en ligne, chacun un Icon Box ; la ligne est
   une bordure supérieure sur le conteneur parent. */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0; margin-top: 34px; border-top: 1px solid var(--rule-gold); }
.etape { position: relative; padding: 26px 0 0; padding-inline-end: 22px; }
.etape::before {
  content: ""; position: absolute; top: -6px; inset-inline-start: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--utility-bg);
}
.etape__num { display: block; font-size: 10px; letter-spacing: .2em; color: var(--gold); }
.etape__nom { display: block; margin: 6px 0 8px; font-family: var(--display);
  font-size: 21px; font-weight: 500; line-height: 1.2; }
.etape__detail { margin: 0; font-size: 14px; line-height: 1.6; color: var(--notes-fg-dim); }

/* ── médias : lecteur, filtres, galerie ──
   Elementor : widget Vidéo (YouTube, liste de lecture native) pour le lecteur ;
   widget Gallery avec catégories (Pro) — ou un jeu d'onglets, widget Tabs
   gratuit, une galerie par onglet — pour les filtres. SPEC §10. */

.lecteur { aspect-ratio: 16 / 9; background: var(--bar-bg); overflow: hidden; }
.lecteur iframe { width: 100%; height: 100%; border: 0; }

/* ── studio vidéo : lecteur et liste de lecture ──
   La disposition d'une plateforme de lecture — grand lecteur à gauche, file
   d'attente à droite, vignettes servies par YouTube. Sous 900 px la file
   passe sous le lecteur. */
/* Sans file d'attente — aucune vidéo relevée — le lecteur prend toute la
   largeur plutôt que de laisser une colonne vide à côté de lui. */
.studio { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 901px) {
  .studio:has(.studio__liste) { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
}
.studio__legende { margin: 12px 0 0; font-size: 12.5px; color: var(--notes-fg-dim); }
.studio__titre {
  margin: 0 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.studio__liste { max-height: 62vh; overflow-y: auto; padding-inline-end: 6px; }

.pistes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pistes a {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px;
  padding: 7px; color: var(--bar-fg); text-decoration: none;
  transition: background 160ms var(--ease);
}
.pistes a:hover, .pistes a[aria-current="true"] { background: rgba(255,255,255,.06); }
.pistes img { width: 104px; height: 59px; object-fit: cover; }
.pistes__titre { font-size: 13.5px; line-height: 1.35; align-self: center; }
.pistes__date { grid-column: 2; font-size: 11px; color: var(--notes-fg-faint); }

/* La mention de provenance. Elle dit d'où vient une vidéo que le cabinet n'a
   pas produite — discrètement, mais sans qu'on ait à chercher. */
.studio__mention {
  margin: 10px 0 0; max-width: 68ch;
  font-size: 12px; line-height: 1.55; color: var(--notes-fg-faint);
}
.studio__mention a { color: var(--notes-fg-dim); text-underline-offset: 3px; }
.studio__mention a:hover { color: var(--gold); }

/* ── planche photographique ──
   Les images tiennent la page, le texte s'efface : la légende n'apparaît
   qu'au survol, en bas du cadre. Colonnes en maçonnerie, gouttière fine. */
.planche { columns: 3 320px; column-gap: 10px; padding: 30px var(--pad) 0; }
@media (max-width: 700px) { .planche { columns: 1; padding-inline: var(--pad); } }
.planche__item { break-inside: avoid; margin: 0 0 10px; position: relative; overflow: hidden; }
.planche__item a { display: block; position: relative; }
.planche__item img {
  width: 100%; height: auto; display: block;
  transition: transform 900ms var(--ease), filter 500ms var(--ease);
  filter: saturate(.92);
}
.planche__item:hover img { transform: scale(1.04); filter: saturate(1); }
.planche__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 18px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: #FFFFFF; font-size: 12.5px; line-height: 1.45;
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.planche__item:hover figcaption, .planche__item a:focus-visible figcaption {
  opacity: 1; transform: none;
}
@media (hover: none) { .planche__item figcaption { opacity: 1; transform: none; } }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 26px; }
.filtres--sombre .filtres__btn { border-color: var(--rule-gold); color: var(--notes-fg-dim); }
.filtres--sombre .filtres__btn:hover { color: var(--gold); border-color: var(--gold); }
.filtres--sombre .filtres__btn[aria-pressed="true"] {
  background: var(--gold); color: var(--cta-fg); border-color: var(--gold);
}
.filtres__btn {
  padding: 9px 16px; background: transparent; color: var(--panel-fg-dim);
  border: 1px solid var(--rule-ink); font-family: var(--body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.filtres__btn:hover { color: var(--accent-panel); border-color: var(--accent-panel); }
a.filtres__btn { display: inline-block; text-decoration: none; }
.filtres__btn[aria-pressed="true"] {
  color: var(--cta-fg); background: var(--accent-panel); border-color: var(--accent-panel);
}

/* La galerie ne recadre pas : chaque cliché garde ses proportions, et les
   colonnes se remplissent à hauteur variable. */
.galerie { columns: 3 260px; column-gap: 18px; }
.galerie__item { break-inside: avoid; margin: 0 0 18px; background: var(--tuile-bg); border: 1px solid var(--rule-ink); }
.galerie__item img { width: 100%; height: auto; }
.galerie__item figcaption { padding: 10px 14px 12px; font-size: 12px; line-height: 1.5; color: var(--panel-fg-dim); }
.galerie__item a { display: block; }

/* ── pied ── */

.pied { background: var(--utility-bg); color: var(--notes-fg-dim); }
.pied__haut { max-width: var(--measure); margin: 0 auto; padding: clamp(44px,5vw,68px) var(--pad); display: grid; gap: 34px 48px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pied__titre { margin: 0 0 14px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: 8px; font-size: 14.5px; }
.pied a { color: var(--notes-fg-dim); text-decoration: none; }
.pied a:hover { color: var(--gold); }
.pied__bas {
  max-width: var(--measure); margin: 0 auto; padding: 22px var(--pad);
  border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap;
  gap: 8px 24px; justify-content: space-between;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--notes-fg-faint);
}

.socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); color: var(--notes-fg-dim); }
.socials a[href]:hover { border-color: var(--gold); color: var(--gold); }
.socials a:not([href]) { opacity: .3; pointer-events: none; }

/* ── responsive ── */

@media (max-width: 900px) {
  .plaque { background-image: linear-gradient(var(--voile-fort), var(--voile-fort)), var(--plaque-photo); }
}

@media (max-width: 1139px) {
  /* Le bandeau garde les numéros — on appelle un cabinet depuis son
     téléphone — et abandonne l'adresse, qui prenait deux lignes. */
  .bandeau__inner { padding-block: 7px; font-size: 11.5px; }
  .bandeau__inner > span:first-child { display: none; }
  .bandeau__droite { gap: 2px 14px; }

  /* La barre : le logo et le bouton, rien d'autre. Le menu vit dans un
     volet qui ne s'ouvre qu'à la demande. */
  /* « wrap » est la clé : logo et bouton tiennent la première ligne, le
     menu et l'appel à l'action passent dessous sur toute la largeur. Sans
     lui, les quatre enfants se serrent sur une seule ligne et débordent. */
  .barre__inner { flex-direction: row; flex-wrap: wrap; align-items: center; padding-block: 10px; gap: 0 12px; }
  .marque { flex: 1 1 auto; }
  .marque img { --l: clamp(112px, 30vw, 148px); }
  .burger { display: inline-flex; }

  .menu, .barre__droite { display: none; flex: 0 0 100%; }
  .entete.est-deploye .menu { display: block; width: 100%; padding-top: 8px; }
  .entete.est-deploye .barre__droite { display: flex; width: 100%; padding-block: 14px 28px; }

  /* Ouvert, le volet couvre l'écran et défile d'un bloc — les panneaux
     dépliés compris, puisqu'ils vivent dans la même scène. */
  .entete.est-deploye .scene {
    position: fixed; inset: 0; z-index: 40;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bar-bg);
  }
  body.menu-ouvert { overflow: hidden; }

  .menu__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__btn {
    width: 100%; justify-content: space-between; text-align: start;
    padding: 15px 0; font-size: 13px;
    border-bottom: 1px solid var(--hairline); border-inline-start: 0;
  }
  .menu__btn[aria-expanded="true"] { border-bottom-color: var(--gold); }
  .bouton-contact { width: 100%; text-align: center; padding-block: 15px; }

  /* Le panneau se déplie sous la liste, comme un accordéon — et garde la
     couleur du volet. Une plage claire au milieu d'une colonne sombre
     couperait la lecture en deux et ferait croire à une autre page. */
  .panneau {
    position: static; box-shadow: none; border: 0;
    background: transparent; color: var(--bar-fg);
    /* Ici le panneau est dans le flux : il doit disparaître vraiment, sinon
       il pousse les entrées suivantes vers le bas du volet. */
    display: none; visibility: visible; opacity: 1;
    transform: none; transition: none; pointer-events: auto;
  }
  .panneau.est-ouvert { display: block; }
  /* La gouttière reste celle de la barre : sans elle, les intitulés du
     panneau viennent coller au bord de l'écran. */
  .panneau__grille { grid-template-columns: 1fr; gap: 0; padding: 0 var(--pad) 6px; }
  .colonne { padding: 6px 0 12px; }
  .colonne__titre { color: var(--gold); border-bottom-color: var(--hairline); }
  .entree { padding: 11px 0; color: var(--bar-fg); }
  .entree__nom { font-size: 17px; }
  .entree__note { color: var(--bar-fg-dim); }
  .entree--phare { margin: 0 0 4px; padding: 12px 14px; background: var(--volet-relief); }
  .colonne--une {
    margin: 4px 0 0; padding: 18px 16px;
    background: var(--volet-relief); color: var(--bar-fg);
  }
  .colonne--une .une__phrase { font-size: 21px; }
  .colonne--une .une__corps { color: var(--bar-fg-dim); }
}

/* L'en-tête suit le défilement sur téléphone aussi : la barre repliée ne
   coûte que ~62 px, et le menu reste à portée du pouce. */
@media (max-width: 1139px) {
  .entete { position: sticky; top: 0; }
  .entete .bandeau { overflow: hidden; max-height: 60px; transition: max-height 240ms var(--ease); }
  .entete.est-fige .bandeau { max-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  [data-reveal] { transition: none; }
  [data-reveal].is-hidden { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Sens de lecture inverse — l'arabe
   --------------------------------------------------------------------------
   Presque tout est déjà écrit en propriétés logiques (« inline-start »
   plutôt que « left ») : le miroir s'y fait tout seul. Ce bloc ne contient
   que ce qu'une propriété logique ne sait pas retourner — une image qui ne
   se retourne pas, un dégradé orienté, un sens d'animation — et la
   typographie arabe. Il est en fin de feuille : à spécificité égale, c'est
   l'ordre de source qui tranche, et rien ici n'a besoin de « !important ».

   Elementor : ces règles sont celles d'un site multilingue sous WPML ou
   Polylang, qui pose lui-même « dir="rtl" » sur la balise html. SPEC §10.
   ========================================================================== */

/* ── typographie ──
   Rajdhani et Barlow n'ont pas de glyphes arabes : sans ces deux jetons, le
   navigateur retomberait sur une police système quelconque. Cairo tient le
   rôle de Rajdhani (géométrique, un peu carrée), IBM Plex Sans Arabic celui
   de Barlow (grotesque de facture sobre). */
html[dir="rtl"] {
  --display: Cairo, "Noto Kufi Arabic", sans-serif;
  --body: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
}

/* L'arabe a une hauteur d'œil plus faible que le latin, et des signes qui
   montent et descendent loin de la ligne. À taille égale il paraît petit et
   serré : un point de plus et un interligne plus ample le rétablissent. */
html[dir="rtl"] body { font-size: 17px; line-height: 1.85; }

/* ── l'interlettrage, à neutraliser ──
   Le site espace ses petites capitales — vingt-huit déclarations. C'est un
   procédé latin : en arabe les lettres se lient, et les espacer découpe les
   mots. Ce n'est pas une question de goût, c'est une question de lisibilité.
   Spécificité (0,1,1) : elle égale la plus forte des règles concernées
   (« .appui__chiffre span ») et l'emporte par l'ordre de source. */
html[dir="rtl"] * { letter-spacing: normal; }

/* ── le logo ──
   La marge négative rogne le blanc intérieur du PNG, qui est à sa gauche.
   Le PNG ne se retourne pas : en lecture inverse ce blanc se retrouve du
   côté du menu, où il devient une respiration utile. On le laisse. */
html[dir="rtl"] .marque img { margin-left: 0; }

/* ── la plaque photo ──
   Le voile épais se pose du côté du texte, sinon le titre se lit sur la
   partie claire de la photographie. Le texte passant à droite, le dégradé
   suit : 96° devient 264°, le même angle vu dans l'autre sens. */
html[dir="rtl"] .plaque {
  background-image: linear-gradient(264deg, var(--voile-fort) 0%, var(--voile-fort) 46%, var(--voile-faible) 100%), var(--plaque-photo);
}

/* ── le compteur des listes ──
   « float: inline-end » existe mais son support reste inégal : on retourne
   le flottant à la main. */
html[dir="rtl"] .liste-nue .compte { float: left; }

/* ── le bandeau de références ──
   La piste reste en « ltr » (voir plus haut) ; seul le sens du mouvement
   se retourne, pour qu'il épouse la lecture. */
html[dir="rtl"] .refs__piste { animation-direction: reverse; }