/* =====================================================================
   layout.css — Structure des pages du front (espace salariés)
   ---------------------------------------------------------------------
   En-tête fine et sticky, navigation principale hiérarchique, menu latéral
   coulissant sur mobile, zone de contenu, pied de page.

   Le menu mobile est un panneau clair qui glisse depuis la gauche : pas de
   bandeau foncé, pas de burger posé sur une barre sombre.
   ===================================================================== */

/* =====================================================================
   1. SQUELETTE
   ===================================================================== */

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.irp-layout {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100vh;
}

.irp-main {
  flex: 1 0 auto;
  padding-block: 1.25rem 2rem;
}

.irp-container {
  width: 100%;
  max-width: var(--irp-content-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 992px) {
  .irp-container { padding-inline: 1.5rem; }
  .irp-main { padding-block: 1.6rem 2.5rem; }
}

/* =====================================================================
   2. EN-TÊTE — fine, sticky, translucide
   ===================================================================== */

.irp-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--irp-nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--irp-border-soft);
  transition: box-shadow var(--irp-transition), border-color var(--irp-transition);
}

/* Ombre portée uniquement lorsque la page est défilée (classe posée par app.js). */
.irp-header.is-scrolled {
  box-shadow: var(--irp-shadow-sm);
  border-bottom-color: var(--irp-border);
}

/* L'en-tete du front est plus haute que celle de l'admin : le logo y est
   affiche assez grand pour que la signature « Instances representatives du
   personnel » soit reellement lisible.
   Ces variables ne sont redefinies que dans layout.css, charge par le seul
   front : l'admin conserve la hauteur compacte definie dans theme.css. */
:root {
  --irp-header-height: 74px;
  --irp-header-height-condensed: 58px;
}

@media (max-width: 575.98px) {
  :root {
    --irp-header-height: 64px;
    --irp-header-height-condensed: 54px;
  }
}

.irp-header__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--irp-header-height);
  transition: height var(--irp-transition);
}

/* Des que la page defile, l'en-tete se condense : le bandeau sticky reste
   fin pendant la lecture, sans sacrifier la lisibilite du logo en haut de page.
   La classe est posee par app.js (initStickyHeader). */
.irp-header.is-scrolled .irp-header__bar {
  height: var(--irp-header-height-condensed);
}

/* --- Logo ------------------------------------------------------------ */
.irp-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--irp-slate);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.irp-brand:hover { color: var(--irp-cyan-600); }
[data-bs-theme='dark'] .irp-brand { color: var(--irp-text); }
[data-bs-theme='dark'] .irp-brand:hover { color: var(--irp-cyan-300); }

/* Hauteurs du logo propres au front (la regle de base est dans theme.css,
   partagee avec l'admin).

   56 px est le seuil a partir duquel la signature du logo se lit sans effort ;
   en dessous de 46 px elle n'est plus qu'une texture. Le logo se reduit avec
   l'en-tete au defilement. */
.irp-header .irp-brand__logo {
  height: 3.5rem;
  transition: height var(--irp-transition);
}

.irp-header.is-scrolled .irp-brand__logo { height: 2.4rem; }

@media (max-width: 575.98px) {
  .irp-header .irp-brand__logo { height: 2.9rem; }
  .irp-header.is-scrolled .irp-brand__logo { height: 2.2rem; }
}

/* Menu lateral mobile : meme logique, sans condensation. */
.irp-drawer .irp-brand__logo { height: 2.9rem; }

/* Pied de page : le logo peut respirer, la signature y est pleinement lisible. */
.irp-brand--footer .irp-brand__logo { height: 3.5rem; }

/* --- Recherche dans l'en-tête ---------------------------------------- */
.irp-header__search { display: none; }
@media (min-width: 992px) {
  .irp-header__search { display: flex; flex: 1 1 auto; justify-content: center; max-width: 22rem; }
}

/* --- Actions de droite ----------------------------------------------- */
.irp-header__actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* --- Cloche : alertes du salarié -------------------------------------
   Menu déroulant ancré à droite ; sur téléphone, il ne dépasse jamais de
   l'écran. La couleur de l'icône double le libellé, jamais seule. */
