/* ==============================================
   /assets/css/style.css
   Version 1.2
   28/09/2026
   Soins Alternatifs
   ==============================================
   But principal : feuille de style UNIQUE du nouveau look du site (en-tête, bannière, pied de
   page, cartes, onglets, recherche, espace administration). Elle remplace à terme bootstrap.css,
   nstyle.css et look_saas.css ; ce qui ne servait qu'à l'ancien menu, à l'ancien pied et à
   l'ancienne bannière reste dans /assets2/ et n'est pas repris ici.

   Provenance : fusion, le 28/09/2026, de deux fichiers qui restent la référence de conception :
     - design/source/base.css   -> sections 1 à 3 (polices, jetons, éléments de base)
     - design/modele/style.css  -> sections 4 à 13 et 15 (composants)
   Les règles sont reprises à l'identique ; seuls les commentaires, la numérotation et
   l'emplacement des règles de démonstration (section 15) ont changé.

   Règles d'usage :
     - Aucune couleur, taille d'espacement ni rayon en dur quand un jeton existe (section 2) :
       on change le jeton, tout le site suit. Ne redéfinir aucune variable en dehors de :root.
     - Le vert n'est jamais une couleur de TEXTE sur fond clair (contraste insuffisant) : utiliser
       --vert-texte. Le vert sert aux fonds, traits et pastilles. Idem --avertissement-texte.
     - Boutons : famille .btn-linear-light (section 6). Bleu au repos et au survol ; les variantes
       --validate (vert) et --cancel (contour discret) portent le sens de l'action.
     - Les préfixes de classes indiquent le domaine : .sa-* (site public), .adm-* (espace
       membre / administration), .footer-* et .site-* (structure), .tab-* (onglets).
     - Le code HTML correspondant vit dans includes/avant.php et includes/apres.php (haut et bas de
       chaque page) et dans les pages ; les maquettes de référence sont dans design/source/.

   PRÉCAUTION : ce fichier contient des règles GLOBALES (section 3 : *, body, a, :focus-visible ;
   section 4 : body en colonne pour coller le pied en bas). Chargé en même temps que
   bootstrap.css / nstyle.css (pendant la transition), il modifie donc toutes les pages. Il n'est
   chargé que par le nouveau haut de page (includes/avant.php).

   Sommaire :
     1. Polices (Plus Jakarta Sans, auto-hébergée)
     2. Jetons : couleurs, typographie, espacements, rayons, ombre
     3. Éléments de base : *, body, a, focus clavier
     4. Structure de page (pied de page collé en bas)
     5. En-tête du site (logo, navigation, menus déroulants, menu mobile)
     6. Bouton .btn-linear-light
     7. Bannière
     8. Onglets de filtres
     9. Barre de recherche
    10. Cartes (fiche, événements, membre, annonce, article)
    11. Pied de page
    12. Bandeau cookies
    13. Administration (espace membre)
    14. Bouton « retour en haut »
    15. Éléments de démonstration (design/modele/ seulement, à retirer un jour)
   ============================================== */


/* ========================================================
   1. POLICES
   Plus Jakarta Sans, police variable auto-hébergée : un seul fichier par sous-ensemble couvre les
   graisses 400 à 800. Deux fichiers, choisis par le navigateur selon les caractères de la page
   (propriété unicode-range) : latin (français) et latin étendu. Fichiers dans /assets/font/.
   font-display: swap : le texte s'affiche tout de suite avec la police de repli, puis bascule.
   Plus aucun appel à Google Fonts. Icônes : Bootstrap Icons, dans /assets/font/bootstrap-icons/
   (feuille bootstrap-icons.css chargée à part).
   ======================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/font/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/font/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ========================================================
   2. JETONS
   Variables CSS du nouveau look. Source unique : on modifie ici, tout le site en profite.
   Les valeurs de couleur sont celles de la charte historique (bleu #02a6c0, vert #27c414).
   Les jetons *-rgb servent uniquement à composer une transparence : rgba(var(--bleu-rgb), 0.3).
   --radius-sm et --radius-btn ont la même valeur aujourd'hui mais restent deux jetons : les
   cartes et les boutons peuvent ainsi évoluer indépendamment.
   ======================================================== */
:root {
  /* ---- Couleurs charte ---- */
  --bleu: #02a6c0;                /* bleu charte : liens, titres, focus, action principale */
  --bleu-rgb: 2, 166, 192;        /* même bleu en R, V, B : pour rgba(var(--bleu-rgb), 0.3) */
  --bleu-hover: #028f9c;          /* bleu plus foncé : survol d'un élément déjà bleu */
  --vert: #27c414;                /* vert charte : fonds, traits, pastilles (JAMAIS en texte sur fond clair) */
  --vert-rgb: 39, 196, 20;        /* même vert en R, V, B */
  --vert-texte: #1fa310;          /* seule variante du vert utilisable en texte sur fond clair */

  /* ---- Espace administration : danger et attention ---- */
  --danger: #dc3545;              /* suppression, déconnexion, statut annulé / complet */
  --avertissement: #ffc107;       /* pastilles, icônes (jamais en texte sur fond clair) */
  --avertissement-texte: #b45309; /* seule variante de l'ambre utilisable en texte */

  /* ---- Neutres ---- */
  --ink: #212529;                 /* texte principal */
  --ink-muted: #6c757d;           /* texte secondaire (dates, aides, légendes) */
  --line: #dee2e6;                /* bordures et filets */
  --line-strong: #02a6c0;         /* bordure marquée (barre de recherche, bouton du menu mobile) */
  --surface: #f8f9fa;             /* fond général de la page */
  --surface-raised: #ffffff;      /* cartes, en-tête, modules : posés « au-dessus » du fond */

  /* ---- Focus clavier ---- */
  --focus: var(--bleu);           /* couleur du contour affiché à la navigation au clavier */

  /* ---- Typographie ---- */
  /* Plus Jakarta Sans (section 1), avec repli sur la police système si le chargement échoue */
  --font-sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Espacements (échelle : 8, 12, 16, 24, 32 px ; il n'y a pas de --space-1 ni --space-5) ---- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Rayons de bordure (deux jetons distincts pour pouvoir régler cartes et boutons séparément) ---- */
  --radius-sm: 8px;               /* cartes, modules, champs, menus déroulants */
  --radius-btn: 8px;              /* boutons .btn-linear-light */
  --radius-pill: 999px;           /* pilules : barre de recherche, pastilles, boutons ronds */

  /* ---- Ombre douce, teintée du bleu charte ---- */
  --shadow-soft: 0 10px 30px rgba(var(--bleu-rgb), 0.08);
}


/* ========================================================
   3. ÉLÉMENTS DE BASE
   Règles globales, sans classe. Elles s'appliquent à TOUTES les pages qui chargent ce fichier.
   * : box-sizing border-box partout (la largeur inclut marges internes et bordures).
   body : fond de page, couleur et police de texte (la mise en colonne est en section 4).
   a : liens bleus sans soulignement ; le survol se marque par un simple changement de couleur.
   :focus-visible : contour bleu visible à la navigation au clavier (accessibilité), jamais à la souris.
   ======================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--bleu);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ========================================================
   4. STRUCTURE DE PAGE (bas de page toujours collé en bas)
   body est une colonne flex de la hauteur de l'écran : .site-main prend la place restante
   (flex: 1 0 auto) et le pied de page (section 11) reste en bas même si le contenu est court.
   100dvh : hauteur réelle sur mobile (barre d'adresse comprise), 100vh en repli.
   .site-main : colonne de contenu centrée, 76rem maximum.
   .visually-hidden : texte lisible par les lecteurs d'écran seulement (même nom que Bootstrap).
   ======================================================== */
html,
body {
  height: 100%;
}

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

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  box-sizing: border-box;
}

/* Texte réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ========================================================
   5. EN-TÊTE DU SITE
   Barre fixe en haut (sticky) : logo qui déborde de 12 px sous le trait, nom du site bicolore
   (.mot : « Soins » bleu, « Alternatifs » vert texte), navigation à droite, bouton « Créer ma fiche ».
   Menus déroulants natifs <details>/<summary> : aucun JavaScript nécessaire pour ouvrir/fermer.
   Le JavaScript de includes/avant.php ne sert qu'au menu mobile et à la fermeture au clic dehors.
   Mobile (900 px et moins) : la navigation devient un panneau sous l'en-tête, ouvert par le
   bouton hamburger (.sa-menu-toggle) ; la classe .ouvert sur <nav> l'affiche.
   Lien actif : attribut aria-current="page" (soulignement vert).
   ======================================================== */
.sa-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 8px var(--space-8);
  background: var(--surface-raised);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
}

.sa-header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  flex: none;
  position: relative;
  z-index: 1002;
}

