/* =========================================================================
   MSP Aiglun-Val de Bléone — 04510 AIGLUN (Alpes-de-Haute-Provence)
   Direction artistique : SIGNALÉTIQUE DE MONTAGNE — MSP de village
   -------------------------------------------------------------------------
   Le contenu réel de ce site est d'abord de l'INFORMATION PRATIQUE : des
   annonces, des horaires de garde, des tarifs, deux médecins. Le design sert
   donc la lisibilité et la hiérarchie de l'info, façon signalétique.
   Tout est ancré sur du réel :
   - Palette   : les couleurs du VRAI logo (montagnes bleu + vert d'eau)
   - Fonts     : Epilogue (display) / Signika (texte, dessinée pour la
                 signalétique et la lisibilité)
   - SIGNATURE : LIGNE DE CRÊTE — la silhouette de montagne du logo, en
                 séparateur de sections, en filet de titre et en fond de hero.
   Divergences volontaires du registre : pas d'ECG (signature de Formerie),
   pas d'onglets/annuaire (Pyramides), pas de courbes de niveau (camping-agatos).
   Anti-footprint : AUCUNE classe CSS custom. On ne cible que des classes
   Bootstrap natives, des ids sémantiques et des pseudo-éléments.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Signika:wght@400;500;600;700&display=swap');

:root {
  /* --- Palette : les couleurs du logo -------------------------------------- */
  --bs-primary: #37454f;        /* ardoise — la roche */
  --bs-primary-rgb: 55, 69, 79;
  --bs-secondary: #2e9bc4;      /* bleu glacier — le bleu du logo */
  --bs-secondary-rgb: 46, 155, 196;
  --bs-success: #5fbfa9;        /* vert d'eau — le vert du logo */
  --bs-danger: #c0392b;

  --bs-body-bg: #f2f0ea;        /* calcaire */
  --bs-body-color: #2f3a42;
  --bs-emphasis-color: #1d262c;
  --bs-border-color: #ddd8cc;

  --bs-body-font-family: 'Signika', system-ui, sans-serif;
  --bs-body-font-size: 1.06rem;
  --bs-body-line-height: 1.66;

  --bs-link-color: #1d7ea3;
  --bs-link-color-rgb: 29, 126, 163;
  --bs-link-hover-color: #37454f;

  /* Teintes de travail */
  --calcaire: #f2f0ea;
  --calcaire-2: #fdfcf9;
  --ardoise: #37454f;
  --ardoise-dark: #1d262c;
  --ardoise-soft: #6b7780;
  --glacier: #2e9bc4;
  --glacier-dark: #1d7ea3;
  --glacier-soft: #e6f3f8;
  --eau: #5fbfa9;
  --alerte: #c0392b;
  --alerte-soft: #fdeeec;

  --lift-1: 0 1px 2px rgba(29, 38, 44, .06), 0 10px 22px -14px rgba(29, 38, 44, .3);
  --lift-2: 0 2px 5px rgba(29, 38, 44, .09), 0 22px 42px -22px rgba(29, 38, 44, .4);

  /* ---------------------------------------------------------------------- */
  /*  SIGNATURE : LA LIGNE DE CRÊTE                                          */
  /*  Silhouette de montagne (le « M » du logo), en SVG répétable.           */
  /* ---------------------------------------------------------------------- */
  --crete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L26 15 L46 27 L78 5 L104 25 L134 11 L162 30 L192 13 L218 28 L240 17 L240 40 Z' fill='%2337454f'/%3E%3C/svg%3E");
  --crete-glacier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 L26 15 L46 27 L78 5 L104 25 L134 11 L162 30 L192 13 L218 28 L240 17 L240 40 Z' fill='%232e9bc4'/%3E%3C/svg%3E");
}

/* ============================ BASE ======================================= */

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  color: var(--bs-body-color);
  background-color: var(--calcaire);
  background-image:
    radial-gradient(900px 500px at 90% -6%, rgba(46, 155, 196, .1), transparent 62%),
    radial-gradient(700px 420px at 2% 6%, rgba(95, 191, 169, .09), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-4, .display-5, .display-6 {
  font-family: 'Epilogue', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ardoise-dark);
}

h1 { line-height: 1.08; }
h2 { line-height: 1.16; }

p { margin-bottom: 1rem; }

a { text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--glacier-dark); }