.irp-alertes {
  width: 20rem;
  max-width: calc(100vw - 2rem);
}

.irp-alertes__item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  white-space: normal;
  padding-block: .5rem;
}

.irp-alertes__icone {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border-radius: var(--irp-radius-sm);
  background: var(--irp-cyan-50);
  color: var(--irp-cyan-700);
}
.irp-alertes__icone--rejete  { background: var(--irp-rejete-bg);  color: var(--irp-rejete-text); }
.irp-alertes__icone--retard  { background: var(--irp-retard-bg);  color: var(--irp-retard-text); }
.irp-alertes__icone--attente { background: var(--irp-attente-bg); color: var(--irp-attente-text); }
[data-bs-theme='dark'] .irp-alertes__icone--info { background: rgba(27, 157, 217, .14); color: var(--irp-cyan-300); }

.irp-alertes__texte { display: flex; flex-direction: column; min-width: 0; }
.irp-alertes__libelle { font-weight: 600; font-size: .86rem; line-height: 1.3; }
.irp-alertes__detail { font-size: .78rem; color: var(--irp-text-muted); line-height: 1.35; }

.irp-alertes__vide {
  padding: .5rem .85rem;
  font-size: .85rem;
  color: var(--irp-text-muted);
}

/* Le bouton d'ouverture du menu latéral disparaît sur grand écran. */
.irp-header__burger { display: inline-flex; }
@media (min-width: 992px) { .irp-header__burger { display: none; } }

/* Bouton de connexion : le libelle disparait sur les tres petits ecrans,
   ou la barre est deja chargee (burger, thème, notifications). */
.irp-header__cta { display: inline-flex; align-items: center; gap: .35rem; }

@media (max-width: 399.98px) {
  .irp-header__cta-label { display: none; }
  .irp-header__cta { padding-inline: .5rem; }
}

/* =====================================================================
   3. NAVIGATION PRINCIPALE — hiérarchique, sur une seconde ligne fine
   ===================================================================== */

/* La barre porte le bleu de la marque. Tout était blanc — barre du haut,
   menu, cartes, pied — et rien, hors du logo, ne disait sur quel site on
   était. C'est le bleu FONCÉ (cyan-700) et non celui du logo : sur le bleu
   du logo, le texte blanc n'atteint que 3:1, en dessous des 4,5:1 qu'exige
   un libellé de cette taille. */
.irp-nav {
  display: none;
  background: var(--irp-cyan-700);
}
[data-bs-theme='dark'] .irp-nav { background: var(--irp-cyan-900); }
@media (min-width: 992px) { .irp-nav { display: block; } }

.irp-nav__list {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 40px;
}

.irp-nav__item { position: relative; }

/* Lignes de séparation placées dans l'arborescence des pages (admin). */
.irp-nav__separateur {
  align-self: center;
  width: 1px;
  height: 1.1rem;
  margin: 0 .35rem;
  background: rgba(255, 255, 255, .35);
}

.irp-nav__submenu-separateur {
  height: 1px;
  margin: .3rem .5rem;
  background: var(--irp-border-soft);
}

.irp-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 40px;
  padding: 0 .7rem;
  font-size: .875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  /* Transparent : il ne se voit pas, mais il RÉSERVE les deux pixels du
     bas. Sans lui, la barre se décalerait quand le trait apparaît. */
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  transition: color var(--irp-transition);
}

/* Le trait se déploie depuis le centre, au survol comme au clavier. Il
   était jusqu'ici réservé à la page courante, et le reste du menu ne
   répondait que par un changement de couleur — ce qui se remarque à
   peine sur un libellé déjà sombre. C'est le pendant horizontal du
   liseré des sous-menus : même geste, même durée. */
.irp-nav__link::after {
  content: '';
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--irp-transition), opacity var(--irp-transition);
}

.irp-nav__link:hover,
.irp-nav__link:focus-visible { color: #fff; }

/* Le contour de focus par défaut, bleu, disparaît sur la barre bleue. */
.irp-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 4px; }

