/* ==========================================================================
   RTM — Road Trip Moto
   Design system
   --------------------------------------------------------------------------
   1.  Polices
   2.  Jetons (couleurs, espacements, rayons, ombres, typo)
   3.  Base & accessibilité
   4.  Mise en page
   5.  Utilitaires
   6.  Boutons
   7.  Pastilles & notes
   8.  Formulaires
   9.  Alertes
   10. Cartes
   11. Sections d'accueil
   12. En-tête & pied de page
   13. Page détail
   14. Tableaux & back-office
   15. Salon de discussion & communauté
   16. Animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   Deux familles au maximum. Déposez display.woff2 / texte.woff2 dans
   assets/fonts/ pour remplacer la pile système sans toucher au reste du code.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'RTM Display';
  src: url('../fonts/display.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'RTM Texte';
  src: url('../fonts/texte.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* Vert forêt — l'identité */
  --foret-900: #16281f;
  --foret-800: #1d3527;
  --foret-700: #274633;
  --foret-600: #325a43;
  --foret-500: #3f7053;

  /* Vert sauge — les respirations */
  --sauge-600: #6d8f7c;
  --sauge-500: #89a795;
  --sauge-400: #a7c0b1;
  --sauge-300: #c5d6cb;
  --sauge-200: #dde8e1;
  --sauge-100: #ecf2ee;

  /* Sable & blanc cassé — les fonds */
  --sable-300: #d9c6ab;
  --sable-200: #e9dcc9;
  --sable-100: #f4ebdc;
  --creme:     #faf7f1;
  --surface:   #fffdf8;

  /* Gris pierre — le texte secondaire et les traits */
  --pierre-800: #333731;
  --pierre-700: #4a4f47;
  --pierre-600: #626960;
  --pierre-400: #9aa096;
  --pierre-300: #c3c7bd;
  --pierre-200: #e2e0d6;

  /* Accents */
  --ciel:            #7fa8c9;
  --ciel-clair:      #dceaf3;
  --couchant:        #c2551f;  /* CTA — contraste 5.1:1 sur blanc */
  --couchant-clair:  #e0703c;
  --couchant-pale:   #fbeadf;

  /* Sémantique */
  --encre:      #1c2620;
  --encre-doux: var(--pierre-700);
  --trait:      var(--pierre-200);
  --succes:     #2f6b46;
  --erreur:     #a33224;
  --alerte:     #a06a10;

  /* Espacements — échelle unique de 4 px */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 2.5rem;  --e8: 3.5rem;
  --e9: 5rem;    --e10: 7rem;

  /* Rayons */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* Ombres — douces et teintées de vert, jamais de noir pur */
  --ombre-1: 0 1px 2px rgba(28,38,32,.04), 0 2px 6px rgba(28,38,32,.04);
  --ombre-2: 0 2px 6px rgba(28,38,32,.05), 0 10px 24px rgba(28,38,32,.07);
  --ombre-3: 0 8px 18px rgba(28,38,32,.07), 0 24px 52px rgba(28,38,32,.11);
  --ombre-couchant: 0 8px 24px rgba(194,85,31,.28);

  /* Typographie fluide */
  --police-titre: 'RTM Display', 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;
  --police-texte: 'RTM Texte', 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;

  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-md: 1rem;
  --t-lg: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  --t-h4: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  --t-h3: clamp(1.3rem, 1.15rem + .8vw, 1.65rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --t-h1: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  /* Mouvement */
  --sortie: cubic-bezier(.22, 1, .36, 1);
  --vite: .18s var(--sortie);
  --moyen: .32s var(--sortie);
  --lent: .6s var(--sortie);

  --largeur: 1200px;
  --entete-h: 72px;
}

/* --------------------------------------------------------------------------
   3. Base & accessibilité
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + var(--e4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--foret-600); text-decoration: none; transition: color var(--vite); }
a:hover { color: var(--couchant); }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0 0 var(--e3);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -.035em; }
h2 { font-size: var(--t-h2); letter-spacing: -.03em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

/* Focus visible sur toute cible interactive, au clavier uniquement */
:focus-visible {
  outline: 2.5px solid var(--couchant);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sable-200); color: var(--foret-900); }

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

/* Lien d'évitement — première tabulation de la page */
.saut-contenu {
  position: absolute; top: var(--e2); left: var(--e2); z-index: 999;
  transform: translateY(-200%);
  background: var(--foret-700); color: #fff;
  padding: var(--e3) var(--e5); border-radius: var(--r-sm);
  font-weight: 600; transition: transform var(--vite);
}
.saut-contenu:focus { transform: translateY(0); color: #fff; }

/* --------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */
.conteneur { width: min(var(--largeur), 100% - var(--e5) * 2); margin-inline: auto; }
.conteneur--etroit { width: min(760px, 100% - var(--e5) * 2); }
.conteneur--moyen  { width: min(960px, 100% - var(--e5) * 2); }

.section { padding-block: var(--e8); }
@media (min-width: 768px) { .section { padding-block: var(--e9); } }

.section--sable { background: var(--sable-100); }
.section--sauge { background: var(--sauge-100); }
.section--foret {
  background: var(--foret-800);
  color: var(--sauge-200);
}
.section--foret h1, .section--foret h2, .section--foret h3 { color: #fff; }
.section--foret a { color: var(--sauge-300); }
.section--foret a:hover { color: #fff; }

/* Titre de section : suréclat, titre, chapô */
.entame { margin-bottom: var(--e6); max-width: 62ch; }
.entame--centre { margin-inline: auto; text-align: center; }
.entame__sur {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--police-texte);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--foret-600); margin-bottom: var(--e3);
}
.entame__sur::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--couchant-clair);
}
.entame--centre .entame__sur::after {
  content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--couchant-clair);
}
.entame p { color: var(--encre-doux); font-size: var(--t-lg); margin: 0; }
.section--foret .entame p { color: var(--sauge-300); }
.section--foret .entame__sur { color: var(--sauge-400); }

