/* =============================================================================
   FEUILLE DE STYLE PRINCIPALE — LeSavantCurieux
   Palette de couleurs :
     Onyx         #171614  — le fond le plus sombre, pour les zones "noires"
     Dark Coffee  #3A2618  — brun foncé, utilisé pour la navbar et les fonds
     Chocolate    #b17679  — accent chaud, pour les boutons et les highlights
     Dusty Taupe  #9A8873  — gris-beige, pour les textes secondaires
     Charcoal     #37423D  — vert sombre, pour certains dégradés
   ============================================================================= */


/* =============================================================================
   1. POLICE D'ICONES — Bootstrap Icons hébergée en local
   ============================================================================= */

/*
  On héberge la police Bootstrap Icons sur notre propre serveur
  plutôt que de la charger depuis un CDN externe.
  "font-display: swap" permet d'afficher un texte de remplacement
  pendant que la police se charge, évitant ainsi le "flash" de texte invisible (FOIT).
*/
@font-face {
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2") format("woff2"),
       url("../fonts/bootstrap-icons.woff") format("woff");
  font-display: swap;
}


/* =============================================================================
   2. VARIABLES CSS — palette, typographie, espacements
   ============================================================================= */

/*
  Toutes les valeurs réutilisables du design sont centralisées ici.
  Ça évite de répéter les mêmes couleurs partout dans le fichier,
  et ça facilite les modifications globales (changer une couleur = 1 seul endroit).
*/
:root {
  /* Couleurs nommées de la palette */
  --onyx:       #171614;
  --coffee:     #3A2618;
  --choco:      #b17679;   /* accent principal chaud */
  --choco2:     #986264;   /* variante légèrement plus foncée, pour les boutons */
  --taupe:      rgb(194, 192, 190);
  --charcoal:   #37423D;

  /* Fonds de page et surfaces des cartes */
  --bg:         #0f0e0d;   /* fond global de la page */
  --surface:    #1e1b18;   /* fond des cartes */
  --surface2:   #252119;   /* fond des éléments imbriqués dans les cartes */

  /* Bordures — semi-transparentes pour s'adapter à n'importe quel fond */
  --border:     rgba(154,136,115,.15);  /* bordure discrète */
  --border-mid: rgba(154,136,115,.3);   /* bordure un peu plus visible */

  /* Textes — du plus lumineux au plus atténué */
  --text:       #fff9f0;   /* texte principal, blanc cassé chaud */
  --text-muted: #e8e0d4;   /* texte secondaire, un peu moins lumineux */
  --text-light: #c8bfb2;   /* texte tertiaire, pour les descriptions */

  /* Accents supplémentaires */
  --accent:     #9A8873;   /* taupe neutre, utilisé comme couleur d'accent secondaire */
  --accent-hot: #754043;   /* rouge sombre, pour les états actifs */

  /* Rayons des coins arrondis */
  --radius:     6px;       /* coins légèrement arrondis (boutons, inputs) */
  --radius-lg:  12px;      /* coins plus arrondis (cartes, panneaux) */

  /* Polices — display pour les titres, body pour le texte courant */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
}


/* =============================================================================
   3. RESET & BASE — éléments HTML bruts
   ============================================================================= */

/*
  On remet à zéro les marges et paddings de tous les éléments
  pour partir d'une base cohérente entre navigateurs.
  "box-sizing: border-box" fait en sorte que les paddings et bordures
  soient inclus dans la largeur/hauteur déclarée — c'est beaucoup plus prévisible.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Défilement fluide lors des ancres (#section) */
html {
  scroll-behavior: smooth;
}

/* Corps de page : fond sombre, police sérif, texte blanc cassé */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;   /* interligne confortable pour la lecture */
  -webkit-font-smoothing: antialiased;   /* rendu des polices plus net sur macOS/Chrome */
}

/* Liens : couleur accent, transition douce au survol */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s;
}
a:hover { color: var(--taupe); }

/*
  Images responsives : on s'assure qu'elles ne débordent jamais de leur conteneur.
  "display: block" supprime l'espace blanc parasite sous les images (comportement inline par défaut).
*/
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
  Quand une image a des attributs width ET height en HTML,
  on force height:auto pour que le navigateur calcule la hauteur
  en respectant le ratio d'aspect — ça évite le CLS (décalage de mise en page).
*/
img[width][height] {
  height: auto;
}

/* Tous les titres utilisent la police display (Playfair) pour le style éditorial */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.25;
}


/* =============================================================================
   4. IMAGES — ratios et dimensions pour éviter le CLS
   ============================================================================= */

/*
  On fixe un ratio d'aspect pour les avatars des scientifiques.
  Comme ça, même si l'image est lente à charger, le navigateur
  réserve déjà l'espace nécessaire et il n'y a pas de saut de page.
*/
.card-scientist-avatar,
.panel-sci-avatar {
  aspect-ratio: 1 / 1;   /* carré parfait */
  object-fit: cover;     /* l'image remplit le carré sans se déformer */
}

/*
  Photo principale d'un article vedette : ratio cinématique 16/9.
  "object-position" permet de cadrer sur la partie haute du sujet.
*/
.card-featured-img--photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 280px;
  object-fit: cover;
  object-position: center -140px;   /* on remonte un peu pour mieux cadrer */
  display: block;
}