/* Au survol, le trait est plus pâle que celui de la page courante : on
   distingue « je passe dessus » de « j'y suis ». */
.irp-nav__link:hover::after,
.irp-nav__link:focus-visible::after {
  transform: scaleX(1);
  opacity: .45;
}

.irp-nav__link.is-active {
  color: #fff;
  /* Même graisse que les autres entrées : en dessous, la page courante
     paraîtrait MOINS importante que ses voisines. Ce qui la distingue,
     c'est sa couleur et son trait. */
  font-weight: 700;
}

.irp-nav__link.is-active::after,
.irp-nav__link.is-active:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.irp-nav__caret { font-size: .62rem; opacity: .6; transition: transform var(--irp-transition); }
.irp-nav__item:hover .irp-nav__caret,
.irp-nav__item:focus-within .irp-nav__caret { transform: rotate(180deg); }

/* --- Sous-menu de niveau 2 ------------------------------------------- */
/* La structure supporte un troisième niveau : le menu sera généré
   dynamiquement à partir de la base plus tard, sans changer ce CSS. */
.irp-nav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1040;
  min-width: 15rem;
  padding: .35rem;
  margin: 0;
  list-style: none;
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius);
  box-shadow: var(--irp-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--irp-transition), transform var(--irp-transition), visibility var(--irp-transition);
}

.irp-nav__item:hover > .irp-nav__submenu,
.irp-nav__item:focus-within > .irp-nav__submenu,
.irp-nav__submenu-item:hover > .irp-nav__submenu,
.irp-nav__submenu-item:focus-within > .irp-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Niveau 3 : le sous-menu se déploie sur le côté. */
.irp-nav__submenu-item { position: relative; }
.irp-nav__submenu .irp-nav__submenu {
  top: -.35rem;
  left: 100%;
  transform: translateX(-4px);
}
.irp-nav__submenu-item:hover > .irp-nav__submenu,
.irp-nav__submenu-item:focus-within > .irp-nav__submenu { transform: translateX(0); }

/* Un liseré se déplie à gauche au survol, et la ligne s'écarte pour lui
   faire place. Le fond seul rendait le menu inerte : rien ne disait que la
   souris portait. Deux pixels de décalage suffisent — au-delà, la ligne
   saute et l'œil quitte ce qu'il était en train de lire.

   L'effet répond aussi au clavier (:focus-visible) : un menu qui ne
   s'anime qu'à la souris laisse sans repère celui qui tabule.

   La règle « prefers-reduced-motion » du thème ramène la transition à
   zéro : l'effet devient instantané pour qui a demandé moins d'animation,
   sans disparaître. */
.irp-nav__sublink {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: var(--irp-radius-sm);
  font-size: .76rem;
  color: var(--irp-text);
  text-decoration: none;
  transition: background-color var(--irp-transition), color var(--irp-transition),
    padding-left var(--irp-transition);
}

.irp-nav__sublink::before {
  content: '';
  position: absolute;
  left: .28rem;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 1px;
  background: var(--irp-cyan);
  transform: translateY(-50%);
  transition: height var(--irp-transition);
}

.irp-nav__sublink:hover,
.irp-nav__sublink:focus-visible {
  background: var(--irp-surface-2);
  color: var(--irp-cyan-700);
  padding-left: .78rem;
}

.irp-nav__sublink:hover::before,
.irp-nav__sublink:focus-visible::before { height: 1.05rem; }

[data-bs-theme='dark'] .irp-nav__sublink:hover { color: var(--irp-cyan-200); }

.irp-nav__sublink .bi { color: var(--irp-text-muted); font-size: .9rem; }
.irp-nav__sublink:hover .bi { color: inherit; }
.irp-nav__sublink--parent { justify-content: space-between; }

/* =====================================================================
   4. MENU LATÉRAL MOBILE — panneau clair coulissant depuis la gauche
   ===================================================================== */

.irp-drawer {
  --bs-offcanvas-width: min(320px, 86vw);
  border-right: 1px solid var(--irp-border-soft) !important;
}

.irp-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--irp-border-soft);
}