/* Le logo dépasse de 12px sous le trait */
.sa-header-logo img {
  display: block;
  height: 56px;
  width: auto;
  flex: none;
  position: relative;
  top: 12px;
  margin-bottom: -12px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
  transition: transform 0.2s ease;
}

.sa-header-logo:hover img {
  transform: scale(1.04);
}

.sa-header-logo .mot {
  font-size: 1.2rem;
  line-height: 1.15;
  white-space: nowrap;
}

/* Nom du site bicolore : "Soins" bleu, "Alternatifs" vert texte */
.mot .a {
  color: var(--bleu);
  font-weight: 700;
}

.mot .b {
  color: var(--vert-texte);
  font-weight: 700;
}

.sa-header-logo .mot small {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sa-header nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.sa-header nav a {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-2) 0;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sa-header nav a:not(.btn-linear-light) {
  border-bottom: 2px solid transparent;
}

.sa-header nav a:not(.btn-linear-light):hover,
.sa-header nav a[aria-current]:not(.btn-linear-light) {
  border-bottom-color: var(--vert);
  color: var(--bleu);
}

/* Bouton du menu : compact sur PC (grande taille rétablie sur mobile, voir plus bas) */
.sa-header nav a.btn-linear-light {
  padding: 8px 18px;
  font-size: 14px;
}

/* Menu déroulant natif (<details>/<summary>) */
.sa-nav-dropdown {
  position: relative;
}

.sa-nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}

.sa-nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.sa-nav-dropdown[open] > summary,
.sa-nav-dropdown > summary:hover {
  color: var(--bleu);
  border-bottom-color: var(--vert);
}

.sa-nav-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  padding: var(--space-2);
  z-index: 1010;
}

.sa-nav-dropdown-panel a {
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  border-bottom: none !important;
}

.sa-nav-dropdown-panel a:hover {
  background: rgba(var(--bleu-rgb), 0.06);
}

/* Hamburger mobile */
.sa-menu-toggle {
  display: none;
  margin-left: auto;
  flex: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
}

.sa-menu-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.sa-menu-toggle .icon-close { display: none; }
.sa-menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.sa-menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 400px) {
  .sa-header-logo .mot {
    font-size: 1.05rem;
  }
}

/* Seuil à 1080px (et non 900px) : mesuré le 28/09/2026, le menu du haut (9 liens + bouton pour
   un visiteur non connecté) a besoin de 739px ; entre 900 et environ 1030px de large, il ne
   restait plus assez de place (logo + marges comprises) et le menu débordait de la page. */
@media (max-width: 1080px) {
  .sa-header { padding: 8px var(--space-4); gap: var(--space-3); }
  .sa-menu-toggle { display: flex; }

  .sa-header nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--space-4) var(--space-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  }

  .sa-header nav.ouvert { opacity: 1; visibility: visible; transform: none; }
  .sa-header nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .sa-header nav a:last-child { border-bottom: none; }
  .sa-header nav a.btn-linear-light { display: inline-flex; margin-top: var(--space-3); padding: 13px 26px; font-size: 15px; border-bottom: 1.5px solid rgba(var(--bleu-rgb), 0.35); align-self: flex-start; }
  .sa-nav-dropdown > summary { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .sa-nav-dropdown-panel { position: static; box-shadow: none; margin-top: 0; padding: 0 0 0 var(--space-3); border: none; }
}


/* ========================================================
   6. BOUTON .btn-linear-light
   Bouton unique du site (grande taille : plus facile à toucher sur téléphone). Repos : fond bleu
   très clair, bordure bleue ; survol : bordure et texte bleus, ombre teintée, léger soulèvement.
   Variantes : --cancel (Annuler / Retour, contour discret), --validate (Enregistrer / Accepter,
   nuance verte), --block (pleine largeur, pied de carte). .btn-arrow : flèche qui glisse au survol.
   .btn-actions-row : rangée de boutons alignés à gauche. Le bloc est recopié à l'identique dans
   chaque composant de design/source/ : toute modification ici doit y être reportée.
   ======================================================== */
.btn-linear-light {
  font-family: inherit;
  background-color: rgba(var(--bleu-rgb), 0.06);
  color: var(--ink);
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-btn);
  border: 1.5px solid rgba(var(--bleu-rgb), 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  box-sizing: border-box;
}

.btn-linear-light:hover {
  border-color: var(--bleu);
  color: var(--bleu);
  box-shadow: 0 6px 18px rgba(var(--bleu-rgb), 0.16), 0 2px 4px rgba(var(--bleu-rgb), 0.08);
  transform: translateY(-1.5px);
}

.btn-linear-light:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Flèche animée au survol */
.btn-linear-light .btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 1.1rem;
  line-height: 1;
}

.btn-linear-light:hover .btn-arrow {
  transform: translateX(4px);
}

/* Annuler / Retour : contour discret */
.btn-linear-light--cancel {
  background-color: transparent;
  border-color: var(--line);
  color: var(--ink-muted);
}

.btn-linear-light--cancel:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Enregistrer / Accepter : vert au repos, bleu au survol */
.btn-linear-light--validate {
  background-color: rgba(var(--vert-rgb), 0.06);
  border-color: rgba(var(--vert-rgb), 0.35);
  color: var(--ink);
}

/* Pleine largeur (pied de carte) */
.btn-linear-light--block {
  display: flex;
  width: 100%;
}

.btn-actions-row {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-3);
}


/* ========================================================
   7. BANNIÈRE (100 % bord à bord)
   Bandeau sous l'en-tête : 120 px de haut sur PC, 80 px sur smartphone (767 px et moins).
   Trois modes, générés par includes/banner.php :
     - image : bannière de la page en fond (cover), avec image mobile dédiée (--banniere-mobile) ;
     - praticien : dégradé doux, logo du praticien à gauche (.sa-banner-praticien-logo-slot) et
       filigrane du logo du site à droite (.sa-banner-watermark) ;
     - par défaut : bannière nationale du pays (assets/banner/banner_<pays>.jpg).
   Le cartouche central (.sa-banner-content, verre dépoli blanc) porte le titre de la page :
   c'est le <h1> quand la page n'en a pas d'autre (.banner-titre sinon).
   ======================================================== */
