/* =====================================================================
   Iratravo Social — styles communs
   Les couleurs, rayons et ombres sont des variables (section 1) :
   les changer ici change toute l'appli.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');


/* ---------------------------------------------------------------------
   1. Variables
   --------------------------------------------------------------------- */
:root {
  /* Fonds et textes */
  --fond:          #F4F6F9;
  --surface:       #FFFFFF;
  --surface-2:     #F1F4F8;
  --surface-3:     #E7ECF2;
  --bordure:       #E2E7EE;
  --bordure-forte: #CDD5DF;
  --texte:         #0F172A;
  --texte-doux:    #556173;
  --texte-pale:    #8792A3;

  /* Marque (teal Iratravo) */
  --accent:        #0D7C72;
  --accent-fonce:  #0A625A;
  --accent-clair:  #E6F4F2;
  --accent-anneau: rgba(13, 124, 114, .28);

  /* Barre latérale */
  --nav-fond:      #0C2B2D;
  --nav-fond-2:    #133A3C;
  --nav-texte:     rgba(255, 255, 255, .70);
  --nav-actif:     #5EEAD4;

  /* Couleurs de sens */
  --ambre: #B45309;  --ambre-clair: #FEF3E2;  --ambre-bord: #F7D9AE;
  --danger: #C0362C; --danger-clair: #FDEDEC; --danger-bord: #F4C7C2;
  --info: #1D4ED8;   --info-clair: #EAF1FF;   --info-bord: #C9DAFB;
  --succes: #15803D; --succes-clair: #E8F6EE;
  --violet: #6D28D9; --violet-clair: #F1EBFE;

  /* Statuts des versions : texte / fond */
  --s-idee: #475569;      --s-idee-f: #EEF2F6;
  --s-brouillon: #334155; --s-brouillon-f: #E5E9EF;
  --s-a-valider: #B45309; --s-a-valider-f: #FEF0DB;
  --s-valide: #1D4ED8;    --s-valide-f: #E3ECFE;
  --s-programme: #6D28D9; --s-programme-f: #EFE7FE;
  --s-publie: #15803D;    --s-publie-f: #DFF3E6;

  /* Formes */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --ombre-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --ombre-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
  --ombre-md: 0 8px 20px -6px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);

  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --police-titre: 'Plus Jakarta Sans', var(--police);
  --largeur-nav: 248px;
}


/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-fonce); }
h1, h2, h3 { font-family: var(--police-titre); letter-spacing: -.01em; color: var(--texte); }
h1 { font-size: 1.65rem; font-weight: 800; margin: 0 0 .2rem; line-height: 1.2; }
h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .75rem; }
h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; }
p  { margin: 0 0 .75rem; }

.doux  { color: var(--texte-doux); }
.petit { font-size: .84rem; }
.gras  { font-weight: 600; }
.pre   { white-space: pre-wrap; }
.droite { text-align: right; }
.icone { display: inline-block; flex-shrink: 0; vertical-align: -.2em; }

