/* ====================================================================
   Almaviva Portail — utilities communs blocs Gutenberg
   R1.9 (refactor) : les styles spécifiques aux 11 blocs alm/* sont
   désormais scopés dans src/blocks/<slug>/style.scss et auto-inlinés par
   WP via block.json (style: file:.../style-index.css).
   Ce fichier ne contient plus que les utilities partagés, les cross-cuts
   universels, et les sections non-bloc (pages légales, encart espace-pro).
   Charte verrouillée V2.1 — variables CSS définies dans assets/css/portail.css.
   ==================================================================== */

/* --- wrappers communs ----------------------------------------------- */
/* --alm-block-pad-block : source unique du padding vertical des blocs.
   Le recouvrement des cartes KPI sur le hero d'accueil s'en deduit
   (assets/custom.css, .alm-home) : modifier cette valeur deplace l'overlap. */
.alm-block { --alm-block-pad-block: clamp(48px, 7vw, 80px); padding-block: var(--alm-block-pad-block); position: relative; }
.alm-block--compact { --alm-block-pad-block: clamp(32px, 4vw, 48px); padding-block: var(--alm-block-pad-block); }

.alm-block.alm-block--bg-grey  { background: var(--alm-bg-grey); }
.alm-block.alm-block--bg-blue  { background: var(--alm-blue); color: var(--on-blue); }
.alm-block.alm-block--bg-blue h2, .alm-block.alm-block--bg-blue h3 { color: var(--on-blue); }

.alm-eyebrow {
  display: inline-block; font-size: 0.8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  /* ORANGE UNIQUE #EE7203 — arbitrage Tanguy du 10/09/2026.
     Cette ligne portait l'inverse : #A24700, retenu en son temps parce que
     #c95e02 echouait AA (4,11 sur blanc, 3,74 sur gris). L'arbitrage tranche
     pour une teinte unique de charte ; la conformite AA passe en LOT 2.
     Le manquement n'est pas perdu, il est releve ligne a ligne dans
     tools/lot-orange/dette-wcag-orange.tsv.
     Ne pas re-basculer sur la foi de l'ancien motif : il a ete remplace ici
     expres, pour qu'une prochaine session ne le relise pas comme une consigne. */
  color: var(--alm-orange); margin-bottom: 12px;
}
.alm-block--bg-blue .alm-eyebrow { color: var(--on-blue); opacity: 0.85; }
/* Eyebrow sur fond ORANGE > blanc plein (sinon orange sur orange, donc
   orange, illisible). Sélecteur 2-classes : bat la base .alm-eyebrow (égalité de
   spécificité sinon → l'ordre source ferait gagner var(--alm-orange), cf bug recruitment-
   banner « NOUS RECRUTONS »). opacity:1 (l'ancien .alm-eyebrow--inverse à .85
   dégradait le contraste). Couvre recruitment-banner/stats-banner/cta orange +
   le wrapper générique --bg-orange. Les eyebrows sur fond CLAIR restent var(--alm-orange). */
.alm-block--bg-orange .alm-eyebrow,
.alm-block-recruitment-banner--orange .alm-eyebrow,
.alm-block-stats-banner--orange .alm-eyebrow,
.alm-block-cta--orange .alm-eyebrow { color: #fff; opacity: 1; }

/* --- breadcrumb (helper shared.php → almaviva_breadcrumb()) --------- */
.alm-breadcrumb { margin: 0 0 16px; font-size: 0.875rem; }
.alm-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.alm-breadcrumb li + li::before { content: '\203A'; margin-right: 6px; opacity: 0.7; }
.alm-breadcrumb a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; opacity: 0.85; }
.alm-breadcrumb a:hover { opacity: 1; }

/* --- header commun blocs (cards / timeline / accordion / kpi / team) ----
   V3.0b — pattern <header.alm-block__header> partagé par plusieurs blocs.
   Garde aussi .alm-container--narrow utility container plus étroit. */