.entame-ligne {
  display: flex; flex-direction: column; gap: var(--e4);
  margin-bottom: var(--e6);
}
@media (min-width: 768px) {
  .entame-ligne { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .entame-ligne .entame { margin-bottom: 0; }
}

/* Grilles */
.grille { display: grid; gap: var(--e5); }
@media (min-width: 620px)  { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grille { grid-template-columns: repeat(3, 1fr); } }
.grille--2 { display: grid; gap: var(--e5); }
@media (min-width: 768px) { .grille--2 { grid-template-columns: 1fr 1fr; align-items: start; } }
.grille--4 { display: grid; gap: var(--e4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   5. Utilitaires
   -------------------------------------------------------------------------- */
.centre     { text-align: center; }
.doux       { color: var(--encre-doux); }
.petit      { font-size: var(--t-sm); }
.minuscule  { font-size: var(--t-xs); }
.nowrap     { white-space: nowrap; }
.pile       { display: flex; flex-wrap: wrap; gap: var(--e3); }
.pile--sm   { gap: var(--e2); }
.pile--centre { justify-content: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--e5); } .mt-6 { margin-top: var(--e6); } .mt-7 { margin-top: var(--e7); }

.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.ico--lg { width: 1.5em; height: 1.5em; }

/* Bloc de contenu sur fond clair */
.bloc {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  padding: var(--e5);
  box-shadow: var(--ombre-1);
}
@media (min-width: 768px) { .bloc { padding: var(--e6); } }
.bloc + .bloc { margin-top: var(--e5); }
.bloc__texte { white-space: pre-line; color: var(--encre-doux); }

.vide {
  text-align: center; padding: var(--e8) var(--e5);
  background: var(--surface); border: 1px dashed var(--pierre-300);
  border-radius: var(--r-lg); color: var(--encre-doux);
}
.vide h3 { color: var(--encre); }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.btn {
  --btn-fond: transparent;
  --btn-texte: var(--encre);
  --btn-trait: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: .85rem 1.6rem;
  background: var(--btn-fond); color: var(--btn-texte);
  border: 1.5px solid var(--btn-trait); border-radius: var(--r-full);
  font-family: var(--police-texte); font-size: var(--t-sm); font-weight: 650;
  letter-spacing: .01em; line-height: 1.2; text-align: center;
  cursor: pointer; white-space: nowrap;
  transition: transform var(--vite), box-shadow var(--moyen),
              background-color var(--vite), border-color var(--vite), color var(--vite);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-texte); }
.btn:active { transform: translateY(0); }

/* Orange coucher de soleil : réservé à l'action principale */
.btn--cta {
  --btn-fond: var(--couchant); --btn-texte: #fff; --btn-trait: var(--couchant);
  box-shadow: 0 2px 8px rgba(194,85,31,.2);
}
.btn--cta:hover {
  --btn-fond: var(--couchant-clair); --btn-trait: var(--couchant-clair);
  box-shadow: var(--ombre-couchant);
}

.btn--foret { --btn-fond: var(--foret-700); --btn-texte: #fff; --btn-trait: var(--foret-700); }
.btn--foret:hover { --btn-fond: var(--foret-600); --btn-trait: var(--foret-600); box-shadow: var(--ombre-2); }

.btn--clair { --btn-fond: var(--surface); --btn-texte: var(--foret-700); --btn-trait: var(--trait); box-shadow: var(--ombre-1); }
.btn--clair:hover { --btn-trait: var(--sauge-500); box-shadow: var(--ombre-2); }

.btn--contour { --btn-texte: var(--foret-700); --btn-trait: var(--sauge-500); }
.btn--contour:hover { --btn-fond: var(--sauge-100); }

.btn--nu { --btn-texte: var(--encre-doux); padding-inline: var(--e3); }
.btn--nu:hover { --btn-texte: var(--foret-700); --btn-fond: var(--sauge-100); }

.btn--danger { --btn-texte: var(--erreur); --btn-trait: rgba(163,50,36,.3); }
.btn--danger:hover { --btn-fond: rgba(163,50,36,.08); --btn-trait: var(--erreur); }

.btn--sm { padding: .5rem 1rem; font-size: var(--t-xs); }
.btn--lg { padding: 1.05rem 2.2rem; font-size: var(--t-md); }
.btn--plein { width: 100%; }
.btn[disabled], .btn--inactif { opacity: .5; pointer-events: none; }

/* Sur fond sombre (section forêt et hero) : texte clair, contour clair */
.section--foret .btn--clair,
.hero .btn--clair { --btn-fond: #fff; --btn-texte: var(--foret-800); --btn-trait: #fff; }
.section--foret .btn--contour,
.hero .btn--contour { --btn-texte: #fff; --btn-trait: rgba(255,255,255,.45); }
.section--foret .btn--contour:hover,
.hero .btn--contour:hover { --btn-fond: rgba(255,255,255,.14); --btn-texte: #fff; }

/* Lien fléché */
.lien-fleche {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-weight: 650; font-size: var(--t-sm);
}
.lien-fleche .ico { transition: transform var(--moyen); }
.lien-fleche:hover .ico { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Pastilles & notes
   -------------------------------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .3em .8em; border-radius: var(--r-full);
  background: var(--sauge-100); color: var(--foret-700);
  border: 1px solid var(--sauge-200);
  font-size: var(--t-xs); font-weight: 650; line-height: 1.45;
  white-space: nowrap;
}
.pastille .ico { width: 1em; height: 1em; }

.pastille--facile    { background: var(--sauge-100); color: var(--succes);  border-color: var(--sauge-300); }
.pastille--moyen     { background: var(--ciel-clair); color: #2b5878; border-color: #bcd7e6; }
.pastille--difficile { background: var(--sable-100); color: #8a5a12; border-color: var(--sable-300); }
.pastille--expert    { background: var(--couchant-pale); color: #97401a; border-color: #f0cdb6; }

.pastille--confirme, .pastille--publie   { background: var(--sauge-100); color: var(--succes); border-color: var(--sauge-300); }
.pastille--en_attente                    { background: var(--sable-100); color: var(--alerte); border-color: var(--sable-300); }
.pastille--refuse, .pastille--archive    { background: #f7eae8; color: var(--erreur); border-color: #eccfca; }
.pastille--propose, .pastille--admin     { background: var(--ciel-clair); color: #2b5878; border-color: #bcd7e6; }
.pastille--brouillon, .pastille--membre  { background: var(--sable-100); color: var(--pierre-700); border-color: var(--sable-300); }

.pastille--photos     { background: var(--ciel-clair);    color: #2b5878; border-color: #bcd7e6; }
.pastille--equipement { background: var(--sable-100);     color: #8a5a12; border-color: var(--sable-300); }
.pastille--entraide   { background: var(--couchant-pale); color: #97401a; border-color: #f0cdb6; }
.pastille--conseils   { background: var(--sauge-100);     color: var(--succes); border-color: var(--sauge-300); }
.pastille--recit      { background: #efe9f4; color: #5b4478; border-color: #ded3ea; }

/* Pastille posée sur une photo */
.pastille--verre {
  background: rgba(255,253,248,.82);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-color: rgba(255,255,255,.6);
  color: var(--foret-800);
  box-shadow: 0 2px 10px rgba(28,38,32,.12);
}

/* Note en étoiles */
.note { display: inline-flex; align-items: center; gap: .3em; font-size: var(--t-sm); font-weight: 650; }
.note__etoiles { display: inline-flex; color: var(--couchant-clair); }
.note__etoiles .ico { width: .95em; height: .95em; }
.note__etoiles .ico--pleine { fill: currentColor; }
.note__etoiles .ico--vide { color: var(--pierre-300); }
.note__nb { color: var(--encre-doux); font-weight: 400; font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */
.champ { margin-bottom: var(--e4); }
.champ label, .etiquette {
  display: block; margin-bottom: var(--e2);
  font-size: var(--t-sm); font-weight: 650; color: var(--foret-800);
}
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .8rem 1rem;
  font-family: inherit; font-size: var(--t-md); color: var(--encre);
  background: var(--surface);
  border: 1.5px solid var(--trait); border-radius: var(--r-sm);
  transition: border-color var(--vite), box-shadow var(--vite);
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--sauge-400); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--foret-500);
  box-shadow: 0 0 0 4px rgba(63,112,83,.13);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--pierre-400); }
.champ input[type=file] { padding: .6rem; cursor: pointer; }
.champ__aide { font-size: var(--t-xs); color: var(--encre-doux); margin: var(--e2) 0 0; }

.duo, .trio { display: grid; gap: 0 var(--e4); }
@media (min-width: 640px) { .duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .trio { grid-template-columns: repeat(3, 1fr); } }

.case {
  display: flex; gap: var(--e3); align-items: flex-start;
  cursor: pointer; font-size: var(--t-sm); color: var(--encre-doux);
}
.case input { width: auto; margin-top: .25rem; accent-color: var(--foret-600); }

.form-bas {
  margin-top: var(--e5); padding-top: var(--e5);
  border-top: 1px solid var(--trait);
  display: flex; gap: var(--e3); flex-wrap: wrap;
}
.form-lien { text-align: center; margin-top: var(--e5); color: var(--encre-doux); font-size: var(--t-sm); }

/* Barre de recherche mise en avant */
.recherche {
  display: grid; gap: var(--e3);
  background: rgba(255,253,248,.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  padding: var(--e4);
  box-shadow: var(--ombre-3);
}
.recherche .champ { margin: 0; }
.recherche label { color: var(--pierre-700); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; }
.recherche input, .recherche select { border-color: transparent; background: var(--creme); }
@media (min-width: 900px) {
  .recherche { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; border-radius: var(--r-full); padding: var(--e3) var(--e3) var(--e3) var(--e5); }
  .recherche .btn { height: 52px; }
}

/* Filtres de liste */
.filtres {
  display: grid; gap: var(--e3);
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); padding: var(--e4);
  box-shadow: var(--ombre-1); margin-bottom: var(--e6);
}
.filtres .champ { margin: 0; }
.filtres__actions { display: flex; gap: var(--e2); align-items: end; }
@media (min-width: 760px) {
  .filtres { grid-template-columns: 2fr repeat(3, 1fr) auto; align-items: end; }
}

/* --------------------------------------------------------------------------
   9. Alertes
   -------------------------------------------------------------------------- */
.flash-zone { width: min(var(--largeur), 100% - var(--e5) * 2); margin: var(--e5) auto 0; }
.alerte {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e4) var(--e5); margin-bottom: var(--e3);
  border-radius: var(--r-md); border: 1px solid;
  font-size: var(--t-sm);
}
.alerte .ico { margin-top: .15em; }
.alerte--succes { background: var(--sauge-100); border-color: var(--sauge-300); color: #235034; }
.alerte--erreur { background: #f9edeb; border-color: #eccfca; color: #7d2619; }
.alerte--info   { background: var(--ciel-clair); border-color: #bcd7e6; color: #24506e; }

/* --------------------------------------------------------------------------
   10. Cartes
   -------------------------------------------------------------------------- */
.carte {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-1);
  transition: transform var(--moyen), box-shadow var(--moyen), border-color var(--moyen);
}
.carte:hover, .carte:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--ombre-3);
  border-color: var(--sauge-300);
}

.carte__media {
  position: relative; display: block;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--sauge-200);
}
.carte__media > svg, .carte__media > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--sortie);
}
.carte:hover .carte__media > svg, .carte:hover .carte__media > img { transform: scale(1.06); }

/* Voile bas pour que les pastilles restent lisibles sur toute photo */
.carte__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(22,40,31,.45), transparent);
  pointer-events: none;
}
.carte__haut, .carte__bas {
  position: absolute; left: var(--e3); right: var(--e3); z-index: 2;
  display: flex; gap: var(--e2); flex-wrap: wrap;
}
.carte__haut { top: var(--e3); }
.carte__bas  { bottom: var(--e3); align-items: center; }
.carte__region {
  display: inline-flex; align-items: center; gap: .35em;
  color: #fff; font-size: var(--t-xs); font-weight: 650;
  text-shadow: 0 1px 4px rgba(22,40,31,.5);
}

.carte__corps { display: flex; flex-direction: column; flex: 1; padding: var(--e5); }
.carte__titre { font-size: var(--t-h4); margin-bottom: var(--e2); }
.carte__titre a { color: var(--encre); }
.carte:hover .carte__titre a { color: var(--foret-600); }
/* Toute la carte devient cliquable, sans piéger le clavier.
   Seuls les éléments réellement interactifs repassent au-dessus du calque. */
.carte { position: relative; }
.carte__titre a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.carte__pied, .carte .repli, .carte form, .carte__haut, .carte__bas {
  position: relative; z-index: 2;
}
.carte__haut, .carte__bas { position: absolute; }

.carte__resume { color: var(--encre-doux); font-size: var(--t-sm); margin-bottom: var(--e4); flex: 1; }

.carte__infos {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  padding-top: var(--e4); border-top: 1px solid var(--trait);
  font-size: var(--t-sm); color: var(--encre-doux);
}
.carte__info { display: inline-flex; align-items: center; gap: .4em; }
.carte__info .ico { color: var(--sauge-600); }
.carte__info b { color: var(--encre); font-weight: 650; }

.carte__pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  margin-top: var(--e4);
}

/* Carte compacte, pour les listes secondaires */
.carte--ligne { flex-direction: row; align-items: stretch; }
.carte--ligne .carte__media { aspect-ratio: 1; width: 120px; flex: 0 0 120px; }
.carte--ligne .carte__corps { padding: var(--e4); }

/* --------------------------------------------------------------------------
   11. Sections d'accueil
   -------------------------------------------------------------------------- */

/* Hero immersive plein écran */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex; align-items: flex-end;
  padding-block: var(--e9) var(--e8);
  overflow: hidden;
  color: #fff;
}
.hero__fond { position: absolute; inset: -8% 0 0 0; z-index: 0; }
.hero__fond > svg, .hero__fond > img { width: 100%; height: 112%; object-fit: cover; }
.hero__voile {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(22,40,31,.88) 8%, rgba(22,40,31,.45) 45%, rgba(22,40,31,.15) 75%),
    linear-gradient(to right, rgba(22,40,31,.5), transparent 60%);
}
/* Ne jamais redéfinir la largeur ici : .conteneur porte le centrage */
.hero__contenu { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: var(--e4); }
.hero h1 em { font-style: normal; color: var(--sable-200); }
.hero__texte {
  font-size: var(--t-lg); color: rgba(255,255,255,.9);
  max-width: 52ch; margin-bottom: var(--e6);
}
.hero__sur {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: .4rem 1rem; margin-bottom: var(--e5);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
}
.hero__recherche { margin-top: var(--e7); }
.hero .recherche label { color: var(--pierre-700); }

/* Bandeau de confiance */
.reperes {
  display: flex; flex-wrap: wrap; gap: var(--e4) var(--e7);
  justify-content: center; align-items: center;
  padding-block: var(--e5);
  color: var(--encre-doux); font-size: var(--t-sm);
}
.repere { display: inline-flex; align-items: center; gap: var(--e2); }
.repere .ico { color: var(--sauge-600); }

/* Catégories illustrées */
.categories { display: grid; gap: var(--e4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .categories { grid-template-columns: repeat(4, 1fr); } }
.categorie {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  transition: transform var(--moyen), box-shadow var(--moyen);
}
.categorie:hover { transform: translateY(-6px); box-shadow: var(--ombre-3); }
.categorie > svg, .categorie > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--sortie);
}
.categorie:hover > svg, .categorie:hover > img { transform: scale(1.08); }
.categorie::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,40,31,.85) 5%, rgba(22,40,31,.25) 55%, transparent);
}
.categorie__texte {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--e4); color: #fff;
}
.categorie__texte h3 { color: #fff; font-size: var(--t-h4); margin-bottom: .15em; }
.categorie__texte p { font-size: var(--t-xs); color: rgba(255,255,255,.82); margin: 0; }

/* Destinations populaires */
.destinations { display: grid; gap: var(--e4); }
@media (min-width: 700px) {
  .destinations { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .destination--large { grid-column: span 2; }
  .destination--haute { grid-row: span 2; }
}
@media (min-width: 1000px) { .destinations { grid-template-columns: repeat(4, 1fr); } }
.destination {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  min-height: 200px; display: flex; align-items: flex-end;
  box-shadow: var(--ombre-1);
  transition: transform var(--moyen), box-shadow var(--moyen);
}
.destination:hover { transform: translateY(-5px); box-shadow: var(--ombre-3); }
.destination > svg, .destination > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--sortie);
}
.destination:hover > svg, .destination:hover > img { transform: scale(1.07); }
.destination::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,40,31,.8), rgba(22,40,31,.1) 60%, transparent);
}
.destination__texte { position: relative; z-index: 2; padding: var(--e4); color: #fff; }
.destination__texte h3 { color: #fff; font-size: var(--t-h4); margin-bottom: .1em; }
.destination__texte p { margin: 0; font-size: var(--t-xs); color: rgba(255,255,255,.85); }

/* Statistiques */
.stat { text-align: center; padding: var(--e4); }
.stat__valeur {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--foret-600);
}
.section--foret .stat__valeur { color: var(--sable-200); }
.stat__label {
  margin-top: var(--e2); font-size: var(--t-sm);
  color: var(--encre-doux); letter-spacing: .04em;
}
.section--foret .stat__label { color: var(--sauge-300); }

/* Témoignages */
.temoignage {
  display: flex; flex-direction: column; gap: var(--e4);
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); padding: var(--e5);
  box-shadow: var(--ombre-1);
}
.temoignage__texte { font-size: var(--t-lg); line-height: 1.55; color: var(--encre); margin: 0; }
.temoignage__texte::before { content: '“'; color: var(--sauge-400); font-size: 2.4em; line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.temoignage__auteur { display: flex; align-items: center; gap: var(--e3); margin-top: auto; }

/* FAQ */
.faq { display: grid; gap: var(--e3); }
.faq__item {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--vite), box-shadow var(--vite);
}
.faq__item[open] { border-color: var(--sauge-400); box-shadow: var(--ombre-1); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e4) var(--e5); cursor: pointer;
  font-family: var(--police-titre); font-weight: 650; font-size: var(--t-lg);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico { color: var(--sauge-600); transition: transform var(--moyen); }
.faq__item[open] summary .ico { transform: rotate(180deg); }
.faq__reponse { padding: 0 var(--e5) var(--e5); color: var(--encre-doux); }

/* Newsletter */
.newsletter {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--e8) var(--e5);
  background: var(--foret-800); color: var(--sauge-200);
  text-align: center;
}
.newsletter > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.newsletter__contenu { position: relative; z-index: 2; max-width: 620px; margin-inline: auto; }
.newsletter h2 { color: #fff; }
.newsletter p { color: var(--sauge-300); }
.newsletter__form { display: grid; gap: var(--e3); margin-top: var(--e5); }
.newsletter__form input {
  width: 100%; padding: .9rem 1.3rem;
  background: rgba(255,255,255,.95); color: var(--encre);
  border: 1.5px solid transparent; border-radius: var(--r-full);
  font-family: inherit; font-size: var(--t-md);
}
.newsletter__form input:focus { outline: none; border-color: var(--couchant-clair); }
@media (min-width: 600px) {
  .newsletter__form { grid-template-columns: 1fr auto; }
}

/* Étapes numérotées */
.etapes { display: grid; gap: var(--e5); counter-reset: etape; }
@media (min-width: 800px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
/* La pastille fait 42px : on réserve au moins cette hauteur + un espace avant le titre */
.etape { position: relative; padding-top: calc(42px + var(--e4)); }
.etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--couchant-pale); color: var(--couchant);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem;
  border: 1px solid #f0cdb6;
}
.etape h3 { font-size: var(--t-h4); margin-top: 0; }
.etape p { color: var(--encre-doux); font-size: var(--t-sm); margin: 0; }

