/* ============================================================
   APP.CSS — mise en page et composants spécifiques INNOPREV
   S'appuie sur les tokens définis dans design-system.css.
   ============================================================ */

/* --- Texte "lead" : le strong doit rester visible malgré la graisse allégée de .lead --- */
.lead strong { font-weight: 600; }

/* --- Accessibilité : lien d'évitement ---------------------- */
.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: var(--ip-petrol-900); color: #fff; padding: .5rem .9rem;
  border-radius: var(--ip-radius-sm);
}

/* ============================================================
   HEADER
   ============================================================ */
.topbar {
  background: var(--ip-petrol-900);
  color: #fff;
  font-size: .875rem;
}
.topbar .container { padding-block: .4rem; }
.topbar__phone { color: #fff; text-decoration: none; display: inline-flex; gap: .5rem; align-items: baseline; }
.topbar__phone strong { color: #fff; }
.topbar__label { opacity: .8; }
.topbar__note  { opacity: .7; font-size: .8em; }
.topbar__tagline { opacity: .9; }

.site-nav {
  background: var(--ip-bg);
  border-bottom: 1px solid var(--ip-line);
  box-shadow: 0 8px 16px -6px rgba(8, 44, 58, .35);
  position: relative; /* ancre les mega-menus en absolute sur toute la largeur */
}
/* .site-header n'a pas de hauteur propre au-delà de la topbar + nav : un simple
   position:sticky sur .site-nav n'a donc aucune marge pour "décrocher" du flux.
   On épingle la nav en JS (voir main.js) une fois la topbar défilée. */
.site-nav.is-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}
.navbar-brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mark {
  font-family: var(--ip-font-display);
  font-weight: 700; font-size: 1.5rem; letter-spacing: .02em;
  color: var(--ip-petrol-700);
}
.brand-baseline { font-size: .72rem; color: var(--ip-slate); letter-spacing: .03em; }

.site-nav .nav-link {
  font-family: var(--ip-font-display);
  font-weight: 600;
  color: var(--ip-ink);
  padding-inline: .85rem;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--ip-coral-600); }

/* Rubriques avec sous-menu : le libellé est un lien direct vers la page de
   base. Sur mobile/tablette (pas de survol), un chevron séparé ouvre/ferme
   le sous-menu au clic. Sur desktop, le survol de la rubrique ouvre le
   sous-menu et le chevron est masqué (inutile, pas de second clic requis). */
.nav-link-group { display: flex; align-items: center; flex-wrap: wrap; }
.nav-link-group .nav-link { padding-inline-end: .25rem; }
@media (max-width: 991.98px) {
  .nav-link-group .dropdown-menu { flex: 0 0 100%; }
}
.nav-link-caret {
  background: none;
  border: 0;
  padding: .5rem .5rem .5rem .1rem;
  color: var(--ip-ink);
  line-height: 1;
}
.nav-link-caret:hover { color: var(--ip-coral-600); }
.nav-link-caret::after { margin-left: 0; vertical-align: .1em; }

@media (min-width: 992px) {
  .nav-link-caret { display: none; }

  /* Toujours display:block sur desktop, fermé via opacity+visibility (permet l'animation). */
  .site-nav .nav-item.dropdown > .dropdown-menu {
    display: block;
    inset: 100% auto auto 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 80ms ease-out,
                transform 80ms ease-out,
                visibility 0ms 80ms;
  }

  /* Mega-menu-parent position:static → le mega-menu se positionne
     relative à .site-nav (pleine largeur) et non au <li> étroit. */
  .site-nav .mega-menu-parent { position: static; }

  /* Dropdowns simples (Accueil, Audit…) : aligner leur bord haut sur le bas
     de la navbar (même niveau que le mega-menu Formations).
     gap mesuré = 28px = (navbar height - nav-item height) / 2, dû à la hauteur du logo. */
  .site-nav .nav-item.dropdown:not(.mega-menu-parent) > .dropdown-menu {
    margin-top: 28px;
  }

  /* Mega-menu centré sur la navbar */
  .site-nav .nav-item.dropdown > .mega-menu {
    inset: 100% auto auto 50%;
    transform: translateX(-50%) translateY(-10px);
    width: min(1100px, 92vw);
  }
  /* Panneau dimensionné au nombre de colonnes (2 pour Accueil, 4 pour
     Prestations/Calendrier/Contact, 5 pour Formations/Actualités). */
  .site-nav .nav-item.dropdown > .mega-menu--cols-1 { width: min(340px, 92vw); }
  .site-nav .nav-item.dropdown > .mega-menu--cols-2 { width: min(620px, 92vw); }
  .site-nav .nav-item.dropdown > .mega-menu--cols-3 { width: min(840px, 92vw); }
  .site-nav .nav-item.dropdown > .mega-menu--cols-4 { width: min(1000px, 92vw); }

  /* Bridge invisible : couvre le gap entre le bas du nav-item et le haut du dropdown.
     Hovering le bridge maintient :hover actif sur l'ancêtre nav-item. */
  .site-nav .nav-item.dropdown > .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
  }

  /* Ouverture au survol : délai 100ms, animation 180ms ease-out */
  .site-nav .nav-item.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 180ms ease-out 100ms,
                transform 180ms ease-out 100ms,
                visibility 0ms 100ms;
  }

  /* Mega-menu ouvert : conserver translateX(-50%) + slide */
  .site-nav .nav-item.dropdown:hover > .mega-menu {
    transform: translateX(-50%) translateY(0);
  }
}

