/* ================================================================
   LINGUA APP — style.css
   Thème : chaleureux et traditionnel — terre de bois, ocre, forêt,
   ivoire — voir docs/brief-design.md pour l'intention de design.
   Polices : Fraunces (titres) + Nunito Sans (corps)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables CSS globales ─────────────────────────────────── */
:root {
  /* Empêche le mode sombre forcé de certains navigateurs (ex. « Forcer le
     thème sombre » de Chrome/Edge) d'inverser les couleurs du site : ce
     site est conçu pour un thème clair uniquement, et cette inversion
     automatique rendait certains textes (ex. bandeaux .alert) illisibles
     car quasi de la même teinte que leur propre fond une fois inversés. */
  color-scheme: light;

  /* Palette principale — brief docs/brief-design.md */
  --terre:        #C88A3D; /* ocre doré — accent principal */
  --terre-light:  #DDAA63;
  --terre-dark:   #9C6A28;
  --foret:        #3B5C4A; /* vert forêt — accent secondaire */
  --foret-light:  #6B9C82;
  --foret-dark:   #2F4A3C;
  --bois:         #3B2A20; /* terre de bois — fond des zones sombres (navbar, hero, footer) */
  --bois-2:       #2E2016;
  --sable:        #EFE2C8;
  --creme:        #F3E9D8; /* blanc cassé / ivoire — fond principal des pages, fonds secondaires */
  --ivoire-muted: rgba(243,233,216,.68); /* texte atténué sur fond sombre (bois) */
  --brique:       #A8462E; /* rouge brique — accent d'appel, à utiliser avec parcimonie */
  --brun-pale:    #E4D2AE;
  --brun:         #8B6340;
  --charbon:      #5C4632; /* brun clair chaud — texte sur fond clair */
  --gris-chaud:   #6E5B47;
  --gris-pale:    #D9CEC3;

  /* Sémantiques */
  --succes:  #40916C;
  --erreur:  #C1121F;
  --warning: #E9A93A;
  --info:    #2D6A9F;

  /* Typographie */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Nunito Sans', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Espacements */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* Rayons */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px;
  --r-xl: 24px; --r-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 4px rgba(30,26,22,.08);
  --shadow-md: 0 4px 16px rgba(30,26,22,.12);
  --shadow-lg: 0 8px 32px rgba(30,26,22,.16);
  --shadow-xl: 0 16px 48px rgba(30,26,22,.2);
  --shadow-terre: 0 8px 32px rgba(196,98,45,.25);

  /* Transitions */
  --tr-fast:   150ms ease;
  --tr-base:   250ms ease;
  --tr-spring: 350ms cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --max-w: 1200px;
  --nav-h: 68px;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--charbon);
  background: var(--creme);
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

/* ── Typographie ────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: clamp(1.8rem,4vw,2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem,3vw,2rem);    font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.1rem;  font-weight: 500; }
p  { line-height: 1.7; color: var(--gris-chaud); }
strong { font-weight: 600; color: var(--charbon); }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--narrow { max-width: 720px; }
.container--wide   { max-width: 1400px; }

/* Grilles */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }

/* Flex */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(59,42,32,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(243,233,216,.08);
  z-index: 1000;
  transition: box-shadow var(--tr-base);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }

.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: var(--max-w); margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Logo */
.navbar__logo {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  color: var(--terre); text-decoration: none; white-space: nowrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--r-lg);
  border: 1px solid rgba(200,138,61,.35);
  background: rgba(243,233,216,.06);
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.navbar__logo:hover {
  border-color: var(--terre);
  background: rgba(243,233,216,.1);
}
.navbar__logo-img {
  height: 30px; width: auto; display: block;
}
.navbar__logo-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--terre); color: white; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.navbar__logo em { font-style: italic; }

/* Links */
.navbar__nav { display: flex; align-items: center; gap: var(--space-1); }
.navbar__nav a {
  padding: var(--space-2) var(--space-4); border-radius: var(--r-full);
  font-size: .875rem; font-weight: 500; color: var(--ivoire-muted);
  transition: all var(--tr-fast); white-space: nowrap;
}
.navbar__nav a:hover  { background: rgba(243,233,216,.12); color: var(--terre-light); }
.navbar__nav a.active { background: var(--terre); color: white; }

/* Actions droite */
.navbar__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Notifications : bloc distinct de .navbar__actions pour rester visible
   en mode responsive (voir media query 768px), au lieu de disparaître
   avec le reste des actions derrière le menu burger. */
.navbar__notif { display: flex; align-items: center; }

/* Hamburger */
.navbar__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: var(--space-2);
}
.navbar__hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--creme); border-radius: 2px;
  transition: all var(--tr-base);
}
.navbar__hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.is-active span:nth-child(2) { opacity: 0; }
.navbar__hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.navbar__mobile-drawer {
  display: none; position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--bois); border-bottom: 1px solid rgba(243,233,216,.1);
  padding: var(--space-4) var(--space-6) var(--space-6);
  z-index: 999; flex-direction: column; gap: var(--space-1);
  box-shadow: var(--shadow-lg);
  /* Barre de défilement verticale quand tous les liens dépassent la
     hauteur de l'écran, pour que ceux du bas restent atteignables. */
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.navbar__mobile-drawer.open { display: flex; }
.navbar__mobile-group { display: flex; flex-direction: column; gap: var(--space-1); }
.navbar__mobile-link {
  padding: var(--space-3) var(--space-4); border-radius: var(--r-md);
  font-weight: 500; color: var(--ivoire-muted);
  transition: all var(--tr-fast); display: block;
}
.navbar__mobile-link:hover,
.navbar__mobile-link.active { background: rgba(243,233,216,.1); color: var(--terre-light); }

/* Distingue les liens de navigation des liens du compte utilisateur
   (profil, mots français, déconnexion) dans le menu burger mobile. */
.navbar__mobile-section-title {
  margin-top: var(--space-3); padding: 0 var(--space-4) var(--space-1);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ivoire-muted); opacity: .6;
  border-top: 1px solid rgba(243,233,216,.1); padding-top: var(--space-3);
}

/* ── BOUTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-6);
  border-radius: var(--r-full); font-size: .875rem; font-weight: 600;
  cursor: pointer; border: 2px solid transparent;
  transition: all var(--tr-base); white-space: nowrap; line-height: 1;
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Variantes */
.btn--primary {
  background: var(--terre); color: white; border-color: var(--terre);
  box-shadow: 0 4px 12px rgba(196,98,45,.3);
}
.btn--primary:hover {
  background: var(--terre-dark); border-color: var(--terre-dark);
  box-shadow: 0 6px 20px rgba(196,98,45,.4); transform: translateY(-1px);
}
.btn--secondary {
  background: transparent; color: var(--terre); border-color: var(--terre);
}
.btn--secondary:hover { background: var(--terre); color: white; }

.btn--foret  { background: var(--foret); color: white; border-color: var(--foret); }
.btn--foret:hover { background: var(--foret-dark); }

.btn--succes { background: var(--succes); color: white; border-color: var(--succes); }
.btn--succes:hover { background: var(--foret-dark); border-color: var(--foret-dark); }
/* Reste bien vert même désactivé (ex: bouton "✓ Voté") : sans cette règle,
   .btn:disabled { opacity:.5 } délave la couleur et la fait paraître grise. */
.btn.btn--succes:disabled { opacity: 1; background: var(--succes); border-color: var(--succes); color: white; }

.btn--ghost {
  background: transparent; color: var(--gris-chaud); border-color: var(--gris-pale);
}
.btn--ghost:hover { background: var(--brun-pale); color: var(--terre); border-color: var(--brun); }

.btn--danger  { background: var(--erreur); color: white; border-color: var(--erreur); }
.btn--white   { background: white; color: var(--terre); border-color: white; }

/* Tailles */
.btn--sm  { padding: var(--space-2) var(--space-4); font-size: .75rem; }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: 1rem; }
.btn--xl  { padding: var(--space-5) var(--space-10); font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn--icon  { width: 40px; height: 40px; padding: 0; border-radius: var(--r-md); }

/* ── FORMULAIRES ─────────────────────────────────────────────── */
.form-group   { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label   { font-size: .875rem; font-weight: 600; color: var(--charbon); }
.form-hint    { font-size: .75rem; color: var(--gris-chaud); }
.form-error   { font-size: .75rem; color: var(--erreur); display: flex; align-items: center; gap: var(--space-1); }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--gris-pale); border-radius: var(--r-md);
  background: white; color: var(--charbon);
  transition: all var(--tr-fast); outline: none;
}
/* input[type=search] a un habillage natif (rectangle) sous Chrome/Safari/Edge
   qui déborde du border-radius personnalisé : on le désactive pour ne garder
   que l'arrondi défini en CSS. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--terre);
  box-shadow: 0 0 0 3px rgba(196,98,45,.15);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--gris-pale); }
.form-input--error, .form-select--error { border-color: var(--erreur) !important; }
.form-input--success { border-color: var(--succes) !important; }
.form-textarea { resize: vertical; min-height: 100px; }

/* Indicateur de disponibilité (pseudo/email) affiché dans le champ pendant la saisie */
.form-input__check { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); font-size: 1rem; display: none; }
.form-input__check--available { color: var(--succes); }
.form-input__check--taken     { color: var(--erreur); }
.form-input__check--loading   { color: var(--gris-chaud); }

/* ── SELECT RECHERCHABLE (combobox) ──────────────────────────
   Transforme tout <select data-searchable> en champ texte + liste
   filtrable (voir initSearchableSelects() dans assets/js/main.js),
   tout en gardant le <select> d'origine synchronisé (même id, même
   .value, événement "change" toujours déclenché). Règle partagée par
   toutes les pages utilisant data-searchable — ne pas la dupliquer
   dans le <style> d'une page. */
.select-search { position: relative; }

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

.select-search__input { cursor: text; }
.select-search__input:disabled {
  cursor: not-allowed;
  opacity: .6;
  background: var(--gris-pale);
}

.select-search__list {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid var(--brun-pale);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}
.select-search__list.is-open { display: block; }

.select-search__list li {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--charbon);
  border-bottom: 1px solid var(--gris-pale);
  transition: background var(--tr-fast);
}
.select-search__list li:last-child { border-bottom: none; }
.select-search__list li:hover,
.select-search__list li.is-active,
.select-search__list li.is-selected { background: var(--sable); color: var(--terre); }
.select-search__list li.select-search__empty {
  cursor: default; color: var(--gris-chaud); font-style: italic;
}
.select-search__list li.select-search__empty:hover { background: none; color: var(--gris-chaud); }