/*
  Photo miniature dans les cartes secondaires : petit carré compact.
  "flex-shrink: 0" empêche l'image de rétrécir quand le texte à côté est long.
*/
.card-secondary-img--photo {
  width: 90px;
  min-width: 90px;
  aspect-ratio: 1 / 1;
  max-height: 80px;
  object-fit: cover;
  object-position: center top;   /* on cadre sur le visage */
  border-radius: var(--radius);
  display: block;
  flex-shrink: 0;
}


/* =============================================================================
   5. HEADER — topbar, identité de marque, navigation
   ============================================================================= */

/* --- Topbar : fine barre tout en haut avec la date et le lien connexion --- */

/*
  La topbar est une fine barre d'information au-dessus du logo.
  Elle utilise le fond le plus sombre (onyx) pour se distinguer du reste du header.
*/
.topbar {
  background: var(--onyx);
  border-bottom: 1px solid var(--border);
  padding: .45rem 0;
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}

/* Lien "Connexion" dans la topbar — légèrement mis en valeur */
.topbar-login {
  color: var(--taupe);
  font-weight: 600;
  transition: color .2s;
}
.topbar-login:hover { color: var(--text); }


/* --- Brand strip : zone avec le logo, le nom du site et son sous-titre --- */

/*
  La "brand strip" est la grande zone centrale avec le nom du magazine.
  Elle est séparée de la navbar pour donner du caractère éditorial au site.
*/
.brand-strip {
  background: var(--onyx);
  padding: 1.6rem 0 1.2rem;
  border-bottom: 1px solid var(--border);
}

/* Le lien du logo est un flex colonne pour empiler icône + nom + sous-titre */
.brand-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  color: var(--text);
  text-decoration: none;
}

/* Icône du logo — couleur chocolat chaleureuse */
.brand-icon {
  font-size: 2rem;
  color: var(--choco);
  line-height: 1;
}

/*
  Nom du site : grande taille adaptative avec clamp(), en italique gras.
  Le dégradé de texte donne un effet de brillance dorée au nom.
*/
.brand-name {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  font-style: italic;
  margin: 0;
  background: linear-gradient(135deg, var(--text) 40%, var(--taupe));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sous-titre du site en petites capitales espacées */
.brand-sub {
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}


/* --- Navbar principale : menu de navigation avec barre de recherche --- */

/*
  La navbar principale utilise le fond "coffee" (brun foncé)
  pour la différencier visuellement de la brand strip juste au-dessus.
*/
.main-navbar {
  background: var(--coffee);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

/* Hauteur minimale de la navbar pour éviter qu'elle soit trop compressée */
.main-navbar .container { min-height: 54px; }

/* Liens de navigation : espacement, taille, et transition de survol */
.main-navbar .nav-link {
  color: var(--text-light) !important;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1rem .8rem !important;
  transition: color .2s, background .2s;
  border-radius: var(--radius);
}
/* Lien actif ou survolé : fond légèrement lumineux + texte plus blanc */
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
  color: var(--text) !important;
  background: rgba(154,136,115,.1);
}

/* Menu déroulant (dropdown) : fond sombre avec coins arrondis */
.dropdown-menu.dropdown-menu-dark {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: .5rem;
  min-width: 200px;
}
.dropdown-menu.dropdown-menu-dark .dropdown-item {
  color: var(--text-light);
  border-radius: var(--radius);
  font-size: .88rem;
  padding: .45rem .85rem;
  transition: background .2s, color .2s;
}
.dropdown-menu.dropdown-menu-dark .dropdown-item:hover {
  background: rgba(117,64,67,.25);   /* teinte chocolat au survol */
  color: var(--text);
}
.dropdown-menu.dropdown-menu-dark .dropdown-divider {
  border-color: var(--border);
}

/*
  Barre de recherche dans la navbar : input avec fond semi-transparent
  et bouton de recherche chocolat collé à droite.
*/
.search-group .form-control {
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border-mid);
  color: var(--text);
  border-right: none;   /* fusionne visuellement avec le bouton */
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: .85rem;
}
.search-group .form-control::placeholder { color: var(--text-muted); }
.search-group .form-control:focus {
  background: rgba(255,255,255,.1);
  border-color: var(--taupe);
  box-shadow: none;
  color: var(--text);
}

/* Bouton loupe : arrondi seulement à droite pour former un groupe avec l'input */
.btn-search {
  background: var(--choco);
  color: #fff;
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .42rem .85rem;
  transition: background .2s;
}
.btn-search:hover { background: #8c4f52; }

/* Bouton hamburger (menu mobile) */
.navbar-toggler {
  border-color: var(--border-mid);
  padding: .3rem .6rem;
}
/* On inverse la couleur de l'icône hamburger pour qu'elle soit visible sur fond sombre */
.navbar-toggler-icon {
  filter: invert(1);
}

/* Nom du site affiché dans la navbar (visible surtout sur mobile) */
.navbar-brand {
  color: var(--text) !important;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
}


/* =============================================================================
   6. HERO — grande bannière d'accueil
   ============================================================================= */

/*
  Le hero occupe 85% de la hauteur de l'écran pour faire une forte impression dès l'arrivée.
  L'image de fond est recouverte d'un dégradé noir pour que le texte reste lisible.
*/
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      to bottom,
      rgba(15,14,13,.3) 0%,    /* transparent en haut */
      rgba(15,14,13,.8) 60%,   /* de plus en plus opaque */
      var(--bg) 100%            /* fondu vers le fond de la page */
    ),
    url('/images/1_background_hero.webp') center/cover no-repeat;
  overflow: hidden;
  padding: 6rem 1rem 4rem;
}