.site-nav .dropdown-menu {
  border-color: var(--ip-line);
  box-shadow: 0 8px 28px rgba(8, 44, 58, .12), 0 2px 8px rgba(8, 44, 58, .06);
}
@media (max-width: 991.98px) {
  .site-nav .dropdown-menu:not(.mega-menu) {
    position: static;
    width: 100%;
  }
  .site-nav .dropdown-menu:not(.mega-menu) .dropdown-item {
    white-space: normal;
  }
}

/* --- Mega-menus (Accueil, Formations, Calendrier, Prestations,
       Actualités, Contact) --------------------------------------- */
.mega-menu {
  padding: 1.5rem;
  border-radius: var(--ip-radius);
}
/* left/transform/width du mega-menu desktop gérés dans le bloc @media (min-width: 992px) plus haut */
.mega-menu__columns {
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}
.mega-menu--cols-1 .mega-menu__columns { grid-template-columns: 1fr; }
.mega-menu--cols-2 .mega-menu__columns { grid-template-columns: repeat(2, 1fr); }
.mega-menu--cols-3 .mega-menu__columns { grid-template-columns: repeat(3, 1fr); }
.mega-menu--cols-4 .mega-menu__columns { grid-template-columns: repeat(4, 1fr); }
.mega-menu__theme {
  display: block;
  font-family: var(--ip-font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--ip-coral-600);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 2px solid var(--ip-line);
}
.mega-menu__list { list-style: none; margin: 0; padding: 0; }
.mega-menu__link {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .4rem 0;
  color: var(--ip-ink);
  font-size: .875rem;
  line-height: 1.3;
  text-decoration: none;
}
.mega-menu__link:hover { color: var(--ip-coral-600); }
.mega-menu__icon { flex: 0 0 auto; color: var(--ip-petrol-700); margin-top: .05rem; }
/* Pictogrammes alternatifs : image (iconImage) ou Bootstrap Icons (iconBs),
   alignés sur les 20 px des SVG maison. */
.mega-menu__icon img { width: 20px; height: 20px; object-fit: contain; display: block; }
.mega-menu__icon .bi { font-size: 20px; line-height: 1; display: block; }
.mega-menu__empty { font-size: .85rem; color: var(--ip-slate); }
.mega-menu__footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ip-line);
  text-align: right;
}

/* Mobile : accordéon par thème dans le menu déroulant standard */
.mega-menu-mobile { padding: .5rem 0 .75rem; }
.mega-menu-mobile .accordion-button {
  font-family: var(--ip-font-display);
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem .75rem;
}
.mega-menu-mobile .accordion-body { padding: .5rem .75rem 1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--ip-petrol-900), var(--ip-petrol-700));
  color: #fff;
  padding-block: clamp(1rem, 2vw, 3rem);
}
.hero--compact { padding-block: clamp(0rem, 1vw, 2rem); }
.hero__eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .68rem;
  font-weight: 600; color: rgba(255,255,255,.7); margin-bottom: .5rem;
}
.hero__title {
  color: #fff; font-size: clamp(1.5rem, 3.5vw, 2.35rem); width: 100%; margin-bottom: .75rem;
}
.hero__subtitle { color: rgba(255,255,255,.85); font-size: 1.125rem; margin-bottom: 0rem; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding-block: clamp(1rem, 2vw, 3rem); }

/* Sections posées sur le fond texturé : bulle blanche arrondie et ombrée */
.section:not(.section--muted):not(.section--error) > .container {
  background: rgba(255, 255, 255, 1);
  border-radius: var(--ip-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .10), 0 1px 4px rgba(0, 0, 0, .06);
  padding-block: clamp(1rem, 2.5vw, 1.5rem);
  padding-inline: clamp(.5rem, 1.5vw, 1rem);
}

/* Anti-débordement horizontal.
   Bootstrap pose sur chaque .row des marges négatives d'une demi-gouttière
   (-12px pour g-4, -24px pour g-5) que le padding du conteneur est censé
   compenser. Ici .container est plus étroitement paddé (.5rem à 1rem ci-dessus,
   contre .75rem par défaut) : les rows de premier niveau débordaient donc du
   conteneur, et avec lui du viewport — barre de défilement horizontale sur tout
   le site en dessous de 576px, et de quelques pixels aux largeurs de rupture
   (576px, 992px) où le conteneur remplit presque l'écran.
   Ce débordement n'est que de la gouttière vide : le contenu des colonnes
   s'aligne exactement sur la boîte de contenu du conteneur. On le rogne donc
   sur l'axe horizontal — `clip` ne crée pas de conteneur de défilement et
   laisse l'axe vertical visible, contrairement à `hidden`. Les contenus
   réellement plus larges que le conteneur (tableaux éditoriaux, etc.) doivent
   gérer leur propre défilement, cf. `.prose .table` plus bas.
   `overflow: clip` demande Safari 16+ ; sur les versions antérieures la règle
   est simplement ignorée et on retrouve le comportement actuel. */
.section > .container {
  overflow-x: clip;
}

.section--muted { background: var(--ip-bg-muted); }