/* Badges virtuels */
.badges {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.badge {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e2); padding: var(--e5) var(--e4);
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); box-shadow: var(--ombre-1);
  transition: transform var(--moyen), box-shadow var(--moyen), border-color var(--moyen);
}
.badge--obtenu { border-color: var(--sauge-300); }
.badge--obtenu:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }

.badge__medaille {
  width: 60px; height: 60px; display: grid; place-items: center;
  border-radius: var(--r-full); margin-bottom: var(--e1);
}
.badge__medaille .ico { width: 30px; height: 30px; }
.badge--obtenu .badge__medaille {
  background: linear-gradient(150deg, var(--couchant-clair), var(--couchant));
  color: #fff; box-shadow: 0 6px 16px rgba(194,85,31,.28);
}
.badge--verrouille { opacity: .85; }
.badge--verrouille .badge__medaille {
  background: var(--sauge-100); color: var(--pierre-400);
  border: 1px dashed var(--pierre-300);
}
.badge--verrouille .badge__nom { color: var(--encre-doux); }

.badge__nom { font-family: var(--police-titre); font-weight: 700; font-size: .98rem; line-height: 1.15; }
.badge__desc { font-size: var(--t-xs); color: var(--encre-doux); line-height: 1.35; }

.badge__acquis {
  display: inline-flex; align-items: center; gap: .3em; margin-top: var(--e1);
  font-size: var(--t-xs); font-weight: 650; color: var(--succes);
}
.badge__acquis .ico { width: .9em; height: .9em; }