/* Le contenu du hero est centré et limité en largeur pour rester lisible */
.hero-content {
  position: relative;
  z-index: 1;   /* au-dessus du fond */
  max-width: 780px;
  margin: 0 auto;
}

/*
  Badge "À la une" : petite pastille arrondie en haut du hero.
  Le fond rouge semi-transparent et la bordure donnent un effet de badge éditorial.
*/
.hero-badge {
  display: inline-block;
  background: rgba(117, 64, 67, 0.612);
  border: 1px solid rgba(117, 64, 67, 0.861);
  color: var(--taupe);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 50px;
  margin-bottom: 1.4rem;
}

/* Titre principal du hero : taille adaptative via clamp() entre 2.2rem et 4rem */
.hero-title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  color: var(--text);
}
/* Les mots en italique dans le titre prennent la couleur taupe */
.hero-title em { color: var(--taupe); font-style: italic; }

/* Sous-titre du hero : plus petit, centré, limité en largeur pour le confort de lecture */
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-light);
  margin-bottom: 2.2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Boutons du hero --- */

/* Bouton primaire (plein) : fond chocolat, légère translation vers le haut au survol */
.btn-primary-custom {
  background: var(--choco2);
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .04em;
  padding: .75rem 1.8rem;
  border-radius: var(--radius);
  transition: background .2s, transform .15s;
}
.btn-primary-custom:hover {
  background: #8c4f52;
  color: #fff;
  transform: translateY(-2px);   /* légère élévation au survol */
}

/* Bouton secondaire (contour) : transparent avec bordure, discret mais lisible */
.btn-outline-custom {
  background: transparent;
  border: 1.5px solid var(--border-mid);
  color: var(--text-light);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .04em;
  padding: .72rem 1.8rem;
  border-radius: var(--radius);
  transition: border-color .2s, color .2s, transform .15s;
}
.btn-outline-custom:hover {
  border-color: var(--taupe);
  color: var(--text);
  transform: translateY(-2px);
}

/*
  Indicateur de défilement : petite flèche animée en bas du hero.
  Elle rebondit en boucle pour inviter l'utilisateur à scroller.
*/
.hero-scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 1.2rem;
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}


/* =============================================================================
   7. STATS — bande de chiffres clés
   ============================================================================= */

/*
  Bande de 4 chiffres statistiques (articles, scientifiques...).
  Le fond "coffee" la distingue du hero au-dessus et de la section suivante.
*/
.stats-band {
  background: var(--coffee);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
}

/* Chaque statistique : séparée par une bordure verticale discrète */
.stat-item {
  padding: 1rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
/* On supprime la bordure du dernier item pour éviter une bordure en bout de ligne */
.stat-item:last-child { border-right: none; }

/* Le chiffre lui-même : grand, gras, police display */
.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
/* L'étiquette sous le chiffre : petite, espacée, en majuscules */
.stat-label {
  font-size: .78rem;
  color: var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* =============================================================================
   8. SECTIONS DE CONTENU — en-têtes et structure communes
   ============================================================================= */

/*
  Toutes les grandes sections de la page partagent le même espacement vertical.
  Ça donne un rythme régulier et professionnel à la mise en page.
*/
.section-featured,
.section-categories,
.section-recent,
.section-listing {
  padding: 5rem 0;
}

/* Espace sous le titre de section avant le contenu */
.section-header { margin-bottom: 2.5rem; }

/* Petite étiquette au-dessus du titre de section (ex: "À la une", "Catégories") */
.section-label {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 700;
  margin-bottom: .5rem;
}

/* Titre de section : taille adaptative */
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  margin-bottom: .5rem;
}

/* Sous-titre descriptif de la section */
.section-sub {
  color: var(--text-muted);
  font-size: .95rem;
}


/* =============================================================================
   9. BADGES DE CATEGORIE — pastilles colorées par discipline
   ============================================================================= */

/*
  Les badges de catégorie sont des petites pastilles affichées sur les cartes
  pour indiquer le domaine scientifique (astronomie, biologie, etc.).
  Chaque catégorie a sa propre couleur pour une identification rapide.
*/
.card-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: 50px;
}

/* Couleur par défaut (astronomie) : vert sombre discret */
.card-cat-badge--astronomie,
.card-cat-badge:not([class*="--"]) {
  background: rgba(55,66,61,.4);
  color: #7faa94;
  border: 1px solid rgba(55,66,61,.6);
}
/* Biologie : teinte café-brun */
.card-cat-badge--biologie {
  background: rgba(58,38,24,.4);
  color: var(--taupe);
  border: 1px solid rgba(58,38,24,.6);
}
/* Physique : teinte rouge-chocolat marquée */
.card-cat-badge--physique {
  background: rgba(117, 64, 67, 0.863);
  color: #f7b7ba;
  border: 1px solid rgb(117, 64, 67);
}
/* Chimie : teinte taupe neutre */
.card-cat-badge--chimie {
  background: rgba(154,136,115,.15);
  color: var(--taupe);
  border: 1px solid rgba(154,136,115,.35);
}

/* Version plus petite des badges, utilisée dans des espaces compacts */
.card-cat-badge--sm { font-size: .65rem; }