/* ── CARDS ───────────────────────────────────────────────────── */
.card {
  background: white; border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); overflow: hidden;
  transition: transform var(--tr-base), box-shadow var(--tr-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card--flat { border: 1px solid var(--brun-pale); box-shadow: none; }
.card--flat:hover { border-color: var(--terre-light); box-shadow: var(--shadow-md); }
.card--no-hover:hover { transform: none; box-shadow: var(--shadow-md); }

.card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--gris-pale);
}
.card__body   { padding: var(--space-6); }
.card__footer {
  padding: var(--space-4) var(--space-6);
  background: var(--sable);
  border-top: 1px solid var(--brun-pale);
}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge--terre   { background: rgba(196,98,45,.12);  color: var(--terre-dark); }
.badge--foret   { background: rgba(45,106,79,.12);  color: var(--foret-dark); }
.badge--warning { background: rgba(233,169,58,.15); color: #7a4a00; }
.badge--info    { background: rgba(45,106,159,.12); color: var(--info); }
.badge--succes  { background: rgba(64,145,108,.12); color: var(--succes); }
.badge--gris    { background: var(--brun-pale);     color: var(--brun); }
/* Variante pour les badges dont le texte peut être une phrase longue
   (ex. nom de champ lexical) : autorise le retour à la ligne au lieu de
   déborder ou d'élargir son conteneur flex. */
.badge--wrap    { white-space: normal; text-align: center; }
.badge--erreur  { background: rgba(193,18,31,.1);   color: var(--erreur); }

/* ── TEINTE DE LIGNE (fond de ligne coloré) ──────────────────────
   Même palette de 7 couleurs que .badge--*, déclinée en fond de ligne
   complet + liseré gauche. Utilisé pour l'historique des points (couleur
   par type d'action) et les dernières contributions (couleur par langue)
   sur public/profile.php, assemblé côté PHP par Helpers::pointsActionMeta()
   / Helpers::languageColorClass(). */
.row-tint--terre   { background: rgba(196,138,61,.10); box-shadow: inset 4px 0 0 0 var(--terre); }
.row-tint--foret   { background: rgba(45,106,79,.08);  box-shadow: inset 4px 0 0 0 var(--foret); }
.row-tint--warning { background: rgba(233,169,58,.14); box-shadow: inset 4px 0 0 0 var(--warning); }
.row-tint--info    { background: rgba(45,106,159,.09); box-shadow: inset 4px 0 0 0 var(--info); }
.row-tint--succes  { background: rgba(64,145,108,.10); box-shadow: inset 4px 0 0 0 var(--succes); }
.row-tint--gris    { background: rgba(110,91,71,.08);  box-shadow: inset 4px 0 0 0 var(--gris-chaud); }
.row-tint--erreur  { background: rgba(193,18,31,.08);  box-shadow: inset 4px 0 0 0 var(--erreur); }

/* ── CARROUSEL HORIZONTAL ─────────────────────────────────────────
   Défilement horizontal générique (ex. badges "Points par langue" sur
   public/profile.php quand ils dépassent la largeur disponible). Voir
   assets/js/main.js::initHCarousels() pour le câblage des flèches. */
.hcarousel { position: relative; display: flex; align-items: center; gap: .5rem; }
.hcarousel__track {
  display: flex; gap: .5rem; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding: .25rem 0;
}
.hcarousel__track::-webkit-scrollbar { display: none; }
.hcarousel__item { flex: 0 0 auto; white-space: nowrap; }
.hcarousel__arrow {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--gris-pale); background: white; color: var(--gris-chaud);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: .75rem; transition: all var(--tr-fast);
}
.hcarousel__arrow:hover { border-color: var(--terre); color: var(--terre); }
.hcarousel__arrow[hidden] { display: none; }