.sa-banner-wrapper {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background-color: var(--surface);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

/* Hauteur : 120px sur PC, 80px sur smartphone */
.sa-banner {
  position: relative;
  width: 100%;
  height: 120px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Mode praticien : dégradé doux à la place d'une image de fond */
.sa-banner--praticien {
  background: linear-gradient(105deg, rgba(var(--vert-rgb), 0.12) 0%, rgba(255, 255, 255, 0.98) 55%, rgba(var(--bleu-rgb), 0.04) 100%);
}

/* Filigrane (mode praticien uniquement, à droite) */
.sa-banner-watermark {
  position: absolute;
  right: clamp(-10px, 2vw, 25px);
  top: 50%;
  transform: translateY(-50%);
  height: 125%;
  pointer-events: none;
  opacity: 0.08;
  z-index: 0;
  display: flex;
  align-items: center;
}

.sa-banner-watermark img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Logo du praticien, à gauche */
.sa-banner-praticien-logo-slot {
  position: absolute;
  left: clamp(12px, 3vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  max-height: 104px;
  z-index: 1;
}

.sa-banner-praticien-logo-slot img {
  max-height: 104px;
  max-width: 104px;
  object-fit: contain;
  background-color: #ffffff;
  border: 1.5px solid rgba(var(--vert-rgb), 0.55);
  border-radius: var(--radius-sm);
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* Cartouche central (verre dépoli blanc) */
.sa-banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(var(--bleu-rgb), 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 28px;
  text-align: center;
  white-space: normal;
  max-width: 85%;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  z-index: 2;
}

.sa-banner-content h1,
.sa-banner-content .banner-titre {
  color: var(--ink);
  font-family: var(--font-sans);
  margin: 0;
  font-size: clamp(1.15rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.sa-banner-content .banner-soustitre {
  color: var(--ink-muted);
  font-family: var(--font-sans);
  margin: 4px 0 0 0;
  font-size: 0.9rem;
  font-weight: 500;
}

@media (max-width: 767px) {
  .sa-banner {
    height: 80px;
  }

  /* Bannière avec image mobile dédiée (nationale par défaut, article...) :
     l'image est fournie par la variable --banniere-mobile posée en style inline */
  .sa-banner--image-mobile {
    background-image: var(--banniere-mobile) !important;
  }

  .sa-banner-praticien-logo-slot,
  .sa-banner-praticien-logo-slot img {
    max-height: 64px;
    max-width: 64px;
  }

  .sa-banner-content {
    max-width: 68%;
    padding: 6px 12px;
  }

  .sa-banner-content h1,
  .sa-banner-content .banner-titre {
    font-size: 1.05rem;
  }
}


/* ========================================================
   8. ONGLETS DE FILTRES (symétriques : 4x2, 2x4 ou 1x8)
   Sélecteur de pays / de catégories des pages de recherche et d'agenda. Mobile : grille de 2
   colonnes ; tablette (640 à 1179 px) : 4 colonnes ; grand écran (1180 px et plus) : une seule
   ligne de pilules. .is-active : onglet courant (fond bleu). .tab-count : pastille de compteur.
   minmax(0, 1fr) est indispensable : sans le 0, un libellé long empêche la colonne de rétrécir
   et provoque un débordement horizontal (bug corrigé le 28/09/2026).
   ======================================================== */
.filter-tabs-wrapper {
  width: 100%;
  max-width: 74rem;
  margin: var(--space-6) auto var(--space-8);
  padding: 0 var(--space-3);
  box-sizing: border-box;
}

/* Mobile : 4 lignes de 2 boutons.
   minmax(0, 1fr) : sans le 0, un libellé long empêche la colonne de rétrécir et déborde. */
.filter-tabs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}

/* Tablette : 2 lignes de 4 boutons */
@media (min-width: 640px) and (max-width: 1179px) {
  .filter-tabs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Grand écran : les 8 sur une seule ligne */
@media (min-width: 1180px) {
  .filter-tabs-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
  }
}

.tab-btn {
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@media (min-width: 1180px) {
  .tab-btn {
    border-radius: var(--radius-pill);
    padding: 7px 12px;
    justify-content: center;
    flex-shrink: 0;
  }
}

.tab-btn:hover {
  border-color: var(--bleu);
  color: var(--bleu);
  background: rgba(var(--bleu-rgb), 0.04);
  transform: translateY(-1px);
}

.tab-btn.is-active {
  background-color: var(--bleu);
  border-color: var(--bleu);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(var(--bleu-rgb), 0.25);
}

.tab-btn.is-active:hover {
  background-color: var(--bleu-hover);
  border-color: var(--bleu-hover);
  color: #ffffff;
  transform: none;
}

.tab-btn {
  min-width: 0;
}

.tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile : le libellé passe à la ligne plutôt que d'être tronqué */
@media (max-width: 639px) {
  .tab-btn {
    white-space: normal;
  }

  .tab-label {
    line-height: 1.25;
  }
}

/* Pastille compteur */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  line-height: 1.25;
  flex-shrink: 0;
  background: rgba(var(--bleu-rgb), 0.08);
  color: var(--bleu);
}

.tab-btn.is-active .tab-count {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.section-title {
  text-align: center;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-6);
}


/* ========================================================
   9. BARRE DE RECHERCHE (pilule)
   Champ de recherche en pilule avec libellé, champ et bouton intégré (.btn-linear-light).
   Le focus est signalé par le conteneur (:focus-within) : le champ lui-même n'a pas de contour.
   Utilisée dans les pages de recherche et dans le pied de page (carte « Recherche & alertes »).
   ======================================================== */
.sa-search-container {
  width: 100%;
  max-width: 560px;
  margin: var(--space-4) auto;
  box-sizing: border-box;
}

.sa-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-raised);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px var(--space-6);
  box-shadow: var(--shadow-soft);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Le focus du champ est signalé par le conteneur (le champ n'a pas d'outline propre) */
.sa-search:focus-within {
  border-color: var(--bleu-hover);
  box-shadow: 0 10px 30px rgba(var(--bleu-rgb), 0.14);
}

.sa-search-field {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.sa-search-field label {
  font: 700 12px/16px var(--font-sans);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-search-field input {
  border: 0;
  background: transparent;
  font: 400 16px/22px var(--font-sans);
  color: var(--ink);
  padding: 2px 0;
  outline: none;
  width: 100%;
  text-overflow: ellipsis;
}

.sa-search-field input::placeholder {
  color: var(--ink-muted);
  opacity: 0.8;
}

/* Bouton intégré à droite, en pilule */
.sa-search .btn-linear-light {
  flex: none;
  border-radius: var(--radius-pill);
}

@media (max-width: 480px) {
  .sa-search {
    padding-left: var(--space-4);
  }
}


/* ========================================================
   10. CARTES
   Cadre sobre .card-plain (fiche, événements, membre : 440 px maximum) et grand format
   .annonce-card / .article-card (58 rem, vignette + texte côte à côte dès 640 px).
   En-tête commun : fond bleu très clair, point vert (.accent-dot-green) et filet vert dessous.
   Survol : la carte se soulève et l'ombre s'accentue ; l'image zoome très légèrement.
   Préfixes : .fiche-* (fiche / membre), .agenda-* (liste d'événements), .annonce-*, .article-*.
   .fiche-image : l'image est toujours ENTIÈRE (object-fit: contain), jamais rognée (logos).
   .badge-places : pastille « places restantes » (vert texte sur fond vert très clair).

   .cartes-grille : grille pour afficher plusieurs .card-plain côte à côte (catalogue, liste de
   résultats), ajoutée le 29/09/2026 pour livre/index.php (premier catalogue migré vers le nouveau
   look). .card-plain seule est pensée pour un affichage unique et centré (max-width + margin
   auto) : à l'intérieur de .cartes-grille, ces deux réglages sont annulés pour que chaque carte
   remplisse sa cellule de grille.
   ======================================================== */
.card-plain,
.annonce-card,
.article-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font-sans);
  width: 100%;
  box-sizing: border-box;
}

.card-plain {
  max-width: 440px;
  margin: var(--space-6) auto;
  display: flex;
  flex-direction: column;
}

.annonce-card,
.article-card {
  /* Même largeur que .site-main/.footer-container (76rem), pour que la carte remplisse la page
     comme le pied en dessous — 58rem au départ (29/09/2026, corrigé), choisi sans les comparer
     côte à côte à la vraie largeur de page. */
  max-width: 76rem;
  margin: 0 auto var(--space-8) auto;
}

.card-plain:hover,
.annonce-card:hover,
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.cartes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
  width: 100%;
  max-width: 76rem;
  margin: var(--space-8) auto;
  box-sizing: border-box;
}

.cartes-grille .card-plain {
  max-width: none;
  margin: 0;
}

/* Pagination (liste de pages, ex : redactionnel/index.php), ajoutée le 29/09/2026. Remplace la
   pagination Bootstrap (.pagination/.page-item/.page-link), qui n'est plus stylée sans
   bootstrap.css. Pilules dans le même esprit que .tab-btn (section 8) et .social-circle-btn. */
.sa-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-8) 0;
  list-style: none;
  padding: 0;
}

.sa-pagination-lien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.sa-pagination-lien:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

.sa-pagination-lien.est-actif {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #ffffff;
}

/* Variantes ajoutées le 29/09/2026 pour une pagination avec "Précédent"/"Suivant" et points de
   suspension (ex : dossiersredactionnel/index.php) : .est-desactive = lien inatteignable (bord de
   liste), à poser sur un <span> plutôt qu'un <a>. Points de suspension : même gabarit, sans bordure. */
.sa-pagination-lien.est-desactive {
  color: var(--ink-muted);
  border-color: var(--line);
  cursor: default;
}

.sa-pagination-lien.est-desactive:hover {
  color: var(--ink-muted);
  border-color: var(--line);
}

.sa-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--ink-muted);
  font-weight: 700;
}

/* Bandeaux de titre à la même hauteur d'une carte à l'autre dans la grille, même si le titre d'une
   fiche tient sur une ligne et celui de la voisine sur deux : hauteur minimale (2 lignes) + les
   titres plus longs que 2 lignes sont coupés avec des points de suspension plutôt que d'agrandir
   le bandeau. */