.irp-drawer__body { padding: .75rem; overflow-y: auto; }

.irp-drawer__search { margin-bottom: .75rem; }
.irp-drawer__search .irp-search { max-width: none; }

.irp-drawer__nav { list-style: none; margin: 0; padding: 0; }

.irp-drawer__separateur {
  height: 1px;
  margin: .4rem .7rem;
  background: var(--irp-border-soft);
}

.irp-drawer__link {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 0;
  border-radius: var(--irp-radius-sm);
  background: transparent;
  color: var(--irp-text);
  font-size: .92rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--irp-transition), color var(--irp-transition);
}

.irp-drawer__link:hover { background: var(--irp-surface-2); }

.irp-drawer__link.is-active {
  background: var(--irp-cyan-50);
  color: var(--irp-cyan-700);
  font-weight: 600;
}
[data-bs-theme='dark'] .irp-drawer__link.is-active {
  background: rgba(27, 157, 217, .14);
  color: var(--irp-cyan-200);
}

.irp-drawer__link .bi { font-size: 1.05rem; color: var(--irp-text-muted); flex-shrink: 0; }
.irp-drawer__link.is-active .bi { color: inherit; }

.irp-drawer__caret { margin-left: auto; font-size: .7rem; transition: transform var(--irp-transition); }
.irp-drawer__link[aria-expanded='true'] .irp-drawer__caret { transform: rotate(180deg); }

/* Niveaux imbriqués : décalage progressif et filet de rattachement. */
.irp-drawer__sub {
  list-style: none;
  margin: .1rem 0 .25rem;
  padding: 0 0 0 1.5rem;
  border-left: 1px solid var(--irp-border-soft);
  margin-left: 1.05rem;
}

.irp-drawer__sub .irp-drawer__link { font-size: .87rem; font-weight: 400; padding-block: .45rem; }

.irp-drawer__footer {
  margin-top: auto;
  padding: .85rem 1rem;
  border-top: 1px solid var(--irp-border-soft);
}

/* =====================================================================
   5. MESSAGES FLASH
   Les regles sont dans theme.css : les deux applications affichent les
   memes alertes.
   ===================================================================== */

/* =====================================================================
   6. BANDEAU DE PAGE (titre et fil d'Ariane)
   ===================================================================== */

.irp-hero {
  background: var(--irp-surface);
  border-bottom: 1px solid var(--irp-border-soft);
  padding-block: 1.15rem;
}

.irp-hero__title { margin: 0; }
.irp-hero__subtitle { font-size: .88rem; color: var(--irp-text-muted); margin: .2rem 0 0; }

/* =====================================================================
   7. GRILLES DE CONTENU
   ===================================================================== */

/* Grille auto-ajustée : pas de media query à maintenir pour les listes. */
.irp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.irp-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.irp-grid--tight { gap: .75rem; }

/* Deux colonnes : contenu principal et colonne latérale. */
.irp-split {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .irp-split { grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; }
  .irp-split--reverse { grid-template-columns: 20rem minmax(0, 1fr); }
}

/* =====================================================================
   8. RACCOURCIS (tuiles d'accès rapide de l'accueil)
   ===================================================================== */

.irp-shortcuts {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 576px) { .irp-shortcuts { grid-template-columns: repeat(4, 1fr); } }

.irp-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .95rem .6rem;
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  /* Trait bleu en tête : les raccourcis sont ce qu'il y a de plus utile
     sur la page, ils ne doivent pas se confondre avec les autres cartes. */
  border-top: 3px solid var(--irp-cyan);
  border-radius: var(--irp-radius);
  box-shadow: var(--irp-shadow-xs);
  color: var(--irp-text);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: transform var(--irp-transition), box-shadow var(--irp-transition),
              border-color var(--irp-transition), color var(--irp-transition);
}
.irp-shortcut:hover {
  transform: translateY(-2px);
  box-shadow: var(--irp-shadow);
  border-color: var(--irp-cyan-200);
  border-top-color: var(--irp-cyan);
  color: var(--irp-cyan-700);
}
[data-bs-theme='dark'] .irp-shortcut:hover {
  border-color: rgba(27, 157, 217, .35);
  border-top-color: var(--irp-cyan);
  color: var(--irp-cyan-200);
}