::selection { background: var(--glacier); color: #fff; }

:focus-visible {
  outline: 3px solid var(--glacier-dark);
  outline-offset: 3px;
  border-radius: 3px;
}

section { position: relative; }

/* ================ SIGNATURE : LA CRÊTE EN SÉPARATEUR ===================== */
/* Bande de montagnes pleine largeur, posée en pied des sections clés.       */

#crete {
  height: 34px;
  background-image: var(--crete);
  background-repeat: repeat-x;
  background-size: 240px 34px;
  background-position: bottom;
}

/* Le filet de crête, sous les intitulés de section : une mini-chaîne. */
#kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--glacier-dark);
  margin-bottom: .8rem;
}

#kicker::before {
  content: '';
  width: 30px;
  height: 12px;
  flex: 0 0 30px;
  background-image: var(--crete-glacier);
  background-size: 30px 12px;
  background-repeat: no-repeat;
}

#sec-title::after {
  content: '';
  display: block;
  width: 96px;
  height: 16px;
  margin-top: .9rem;
  background-image: var(--crete-glacier);
  background-size: 96px 16px;
  background-repeat: no-repeat;
}

/* ============================ BOUTONS ==================================== */

.btn {
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  border-width: 2px;
  padding: .75rem 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  cursor: pointer;
}

.btn-lg { padding: .95rem 2rem; font-size: 1.1rem; }
.btn-sm { padding: .45rem 1rem; font-size: .9rem; }

.btn-primary {
  --bs-btn-bg: var(--glacier-dark);
  --bs-btn-border-color: var(--glacier-dark);
  --bs-btn-hover-bg: #17677f;
  --bs-btn-hover-border-color: #17677f;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  box-shadow: var(--lift-1);
}

.btn-secondary {
  --bs-btn-bg: var(--ardoise);
  --bs-btn-border-color: var(--ardoise);
  --bs-btn-hover-bg: var(--ardoise-dark);
  --bs-btn-hover-border-color: var(--ardoise-dark);
  --bs-btn-color: var(--calcaire-2);
  --bs-btn-hover-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: var(--ardoise);
  --bs-btn-border-color: var(--ardoise);
  --bs-btn-hover-bg: var(--ardoise);
  --bs-btn-hover-border-color: var(--ardoise);
  --bs-btn-hover-color: var(--calcaire-2);
}

.btn-outline-light {
  --bs-btn-border-color: rgba(255, 255, 255, .8);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--ardoise);
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); }

/* ======================= TOPBAR + NAVBAR ================================= */

#topbar {
  background: var(--ardoise);
  color: rgba(253, 252, 249, .86);
  font-size: .85rem;
  border-bottom: 3px solid var(--eau);
}

#topbar a { color: rgba(253, 252, 249, .86); }
#topbar a:hover { color: #fff; }
#topbar i { color: var(--eau); }

#topnav {
  background: rgba(253, 252, 249, .95);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--bs-border-color);
}

.navbar-brand { display: flex; align-items: center; gap: .8rem; }

/* Le vrai logo (montagnes + tracé), sur pastille claire */
#brand-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

#brand-name {
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.05;
  color: var(--ardoise-dark);
  letter-spacing: -.03em;
}

#brand-sub {
  display: block;
  font-family: 'Signika', sans-serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--glacier-dark);
}

#topnav .nav-link {
  font-family: 'Signika', sans-serif;
  font-weight: 600;
  font-size: .98rem;
  color: var(--ardoise);
  position: relative;
  padding: .5rem .85rem;
}

#topnav .nav-link::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .18rem;
  height: 8px;
  background-image: var(--crete-glacier);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

#topnav .nav-link:hover::after { transform: scaleX(1); }
#topnav .nav-link:hover { color: var(--glacier-dark); }

/* ============================== HERO ===================================== */
/* Bandeau ardoise avec une chaîne de montagnes en pied.                     */

#accueil {
  background: linear-gradient(170deg, #46586a, var(--ardoise) 60%, var(--ardoise-dark));
  color: var(--calcaire-2);
  padding: 3.5rem 0 4.5rem;
  overflow: hidden;
}

/* Les crêtes du fond : deux plans, pour la profondeur */
#accueil::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background-image: var(--crete-glacier);
  background-repeat: repeat-x;
  background-size: 420px 90px;
  opacity: .16;
  pointer-events: none;
}