:focus-visible { outline: 3px solid var(--accent-anneau); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------------------------------------------------------------------
   3. Barre de navigation (latérale sur ordinateur, en haut sur mobile)
   --------------------------------------------------------------------- */
#entete {
  background: var(--nav-fond);
  color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.entete-int { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 16px; }

.logo { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; white-space: nowrap; }
.logo:hover { color: #fff; }
.logo-image { display: block; height: 30px; width: auto; }
.logo-social {
  font-family: var(--police-titre); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  color: var(--nav-texte); padding-top: .2rem;
}

#entete nav { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
#entete nav::-webkit-scrollbar { display: none; }
#entete nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 9px; text-decoration: none;
  color: var(--nav-texte); white-space: nowrap; font-weight: 500;
  transition: background .15s, color .15s;
}
#entete nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
#entete nav a.actif { background: rgba(255,255,255,.11); color: #fff; }
#entete nav a.actif .icone { color: var(--nav-actif); }
.compteur {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: #F59E0B; color: #2A1A00;
}
.compteur-danger { background: #F87171; color: #3B0A0A; }

.utilisateur { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--nav-fond-2); color: var(--nav-actif); font-weight: 700; font-size: .9rem;
  border: 1px solid rgba(255,255,255,.12);
}
.utilisateur-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.utilisateur-texte strong { font-size: .88rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utilisateur-texte span { font-size: .75rem; color: var(--nav-texte); }
.btn-deconnexion {
  margin-left: auto; background: none; border: 0; color: var(--nav-texte); cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
}
.btn-deconnexion:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Mobile / tablette : barre en haut, navigation sur une 2e ligne défilante */
@media (max-width: 1023px) {
  .entete-int { justify-content: space-between; }
  #entete nav { order: 3; flex-basis: 100%; margin: 0 -4px; padding-bottom: .1rem; }
  #entete nav .compteur { margin-left: .2rem; }
  .utilisateur-texte { display: none; }
  /* Liens « #section » : le titre ne passe pas sous la barre du haut (2 lignes) */
  main [id] { scroll-margin-top: 7.5rem; }
}

/* Ordinateur : barre latérale fixe */
@media (min-width: 1024px) {
  #entete {
    position: fixed; inset: 0 auto 0 0; width: var(--largeur-nav);
    border-right: 1px solid rgba(255,255,255,.04);
  }
  .entete-int { flex-direction: column; align-items: stretch; flex-wrap: nowrap; height: 100%; padding: 1.1rem .85rem; gap: 0; }
  .logo { padding: .2rem .45rem 1.3rem; }
  #entete nav { flex-direction: column; gap: .15rem; overflow: visible; flex: 1; }
  #entete nav a { padding: .6rem .75rem; }
  .utilisateur { padding: .85rem .45rem 0; border-top: 1px solid rgba(255,255,255,.08); }
  main, .chargement { margin-left: var(--largeur-nav); }
}


/* ---------------------------------------------------------------------
   4. Mise en page
   --------------------------------------------------------------------- */
main { max-width: 1240px; padding: 1.75rem 16px 4rem; }
@media (min-width: 1024px) { main { padding: 2rem 2.25rem 4rem; } }

.titre-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.titre-page p.doux { font-size: .95rem; }

.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.pile > * + * { margin-top: 1rem; }
.ligne { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ligne-entre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.espace { flex: 1; }

@media (max-width: 900px) {
  .grille-2, .grille-3 { grid-template-columns: minmax(0, 1fr); }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------------
   5. Cartes
   --------------------------------------------------------------------- */
.carte {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--r-lg); box-shadow: var(--ombre-xs); padding: 1.15rem 1.25rem;
  min-width: 0;
}
.carte + .carte { margin-top: 1rem; }
.grille-2 > .carte + .carte, .grille-3 > .carte + .carte, .grille-4 > .carte + .carte { margin-top: 0; }
.carte-titre { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; }
.carte-titre h2 { margin: 0; }

.vide {
  color: var(--texte-pale); text-align: center; font-size: .9rem;
  padding: 1.25rem 1rem; border: 1.5px dashed var(--bordure); border-radius: var(--r);
  background: var(--surface-2);
}


/* ---------------------------------------------------------------------
   6. Boutons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 36px; padding: 0 .9rem; border-radius: var(--r-sm);
  border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--texte);
  font: inherit; font-weight: 600; font-size: .88rem; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--ombre-xs);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { background: var(--surface-2); color: var(--texte); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primaire {
  background: var(--accent); border-color: var(--accent-fonce); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(10, 98, 90, .3);
}
.btn-primaire:hover { background: var(--accent-fonce); color: #fff; }
.btn-danger { color: var(--danger); border-color: var(--danger-bord); }
.btn-danger:hover { background: var(--danger-clair); color: var(--danger); }
.btn-ia { color: var(--violet); border-color: #D9C8FB; background: var(--violet-clair); }
.btn-ia:hover { background: #E6DAFD; color: var(--violet); }
.btn-petit { height: 30px; padding: 0 .65rem; font-size: .82rem; }
.btn-lien { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 500; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.btn-lien:hover { color: var(--accent-fonce); }
.btn-icone { width: 36px; padding: 0; }


/* ---------------------------------------------------------------------
   7. Formulaires
   --------------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: .84rem; margin-bottom: .3rem; color: var(--texte); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=date],
input[type=time], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: .92rem; color: var(--texte);
  border: 1px solid var(--bordure-forte); border-radius: var(--r-sm);
  padding: .55rem .7rem; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=color]), select { min-height: 40px; }
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--texte-pale); }
input:hover, select:hover, textarea:hover { border-color: #B6C0CD; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-anneau); }
input:disabled, textarea[readonly] { background: var(--surface-2); color: var(--texte-doux); }
fieldset { margin: 0; }
legend { font-family: var(--police-titre); padding: 0 .3rem; }

.champ { margin-bottom: .9rem; }
.case { display: flex; align-items: center; gap: .55rem; font-weight: 400; cursor: pointer; }
.case input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.aide { font-size: .79rem; color: var(--texte-doux); margin-top: .3rem; }


/* ---------------------------------------------------------------------
   8. Badges et pastilles de statut
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .55rem; border-radius: 999px; line-height: 1.5;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--texte-doux);
}
.badge-statut::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-idee      { background: var(--s-idee-f);      color: var(--s-idee); }
.s-brouillon { background: var(--s-brouillon-f); color: var(--s-brouillon); }
.s-a_valider { background: var(--s-a-valider-f); color: var(--s-a-valider); }
.s-valide    { background: var(--s-valide-f);    color: var(--s-valide); }
.s-programme { background: var(--s-programme-f); color: var(--s-programme); }
.s-publie    { background: var(--s-publie-f);    color: var(--s-publie); }
.badge-sensible { background: var(--danger-clair); color: var(--danger); }
.badge-urgent   { background: var(--danger); color: #fff; }
.badge-ia       { background: var(--violet-clair); color: var(--violet); }
.badge-reseau   { background: var(--info-clair); color: var(--info); }
.pastille { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }


/* ---------------------------------------------------------------------
   9. Bandeaux d'information
   --------------------------------------------------------------------- */
.bandeau {
  border-radius: var(--r); padding: .85rem 1rem; margin-bottom: 1rem;
  border: 1px solid; border-left-width: 4px; font-size: .92rem;
}
.bandeau-info   { background: var(--info-clair);   border-color: var(--info-bord);   border-left-color: var(--info);   color: #1E3A8A; }
.bandeau-alerte { background: var(--ambre-clair);  border-color: var(--ambre-bord);  border-left-color: #D97706;       color: #78350F; }
.bandeau-danger { background: var(--danger-clair); border-color: var(--danger-bord); border-left-color: var(--danger); color: #7F1D1D; }
.bandeau a { font-weight: 600; }

/* Téléphone : installer l'appli / activer les notifications */
.encart-telephone {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  border-radius: var(--r); padding: .85rem 1rem; margin-bottom: 1rem;
  background: var(--accent-clair); border: 1px solid #BFE3DE; color: var(--accent-fonce); font-size: .92rem;
}
.encart-telephone-ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent); color: #fff;
}
.encart-telephone-texte { flex: 1 1 16rem; min-width: 0; }
.encart-telephone .ligne { flex-wrap: wrap; }
.btn-discret { background: transparent; border-color: transparent; color: inherit; }
.btn-discret:hover { background: rgba(13, 124, 114, .08); }
.statut-telephone { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .75rem; }
.statut-telephone .pastille { margin-top: .4rem; }
.etapes-installation { padding-left: 1.1rem; margin: .25rem 0 .75rem; }
.etapes-installation li + li { margin-top: .25rem; }


/* ---------------------------------------------------------------------
   10. Onglets (contrôle segmenté)
   --------------------------------------------------------------------- */
.onglets {
  display: inline-flex; gap: .2rem; padding: .25rem; margin-bottom: 1.25rem;
  background: var(--surface-3); border-radius: 10px; max-width: 100%; overflow-x: auto;
}
.onglets button {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; border-radius: 8px; font: inherit; font-weight: 600; font-size: .86rem;
  padding: .45rem .85rem; cursor: pointer; color: var(--texte-doux); white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.onglets button:hover { color: var(--texte); }
.onglets button.actif { background: var(--surface); color: var(--texte); box-shadow: var(--ombre-sm); }


/* ---------------------------------------------------------------------
   11. Tableaux
   --------------------------------------------------------------------- */
.tableau-conteneur { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.tableau-conteneur thead th { background: var(--surface-2); }
th { font-size: .72rem; color: var(--texte-doux); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
tbody tr:hover td { background: #FAFBFD; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.carte > table td { padding-left: 0; padding-right: 0; }
.carte > table tr:hover td { background: none; }


/* ---------------------------------------------------------------------
   12. Indicateurs (KPI)
   --------------------------------------------------------------------- */
.kpi { display: flex; flex-direction: column; gap: .15rem; }
.kpi .valeur {
  font-family: var(--police-titre); font-size: 2rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; order: 2;
}
.kpi .libelle { color: var(--texte-doux); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; order: 1; }
.kpi > .petit { order: 3; }
.kpi-principal {
  background: linear-gradient(135deg, #0D7C72 0%, #0A5A54 100%); border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px -10px rgba(13, 124, 114, .6);
}
.kpi-principal .libelle { color: rgba(255,255,255,.78); }
.kpi-principal .petit, .kpi-principal .hausse, .kpi-principal .baisse { color: rgba(255,255,255,.9); }
.hausse { color: var(--succes); font-weight: 600; }
.baisse { color: var(--danger); font-weight: 600; }


/* ---------------------------------------------------------------------
   13. Routine du jour (Aujourd'hui)
   --------------------------------------------------------------------- */
.progression { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin: -.25rem 0 .5rem; }
.progression span { display: block; height: 100%; background: linear-gradient(90deg, #2DD4BF, var(--accent)); border-radius: 999px; transition: width .3s ease; }
.tache {
  display: flex; gap: .8rem; padding: .75rem .6rem; margin: 0 -.6rem;
  border-radius: var(--r-sm); align-items: flex-start; transition: background .15s;
}
.tache:hover { background: var(--surface-2); }
.tache + .tache { border-top: 1px solid var(--bordure); border-radius: 0; }
.tache input { margin-top: .15rem; width: 1.2rem; height: 1.2rem; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.tache .duree {
  font-variant-numeric: tabular-nums; color: var(--texte-doux); font-size: .74rem; font-weight: 700;
  background: var(--surface-2); border-radius: 6px; padding: .1rem .4rem; min-width: 3.6rem; text-align: center; margin-top: .1rem;
}
.tache .titre { font-weight: 600; cursor: pointer; }
.tache.faite .titre { text-decoration: line-through; color: var(--texte-pale); }
.tache.speciale .titre { color: var(--accent-fonce); }


/* ---------------------------------------------------------------------
   14. Versions (cartes de post dans Aujourd'hui)
   --------------------------------------------------------------------- */
.version {
  border: 1px solid var(--bordure); border-left: 4px solid var(--bordure); border-radius: var(--r);
  padding: .8rem .9rem; background: var(--surface); transition: box-shadow .15s;
}
.version:hover { box-shadow: var(--ombre-sm); }
.version + .version { margin-top: .6rem; }
.version .titre { font-weight: 600; margin-top: .35rem; }
.version .actions { margin-top: .6rem; }


/* ---------------------------------------------------------------------
   15. Calendrier
   --------------------------------------------------------------------- */
.calendrier { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.jour {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r);
  padding: .55rem; min-height: 11rem; min-width: 0; box-shadow: var(--ombre-xs);
}
.jour.weekend { background: var(--surface-2); box-shadow: none; }
.jour.aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--ombre-sm); }
.jour-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; padding: .1rem .2rem; }
.jour-nom { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); }
.jour-num { font-family: var(--police-titre); font-weight: 800; font-size: 1.15rem; margin-left: .3rem; color: var(--texte); }
.jour.aujourdhui .jour-num {
  background: var(--accent); color: #fff; border-radius: 8px; padding: 0 .4rem; font-size: 1rem;
}
.jour-ajout {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  color: var(--texte-pale); text-decoration: none; transition: background .15s, color .15s;
}
.jour-ajout:hover { background: var(--accent-clair); color: var(--accent); }
.carte-cal {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--bordure); border-left: 4px solid var(--bordure); border-radius: var(--r-sm);
  padding: .45rem .5rem; margin-bottom: .4rem; font-size: .8rem; background: var(--surface);
  transition: box-shadow .15s, transform .15s;
}
.carte-cal:hover { box-shadow: var(--ombre-md); transform: translateY(-1px); color: inherit; }
.carte-cal .titre { font-weight: 600; overflow-wrap: anywhere; margin-top: .3rem; line-height: 1.35; }
.carte-cal .badge { font-size: .68rem; padding: .05rem .4rem; }
.legende .badge { font-size: .7rem; }
@media (max-width: 1100px) {
  .calendrier { grid-template-columns: minmax(0, 1fr); }
  .jour { min-height: 0; }
}


/* ---------------------------------------------------------------------
   16. Fiche post
   --------------------------------------------------------------------- */
.grille-post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem; align-items: start; }
@media (min-width: 901px) { .grille-post > .carte:first-child { position: sticky; top: 1.25rem; } }
@media (max-width: 900px) { .grille-post { grid-template-columns: minmax(0, 1fr); } }
.miniature { max-width: 100%; max-height: 220px; border-radius: var(--r-sm); border: 1px solid var(--bordure); display: block; }
.compteur-mots.hors-cible { color: var(--ambre); font-weight: 600; }
.encart-ia {
  border-radius: var(--r); padding: .85rem 1rem; margin-top: .25rem;
  background: linear-gradient(135deg, #F6F1FF 0%, #EEF6FF 100%); border: 1px solid #E2D6FB;
}


/* ---------------------------------------------------------------------
   17. Guide (Markdown)
   --------------------------------------------------------------------- */
.markdown { line-height: 1.65; }
.markdown table { margin: .5rem 0 1rem; border: 1px solid var(--bordure); border-radius: var(--r-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.markdown thead th { background: var(--surface-2); }
.markdown h3 { margin-top: 1.1rem; }
.markdown ul, .markdown ol { padding-left: 1.25rem; margin: 0 0 .75rem; }
.markdown li + li { margin-top: .2rem; }
.markdown blockquote { margin: 0 0 .75rem; padding: .6rem .9rem; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }


/* ---------------------------------------------------------------------
   18. Connexion
   --------------------------------------------------------------------- */
.page-connexion {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(45, 212, 191, .18), transparent 60%),
    radial-gradient(700px 400px at 110% 110%, rgba(13, 124, 114, .14), transparent 60%),
    var(--fond);
}
.connexion { width: 100%; max-width: 400px; }
.connexion .logo { justify-content: center; color: var(--texte); margin-bottom: 1.25rem; }
.connexion .logo-image { height: 40px; }
.connexion .logo-social { color: var(--texte-doux); font-size: 1.1rem; }
.connexion .carte { padding: 1.75rem; box-shadow: var(--ombre-md); }


/* ---------------------------------------------------------------------
   19. Chargement et notifications
   --------------------------------------------------------------------- */
.chargement { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 5rem 1rem; color: var(--texte-doux); }
.chargement::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--surface-3); border-top-color: var(--accent);
  animation: tourner .7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--texte); color: #fff; padding: .7rem .95rem; border-radius: var(--r);
  box-shadow: var(--ombre-md); font-size: .88rem; animation: entree .2s ease-out;
}
.toast::before {
  content: '✓'; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: #2DD4BF; color: var(--texte); font-size: .72rem; font-weight: 800; margin-top: .05rem;
}
.toast-erreur { background: #7F1D1D; }
.toast-erreur::before { content: '!'; background: #FCA5A5; color: #7F1D1D; }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }