/* ==========================================================================
   ALMAR GROUPE — COMPOSITIONS DE PAGES
   ========================================================================== */

/* ==========================================================================
   1. OUVERTURE — ACCUEIL
   Le logo est posé tel quel : `mix-blend-mode: screen` rend son fond noir
   transparent, et le masque radial efface le vignettage du fichier. Aucun
   détourage, aucun fichier retouché — n'importe quelle version du logo
   sur fond noir fonctionnera.
   ========================================================================== */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto 30%; height: 130%;
  background:
    radial-gradient(48% 48% at 63% 40%, rgba(0,108,168,.17), transparent 72%),
    radial-gradient(38% 38% at 78% 62%, rgba(240,204,96,.08), transparent 72%);
  pointer-events: none;
}
.hero__in {
  position: relative;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut) clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
@media (max-width: 940px) { .hero__in { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: var(--t-hero); line-height: var(--lh-tight);
  margin: 1.4rem 0 1.3rem; max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__logo { justify-self: center; }
.hero__logo img {
  width: min(100%, 580px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 58%, transparent 96%);
  mask-image: radial-gradient(closest-side at 50% 50%, #000 58%, transparent 96%);
}
@media (max-width: 940px) {
  .hero__logo { order: -1; }
  .hero__logo img { width: min(100%, 380px); }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

/* ==========================================================================
   2. EN-TÊTE DE PAGE INTÉRIEURE
   ========================================================================== */
.page-head {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2rem, 4vw, 3.25rem);
}
.page-head::before {
  content: ""; position: absolute; inset: -60% -20% auto 40%; height: 160%;
  background: radial-gradient(40% 40% at 60% 50%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 72%);
  pointer-events: none;
}
.page-head__inner { position: relative; }
.page-head__title { font-size: var(--t-h1); margin: 1rem 0 1.15rem; max-width: 20ch; }
.page-head__title em {
  font-style: normal;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   3. HERO DE PAGE FILIALE
   Chaque filiale garde la structure du groupe ; seule la couleur de marque
   change, injectée dans --brand. Un filet, un halo, rien de plus.
   ========================================================================== */
.entity-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem);
}
.entity-hero::before {
  content: ""; position: absolute; inset: -70% -20% auto 35%; height: 180%;
  background: radial-gradient(38% 38% at 60% 50%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.entity-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: end; }
@media (max-width: 880px) { .entity-hero__inner { grid-template-columns: 1fr; align-items: start; } }

.entity-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.entity-hero__name {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: var(--lh-tight);
  margin-bottom: .85rem;
  display: flex; align-items: center; gap: 1rem;
}
.entity-hero__name::before {
  content: ""; width: 3px; align-self: stretch; background: var(--brand); flex: none;
}
.entity-hero__tagline { font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.35; color: var(--text); font-weight: 400; max-width: 26ch; }
.entity-hero__parent {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .76rem; letter-spacing: .04em; color: var(--muted);
  margin-top: var(--s-5);
  transition: color var(--d-fast);
}
.entity-hero__parent b { color: var(--text); font-weight: 600; }
.entity-hero__parent:hover { color: var(--gold); }
.entity-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-self: end; }
@media (max-width: 880px) { .entity-hero__actions { justify-self: start; margin-top: var(--s-5); } }

/* Navigation entre filiales */
.entity-nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--rule); }
.entity-nav__item {
  padding: clamp(1.5rem,3.5vw,2.5rem) clamp(1rem,3vw,2rem);
  display: grid; gap: .35rem;
  transition: background var(--d-fast);
}
.entity-nav__item:first-child { border-right: 1px solid var(--rule); }
.entity-nav__item:last-child { text-align: right; }
.entity-nav__item:hover { background: var(--panel-2); }
.entity-nav__dir { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.entity-nav__name { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--text); }
@media (max-width: 560px) {
  .entity-nav { grid-template-columns: 1fr; }
  .entity-nav__item:first-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  .entity-nav__item:last-child { text-align: left; }
}

/* ==========================================================================
   4. INDEX DES SECTEURS
   ========================================================================== */
.sector-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 4vw, 3rem); align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--rule-soft);
}
.sector-row:first-child { border-top: 1px solid var(--rule); }
.sector-row h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.sector-row p { font-size: .88rem; margin: 0; }
.sector-row__list { margin-top: .55rem; font-size: .78rem; color: var(--muted); }
.sector-row__list a { color: var(--body); }
.sector-row__list a:hover { color: var(--gold); }
@media (max-width: 700px) { .sector-row { grid-template-columns: 1fr; gap: .4rem; } }

/* ==========================================================================
   5. ALMAR LAB
   ========================================================================== */
.lab-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.lab-stage { background: var(--panel-2); padding: clamp(1.35rem, 2.5vw, 2rem); }
.lab-stage__label { font-size: .66rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .7rem; }
.lab-stage__desc { color: var(--body); font-size: .89rem; }
@media (max-width: 700px) { .lab-stages { grid-template-columns: 1fr; } }

.lab-empty {
  border: 1px dashed var(--rule-strong);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.35rem, 4vw, 3rem);
  text-align: center; background: rgba(255,255,255,.015);
}
.lab-empty__title { font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin-bottom: var(--s-4); }
.lab-empty__text { color: var(--body); max-width: 54ch; margin-inline: auto; font-size: .92rem; }

/* ==========================================================================
   6. VISION — registre éditorial
   ========================================================================== */
.editorial { max-width: var(--maxw-text); }
.editorial p { font-size: var(--t-lead); line-height: 1.66; color: var(--body); margin-bottom: 1.4em; }
.editorial strong { color: var(--text); font-weight: 600; }

.pullquote {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.24;
  letter-spacing: -.02em; color: var(--text);
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 2px solid var(--gold);
  max-width: 26ch;
}

/* ==========================================================================
   7. BANDEAU D'APPEL FINAL
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--rule); background: var(--panel); padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.cta-band__in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.cta-band__title { font-size: var(--t-h2); max-width: 20ch; }
.cta-band__title em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-band__text { color: var(--body); font-size: .95rem; margin-top: .8rem; max-width: 54ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 820px) { .cta-band__in { grid-template-columns: 1fr; } }

/* ==========================================================================
   8. PAGE 404
   ========================================================================== */
.notfound { min-height: 70svh; display: grid; place-items: center; text-align: center; padding: clamp(3rem,8vw,6rem) var(--gut); }
.notfound__code {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(4rem, 16vw, 10rem); line-height: 1; letter-spacing: -.04em;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}