#accueil::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background-image: var(--crete);
  background-repeat: repeat-x;
  background-size: 300px 56px;
  opacity: .5;
  pointer-events: none;
}

#accueil h1, #accueil h2, #accueil h3 { color: var(--calcaire-2); }

#h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  letter-spacing: -.03em;
  margin-bottom: .5rem;
}

#h2-msp { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: .2rem; }

#h3-role {
  font-family: 'Signika', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eau);
  margin-bottom: 0;
}

/* La marque du logo (montagnes + tracé), posée telle quelle sur l'ardoise */
#hero-mark {
  width: min(100%, 260px);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .35));
}

/* La plaque de coordonnées du hero */
#hero-coord {
  background: rgba(253, 252, 249, .1);
  border: 1px solid rgba(253, 252, 249, .22);
  border-left: 5px solid var(--eau);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  position: relative;
}

#hero-coord h2 {
  font-family: 'Signika', sans-serif;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eau);
  margin-bottom: .5rem;
}

#hero-coord p { color: var(--calcaire-2); margin: 0; font-size: 1.1rem; }
#hero-coord a { color: var(--calcaire-2); font-weight: 600; }
#hero-coord a:hover { color: var(--eau); }

/* ========================= ANNONCES / ALERTES ============================ */

#alerte {
  background: var(--alerte-soft);
  border: 1px solid rgba(192, 57, 43, .3);
  border-left: 6px solid var(--alerte);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  color: #8f2b20;
  font-weight: 500;
  text-align: center;
}

#alerte i { color: var(--alerte); }

/* Le grand panneau d'annonce : une plaque de signalétique */
#annonce {
  background: var(--ardoise);
  color: var(--calcaire-2);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--lift-2);
  overflow: hidden;
}

#annonce::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background-image: var(--crete-glacier);
  background-repeat: repeat-x;
  background-size: 200px 30px;
  opacity: .2;
}

#annonce p {
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: .01em;
  color: var(--calcaire-2);
  margin: 0 0 .2rem;
  position: relative;
}

#annonce p:last-child { color: var(--eau); margin-bottom: 0; }

/* ============================ SECTIONS =================================== */

#annonces { padding: 3rem 0 0; }
#msp, #cpts, #garde, #rdv, #pros, #plan { padding: 4rem 0; }

#sec-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.025em; }

/* Présentation de la MSP */
#msp-intro {
  font-size: 1.25rem;
  max-width: 66ch;
  color: var(--ardoise);
}

#msp-intro b { color: var(--ardoise-dark); }

/* Les professions : des étiquettes de signalétique */
#prof-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--calcaire-2);
  border: 1px solid var(--bs-border-color);
  border-bottom: 3px solid var(--eau);
  border-radius: 7px;
  padding: .55rem .95rem;
  font-weight: 600;
  font-size: .98rem;
  color: var(--ardoise);
  transition: transform .18s ease, border-bottom-color .18s ease, box-shadow .18s ease;
}

#prof-chip:hover {
  transform: translateY(-3px);
  border-bottom-color: var(--glacier);
  box-shadow: var(--lift-1);
}

#prof-chip i { color: var(--glacier-dark); }

/* Encart générique (CPTS, garde, téléconsultation) */
#encart {
  background: var(--calcaire-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 1.8rem;
  box-shadow: var(--lift-1);
  height: 100%;
}

#encart h3 { font-size: 1.25rem; margin-bottom: .8rem; }
#encart p { color: var(--ardoise); margin-bottom: .6rem; }

/* Le bloc garde : plaque d'urgence, vert d'eau */
#garde-card {
  background: linear-gradient(160deg, #2f5f57, #24463f);
  color: var(--calcaire-2);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: var(--lift-2);
  overflow: hidden;
  height: 100%;
}

#garde-card h3, #garde-card p { color: var(--calcaire-2); position: relative; }
#garde-card b { color: #a8e6d5; }

/* Le 15, en gros, comme sur un panneau */
#numero-15 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--alerte);
  color: #fff;
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  box-shadow: 0 0 0 6px rgba(192, 57, 43, .25);
  position: relative;
}

/* ======================= PROFESSIONNELS DE SANTÉ ========================= */

#pro-card {
  background: var(--calcaire-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--lift-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}

#pro-card:hover { border-color: var(--glacier); box-shadow: var(--lift-2); }