/* =============================================================================
   10. CARTES VEDETTES — grande carte principale de la une
   ============================================================================= */

/*
  La carte vedette (featured) est la plus grande carte de la page d'accueil.
  Elle affiche le dernier article mis en avant avec une image et une description.
  La translation au survol donne un retour visuel interactif.
*/
.card-featured {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.card-featured:hover {
  border-color: var(--border-mid);
  transform: translateY(-3px);
}

/* Zone d'image : relative pour pouvoir y poser le badge en absolu */
.card-featured-img-wrap { position: relative; }

/* Conteneur de l'image : hauteur fixe avec image de fond */
.card-featured-img {
  height: 280px;
  background-size: cover;
  background-position: center;
}

/*
  Version astronomie sans photo : dégradé bleu nuit avec un emoji galaxie.
  C'est utilisé quand on n'a pas d'image disponible pour cet article.
*/
.card-featured-img--astro {
  background: linear-gradient(135deg, #0a0f1e 0%, #1a1232 40%, var(--charcoal) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-featured-img--astro::after {
  content: '🌌';
  font-size: 5rem;
  opacity: .4;
}

/* Le badge de catégorie sur l'image est positionné en haut à gauche */
.card-cat-badge { position: relative; }
.card-featured-img-wrap .card-cat-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* Corps de la carte : les éléments s'empilent verticalement avec un espacement */
.card-featured-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;   /* la carte prend toute la hauteur restante */
}

/* Métadonnées (date, auteur) : petits textes en ligne */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  font-size: .78rem;
  color: var(--text);
}

/* Titre de l'article vedette */
.card-featured-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Description : prend l'espace disponible pour pousser le bouton vers le bas */
.card-featured-desc {
  color: var(--text-light);
  font-size: .92rem;
  flex: 1;
}

/* Bouton "Lire la suite" avec flèche : chocolat, positionné en bas à gauche */
.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--choco2);
  color: #fff;
  border: none;
  padding: .5rem 1.2rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  align-self: flex-start;
  transition: background .2s;
}
.btn-read-more:hover { background: #8c4f52; color: #fff; }


/* =============================================================================
   11. CARTES SECONDAIRES — petites cartes horizontales
   ============================================================================= */

/*
  Les cartes secondaires sont 3 petites cartes compactes affichées
  à côté de la carte vedette. Elles sont horizontales : image à gauche, texte à droite.
*/
.card-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  transition: border-color .2s;
  flex: 1;   /* toutes les cartes secondaires s'étirent de la même façon */
}
.card-secondary:hover { border-color: var(--border-mid); }

/* Vignette d'image : taille fixe à gauche de la carte */
.card-secondary-img {
  width: 90px;
  min-width: 90px;
  height: 80px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
}
/* Dégradés de substitution quand il n'y a pas de photo */
.card-secondary-img--bio  { background: linear-gradient(135deg, var(--coffee), var(--charcoal)); }
.card-secondary-img--phys { background: linear-gradient(135deg, var(--choco), var(--coffee)); }
.card-secondary-img--chim { background: linear-gradient(135deg, var(--charcoal), var(--onyx)); }

/* Corps : empilement vertical du titre et du lien */
.card-secondary-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.card-secondary-title {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

/* Lien "En savoir plus" : poussé vers le bas de la carte grâce à margin-top:auto */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--choco);
  margin-top: auto;
}
.card-link:hover { color: var(--taupe); }


/* =============================================================================
   12. CARTES CATEGORIES — 4 domaines scientifiques cliquables
   ============================================================================= */

/*
  La section catégories a un fond légèrement différent du reste de la page
  pour la faire ressortir visuellement comme une zone à part.
*/
.section-categories { background: var(--surface); }

/*
  Chaque carte de catégorie est centrée verticalement (icône + nom + compteur).
  La translation au survol donne un effet "soulèvement" très courant sur les cartes interactives.
*/
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
  background: var(--surface2);
  text-align: center;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-mid);
}

/* Chaque catégorie a sa propre teinte de fond au survol */
.cat-card--physique:hover   { background: rgba(117,64,67,.15); }
.cat-card--biologie:hover   { background: rgba(58,38,24,.4); }
.cat-card--astronomie:hover { background: rgba(55,66,61,.25); }
.cat-card--chimie:hover     { background: rgba(154,136,115,.1); }

/* Grande icône de catégorie */
.cat-icon {
  font-size: 2.2rem;
  color: var(--taupe);
  line-height: 1;
}
/* Nom de la catégorie : police display pour le côté éditorial */
.cat-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
/* Compteur d'articles : petit et discret */
.cat-count {
  font-size: .75rem;
  color: var(--text-muted);
  letter-spacing: .05em;
}


/* =============================================================================
   13. BANDE CITATION — mise en avant d'une citation de scientifique
   ============================================================================= */

/*
  La bande citation est une interruption visuelle dans la page.
  Elle affiche une citation inspirante sur fond café pour rompre le rythme.
*/
.quote-band {
  background: var(--coffee);
  padding: 4rem 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Grande guillemet décorative au-dessus de la citation */
.quote-icon {
  font-size: 3rem;
  color: var(--choco);
  opacity: .6;
  display: block;
  margin-bottom: 1rem;
}
/* Texte de la citation en italique avec police display */
.quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: .8rem;
}
/* Nom de l'auteur de la citation : petites majuscules espacées */
.quote-author {
  font-size: .85rem;
  color: var(--taupe);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-style: normal;
}