.badge__jauge {
  width: 100%; height: 6px; margin-top: var(--e2);
  background: var(--sauge-200); border-radius: var(--r-full); overflow: hidden;
}
.badge__jauge span { display: block; height: 100%; background: var(--sauge-500); border-radius: var(--r-full); }
.badge__prog { font-size: var(--t-xs); color: var(--pierre-600); font-variant-numeric: tabular-nums; }

/* Feuille de route : les étapes d'un itinéraire */
.etapes-fil { list-style: none; margin: 0; padding: 0; }
.etape-fil {
  position: relative; display: flex; gap: var(--e4);
  padding-bottom: var(--e6);
}
.etape-fil:last-child { padding-bottom: 0; }
/* Le trait qui relie les étapes entre elles */
.etape-fil::before {
  content: ''; position: absolute; top: 42px; bottom: 0; left: 20px;
  width: 2px; background: linear-gradient(var(--sauge-300), var(--sauge-200));
}
.etape-fil:last-child::before { display: none; }

.etape-fil__puce {
  position: relative; z-index: 1;
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--foret-700); color: #fff;
  font-family: var(--police-titre); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 5px var(--creme);
}
.section--sable .etape-fil__puce { box-shadow: 0 0 0 5px var(--sable-100); }

.etape-fil__corps {
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); padding: var(--e5);
  box-shadow: var(--ombre-1);
}
.etape-fil__corps h2, .etape-fil__corps h3 { margin-bottom: var(--e2); }

/* Atouts */
.atouts { display: grid; gap: var(--e4); }
@media (min-width: 620px) { .atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .atouts { grid-template-columns: repeat(4, 1fr); } }
.atout {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); padding: var(--e5);
  box-shadow: var(--ombre-1);
  transition: transform var(--moyen), box-shadow var(--moyen);
}
.atout:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.atout__ico {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--e4);
  background: var(--sauge-100); color: var(--foret-600);
  border: 1px solid var(--sauge-200);
}
.atout__ico .ico { width: 22px; height: 22px; }
.atout h3 { font-size: var(--t-h4); }
.atout p { color: var(--encre-doux); font-size: var(--t-sm); margin: 0; }