.irp-shortcut__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--irp-radius-sm);
  background: var(--irp-cyan);
  color: #fff;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(27, 157, 217, .28);
}
[data-bs-theme='dark'] .irp-shortcut__icon {
  background: var(--irp-cyan-600);
  box-shadow: none;
}

/* Le libellé, et sous lui ce qui se passe (« 3 tirages en cours »). Le
   détail est facultatif : une tuile sans détail garde exactement l'allure
   qu'elle avait avant. */
.irp-shortcut__texte {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.irp-shortcut__libelle {
  overflow-wrap: anywhere;
}

/* Le détail ne doit pas peser autant que le libellé : c'est la précision,
   pas le nom de la rubrique. */
.irp-shortcut__detail {
  color: var(--irp-text-muted);
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.25;
}

/* La couleur du survol porte sur le libellé seul : le détail reste
   discret, sinon la tuile entière change de ton au passage de la souris. */
.irp-shortcut:hover .irp-shortcut__detail {
  color: var(--irp-text-muted);
}

/* Colonne « À venir » : le titre d'une date est un lien, mais il se lit
   d'abord comme un titre — souligné seulement au survol et au clavier. */
.irp-echeance__lien {
  color: inherit;
  text-decoration: none;
}
.irp-echeance__lien:hover,
.irp-echeance__lien:focus-visible {
  color: var(--irp-cyan-700);
  text-decoration: underline;
}
[data-bs-theme='dark'] .irp-echeance__lien:hover,
[data-bs-theme='dark'] .irp-echeance__lien:focus-visible {
  color: var(--irp-cyan-200);
}

/* Les logos des clubs tirés au sort ce jour-là : « 3 tirages au sort » ne
   dit pas lesquels, et trois logos le disent sans une ligne de texte de
   plus. Le CADRE BLANC n'est pas un ornement — sans lui, le blason noir du
   Stade Toulousain et le rond violet du TFC se touchent, et un logo sur
   fond blanc disparaît dans la carte. 26 px et pas 20 : plus petit, on
   devine les logos sans les reconnaître, et un logo qu'on ne reconnaît pas
   ne vaut pas mieux qu'une ligne vide. Le nom reste porté par `title` et
   par l'`alt` : la ligne doit se lire sans les images. */
.irp-echeance__logos {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.irp-echeance__logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 30, 55, 0.1);
  border-radius: 5px;
}
.irp-echeance__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Encart d'accueil (App\Core\EncartsAccueil) : une information qui dure —
   la permanence du CSE. Il doit se distinguer des cartes blanches qui
   l'entourent sans crier : un lavis de la couleur de la marque, un filet
   à gauche, et une icône en pastille. Les lignes portent chacune leur
   icône (jour, heure, lieu) : on lit la permanence d'un coup d'œil, sans
   phrase à déchiffrer. */