.cartes-grille .fiche-header {
  min-height: 5.4rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.cartes-grille .fiche-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* En-tête : fond délavé + point vert + ligne verte */
.fiche-header,
.annonce-header,
.article-header {
  background: rgba(var(--bleu-rgb), 0.05);
  padding: 1.15rem 1.25rem 1rem;
  border-bottom: 2px solid var(--vert);
}

.annonce-header,
.article-header {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.fiche-title-row,
.annonce-title-row,
.article-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Icône d'en-tête de carte (accueil), à la place du point vert */
.fiche-icone {
  color: var(--bleu);
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.accent-dot-green {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(var(--vert-rgb), 0.22);
  flex-shrink: 0;
}

.fiche-title,
.annonce-title,
.article-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.annonce-title,
.article-title {
  line-height: 1.25;
}

.fiche-title a,
.annonce-title a,
.article-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fiche-title a:hover,
.annonce-title a:hover,
.article-title a:hover {
  color: var(--bleu);
}

/* --- Fiche / membre --- */
.fiche-image-wrap {
  margin: var(--space-3) 1.25rem 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 220px;
}

/* Image entière, jamais rognée (logos et photos de formats variés) */
.fiche-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.card-plain:hover .fiche-image {
  transform: scale(1.02);
}

.fiche-body {
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fiche-desc {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
}

.fiche-coord {
  font-size: 0.875rem;
  color: var(--ink-muted);
  margin: 0 0 2px;
  line-height: 1.4;
}

.fiche-coord-name {
  font-weight: 700;
  color: var(--ink);
}

/* Cabinet secondaire ("Aussi à") */
.fiche-secondary {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
}

.fiche-secondary-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vert-texte);
  margin-bottom: 4px;
}

.fiche-secondary-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
}

.fiche-actions {
  /* margin-top: auto (et non une valeur fixe) : pousse le bouton tout en bas de la carte, même
     quand la carte est étirée à la hauteur de ses voisines dans une grille (.cartes-grille) et que
     leurs textes font plus ou moins de lignes — sans ça, le bouton restait juste sous le texte,
     désaligné d'une carte à l'autre (constaté sur sous_profession/index.php et livre/index.php,
     29/09/2026). Fonctionne grâce à .fiche-body en colonne flex (flex: 1) juste au-dessus. */
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  justify-content: flex-end;
}

/* --- Liste d'événements --- */
.agenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agenda-item {
  padding: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.agenda-item:last-child {
  border-bottom: none;
}

.agenda-item-title {
  margin: 0 0 var(--space-2) 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.agenda-item-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.agenda-item-title a:hover {
  color: var(--bleu);
}

.agenda-item-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.agenda-item-thumb {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background-color: var(--surface);
}

.agenda-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.agenda-item:hover .agenda-item-thumb img {
  transform: scale(1.03);
}

.agenda-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.agenda-item-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px 0;
}

.agenda-item-lieu {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.35;
  margin: 0 0 var(--space-3) 0;
}

.agenda-footer {
  padding: 1.1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
  background-color: var(--surface-raised);
}

/* Variante sans vignette (ex : recherche/index.php, recherche/niveau1.php — liste de disciplines ou
   de cantons) : le texte (nombre d'inscrits) et le bouton restent sur la même ligne, bouton à droite
   (demandé par l'utilisateur, 29/09/2026), au lieu de s'empiler l'un sous l'autre. */
.agenda-item-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.agenda-item-ligne .agenda-item-lieu {
  margin: 0;
}

/* Accueil (index.php), ajouté le 30/09/2026 : introduction centrée, grille de 2 cartes par ligne
   (chaque carte = en-tête .fiche-header + .agenda-list + .agenda-footer, pied poussé en bas pour
   que les cartes voisines restent alignées), nom du site en deux couleurs. */
.accueil-intro {
  text-align: center;
  max-width: 76rem;
  margin: 0 auto var(--space-6) auto;
}

.accueil-intro .article-excerpt {
  margin-bottom: var(--space-2);
}

/* Le conteneur .site-main a déjà son propre espace en haut : pas de marge supplémentaire sous la bannière. */
.accueil-intro .section-title {
  margin-top: 0;
}

.accueil-intro-devise {
  margin: var(--space-4) 0 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--bleu);
  letter-spacing: 0.03em;
}

.accueil-bleu {
  color: var(--bleu);
  font-weight: 700;
}

.accueil-vert {
  color: var(--vert-texte);
  font-weight: 700;
}

.cartes-grille--deux {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  align-items: stretch;
}

.cartes-grille--deux .agenda-list {
  flex: 1;
}

/* Colonne de cartes empilées dans une cellule de la grille (accueil : « Dernières inscriptions » +
   « Connaissez-vous ? » à côté de « Trouver un praticien ») : les cartes se partagent la hauteur. */
.cartes-grille-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.cartes-grille-colonne .card-plain {
  max-width: none;
  margin: 0;
  flex: 1 1 auto;
}

.cartes-grille--deux > .card-plain--pleine-largeur {
  grid-column: 1 / -1;
}

/* Formulaire simple en carte (login, ajouté le 02/10/2026) : libellé au-dessus, champ plein
   largeur avec bordure fine, focus signalé par la bordure bleue comme .sa-search. */
.sa-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.sa-champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sa-champ label {
  font: 700 12px/16px var(--font-sans);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-champ input[type="text"],
.sa-champ input[type="email"],
.sa-champ input[type="password"],
.sa-champ input[type="tel"],
.sa-champ input[type="number"],
.sa-champ input[type="datetime-local"],
.sa-champ textarea,
.sa-champ select {
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/22px var(--font-sans);
  color: var(--ink);
  background: var(--surface-raised);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sa-champ input:focus,
.sa-champ textarea:focus,
.sa-champ select:focus {
  outline: none;
  border-color: var(--bleu-hover);
  box-shadow: 0 0 0 3px rgba(var(--bleu-rgb), 0.14);
}

.sa-case {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.4;
}

.sa-case small {
  display: block;
  color: var(--ink-muted);
}

.sa-form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sa-form-aide {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  text-align: center;
}

/* Inscription (reference/, membres/charte/, membres/premier/, ajouté le 02/10/2026) : carte plus large
   pour un formulaire de plusieurs champs, champs côte à côte, intertitres de groupe, liste d'engagements. */
.card-plain--large {
  max-width: 44rem;
}

.sa-champ-aide {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.sa-grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-4);
}

/* Variante pour 3 champs courts sur une ligne (jour / mois / année, places, tarif). */
.sa-grille-champs--court {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

/* Une seule carte par ligne (hub de saisie de la fiche membre). */
.cartes-grille--une {
  grid-template-columns: 1fr;
}

.sa-groupe-titre {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font: 700 12px/16px var(--font-sans);
  color: var(--bleu);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.sa-table th,
.sa-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.sa-table th:last-child,
.sa-table td:last-child {
  text-align: right;
}

.sa-engagements {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-6);
  color: var(--ink);
  line-height: 1.5;
}

/* Pages de texte et de présentation de l'inscription (reference/, ajouté le 02/10/2026) : texte juridique
   hérité (balises <bleu>/<vert>, .bold, blockquote) dans une carte, chiffres clés centrés. */
.sa-texte {
  padding: var(--space-6);
  color: var(--ink);
  line-height: 1.6;
  font-size: 0.95rem;
}

.sa-texte .bold,
.sa-texte .bold_rouge {
  font-weight: 700;
}

.sa-texte .bold_rouge {
  color: var(--bleu);
}

.sa-texte blockquote {
  margin: var(--space-2) 0 var(--space-3) var(--space-4);
  padding: 0;
}

.sa-texte img {
  max-width: 100%;
  height: auto;
}

.sa-texte ul {
  padding-left: var(--space-6);
}

.sa-texte bleu {
  color: var(--bleu);
  font-weight: 700;
}

.sa-texte vert {
  color: var(--vert-texte);
  font-weight: 700;
}

.sa-form--centre {
  align-items: center;
  text-align: center;
}

.sa-chiffre {
  margin: 0;
  font: 800 2.2rem/1 var(--font-sans);
  color: var(--bleu);
}

.sa-chiffre-libelle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.cartes-grille--deux .agenda-item-details .btn-linear-light {
  margin-top: var(--space-2);
}

/* Logos, couvertures de livres et visuels contenant du texte : image entière, jamais rognée. */
.cartes-grille--deux .agenda-item-thumb img {
  object-fit: contain;
}

/* --- Annonce / article : corps horizontal --- */
.annonce-body,
.article-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .annonce-body,
  .article-body {
    flex-direction: row;
    align-items: flex-start;
  }
}

.annonce-thumb-wrap,
.article-thumb-wrap {
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background-color: var(--surface);
}

.annonce-thumb-wrap {
  aspect-ratio: 4 / 3;
}

/* Vignette carrée sur PC, bandeau sur mobile */
.article-thumb-wrap {
  aspect-ratio: 1 / 1;
}

@media (max-width: 639px) {
  .annonce-thumb-wrap,
  .article-thumb-wrap {
    max-width: 100%;
  }

  .article-thumb-wrap {
    aspect-ratio: 16 / 10;
  }
}

.annonce-thumb,
.article-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Variante « image entière, non rognée » : couverture de livre, logo... (comme .fiche-image),
   ajoutée le 29/09/2026 pour livre/detail.php. À poser sur .article-thumb-wrap/.annonce-thumb-wrap
   ET sur l'image elle-même (les deux : le rapport largeur/hauteur fixe du cadre ne convient pas à
   une couverture de livre, souvent plus haute que large). */
.article-thumb-wrap--contain,
.annonce-thumb-wrap--contain {
  aspect-ratio: auto;
  max-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-thumb-wrap--contain .article-thumb,
.annonce-thumb-wrap--contain .annonce-thumb {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
}

.annonce-card:hover .annonce-thumb,
.article-card:hover .article-thumb {
  transform: scale(1.02);
}

.annonce-content,
.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.annonce-dates {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-2) 0;
}

.annonce-lieu {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2) 0;
}

.annonce-places-wrap {
  margin: 0 0 var(--space-3) 0;
}

