/* =====================================================================
   LE LABO — style.css
   ---------------------------------------------------------------------
   Design system tire AU PIXEL de la maquette Figma d'Eleona
   (frame "Design system"). Toutes les valeurs (couleurs, polices,
   tailles, rayons, bordures) viennent du JSON des frames Figma.

   SOMMAIRE
     1. Polices (@font-face Bimbo + import Google : Anton, Nunito)
     2. Variables (couleurs, typo, espacements, rayons, ombres)
     3. Reset minimal
     4. Typographie (H1..H4, sous-titre, textes, légende)
     5. Boutons (principal / secondaire / pastel / bloqué + survols)
     6. Utilitaires (conteneur, sections, helpers)
   ===================================================================== */

/* ---------- 1. POLICES ---------- */
/* Anton (titres) + Nunito (texte) : Google Fonts.
   Bimbo (sous-titres) : police fournie par Eleona, hébergée localement.
   ⚠️ Version "Trial" : OK pour la maquette/soutenance, licence complète
   requise avant une mise en ligne publique durable. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nunito:wght@400;600;700&display=swap');

@font-face {
  font-family: 'Bimbo';
  src: url('../fonts/Bimbo.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ---------- 2. VARIABLES ---------- */
:root {
  /* Couleurs de base */
  --cream:        #f8f5ed;  /* fond principal */
  --ink:          #333333;  /* texte + bordures */
  --white:        #ffffff;

  /* Gris */
  --gray:         #5a5a5a;
  --gray-muted:   #9aa0a6;
  --gray-light:   #d9d9d9;

  /* Tons chauds (univers chats / illustrations) */
  --sand:         #f0d8a8;
  --tan:          #c9986b;
  --terracotta:   #b8784a;
  --rust:         #a25f3b;
  --brown:        #6b4f3a;
  --brown-mid:    #7a5c45;
  --brown-dark:   #4a2f24;

  /* Accents pastel (+ variante "au survol" plus saturée) */
  --pink:         #f1d0d0;  --pink-strong:  #ef9594;
  --green:        #b4d8a2;  --green-strong: #78ad5e;
  --blue:         #9fdbe8;  --blue-strong:  #67bdcf;

  /* Rôles sémantiques */
  --bg:           var(--cream);
  --text:         var(--ink);
  --border:       var(--ink);

  /* Couleur d'accent du site (déclinaison choisie par le membre).
     Par défaut rose ; surchargée par [data-nav-theme] (voir plus bas). */
  --accent:        var(--pink);
  --accent-strong: var(--pink-strong);

  /* Polices */
  --font-display: 'Anton', Impact, sans-serif;     /* titres */
  --font-body:    'Nunito', system-ui, sans-serif; /* texte courant + UI */
  --font-script:  'Bimbo', 'Segoe Script', cursive;/* sous-titres */

  /* Échelle typo (px exacts Figma) */
  --h1: 80px;  --h2: 56px;  --h3: 40px;  --h4: 28px;
  --subtitle: 30px;
  --t-important: 20px;  --t-base: 18px;  --t-menu: 16px;  --t-legend: 14px;

  /* Rayons */
  --radius-btn: 20px;   /* boutons (pilule, hauteur 39px Figma) */
  --radius-card: 16px;  /* cartes (à affiner par écran) */

  /* Ombres */
  --shadow-btn:  0 2px 4px rgba(51, 40, 30, .18);
  --shadow-card: 0 4px 16px rgba(51, 40, 30, .12);

  /* Espacements */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Largeur de contenu */
  --maxw: 1200px;
  --w-nav: 1308px;   /* contenu aligné sur la navbar/footer (marge ~66px) */
  --w-sec: 1164px;   /* contenu de section (marge ~138px) */
  --w-band: 1243px;  /* bandes arrondies */

  /* Ombre douce des cartes */
  --shadow-soft: 4px 6px 12px rgba(51, 40, 30, .22);
}

/* ---------- 3. RESET MINIMAL ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
/* Empêche le scroll horizontal quand des éléments débordent volontairement
   d'une section (ex: le fan de cartes qui sort de la bande). */
body { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.36;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* ---------- 4. TYPOGRAPHIE ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.5; color: var(--ink); }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

/* Sous-titre manuscrit (Bimbo) — souvent posé au-dessus d'un H1 */
.subtitle {
  font-family: var(--font-script);
  font-size: var(--subtitle);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}

/* Rôles de texte (d'après la frame Design system) */
.text-important { font-size: var(--t-important); font-weight: 700; line-height: 1.36; }
.text-base      { font-size: var(--t-base);      font-weight: 400; line-height: 1.36; }
.text-menu      { font-size: var(--t-menu);      font-weight: 600; line-height: 1.36; }
.legend         { font-size: var(--t-legend);    font-weight: 400; line-height: 1.36; color: var(--gray); }
.muted          { color: var(--gray-muted); }

