/* =========================================================================
   Santé Locale — feuille de style unique
   =========================================================================

   Parti pris : un seul fichier CSS, aucune police distante, aucun framework.
   Sur un site de 100 000 pages servi par un hebergement mutualise, chaque
   requete supplementaire se paie sur le LCP de chaque page. Les polices sont
   donc celles du systeme, et toute la mise en forme tient dans ce fichier.

   Sommaire
     1.  Jetons de design (couleurs, espacements, rayons)
     2.  Themes clair et sombre
     3.  Socle et typographie
     4.  Accessibilite (focus, saut de contenu, mouvement reduit)
     5.  En-tete et navigation
     6.  Recherche et suggestions
     7.  Encart urgence
     8.  Bandeau partenaire et numero officiel
     9.  Barre d'action mobile
     10. Blocs de contenu
     11. Fiche etablissement
     12. Listes, cartes et grilles
     13. Pagination, fil d'Ariane
     14. Pied de page
     15. Animations
     16. Responsive
     17. Impression
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Jetons de design
   ------------------------------------------------------------------------- */

:root {
  /* Palette claire, construite autour d'un magenta profond.
     
     Un point important : le bloc publicitaire est lui aussi magenta. Pour qu'il
     reste identifiable comme publicité — ce qu'exige la loi, et ce que Google
     sanctionne sous le nom de « deceptive layout » — les deux magentas sont
     volontairement distincts en VALEUR : l'accent du site est sombre et posé
     sur fond clair, la publicité est un aplat vif et saturé. S'y ajoutent son
     étiquette, son cadre et son halo. Ne pas rapprocher ces deux teintes.

     Le second accent (teal) ne sert qu'aux données chiffrées, jamais aux
     actions : c'est la complémentaire du magenta, elle donne du repos à l'œil. */
  --fond:            #f7f8fb;
  --fond-2:          #eef1f7;
  --surface:         #ffffff;
  --surface-2:       #f9fafc;
  --surface-verre:   rgba(255, 255, 255, 0.72);
  --bordure:         #e2e6ee;
  --bordure-forte:   #cbd2e0;

  --texte:           #10172a;
  --texte-2:         #4a5568;
  --texte-3:         #6b7280;

  --accent:          #b0248c;   /* magenta de marque — 6,1:1 sur blanc */
  --accent-fort:     #8a1c6e;   /* survol et états actifs */
  --accent-doux:     #fceef7;   /* fonds de badges et de blocs */
  --accent-bord:     #f0cbe5;

  /* Couleur des données chiffrées. Volontairement dans la famille magenta,
     mais plus sombre et moins saturée que l'accent : les chiffres restent
     distincts des liens sans introduire une seconde teinte dans la page. */
  --data:            #8f2673;   /* 7,8:1 sur blanc */
  --data-doux:       #f9e6f3;

  --alerte:          #a8341c;
  --alerte-fond:     #fdf0ec;
  --alerte-bord:     #f3c8bb;

  --pub-halo:        rgba(208, 17, 161, 0.18);
  --pub-bord:        #e9c7de;

  --r-s:  8px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;

  --ombre-1: 0 1px 2px rgba(16, 23, 42, .06), 0 1px 3px rgba(16, 23, 42, .04);
  --ombre-2: 0 4px 12px rgba(16, 23, 42, .07), 0 2px 4px rgba(16, 23, 42, .04);
  --ombre-3: 0 12px 32px rgba(16, 23, 42, .11), 0 4px 8px rgba(16, 23, 42, .05);

  --largeur: 1180px;
  --gouttiere: 16px;

  --t-rapide: 140ms cubic-bezier(.2, 0, .2, 1);
  --t-doux:   260ms cubic-bezier(.2, 0, .2, 1);

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;
  --police-titre: var(--police);
  --police-nb: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------------------
   2. Themes
   ------------------------------------------------------------------------- */

/* Mode sombre automatique, sauf si le visiteur a explicitement choisi clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:          #080c15;
    --fond-2:        #0d131f;
    --surface:       #111927;
    --surface-2:     #16202f;
    --surface-verre: rgba(17, 25, 39, 0.76);
    --bordure:       #202c40;
    --bordure-forte: #2f3d55;

    --texte:         #e9eefb;
    --texte-2:       #a8b4c9;
    --texte-3:       #8593ab;

    --accent:        #f0a4d9;   /* magenta clair — 8,7:1 sur la surface sombre */
    --accent-fort:   #f8c6e9;
    --accent-doux:   #2a1024;
    --accent-bord:   #5c2049;

    --data:          #e9a8d3;
    --data-doux:     #2d1226;

    --alerte:        #ff9d82;
    --alerte-fond:   #2b1512;
    --alerte-bord:   #5c2a1f;

    --pub-halo:      rgba(214, 60, 176, 0.22);
    --pub-bord:      #3a2436;

    --ombre-1: 0 1px 2px rgba(0, 0, 0, .5);
    --ombre-2: 0 4px 14px rgba(0, 0, 0, .55);
    --ombre-3: 0 14px 38px rgba(0, 0, 0, .6);
  }
}

/* Mode sombre force par l'interrupteur. */
:root[data-theme="dark"] {
  --fond:          #080c15;
  --fond-2:        #0d131f;
  --surface:       #111927;
  --surface-2:     #16202f;
  --surface-verre: rgba(17, 25, 39, 0.76);
  --bordure:       #202c40;
  --bordure-forte: #2f3d55;

  --texte:         #e9eefb;
  --texte-2:       #a8b4c9;
  --texte-3:       #8593ab;

  --accent:        #f0a4d9;
  --accent-fort:   #f8c6e9;
  --accent-doux:   #2a1024;
  --accent-bord:   #5c2049;

  --data:          #e9a8d3;
  --data-doux:     #2d1226;

  --alerte:        #ff9d82;
  --alerte-fond:   #2b1512;
  --alerte-bord:   #5c2a1f;

  --pub-halo:      rgba(214, 60, 176, 0.22);
  --pub-bord:      #3a2436;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .5);
  --ombre-2: 0 4px 14px rgba(0, 0, 0, .55);
  --ombre-3: 0 14px 38px rgba(0, 0, 0, .6);
}