#pro-nom { font-size: 1.35rem; margin-bottom: .2rem; }
#pro-nom a { color: var(--ardoise-dark); }
#pro-nom a:hover { color: var(--glacier-dark); }

#pro-acti {
  font-weight: 600;
  color: var(--ardoise-soft);
  font-size: .98rem;
}

/* La pastille d'initiale, comme dans la nav d'origine */
#pro-initiale {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glacier-soft);
  border: 2px solid var(--glacier);
  color: var(--glacier-dark);
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
}

#pro-meta {
  font-size: .95rem;
  color: var(--ardoise);
}

#pro-meta dt {
  font-family: 'Signika', sans-serif;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--glacier-dark);
  margin-bottom: .3rem;
}

#pro-meta dd { margin-bottom: 1rem; }

/* Les étiquettes de paiement / langues */
.badge {
  border-radius: 5px;
  font-family: 'Signika', sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
}

#label-info {
  background: var(--calcaire) !important;
  color: var(--ardoise) !important;
  border: 1px solid var(--bs-border-color);
  font-size: .82rem;
}

#conv-chip {
  background: var(--glacier-soft) !important;
  color: var(--glacier-dark) !important;
  border: 1px solid rgba(46, 155, 196, .35);
  font-size: .84rem;
}

/* Le tableau d'honoraires */
#tarif-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
#tarif-table th {
  background: var(--ardoise);
  color: var(--calcaire-2);
  font-family: 'Signika', sans-serif;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .6rem .8rem;
  text-align: left;
}
#tarif-table th:last-child, #tarif-table td:last-child { text-align: right; white-space: nowrap; }
#tarif-table td { border-bottom: 1px solid var(--bs-border-color); padding: .6rem .8rem; }
#tarif-table tbody tr:nth-child(odd) { background: var(--calcaire); }
#tarif-table td:last-child { font-weight: 700; color: var(--ardoise-dark); }

/* ============================= PLAN ====================================== */

#mapa {
  border: 5px solid var(--calcaire-2);
  border-radius: 14px;
  box-shadow: var(--lift-2);
  display: block;
  width: 100%;
}

#pmr {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--calcaire-2);
  border: 1px solid var(--bs-border-color);
  border-left: 5px solid var(--eau);
  border-radius: 8px;
  padding: .7rem 1.1rem;
  font-weight: 600;
  color: var(--ardoise);
}

#pmr i { color: var(--eau); font-size: 1.2rem; }
#pmr abbr { text-decoration: none; border-bottom: 1px dotted var(--ardoise-soft); }

/* ===================== ENTÊTE DE PAGE (#page-head) ======================= */

#page-head {
  padding: 3.2rem 0 2rem;
  border-bottom: 1px solid var(--bs-border-color);
}

#page-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); letter-spacing: -.03em; }
#page-head .breadcrumb { margin-bottom: 1rem; font-size: .95rem; }
#page-head .breadcrumb a { color: var(--glacier-dark); font-weight: 600; }
#page-head .breadcrumb-item + .breadcrumb-item::before { color: var(--ardoise-soft); }

#lead { max-width: 66ch; color: var(--ardoise); font-size: 1.12rem; }

.pagination {
  --bs-pagination-color: var(--ardoise);
  --bs-pagination-active-bg: var(--glacier-dark);
  --bs-pagination-active-border-color: var(--glacier-dark);
  --bs-pagination-border-radius: 6px;
}

.page-link { margin: 0 .15rem; font-weight: 600; }

/* ======================= BLOG (couche ajoutée) =========================== */

#blog { padding: 4rem 0; }

#art-card {
  background: var(--calcaire-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#art-card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--glacier); }

#art-card .card-img-top {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

#art-card .card-title { font-size: 1.12rem; line-height: 1.3; }
#art-card .card-text { font-size: .98rem; color: var(--ardoise-soft); }

#cat-chip {
  background: var(--glacier-soft) !important;
  color: var(--glacier-dark) !important;
  border: 1px solid rgba(46, 155, 196, .3);
  font-size: .76rem;
}

/* ===================== BOUTIQUE (couche ajoutée) ======================== */

#shop-band {
  background: var(--ardoise-dark);
  color: var(--calcaire-2);
  padding: 4rem 0;
  overflow: hidden;
}

#shop-band::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  background-image: var(--crete-glacier);
  background-repeat: repeat-x;
  background-size: 240px 34px;
  transform: scaleY(-1);
  opacity: .22;
}