/* =============================================================================
   14. CARTES ARTICLES & LISTING — grille des découvertes
   ============================================================================= */

/*
  Ces cartes sont utilisées dans deux contextes :
  - .card-article : page d'accueil (section "Articles récents")
  - .card-listing : page listing (catalogue des découvertes)
  Comme elles partagent les mêmes styles de base, on les groupe ensemble.
*/
.card-article,
.card-listing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: border-color .2s, transform .2s;
}
.card-article:hover,
.card-listing:hover {
  border-color: var(--border-mid);
  transform: translateY(-3px);
}

/* En-tête de carte : badge catégorie à gauche, date à droite */
.card-article-top,
.card-listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Date de publication */
.card-article-date {
  font-size: .75rem;
  color: var(--text-muted);
}

/* Titre de l'article dans la carte */
.card-article-title,
.card-listing-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

/* Résumé de l'article : texte atténué, prend l'espace restant */
.card-article-desc,
.card-listing-desc {
  font-size: .88rem;
  color: var(--text-light);
  flex: 1;
  margin: 0;
}

/* Pied de carte : auteur à gauche, bouton à droite, séparé par une bordure */
.card-article-footer,
.card-listing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}

/* Nom de l'auteur : petit et discret */
.card-article-author {
  font-size: .75rem;
  color: var(--text-muted);
}


/* =============================================================================
   15. FOOTER — pied de page avec liens, newsletter et crédits
   ============================================================================= */

/*
  Le footer est structuré en 3 parties :
  - footer-top : colonnes avec les liens et la newsletter
  - footer-bottom : ligne de crédits
  Le fond "onyx" (noir profond) marque clairement la fin de la page.
*/
.site-footer {
  background: var(--onyx);
  border-top: 1px solid var(--border);
}

/* Zone principale du footer avec espacement généreux */
.footer-top { padding: 4rem 0 2rem; }

/* Identité de marque dans le footer (icône + nom) */
.footer-brand {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.footer-brand-icon {
  font-size: 1.6rem;
  color: var(--choco);
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  font-style: italic;
  color: var(--text);
}

/* Courte description du site sous le logo */
.footer-desc {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

/* Icônes des réseaux sociaux : petits boutons circulaires avec bordure */
.footer-social {
  display: flex;
  gap: .7rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: .9rem;
  transition: border-color .2s, color .2s;
}
.footer-social a:hover { border-color: var(--taupe); color: var(--text); }

/* Titre des colonnes du footer : petites majuscules espacées en taupe */
.footer-heading {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--taupe);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Liste de liens du footer : sans puce, empilés verticalement */
.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-links li a {
  font-size: .85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: color .2s;
}
.footer-links li a:hover { color: var(--text); }
/* Petite puce décorative chocolat devant chaque lien */
.footer-links li a i { font-size: .6rem; color: var(--choco); }

/* Formulaire newsletter : input + bouton côte à côte */
.footer-newsletter .form-control {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-size: .85rem;
  border-right: none;   /* fusionne avec le bouton */
}
.footer-newsletter .form-control::placeholder { color: var(--text-muted); }
.footer-newsletter .form-control:focus {
  box-shadow: none;
  border-color: var(--taupe);
  background: var(--surface2);
  color: var(--text);
}

/* Bouton d'inscription à la newsletter */
.btn-newsletter {
  background: var(--choco);
  color: #fff;
  border: none;
  padding: .42rem .85rem;
  transition: background .2s;
}
.btn-newsletter:hover { background: #8c4f52; }

/* Barre de crédits tout en bas : fond légèrement plus clair que le footer */
.footer-bottom {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  font-size: .8rem;
  color: var(--text-muted);
}
/* Le nom du créateur en gras taupe */
.footer-credits strong { color: var(--taupe); }


/* =============================================================================
   16. PAGE LISTING — hero, breadcrumb, sidebar, filtres, pagination
   ============================================================================= */

/* --- Hero de page : bannière compacte en haut des pages internes --- */

/*
  Contrairement au hero de la page d'accueil, celui-ci est plus petit.
  Il affiche juste le titre de la page et un sous-titre.
*/
.page-hero {
  background: var(--coffee);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0 2rem;
}
.page-hero-title {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 900;
  margin-bottom: .4rem;
}
.page-hero-sub { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* --- Fil d'Ariane (breadcrumb) --- */

/* On réutilise le composant Bootstrap en le re-stylant pour notre thème sombre */
.breadcrumb-wrap { margin-bottom: 1rem; }
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--text-muted);
  font-size: .8rem;
  margin: 0;
  background: none;
}
.breadcrumb-item a { color: var(--taupe); }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

/* --- Sidebar de filtres --- */

/*
  La sidebar reste visible pendant le défilement grâce à "position: sticky".
  Elle contient les filtres par catégorie et les options de tri.
*/
.listing-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 1rem;
}
.sidebar-title {
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.2rem;
  font-weight: 700;
  font-family: var(--font-body);
}
.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

/* --- Boutons de filtre par catégorie --- */

/*
  Ce sont des boutons toggleables : on clique pour filtrer les articles.
  L'état actif (--active) est visuellement distinct pour montrer quel filtre est sélectionné.
*/
.filter-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-light);
  background: transparent;
  border: 1px solid var(--border);
  transition: background .2s, border-color .2s, color .2s;
}
.filter-btn:hover {
  background: rgba(154,136,115,.1);
  border-color: var(--border-mid);
  color: var(--text);
}
/* Filtre actif : fond chocolat semi-transparent */
.filter-btn--active {
  background: rgba(117,64,67,.2);
  border-color: rgba(117,64,67,.4);
  color: var(--text);
}

