/* ─────────────────────────────────────────────────────────────────────────────
   public/css/hero-editorial.css
   En-tête éditorial : grand titre, pour les pages d'offre et de service.

   Les cinq pages de Services (Consulting, AI Academy, Générateur de charte IA,
   Observatoire des pratiques IA, Muse Companion) partagent cet en-tête. Avant
   lui, chacune avait le sien : titres de 50 à 88 px, quatre bords gauches
   différents, surtitre gris ici et terracotta là, bandeau gris sur deux pages
   seulement. Décision du 2026-11-08 : un seul en-tête, au grand titre éditorial.

   À distinguer de `hero-section.css` (`.hero-sec`), le bandeau compact et
   illustré des pages de rubrique (MuseumWeek, Événements, Programmes…).

   Balisage :
     <header class="hed">
       <div class="hed-in">                     ← ajouter `hed-in--side` si colonne
         <div class="hed-txt">
           <p class="hed-eyebrow">Rubrique · précision</p>
           <h1 class="hed-h1">…</h1>
           <p class="hed-lede">…</p>
           <div class="hed-actions">              ← facultatif
             <a class="hed-btn hed-btn--solid" href="…">Action principale →</a>
             <a class="hed-btn hed-btn--line" href="…">Action secondaire</a>
           </div>
           <ul class="hed-meta"><li>…</li></ul>   ← facultatif
         </div>
         <figure class="hed-media"><img src="…" alt=""></figure>   ← facultatif
       </div>
     </header>

   Règles :
   - Le bord gauche du texte est celui de la navigation (grille de 1280 px,
     marge de 40 px, 16 px sous 768 px). Ne pas le décaler.
   - Pas de fond : le titre se lit sur le papier de la page, un filet ferme
     l'en-tête.
   - `<em>` dans le titre n'a pas de style propre. Ne pas réintroduire
     d'italique ni de couleur page par page.
   - Une page dont le balisage est figé (l'Observatoire : le service SEO
     réécrit son en-tête par expression régulière) lit les mêmes valeurs
     dans les variables ci-dessous au lieu des classes.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --hed-grid: 1280px;
  --hed-gutter: 40px;
  --hed-pad-top: clamp(48px, 5.5vw, 76px);
  --hed-pad-bottom: clamp(40px, 4.5vw, 60px);
  --hed-h1-size: clamp(42px, 6vw, 86px);
  --hed-h1-lh: 1;
  --hed-h1-ls: -.035em;
  --hed-eyebrow-size: 11px;
  --hed-lede-size: 18px;
  --hed-lede-lh: 1.65;
  /* Fond des boutons pleins. #D25D38 (l'accent de surface) ne donne que 3,9:1
     avec un texte blanc de 12 px ; ce ton plus sombre passe 5:1. */
  --hed-btn-fill: #B94E2E;
}

@media (max-width: 767px) {
  :root {
    --hed-gutter: 16px;
    --hed-pad-top: 34px;
    --hed-pad-bottom: 32px;
    --hed-h1-size: clamp(36px, 10vw, 46px);
    --hed-lede-size: 16px;
    --hed-lede-lh: 1.6;
  }
}

.hed {
  padding: var(--hed-pad-top) 0 var(--hed-pad-bottom);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.hed-in {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  max-width: var(--hed-grid);
  margin: 0 auto;
  padding: 0 var(--hed-gutter);
}

.hed-in--side { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: start; }

.hed-txt { min-width: 0; }

.hed-eyebrow {
  margin: 0;
  font-family: var(--f-mono, var(--f-body));
  font-size: var(--hed-eyebrow-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.hed-h1 {
  margin: 18px 0 0;
  max-width: 17ch;
  font-family: var(--f-display);
  font-size: var(--hed-h1-size);
  font-weight: 400;
  line-height: var(--hed-h1-lh);
  letter-spacing: var(--hed-h1-ls);
  color: var(--ink);
  overflow-wrap: break-word;
}

.hed-h1 em { font-style: normal; color: inherit; font-weight: inherit; }

/* Titre suivi d'une pastille (« Test bêta ») sur la même ligne. */
.hed-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.hed-title-row .hed-h1 { margin: 0; }
.hed-badge {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(210, 93, 56, .1);
  padding: 5px 10px;
}

.hed-lede {
  margin: 24px 0 0;
  max-width: 60ch;
  font-family: var(--f-body);
  font-size: var(--hed-lede-size);
  line-height: var(--hed-lede-lh);
  color: var(--ink-2);
}

.hed-lede strong { color: var(--ink); font-weight: 600; }

.hed-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* Un bouton seul se pose sans enveloppe : un <div> autour d'un unique lien
   devient une nouvelle unité de traduction (« <t0>…</t0> ») que les
   catalogues ne connaissent pas, et le bouton resterait en français. */
:not(.hed-actions) > .hed-btn { margin-top: 32px; }

.hed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 15px 26px;
  border: 2px solid transparent;
  font-family: var(--f-mono, var(--f-body));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.hed-btn--solid { background: var(--hed-btn-fill); border-color: var(--hed-btn-fill); color: #fff; }
.hed-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(185, 78, 46, .28); }
.hed-btn--line { background: none; border-color: var(--ink); color: var(--ink); }
.hed-btn--line:hover { transform: translateY(-2px); background: var(--paper-2); }
.hed-btn:focus-visible { outline: 2px solid var(--hed-btn-fill); outline-offset: 3px; }

.hed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Illustration de droite : 4/3, filet fin, recadrée sans déformation. */
.hed-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--paper-2);
}
.hed-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .hed-btn { transition: none; }
  .hed-btn:hover { transform: none; }
}

@media (max-width: 900px) {
  .hed-in--side { grid-template-columns: 1fr; }
  .hed-media { aspect-ratio: 16 / 7; }
}

@media (max-width: 767px) {
  .hed-h1, .hed-title-row { margin-top: 14px; }
  .hed-lede { margin-top: 16px; }
  .hed-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 22px; }
  :not(.hed-actions) > .hed-btn { display: flex; margin-top: 22px; }
  .hed-btn { padding: 14px 16px; text-align: center; }
  .hed-meta { gap: 6px 16px; margin-top: 18px; }
}