.alm-block__header { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.alm-block__header h2 {
  color: var(--alm-blue); font-family: var(--font-title);
  font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 8px 0;
  line-height: 1.2; font-weight: 700;
}
.alm-block--bg-blue .alm-block__header h2 { color: var(--on-blue); }
.alm-block__header .alm-lead {
  color: var(--on-white-body); opacity: 0.85;
  font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; margin: 8px auto 0;
}
.alm-block--bg-blue .alm-block__header .alm-lead { color: var(--on-blue-soft); }

.alm-container--narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); }

/* --- cross-cut universel : .alm-btn-secondary outline sur fond clair ---
   V6.5-fix-2 / fix-11 : .alm-btn-secondary default border-color
   rgba(255,255,255,0.6) est invisible sur fond clair. Force outline bleu
   sur sections .alm-block--bg-{white,grey} ET sur .alm-block-latest-news.
   Préfixe body.almaviva-portail-body + !important car portail.css:654 force
   color:#fff!important sur tout a.alm-btn-secondary du portail body. */
body.almaviva-portail-body .alm-block--bg-white a.alm-btn-secondary,
body.almaviva-portail-body .alm-block--bg-grey  a.alm-btn-secondary,
body.almaviva-portail-body .alm-block-latest-news a.alm-btn-secondary {
  background: transparent;
  color: var(--alm-blue) !important;
  border: 2px solid var(--alm-blue);
}
body.almaviva-portail-body .alm-block--bg-white a.alm-btn-secondary:hover,
body.almaviva-portail-body .alm-block--bg-grey  a.alm-btn-secondary:hover,
body.almaviva-portail-body .alm-block-latest-news a.alm-btn-secondary:hover {
  background: var(--alm-blue);
  color: #fff !important;
  border-color: var(--alm-blue);
}
/* ALM_ACTU_EPINGLE_ACCUEIL_v1 — même bouton « Toutes les actualités » sur les sites
   établissement : sans cette règle, portail.css (.alm-btn-secondary, blanc sur
   transparent) le rend invisible sur fond blanc ou gris — mesuré le 2026-09-16 sur
   l'accueil de l'Alma (b28) et de Beauregard (b2). Le portail garde sa règle
   ci-dessus ; la sous-marque maternité garde son propre système de boutons. */
body:not(.almaviva-portail-body):not(.subbrand-maternite) .alm-block-latest-news a.alm-btn-secondary {
  background: transparent;
  color: var(--alm-blue);
  border: 2px solid var(--alm-blue);
}
body:not(.almaviva-portail-body):not(.subbrand-maternite) .alm-block-latest-news a.alm-btn-secondary:hover {
  background: var(--alm-blue);
  color: #fff;
  border-color: var(--alm-blue);
}

/* V6.5-fix-2 : cross-cut split — CTA paragraphe après richtext.
   Évite que le bouton colle au <ul> au-dessus. */
.alm-block-split__richtext + p { margin-top: 32px; margin-bottom: 0; }

/* =====================================================================
   V6.5-fix-25 — Pages légales (mentions-legales / politique-confidentialite
   / cookies) — Layout éditorial avec sommaire sticky.
   Section non-bloc : template portail/page-templates/page-legal.php.
   ===================================================================== */
.alm-legal { background: #fff; color: #333; }

.alm-legal__hero {
  background: var(--alm-bg-grey);
  padding-block: clamp(40px, 6vw, 72px);
}
.alm-legal__breadcrumb { margin: 0 0 16px; font-size: 0.875rem; color: var(--on-white-body); opacity: 0.85; }
.alm-legal__breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.alm-legal__breadcrumb li + li::before { content: '\203A'; margin-right: 6px; opacity: 0.7; }
.alm-legal__breadcrumb a { color: var(--alm-blue); text-decoration: none; }
.alm-legal__breadcrumb a:hover { text-decoration: underline; }
.alm-legal__title {
  font-family: var(--font-title);
  color: var(--alm-blue);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 16px;
}
.alm-legal__lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--on-white-body);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