/* Cartes de valeurs (page Nos valeurs) : 2 cartes par ligne max, fond blanc semi-transparent */
.prose .row:has(> .col-md-3) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.prose .col-md-3 {
  flex: 0 0 calc(50% - .5rem);
  max-width: calc(50% - .5rem);
  box-sizing: border-box;
  margin: 0;
  background: var(--ip-petrol-100);
  border: 1px solid var(--ip-petrol-500);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow-sm);
  padding: 1.25rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.prose .col-md-3:hover {
  box-shadow: var(--ip-shadow);
  transform: translateY(-2px);
}
.prose .col-md-3 h3 {
  color: var(--ip-petrol-700);
  margin-top: 0;
}
.section--error { padding-block: 5rem; }
.section__eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  font-weight: 700; color: var(--ip-coral-600); margin-bottom: .35rem;
}
.section__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .25rem; }

/* Atouts */
.atout { padding-left: 1rem; border-left: 3px solid var(--ip-coral-600); }
.atout__title { color: var(--ip-petrol-700); }
.atout__text  { color: var(--ip-slate); }

/* Listes formation */
.list-check { list-style: none; padding-left: 0; }
.list-check li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.list-check li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--ip-green-600); font-weight: 700;
}

/* Tuiles parcours (accueil) */
.tuile {
  background: var(--ip-bg);
  border: 1px solid var(--ip-line);
  border-top: 3px solid var(--ip-coral-600);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow-sm);
  padding: 1.5rem;
}
.tuile__title {
  font-family: var(--ip-font-display);
  color: var(--ip-petrol-700);
  margin-bottom: 1rem;
}
.tuile__list { list-style: none; padding-left: 0; margin-bottom: 0; }
.tuile__list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: .65rem;
  color: var(--ip-ink);
  font-size: .92rem;
  line-height: 1.5;
}
.tuile__list li:last-child { margin-bottom: 0; }
.tuile__list li strong { color: var(--ip-petrol-700); }
.tuile__list li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ip-coral-600);
}
.tuile__title--image {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  min-height: 110px;
  padding: calc(.5rem + 15px) .5rem .5rem;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 130px auto;
  margin-bottom: 1.75rem;
}
.list-program { padding-left: 1.2rem; }
.list-program li { margin-bottom: .4rem; }

/* Carte info (sidebar formation / contact) */
.info-card {
  background: #e9e9e9;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  padding: 1.5rem;
}
.info-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ip-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ip-coral-600);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: .6rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--ip-line);
}
.info-card__title svg,
.info-card__title .bi { flex-shrink: 0; }
.info-list { margin: 0; }
.info-list dt { display: inline; font-weight: 700; color: var(--ip-petrol-700); }
.info-list dt .bi { margin-right: .3rem; color: var(--ip-coral-600); }
.info-list dd { display: inline; margin: 0; color: var(--ip-ink); }
.info-list dd::after { content: ''; display: block; margin-bottom: .4rem; }
.info-card__empty { margin: 0; font-size: .875rem; color: var(--ip-slate); }

/* Groupe d'informations dans la carte "En résumé" : rassemble sur fond blanc
   les entrées d'une même offre et le bouton d'action correspondant, pour les
   distinguer quand la carte en présente plusieurs. */
.info-group {
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius-sm);
  padding: .9rem 1rem 1rem;
}
.info-group + .info-group { margin-top: .9rem; }
.info-group__title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--ip-line);
  font-family: var(--ip-font-display);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ip-petrol-700);
}
.info-group__title .bi {
  flex-shrink: 0;
  font-size: 1.05rem;
  color: var(--ip-coral-600);
}

/* Carte image (visuel/macaron en tête de sidebar formation) */
.info-card--image {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  background: #fff;
  border: none;
}
.info-card--image img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
}
/* Variante illustration : image large (dessin, capture) plutôt que picto, elle
   occupe toute la largeur de la colonne. */
.info-card--image-wide img {
  max-width: 100%;
  border-radius: var(--ip-radius);
}

.contact-illustration {
  display: block;
  width: 50%;
  height: auto;
}

.whatsapp-qr {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: 8px;
  padding: 4px;
}

.info-card__logo-box {
  display: inline-block;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}