/* Places restantes : badge lisible et contrasté */
.badge-places {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vert-texte);
  background-color: rgba(var(--vert-rgb), 0.12);
  border: 1px solid rgba(var(--vert-rgb), 0.35);
  padding: 3px var(--space-2);
  border-radius: 6px;
}

/* Bandeau d'avertissement discret (ex : "cet ouvrage n'est plus en vente"), ajouté le 29/09/2026
   pour livre/detail.php. Même couleur que les statuts "annulé"/"complet" de l'espace admin
   (.adm-badge--annule) : --danger sert déjà à ce sens (retiré, plus disponible). */
.fiche-avertissement {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--danger);
  background-color: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-3);
}

/* Petites pastilles d'information sur une carte d'événement (agenda), ajoutées le 29/09/2026 :
   même gabarit que .badge-places (pilule, texte en gras), une couleur par sens. .badge-complet
   reprend --danger comme les statuts "annulé"/"complet" de l'espace admin (.adm-badge--annule). */
.badge-visio,
.badge-tarif,
.badge-complet {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px var(--space-2);
  border-radius: 6px;
  margin: 0 var(--space-2) var(--space-2) 0;
}

.badge-visio {
  color: var(--bleu);
  background-color: rgba(var(--bleu-rgb), 0.1);
  border: 1px solid rgba(var(--bleu-rgb), 0.3);
}

.badge-tarif {
  color: var(--ink-muted);
  background-color: var(--surface);
  border: 1px solid var(--line);
}

.badge-complet {
  /* Gris neutre, pas rouge : le rouge est réservé à la suppression dans la charte du site
     (voir CLAUDE.md — icônes d'action, corbeille = rouge). Réutilisée telle quelle pour
     "Annulé"/"Échu" (agenda/detail.php), même statut visuel, texte différent. */
  color: var(--ink-muted);
  background-color: var(--surface);
  border: 1px solid var(--line);
}

.annonce-divider {
  height: 1px;
  background-color: var(--line);
  border: none;
  margin: var(--space-2) 0 var(--space-3) 0;
}

.annonce-desc {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-4) 0;
}

.article-excerpt {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--space-4) 0;
}

.article-date {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4) 0;
}

.annonce-actions,
.article-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
}


/* ========================================================
   11. PIED DE PAGE (collé en bas si le contenu est court)
   Trois cartes (recherche & alertes, information & déontologie, le site) sur une grille qui passe
   de 1 colonne (mobile) à 3 colonnes (960 px et plus), puis une barre inférieure : copyright,
   liens secondaires (.footer-secondary-links) et boutons ronds de réseaux sociaux
   (.social-circle-btn ; la couleur de survol propre à chaque réseau : .social-fb, .social-x,
   .social-rss). .medical-warning-box : encadré d'avertissement médical (filet vert à gauche).
   Le HTML est dans includes/apres.php ; les liens de réseaux dépendent du pays du site.
   ======================================================== */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  background-color: var(--surface-raised);
  border-top: 3px solid var(--line-strong);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
  padding: var(--space-6) 0;
  width: 100%;
}

/* Bandeau charte de conduite : pleine largeur, au-dessus de la grille des cartes, pour bien le
   distinguer du reste (fond bleu clair de la charte, teinté), et marquer une coupure nette avec
   le contenu de la page au-dessus (fond blanc du pied vs fond gris --surface de la page). */
.footer-charte-bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  background: rgba(var(--bleu-rgb), 0.06);
  border: 1.5px solid rgba(var(--bleu-rgb), 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}

.footer-charte-content {
  flex: 1;
  min-width: 240px;
}

.footer-charte-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.footer-charte-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}

.footer-charte-text {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-container {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
  box-sizing: border-box;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* Bande "Organisateurs" (29/09/2026) : sortie de la grille des cartes — étirée à la hauteur des 2
   cartes plus riches en contenu (recherche + formulaire, information + encadré), elle laissait un
   grand vide en dessous de son texte court. Bande compacte pleine largeur à la place, hauteur
   dictée par son propre contenu. */
.footer-organisateurs-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.footer-organisateurs-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 240px;
}

.footer-organisateurs-text p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.footer-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Carte au contenu plus court que sa voisine (29/09/2026, retour utilisateur avec capture) : par
   défaut .footer-grid étire toutes les cartes de la ligne à la même hauteur (align-items: stretch),
   ce qui grossit l'encadré medical-warning-box en dessous du texte via son margin-top:auto et
   laisse un grand vide entre les deux. Cette carte garde sa propre hauteur (pas de grand vide),
   plutôt que d'être réduite en bande comme Organisateurs — l'utilisateur veut garder le format carte. */
.footer-card--compact {
  align-self: start;
}

.footer-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.footer-card-header.footer-links-title {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.footer-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.footer-card-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

.footer-charte-inline {
  color: var(--bleu);
  font-weight: 800;
}

.footer-charte-inline:hover {
  color: var(--bleu-hover);
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-links li::before {
  content: "- ";
  color: var(--ink-muted);
}

.footer-links a {
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--bleu);
}

.footer-btn-wrap {
  margin-top: 0;
  text-align: center;
}

.medical-warning-box {
  background-color: rgba(var(--bleu-rgb), 0.03);
  padding: var(--space-3);
  border-radius: 4px;
  margin-top: auto;
  text-align: center;
}

.medical-warning-strong {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--vert-texte);
  line-height: 1.4;
  display: block;
}

/* Barre inférieure */
.footer-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.86rem;
  color: var(--ink-muted);
}

.footer-bottom-bar p {
  margin: 0;
}

@media (min-width: 768px) {
  .footer-bottom-bar {
    flex-direction: row;
  }
}

.footer-secondary-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  font-size: 0.86rem;
}

.footer-secondary-links a {
  color: var(--ink-muted);
  text-decoration: none;
}

.footer-secondary-links a:hover {
  color: var(--bleu);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.social-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  border: 1.5px solid rgba(var(--bleu-rgb), 0.35);
  color: var(--bleu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-circle-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.social-circle-btn:hover {
  border-color: var(--vert);
  color: var(--vert-texte);
  background-color: rgba(var(--vert-rgb), 0.08);
  box-shadow: 0 4px 12px rgba(var(--vert-rgb), 0.25);
  transform: translateY(-2px);
}

.social-circle-btn.social-fb:hover { border-color: #1877f2; color: #1877f2; background-color: rgba(24, 119, 242, 0.08); }
.social-circle-btn.social-x:hover { border-color: var(--ink); color: var(--ink); background-color: rgba(33, 37, 41, 0.08); }
.social-circle-btn.social-rss:hover { border-color: #f26522; color: #f26522; background-color: rgba(242, 101, 34, 0.08); }


/* ========================================================
   12. BANDEAU COOKIES (RGPD / nLPD)
   Bandeau fixe en bas de l'écran, masqué par défaut (display: none) ; c'est le script de
   includes/rgpd.php qui l'affiche tant que le visiteur n'a pas répondu. z-index 2000 : au-dessus
   de tout, y compris de l'en-tête (1000) et du bouton retour en haut (section 14).
   ======================================================== */
.sa-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--surface-raised);
  border-top: 2px solid var(--vert);
  box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.1);
  padding: var(--space-4);
  font-family: var(--font-sans);
  display: none;
}

.sa-cookie-container {
  max-width: 76rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sa-cookie-text {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  flex: 1;
  min-width: 260px;
}

.sa-cookie-text a {
  color: var(--bleu);
  font-weight: 700;
  text-decoration: none;
}

.sa-cookie-text a:hover {
  color: var(--bleu-hover);
}

.sa-cookie-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}


/* ========================================================
   13. ADMINISTRATION (espace membre)
   Composants .adm-* des pages de l'espace membre : tableau de bord (prive/index.php) et gestion
   des annonces (agenda/client_admin.php). Remplacera look_saas.css (classes .saas-*).
   Icônes : Bootstrap Icons (/assets/font/bootstrap-icons/). Couleurs d'action conservées :
   modifier = bleu, dupliquer = vert, supprimer = rouge (--danger).
   Pièces : .adm-page (colonne centrée, --etroit : 850 px), .adm-info (bandeau d'information),
   .adm-grille / .adm-cartes / .adm-colonne (mise en page), .adm-card (carte de tableau de bord),
   .adm-ligne (ligne cliquable icône + libellé + chevron), .adm-item (ligne d'annonce, --historique
   éteinte jusqu'au survol), .adm-badge (pastilles d'état), .adm-icon-btn (boutons à icône seule).
   Non couverts pour l'instant : formulaires de saisie, tableaux de facturation, lignes
   d'administration (.admin-row), tiroir latéral : à ajouter ici au fur et à mesure.
   ======================================================== */
.adm-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.adm-page--etroit {
  max-width: 850px;
}

.adm-titre-page {
  margin: 0 0 4px;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ink);
}