/* -------------------------------------------------------------------------
   3. Socle et typographie
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Degrade tres discret : donne de la profondeur sans gener la lecture. */
  background-image:
    radial-gradient(1200px 500px at 12% -8%, var(--accent-doux), transparent 62%),
    radial-gradient(900px 420px at 92% -12%, var(--data-doux), transparent 58%);
  background-repeat: no-repeat;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.18;
  letter-spacing: -0.021em;
  margin: 0 0 .5em;
  font-weight: 750;
  text-wrap: balance;
}

.titre-page {
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  margin: .35em 0 .55em;
  max-width: 22ch;
  max-width: min(22ch, 100%);
}
.page-accueil .titre-page { max-width: 16ch; }

h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
h3 { font-size: 1.08rem; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fort); }

strong { font-weight: 680; }

.chapeau {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
  color: var(--texte-2);
  max-width: 68ch;
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
.chapeau--accueil { max-width: 62ch; }

/* Mention d'information manquante. Volontairement sobre : c'est une absence
   assumee, pas une erreur. */
.vide {
  color: var(--texte-3);
  font-style: italic;
  font-size: .94em;
}

.lien-fort {
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  text-decoration: none;
  border-bottom: 2px solid var(--accent-bord);
  padding-bottom: 1px;
  transition: border-color var(--t-rapide), gap var(--t-rapide);
}
.lien-fort:hover { border-color: var(--accent); gap: .55em; }

.tel-fort {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}

.compteur {
  font-size: .72em;
  font-weight: 600;
  color: var(--texte-3);
  background: var(--fond-2);
  border-radius: 999px;
  padding: .15em .6em;
  vertical-align: middle;
  margin-left: .4em;
}

/* -------------------------------------------------------------------------
   4. Accessibilite
   ------------------------------------------------------------------------- */

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-s) 0;
  font-weight: 650;
}
.saut:focus { left: 0; }

/* Focus toujours visible, y compris sur fond colore. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   5. En-tete
   ------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface-verre);
  /* Verre depoli leger : l'effet ne s'applique qu'a l'en-tete et aux cartes,
     jamais derriere un texte long. */
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bordure);
}

.entete__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding-block: .5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--texte);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 1.16rem;
  flex-shrink: 0;
}
.marque__logo {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-fort));
  box-shadow: 0 2px 10px rgba(176, 36, 140, .32);
}
:root[data-theme="dark"] .marque__logo,
:root:not([data-theme="light"]) .marque__logo { color: #0a1020; }

.nav { margin-left: .5rem; }
.nav__liste {
  display: flex;
  gap: .3rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__liste a {
  display: block;
  padding: .45rem .7rem;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--texte-2);
  font-size: .94rem;
  font-weight: 560;
  transition: background var(--t-rapide), color var(--t-rapide);
}
.nav__liste a:hover { background: var(--fond-2); color: var(--texte); }

.nav__toggle { display: none; }

.theme {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-s);
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte-2);
  cursor: pointer;
  transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.theme:hover { color: var(--texte); border-color: var(--bordure-forte); }
.theme__sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__clair { display: none; }
  :root:not([data-theme="light"]) .theme__sombre { display: block; }
}
:root[data-theme="dark"] .theme__clair { display: none; }
:root[data-theme="dark"] .theme__sombre { display: block; }
:root[data-theme="light"] .theme__clair { display: block; }
:root[data-theme="light"] .theme__sombre { display: none; }

/* -------------------------------------------------------------------------
   6. Recherche
   ------------------------------------------------------------------------- */

.recherche-mini {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: 0 1 300px;
}
.recherche-mini input {
  width: 100%;
  padding: .52rem 2.3rem .52rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: .92rem;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.recherche-mini input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-doux);
}
.recherche-mini button {
  position: absolute;
  right: 4px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--texte-3);
  cursor: pointer;
}
.recherche-mini button:hover { color: var(--accent); }

.recherche-hero {
  margin: 0 0 2rem;
}
.recherche-hero__form { position: relative; max-width: 720px; }
.recherche-hero__label {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  color: var(--texte-2);
  margin-bottom: .5rem;
}
.recherche-hero__champ {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .4rem .4rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--bordure);
  border-radius: 999px;
  box-shadow: var(--ombre-2);
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.recherche-hero__champ:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-doux), var(--ombre-2);
}
.recherche-hero__champ svg { color: var(--texte-3); flex-shrink: 0; }
.recherche-hero__champ input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  padding: .7rem 0;
}
.recherche-hero__champ input:focus { outline: none; }
.recherche-hero__champ button {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.35rem;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--t-rapide), transform var(--t-rapide);
}
.recherche-hero__champ button:hover { background: var(--accent-fort); }
.recherche-hero__champ button:active { transform: scale(.97); }
:root[data-theme="dark"] .recherche-hero__champ button,
:root:not([data-theme="light"]) .recherche-hero__champ button { color: #0a1020; }

/* Suggestions instantanees */
.suggestions {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-3);
  overflow: hidden;
  max-height: min(60vh, 460px);
  overflow-y: auto;
}
.suggestions[hidden] { display: none; }
.suggestions__groupe {
  padding: .5rem .85rem .25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.suggestions a {
  display: block;
  padding: .55rem .85rem;
  text-decoration: none;
  color: var(--texte);
  border-top: 1px solid var(--bordure);
}
.suggestions a:first-of-type { border-top: 0; }
.suggestions a:hover,
.suggestions a[aria-selected="true"] { background: var(--accent-doux); }
.suggestions__nom { display: block; font-weight: 600; font-size: .95rem; }
.suggestions__meta { display: block; font-size: .83rem; color: var(--texte-3); }

/* -------------------------------------------------------------------------
   7. Encart urgence
   ------------------------------------------------------------------------- */

/* Place au-dessus du bandeau publicitaire sur toutes les pages sante.
   Contraste renforce et icone : il doit etre lu avant tout le reste. */
.urgence {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin: 0 0 1rem;
  padding: .85rem 1.1rem;
  background: var(--alerte-fond);
  border: 1.5px solid var(--alerte-bord);
  border-left-width: 5px;
  border-radius: var(--r-m);
  color: var(--alerte);
}
.urgence__icone { flex-shrink: 0; margin-top: 1px; }
.urgence__texte { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--texte); }
.urgence__texte strong { color: var(--alerte); font-weight: 750; }
.urgence a { color: var(--alerte); font-weight: 750; }
.urgence__complement {
  display: block;
  font-size: .87rem;
  color: var(--texte-2);
  margin-top: .15rem;
}