.info-card__logo {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

/* Carte plan (Google Maps, page contact) */
.info-card--map {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.info-card--map iframe { border: 0; }
.info-card--map__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.info-card--map__link {
  display: block;
  padding: .6rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  text-align: center;
  color: var(--ip-coral-600);
  border-top: 1px solid var(--ip-line);
}

/* Carte "Documents" (téléchargements formation) */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li + li { margin-top: .5rem; }
.doc-list__link {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--ip-ink);
  font-size: .875rem;
  line-height: 1.3;
  text-decoration: none;
}
.doc-list__link:hover { color: var(--ip-coral-600); }
.doc-list__icon { flex: 0 0 auto; color: var(--ip-petrol-700); margin-top: .05rem; font-size: 1rem; }

/* Accordéons (FAQ, mega-menu mobile) : gris au repos, bleu Bootstrap par
   défaut à l'ouverture (accordion-button:not(.collapsed)), réponse blanche. */
.accordion-item {
  background-color: #e9e9e9;
  border-radius: 0 !important;
  margin-bottom: .5rem;
}
.accordion-button { background-color: #e9e9e9; }
.accordion-body { background-color: #fff; }

/* Contenu éditorial */
.prose { color: var(--ip-ink); line-height: 1.7; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.4rem; }
.prose a:not(.btn)  { color: var(--ip-petrol-500); }

/* Chapô en bulle façon BD, utilisé en tête de certaines fiches formation */
.prose__intro {
  background: rgba(204, 0, 102, .04);
  border: 1.5px solid rgba(204, 0, 102, .35);
  border-radius: 24px;
  padding: .85rem 1.1rem;
  display: flow-root; /* clearfix : englobe le portrait flottant (figure) */
}
/* Chapô multi-blocs (p + ul) : pas de marge résiduelle en bas de la bulle */
.prose__intro > *:last-child { margin-bottom: 0; }

/* Point d'attention dans le contenu éditorial : information à ne pas manquer
   (contrainte technique, prérequis, limite de la prestation…). */
.prose__alert {
  position: relative;
  background: rgba(204, 0, 102, .06);
  border-left: 4px solid var(--ip-coral-600);
  border-radius: var(--ip-radius-sm);
  padding: 1rem 1.15rem 1rem 3.1rem;
  margin: 1.5rem 0;
}
.prose__alert::before {
  content: "\f33a"; /* bi-exclamation-triangle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ip-coral-600);
}
.prose__alert > *:last-child { margin-bottom: 0; }

/* Tableaux du contenu éditorial (tarifs, comparatifs, programmes) : Bootstrap
   ne pose qu'un filet sous chaque ligne, on habille en-tête, lignes alternées
   et bordure arrondie aux couleurs de la marque. */
.prose .table {
  --bs-table-bg: transparent;
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden; /* rogne les cellules d'en-tête aux coins arrondis */
  box-shadow: var(--ip-shadow-sm);
  font-size: .95rem;
}
.prose .table > thead > tr > th {
  padding: .75rem .9rem;
  border: 0;
  background: var(--ip-petrol-700);
  color: #fff;
  font-family: var(--ip-font-display);
  font-weight: 600;
  vertical-align: bottom;
}
.prose .table > tbody > tr > td {
  padding: .7rem .9rem;
  border: 0;
  border-top: 1px solid var(--ip-line);
  vertical-align: top;
}
/* Première colonne : libellé de la ligne (critère, lot, élément…). */
.prose .table > tbody > tr > td:first-child { font-weight: 600; }
.prose .table > tbody > tr:nth-child(even) > td { background: var(--ip-petrol-100); }
.prose .table > tbody > tr:hover > td { background: rgba(204, 0, 102, .06); }

/* Sur mobile, un comparatif à trois colonnes ne tient pas dans la largeur de
   l'écran : le tableau défile horizontalement dans son propre cadre plutôt que
   de pousser toute la page (barre de défilement horizontale du document). */
@media (max-width: 575.98px) {
  .prose .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    font-size: .875rem;
  }
  .prose .table > thead > tr > th { padding: .6rem .65rem; }
  .prose .table > tbody > tr > td { padding: .55rem .65rem; }
}

/* Vidéo de démonstration : la vignette (poster) n'a pas forcément le format du
   cadre, on complète en blanc plutôt qu'en noir. */
.prose .ratio > video {
  background: #fff;
  object-fit: contain;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
}

/* Captures d'écran du contenu éditorial (rapport d'automatisation, schéma
   d'un traitement…) : image encadrée, légende dessous, clic sur l'image pour
   l'ouvrir en taille réelle dans un nouvel onglet. */
.prose__figure {
  margin: 1.5rem 0;
}
.prose__figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow-sm);
}
.prose__figure a:hover img { border-color: var(--ip-coral-600); }
.prose__figure figcaption {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ip-slate);
}
/* Deux captures côte à côte (comparaison de deux rapports, avant/après…). */
.prose__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.prose__figures .prose__figure { margin: 0; }
@media (max-width: 767.98px) {
  .prose__figures { grid-template-columns: 1fr; }
}

/* Bandeau "partenaire" dans le contenu éditorial : logo du partenaire qui
   assure la prestation, suivi de la mention correspondante. */