.adm-sous-titre {
  margin: 0 0 var(--space-6);
  color: var(--ink-muted);
}

/* Bandeau d'information */
.adm-info {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(var(--bleu-rgb), 0.06);
  border: 1px solid rgba(var(--bleu-rgb), 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.adm-info-icone {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bleu);
  color: #ffffff;
  font-size: 1.1rem;
}

.adm-info-titre {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.adm-info-texte {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  color: var(--ink);
}

/* Grille du tableau de bord : contenu (2/3) + colonne latérale (1/3) */
.adm-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 960px) {
  .adm-grille {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.adm-cartes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .adm-cartes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.adm-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Carte du tableau de bord : en-tête avec icône, survol à contour bleu (espace admin) */
.adm-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.adm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--bleu);
}

.adm-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 1rem 1.25rem;
  background: rgba(var(--bleu-rgb), 0.05);
  border-bottom: 2px solid var(--vert);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.adm-card-header i {
  color: var(--bleu);
  font-size: 1.1rem;
}

.adm-card-header .bi-stars {
  color: var(--avertissement);
}

.adm-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adm-card-body--liste {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  gap: 0;
}

.adm-card-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

.adm-card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adm-card-actions--grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adm-card-actions--grille .btn-linear-light {
  min-width: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.adm-card-actions--grille .adm-pleine-largeur {
  grid-column: 1 / -1;
}

/* Déconnexion : texte et survol en rouge */
.btn-linear-light.adm-btn-danger {
  color: var(--danger);
}

.btn-linear-light.adm-btn-danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* Liste de liens du bloc "Avant-Premières" */
.adm-liste-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}

.adm-liste-liens li {
  margin-bottom: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-liste-liens a {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.adm-liste-liens a:hover {
  color: var(--bleu-hover);
}

/* Nouveautés */
.adm-actu {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.adm-actu:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.adm-actu-texte {
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}

.adm-actu-lien {
  display: block;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bleu);
  text-decoration: none;
  transition: color 0.2s ease;
}

.adm-actu-lien:hover {
  color: var(--bleu-hover);
}

/* Ligne cliquable : icône + libellé + chevron (Outils & Suivi) */
.adm-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.adm-ligne:last-child {
  border-bottom: none;
}

.adm-ligne:hover {
  color: var(--bleu);
}

.adm-ligne-gauche {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.adm-ligne-icone {
  width: 24px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 1.15rem;
  transition: color 0.2s ease;
}

.adm-ligne:hover .adm-ligne-icone {
  color: var(--bleu);
}

.adm-ligne-chevron {
  flex: none;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

/* Gestion des annonces : en-tête de page, titres de section */
.adm-entete-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.adm-entete-page h2,
.adm-entete-page h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bleu);
}

.adm-titre-section {
  margin: var(--space-8) 0 var(--space-3);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bleu);
}

.adm-titre-section--attente {
  color: var(--avertissement-texte);
}

/* Ligne d'annonce */
.adm-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 15px;
  margin-bottom: var(--space-2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.adm-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--bleu);
  transform: translateY(-2px);
}

.adm-item-logo {
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.adm-item-corps {
  flex: 1;
  min-width: 0;
}

.adm-item-titre {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.adm-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* Historique : "éteint", réveillé au survol */
.adm-item--historique {
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.4s ease, filter 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.adm-item--historique:hover {
  opacity: 1;
  filter: none;
}

.adm-item--vide {
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* Pastilles d'état */
.adm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
}

.adm-badge--vedette {
  background: var(--avertissement);
  color: var(--ink);
}

.adm-badge--enligne {
  background: var(--surface-raised);
  color: var(--bleu);
  border-color: var(--line);
}

.adm-badge--annule,
.adm-badge--complet {
  background: var(--danger);
  color: #ffffff;
}

.adm-badge--places {
  background: rgba(var(--vert-rgb), 0.12);
  color: var(--vert-texte);
  border-color: rgba(var(--vert-rgb), 0.35);
}

/* Boutons d'action à icône seule : modifier / dupliquer / supprimer */
.adm-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.adm-icon-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s ease, box-shadow 0.2s ease;
}

.adm-icon-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.adm-icon-btn--modifier { color: var(--bleu); }
.adm-icon-btn--modifier:hover { border-color: var(--bleu); }

.adm-icon-btn--dupliquer { color: var(--vert-texte); }
.adm-icon-btn--dupliquer:hover { border-color: var(--vert); }

.adm-icon-btn--supprimer { color: var(--danger); }
.adm-icon-btn--supprimer:hover { border-color: var(--danger); }

@media (max-width: 520px) {
  .adm-item {
    flex-wrap: wrap;
  }

  .adm-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}


/* ========================================================
   14. BOUTON « RETOUR EN HAUT »
   Remplace .scrolltotop de nstyle.css et son code jQuery. Lien <a class="sa-scrolltop"> placé dans
   includes/apres.php ; un court JavaScript (sans jQuery) ajoute la classe .est-visible dès que
   la page est descendue de plus de 300 px. Le retour doux vient de scroll-behavior (ci-dessous),
   désactivé pour les visiteurs qui demandent moins d'animations (prefers-reduced-motion).
   Look identique aux boutons ronds de réseaux sociaux du pied (.social-circle-btn).

   Le bandeau cookies (section 12) est aussi ancré en bas de l'écran, par-dessus tout le reste
   (z-index 2000) : tant qu'un visiteur n'a pas répondu, il recouvre exactement l'endroit où se
   trouve ce bouton. Le JavaScript d'includes/apres.php pose alors la variable
   --hauteur-bandeau-cookies (hauteur réelle du bandeau, qui varie si le texte passe à la ligne
   sur petit écran) et la classe .a-bandeau-cookies sur <html> : le bouton remonte d'autant, tant
   que le bandeau est affiché (bug constaté le 28/09/2026 : bouton invisible sur un premier
   passage, visible seulement une fois les cookies déjà acceptés lors d'une visite précédente).
   ======================================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.sa-scrolltop {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  border: 1.5px solid rgba(var(--bleu-rgb), 0.35);
  color: var(--bleu);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease;
}

.sa-scrolltop.est-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Bandeau cookies encore affiché (visiteur qui n'a pas encore répondu) : le bouton remonte
   au-dessus, à la hauteur réelle du bandeau (posée en JS, voir includes/apres.php) */
html.a-bandeau-cookies .sa-scrolltop {
  bottom: calc(var(--hauteur-bandeau-cookies, 0px) + var(--space-4));
}

.sa-scrolltop:hover {
  border-color: var(--vert);
  color: var(--vert-texte);
  background-color: rgba(var(--vert-rgb), 0.08);
}

.sa-scrolltop svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}


/* ========================================================
   15. ÉLÉMENTS DE DÉMONSTRATION (design/modele/ seulement)
   Classes utilisées uniquement par design/modele/modele.php et administration.php pour présenter
   les composants (titres de démonstration, cadre, champs factices). Aucune page du site ne s'en
   sert : à supprimer d'ici le jour où le dossier design/modele/ ne sera plus une référence.
   ======================================================== */
.modele-titre {
  font: 700 13px/18px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bleu);
  margin: var(--space-8) 0 var(--space-3);
}

.modele-page-titre {
  margin: 0 0 var(--space-6);
  font-size: 1.8rem;
  color: var(--ink);
  text-align: center;
}

.modele-cadre {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
}

.form-mock-fields {
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.form-mock-field {
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}


/* ========================================================
   16. PONT TEMPORAIRE — composants publics pas encore migrés
   Copiés tels quels depuis assets2/css/nstyle.css (section 18), pour les inclusions de la fiche
   membre qui n'ont pas encore leur propre passe de migration : membres/section/coordonne.detail.php,
   membres/section/horaire.detail.php, membres/section/secteur.detail.php, formation/detail.inc.php,
   galeries/galerie.inc.php. Ajouté le 29/09/2026 : sans ces règles (nstyle.css n'est plus chargé
   par le nouveau look), ces blocs perdaient tout style, notamment les icônes SVG sans taille
   propre (.sa-module-header svg) qui s'affichaient énormes.
   À SUPPRIMER d'ici quand ces inclusions auront leur propre passe de migration (comme les blocs
   Description de membres/detail/detail.inc.php, déjà faits en .card-plain/.fiche-*).
   ======================================================== */
.sa-title-section {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #02a6c0;
  margin: 40px 0 10px 0 !important;
  border: none;
}

.sa-title-section:first-of-type {
  margin-top: 15px !important;
}

.sa-module {
  margin-bottom: 22px;
}

.sa-module-header {
  background: #02a6c0;
  color: #fff;
  padding: 13px 18px;
  border-radius: 8px 8px 0 0;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sa-module-header svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.sa-module-body {
  background: #fff;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 18px;
}

.sa-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid #eee;
}

.sa-entry:last-child {
  border-bottom: none;
}

.sa-entry:hover {
  background: rgba(39, 196, 20, 0.07);
}

.sa-entry-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: none;
  background: #f2f4f6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #02a6c0;
  font-weight: 800;
  font-size: 0.82rem;
}

.sa-entry-thumb img {
  transition: transform 0.25s ease;
}

.sa-entry:hover .sa-entry-thumb img {
  transform: scale(1.35);
}

.sa-entry-thumb.sa-entry-thumb-lg {
  width: 72px;
  height: 72px;
}

.sa-entry-info {
  flex: 1;
  min-width: 0;
}

.sa-entry-title {
  font-weight: 700;
  color: #02a6c0;
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
}

.sa-entry-title:hover {
  text-decoration: none;
  color: #1fa310;
}

.sa-entry-meta {
  font-size: 0.78rem;
  color: #6c757d;
  margin-top: 2px;
}

.sa-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.sa-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(2, 166, 192, 0.08);
  color: #02a6c0;
  border: 1px solid rgba(2, 166, 192, 0.2);
  text-decoration: none;
  transition: all 0.2s ease;
}