/* Liste à coches */
.checklist { list-style: none; margin: var(--e4) 0 0; padding: 0; }
.checklist li {
  position: relative; padding: var(--e3) 0 var(--e3) var(--e6);
  border-bottom: 1px solid var(--trait);
  color: var(--encre-doux); font-size: var(--t-sm);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .95rem;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--sauge-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f7053' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 1px solid var(--sauge-300);
}
.checklist--cle li::before { background-color: var(--couchant-pale); border-color: #f0cdb6; }
@media (min-width: 800px) { .checklist--colonnes { columns: 2; column-gap: var(--e7); } .checklist--colonnes li { break-inside: avoid; } }

/* --------------------------------------------------------------------------
   12. En-tête & pied de page
   -------------------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,241,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--moyen), background-color var(--moyen);
}
.entete--defile { border-bottom-color: var(--trait); box-shadow: var(--ombre-1); }

.entete__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  height: var(--entete-h);
}

.logo { display: flex; align-items: center; gap: var(--e3); }
.logo img {
  width: 42px; height: 42px; border-radius: var(--r-full);
  background: var(--surface); padding: 2px; object-fit: cover;
  box-shadow: var(--ombre-1);
}
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__txt strong {
  font-family: var(--police-titre); font-size: 1.3rem; font-weight: 800;
  letter-spacing: .06em; color: var(--foret-800);
}
.logo__txt small {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pierre-600); margin-top: 3px;
}

.burger {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: transparent; border: 1.5px solid var(--trait);
  color: var(--foret-800); cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }

.nav {
  position: fixed; inset: var(--entete-h) 0 auto 0;
  display: none; flex-direction: column; gap: var(--e1);
  padding: var(--e4); background: var(--surface);
  border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-2);
  max-height: calc(100vh - var(--entete-h)); overflow-y: auto;
}
.nav[data-ouvert="true"] { display: flex; }
.nav__lien {
  padding: var(--e3) var(--e4); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--pierre-700);
}
.nav__lien:hover { background: var(--sauge-100); color: var(--foret-700); }
.nav__lien[aria-current="page"] { color: var(--foret-700); background: var(--sauge-100); }
.nav__sep { height: 1px; background: var(--trait); margin: var(--e2) 0; }
.nav .btn { margin-top: var(--e2); }

@media (min-width: 1000px) {
  .nav {
    position: static; display: flex; flex-direction: row; align-items: center;
    gap: var(--e1); padding: 0; background: none; border: 0; box-shadow: none;
    max-height: none; overflow: visible;
  }
  .nav__lien { padding: var(--e2) var(--e4); }
  .nav__lien[aria-current="page"] { background: transparent; }
  .nav__lien[aria-current="page"]::after {
    content: ''; display: block; height: 2px; border-radius: 2px;
    background: var(--couchant-clair); margin-top: 2px;
  }
  .nav__sep { width: 1px; height: 22px; margin: 0 var(--e2); }
  .nav .btn { margin: 0 0 0 var(--e2); }
}

/* Pied de page */
.pied { background: var(--foret-900); color: var(--sauge-300); margin-top: var(--e9); }
.pied a { color: var(--sauge-300); }
.pied a:hover { color: #fff; }
.pied__haut { display: grid; gap: var(--e6); padding-block: var(--e8); }
@media (min-width: 760px)  { .pied__haut { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 1000px) { .pied__haut { grid-template-columns: 2.2fr 1fr 1fr 1fr; } }
.pied__marque img {
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--surface); padding: 3px; margin-bottom: var(--e4);
}
.pied__marque p { color: var(--sauge-400); font-size: var(--t-sm); max-width: 34ch; }
.pied__col h3 {
  color: #fff; font-family: var(--police-texte);
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--e4);
}
.pied__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pied__col li { font-size: var(--t-sm); }
.pied__bas {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--e4);
  display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: space-between;
  font-size: var(--t-xs); color: var(--sauge-400);
}

/* Bandeau d'information cookies */
.bandeau-cookies {
  position: fixed; z-index: 200;
  left: var(--e4); right: var(--e4); bottom: var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4);
  max-width: 720px; margin-inline: auto;
  padding: var(--e4) var(--e5);
  background: rgba(255,253,248,.96);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--trait); border-radius: var(--r-lg);
  box-shadow: var(--ombre-3);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--moyen), transform var(--moyen);
}
.bandeau-cookies--visible { opacity: 1; transform: none; }
.bandeau-cookies p { margin: 0; flex: 1 1 280px; font-size: var(--t-sm); color: var(--encre-doux); }
.bandeau-cookies .btn { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   13. Page détail
   -------------------------------------------------------------------------- */
.fil-ariane {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  font-size: var(--t-sm); color: var(--encre-doux); margin-bottom: var(--e4);
}
.fil-ariane a { color: inherit; }
.fil-ariane a:hover { color: var(--couchant); }

.hero-detail {
  position: relative; min-height: 460px;
  display: flex; align-items: flex-end;
  padding-block: var(--e9) var(--e7);
  overflow: hidden; color: #fff;
}
.hero-detail__fond { position: absolute; inset: 0; z-index: 0; }
.hero-detail__fond > svg, .hero-detail__fond > img { width: 100%; height: 100%; object-fit: cover; }
.hero-detail__voile {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(22,40,31,.92) 5%, rgba(22,40,31,.5) 50%, rgba(22,40,31,.2));
}
.hero-detail__contenu { position: relative; z-index: 2; }
.hero-detail h1 { color: #fff; }
.hero-detail .fil-ariane, .hero-detail .fil-ariane a { color: rgba(255,255,255,.75); }
.hero-detail .fil-ariane a:hover { color: #fff; }
.hero-detail__chapo { color: rgba(255,255,255,.9); font-size: var(--t-lg); max-width: 60ch; }

.detail-grille { display: grid; gap: var(--e6); align-items: start; }
@media (min-width: 980px) { .detail-grille { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr); gap: var(--e7); } }

.encart { position: sticky; top: calc(var(--entete-h) + var(--e4)); }

.fiche { list-style: none; margin: 0; padding: 0; }
.fiche li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e4);
  padding: var(--e3) 0; border-bottom: 1px solid var(--trait); font-size: var(--t-sm);
}
.fiche li:last-child { border-bottom: 0; }
.fiche span { color: var(--encre-doux); display: inline-flex; align-items: center; gap: .5em; }
.fiche span .ico { color: var(--sauge-600); }
.fiche b { font-weight: 650; text-align: right; }