.prose__partner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--ip-petrol-100);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
}
.prose__partner img {
  flex: 0 0 auto;
  width: 160px;
  height: auto;
}
.prose__partner p { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .prose__partner { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .prose__partner img { width: 140px; }
}

/* Cadre de section, avec titre (h2/h3) intégré à la bordure */
.cadre {
  position: relative;
  border: 1.5px solid rgba(204, 0, 102, .35);
  border-radius: var(--ip-radius);
  padding: 2.8rem 1.25rem 0.2rem;
  margin: 2.75rem 0 0;
}
.cadre__title {
  position: absolute;
  top: 0;
  left: 1.25rem;
  transform: translateY(-0.65em);
  width: auto;
  max-width: calc(100% - 2.5rem);
  padding: 0 .6rem;
  margin: 0;
  background: #fff;
  font-family: var(--ip-font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
}
.cadre > *:first-child { margin-top: 0; }

/* Cartes partenaires / liens utiles : logo à taille originale à gauche du texte */
.partner-card { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; }
.partner-card__logo {
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-card__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-card__body { flex: 1 1 auto; min-width: 0; }
.partner-card__body h3 { margin-top: 0; }

/* Chapô centré (ex. page /nos-clients) */
.section__intro {
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* Carrousel de logos (défilement continu en CSS pur) */
.logo-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-carousel__track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: logo-carousel-scroll 34s linear infinite;
}
.logo-carousel:hover .logo-carousel__track { animation-play-state: paused; }
.logo-carousel__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.logo-carousel__item img {
  max-height: 100%;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s ease, opacity .25s ease;
}
.logo-carousel__item img:hover { filter: grayscale(0); opacity: 1; }
@keyframes logo-carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-carousel { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logo-carousel__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-carousel__item[aria-hidden="true"] { display: none; }
}

/* Fil d'Ariane */
.breadcrumb-wrap { background: var(--ip-bg-muted); border-bottom: 1px solid var(--ip-line); }
.breadcrumb-wrap .container { padding-block: .6rem; }
.breadcrumb { font-size: .875rem; }

/* État vide / erreur */
.empty-state { color: var(--ip-slate); text-align: center; padding: 2rem 0; }
.error-code { font-family: var(--ip-font-display); font-size: 5rem; font-weight: 700; color: var(--ip-coral-600); line-height: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ip-petrol-900);
  color: rgba(255,255,255,.85);
  padding-block: 3rem 1.5rem;
  margin-top: 0;
}
.footer-brand { font-family: var(--ip-font-display); font-weight: 700; font-size: 1.4rem; color: #fff; margin-bottom: .1rem; }
.footer-baseline { color: rgba(255,255,255,.65); font-size: .9rem; }
.footer-phone { color: #fff; font-weight: 600; text-decoration: none; }
.footer-title { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: .9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
/* Accès à l'espace formateur. Défini explicitement plutôt que laissé à
   .btn-outline-light : « .site-footer a » l'emporterait en spécificité sur la
   couleur du bouton, et le rendu dépendrait alors d'un accident de cascade. */
.footer-cta {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--ip-radius);
  padding: .45rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.site-footer .footer-cta { color: #fff; }
.site-footer .footer-cta:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ip-petrol-900);
}
.footer-cert-link { display: inline-block; }
.footer-cert-badge {
  display: inline-flex;
  background: #fff;
  border-radius: var(--ip-radius);
  padding: .6rem;
}
.footer-cert-logo { display: block; width: 100%; max-width: 180px; height: auto; }
.site-footer a { color: rgba(255,255,255,.85); }
.footer-sep { border-color: rgba(255,255,255,.15); margin-block: 1.75rem 1rem; }
.footer-bottom { font-size: .85rem; color: rgba(255,255,255,.65); }
.footer-bottom a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* ============================================================
   WIZARD DE CONTACT (formulaire multi-étapes)
   ============================================================ */
.wizard__step { display: none; }
.wizard__step.is-active { display: block; }
.wizard__step-title { color: var(--ip-petrol-700); }
.wizard__step-intro {
  background: var(--ip-petrol-100);
  border-radius: var(--ip-radius-sm);
  padding: .9rem 1.1rem;
  margin-bottom: 1rem;
  color: var(--ip-slate);
  font-size: .95rem;
}
.wizard__step-intro p { margin-bottom: .5rem; }
.wizard__step-intro p:last-child { margin-bottom: 0; }
.wizard__step-intro ul { margin-bottom: .5rem; padding-left: 1.2rem; }

.wizard__progress-step {
  font-family: var(--ip-font-display);
  font-weight: 700;
  color: var(--ip-coral-600);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wizard__progress-title { color: var(--ip-slate); font-size: .9rem; }
.wizard__progress .progress-bar { background-color: var(--ip-petrol-700); transition: width .3s ease; }

/* Étape "Objet" : gros boutons plutôt qu'un select caché */
.wizard-objet__group-title {
  font-family: var(--ip-font-display);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ip-coral-600);
  margin: 1.25rem 0 .5rem;
}
.wizard-objet__group-title:first-child { margin-top: 0; }
.wizard-objet__btn {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .65rem;
  row-gap: .25rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border: 2px solid var(--ip-line);
  border-radius: var(--ip-radius);
  background: var(--ip-bg-muted);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wizard-objet__btn:hover { border-color: var(--ip-petrol-500); transform: translateY(-1px); }
.wizard-objet__icon { grid-column: 1; grid-row: 1; display: flex; align-items: center; color: var(--ip-petrol-700); }
.wizard-objet__label { grid-column: 2; grid-row: 1; align-self: center; font-family: var(--ip-font-display); font-weight: 700; color: var(--ip-ink); }
.wizard-objet__desc { grid-column: 1 / -1; grid-row: 2; font-size: .85rem; color: #cc0066; }
.wizard-objet__input:checked + .wizard-objet__btn {
  border-color: var(--ip-coral-600);
  box-shadow: 0 0 0 1px var(--ip-coral-600);
  background: var(--ip-coral-100);
}
.wizard-objet__input:checked + .wizard-objet__btn .wizard-objet__icon { color: var(--ip-coral-600); }
.wizard-objet__input:focus-visible + .wizard-objet__btn { outline: 3px solid var(--ip-coral-500); outline-offset: 2px; }

/* Étapes "Choix" : formations/prestations groupées par thématique */
.wizard-choice__group {
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius-sm);
  padding: .5rem .9rem;
  margin-bottom: .6rem;
}
.wizard-choice__summary {
  cursor: pointer;
  font-family: var(--ip-font-display);
  font-weight: 700;
  color: var(--ip-petrol-700);
  padding: .4rem 0;
}
/* Sessions inter : second niveau (thématique > formation > dates) */
.wizard-choice__subgroups {
  padding: .25rem 0 .5rem;
}
.wizard-choice__group--sub {
  border-color: var(--ip-line);
  background: var(--ip-petrol-100);
  padding: .25rem .75rem;
  margin-bottom: .4rem;
}
.wizard-choice__group--sub:last-child { margin-bottom: 0; }
.wizard-choice__summary--sub {
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ip-petrol-700);
  padding: .3rem 0;
}
.wizard-choice__items {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem 0 .75rem;
}
.wizard-choice__label {
  display: inline-block;
  padding: .4rem .9rem;
  border: 1px solid var(--ip-line);
  border-radius: 999px;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.wizard-choice__label:hover { border-color: var(--ip-petrol-500); }
.wizard-choice__input:checked + .wizard-choice__label {
  background: var(--ip-coral-600);
  border-color: var(--ip-coral-600);
  color: #fff;
}
.wizard-choice__input:focus-visible + .wizard-choice__label { outline: 3px solid var(--ip-coral-500); outline-offset: 2px; }

/* Sous-titre de section à l'intérieur d'une étape (ex. coordonnées du gestionnaire) */
.wizard__subhead {
  font-family: var(--ip-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ip-petrol-700);
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--ip-line);
}

/* Récapitulatif */
.wizard-recap { margin: 0; }
.wizard-recap__row {
  display: flex;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--ip-line);
}
.wizard-recap__row dt { flex: 0 0 40%; font-weight: 700; color: var(--ip-petrol-700); margin: 0; }
.wizard-recap__row dd { flex: 1 1 auto; margin: 0; color: var(--ip-ink); }

.wizard__nav-prev:disabled,
.wizard__nav-next:disabled { opacity: .6; }

.wizard__rgpd { font-size: .75rem; line-height: 1.5; }

/* ============================================================
   CARTE (clients / intervenants — app/components/map.php)
   ============================================================ */
.geomap {
  position: relative;
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow);
  overflow: hidden;
}
.geomap__canvas { width: 100%; background: var(--ip-bg-muted); }

.geomap__legend {
  position: absolute;
  z-index: 500;
  top: .75rem;
  right: .75rem;
  background: var(--ip-bg);
  padding: .5rem .75rem;
  border-radius: var(--ip-radius-sm);
  box-shadow: var(--ip-shadow-sm);
  font-size: .875rem;
  line-height: 1.6;
}
.geomap__legend-item { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.geomap__dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.geomap__dot--client      { background: var(--ip-petrol-700); }
.geomap__dot--intervenant { background: var(--ip-coral-600); }

.geomap__cta {
  position: absolute;
  z-index: 500;
  left: .75rem;
  bottom: .75rem;
}

.geomap__popup-titre { font-weight: 600; margin-bottom: .15rem; }
.geomap__popup-type  { color: var(--ip-slate); font-size: .75rem; text-transform: capitalize; }
.geomap__popup-competences { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.geomap__popup-tag {
  background: var(--ip-petrol-100);
  color: var(--ip-petrol-700);
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 999px;
}

/* ============================================================
   ACCESSIBILITÉ / MOTION
   ============================================================ */
:focus-visible { outline: 3px solid var(--ip-coral-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   VIDÉO YOUTUBE : VIGNETTE CLIQUABLE
   ============================================================ */
/* Aucune requête vers YouTube tant que le visiteur n'a pas cliqué : la vignette
   est hébergée sur le site, l'iframe n'est injectée qu'au clic (cf. main.js).
   Évite de déposer un traceur tiers sur un site sans bandeau de consentement. */
.video-embed__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ip-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--ip-petrol-900);
}
.video-embed__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
}
.video-embed__btn:hover img { opacity: .85; }

/* Pastille de lecture, dessinée en CSS : pas d'image supplémentaire à charger. */
.video-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--ip-coral-600);
  box-shadow: 0 4px 18px rgba(8, 44, 58, .45);
  transition: transform .2s ease, background-color .2s ease;
}
.video-embed__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .85rem 0 .85rem 1.4rem;
  border-color: transparent transparent transparent #fff;
}
.video-embed__btn:hover .video-embed__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--ip-coral-500);
}
.video-embed__btn:focus-visible .video-embed__play { transform: translate(-50%, -50%) scale(1.08); }
.video-embed iframe { border: 0; border-radius: var(--ip-radius); }