/* ── ALERTES ─────────────────────────────────────────────────── */
.alert {
  padding: var(--space-4) var(--space-5); border-radius: var(--r-lg);
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: .875rem; border-left: 4px solid;
}
.alert--succes  { background: #DCEEE4;               border-color: var(--succes);  color: #1d3b2c; }
.alert--erreur  { background: rgba(193,18,31,.1);    border-color: var(--erreur);  color: #7a0e17; }
.alert--warning { background: rgba(233,169,58,.15);  border-color: var(--warning); color: #4a2900; }
.alert--info    { background: rgba(45,106,159,.1);   border-color: var(--info);    color: #143c5c; }
.alert__icon    { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
/* Empêche les règles globales (ex. "strong { color: var(--charbon) }") de
   redéfinir la couleur du texte à l'intérieur d'un bandeau .alert : sans ce
   correctif, le texte en gras du message ressortait dans une teinte plus
   claire que le reste de la phrase, au lieu de suivre la couleur de la
   variante (succès/erreur/warning/info). */
.alert strong, .alert a, .alert span, .alert div { color: inherit; }

/* ── MODAL ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(30,26,22,.7);
  backdrop-filter: blur(4px); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); opacity: 0; visibility: hidden;
  transition: all var(--tr-base);
}
.modal-overlay.open  { opacity: 1; visibility: visible; }

.modal {
  background: white; border-radius: var(--r-xl);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateY(20px) scale(.97);
  transition: transform var(--tr-spring);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--gris-pale);
  display: flex; align-items: center; justify-content: space-between;
}
.modal__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.modal__close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brun-pale); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--gris-chaud); transition: all var(--tr-fast);
}
.modal__close:hover { background: var(--gris-pale); }
.modal__body   { padding: var(--space-6); }
.modal__footer {
  padding: var(--space-4) var(--space-6); background: var(--sable);
  border-top: 1px solid var(--brun-pale);
  display: flex; justify-content: flex-end; gap: var(--space-3);
}

/* ── CONFIRM DIALOG (remplace window.confirm() natif) ──────────
   Généré dynamiquement par LV.confirm() dans main.js, réutilise les
   classes .modal-overlay/.modal/.modal__footer ci-dessus pour rester
   cohérent avec le reste des modales du site. */
.confirm-modal { max-width: 420px; }
.confirm-modal__body {
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
}
.confirm-modal__icon {
  width: 56px; height: 56px; margin: 0 auto var(--space-4);
  border-radius: 50%; background: rgba(45,106,159,.12); color: var(--info);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.confirm-modal__icon--danger { background: rgba(193,18,31,.1); color: var(--erreur); }
.confirm-modal__title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--charbon); margin-bottom: var(--space-2);
}
.confirm-modal__message {
  color: var(--gris-chaud); font-size: .92rem; line-height: 1.5;
  white-space: pre-line;
}
.confirm-modal .modal__footer { justify-content: center; }
.confirm-modal .modal__footer .btn { min-width: 120px; }

/* ── DROPDOWN ────────────────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px; background: white;
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  border: 1px solid var(--brun-pale); z-index: 500;
  overflow: hidden; opacity: 0; visibility: hidden;
  transform: translateY(-8px); transition: all var(--tr-base);
}
.dropdown.open .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: .875rem; color: var(--charbon); cursor: pointer;
  transition: background var(--tr-fast); background: none; border: none; width: 100%; text-align: left;
}
.dropdown__item:hover { background: var(--sable); }
.dropdown__item.active { background: var(--terre); color: white; }
.dropdown__item.active:hover { background: var(--terre); }
.dropdown__item--danger { color: var(--erreur); }
.dropdown__item--danger:hover { background: rgba(193,18,31,.06); }
.dropdown__divider { height: 1px; background: var(--gris-pale); }

/* ── NOTIFICATIONS (cloche du header) ───────────────────────────── */
/* Enrobage séparé du bouton : le bouton .btn a overflow:hidden (pour son
   effet ripple), ce qui rognait le badge quand il était positionné à
   l'intérieur du bouton lui-même — le badge est donc un frère du bouton,
   positionné par rapport à ce wrapper plutôt qu'au bouton. */
.notif-dropdown { background: white; border-radius: var(--r-full); }
.notif-bell-wrap { position: relative; display: inline-flex; }
.notif-badge {
  position: absolute; top: -6px; right: -6px; z-index: 5;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--erreur); color: white;
  font-size: .65rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px white; pointer-events: none;
}
/* Fond semi-transparent derrière le panneau de notifications centré en
   responsive (voir media query 768px) ; masqué par défaut pour ne rien
   changer à l'affichage plein écran. */
.notif-dropdown__backdrop { display: none; }

/* Grand écran (inchangé) : panneau ancré sous la cloche. */
.notif-dropdown__menu { width: 340px; max-width: 90vw; padding: 0; }
.notif-dropdown__header {
  padding: var(--space-3) var(--space-4); font-weight: 700; font-size: .8rem;
  color: var(--charbon); border-bottom: 1px solid var(--gris-pale); background: var(--sable);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.notif-dropdown__clear {
  display: flex; align-items: center; gap: .3rem; flex-shrink: 0;
  border: none; cursor: pointer;
  padding: .3rem .6rem; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  background: rgba(193,18,31,.1); color: var(--erreur);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.notif-dropdown__clear i { font-size: .68rem; }
.notif-dropdown__clear:hover,
.notif-dropdown__clear:focus-visible { background: var(--erreur); color: white; }
.notif-dropdown__items { max-height: 380px; overflow-y: auto; }
.notif-empty { padding: var(--space-5) var(--space-4); text-align: center; color: var(--gris-chaud); font-size: .85rem; }

.notif-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gris-pale);
  border-left: 5px solid transparent;
  transition: background var(--tr-fast);
}
.notif-item:last-child { border-bottom: none; }

/* Couleur par type de notification appliquée à la ligne entière (fond
   teinté + liseré gauche), pas seulement à une puce, pour un repérage
   visuel immédiat même en scannant la liste rapidement. Opacités plus
   marquées que les .badge/.alert du reste du site : ici la couleur doit
   se voir d'un coup d'œil dans une liste dense, pas juste servir d'accent. */
.notif-item--vote_received { background: rgba(45,106,159,.16);  border-left-color: var(--info); }
.notif-item--new_word      { background: rgba(196,138,61,.22);  border-left-color: var(--terre); }
.notif-item--rank_up       { background: rgba(64,145,108,.16);  border-left-color: var(--succes); }
.notif-item--rank_down     { background: rgba(193,18,31,.14);   border-left-color: var(--erreur); }

.notif-item--vote_received:hover { background: rgba(45,106,159,.24); }
.notif-item--new_word:hover      { background: rgba(196,138,61,.3); }
.notif-item--rank_up:hover       { background: rgba(64,145,108,.24); }
.notif-item--rank_down:hover     { background: rgba(193,18,31,.22); }

.notif-item--unread { border-left-width: 7px; }
.notif-item--unread .notif-item__message { font-weight: 700; }

/* Lien cliquable vers la page dédiée (recherche/contribuer/classement selon
   le type) : n'englobe que l'icône + le texte, jamais le bouton supprimer,
   pour ne pas imbriquer un <button> dans un <a> (invalide en HTML, et source
   de bugs de clic selon les navigateurs). */
.notif-item__link {
  display: flex; align-items: flex-start; gap: var(--space-3);
  flex: 1; min-width: 0; color: inherit; text-decoration: none;
}

.notif-item__icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: .7rem;
  background: var(--gris-chaud); /* repli si type inconnu */
}
.notif-item--vote_received .notif-item__icon { background: var(--info); }
.notif-item--new_word      .notif-item__icon { background: var(--terre); }
.notif-item--rank_up       .notif-item__icon { background: var(--succes); }
.notif-item--rank_down     .notif-item__icon { background: var(--erreur); }

.notif-item__body { flex: 1; min-width: 0; }
.notif-item__message { font-size: .82rem; color: var(--charbon); line-height: 1.4; margin: 0; }
.notif-item__time { font-size: .7rem; color: var(--gris-chaud); }

/* Toujours au moins partiellement visible (pas opacity:0 déclenché
   uniquement par :hover) : sur écran tactile il n'y a pas de vrai survol
   avant le tap, un bouton invisible tant qu'on ne l'a pas "survolé" est donc
   pratiquement impossible à utiliser au doigt. */
.notif-item__delete {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: none; border: none; cursor: pointer; opacity: .5;
  display: flex; align-items: center; justify-content: center;
  color: var(--gris-chaud); font-size: .8rem;
  transition: all var(--tr-fast);
}
.notif-item:hover .notif-item__delete,
.notif-item__delete:focus-visible { opacity: 1; }
.notif-item__delete:hover { background: rgba(193,18,31,.12); color: var(--erreur); opacity: 1; }
.notif-item.is-removing { opacity: 0; transform: translateX(12px); }

/* ── AVATAR ──────────────────────────────────────────────────── */
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--terre) 0%, var(--terre-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: .875rem; overflow: hidden;
}
.avatar--sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.5rem; }
.avatar--xl { width: 96px; height: 96px; font-size: 2rem; }

/* ── PAGE WRAPPER ────────────────────────────────────────────── */
.page-wrapper { padding-top: var(--nav-h); min-height: 100vh; }