.irp-encart {
  padding: 1.1rem 1.15rem 1rem;
  background: var(--irp-cyan-50, #e8f6fc);
  border: 1px solid var(--irp-cyan-100, #cdeaf7);
  border-left: 4px solid var(--irp-cyan, #1b9dd9);
  border-radius: var(--irp-radius);
}

[data-bs-theme='dark'] .irp-encart {
  background: rgba(27, 157, 217, .10);
  border-color: rgba(27, 157, 217, .28);
  border-left-color: var(--irp-cyan, #1b9dd9);
}

.irp-encart__tete {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .75rem;
}

.irp-encart__icone {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--irp-cyan, #1b9dd9);
  color: #fff;
  font-size: 1.05rem;
}

.irp-encart__titre {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--irp-heading);
}

.irp-encart__lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.irp-encart__ligne {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.4;
}

.irp-encart__ligne > .bi {
  margin-top: .1rem;
  color: var(--irp-cyan-700, #0e6f9e);
}

[data-bs-theme='dark'] .irp-encart__ligne > .bi {
  color: var(--irp-cyan, #1b9dd9);
}

.irp-encart__fort {
  font-weight: 600;
  color: var(--irp-heading);
}

.irp-encart__detail {
  display: block;
  color: var(--irp-text-muted);
  font-size: .85rem;
}

.irp-encart__lien {
  display: inline-block;
  margin-top: .1rem;
  font-size: .85rem;
}

.irp-encart__texte {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--irp-cyan-100, #cdeaf7);
  font-size: .9rem;
}

[data-bs-theme='dark'] .irp-encart__texte {
  border-top-color: rgba(27, 157, 217, .28);
}

/* =====================================================================
   9. POPUP DE RAPPEL — emplacement réservé
   Le contenu et les règles d'affichage seront fournis par un module
   ultérieur ; seul le contenant est défini ici.
   ===================================================================== */

.irp-reminder {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1055;
  width: min(22rem, calc(100vw - 2rem));
  background: var(--irp-surface);
  border: 1px solid var(--irp-border-soft);
  border-radius: var(--irp-radius-lg);
  box-shadow: var(--irp-shadow-lg);
  overflow: hidden;
}

.irp-reminder__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--irp-border-soft);
  font-size: .88rem;
  font-weight: 600;
  color: var(--irp-heading);
}
.irp-reminder__head .bi { color: var(--irp-cyan); }
.irp-reminder__close { margin-left: auto; }
.irp-reminder__body { padding: .85rem .9rem; font-size: .86rem; color: var(--irp-text-muted); }
.irp-reminder__actions { padding: 0 .9rem .9rem; display: flex; gap: .45rem; }

/* =====================================================================
   10. PIED DE PAGE
   ===================================================================== */

.irp-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--irp-surface);
  border-top: 1px solid var(--irp-border-soft);
  padding-block: 1.6rem 1.1rem;
  font-size: .84rem;
  color: var(--irp-text-muted);
}

.irp-footer__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.25rem;
}
@media (min-width: 576px) { .irp-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .irp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } }

.irp-footer__title {
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--irp-heading);
  margin-bottom: .55rem;
}

.irp-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.irp-footer__list a { color: var(--irp-text-muted); text-decoration: none; }
.irp-footer__list a:hover { color: var(--irp-cyan-600); }
[data-bs-theme='dark'] .irp-footer__list a:hover { color: var(--irp-cyan-300); }

.irp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-top: .9rem;
  border-top: 1px solid var(--irp-border-soft);
  font-size: .78rem;
}

.irp-footer__legal { display: flex; flex-wrap: wrap; gap: .9rem; }
.irp-footer__legal a { color: inherit; text-decoration: none; }
.irp-footer__legal a:hover { text-decoration: underline; }

/* =====================================================================
   11. RETOUR EN HAUT
   ===================================================================== */

.irp-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1040;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--irp-border-soft);
  border-radius: 50%;
  background: var(--irp-surface);
  color: var(--irp-slate-500);
  box-shadow: var(--irp-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--irp-transition), transform var(--irp-transition), visibility var(--irp-transition);
}
.irp-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.irp-to-top:hover { color: var(--irp-cyan-600); border-color: var(--irp-cyan-200); }

/* Pied de page réduit : visiteur non connecté, seules l'identité et les
   mentions légales sont affichées. La grille repasse alors sur une colonne. */
@media (min-width: 576px) {
  .irp-footer__grid--reduit { grid-template-columns: 1fr; }
}

/* =====================================================================
   APPLICATION INSTALLÉE SUR LE TÉLÉPHONE
   ===================================================================== */

/* L'entrée « Installer sur mon téléphone » du menu de l'avatar n'a plus
   rien à proposer une fois dans l'application : on la retire, par le CSS
   seul — la page est servie pareil à tous, seul l'affichage sait. */
@media (display-mode: standalone) {
  a[href$="/installer"] { display: none; }
}

.irp-appli a[href$="/installer"] { display: none; }

/* Page « Pas de connexion » (hors-ligne.html, servie par sw.js). */
.irp-hors-ligne {
  max-width: 26rem;
}