/* --- Select de tri --- */

/*
  Le composant select natif est re-stylé pour correspondre au thème sombre.
  L'icône de flèche personnalisée remplace celle du navigateur.
*/
.form-select-dark {
  background-color: var(--surface2);
  border: 1px solid var(--border-mid);
  color: var(--text);
  font-size: .85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239A8873' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
.form-select-dark:focus {
  box-shadow: none;
  border-color: var(--taupe);
  background-color: var(--surface2);
  color: var(--text);
}
.form-select-dark option { background: var(--surface); }

/* Compteur de résultats affiché au-dessus de la grille */
.listing-count { font-size: .88rem; color: var(--text-muted); }

/* --- Boutons de bascule vue grille / liste --- */

/* Deux petits boutons icônes pour changer l'affichage des cartes */
.view-toggle { display: flex; gap: .4rem; }
.view-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.view-btn.active,
.view-btn:hover { border-color: var(--taupe); color: var(--text); }

/* Fond explicite pour les cartes dans le listing */
.card-listing { background: var(--surface); }

/* --- Pagination --- */

/*
  On re-style la pagination Bootstrap pour coller à notre thème.
  La page active prend la couleur chocolat pour se démarquer clairement.
*/
.pagination { gap: .3rem; }
.page-link {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
  border-radius: var(--radius) !important;
  padding: .4rem .75rem;
}
.page-link:hover,
.page-item.active .page-link {
  background: var(--choco);
  border-color: var(--choco);
  color: #fff;
}
/* Lien désactivé (précédent sur page 1, suivant sur dernière page) */
.page-item.disabled .page-link { background: var(--surface); opacity: .4; }


/* =============================================================================
   17. CARTES EXPANDABLES — section qui se déplie pour afficher le détail
   ============================================================================= */

/*
  Sur la page listing, chaque carte peut s'ouvrir au clic
  pour afficher plus d'infos sur la découverte et le scientifique.
  Ce système utilise JS pour animer max-height.
*/

/* Bloc scientifique (avatar + nom + nationalité) dans la carte */
.card-scientist {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .4rem 0 .6rem;
}

/* Avatar circulaire du scientifique */
.card-scientist-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-mid);
  background: var(--surface2);
  flex-shrink: 0;
}

/* Nom et nationalité empilés verticalement */
.card-scientist-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  overflow: hidden;
}
.card-scientist-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* "..." si le nom est trop long */
}
.card-scientist-nat {
  font-size: .7rem;
  color: var(--text-muted);
  letter-spacing: .04em;
}

/* Étiquette de domaine scientifique sur la carte */
.card-domaine {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .06em;
  margin-bottom: .2rem;
}

/*
  Corps expandable de la carte : caché par défaut (max-height: 0).
  Le JS ajoute la classe "is-open" et injecte la bonne max-height
  pour déclencher la transition CSS fluide.
*/
.card-expand-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* Bloc de méta-infos dans la zone dépliée (score, domaine) */
.card-expand-meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .6rem 0 .4rem;
  padding: .5rem .7rem;
  background: rgba(154,136,115,.08);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Score d'impact de la découverte */
.card-expand-score { font-size: .8rem; color: var(--taupe); }
.card-expand-score strong { color: var(--text); }

/* Biographie courte : filet chocolat à gauche comme une citation */
.card-expand-bio {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.55;
  padding: .5rem .7rem;
  border-left: 2px solid var(--choco);
  margin-top: .4rem;
}

/* Bouton qui déclenche l'ouverture/fermeture de la carte */
.card-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* La petite flèche tourne de 180° quand la carte est ouverte (géré par JS) */
.expand-chevron {
  transition: transform .3s ease;
  font-size: .85rem;
}

/*
  Quand une carte est expanded, elle prend une bordure chocolat subtile
  et une ombre douce pour la démarquer des autres.
  (les deux sélecteurs fusionnés qui étaient dupliqués dans le fichier original)
*/
.card-listing--expandable.is-expanded {
  border-color: rgba(117,64,67,.5);
  box-shadow: 0 0 0 1px rgba(117,64,67,.2), 0 4px 24px rgba(117,64,67,.1);
}

/* --- Panneau de détail par ligne (desktop) --- */

/*
  Sur desktop, le panneau de détail s'ouvre sous toute la rangée de cartes,
  pas juste sous une seule carte. C'est géré comme un "accordion de ligne".
*/
.row-expand-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
  padding: 0 !important;
}

/* Contenu interne du panneau : grille 2 colonnes (contenu + infos scientifique) */
.row-expand-inner {
  background: var(--surface);
  border: 1px solid rgba(117,64,67,.35);
  border-radius: var(--radius-lg);
  margin: .5rem 0 1rem;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  animation: panelFadeIn .3s ease forwards;
}
/* Légère apparition du panneau avec un fondu et translation vers le bas */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bouton de fermeture du panneau : croix en haut à droite */
.panel-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(154,136,115,.1);
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s, color .2s;
  z-index: 2;
}
.panel-close:hover { background: rgba(117,64,67,.3); color: var(--text); }