/* -------------------------------------------------------------------------
   8. Bandeau partenaire
   ------------------------------------------------------------------------- */

/* Le bandeau est l'element dominant de la page : halo large, cadre marque,
   visuel pleine largeur et bouton d'appel proeminent sur tous les ecrans.
   Il reste neanmoins identifie « Publicité » avant le visuel, et le numero
   officiel de la fiche demeure affiche juste en dessous, lisible sans
   interaction — c'est la limite entre une publicite performante et une
   presentation trompeuse. */
.pub {
  position: relative;
  margin: 0 0 .7rem;
  padding: 1rem 1.2rem 1.25rem;
  background: var(--surface);
  border: 2px solid var(--pub-bord);
  border-radius: var(--r-xl);
  box-shadow: 0 0 0 10px var(--pub-halo), var(--ombre-3);
  text-align: center;
}

/* Halo anime tres lent : attire le regard en peripherie sans clignoter ni
   gener la lecture. Neutralise si le visiteur demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .pub { animation: pub-halo 3.6s ease-in-out infinite; }
  @keyframes pub-halo {
    0%, 100% { box-shadow: 0 0 0 8px var(--pub-halo), var(--ombre-3); }
    50%      { box-shadow: 0 0 0 14px var(--pub-halo), var(--ombre-3); }
  }
}

/* Mention d'identification de l'annonce. Discrète, mais volontairement
   maintenue au-dessus du seuil de lisibilité (10 px, contraste AA) : une
   publicité non identifiable engage l'éditeur au titre de l'article L121-1 du
   code de la consommation et expose à une action manuelle Google pour mise en
   page trompeuse. C'est le plancher, pas un réglage esthétique. */
.pub__label {
  margin: 0 0 .35rem;
  font-size: .625rem;      /* 10 px */
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-3);
  text-align: left;
  opacity: .85;
}

.pub__lien {
  display: block;
  line-height: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  transition: transform var(--t-doux);
}
.pub__lien:hover { transform: translateY(-2px); }

/* L'image conserve son ratio natif (500 x 180) et ne depasse jamais sa
   taille reelle : aucun flou, aucun decalage de mise en page. */
.pub__img {
  width: 100%;
  max-width: 620px;
  height: auto;
  aspect-ratio: 500 / 180;
  border-radius: var(--r-m);
}

/* Bouton d'appel, sous le bandeau, sur tous les écrans : c'est le principal
   levier de conversion de la page. Deux niveaux — l'accroche de l'annonceur,
   puis le numéro en très grand. */
.pub__appel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  margin: .9rem auto 0;
  max-width: 620px;
  padding: .95rem 1.4rem 1.05rem;
  border-radius: var(--r-l);
  background: linear-gradient(135deg, #d011a1, #8d0b6b);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(176, 13, 134, .5);
  transition: transform var(--t-rapide), box-shadow var(--t-rapide);
}
.pub__appel-accroche {
  font-size: clamp(.95rem, .88rem + .3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: -.005em;
  opacity: .96;
}
.pub__appel-num {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.pub__appel-num svg { flex-shrink: 0; opacity: .9; }

/* Mention tarifaire, directement sous le numéro qu'elle qualifie : texte
   simple, sans cadre ni fond, à la façon de la barre mobile.
   Le blanc reste quasi pur — l'atténuer ferait passer le contraste sous le
   seuil AA sur le magenta clair du dégradé, et c'est une information
   obligatoire pour un numéro à valeur ajoutée, pas un ornement. */
.pub__appel-tarif {
  margin-top: .12rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .96);
}
.pub__appel:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(176, 13, 134, .58); }
.pub__appel:active { transform: scale(.985); }

/* Animation d'appel du regard sur le numéro : une pulsation lente de la lueur,
   et un léger battement du numéro. Volontairement douce et bien en dessous de
   3 flashs par seconde (WCAG 2.3.1), et entièrement neutralisée si le visiteur
   a demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .pub__appel {
    animation: appel-lueur 2.4s ease-in-out infinite;
  }
  .pub__appel-num {
    animation: appel-battement 2.4s ease-in-out infinite;
  }
  @keyframes appel-lueur {
    0%, 100% { box-shadow: 0 10px 30px rgba(176, 13, 134, .5); }
    50%      { box-shadow: 0 10px 38px rgba(214, 16, 165, .8), 0 0 0 6px rgba(214, 16, 165, .14); }
  }
  @keyframes appel-battement {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
  }
  .pub__appel:hover { animation-play-state: paused; }
  .pub__appel:hover .pub__appel-num { animation-play-state: paused; }
}

.pub__dissocie {
  margin: .6rem 0 0;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--texte-3);
  text-align: left;
}

/* Numero officiel : volontairement sobre et secondaire par rapport au bloc
   publicitaire, qui domine la page. Il reste cependant affiche en clair,
   sans interaction ni defilement, dans une taille confortablement lisible et
   avec un contraste conforme au niveau AA. Le rendre illisible ou le masquer
   ferait basculer la page dans la pratique commerciale trompeuse. */