/* ============================================================
   ENCART « ORGANISATION PRISE EN CHARGE » (fiches et liste formations)
   ============================================================ */
.services-formation { padding-bottom: 1.25rem; }
.services-formation__intro { color: var(--ip-slate); margin-bottom: 1.1rem; }
.services-formation__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}
/* Deux colonnes dès qu'il y a la place : la liste reste lisible sans s'étirer. */
@media (min-width: 576px) {
  .services-formation__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
.services-formation__item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  line-height: 1.5;
}
.services-formation__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ip-petrol-100);
  color: var(--ip-coral-600);
}
.services-formation__icon .bi { font-size: 1rem; line-height: 1; }
.services-formation__item strong { display: block; color: var(--ip-petrol-700); }
.services-formation__text { color: var(--ip-slate); font-size: .925rem; }

/* ============================================================
   ACTUALITÉS (liste /actualites + fiche article)
   ============================================================ */

/* Filtres par rubrique : mêmes pastilles que le wizard de contact. */
.article-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.article-filters__btn {
  padding: .4rem .9rem;
  border: 1px solid var(--ip-line);
  border-radius: 999px;
  background: var(--ip-bg);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ip-slate);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.article-filters__btn:hover { border-color: var(--ip-petrol-500); color: var(--ip-petrol-700); }