/* En-tête de page (bandeau coloré) */
.page-header {
  background: linear-gradient(135deg, var(--bois) 0%, var(--brun-pale) 100%);
  padding: var(--space-16) 0 var(--space-12); position: relative; overflow: hidden;
}
.page-header::before {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: rgba(255,255,255,.04); border-radius: 50%; transform: rotate(-15deg);
}
.page-header__subtitle {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--space-3);
}
.page-header__title  { font-size: clamp(1.6rem,4vw,2.75rem); color: white; margin-bottom: var(--space-3); }
.page-header__desc   { font-size: 1.05rem; color: rgba(255,255,255,.75); max-width: 560px; }
/* Nom de langue mis en avant dans la description (pastille ocre) */
.page-header__lang {
  display: inline-block;
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 1.1em; line-height: 1.2;
  color: var(--bois);
  background: var(--terre-light);
  padding: .1em .55em; margin: 0 .1em;
  border-radius: var(--r-full);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.page-content { padding: var(--space-12) 0 var(--space-20); }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  padding: var(--space-24) 0 var(--space-16);
  background: linear-gradient(135deg, var(--bois) 0%, var(--brun-pale) 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(circle at 70% 50%, rgba(200,138,61,.16) 0%, transparent 70%);
  pointer-events: none;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(200,138,61,.16); border: 1px solid rgba(200,138,61,.32);
  border-radius: var(--r-full); font-size: .875rem; font-weight: 600;
  color: var(--terre-light); margin-bottom: var(--space-6);
}
.hero__title {
  font-size: clamp(2.2rem,6vw,4.5rem);
  font-family: var(--font-display); font-weight: 700;
  line-height: 1.1; color: var(--creme); margin-bottom: var(--space-6);
}
.hero__title em { font-style: italic; color: var(--terre-light); }
.hero__desc {
  font-size: 1.1rem; color: var(--ivoire-muted);
  line-height: 1.7; max-width: 540px; margin-bottom: var(--space-8);
}
.hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hero .btn--ghost {
  color: var(--creme); border-color: rgba(243,233,216,.35);
}
.hero .btn--ghost:hover {
  background: rgba(243,233,216,.12); color: var(--creme); border-color: var(--creme);
}

/* ── SECTIONS ────────────────────────────────────────────────── */
.section     { padding: var(--space-20) 0; }
.section--alt  { background: var(--sable); }
.section--dark { background: var(--bois); }
.section--dark p  { color: rgba(255,255,255,.7); }
.section--dark h2,
.section--dark h3 { color: white; }

.section__eyebrow {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--terre); margin-bottom: var(--space-3);
}
.section__title { margin-bottom: var(--space-4); }
.section__desc  { font-size: 1.05rem; color: var(--gris-chaud); max-width: 600px; line-height: 1.7; }

/* ── FEATURE CARDS ───────────────────────────────────────────── */
.feature-card {
  padding: var(--space-8); background: white;
  border-radius: var(--r-xl); border: 1px solid var(--brun-pale);
  transition: all var(--tr-base);
}
.feature-card:hover {
  border-color: var(--terre-light); box-shadow: var(--shadow-terre);
  transform: translateY(-4px);
}
.feature-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg); font-size: 22px;
  background: linear-gradient(135deg, var(--terre) 0%, var(--terre-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; margin-bottom: var(--space-5);
}
.feature-card__icon--foret {
  background: linear-gradient(135deg, var(--foret) 0%, var(--foret-dark) 100%);
}
.feature-card__icon--or {
  background: linear-gradient(135deg, var(--warning) 0%, var(--terre-dark) 100%);
}
.feature-card__title { font-size: 1.15rem; margin-bottom: var(--space-3); }
.feature-card__desc  { font-size: .875rem; color: var(--gris-chaud); line-height: 1.7; }

.feature-card--sm {
  padding: var(--space-5);
  max-width: 280px;
  margin: 0 auto;
}
.feature-card--sm .feature-card__icon {
  width: 40px; height: 40px; font-size: 16px; margin-bottom: var(--space-3);
}
.feature-card--sm .feature-card__title { font-size: 1rem; margin-bottom: var(--space-2); }
.feature-card--sm .feature-card__desc  { font-size: .8rem; line-height: 1.55; }

.feature-card--tint-terre { background: rgba(200,138,61,.1); }
.feature-card--tint-foret { background: rgba(59,92,74,.08); }
.feature-card--tint-or    { background: rgba(233,169,58,.12); }

/* ── FEATURE CAROUSEL (mobile uniquement) ───────────────────────
   Sur desktop .feature-grid reste une grille 3 colonnes classique ;
   les flèches sont masquées. En dessous de 768px, voir @media plus
   bas : la grille devient une piste défilante à une carte à la fois,
   avec les flèches <> aux extrémités. Câblage JS : voir
   assets/js/main.js::initFeatureCarousel(). */
.feature-carousel { position: relative; }
.feature-carousel__arrow {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; z-index: 2;
  border: 1px solid var(--brun-pale); background: white; color: var(--terre);
  align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-md); transition: all var(--tr-fast);
}
.feature-carousel__arrow:hover  { border-color: var(--terre); color: var(--terre-dark); }
.feature-carousel__arrow[hidden] { display: none; }
.feature-carousel__arrow--prev { left: -4px; }
.feature-carousel__arrow--next { right: -4px; }

/* ── STATS ───────────────────────────────────────────────────── */
.stat-card {
  background: white; border-radius: var(--r-xl);
  padding: var(--space-6); border: 1px solid var(--brun-pale); text-align: center;
}
.stat-card__value {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
  color: var(--terre); display: block; margin: 0 0 var(--space-1);
}
.stat-card__label { font-size: .875rem; color: var(--gris-chaud); font-weight: 500; }

/* ── PROGRESS BAR ────────────────────────────────────────────── */
.progress-bar {
  height: 8px; background: var(--brun-pale);
  border-radius: var(--r-full); overflow: hidden;
}
.progress-bar__fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--terre-light), var(--terre));
  transition: width .6s ease;
}
.progress-bar__fill--foret {
  background: linear-gradient(90deg, var(--foret-light), var(--foret));
}

/* ── SPINNER ─────────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: white;
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
.spinner--dark { border-color: rgba(196,98,45,.2); border-top-color: var(--terre); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TABLE ───────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto; border-radius: var(--r-lg);
  border: 1px solid var(--gris-pale);
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  padding: var(--space-3) var(--space-4); background: var(--sable);
  text-align: left; font-weight: 700; color: var(--charbon);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--brun-pale); white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--gris-pale); transition: background var(--tr-fast); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--sable); }
tbody td { padding: var(--space-3) var(--space-4); color: var(--charbon); vertical-align: middle; }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--space-1);
  border-bottom: 2px solid var(--gris-pale); margin-bottom: var(--space-6);
}
.tab {
  padding: var(--space-3) var(--space-5); border: none; background: none;
  font-size: .875rem; font-weight: 500; color: var(--gris-chaud);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all var(--tr-fast);
}
.tab:hover  { color: var(--terre); }
.tab.active { color: var(--terre); border-bottom-color: var(--terre); font-weight: 700; }
.tab-panel          { display: none; }
.tab-panel.active   { display: block; }

/* ── PAGINATION ──────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) 0; }
.page-item {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--gris-pale); background: white;
  transition: all var(--tr-fast); color: var(--gris-chaud);
}
.page-item:hover    { border-color: var(--terre); color: var(--terre); }
.page-item.active   { background: var(--terre); border-color: var(--terre); color: white; }
.page-item:disabled { opacity: .4; cursor: not-allowed; }

/* Pagination générée en nav > ul > li (languages.php, search.php…) —
   même apparence que .page-item ci-dessus, thème marron/terre. */
.pagination nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pagination nav li a,
.pagination nav li.active span,
.pagination nav li.disabled span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .5rem;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--gris-pale);
  background: white;
  color: var(--gris-chaud);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--tr-fast);
}
.pagination nav li a:hover {
  border-color: var(--terre);
  color: var(--terre);
  background: rgba(196,98,45,.08);
}
.pagination nav li.active span {
  background: var(--terre);
  border-color: var(--terre);
  color: white;
  font-weight: 700;
  cursor: default;
}
.pagination nav li.disabled span {
  opacity: .45;
  cursor: not-allowed;
  background: var(--sable);
}
/* Ellipsis (…) : texte discret, sans cadre */
.pagination nav li:not(.active):not(.disabled) span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--gris-chaud);
}

/* ── TOAST ───────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  z-index: 9999; display: flex; flex-direction: column;
  gap: var(--space-3); pointer-events: none;
}
.toast {
  background: var(--bois); color: white;
  padding: var(--space-4) var(--space-5); border-radius: var(--r-lg);
  font-size: .875rem; display: flex; align-items: center; gap: var(--space-3);
  box-shadow: var(--shadow-xl); pointer-events: all; max-width: 360px;
  animation: toastIn .3s var(--tr-spring) forwards;
}
.toast.hiding { animation: toastOut .2s ease forwards; }
.toast--succes  { border-left: 4px solid var(--succes); }
.toast--erreur  { border-left: 4px solid var(--erreur); }
.toast--warning { border-left: 4px solid var(--warning); }
.toast--info    { border-left: 4px solid var(--info); }

@keyframes toastIn  { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(100%); } }

/* ── DÉCORATION AFRICAINE ────────────────────────────────────── */
.pattern-divider {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--terre) 0,    var(--terre) 20px,
    var(--foret) 20px, var(--foret) 40px,
    var(--brique) 40px,var(--brique) 60px,
    var(--brun-pale) 60px, var(--brun-pale) 80px
  );
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer { background: var(--bois); color: rgba(255,255,255,.7); padding: var(--space-8) 0 var(--space-4); }
.footer__grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: var(--space-6); margin-bottom: var(--space-5);
}
.footer__brand   { max-width: 360px; }
.footer__logo    { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: white; margin-bottom: var(--space-2); }
.footer__tagline { font-size: .8rem; line-height: 1.5; margin-bottom: 0; }
.footer__col-title { font-size: .65rem; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-2); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-1); }
.footer__link  { font-size: .8rem; color: rgba(255,255,255,.6); transition: color var(--tr-fast); }
.footer__link:hover { color: var(--terre-light); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--space-3);
  display: flex; align-items: center; justify-content: space-between;
  font-size: .7rem; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: var(--space-2);
}

/* ── AUTH PAGES (login/register) ─────────────────────────────── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sable) 0%, var(--creme) 100%);
  padding: var(--space-6) var(--space-4);
}
.auth-card {
  background: white; border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  width: 100%; max-width: 440px; overflow: hidden;
}
.auth-card__header {
  background: linear-gradient(135deg, var(--terre) 0%, var(--terre-dark) 100%);
  padding: var(--space-8) var(--space-8) var(--space-6); text-align: center; color: white;
}
.auth-card__logo  { font-size: 2.5rem; margin-bottom: var(--space-2); }
.auth-card__title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--space-2); }
.auth-card__subtitle { font-size: .875rem; color: rgba(255,255,255,.75); }
.auth-card__body  { padding: var(--space-8); }
.auth-card__footer {
  padding: var(--space-4) var(--space-8); background: var(--sable);
  border-top: 1px solid var(--brun-pale); text-align: center;
  font-size: .875rem; color: var(--gris-chaud);
}
.auth-card__footer a { color: var(--terre); font-weight: 600; }

/* ── LEADERBOARD ─────────────────────────────────────────────── */
.lb-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gris-pale);
  transition: background var(--tr-fast);
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--sable); }
.lb-rank {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  min-width: 40px; text-align: center;
}
.lb-rank--1 { color: #c9a227; }
.lb-rank--2 { color: #a0a0a0; }
.lb-rank--3 { color: #c47a3a; }

/* ── PROFIL ──────────────────────────────────────────────────── */
.profile-header {
  background: linear-gradient(135deg, var(--bois) 0%, var(--brun-pale) 100%);
  padding: var(--space-12) 0 var(--space-16); color: white; position: relative;
}
.profile-avatar-wrap {
  display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap;
}
.profile-meta h1 { color: white; margin-bottom: var(--space-2); }
.profile-body    { margin-top: calc(-4rem); position: relative; }

/* Les badges (Poids, niveau, Expert…) utilisent des fonds translucides
   pensés pour un fond clair uni. Sur le dégradé foncé→clair de
   .profile-header, ces fonds deviennent illisibles à une extrémité ou
   l'autre : on force un fond blanc quasi opaque pour garder le contraste
   sur tout le dégradé, tout en conservant la couleur de texte propre à
   chaque variante (--terre-dark, --foret-dark, etc.). */
.profile-header .badge {
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ── BANNIÈRE PUBLICITAIRE ────────────────────────────────────────
   Emplacement unique et centralisé, aux mêmes dimensions partout :
   utilisé à l'identique par index.php, languages.php et search.php
   (encart .ad-slot--banner, taille fixe 613×315px calée sur le
   format du pavé publicitaire msn.com, centré dans un conteneur
   .ad-layout). Ne pas redéfinir ces dimensions localement dans une
   page — modifier uniquement ici pour que tout le site reste
   harmonisé. */
.ad-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ad-layout--full { width: 100%; }

.ad-slot {
  position: relative;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Format calé sur le pavé publicitaire MSN (référence : encart "Découvrir"
   de msn.com, ~613×315px) : dimensions fixes plutôt que pleine largeur,
   le composant .ad-carousel à l'intérieur remplit toujours 100% de cet
   espace (voir plus bas). aspect-ratio (plutôt que des paliers de hauteur
   par breakpoint) permet à l'encart de rétrécir proportionnellement sur
   les écrans plus étroits que 613px sans déformer le rapport largeur/
   hauteur d'origine. */
.ad-slot--banner {
  width: 613px;
  max-width: 100%;
  aspect-ratio: 613 / 315;
  height: auto;
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}
/* Dès qu'une publicité est réellement affichée, l'encart passe d'un
   style "placeholder" (pointillés) à un cadre discret plein bord,
   pour un rendu propre au lieu d'un contour en pointillés visible
   par-dessus l'image/vidéo. */
.ad-slot--banner:has(.ad-carousel) {
  border-style: solid;
  border-color: rgba(255,255,255,.15);
  background: transparent;
}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }

[data-animate] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
[data-animate].is-visible { opacity: 1; transform: none; }

/* ── UTILITAIRES ─────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-terre   { color: var(--terre); }
.text-foret   { color: var(--foret); }
.mot-vernaculaire {
  font-style: italic; color: var(--terre-dark); font-weight: 600; font-size: 1.05em;
}
.text-muted   { color: var(--gris-chaud); }
.text-sm      { font-size: .875rem; }
.text-xs      { font-size: .75rem; }
.font-display { font-family: var(--font-display); }
.font-bold    { font-weight: 700; }
.bg-sable     { background: var(--sable); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.w-full  { width: 100%; }
.hidden  { display: none !important; }
.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;
}
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── BARRE DE RECHERCHE (pill) ──────────────────────────────────── */
.search-bar {
  display: flex; align-items: center; gap: var(--space-2);
  background: white; border: 2px solid var(--brun-pale); border-radius: var(--r-full);
  padding: .4rem .4rem .4rem var(--space-6);
  box-shadow: var(--shadow-md);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.search-bar:focus-within {
  border-color: var(--terre);
  box-shadow: 0 0 0 4px rgba(200,138,61,.15), var(--shadow-md);
}
.search-bar__icon { font-size: 1.15rem; opacity: .55; flex-shrink: 0; }
.search-bar__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  height: 48px; font-size: 1.05rem; color: var(--charbon); font-family: var(--font-body);
}
.search-bar__input::placeholder { color: var(--gris-chaud); opacity: .7; }
.search-bar__btn { flex-shrink: 0; height: 48px; padding: 0 var(--space-6); white-space: nowrap; }

@media (max-width: 480px) {
  .search-bar { padding-left: var(--space-4); }
  .search-bar__btn { padding: 0 var(--space-4); font-size: .8rem; }
}

/* ── CARTE SONORE (module signature — voir docs/brief-design.md) ── */
.sound-section { background: var(--creme); }
.sound-cards {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-5); margin-top: var(--space-10);
}
.sound-card {
  position: relative; overflow: hidden;
  width: 200px; padding: var(--space-6) var(--space-5);
  background: white; border: 1px solid var(--brun-pale); border-radius: var(--r-xl);
  cursor: pointer; text-align: center; font-family: inherit;
  transition: border-color var(--tr-base), box-shadow var(--tr-base), transform var(--tr-base);
}
.sound-card:hover {
  border-color: var(--terre-light); box-shadow: var(--shadow-terre); transform: translateY(-3px);
}
.sound-card:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }

.sound-card__ripple {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,138,61,.55) 0%, transparent 70%);
  opacity: 0; pointer-events: none;
}
.sound-card.is-playing .sound-card__ripple { animation: soundRipple .7s ease-out; }
@keyframes soundRipple {
  from { transform: scale(1);  opacity: .7; }
  to   { transform: scale(14); opacity: 0;  }
}

.sound-card__icon {
  display: block; font-size: 1.8rem; margin-bottom: var(--space-3);
  transition: transform var(--tr-spring);
}
.sound-card.is-playing .sound-card__icon { transform: scale(1.25) rotate(-8deg); }

.sound-card__fr {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.1rem; color: var(--charbon);
}