/* Numéro officiel de la fiche : réduit à une ligne de texte courante, sans
   cadre ni icône, nettement en retrait du bloc partenaire qui le précède.
   Il reste affiché en clair, sans interaction ni défilement, et au-dessus du
   seuil de contraste AA — c'est le minimum en dessous duquel la page
   deviendrait trompeuse et non conforme au RGAA. */
.numero-officiel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .4rem;
  margin: 0 0 1.5rem;
  padding: 0 .1rem;
}
.numero-officiel__label {
  margin: 0;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texte-3);
}
.numero-officiel__label::after { content: " :"; }
.numero-officiel__tel {
  display: inline-flex;
  align-items: center;
  font-size: .82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--texte-2);
  transition: color var(--t-rapide);
}
.numero-officiel__tel:hover { color: var(--accent); text-decoration: underline; }
/* L'icône téléphone est retirée du numéro officiel : elle en faisait un
   élément d'appel visuel concurrent du bloc partenaire. */
.numero-officiel__tel svg { display: none; }
.numero-officiel__source {
  flex-basis: 100%;
  margin: .1rem 0 0;
  font-size: .7rem;
  color: var(--texte-3);
  opacity: .8;
}

/* -------------------------------------------------------------------------
   9. Barre d'action mobile
   ------------------------------------------------------------------------- */

.barre-mobile { display: none; }

@media (max-width: 767px) {
  /* Barre empilée : le bloc partenaire occupe toute la largeur, le numéro
     officiel se place sous lui sur une ligne discrète. */
  .barre-mobile {
    position: fixed;
    z-index: 80;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-top: 1px solid var(--bordure);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .18);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Rappel d'urgence permanent, en tête de la barre fixe. Sa présence ici
     rend la visibilité du 15 indépendante de la mise en page : contrairement à
     l'encart en flux, il ne peut pas être repoussé hors de l'écran par un
     contenu plus long. Volontairement compact — il protège sans concurrencer
     le bloc partenaire. */
  .barre-mobile__urgence {
    margin: 0;
    padding: .28rem .7rem .3rem;
    background: var(--alerte-fond);
    border-bottom: 1px solid var(--alerte-bord);
    color: var(--texte);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
  }
  .barre-mobile__urgence svg {
    vertical-align: -2px;
    margin-right: .2rem;
    color: var(--alerte);
  }
  .barre-mobile__urgence a {
    color: var(--alerte);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .barre-mobile__pub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    padding: .5rem .7rem .55rem;
    text-decoration: none;
    background: linear-gradient(135deg, #d011a1, #8d0b6b);
    color: #fff;
  }
  .barre-mobile__pub-haut {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    line-height: 1.1;
  }
  /* Mention d'identification : discrète, mais lisible et contrastée sur le
     fond magenta. Elle ne peut pas descendre plus bas sans rendre l'annonce
     non identifiable. */
  .barre-mobile__pub-label {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 3px;
    padding: 0 .25rem;
  }
  .barre-mobile__pub-accroche {
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
  }
  .barre-mobile__pub-num {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.62rem;
    font-weight: 800;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
  }
  .barre-mobile__pub-num svg { flex-shrink: 0; opacity: .9; }
  .barre-mobile__tarif {
    font-size: .6rem;
    /* Opacité maintenue assez haute pour rester contrastée sur le magenta :
       c'est une mention tarifaire obligatoire, pas un ornement. */
    color: rgba(255, 255, 255, .94);
    line-height: 1.2;
  }

  /* Pulsation du numéro, pour attirer l'œil sans clignotement agressif. */
  @media (prefers-reduced-motion: no-preference) {
    .barre-mobile__pub-num { animation: appel-battement 2.4s ease-in-out infinite; }
  }

  /* Numéro officiel : une ligne de texte courante sous le bloc partenaire.
     Présent, cliquable, contrasté AA, mais sans aucun attribut visuel qui en
     ferait un élément d'appel. */
  .barre-mobile__off {
    display: block;
    text-align: center;
    padding: .28rem .7rem .34rem;
    font-size: .68rem;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    background: var(--surface);
    color: var(--texte-3);
    border-top: 1px solid var(--bordure);
  }
  .barre-mobile__off span {
    font-variant-numeric: tabular-nums;
    color: var(--texte-2);
  }

  /* Réserve la hauteur de la barre pour que le pied de page reste atteignable.
     La valeur couvre la variante la plus haute, avec le rappel d'urgence. */
  body.a-barre-mobile { padding-bottom: 132px; }
}

/* -------------------------------------------------------------------------
   10. Blocs de contenu
   ------------------------------------------------------------------------- */

main { padding-bottom: 3rem; }

.bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: var(--ombre-1);
}
.bloc--large { margin-top: 1.25rem; }
.bloc__intro { color: var(--texte-2); font-size: .97rem; margin-bottom: 1rem; }

.bloc--pilier {
  background: linear-gradient(180deg, var(--accent-doux), var(--surface) 70%);
  border-color: var(--accent-bord);
}

.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
  align-items: start;
}
.colonnes__laterale { position: sticky; top: 84px; }