.article-filters__btn.is-active {
  background: var(--ip-coral-600);
  border-color: var(--ip-coral-600);
  color: #fff;
}

.article-list__eyebrow {
  font-family: var(--ip-font-display);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ip-coral-600);
  margin-bottom: .5rem;
}

/* Carte article : ligne de métadonnées (rubrique + date) au-dessus du titre. */
.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  color: var(--ip-slate);
}
.article-card__media {
  background: var(--ip-bg-muted);
  border-bottom: 1px solid var(--ip-line);
}
/* Les visuels de couverture sont au format 1200x630 : à la largeur d'une carte
   de grille, la hauteur ci-dessous correspond au ratio source, l'illustration
   n'est donc quasiment pas recadrée. */
.article-card__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Infographie porteuse de texte : le recadrage de la carte part du haut,
   pour garder le titre du visuel entier (il est affiché en entier sur la
   fiche article, cf. .article__cover--contain). */
.article-card__media--top img {
  object-position: top;
}

/* « À la une » : carte pleine largeur, bandeau plus haut et corps aéré. Le
   recadrage se fait en haut et en bas, la composition horizontale du visuel
   (scène à gauche, document à droite) reste entière. */
@media (min-width: 768px) {
  .article-card--featured .article-card__media img { height: 340px; }
  .article-card--featured .card-body { padding: 1.5rem; }
}

/* --- Fiche article ----------------------------------------- */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: var(--ip-slate);
  margin-bottom: 1rem;
}
.article__updated { font-style: italic; }
.article__cover {
  margin: 0 0 1.5rem;
}
.article__cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow-sm);
}
.article__cover--contain img {
  max-height: none;
  object-fit: contain;
}
.article__sources {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--ip-petrol-100);
  border-radius: var(--ip-radius-sm);
  font-size: .9rem;
}
.article__sources h2 { color: var(--ip-petrol-700); margin-bottom: .5rem; }
.article__sources ul { margin: 0; padding-left: 1.2rem; }
.article__sources li + li { margin-top: .25rem; }
.article__cta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ip-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.article__cta p { flex: 1 1 100%; }

/* ============================================================
   CALENDRIER DES SESSIONS INTER-ENTREPRISES (/calendrier)
   Barre de filtres + liste de sessions regroupées par mois.
   Le JS (calendrier.js) ne fait que masquer/réordonner ces lignes.
   ============================================================ */
/* Panneau de filtres : fond bleu doux plutôt que transparent, pour le
   distinguer à la fois du gris de la section et du blanc des lignes de session.
   Sans titre en encoche (contrairement aux autres .cadre), donc padding normal. */
.calendrier-filtres {
  background: var(--ip-petrol-100);
  border-color: rgba(14, 74, 95, .22);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
}

/* Rappel « les sessions affichent complet », juste au-dessus des filtres. */
.calendrier__urgence {
  display: flex;
  gap: .6rem;
  margin: 0 0 1.25rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border-left: 4px solid var(--ip-coral-600);
  border-radius: var(--ip-radius-sm);
  box-shadow: var(--ip-shadow-sm);
  line-height: 1.5;
}
.calendrier__urgence .bi {
  flex: 0 0 auto;
  color: var(--ip-coral-600);
  font-size: 1.15rem;
  line-height: 1.35;
}
.calendrier-filtres .form-label {
  font-family: var(--ip-font-display);
  font-weight: 600;
  color: var(--ip-petrol-700);
  font-size: .85rem;
  margin-bottom: .25rem;
}
.calendrier__compteur {
  color: var(--ip-slate);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.calendrier { display: flex; flex-direction: column; gap: .75rem; }
.calendrier__mois {
  font-size: 1.05rem;
  color: var(--ip-petrol-700);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 1.25rem 0 .25rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--ip-coral-100);
}
.calendrier__mois:first-child { margin-top: 0; }

/* Bouton « Afficher les sessions suivantes » (la liste est dépliée par
   tranches de 10 par calendrier.js). Masqué tant qu'il ne reste rien. */
.calendrier__plus {
  margin: 1.25rem 0 0;
  text-align: center;
}

.session {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ip-line);
  border-left: 4px solid var(--ip-coral-600);
  border-radius: var(--ip-radius-sm);
  padding: .9rem 1rem;
  box-shadow: var(--ip-shadow-sm);
}
.session__date {
  margin: 0;
  text-align: center;
  font-family: var(--ip-font-display);
  line-height: 1.1;
  color: var(--ip-petrol-700);
}
.session__jour { display: block; font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.session__mois { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ip-slate); }
.session__corps { min-width: 0; }
.session__theme {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .15rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ip-slate);
}
.session__theme svg { width: 16px; height: 16px; color: var(--ip-petrol-500); }
.session__titre { font-size: 1rem; margin: 0 0 .3rem; }
.session__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0;
  font-size: .875rem;
  color: var(--ip-slate);
}
.session__meta .bi { color: var(--ip-petrol-500); margin-right: .2rem; }
.session__note { margin: .35rem 0 0; font-size: .82rem; color: var(--ip-coral-600); }
.session__note a { color: var(--ip-petrol-500); }
.session__action { margin: 0; white-space: nowrap; }

.session--passee {
  border-left-color: var(--ip-line);
  background: var(--ip-bg-muted);
  opacity: .75;
}
.session--passee .session__date,
.session--passee .session__theme svg { color: var(--ip-slate); }