/* ---------- 5. BOUTONS ----------
   Base commune : pilule, bordure 2px, libellé Nunito 600 18px, hauteur ~39px.
   Variantes Figma : principal, secondaire, pastel rose/vert/bleu, bloqué. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 39px;
  padding: 7px 18px;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--white);
  box-shadow: var(--shadow-btn);
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }

/* Principal : blanc -> (survol) encre */
.btn--primary { background: var(--white); color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Secondaire : crème -> (survol) encre */
.btn--secondary { background: var(--cream); color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Sable : même teinte que la navbar (bouton "Se connecter") -> survol encre */
.btn--sand { background: var(--sand); color: var(--ink); }
.btn--sand:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Rempli (encre) : état actif / action principale forte (ex: "Continuer") */
.btn--filled { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--filled:hover { background: #000; }

/* Barre de progression (tutos en cours, cartes tuto) — partagée, dispo partout */
.tuto-progress { height: 19px; border: 2px solid var(--ink); border-radius: 20px; background: #fff; overflow: hidden; margin-bottom: 16px; }
.tuto-progress > span { display: block; height: 100%; background: var(--accent-strong); border-radius: 20px; }

/* Pastels : couleur claire -> (survol) couleur saturée, texte encre, bordure encre */
.btn--pink  { background: var(--pink); }
.btn--pink:hover  { background: var(--pink-strong); }
.btn--green { background: var(--green); }
.btn--green:hover { background: var(--green-strong); }
.btn--blue  { background: var(--blue); }
.btn--blue:hover  { background: var(--blue-strong); }

/* Bloqué : gris, sans ombre, non cliquable */
.btn--disabled, .btn:disabled, .btn[disabled] {
  background: var(--gray-light);
  color: var(--gray-muted);
  border-color: var(--gray-muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--sm { min-height: 32px; padding: 5px 14px; font-size: var(--t-menu); }

/* ---------- 6. UTILITAIRES ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }
.section   { padding-block: var(--space-8); }
.stack > * + * { margin-top: var(--space-4); }   /* espace vertical entre enfants */
.center { text-align: center; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }

/* =====================================================================
   7. NAVBAR (bandeau sable #f0d8a8, pleine largeur, hauteur 120px Figma)
   ===================================================================== */
.nav {
  background: var(--sand);
  height: 120px;
}
.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  height: 100%;
  padding-inline: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav__brand { display: flex; align-items: center; gap: var(--space-3); }
.nav__brand .logo-cat { width: auto; height: 56px; }
.nav__brand .logo-text { font-family: var(--font-display); font-size: var(--h3); color: var(--ink); line-height: 1; }
.nav__links { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.nav__links a:not(.btn) { font-family: var(--font-body); font-weight: 700; font-size: var(--t-important); }
.nav__links a:not(.btn):hover { color: var(--terracotta); }
.nav__cta { display: flex; align-items: center; gap: var(--space-4); }
.nav__avatar { width: 40px; height: 40px; }

/* THÈME GLOBAL : la déclinaison choisie pilote --accent sur tout le site */
[data-nav-theme="pink"]  { --accent: var(--pink);  --accent-strong: var(--pink-strong); }
[data-nav-theme="green"] { --accent: var(--green); --accent-strong: var(--green-strong); }
[data-nav-theme="blue"]  { --accent: var(--blue);  --accent-strong: var(--blue-strong); }

/* Navbar MEMBRE + footer suivent l'accent */
.nav--member { background: var(--accent); }
[data-nav-theme] .footer__bg { background: var(--accent); }
.nav__links--member { margin-left: 48px; }
.nav__brand-av { line-height: 0; display: inline-flex; }
/* Logo nav + footer : on montre la forme du chat (contour déjà dans le SVG) */
.nav__brand-av .avatar, .footer__av .avatar { border-radius: 0; overflow: visible; }
.footer__av { line-height: 0; display: inline-flex; }
.nav__member { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
/* Enveloppe de notifications : icône simple (couleur suit le thème), sans boîte */
.nav__notif { position: relative; display: inline-flex; line-height: 0; }
.nav__badge { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #ff383c; color: #ff383c; font-family: var(--font-body); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.nav__links a.is-active { color: var(--terracotta); }
/* Lien Espace admin (visible seulement pour les admins) */
.nav__links a.nav__admin { border: 2px solid var(--ink); border-radius: 999px; padding: 5px 14px; font-size: var(--t-base); }
.nav__links a.nav__admin:hover { background: var(--ink); color: #fff; }

/* Bandeau cookies RGPD (injecté par layout.js, visible sur tout le site) */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; background: #fff; border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-card); padding: 18px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 1000px; margin-inline: auto; }
.cookie-banner p { flex: 1; min-width: 240px; margin: 0; font-size: var(--t-base); }
.cookie-banner__btns { display: flex; gap: 10px; }

/* =====================================================================
   8. FOOTER (bandeau sable, colonnes + mention pédagogique RGPD)
   ===================================================================== */
/* Le footer est injecté par layout.js sur TOUTES les pages -> styles ici
   (pas dans home.css). Couleur portée par .footer__bg (sable, ou thème). */
.footer { padding: 0; }
.footer__bg { background: var(--sand); }
.footer__inner {
  max-width: var(--w-nav); margin-inline: auto; padding: 77px var(--space-5) 0;
  display: grid; grid-template-columns: 600px 1fr 1fr 1fr; gap: 40px;
}
.footer__brand .logo-row { display: flex; align-items: center; gap: 16px; }
.footer__brand .logo-cat { height: 56px; width: auto; }
.footer__brand .logo-text { font-family: var(--font-display); font-size: var(--h3); }
.footer__brand p { margin-top: 16px; max-width: 565px; }
.footer .col-title { font-family: var(--font-body); font-weight: 700; font-size: var(--t-important); margin-bottom: 14px; }
.footer__col a { display: block; padding-block: 5px; }
.footer__col a:hover { color: var(--terracotta); }
.footer__legal { max-width: var(--w-nav); margin: 0 auto; padding: 0 var(--space-5) 36px; }
.footer__legal hr { border: none; border-top: 2px solid var(--ink); max-width: 930px; margin: 34px auto 24px; }
.footer__legal p { text-align: center; font-size: var(--t-legend); color: var(--ink); }
@media (max-width: 920px) { .footer__inner { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   8bis. AVATAR (pile de calques SVG des chats Loki & Neige)
   Indispensable au rendu de LeLaboAvatar.renderAvatar().
   ===================================================================== */
.avatar { position: relative; display: inline-block; border-radius: 50%; overflow: hidden; background: transparent; flex: none; vertical-align: middle; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Éditeur d'avatar (LeLaboAvatar.openBuilder) — calé sur la maquette */
.av-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(24,8,0,.45); display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.av-modal { background: #fff; border: 2px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow-card); width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; padding: var(--space-5); }
.av-body { display: flex; gap: var(--space-5); align-items: flex-start; }
/* Colonne gauche : aperçu sur fond coloré (= thème) + thèmes + au hasard */
.av-left { flex: none; width: 210px; display: flex; flex-direction: column; gap: var(--space-3); }
.av-preview { width: 100%; aspect-ratio: 1; border-radius: 20px; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; }
.av-themes { display: flex; gap: 12px; justify-content: center; }
.av-theme { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0; }
.av-theme.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.av-random { width: 100%; }
/* Colonne droite : onglets + options */
.av-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.av-tab { padding: 7px 16px; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: var(--t-base); color: var(--ink); background: #fff; cursor: pointer; box-shadow: var(--shadow-btn); }
.av-tab.is-active { background: var(--ink); color: #fff; }
.av-panel { min-height: 230px; }
/* Grille de vignettes (chats) */
.av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: var(--space-4); }
.av-opt { border: 2px solid var(--ink); border-radius: 14px; padding: 8px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); }
.av-opt.is-active { border-color: var(--terracotta); box-shadow: 0 0 0 2px var(--terracotta); }
.av-none { font-size: 40px; color: var(--gray-muted); line-height: 1; }
/* Nuancier de couleurs (ronds) */
.av-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.av-swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0; }
.av-swatch.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--terracotta); }
.av-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }
@media (max-width: 720px) { .av-body { flex-direction: column; } .av-left { width: 100%; max-width: 240px; margin-inline: auto; } }

/* Carte profil réutilisable (dashboard + modifier le profil) :
   avatar dans un cercle rose, dont le bas passe DERRIÈRE la carte. */
.pcard { position: relative; width: 100%; }
.pcard__circle { position: absolute; z-index: 0; top: -78px; left: 50%; transform: translateX(-50%); width: 156px; height: 156px; border-radius: 50%; background: var(--accent); }
.pcard__cat { position: absolute; z-index: 2; top: -66px; left: 50%; transform: translateX(-50%); }
.pcard__cat .avatar { width: 132px; height: 132px; }
.pcard__box { position: relative; z-index: 1; background: #fff; border: 2px solid var(--ink); border-radius: 32px; box-shadow: var(--shadow-soft); padding: 92px 26px 26px; text-align: center; }
.pcard__box h2 { font-size: var(--h4); margin-bottom: 18px; }
.pcard__box .btn { width: 100%; margin-bottom: 10px; }
.pcard__box .btn:last-child { margin-bottom: 0; }

/* =====================================================================
   9. CARTES & BANDES (composants réutilisables)
   ===================================================================== */
.card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
/* Bande arrondie large (dark / pastel) centrée, max 1243px comme Figma */
.band {
  max-width: 1243px; margin-inline: auto;
  border-radius: 40px;
  padding: var(--space-7);
}
.band--dark { background: var(--ink); color: var(--white); }
.band--green { background: var(--green); }
.band--pink { background: var(--pink); }
.band--dark h2, .band--dark h3 { color: var(--white); }

/* Bande pleine largeur (ex: univers, teal) */
.band-full { width: 100%; }
.band-full--blue { background: var(--blue); }

/* Pastille numérotée (étapes "Comment ça marche") */
.step-num {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--h4); color: var(--ink);
  border: 2px solid var(--ink);
}
.step-num--pink { background: var(--pink); }
.step-num--green { background: var(--green); }
.step-num--blue { background: var(--blue); }