.encart {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-l);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--ombre-1);
}
.encart__titre { font-size: 1rem; font-weight: 700; margin-bottom: .7rem; }
.encart--source { background: var(--surface-2); }
.encart__source { font-size: .86rem; color: var(--texte-2); line-height: 1.5; }
.encart__actions { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.encart__actions a { font-size: .9rem; font-weight: 580; }
.encart__plus { margin-top: .8rem; font-size: .92rem; }
.encart__chiffres { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .35rem; }
.encart__chiffres strong {
  font-family: var(--police-nb);
  font-size: 1.15rem;
  color: var(--data);
  font-weight: 700;
}

.note-source {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--bordure);
  font-size: .85rem;
  color: var(--texte-3);
  line-height: 1.55;
}

.sommaire {
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.sommaire__titre { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-3); }
.sommaire ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.sommaire a { font-size: .95rem; font-weight: 560; }

/* -------------------------------------------------------------------------
   11. Fiche etablissement
   ------------------------------------------------------------------------- */

/* Bloc « L'essentiel en 10 secondes ». Premier element de contenu de chaque
   fiche : la reponse avant le detail. */
.essentiel {
  background: var(--surface);
  border: 1.5px solid var(--bordure-forte);
  border-radius: var(--r-xl);
  padding: 1.3rem 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: var(--ombre-2);
  position: relative;
  overflow: hidden;
}
.essentiel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--data));
}
.essentiel__titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 1rem;
}
.essentiel__pastille {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--data);
  box-shadow: 0 0 0 4px var(--data-doux);
}
.essentiel__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem 1.5rem;
  margin: 0;
}
.essentiel__item dt {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: .2rem;
}
.essentiel__item dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.essentiel__sec { color: var(--texte-2); font-size: .9rem; }
.essentiel__item .tel-fort { font-size: 1.22rem; color: var(--accent); text-decoration: none; }

/* Coordonnees */
.coords { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.coords__item { display: flex; gap: .8rem; align-items: flex-start; }
.coords__ic {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--accent-doux);
  color: var(--accent);
}
.coords__item--sec .coords__ic { background: var(--fond-2); color: var(--texte-3); }
.coords__txt { min-width: 0; }
.coords__lib {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.coords__val { display: block; font-size: 1.02rem; line-height: 1.5; }
.coords__val.tel-fort { font-size: 1.25rem; color: var(--accent); text-decoration: none; }

/* Informations administratives */
.admin { margin: 0; display: grid; gap: 0; }
.admin__ligne {
  display: grid;
  grid-template-columns: minmax(170px, 38%) 1fr;
  gap: 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--bordure);
}
.admin__ligne:first-child { border-top: 0; }
.admin dt { color: var(--texte-2); font-size: .92rem; }
.admin dd {
  margin: 0;
  font-weight: 580;
  font-size: .96rem;
  word-break: break-word;
}

/* Carte */
.carte {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 380px;
  border-radius: var(--r-m);
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, var(--fond-2) 0 12px, var(--surface-2) 12px 24px);
  border: 1px solid var(--bordure);
}
.carte__activer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.carte__activer small { font-weight: 400; font-size: .82rem; color: var(--texte-3); }
.carte__activer svg { color: var(--accent); }
.carte__activer:hover { background: var(--accent-doux); }
.carte iframe { width: 100%; height: 100%; border: 0; display: block; }
.carte__liens { margin-top: .7rem; font-size: .92rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.carte__liens span { color: var(--texte-3); }

/* -------------------------------------------------------------------------
   12. Listes, cartes et grilles
   ------------------------------------------------------------------------- */

.liste-etabs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: none; }

.etab {
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  background: var(--surface-2);
  transition: transform var(--t-doux), box-shadow var(--t-doux), border-color var(--t-doux);
}
.etab:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-2);
  border-color: var(--bordure-forte);
}
/* Fiche trop incomplete pour avoir sa propre page indexee : presente, mais
   visuellement en retrait. */
.etab--partiel { opacity: .82; background: transparent; border-style: dashed; }
.etab--partiel:hover { transform: none; box-shadow: none; }

.etab__nom { margin: 0 0 .15rem; font-size: 1.06rem; }
.etab__nom a { text-decoration: none; }
.etab__nom a:hover { text-decoration: underline; }
.etab__cat { margin: 0 0 .5rem; font-size: .85rem; color: var(--texte-3); }
.etab__infos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.2rem;
  font-size: .94rem; color: var(--texte-2);
}
.etab__infos li { display: flex; align-items: center; gap: .35rem; }
.etab__infos svg { color: var(--texte-3); flex-shrink: 0; }
.etab__tel a { color: var(--accent); text-decoration: none; }
.etab__tel a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Numéro révélable
   -------------------------------------------------------------------------
   Le numéro officiel est masqué derrière un bouton, et révélé au clic avec une
   transition. Le numéro reste dans le HTML : il n'est jamais retiré, seulement
   masqué visuellement.

   Sans JavaScript, la règle `.no-js` plus bas affiche le numéro directement et
   masque le bouton : la page ne dépend jamais d'un script pour livrer son
   information principale. */

.num-rev {
  position: relative;
  display: inline-block;
}