.gratuit {
  font-family: var(--police-titre); font-size: 2rem; font-weight: 700;
  color: var(--foret-700); line-height: 1; letter-spacing: -.03em;
}
.gratuit small { display: block; font-family: var(--police-texte); font-size: var(--t-xs); font-weight: 400; color: var(--encre-doux); margin-top: var(--e2); letter-spacing: 0; }

.jauge { height: 8px; border-radius: var(--r-full); background: var(--sauge-200); overflow: hidden; margin: var(--e4) 0 var(--e2); }
.jauge__barre { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--foret-600), var(--sauge-500)); transition: width var(--lent); }

.avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--sauge-100); color: var(--foret-700);
  border: 1px solid var(--sauge-300);
  font-weight: 700; font-size: var(--t-sm);
}
.avatar--sm { width: 32px; height: 32px; flex-basis: 32px; font-size: var(--t-xs); }

.liste-personnes { list-style: none; margin: 0; padding: 0; }
.liste-personnes li {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--trait);
}
.liste-personnes li:last-child { border-bottom: 0; }

/* Onglets */
.onglets {
  display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e5);
  padding-bottom: var(--e2);
}
.onglets a {
  padding: .5rem 1.1rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--trait);
  font-size: var(--t-sm); font-weight: 600; color: var(--pierre-700);
  display: inline-flex; align-items: center; gap: .4em;
  transition: all var(--vite);
}
.onglets a:hover { border-color: var(--sauge-400); color: var(--foret-700); }
.onglets a.actif { background: var(--foret-700); border-color: var(--foret-700); color: #fff; }

/* Pages connexion / inscription : le formulaire d'un côté, la route de l'autre */
.auth { display: grid; align-items: stretch; }
@media (min-width: 980px) { .auth { grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--entete-h)); } }

.auth__visuel { position: relative; display: none; overflow: hidden; }
@media (min-width: 980px) { .auth__visuel { display: block; } }
.auth__visuel > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth__visuel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,40,31,.9), rgba(22,40,31,.15) 65%);
}
.auth__citation { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--e8) var(--e7); color: #fff; }
.auth__citation blockquote { font-family: var(--police-titre); font-size: var(--t-h3); line-height: 1.25; margin: 0 0 var(--e4); }
.auth__citation cite { font-style: normal; font-size: var(--t-sm); color: rgba(255,255,255,.72); }

.auth__form { display: grid; place-items: center; padding: var(--e8) var(--e5); }
.auth__boite { width: 100%; max-width: 520px; }
.auth__entete { margin-bottom: var(--e6); }
.auth__entete img { width: 60px; height: 60px; border-radius: var(--r-full); background: var(--surface); padding: 3px; margin-bottom: var(--e4); box-shadow: var(--ombre-1); }

.demo {
  margin-top: var(--e5); padding: var(--e4);
  background: var(--sable-100); border: 1px dashed var(--sable-300);
  border-radius: var(--r-md); font-size: var(--t-xs); color: var(--pierre-700); text-align: center;
}
.demo code { font-size: var(--t-sm); color: var(--foret-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Tableaux & back-office
   -------------------------------------------------------------------------- */
.tableau-wrap {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); overflow-x: auto; box-shadow: var(--ombre-1);
}
table.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 620px; }
table.tableau th {
  text-align: left; padding: var(--e3) var(--e4);
  background: var(--sauge-100); color: var(--foret-800);
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--trait); white-space: nowrap;
}
table.tableau td { padding: var(--e4); border-bottom: 1px solid var(--trait); vertical-align: middle; }
table.tableau tr:last-child td { border-bottom: 0; }
table.tableau tbody tr:hover { background: var(--sauge-100); }
table.tableau .actions { display: flex; gap: var(--e2); justify-content: flex-end; flex-wrap: wrap; }
.td-titre { font-weight: 650; }
.td-sous { font-size: var(--t-xs); color: var(--encre-doux); }