/* Titre et description de la découverte dans le panneau */
.panel-title {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.25;
  margin: .5rem 0 .8rem;
}
.panel-desc {
  font-size: .92rem;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Ligne de méta-données (domaine, score) dans le panneau */
.panel-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: .6rem .9rem;
  background: rgba(154,136,115,.06);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
}
.panel-domaine { color: var(--text-muted); }
.panel-score   { color: var(--taupe); }
.panel-score strong { color: var(--text); }

/* Colonne de droite du panneau : infos sur le scientifique */
.panel-right {
  border-left: 1px solid var(--border);
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Bloc scientifique dans le panneau : plus grand que dans la carte */
.panel-sci {
  display: flex;
  align-items: center;
  gap: .9rem;
}
/* Avatar du scientifique : plus grand (64px) que dans la carte (42px) */
.panel-sci-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-mid);
  background: var(--surface2);
  flex-shrink: 0;
}
/* Placeholder quand il n'y a pas de photo de scientifique */
.panel-sci-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--text-muted);
}
.panel-sci-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.panel-sci-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.panel-sci-nat {
  font-size: .75rem;
  color: var(--text-muted);
  letter-spacing: .06em;
}
/* Biographie du scientifique : filet chocolat à gauche, en italique */
.panel-sci-bio {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-left: 2px solid var(--choco);
  padding-left: .7rem;
  margin: 0;
  font-style: italic;
}

/* --- Icône "aucun résultat" --- */

/* Icône affichée quand aucune découverte ne correspond aux filtres */
.no-results-icon {
  font-size: 3.5rem;
  color: var(--text-muted);
  opacity: .4;
  display: block;
}


/* =============================================================================
   18. PAGES D'AUTHENTIFICATION — connexion et inscription
   ============================================================================= */

/*
  La page de connexion/inscription est centrée verticalement
  et possède un subtil dégradé radial chocolat en arrière-plan
  pour ne pas être trop sobre.
*/
.auth-section {
  min-height: 70vh;
  padding: 4rem 0;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 60% 0%, rgba(117,64,67,.12) 0%, transparent 60%),
    var(--bg);
}

/* Carte du formulaire : fond surface avec bord visible */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* En-tête de la carte : icône + titre + sous-titre sur fond café */
.auth-card-header {
  background: var(--coffee);
  border-bottom: 1px solid var(--border);
  padding: 2rem 2rem 1.6rem;
}
.auth-icon {
  font-size: 2.4rem;
  color: var(--choco);
  margin-bottom: .6rem;
  line-height: 1;
}
.auth-title {
  font-size: 1.7rem;
  font-weight: 900;
  margin-bottom: .3rem;
}
.auth-sub {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
}

/* Formulaire : empilé verticalement avec un espacement entre les champs */
.auth-form {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.auth-field { display: flex; flex-direction: column; gap: .35rem; }

/* Label du champ en petites majuscules */
.auth-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* Wrapper de l'input : position relative pour y poser l'icône à gauche */
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Icône décorative à gauche de l'input (ex: enveloppe, cadenas) */
.auth-input-icon {
  position: absolute;
  left: .9rem;
  color: var(--text-muted);
  font-size: .95rem;
  pointer-events: none;   /* l'icône ne capte pas les clics */
  z-index: 1;
}

/* Champ de saisie : fond sombre avec icône incluse dans le padding gauche */
.auth-input {
  background: var(--surface2) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text) !important;
  padding-left: 2.5rem !important;    /* espace pour l'icône à gauche */
  padding-right: 2.8rem !important;   /* espace pour le bouton oeil à droite */
  height: 46px;
  border-radius: var(--radius) !important;
  font-size: .92rem;
  transition: border-color .2s, box-shadow .2s;
}
.auth-input::placeholder { color: var(--text-muted) !important; }
.auth-input:focus {
  border-color: var(--taupe) !important;
  box-shadow: 0 0 0 3px rgba(154,136,115,.15) !important;
  outline: none;
  background: var(--surface) !important;
}

/* Bouton "afficher/masquer le mot de passe" — oeil à droite de l'input */
.auth-toggle-pw {
  position: absolute;
  right: .7rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .95rem;
  padding: .25rem;
  cursor: pointer;
  transition: color .2s;
  z-index: 2;
}
.auth-toggle-pw:hover { color: var(--text); }

/* Case à cocher "Se souvenir de moi" : re-stylée aux couleurs du thème */
.auth-check {
  background-color: var(--surface2);
  border-color: var(--border-mid);
  border-radius: 3px;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}
.auth-check:checked {
  background-color: var(--choco);
  border-color: var(--choco);
}
.auth-check:focus { box-shadow: 0 0 0 3px rgba(117,64,67,.2); }

/* Label de la case à cocher */
.auth-check-label {
  font-size: .83rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.45;
}
.auth-check-label a { color: var(--taupe); }
.auth-check-label a:hover { color: var(--text); }

/* Lien "Mot de passe oublié ?" */
.auth-forgot {
  font-size: .78rem;
  color: var(--text-muted);
  transition: color .2s;
}
.auth-forgot:hover { color: var(--taupe); }