.num-rev__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border: 1px solid var(--accent-bord);
  border-radius: 999px;
  background: var(--accent-doux);
  color: var(--accent);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapide), border-color var(--t-rapide),
              color var(--t-rapide), transform var(--t-rapide);
}
.num-rev__btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
:root[data-theme="dark"] .num-rev__btn:hover,
:root:not([data-theme="light"]) .num-rev__btn:hover { color: #0a1020; }

/* Les points suggèrent qu'un numéro se cache là, sans le divulguer. */
.num-rev__masque {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  opacity: .55;
}

.num-rev__val {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: var(--texte-2);
}
.num-rev__val[hidden] { display: none; }
.num-rev__val:hover { color: var(--accent); text-decoration: underline; }

/* --- Animation de révélation ---------------------------------------------
   Le bouton s'efface, le numéro monte en fondu, et un balayage lumineux
   parcourt les chiffres une fois. Neutralisée si le visiteur a demandé moins
   de mouvement : le numéro apparaît alors instantanément. */

.num-rev--ouvert .num-rev__btn {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .num-rev--ouvert .num-rev__val {
    animation: num-apparition 420ms cubic-bezier(.2, .8, .2, 1) both;
  }
  .num-rev--ouvert .num-rev__chiffres {
    background: linear-gradient(100deg,
      currentColor 0%, currentColor 38%,
      var(--accent) 50%,
      currentColor 62%, currentColor 100%);
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: num-balayage 900ms ease-out 120ms both;
  }
  @keyframes num-apparition {
    from { opacity: 0; transform: translateY(6px) scale(.97); filter: blur(4px); }
    to   { opacity: 1; transform: none;                        filter: blur(0); }
  }
  @keyframes num-balayage {
    from { background-position: 120% 0; }
    to   { background-position: -60% 0; }
  }
}

/* Variantes de taille, selon l'emplacement. */
.num-rev--grand .num-rev__val {
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--accent);
}
.num-rev--grand .num-rev__btn { font-size: .92rem; padding: .34rem .9rem; }

.num-rev--moyen .num-rev__val { font-size: 1rem; font-weight: 600; }

.num-rev--discret .num-rev__btn {
  padding: .1rem .55rem;
  font-size: .76rem;
  font-weight: 500;
  border-color: var(--bordure);
  background: transparent;
  color: var(--texte-2);
}
.num-rev--discret .num-rev__btn:hover {
  background: var(--fond-2);
  border-color: var(--bordure-forte);
  color: var(--texte);
}
.num-rev--discret .num-rev__val { font-size: .84rem; font-weight: 500; }
.num-rev--discret .num-rev__btn svg { width: 13px; height: 13px; }

/* Sans JavaScript : le numéro est affiché, le bouton disparaît. */
.no-js .num-rev__btn { display: none; }
.no-js .num-rev__val[hidden] { display: inline-flex; }

/* Lien « Voir le numéro », qui remplace le numéro dans les listes et mène à la
   fiche où il figure. Présenté comme une action, pas comme une donnée : le
   visiteur comprend qu'un clic est nécessaire, et le libellé décrit
   exactement la destination. */
.voir-num {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .65rem;
  border: 1px solid var(--accent-bord);
  border-radius: 999px;
  background: var(--accent-doux);
  color: var(--accent) !important;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--t-rapide), border-color var(--t-rapide), transform var(--t-rapide);
}
.voir-num:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
  transform: translateY(-1px);
}
:root[data-theme="dark"] .voir-num:hover,
:root:not([data-theme="light"]) .voir-num:hover { color: #0a1020 !important; }
.voir-num svg { flex-shrink: 0; }

/* Même intention dans les cartes de voisins et la colonne latérale : une
   mention d'action discrète, à la place du numéro. */
.carte-mini__voir {
  justify-self: start;
  margin-top: .15rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
}
.carte-mini__voir::after { content: " →"; }
.etab__statut {
  font-size: .8rem;
  background: var(--fond-2);
  border-radius: 999px;
  padding: .1rem .6rem;
  color: var(--texte-3);
}
.liste-etabs--compacte .etab { padding: .75rem .9rem; }

/* Cartes defilables : etablissements voisins */
.cartes-defil {
  list-style: none;
  margin: 0; padding: .2rem .2rem 1rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 260px);
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.carte-mini { scroll-snap-align: start; }
.carte-mini__lien {
  display: grid;
  gap: .22rem;
  height: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--texte);
  transition: transform var(--t-doux), box-shadow var(--t-doux), border-color var(--t-doux);
}
.carte-mini__lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--accent-bord);
}
.carte-mini__dist {
  justify-self: start;
  font-family: var(--police-nb);
  font-size: .74rem;
  font-weight: 700;
  color: var(--data);
  background: var(--data-doux);
  border-radius: 999px;
  padding: .1rem .55rem;
}
.carte-mini__nom { font-weight: 660; font-size: .98rem; line-height: 1.3; }
.carte-mini__cat { font-size: .8rem; color: var(--texte-3); }
.carte-mini__adr { font-size: .84rem; color: var(--texte-2); }
.carte-mini__tel { font-size: .9rem; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Grilles de cartes */
.grille-cartes {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .7rem;
}
.grille-cartes a {
  display: grid;
  gap: .2rem;
  height: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--texte);
  transition: transform var(--t-doux), box-shadow var(--t-doux), border-color var(--t-doux);
}
.grille-cartes a:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-2);
  border-color: var(--accent-bord);
}
.carte-cat__nom, .carte-com__nom, .carte-marque__nom { font-weight: 660; font-size: 1rem; line-height: 1.3; }
.carte-cat__nb, .carte-marque__secteur { font-size: .85rem; color: var(--texte-3); }
.carte-com__nb {
  font-family: var(--police-nb);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--data);
}
.carte-com__nb small { font-family: var(--police); font-size: .78rem; font-weight: 400; color: var(--texte-3); display: block; }

/* Puces : communes, departements, categories */
.puces-com, .puces-dep, .puces-cat {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.puces-com a, .puces-cat a {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .4rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface-2);
  text-decoration: none;
  color: var(--texte);
  font-size: .94rem;
  transition: background var(--t-rapide), border-color var(--t-rapide), transform var(--t-rapide);
}
.puces-com a:hover, .puces-cat a:hover {
  background: var(--accent-doux);
  border-color: var(--accent-bord);
  transform: translateY(-1px);
}
.puces-com__nb, .puces-cat__nb {
  font-family: var(--police-nb);
  font-size: .78rem;
  color: var(--texte-3);
}
.puces-dep { gap: .4rem; }
.puces-dep a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .75rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-s);
  background: var(--surface-2);
  text-decoration: none;
  color: var(--texte);
  font-size: .9rem;
  transition: background var(--t-rapide), border-color var(--t-rapide);
}
.puces-dep a:hover { background: var(--accent-doux); border-color: var(--accent-bord); }
.puces-dep__code {
  font-family: var(--police-nb);
  font-size: .74rem;
  font-weight: 700;
  color: var(--texte-3);
  background: var(--fond-2);
  border-radius: 4px;
  padding: .05rem .3rem;
}
.puces-dep__nb { font-family: var(--police-nb); font-size: .74rem; color: var(--texte-3); }

.alphabet {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bordure);
}
.alphabet a {
  display: grid; place-items: center;
  min-width: 32px; height: 32px;
  border-radius: var(--r-s);
  background: var(--surface-2);
  border: 1px solid var(--bordure);
  text-decoration: none;
  font-weight: 650;
  font-size: .9rem;
}
.alphabet a:hover { background: var(--accent-doux); border-color: var(--accent-bord); }

.groupe-alpha { margin-bottom: 1.4rem; }
.groupe-alpha__titre {
  font-size: .95rem;
  color: var(--accent);
  border-bottom: 2px solid var(--accent-bord);
  padding-bottom: .25rem;
  margin-bottom: .7rem;
}

/* Preuves de confiance, accueil */
.preuves { margin: 0 0 2rem; }
.preuves__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .8rem;
}
.preuves__item {
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}
.preuves__nb {
  display: block;
  font-family: var(--police-nb);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--data);
  line-height: 1.1;
}
.preuves__lib { display: block; font-size: .87rem; color: var(--texte-2); margin-top: .15rem; }

/* Ligne de provenance sous les compteurs. Une phrase complète dit ce qu'une
   date isolée ne disait pas : à quelle fréquence les données sont renouvelées
   et d'où elles viennent. La pastille verte signale la fraîcheur d'un coup
   d'œil, sans surcharger. */
.preuves__source {
  /* Surtout pas de flex ici : chaque nœud de texte deviendrait une colonne,
     et la phrase se briserait en trois blocs. La pastille est un élément
     inline placé dans le flux normal. */
  margin: .8rem 0 0;
  padding: .7rem .95rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  font-size: .89rem;
  color: var(--texte-2);
  line-height: 1.5;
}
.preuves__source strong { color: var(--texte); }
.preuves__pastille {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: .55rem;
  border-radius: 50%;
  background: var(--data);
  box-shadow: 0 0 0 3px var(--data-doux);
}
@media (prefers-reduced-motion: no-preference) {
  .preuves__pastille { animation: pastille-fraicheur 2.8s ease-in-out infinite; }
  @keyframes pastille-fraicheur {
    0%, 100% { box-shadow: 0 0 0 3px var(--data-doux); }
    50%      { box-shadow: 0 0 0 6px var(--data-doux); }
  }
}

/* Blocs de confiance */
.conf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.2rem;
}
.conf__item h3 { font-size: 1rem; margin-bottom: .35rem; }
.conf__item p { font-size: .94rem; color: var(--texte-2); margin: 0; }

/* Recours et FAQ */
.recours { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.recours__item {
  padding: .8rem 1rem;
  border-left: 3px solid var(--accent-bord);
  background: var(--surface-2);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.recours__nom { margin: 0 0 .15rem; font-weight: 650; }
.recours__quand { margin: 0; font-size: .92rem; color: var(--texte-2); }

.faq { display: grid; gap: .5rem; }
.faq__item {
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  background: var(--surface-2);
  overflow: hidden;
}
.faq__item summary {
  padding: .85rem 1rem;
  font-weight: 640;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--texte-3);
  transition: transform var(--t-rapide);
  flex-shrink: 0;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__rep { padding: 0 1rem 1rem; color: var(--texte-2); font-size: .96rem; }
.faq__rep p:last-child { margin-bottom: 0; }

/* Pages de texte */
.page-texte .bloc { max-width: 76ch; }
.page-texte h2 { margin-top: 1.6em; }
.page-texte h2:first-child { margin-top: 0; }
.page-texte ul, .page-texte ol { padding-left: 1.3rem; }
.page-texte li { margin-bottom: .4rem; }
.page-texte table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  margin: 1rem 0;
}
.page-texte th, .page-texte td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.page-texte th { font-weight: 700; color: var(--texte-2); }

/* Formulaire de signalement */
.form-signalement { display: grid; gap: 1rem; max-width: 640px; }
.champ { display: grid; gap: .3rem; }
.champ label { font-weight: 620; font-size: .94rem; }
.champ input, .champ textarea, .champ select {
  padding: .65rem .8rem;
  border: 1.5px solid var(--bordure);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: .97rem;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-doux);
}
.champ__aide { font-size: .85rem; color: var(--texte-3); }
.bouton {
  justify-self: start;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--t-rapide);
}
.bouton:hover { background: var(--accent-fort); }
:root[data-theme="dark"] .bouton,
:root:not([data-theme="light"]) .bouton { color: #0a1020; }

.liste-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.liste-liens li { padding-bottom: .5rem; border-bottom: 1px solid var(--bordure); }
.liste-liens li:last-child { border-bottom: 0; padding-bottom: 0; }
.liste-liens a { font-size: .95rem; font-weight: 580; text-decoration: none; }
.liste-liens a:hover { text-decoration: underline; }
.liste-liens__meta {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
}
.liste-liens__meta::after { content: " →"; }

/* -------------------------------------------------------------------------
   13. Pagination et fil d'Ariane
   ------------------------------------------------------------------------- */

.fil { margin: 1rem 0 .2rem; font-size: .88rem; }
.fil ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
}
.fil li + li::before {
  content: "›";
  margin-right: .3rem;
  color: var(--texte-3);
}
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: var(--accent); text-decoration: underline; }
.fil [aria-current="page"] { color: var(--texte-3); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordure);
}
.pagination__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .3rem; align-items: center;
}
.pagination a, .pagination__courant {
  display: grid; place-items: center;
  min-width: 40px; height: 40px;
  padding: 0 .7rem;
  border-radius: var(--r-s);
  border: 1px solid var(--bordure);
  background: var(--surface-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
}
.pagination a:hover { background: var(--accent-doux); border-color: var(--accent-bord); }
.pagination__courant { background: var(--accent); color: #fff; border-color: var(--accent); }
:root[data-theme="dark"] .pagination__courant,
:root:not([data-theme="light"]) .pagination__courant { color: #0a1020; }
.pagination__ellipse { color: var(--texte-3); padding: 0 .2rem; }

/* -------------------------------------------------------------------------
   14. Pied de page
   ------------------------------------------------------------------------- */

.pied {
  margin-top: 2rem;
  background: var(--surface);
  border-top: 1px solid var(--bordure);
}
.pied__in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.8rem;
  padding-block: 2.2rem 1.5rem;
}
.pied__bloc--large { grid-column: span 2; }
.pied__marque { font-weight: 800; font-size: 1.1rem; margin-bottom: .2rem; }
.pied__baseline { color: var(--texte-3); font-size: .9rem; }
.pied__titre {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: .6rem;
}
.pied__bloc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pied__bloc a { font-size: .93rem; color: var(--texte-2); text-decoration: none; }
.pied__bloc a:hover { color: var(--accent); text-decoration: underline; }
.pied__source, .pied__avert { font-size: .86rem; color: var(--texte-2); line-height: 1.55; }
.pied__avert { color: var(--texte-3); }
.pied__bas {
  padding-block: 1rem 1.5rem;
  border-top: 1px solid var(--bordure);
  font-size: .84rem;
  color: var(--texte-3);
}
.pied__bas p { margin: 0; }

/* -------------------------------------------------------------------------
   15. Animations
   ------------------------------------------------------------------------- */

/* Apparition au defilement. L'animation ne s'applique jamais derriere du
   texte en cours de lecture : elle porte sur des blocs entiers, une fois. */
@media (prefers-reduced-motion: no-preference) {
  .anim {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms cubic-bezier(.2, 0, .2, 1),
                transform 520ms cubic-bezier(.2, 0, .2, 1);
  }
  .anim.est-visible { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   16. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); }
  .colonnes__laterale { position: static; }
  .pied__bloc--large { grid-column: span 1; }
}

@media (max-width: 899px) {
  .nav__liste { display: none; }
  .nav__toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    background: var(--surface);
    cursor: pointer;
  }
  .nav__burger, .nav__burger::before, .nav__burger::after {
    display: block;
    width: 18px; height: 2px;
    background: var(--texte);
    border-radius: 2px;
    transition: transform var(--t-rapide);
  }
  .nav__burger { position: relative; }
  .nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
  .nav__burger::before { top: -6px; }
  .nav__burger::after  { top: 6px; }

  .nav__liste.est-ouvert {
    display: grid;
    position: absolute;
    top: 100%; left: 0; right: 0;
    padding: .6rem var(--gouttiere) 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
    box-shadow: var(--ombre-3);
    gap: .1rem;
  }
  .nav__liste.est-ouvert a { padding: .7rem .8rem; font-size: 1rem; }
  .entete__in { position: relative; flex-wrap: wrap; }
  .recherche-mini { order: 3; flex: 1 1 100%; margin: .2rem 0 .3rem; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  :root { --gouttiere: 14px; }

  .bloc, .essentiel, .encart { padding: 1.1rem 1.05rem; border-radius: var(--r-m); }
  .pub { padding: .65rem .7rem .8rem; border-radius: var(--r-m); margin-bottom: .5rem; }

  /* L'encart d'urgence est resserré sur mobile pour rester entièrement
     au-dessus de la barre d'action collante : sans cela son bord inférieur
     passe derrière elle. Vérifié sur 375 x 812. */
  .urgence { padding: .7rem .85rem; margin-bottom: .7rem; }
  .urgence__texte { font-size: .93rem; }

  /* Le bouton d'appel apparait sous le bandeau sur mobile. */
  .pub__appel { display: flex; }

  .admin__ligne { grid-template-columns: 1fr; gap: .1rem; }
  .admin dt { font-size: .84rem; }

  .essentiel__grille { grid-template-columns: 1fr; gap: .9rem; }
  .cartes-defil { grid-auto-columns: minmax(200px, 74vw); }
  .grille-cartes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .preuves__liste { grid-template-columns: repeat(2, 1fr); }
  /* Sur mobile aussi, le numéro officiel reste une simple ligne de texte :
     la proéminence va au bloc partenaire. Lisible et contrasté AA. */
  .numero-officiel__tel { font-size: .85rem; }
}

@media (max-width: 420px) {
  .grille-cartes { grid-template-columns: 1fr; }
  .preuves__liste { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   17. Impression
   ------------------------------------------------------------------------- */

@media print {
  .entete, .pied, .pub, .barre-mobile, .nav, .recherche-mini, .theme,
  .cartes-defil, .carte, .saut { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .bloc, .essentiel { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  .numero-officiel { border: 2px solid #000; }
}