/* Indicateurs */
.kpis { display: grid; gap: var(--e4); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--e6); }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); padding: var(--e5); box-shadow: var(--ombre-1);
}
.kpi__label { font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--encre-doux); }
.kpi__valeur {
  font-family: var(--police-titre); font-size: 2rem; font-weight: 700;
  line-height: 1.1; margin-top: var(--e2); letter-spacing: -.03em; color: var(--foret-700);
}
.kpi__note { font-size: var(--t-xs); color: var(--encre-doux); margin-top: var(--e1); }
.kpi--cta .kpi__valeur { color: var(--couchant); }
.kpi--ciel .kpi__valeur { color: #2b5878; }

/* Champs posés directement dans une barre d'outils (recherche, changement de statut) */
.champ-inline, .select-inline {
  padding: .5rem 1rem; font-family: inherit; font-size: var(--t-sm); color: var(--encre);
  background: var(--surface); border: 1.5px solid var(--trait); border-radius: var(--r-full);
}
.select-inline { border-radius: var(--r-sm); padding: .4rem .7rem; }
.champ-inline:focus, .select-inline:focus {
  outline: none; border-color: var(--foret-500); box-shadow: 0 0 0 4px rgba(63,112,83,.13);
}

/* Back-office */
.admin { display: grid; min-height: 100vh; }
@media (min-width: 1000px) { .admin { grid-template-columns: 260px 1fr; } }

.aside {
  background: var(--foret-800); color: var(--sauge-300);
  padding: var(--e4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2);
}
@media (min-width: 1000px) {
  .aside { flex-direction: column; align-items: stretch; padding: var(--e5) var(--e4); }
}
.aside__logo { display: flex; align-items: center; gap: var(--e3); padding-right: var(--e4); }
.aside__logo img { width: 38px; height: 38px; border-radius: var(--r-full); background: var(--surface); padding: 2px; }
.aside__logo strong { display: block; font-family: var(--police-titre); font-size: 1.1rem; font-weight: 800; letter-spacing: .06em; color: #fff; }
.aside__logo small { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sauge-400); }
.aside__titre {
  display: none; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sauge-500); padding: var(--e4) var(--e3) var(--e2);
}
@media (min-width: 1000px) { .aside__titre { display: block; } }
.lien-nav {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3); border-radius: var(--r-sm);
  color: var(--sauge-300); font-size: var(--t-sm); font-weight: 600;
}
.lien-nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.lien-nav.actif { background: rgba(255,255,255,.13); color: #fff; }
.lien-nav .ico { color: var(--sauge-400); }
.lien-nav.actif .ico { color: var(--couchant-clair); }
.aside__bas { margin-left: auto; display: flex; gap: var(--e2); }
@media (min-width: 1000px) {
  .aside__bas { margin: auto 0 0; flex-direction: column; padding-top: var(--e4); border-top: 1px solid rgba(255,255,255,.1); }
}

.admin__corps { padding: var(--e5) var(--e5) var(--e9); max-width: 1500px; }
@media (min-width: 768px) { .admin__corps { padding: var(--e6) var(--e7) var(--e9); } }
.admin__corps .flash-zone { width: 100%; margin: 0 0 var(--e5); }
.admin__entete {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  align-items: center; justify-content: space-between; margin-bottom: var(--e6);
}
.admin__entete h1 { font-size: var(--t-h2); margin-bottom: var(--e1); }
.admin__entete p { color: var(--encre-doux); font-size: var(--t-sm); margin: 0; }

/* --------------------------------------------------------------------------
   15. Salon de discussion & communauté
   -------------------------------------------------------------------------- */
.salon-grille { display: grid; gap: var(--e5); align-items: start; }
@media (min-width: 980px) { .salon-grille { grid-template-columns: minmax(0, 1fr) 320px; } }

.salon {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); box-shadow: var(--ombre-1);
}
.salon__fil {
  display: flex; flex-direction: column; gap: var(--e4);
  padding: var(--e5); overflow-y: auto;
  height: min(58vh, 540px); min-height: 300px;
  background:
    radial-gradient(600px 300px at 80% 0%, var(--sauge-100), transparent 70%),
    var(--surface);
}
.salon__vide { margin: auto; text-align: center; max-width: 32ch; color: var(--encre-doux); }
.salon__jour {
  display: flex; align-items: center; gap: var(--e3);
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--pierre-600);
}
.salon__jour::before, .salon__jour::after { content: ''; flex: 1; height: 1px; background: var(--trait); }

.message { display: flex; gap: var(--e3); align-items: flex-start; max-width: 88%; }
.message--moi { flex-direction: row-reverse; margin-left: auto; }
.message__bulle {
  position: relative;
  background: var(--sauge-100); border: 1px solid var(--sauge-200);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 6px;
  padding: var(--e3) var(--e4);
}
.message--moi .message__bulle {
  background: var(--sable-100); border-color: var(--sable-200);
  border-radius: var(--r-md) var(--r-md) 6px var(--r-md);
}
.message__bulle p { margin: 0; font-size: var(--t-sm); line-height: 1.55; overflow-wrap: anywhere; }
.message__entete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e1); }
.message__entete b { font-size: var(--t-sm); }
.message__entete time { font-size: var(--t-xs); color: var(--pierre-600); }
.message__entete .pastille { padding: .1em .55em; font-size: .68rem; }

.message__suppr { position: absolute; top: 2px; right: 4px; opacity: 0; transition: opacity var(--vite); }
.message__bulle:hover .message__suppr, .message__suppr:focus-within { opacity: 1; }
.message__suppr button {
  border: 0; background: transparent; color: var(--pierre-400);
  cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0;
}
.message__suppr button:hover { color: var(--erreur); background: rgba(163,50,36,.1); }

.salon__saisie {
  display: flex; gap: var(--e3); align-items: flex-end;
  padding: var(--e4); border-top: 1px solid var(--trait); background: var(--creme);
}
.salon__saisie textarea {
  flex: 1; resize: none; padding: .75rem 1rem; min-height: 46px;
  font-family: inherit; font-size: var(--t-sm); line-height: 1.5; color: var(--encre);
  background: var(--surface); border: 1.5px solid var(--trait); border-radius: var(--r-md);
}
.salon__saisie textarea:focus { outline: none; border-color: var(--foret-500); box-shadow: 0 0 0 4px rgba(63,112,83,.13); }

/* Mur communautaire — maçonnerie */
.mur { columns: 1; column-gap: var(--e5); }
@media (min-width: 700px)  { .mur { columns: 2; } }
@media (min-width: 1080px) { .mur { columns: 3; } }
.mur > * { break-inside: avoid; margin-bottom: var(--e5); display: inline-block; width: 100%; }

.commentaires { display: grid; gap: var(--e4); }
.commentaire { display: flex; gap: var(--e3); align-items: flex-start; }
.commentaire__corps {
  position: relative; flex: 1;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 6px var(--r-md) var(--r-md) var(--r-md);
  padding: var(--e3) var(--e4);
}
.commentaire__corps p { margin: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }

/* Repli du détail d'une idée */
.repli summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--t-sm); font-weight: 650; color: var(--foret-600);
  padding: var(--e2) 0;
}
.repli summary::-webkit-details-marker { display: none; }
.repli summary .ico { transition: transform var(--moyen); }
.repli[open] summary .ico { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   16. Animations
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal--visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--sortie), transform .7s var(--sortie);
}
/* Décalage en cascade dans une grille */
.reveal--visible:nth-child(2) { transition-delay: .08s; }
.reveal--visible:nth-child(3) { transition-delay: .16s; }
.reveal--visible:nth-child(4) { transition-delay: .24s; }

/* Parallaxe légère du fond de hero */
.parallaxe { will-change: transform; }

/* Chargement fantôme */
.squelette {
  background: linear-gradient(100deg, var(--sauge-100) 30%, var(--sauge-200) 50%, var(--sauge-100) 70%);
  background-size: 220% 100%;
  animation: glisse 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes glisse { from { background-position: 180% 0; } to { background-position: -20% 0; } }

/* Le mouvement reste une option, jamais une condition d'usage */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .entete, .pied, .nav, .btn, .salon__saisie { display: none !important; }
  body { background: #fff; color: #000; }
}