.sound-card__reveal {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s ease, opacity .4s ease, margin-top .5s ease;
  margin-top: 0;
}
.sound-card__reveal > * { overflow: hidden; }
.sound-card.is-revealed .sound-card__reveal {
  grid-template-rows: 1fr; opacity: 1; margin-top: var(--space-3);
}
.sound-card__local { display: block; font-size: 1.15rem; }
.sound-card__phonetic {
  display: block; font-family: var(--font-mono); font-size: .75rem;
  color: var(--gris-chaud); margin-top: var(--space-1);
}
.sound-card__lang {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--foret-dark); margin-top: var(--space-2); font-weight: 700;
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar          { width:6px; height:6px; }
::-webkit-scrollbar-track    { background: var(--brun-pale); }
::-webkit-scrollbar-thumb    { background: var(--brun); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--terre); }
::selection { background: rgba(196,98,45,.2); color: var(--terre-dark); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4        { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .navbar__logo-img { height: 26px; }
  .navbar__nav, .navbar__actions { display: none; }
  .navbar__hamburger              { display: flex; }
  .grid-2, .grid-3, .grid-4      { grid-template-columns: 1fr; }

  /* Carrousel horizontal pour les cartes « Comment ça fonctionne » en
     mobile : une seule carte visible à la fois, flèches <> aux
     extrémités (display:flex prime sur grid-template-columns ci-dessus). */
  .feature-carousel { padding: 0 var(--space-8); }
  .feature-carousel__arrow { display: flex; }
  .feature-carousel__arrow--prev { left: 0; }
  .feature-carousel__arrow--next { right: 0; }
  .feature-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--space-4);
    padding: var(--space-2) 0 var(--space-3);
    -webkit-overflow-scrolling: touch;
  }
  .feature-grid .feature-card--sm {
    flex: 0 0 100%;
    max-width: none;
    scroll-snap-align: start;
  }
  .section                        { padding: var(--space-12) 0; }
  .page-content                   { padding: var(--space-8) 0 var(--space-12); }
  .hero                           { padding: var(--space-12) 0 var(--space-10); }
  .footer__grid                   { flex-direction: column; gap: var(--space-5); }
  .footer__brand                  { max-width: none; }
  .footer__brand--hide-mobile     { display: none; }
  .footer__bottom                 { flex-direction: column; text-align: center; }
  .modal                          { max-width: none; }
  .tabs                           { overflow-x: auto; }
  .tab                            { white-space: nowrap; }

  /* Notifications en responsive : panneau ancré en haut à droite, juste
     sous la cloche (et non centré à l'écran), avec un fond assombri
     derrière. Le fond utilise des vw/vh (et non %/inset) car .navbar a un
     backdrop-filter, qui en fait le containing block des descendants
     position:fixed — dans ce cas seules les unités viewport restent
     réellement relatives à l'écran ; en % ou inset:0 le fond se serait
     calé sur la hauteur de la barre de nav (~60px) au lieu de tout
     l'écran. Le panneau, lui, se positionne avec top/right car .navbar
     a les mêmes bords haut/droite que le viewport (position fixed,
     top:0, right:0), donc ces valeurs restent justes même relatives
     à ce containing block. */
  .notif-dropdown__backdrop {
    display: block; position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(43,30,20,.45);
    z-index: 499; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--tr-base);
  }
  .notif-dropdown.open .notif-dropdown__backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

  .notif-dropdown__menu {
    position: fixed; top: calc(var(--nav-h) + 8px); left: auto; right: var(--space-4);
    max-height: calc(100vh - var(--nav-h) - var(--space-6));
    transform: translateY(-8px) scale(.96);
  }
  .notif-dropdown.open .notif-dropdown__menu { transform: translateY(0) scale(1); }

  /* Profil (public/profile.php) : cartes de stats (« Contributions
     totales » → « Réputation ») nettement réduites et compactées sur une
     seule ligne (libellé + valeur côte à côte) au lieu du grand bloc
     centré empilé utilisé en desktop. */
  .profile-body .stat-card {
    display: flex; flex-direction: row-reverse;
    align-items: center; justify-content: space-between;
    gap: var(--space-3); text-align: left;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-md);
  }
  .profile-body .stat-card__value {
    font-size: 1.05rem; margin: 0; white-space: nowrap;
  }
  .profile-body .stat-card__label {
    font-size: .75rem; line-height: 1.2;
  }

  /* Profil : tableau « Historique des points » — en grand écran la
     présentation reste inchangée (voir plus haut) ; en responsive, chaque
     ligne devient une carte compacte sans libellés de colonnes : date,
     type, points et détail centrés et empilés, avec une marge horizontale
     pour ne pas toucher les bords. La colonne "Utilisateur lié" est
     masquée ici (info secondaire, toujours visible dans le tableau en
     grand écran) pour garder un rendu net. */
  #points-history-wrap .table-wrapper { overflow-x: visible; border: none; }
  #points-history-wrap table,
  #points-history-wrap thead,
  #points-history-wrap tbody,
  #points-history-wrap tr { display: block; }
  #points-history-wrap thead { display: none; }
  #points-history-wrap tbody tr {
    display: flex; flex-direction: column; align-items: center;
    gap: .3rem;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gris-pale);
    text-align: center;
  }
  #points-history-wrap tbody td {
    display: block; padding: 0; white-space: normal; font-size: .78rem;
  }
  #points-history-wrap tbody td[data-label="Date"]            { order: 1; color: var(--gris-chaud); }
  #points-history-wrap tbody td[data-label="Type"]             { order: 2; }
  #points-history-wrap tbody td[data-label="Points"]           { order: 3; font-size: .85rem; }
  #points-history-wrap tbody td[data-label="Détail"]           { order: 4; color: var(--gris-chaud); font-size: .75rem; }
  #points-history-wrap tbody td[data-label="Utilisateur lié"]  { display: none; }
}

@media (max-width: 480px) {
  .container        { padding-inline: var(--space-4); }
  .hero__actions    { flex-direction: column; align-items: stretch; }
  .btn--xl          { width: 100%; }
  .auth-card__body  { padding: var(--space-6); }

  /* Historique des points : police encore réduite sur très petit écran. */
  #points-history-wrap tbody tr              { padding: var(--space-3) var(--space-3); }
  #points-history-wrap tbody td              { font-size: .72rem; }
  #points-history-wrap tbody td[data-label="Points"] { font-size: .78rem; }
}

/* ================================================================
   PUBLICITÉS / CAROUSEL
   Ce composant n'impose plus sa propre taille : il remplit toujours
   à 100% l'encart qui l'accueille (.ad-slot--banner ci-dessus), qui
   est l'unique endroit où les dimensions de la publicité sont
   définies. Ainsi le rendu (recadrage object-fit inclus) est
   identique quelle que soit la page.
   ================================================================ */
.ad-carousel {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Flèches de navigation manuelle (style Edge/MSN) : superposées aux
   bords gauche/droit du carrousel, visibles seulement s'il y a plus
   d'une publicité (cf. ad_carousel.php). Le défilement automatique
   (voir le script du partial) continue en parallèle. */
.ad-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--r-full);
  background: rgba(0,0,0,.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--tr-fast, .2s);
}
.ad-carousel__nav:hover { background: rgba(0,0,0,.65); }
.ad-carousel__nav--prev { left: var(--space-2); }
.ad-carousel__nav--next { right: var(--space-2); }

.ad-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ad-track::-webkit-scrollbar { display: none; }

.ad-carousel__item {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ad-carousel__item a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.ad-carousel__item img,
.ad-carousel__item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}