.sa-tag:hover {
  background: #02a6c0;
  color: #fff;
  border-color: #02a6c0;
}

/* membres/section/horaire.detail.php : centre le tableau des horaires (remplace la classe Bootstrap
   .col-md-8.mx-auto, sans effet sans bootstrap.css) et rend le <table> Bootstrap (.table) lisible
   sans son CSS. Ajouté le 29/09/2026. */
.colonne-centree {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.sa-module-body table {
  width: 100%;
  border-collapse: collapse;
}

.sa-module-body table td {
  padding: 6px 4px;
  font-size: 0.9rem;
  color: var(--ink);
}

/* membres/section/secteur.detail.php : logos ASCA/RME côte à côte (.row > .col-4), sélecteur
   ciblé (comme la grille Coordonnées/Adresse ci-dessus) pour ne pas toucher aux autres .row pas
   encore migrés. Ajouté le 29/09/2026. */
.row:has(> .col-4) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.row > .col-4 {
  flex: 0 1 120px;
}

.row > .col-4 img {
  max-width: 100%;
  height: auto;
}

/* Grille 2 colonnes (Bootstrap .row > .col-lg-6.col-md-6), utilisée par membres/section/
   coordonne.detail.php (cartes Coordonnées/Adresse/"Exerce aussi" côte à côte) : sans
   bootstrap.css, ces classes ne faisaient plus rien, les cartes s'empilaient une par ligne
   (signalé par l'utilisateur, 29/09/2026, capture). Sélecteur :has() volontairement précis
   (plutôt que rendre TOUT .row flex) : cette combinaison de classes n'est utilisée nulle part
   ailleurs (vérifié) ; les autres inclusions pas encore migrées utilisent des .row/.col-*-12
   pleine largeur, qu'on ne veut pas perturber avec une règle générique.
   À supprimer d'ici quand coordonne.detail.php aura sa propre passe de migration. */
.row:has(> .col-lg-6.col-md-6) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.row > .col-lg-6.col-md-6 {
  flex: 1 1 320px;
  max-width: calc(50% - var(--space-4) / 2);
  box-sizing: border-box;
  /* La case s'étire déjà à la hauteur de la ligne (align-items: stretch, par défaut en flex) ;
     display:flex ici fait suivre la carte .sa-module à l'intérieur (signalé par l'utilisateur,
     29/09/2026 : cartes Coordonnées/Adresse pas à la même hauteur). */
  display: flex;
}

@media (max-width: 767px) {
  .row > .col-lg-6.col-md-6 {
    max-width: 100%;
  }
}

.row:has(> .col-lg-6.col-md-6) .sa-module {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.row:has(> .col-lg-6.col-md-6) .sa-module-body {
  flex: 1 1 auto;
}


/* ==============================================
   Historique des modifications :
   - Version 1.0 - 28/09/2026 : création par fusion de design/source/base.css (polices, jetons,
     éléments de base) et de design/modele/style.css (composants). Règles reprises à l'identique.
     Ajouts : en-tête de fichier, sommaire, commentaire documentant chaque section et chaque
     jeton, section 14 (bouton retour en haut sans jQuery), règles de démonstration regroupées
     en section 15.
   - Version 1.1 - 28/09/2026 22:10 : bouton "retour en haut" (section 14) remonté au-dessus du
     bandeau cookies quand il est encore affiché (chevauchement signalé par l'utilisateur).
   - Version 1.2 - 28/09/2026 22:50 : débordement réel du menu du haut signalé par l'utilisateur
     (capture d'écran) et mesuré : entre 900 et environ 1030px de large, le menu (739px
     nécessaires) ne tenait plus dans la place restante. Seuil du menu mobile (section 5) remonté
     de 900px à 1080px. Même correction reportée dans design/modele/style.css (référence).
   Historique hérité de design/modele/style.css (avant la fusion) :
   - Version 1.0 - 28/09/2026 : création. CSS unique regroupant base de page, en-tête,
     bouton .btn-linear-light (grande taille, --radius-btn), bannière, onglets, barre de
     recherche, cartes, formulaire modèle, pied de page et bandeau cookies, à partir des
     composants de design/.
   - Version 1.1 - 28/09/2026 : image de fiche/membre toujours entière (object-fit: contain,
     hauteur max 220px) ; variante --logo supprimée, devenue le comportement par défaut.
   - Version 1.3 - 28/09/2026 : ajout de la section Administration (.adm-*) pour
     design/modele/administration.php, adaptée de prive/index.php et agenda/client_admin.php
     (icônes Bootstrap Icons, couleurs d'action conservées).
   - Version 1.2 - 28/09/2026 : correction des débordements horizontaux mesurés en mobile :
     onglets (minmax(0, 1fr) + libellé qui passe à la ligne), grille du pied de page
     (minmax(0, ...)), en-tête à 320px (espace et taille du nom réduits).
   ============================================== */

/* ========================================================
   17. ADMINISTRATION — tiroir latéral et pont de compatibilité (ajouté le 02/10/2026)
   - .admin-drawer* / .admin-row : tiroir d'administration (includes/admin_menu.php), repris de look_saas.css.
   - .sa-compat : PONT TEMPORAIRE pour les pages d'administration qui gardent leur balisage Bootstrap
     (tableaux, formulaires, boutons, grille, utilitaires) : le contenu est enveloppé dans
     <div class="sa-compat"> et retrouve un rendu correct sans Bootstrap. À supprimer quand ces pages
     auront leur propre passe de migration (comme pour la section 16).
   ======================================================== */
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 20px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.admin-row:hover {
  background: rgba(var(--bleu-rgb), 0.08);
  color: var(--bleu);
}

.admin-drawer-tab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--bleu);
  color: #ffffff;
  font-size: 1.3rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1050;
  cursor: pointer;
}

.admin-drawer {
  position: fixed;
  top: 0;
  right: -340px;
  width: 320px;
  max-width: 90vw;
  height: 100vh;
  background: var(--surface-raised);
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.15);
  z-index: 1051;
  display: flex;
  flex-direction: column;
  transition: right 0.25s ease;
  overflow-y: auto;
}

.admin-drawer.admin-drawer-ouvert {
  right: 0;
}

.admin-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-tint, #f2f4f6);
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.admin-drawer-close {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
}

.admin-drawer-body {
  padding: 16px;
}

.admin-drawer-body .card-plain {
  max-width: none;
  margin: 0 0 16px;
}

.sa-compat {
  padding: var(--space-6);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-x: auto;
}

.sa-compat h1,
.sa-compat h2,
.sa-compat h3,
.sa-compat h4,
.sa-compat h5 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink);
}

.sa-compat .titre1,
.sa-compat .bleu {
  color: var(--bleu);
  font-weight: 800;
}

.sa-compat .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.sa-compat [class*="col-"] {
  flex: 1 1 14rem;
  min-width: 0;
}

.sa-compat .col-12,
.sa-compat .col-md-12,
.sa-compat .col-lg-12,
.sa-compat .col-xl-12 {
  flex-basis: 100%;
}

.sa-compat table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
}

.sa-compat th,
.sa-compat td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.sa-compat th {
  font-weight: 700;
  color: var(--ink-muted);
}

.sa-compat .table-hover tr:hover td {
  background: rgba(var(--bleu-rgb), 0.05);
}

.sa-compat .table-bordered th,
.sa-compat .table-bordered td {
  border: 1px solid var(--line);
}

.sa-compat .w-auto { width: auto; }
.sa-compat .w-100 { width: 100%; }
.sa-compat .table-responsive { overflow-x: auto; }

.sa-compat .nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}

.sa-compat .nav-link {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  text-decoration: none;
}

.sa-compat .nav-link.active {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #ffffff;
}

.sa-compat .btn,
.sa-compat .btn1,
.sa-compat .btn2,
.sa-compat button,
.sa-compat input[type="submit"] {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--bleu);
  border-radius: var(--radius-sm);
  background: rgba(var(--bleu-rgb), 0.06);
  color: var(--ink);
  font: 700 0.9rem/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

.sa-compat .btn2,
.sa-compat .btn-success,
.sa-compat .btn-primary,
.sa-compat input[type="submit"] {
  border-color: var(--vert);
  background: rgba(var(--vert-rgb), 0.12);
}

.sa-compat .btn-danger,
.sa-compat .btn-outline-danger {
  border-color: var(--danger);
  background: rgba(220, 53, 69, 0.08);
  color: var(--danger);
}

.sa-compat .btn-sm {
  padding: 4px 10px;
  font-size: 0.82rem;
}

.sa-compat input[type="text"],
.sa-compat input[type="email"],
.sa-compat input[type="password"],
.sa-compat input[type="number"],
.sa-compat input[type="date"],
.sa-compat input[type="tel"],
.sa-compat input[type="datetime-local"],
.sa-compat textarea,
.sa-compat select,
.sa-compat .form-control,
.sa-compat .form-select {
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: 400 0.95rem/1.4 var(--font-sans);
}

.sa-compat .form-label {
  display: block;
  font: 700 12px/16px var(--font-sans);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sa-compat .form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sa-compat .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.sa-compat .bg-danger { background: var(--danger); color: #ffffff; }
.sa-compat .bg-success { background: var(--vert); color: #ffffff; }
.sa-compat .bg-warning { background: #ffc107; color: #333333; }
.sa-compat .bg-primary { background: var(--bleu); color: #ffffff; }
.sa-compat .bg-secondary { background: #6c757d; color: #ffffff; }
.sa-compat .bg-light { background: var(--bg-tint, #f2f4f6); }

.sa-compat .alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(var(--bleu-rgb), 0.06);
  margin: var(--space-3) 0;
}

.sa-compat .alert-danger { background: rgba(220, 53, 69, 0.08); border-color: rgba(220, 53, 69, 0.3); color: var(--danger); }
.sa-compat .alert-success { background: rgba(var(--vert-rgb), 0.1); border-color: rgba(var(--vert-rgb), 0.35); }
.sa-compat .alert-warning { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.5); }

.sa-compat .d-flex { display: flex; }
.sa-compat .flex-wrap { flex-wrap: wrap; }
.sa-compat .justify-content-between { justify-content: space-between; }
.sa-compat .justify-content-end { justify-content: flex-end; }
.sa-compat .align-items-center { align-items: center; }
.sa-compat .d-inline { display: inline; }
.sa-compat .d-inline-block { display: inline-block; }
.sa-compat .d-block { display: block; }
.sa-compat .d-none { display: none; }
.sa-compat .gap-2 { gap: var(--space-2); }
.sa-compat .gap-3 { gap: var(--space-3); }
.sa-compat .ms-auto { margin-left: auto; }
.sa-compat .text-center { text-align: center; }
.sa-compat .text-end { text-align: right; }
.sa-compat .text-muted { color: var(--ink-muted); }
.sa-compat .text-danger { color: var(--danger); }
.sa-compat .text-success { color: var(--vert-texte); }
.sa-compat .fw-bold,
.sa-compat b,
.sa-compat strong { font-weight: 700; }
.sa-compat .small,
.sa-compat small { font-size: 0.85rem; }
.sa-compat .text-uppercase { text-transform: uppercase; }
.sa-compat .m-0 { margin: 0; }
.sa-compat .mb-0 { margin-bottom: 0; }
.sa-compat .mb-2 { margin-bottom: var(--space-2); }
.sa-compat .mb-3 { margin-bottom: var(--space-3); }
.sa-compat .mb-4,
.sa-compat .mb-5 { margin-bottom: var(--space-6); }
.sa-compat .mt-2 { margin-top: var(--space-2); }
.sa-compat .mt-3 { margin-top: var(--space-3); }
.sa-compat .mt-4 { margin-top: var(--space-6); }
.sa-compat .me-1 { margin-right: var(--space-1); }
.sa-compat .me-2 { margin-right: var(--space-2); }
.sa-compat .text-start { text-align: left; }
.sa-compat .ps-4 { padding-left: var(--space-6); }
.sa-compat .align-middle th,
.sa-compat .align-middle td { vertical-align: middle; }
.sa-compat .rounded-pill { border-radius: var(--radius-pill); }
.sa-compat .table-light th,
.sa-compat .table-light td { background: rgba(var(--bleu-rgb), 0.05); }
/* Variante dense : grands tableaux d'administration (liste des membres, 18 colonnes). Pas de cadre ni de
   défilement interne (comme avant) : le tableau occupe la largeur de la page, texte compact, retours à la
   ligne autorisés pour que toutes les colonnes d'action (à droite) restent visibles. */
.sa-compat--dense {
  padding: 0;
  font-size: 0.8rem;
}

.sa-compat--libre {
  overflow: visible;
}

.sa-compat--dense th,
.sa-compat--dense td {
  padding: 2px 4px;
  white-space: normal;
}

.sa-compat--dense img {
  max-width: 70px;
  height: auto;
}

.sa-compat--dense a {
  text-decoration: none;
}

/* Téléphone : la grande liste (table.table-hover) passe en blocs empilés, une fiche par bloc ; les icônes
   d'action deviennent des boutons de 44 px (cible tactile), la suppression est poussée à l'autre bout. */
@media (max-width: 760px) {
  .sa-compat--dense .table-bordered {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .sa-compat--dense .table-hover,
  .sa-compat--dense .table-hover tbody {
    display: block;
    width: 100%;
  }

  .sa-compat--dense .table-hover tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .sa-compat--dense .table-hover tr:has(> th) {
    display: none;
  }

  .sa-compat--dense .table-hover td {
    display: block;
    border: 0;
    padding: 0;
  }

  .sa-compat--dense .table-hover td[colspan] {
    flex-basis: 100%;
  }

  .sa-compat--dense .table-hover td:nth-last-child(-n+5) {
    order: 9;
  }

  .sa-compat--dense .table-hover td a:has(> i.bi) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.35rem;
  }

  .sa-compat--dense .table-hover td:last-child {
    margin-left: auto;
  }

  .sa-compat--dense .table-hover td:last-child a:has(> i.bi) {
    color: var(--danger);
  }
}

/* Liste d'annonces sur une ligne par annonce, hors cadre (agenda/client_admin.php, 02/10/2026) : vignette,
   titre + date + pastilles, boutons d'action alignés à droite ; sur téléphone les boutons passent dessous. */
.liste-admin {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto var(--space-8) auto;
}

.liste-admin-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ligne-admin {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  transition: background-color 0.15s ease;
}

/* Deux couleurs en alternance, et survol de la ligne (teinte verte, comme les listes du site public) */
.ligne-admin:nth-child(even) {
  background: rgba(var(--bleu-rgb), 0.06);
}

.ligne-admin:hover {
  background: rgba(var(--vert-rgb), 0.12);
}

.ligne-admin-vignette {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.ligne-admin-texte {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ligne-admin-titre {
  font-weight: 700;
  color: var(--ink);
}

.ligne-admin-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.ligne-admin-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ligne-admin-actions form {
  margin: 0;
}

@media (max-width: 760px) {
  .ligne-admin {
    flex-wrap: wrap;
  }

  .ligne-admin-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
  }
}
.sa-compat .text-warning { color: #ffc107; }

.sa-compat .col-lg-8 { flex: 2 1 36rem; }
.sa-compat .col-lg-4 { flex: 1 1 18rem; }
.sa-compat .col-md-6 { flex: 1 1 20rem; }
.sa-compat .flex-column { flex-direction: column; }
.sa-compat .flex-grow-1 { flex-grow: 1; }
.sa-compat .mt-auto { margin-top: auto; }
.sa-compat .h-100 { height: 100%; }
.sa-compat .h-auto { height: auto; }
.sa-compat .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-compat .list-unstyled { list-style: none; padding: 0; }
.sa-compat .text-decoration-none { text-decoration: none; }
.sa-compat .border-bottom { border-bottom: 1px solid var(--line); }
.sa-compat .pb-3 { padding-bottom: var(--space-3); }
.sa-compat .mb-1 { margin-bottom: var(--space-1); }
.sa-compat .text-dark { color: var(--ink); }
.sa-compat .text-info { color: var(--bleu); }
.sa-compat .btn-dashboard { display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: var(--radius-sm); text-align: center; text-decoration: none; }
.sa-compat .p-2 { padding: var(--space-2); }
.sa-compat .p-3 { padding: var(--space-3); }
.sa-compat .p-4 { padding: var(--space-4); }
.sa-compat .pt-2 { padding-top: var(--space-2); }