.alm-legal__body { padding-block: clamp(40px, 6vw, 64px); }
.alm-legal__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1024px) {
  .alm-legal__grid {
    grid-template-columns: minmax(220px, 25%) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* === Sommaire sticky === */
.alm-legal__toc { position: relative; }
@media (min-width: 1024px) {
  .alm-legal__toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}
.alm-legal__toc-details {
  border: 1px solid var(--alm-gray-200);
  border-radius: 12px;
  padding: 16px 20px;
  background: #fff;
}
.alm-legal__toc-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--alm-blue);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--alm-gray-200);
  margin-bottom: 12px;
  position: relative;
}
.alm-legal__toc-summary::-webkit-details-marker { display: none; }
.alm-legal__toc-summary::after {
  content: '▾';
  position: absolute;
  right: 0; top: 0;
  font-size: 0.85rem;
  transition: transform 200ms ease;
  color: var(--alm-blue);
}
.alm-legal__toc-details[open] .alm-legal__toc-summary::after { transform: rotate(180deg); }
@media (min-width: 1024px) {
  .alm-legal__toc-summary::after { display: none; }
  .alm-legal__toc-summary { cursor: default; }
}
.alm-legal__toc nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.alm-legal__toc nav a {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #555;
  text-decoration: none;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  line-height: 1.35;
}
.alm-legal__toc nav a:hover {
  background: var(--alm-bg-grey);
  color: var(--alm-blue);
}
.alm-legal__toc nav a.is-active {
  color: var(--alm-blue);
  font-weight: 600;
  border-left-color: var(--alm-blue);
  background: rgba(0, 72, 153, 0.06);
}

/* === Contenu éditorial === */
.alm-legal__content { max-width: 760px; font-size: 16px; line-height: 1.7; color: #333; }
.alm-legal__content h2 {
  font-family: var(--font-title);
  color: var(--alm-blue);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 48px 0 16px;
  scroll-margin-top: 96px;
}
.alm-legal__content h2:first-child { margin-top: 0; }
.alm-legal__content h3 {
  font-family: var(--font-title);
  color: var(--alm-blue);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 28px 0 12px;
}
.alm-legal__content p { margin: 0 0 16px; }
.alm-legal__content ul { margin: 0 0 20px; padding-left: 24px; }
.alm-legal__content li { margin: 0 0 6px; }
.alm-legal__content a { color: var(--alm-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.alm-legal__content a:hover { color: var(--alm-orange-dark); }
.alm-legal__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--alm-bg-grey);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--alm-blue);
}
.alm-legal__content strong { color: var(--alm-blue); font-weight: 600; }

/* === Tableau récapitulatif cookies === */
.alm-legal__table-wrap { overflow-x: auto; margin: 24px 0; }
.alm-legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid var(--alm-gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.alm-legal__table th {
  background: #F5F5F5;
  color: var(--alm-blue);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--alm-gray-200);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.alm-legal__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--alm-gray-200);
  vertical-align: top;
  line-height: 1.5;
}
.alm-legal__table tr:last-child td { border-bottom: 0; }
.alm-legal__table strong { color: #333; }

/* === Date mise à jour === */
.alm-legal__updated {
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--alm-gray-200);
  font-size: 0.875rem;
  font-style: italic;
  color: #666;
}

/* V6.5-fix-28 — Encart info /espace-pro/ (bloc note discret en fin de page). */
.alm-espace-pro-note { padding-block: 32px 64px; }
.alm-espace-pro-note__inner {
  background: #F5F5F5;
  border-left: 3px solid #004899;
  padding: 24px 28px;
  border-radius: 0 8px 8px 0;
  max-width: 760px;
}
.alm-espace-pro-note p { margin: 0; color: #333; line-height: 1.6; font-size: 15px; }
.alm-espace-pro-note a { color: #004899; text-decoration: underline; }
.alm-espace-pro-note a:hover { color: var(--alm-orange-dark, var(--alm-orange)); }
.wp-block-columns .alm-block-legal-section { border-radius: var(--r-lg); }