/* Bouton principal du formulaire (connexion / inscription) */
.btn-auth {
  background: var(--choco2);
  color: #fff;
  border: none;
  height: 48px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
  cursor: pointer;
  margin-top: .4rem;
}
.btn-auth:hover  { background: #8c4f52; transform: translateY(-1px); }
.btn-auth:active { transform: translateY(0); }

/* Variante contour pour les boutons secondaires (ex: connexion avec Google) */
.btn-auth--outline {
  background: transparent;
  border: 1.5px solid var(--border-mid);
  color: var(--text-light);
}
.btn-auth--outline:hover {
  background: rgba(154,136,115,.1);
  border-color: var(--taupe);
  color: var(--text);
  transform: translateY(-1px);
}

/* Pied de la carte auth : lien pour basculer entre connexion et inscription */
.auth-card-footer {
  background: var(--surface2);
  border-top: 1px solid var(--border);
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.auth-switch-text { font-size: .85rem; color: var(--text-muted); }
.auth-switch-link {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  transition: color .2s;
}
.auth-switch-link:hover { color: var(--taupe); }

/* --- Indicateur de force du mot de passe --- */

/*
  Barre de progression sous le champ mot de passe.
  La largeur et la couleur sont mises à jour par JS selon la complexité du mot de passe.
*/
.pw-strength { display: flex; align-items: center; gap: .7rem; }
.pw-strength-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width .3s ease, background .3s ease;
}
.pw-strength-label {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
  transition: color .3s;
}


/* =============================================================================
   19. RESPONSIVE — adaptations mobile et tablette
   ============================================================================= */

/* --- Mobile : moins de 576px --- */

@media (max-width: 576px) {
  /* Les stats s'empilent verticalement avec une séparation horizontale */
  .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-item:last-child { border-bottom: none; }

  /* Les cartes secondaires s'empilent (image au-dessus, texte en dessous) */
  .card-secondary { flex-direction: column; }
  .card-secondary-img { width: 100%; height: 120px; object-position: center -140px; }

  /* Le hero est moins haut sur petit écran */
  .hero { min-height: 70vh; }
}

/* --- Tablette : moins de 768px --- */

@media (max-width: 768px) {
  /* Brand strip moins haute sur mobile */
  .brand-strip { padding: 1rem 0 .8rem; }

  /* Menu de navigation replié : fond plus sombre, légèrement indenté */
  .main-navbar .navbar-collapse {
    background: var(--onyx);
    padding: 1rem;
    border-top: 1px solid var(--border);
  }
  .main-navbar .nav-link { padding: .6rem .5rem !important; }

  /* La sidebar n'est plus sticky sur mobile (elle passe au-dessus des cartes) */
  .listing-sidebar { position: static; }
}

/* --- Cartes expandables : responsive --- */

/*
  Sur desktop (> 500px), on cache le mode "accordion dans la carte" (card-expand-mobile)
  car on utilise le panneau pleine largeur à la place.
  Sur mobile (< 500px), c'est l'inverse.
*/
@media (min-width: 500px) {
  .card-expand-mobile { display: none !important; }
}
@media (max-width: 499px) {
  .row-expand-panel  { display: none !important; }
  .card-expand-mobile { display: block; }
}

/* Sur tablette (500–860px), le panneau passe d'une grille 2 colonnes à 1 colonne */
@media (max-width: 860px) and (min-width: 500px) {
  .row-expand-inner { grid-template-columns: 1fr; }
  .panel-right {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* --- Cartes full-width sur desktop (> 576px) --- */

/*
  Quand une carte listing est en pleine largeur (col-12),
  on réorganise ses éléments en grille horizontale :
  avatar à gauche, titre + description au centre, bouton à droite.
*/
@media (min-width: 576px) {
  .col-12.card-col .card-listing--expandable {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "sci    header  header"
      "sci    title   title"
      "sci    domaine domaine"
      "footer footer  footer";
    column-gap: 1.5rem;
    align-items: start;
  }

  .col-12.card-col .card-listing-header  { grid-area: header; }
  .col-12.card-col .card-scientist       { grid-area: sci; flex-direction: column; align-items: center; text-align: center; width: 80px; margin: 0; }
  .col-12.card-col .card-scientist-name  { white-space: normal; font-size: .75rem; }
  .col-12.card-col .card-scientist-avatar{ width: 100%; height: 100%; }
  .col-12.card-col .card-listing-title   { grid-area: title; }
  .col-12.card-col .card-domaine         { grid-area: domaine; }
  .col-12.card-col .card-expand-body     { grid-column: 1 / -1; }
  .col-12.card-col .card-listing-footer  { grid-area: footer; grid-column: 1 / -1; }
}

/* Sur mobile (< 576px), les cartes full-width retrouvent un empilement classique */
@media (max-width: 575px) {
  .col-12.card-col .card-listing--expandable {
    display: flex;
    flex-direction: column;
  }
}

/* Les cartes full-width ne se soulèvent pas au survol — elles sont déjà grandes */
.col-12.card-col .card-listing:hover {
  transform: none;
}


/* =============================================================================
   SCROLLBAR PERSONNALISÉE
   ============================================================================= */

/* Webkit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--onyx);
}

::-webkit-scrollbar-thumb {
  background: var(--choco);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--choco2);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--choco) var(--onyx);
}


/* =============================================================================
   COULEUR DE SÉLECTION DE TEXTE
   ============================================================================= */

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

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