@media (max-width: 575.98px) {
  .session {
    grid-template-columns: 4.5rem 1fr;
    row-gap: .6rem;
  }
  .session__action { grid-column: 1 / -1; }
  .session__action .btn { width: 100%; }
}

/* ============================================================
   RECHERCHE INTERNE
   Loupe de la navbar + panneau déroulant (app/components/search.php)
   et page de résultats (app/templates/recherche.php).
   ============================================================ */

/* --- Loupe du menu ------------------------------------------ */
.site-search__toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  font-family: var(--ip-font-display);
  font-weight: 600;
  color: var(--ip-ink);
  text-decoration: none;
  border-radius: var(--ip-radius-sm);
}
.site-search__toggle:hover,
.site-search__toggle[aria-expanded="true"] {
  color: var(--ip-coral-600);
  background: var(--ip-petrol-100);
}
.site-search__toggle .bi { font-size: 1.1rem; line-height: 1; }

@media (min-width: 992px) {
  /* Desktop : la loupe seule suffit, le libellé n'est là que pour le menu
     mobile où les rubriques sont empilées en liste de texte. */
  .site-search__toggle { padding: .5rem .6rem; }
  .site-search__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --- Panneau déroulant -------------------------------------- */
.site-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1035; /* au-dessus des mega-menus */
  background: var(--ip-bg);
  border-bottom: 1px solid var(--ip-line);
  box-shadow: 0 8px 28px rgba(8, 44, 58, .12);
  padding: 1rem 0 1.25rem;
}
.site-search[hidden] { display: none; }

.site-search__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}
.site-search__icon {
  position: absolute;
  left: .9rem;
  color: var(--ip-slate);
  pointer-events: none;
}
.site-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .7rem 1rem .7rem 2.6rem;
  font-size: 1rem;
  color: var(--ip-ink);
  background: var(--ip-bg);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius-sm);
}
.site-search__input:focus {
  outline: none;
  border-color: var(--ip-petrol-500);
  box-shadow: 0 0 0 3px rgba(21, 114, 143, .18);
}
.site-search__close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: .5rem;
  color: var(--ip-slate);
  line-height: 1;
}
.site-search__close:hover { color: var(--ip-coral-600); }

/* --- Suggestions -------------------------------------------- */
.site-search__results {
  margin-top: .75rem;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  border-top: 1px solid var(--ip-line);
}
.site-search__result {
  display: block;
  padding: .7rem .75rem;
  color: var(--ip-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ip-line);
}
.site-search__result:hover,
.site-search__result.is-active {
  background: var(--ip-petrol-100);
  color: var(--ip-ink);
}
.site-search__result-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
}
.site-search__result-type,
.search-result__type {
  flex: 0 0 auto;
  font-family: var(--ip-font-display);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ip-petrol-700);
  background: var(--ip-petrol-100);
  border-radius: 999px;
  padding: .15em .7em;
}
.site-search__result-title {
  font-family: var(--ip-font-display);
  font-weight: 600;
}
.site-search__result-excerpt {
  display: block;
  margin-top: .2rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--ip-slate);
}
.site-search__all {
  display: block;
  padding: .7rem .75rem;
  font-family: var(--ip-font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ip-coral-600);
  text-decoration: none;
}
.site-search__all:hover,
.site-search__all.is-active { background: var(--ip-petrol-100); color: var(--ip-coral-500); }
.site-search__empty {
  margin: 0;
  padding: .9rem .75rem;
  color: var(--ip-slate);
}

/* Surlignage des mots trouvés (extraits produits par SearchService). */
.site-search mark,
.search-result__excerpt mark {
  background: var(--ip-coral-100);
  color: var(--ip-ink);
  padding: 0 .1em;
  border-radius: 3px;
}

/* --- Page /recherche ---------------------------------------- */
.search-page__form {
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
  margin-bottom: 1.5rem;
}
.search-page__icon {
  position: absolute;
  left: .9rem;
  color: var(--ip-slate);
  pointer-events: none;
}
.search-page__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .8rem 1rem .8rem 2.6rem;
  font-size: 1.05rem;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius-sm);
}
.search-page__input:focus {
  outline: none;
  border-color: var(--ip-petrol-500);
  box-shadow: 0 0 0 3px rgba(21, 114, 143, .18);
}
.search-page__count { font-size: 1.05rem; margin-bottom: 1.25rem; }
.search-page__hint { color: var(--ip-slate); }

.search-results { list-style: none; margin: 0; padding: 0; }
.search-result {
  padding: 1.1rem 0;
  border-top: 1px solid var(--ip-line);
}
.search-result:last-child { border-bottom: 1px solid var(--ip-line); }
.search-result__link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  text-decoration: none;
}
.search-result__title {
  font-family: var(--ip-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ip-petrol-700);
}
.search-result__link:hover .search-result__title { color: var(--ip-coral-600); text-decoration: underline; }
.search-result__subtitle { margin: .35rem 0 0; color: var(--ip-ink); }
.search-result__excerpt { margin: .35rem 0 0; font-size: .9rem; color: var(--ip-slate); }
.search-result__url {
  margin: .3rem 0 0;
  font-size: .8rem;
  color: var(--ip-green-600);
  word-break: break-all;
}

@media (max-width: 575.98px) {
  .search-page__form .btn,
  .site-search__form .btn { padding-inline: .9rem; }
}