#shop-band h2, #shop-band h3 { color: var(--calcaire-2); position: relative; }
#shop-band p { color: rgba(253, 252, 249, .78); position: relative; }
#shop-band #kicker { color: var(--eau); position: relative; }

#shop-cat {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: rgba(253, 252, 249, .06);
  border: 1px solid rgba(253, 252, 249, .2);
  border-radius: 8px;
  padding: .75rem 1rem;
  color: var(--calcaire-2);
  font-weight: 600;
  font-size: .96rem;
  position: relative;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

#shop-cat:hover {
  background: var(--glacier-dark);
  border-color: var(--glacier);
  color: #fff;
  transform: translateY(-3px);
}

#shop-cat i { color: var(--eau); font-size: 1.15rem; }
#shop-cat:hover i { color: #fff; }

#prod-card {
  background: var(--calcaire-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#prod-card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--glacier); }
#prod-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 1rem; }

#price { font-family: 'Epilogue', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--ardoise-dark); }
#price-old { text-decoration: line-through; color: var(--ardoise-soft); font-size: .95rem; }

/* ============================ SEO (order-last) =========================== */

#seo {
  background: rgba(253, 252, 249, .6);
  border-top: 1px solid var(--bs-border-color);
  padding: 2.2rem 0;
  font-size: .92rem;
  color: var(--ardoise-soft);
}

#seo h2 { font-size: 1.02rem; color: var(--ardoise); margin-bottom: .6rem; }

/* ============================== FOOTER =================================== */

#site-footer {
  background: var(--ardoise);
  color: rgba(253, 252, 249, .74);
  padding: 3.5rem 0 0;
}

#site-footer h2 {
  color: var(--calcaire-2);
  font-family: 'Signika', sans-serif;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}

#site-footer a { color: rgba(253, 252, 249, .74); }
#site-footer a:hover { color: var(--eau); }
#site-footer i { color: var(--eau); }
#site-footer hr { border-color: rgba(253, 252, 249, .16); opacity: 1; }

#footer-copy { font-size: .86rem; color: rgba(253, 252, 249, .5); }

/* La plaque du logo Région Sud (partenaire institutionnel) */
#footer-inst {
  background: var(--calcaire-2);
  border-radius: 8px;
  padding: .5rem .7rem;
  display: inline-block;
}

#footer-inst img { height: 34px; width: auto; display: block; }

/* ============================== MODALES ================================== */

.modal-content { border-radius: 16px; border: 0; box-shadow: var(--lift-2); background: var(--calcaire-2); }
.modal-header { border-bottom: 1px solid var(--bs-border-color); padding: 1.2rem 1.5rem; }
.modal-title { font-size: 1.3rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--bs-border-color); padding: 1rem 1.5rem; }

/* ============================ ARTICLE ==================================== */

#article-body { font-size: 1.08rem; max-width: 70ch; }
#article-body h2 { font-size: 1.5rem; margin: 2.2rem 0 .9rem; padding-left: .85rem; border-left: 5px solid var(--glacier); }
#article-body h3 { font-size: 1.2rem; margin: 1.6rem 0 .7rem; }
#article-body img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: var(--lift-1); }
#article-body table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
#article-body th {
  background: var(--ardoise);
  color: var(--calcaire-2);
  font-family: 'Signika', sans-serif;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .06em;
}
#article-body th, #article-body td { border: 1px solid var(--bs-border-color); padding: .6rem .85rem; }
#article-body tbody tr:nth-child(odd) { background: var(--calcaire-2); }
#article-body blockquote {
  border-left: 5px solid var(--eau);
  background: var(--calcaire-2);
  padding: 1rem 1.2rem;
  border-radius: 0 12px 12px 0;
  margin: 1.4rem 0;
}

/* ============================ RESPONSIVE ================================= */

@media (max-width: 991.98px) {
  #topnav .nav-link::after { display: none; }
  #accueil { padding: 2.5rem 0 3.5rem; }
}

@media (max-width: 575.98px) {
  #annonces { padding: 2rem 0 0; }
  #msp, #cpts, #garde, #rdv, #pros, #plan { padding: 2.5rem 0; }
  #annonce { padding: 1.4rem 1rem; }
}

/* ============================ A11Y / MOTION ============================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  #art-card:hover, #prod-card:hover, .btn:hover, #shop-cat:hover, #prof-chip:hover { transform: none; }
}