/* style.css — Feuille de styles principale de LearnWithUs */


/* ===== VARIABLES ===== */
/* Palette de couleurs et valeurs réutilisables du site */
:root {
  --couleur-principale: #6B1F2A;
  --couleur-principale-clair: #F7EEF0;
  --couleur-principale-hover: #4A1520;
  --couleur-titre: #111111;
  --couleur-texte: #2A2A2A;
  --couleur-texte-secondaire: #6B6B6B;
  --couleur-fond: #F5F5F5;
  --couleur-blanc: #FFFFFF;
  --couleur-bordure: #E0E0E0;
  --ombre-carte: 0 2px 8px rgba(0, 0, 0, 0.08);
  --rayon-bouton: 6px;
  --rayon-carte: 10px;
}


/* ===== RESET ===== */
/* Supprime les marges et paddings par défaut du navigateur */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: var(--couleur-principale);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}


/* ===== NAVIGATION ===== */
/* Barre de navigation sticky, commune à toutes les pages */
.navigation {
  background-color: var(--couleur-blanc);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-contenu {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--couleur-principale);
  text-decoration: none;
}

.nav-liens {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-liens a {
  color: var(--couleur-texte);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 8px 0;
  transition: color 0.3s;
}

.nav-liens a:hover {
  color: var(--couleur-principale);
}

/* Lien de la page actuelle */
.nav-liens a.actif {
  color: var(--couleur-principale);
  border-bottom: 2px solid var(--couleur-principale);
}

/* Pastille du prénom affichée dans la nav quand l'utilisateur est connecté.
   Remplace le lien "Connexion" par un visuel plus distinctif. */
.nav-liens a.badge-utilisateur {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc);
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.nav-liens a.badge-utilisateur:hover {
  background-color: var(--couleur-principale-hover);
  color: var(--couleur-blanc);
}

/* Sur la page de l'espace client, pas de soulignement sur la pastille */
.nav-liens a.badge-utilisateur.actif {
  border-bottom: none;
  color: var(--couleur-blanc);
}

/* Bouton hamburger — visible uniquement sur mobile */
.menu-mobile {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--couleur-texte);
}


/* ===== BOUTONS ===== */
/* Bouton principal — fond bordeaux */
.bouton-principal {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc);
  border: none;
  padding: 12px 28px;
  border-radius: var(--rayon-bouton);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  display: inline-block;
  text-align: center;
}

.bouton-principal:hover {
  background-color: var(--couleur-principale-hover);
  transform: translateY(-2px);
}

.bouton-principal:active {
  transform: translateY(0);
}

/* Bouton secondaire — bordure bordeaux, fond transparent */
.bouton-secondaire {
  background-color: transparent;
  color: var(--couleur-principale);
  border: 2px solid var(--couleur-principale);
  padding: 10px 28px;
  border-radius: var(--rayon-bouton);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
  text-align: center;
}

.bouton-secondaire:hover {
  background-color: var(--couleur-principale-clair);
}


/* ===== CARTES ===== */
/* Blocs blancs avec ombre, utilisés pour présenter les formations */
.carte {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 24px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.carte:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.carte-icone {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.carte h3 {
  color: var(--couleur-titre);
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.carte p {
  color: var(--couleur-texte-secondaire);
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.carte-info {
  font-size: 0.9rem;
  color: var(--couleur-texte-secondaire);
  margin-bottom: 6px;
}

.carte-lien {
  display: inline-block;
  margin-top: 12px;
  color: var(--couleur-principale);
  font-weight: 600;
  transition: color 0.3s;
}

.carte-lien:hover {
  color: var(--couleur-principale-hover);
}


/* ===== GRILLES ===== */
/* Mise en page en colonnes avec CSS Grid */
.grille-3-colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grille-2-colonnes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}


/* ===== RESPONSIVE ===== */
/* Adaptation de la mise en page selon la taille de l'écran */
@media (max-width: 1024px) {
  .grille-3-colonnes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grille-3-colonnes,
  .grille-2-colonnes {
    grid-template-columns: 1fr;
  }

  /* Menu mobile : liens cachés par défaut, affichés en colonne au clic */
  .nav-liens {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--couleur-blanc);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    gap: 15px;
  }

  .nav-liens.menu-ouvert {
    display: flex;
  }

  .menu-mobile {
    display: block;
  }
}


/* ===== HERO ===== */
/* Section d'accroche en haut de la page d'accueil */
.hero {
  padding: 80px 20px;
  background-color: var(--couleur-principale-clair);
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  color: var(--couleur-titre);
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.1rem;
  color: var(--couleur-texte-secondaire);
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero {
    padding: 50px 20px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }
}


/* ===== SECTIONS ===== */
/* Blocs de contenu avec espacement et largeur maximale */
.section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section h2 {
  font-size: 1.8rem;
  color: var(--couleur-titre);
  margin-bottom: 30px;
  text-align: center;
}

/* Section avec fond gris alterné */
.section-fond {
  background-color: var(--couleur-fond);
  padding: 60px 20px;
}

.section-fond .section-contenu {
  max-width: 1200px;
  margin: 0 auto;
}


/* ===== FORMULAIRES ===== */
/* Styles communs pour tous les formulaires du site */
.formulaire-conteneur {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--couleur-blanc);
  padding: 40px;
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 18px;
  color: var(--couleur-titre);
  font-size: 0.95rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.3s, box-shadow 0.3s;
  margin-bottom: 4px;
}

/* Mise en évidence du champ actif */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-color: var(--couleur-principale);
  box-shadow: 0 0 0 3px rgba(107, 31, 42, 0.1);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.formulaire-conteneur .bouton-principal {
  width: 100%;
  margin-top: 24px;
  padding: 14px;
}

/* Messages de retour après soumission */
.message-succes {
  background-color: #E8F5E9;
  color: #2E7D32;
  padding: 14px 20px;
  border-radius: var(--rayon-bouton);
  margin-top: 20px;
  font-size: 0.95rem;
}

.message-erreur {
  background-color: #FFEBEE;
  color: #C62828;
  padding: 14px 20px;
  border-radius: var(--rayon-bouton);
  margin-top: 20px;
  font-size: 0.95rem;
}



/* ===== FICHES FORMATIONS ===== */
/* Blocs détaillés par formation avec programme et tarifs */
.fiche-formation {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 40px;
  margin-bottom: 30px;
}

.fiche-formation h2 {
  text-align: left;
  color: var(--couleur-principale);
  margin-bottom: 16px;
}

.fiche-formation p {
  margin-bottom: 16px;
  line-height: 1.7;
}

.fiche-formation ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 20px;
}

.fiche-formation ul li {
  margin-bottom: 8px;
  color: var(--couleur-texte);
}

.tableau-tarifs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.tableau-tarifs th,
.tableau-tarifs td {
  border: 1px solid var(--couleur-bordure);
  padding: 12px 16px;
  text-align: left;
}

.tableau-tarifs th {
  background-color: var(--couleur-principale-clair);
  color: var(--couleur-titre);
  font-weight: 600;
}

/* Groupe de 2 boutons côte à côte sous chaque fiche formation */
.fiche-boutons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}


/* ===== ONGLETS ===== */
/* Système d'onglets Standard / Premium sur la page espace client */
.onglets-conteneur {
  display: flex;
  gap: 0;
  margin-bottom: 30px;
  justify-content: center;
}

.onglet-bouton {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--couleur-principale);
  background-color: var(--couleur-blanc);
  color: var(--couleur-principale);
  transition: background-color 0.3s, color 0.3s;
}

.onglet-bouton:first-child {
  border-radius: var(--rayon-bouton) 0 0 var(--rayon-bouton);
}

.onglet-bouton:last-child {
  border-radius: 0 var(--rayon-bouton) var(--rayon-bouton) 0;
  border-left: none;
}

.onglet-bouton.actif {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc);
}

/* Le contenu d'onglet est caché par défaut, visible quand actif */
.onglet-contenu {
  display: none;
}

.onglet-contenu.actif {
  display: block;
}


/* ===== ACCORDÉON FAQ ===== */
/* Questions/réponses dépliables — une seule ouverte à la fois */
.accordeon {
  max-width: 800px;
  margin: 0 auto;
}

.accordeon-element {
  margin-bottom: 10px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  overflow: hidden;
}

.accordeon-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--couleur-blanc);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--couleur-titre);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.3s;
}

.accordeon-question:hover {
  background-color: var(--couleur-principale-clair);
}

.accordeon-chevron {
  font-size: 0.8rem;
  transition: transform 0.3s;
}

/* Le chevron pivote de 180° quand la réponse est ouverte */
.accordeon-element.ouvert .accordeon-chevron {
  transform: rotate(180deg);
}

.accordeon-reponse {
  display: none;
  padding: 0 20px 16px 20px;
  color: var(--couleur-texte);
  line-height: 1.7;
  font-size: 0.95rem;
}

.accordeon-element.ouvert .accordeon-reponse {
  display: block;
}


/* ===== FOOTER ===== */
/* Pied de page commun à toutes les pages */
.footer {
  background-color: #111111;
  color: #AAAAAA;
  padding: 40px 20px;
  text-align: center;
  font-size: 0.9rem;
}

.footer a {
  color: var(--couleur-blanc);
  text-decoration: none;
  transition: color 0.3s;
}

.footer a:hover {
  color: var(--couleur-principale);
}

.footer-liens {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
}


/* ===== UTILITAIRES ===== */
/* Petites classes réutilisables */
.texte-centre {
  text-align: center;
}

.marge-haut {
  margin-top: 40px;
}

/* Badges */
.badge-premium {
  display: inline-block;
  background-color: #FFF3E0;
  color: #E65100;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.badge-gratuit {
  display: inline-block;
  background-color: #E8F5E9;
  color: #2E7D32;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.badge-hd {
  display: inline-block;
  background-color: var(--couleur-principale-clair);
  color: var(--couleur-principale);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

/* Section "Passer à Premium" */
.premium-cta {
  background-color: var(--couleur-principale-clair);
  border-radius: var(--rayon-carte);
  padding: 40px;
  text-align: center;
  margin-top: 40px;
}

.premium-cta h3 {
  color: var(--couleur-principale);
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.premium-prix {
  font-size: 2rem;
  font-weight: 700;
  color: var(--couleur-principale);
  margin-bottom: 20px;
}

.premium-avantages {
  list-style: none;
  margin-bottom: 24px;
}

.premium-avantages li {
  padding: 6px 0;
  color: var(--couleur-texte);
}

/* Deux champs côte à côte (prénom + nom) */
.champs-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .champs-ligne {
    grid-template-columns: 1fr;
  }
}

/* Bloc d'informations de contact (page contact) */
.infos-contact {
  background-color: var(--couleur-principale-clair);
  border-radius: var(--rayon-carte);
  padding: 40px;
}

.infos-contact h3 {
  color: var(--couleur-principale);
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.infos-contact p {
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: var(--couleur-texte);
}

/* ===== PAGES DE FORMATION ===== */
/* Layout commun aux 3 pages formation-*.html */

/* En-tête de chaque page formation : bandeau titre + description */
.formation-hero {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc);
  padding: 60px 20px;
  text-align: center;
}

.formation-hero h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.formation-hero p {
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.95;
}

/* Conteneur principal du cours (intro + sections premium) */
.formation-contenu {
  max-width: 850px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Bloc de cours (intro ou section premium) */
.formation-bloc {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 36px;
  margin-bottom: 30px;
}

.formation-bloc h2 {
  color: var(--couleur-principale);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.formation-bloc h3 {
  color: var(--couleur-titre);
  font-size: 1.15rem;
  margin: 24px 0 10px;
}

.formation-bloc p {
  line-height: 1.7;
  margin-bottom: 14px;
}

.formation-bloc ul,
.formation-bloc ol {
  padding-left: 24px;
  margin-bottom: 14px;
}

.formation-bloc ul { list-style: disc; }
.formation-bloc ol { list-style: decimal; }

.formation-bloc ul li,
.formation-bloc ol li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Badge de statut de section (Gratuit / Premium) */
.badge-section {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.badge-section.gratuit {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.badge-section.premium {
  background-color: #FFF3E0;
  color: #E65100;
}

/* Section Premium verrouillée : flou + overlay avec CTA */
.contenu-bloque {
  position: relative;
  max-height: 280px;
  overflow: hidden;
  pointer-events: none;
}

.contenu-bloque::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 80%);
  pointer-events: none;
}

.contenu-bloque > *:not(.badge-section) {
  filter: blur(3px);
  opacity: 0.6;
}

/* Carte d'appel à l'action (créer compte / passer Premium) */
.cta-premium {
  background: linear-gradient(135deg, var(--couleur-principale) 0%, var(--couleur-principale-hover) 100%);
  color: var(--couleur-blanc);
  border-radius: var(--rayon-carte);
  padding: 36px;
  text-align: center;
  margin-bottom: 30px;
}

.cta-premium .icone-cadenas {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.cta-premium h3 {
  color: var(--couleur-blanc);
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.cta-premium p {
  opacity: 0.95;
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-premium .bouton-cta {
  display: inline-block;
  background-color: var(--couleur-blanc);
  color: var(--couleur-principale);
  padding: 12px 28px;
  border-radius: var(--rayon-bouton);
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.2s;
}

.cta-premium .bouton-cta:hover {
  transform: translateY(-2px);
}

/* Liste des ressources (liens et documents) d'une formation Premium */
.liste-ressources {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-ressources li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  margin-bottom: 10px;
  background-color: var(--couleur-blanc);
  transition: background-color 0.2s, border-color 0.2s;
}

.liste-ressources li:hover {
  background-color: var(--couleur-principale-clair);
  border-color: var(--couleur-principale);
}

.liste-ressources .ressource-icone {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.liste-ressources .ressource-texte {
  flex: 1;
}

.liste-ressources .ressource-titre {
  font-weight: 600;
  color: var(--couleur-titre);
  margin-bottom: 2px;
}

.liste-ressources .ressource-description {
  font-size: 0.85rem;
  color: var(--couleur-texte-secondaire);
}

.liste-ressources a.ressource-lien {
  font-weight: 600;
  color: var(--couleur-principale);
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid var(--couleur-principale);
  border-radius: var(--rayon-bouton);
  transition: background-color 0.2s, color 0.2s;
}

.liste-ressources a.ressource-lien:hover {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc);
}

/* Bouton grisé quand la ressource n'est pas encore disponible
   (ex : PDF à déposer par l'équipe) */
.liste-ressources .ressource-lien-desactive {
  font-weight: 600;
  color: var(--couleur-texte-secondaire);
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px dashed var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  font-size: 0.85rem;
  background-color: #F5F5F5;
}


/* Placeholder vidéo (la vidéo réelle sera tournée plus tard) */
.video-placeholder {
  background-color: #111111;
  color: #AAAAAA;
  border-radius: var(--rayon-carte);
  padding: 60px 20px;
  text-align: center;
}

.video-placeholder-icone {
  font-size: 3rem;
  margin-bottom: 10px;
}

.video-placeholder p {
  font-size: 0.95rem;
}

/* Bloc quiz : questions avec choix multiples */
.quiz-question {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--couleur-bordure);
}

.quiz-question:last-of-type {
  border-bottom: none;
}

.quiz-question p {
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--couleur-titre);
}

.quiz-reponses {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-reponses label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  font-weight: 400;
  margin: 0;
  font-size: 0.95rem;
}

.quiz-reponses label:hover {
  background-color: var(--couleur-principale-clair);
  border-color: var(--couleur-principale);
}

.quiz-reponses input[type="radio"] {
  accent-color: var(--couleur-principale);
}

/* Affichage du résultat après validation */
.resultat-quiz {
  margin-top: 20px;
  padding: 18px 24px;
  border-radius: var(--rayon-bouton);
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  display: none;
}

.resultat-quiz.visible {
  display: block;
}

.resultat-quiz.succes {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.resultat-quiz.echec {
  background-color: #FFF3E0;
  color: #E65100;
}


/* Section "Chiffres clés" sur la page d'accueil */
.chiffres-cles {
  padding-top: 40px;
  padding-bottom: 40px;
}

.chiffre-bloc {
  text-align: center;
  padding: 20px;
}

.chiffre-valeur {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--couleur-principale);
  margin-bottom: 6px;
}

.chiffre-label {
  font-size: 0.95rem;
  color: var(--couleur-texte-secondaire);
}


/* Titre en haut de chaque page */
.titre-page {
  text-align: center;
  padding: 50px 20px 30px;
}

.titre-page h1 {
  font-size: 2rem;
  color: var(--couleur-titre);
  margin-bottom: 10px;
}

.titre-page p {
  font-size: 1.05rem;
  color: var(--couleur-texte-secondaire);
}


/* ============================================================
   DASHBOARD ADMIN (admin.html)
   ============================================================ */

.page-admin {
  min-height: calc(100vh - 70px);
  padding: 40px 20px;
  background-color: var(--couleur-fond);
}

.admin-conteneur {
  max-width: 1200px;
  margin: 0 auto;
}

.admin-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.admin-entete h1 {
  color: var(--couleur-titre);
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.admin-sous-titre {
  color: var(--couleur-texte-secondaire);
  font-size: 0.95rem;
}

.bouton-secondaire {
  background-color: var(--couleur-blanc);
  color: var(--couleur-principale);
  border: 1.5px solid var(--couleur-principale);
  padding: 10px 18px;
  border-radius: var(--rayon-bouton);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}
.bouton-secondaire:hover {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc);
}

/* Cartes KPI : grille responsive 2/3/6 colonnes selon taille écran */
.admin-grille-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.admin-carte {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 22px 18px;
  text-align: center;
  transition: transform 0.2s;
}
.admin-carte:hover {
  transform: translateY(-2px);
}

.admin-carte-icone {
  font-size: 1.8rem;
  margin-bottom: 6px;
}

.admin-carte-chiffre {
  font-size: 2rem;
  font-weight: 700;
  color: var(--couleur-principale);
  line-height: 1.1;
  margin-bottom: 4px;
}

.admin-carte-libelle {
  color: var(--couleur-texte-secondaire);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Carte mise en avant (pour le revenu) */
.admin-carte-mise-avant {
  background-color: var(--couleur-principale);
}
.admin-carte-mise-avant .admin-carte-chiffre,
.admin-carte-mise-avant .admin-carte-libelle {
  color: var(--couleur-blanc);
}

/* Deux colonnes pour les blocs (empilé sur mobile) */
.admin-deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
@media (max-width: 768px) {
  .admin-deux-colonnes { grid-template-columns: 1fr; }
}

.admin-bloc {
  background-color: var(--couleur-blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: 22px;
}

.admin-bloc h2 {
  color: var(--couleur-titre);
  font-size: 1.15rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--couleur-principale-clair);
}

/* Barre de répartition (pour formations et pipeline CRM) */
.admin-barre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.92rem;
}
.admin-barre-libelle {
  min-width: 110px;
  color: var(--couleur-texte);
  font-weight: 500;
}
.admin-barre-fond {
  flex: 1;
  height: 18px;
  background-color: var(--couleur-principale-clair);
  border-radius: 9px;
  overflow: hidden;
}
.admin-barre-remplie {
  height: 100%;
  background-color: var(--couleur-principale);
  transition: width 0.4s ease;
}
.admin-barre-valeur {
  min-width: 40px;
  text-align: right;
  color: var(--couleur-texte);
  font-weight: 600;
}

/* Tableaux compacts */
.admin-tableau-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-tableau-compact th {
  text-align: left;
  padding: 8px 10px;
  color: var(--couleur-texte-secondaire);
  font-weight: 600;
  border-bottom: 2px solid var(--couleur-bordure);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.admin-tableau-compact td {
  padding: 10px;
  border-bottom: 1px solid var(--couleur-bordure);
  color: var(--couleur-texte);
}
.admin-tableau-compact tr:last-child td {
  border-bottom: none;
}
.admin-tableau-compact .admin-tableau-vide {
  text-align: center;
  color: var(--couleur-texte-secondaire);
  padding: 20px;
  font-style: italic;
}

.admin-badge-formation {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--couleur-principale-clair);
  color: var(--couleur-principale);
}

/* Lien Admin dans la navigation (badge rouge discret) */
.lien-admin {
  background-color: transparent;
  color: var(--couleur-principale) !important;
  padding: 4px 12px;
  border: 1.5px solid var(--couleur-principale);
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.lien-admin:hover {
  background-color: var(--couleur-principale);
  color: var(--couleur-blanc) !important;
}

/* Message d'erreur / chargement */
.admin-message-erreur {
  background-color: #FFF3CD;
  color: #856404;
  padding: 16px 20px;
  border-radius: var(--rayon-carte);
  border-left: 4px solid #F0A030;
  margin-bottom: 20px;
  text-align: center;
}
.admin-message-chargement {
  text-align: center;
  color: var(--couleur-texte-secondaire);
  padding: 40px;
  font-style: italic;
}

/* Boutons d'action dans le tableau de gestion des comptes */
.admin-action {
  padding: 5px 10px;
  border: 1px solid var(--couleur-bordure);
  background-color: var(--couleur-blanc);
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--couleur-texte);
  margin-right: 6px;
  transition: all 0.2s;
}
.admin-action:hover {
  background-color: var(--couleur-principale-clair);
  border-color: var(--couleur-principale);
}
.admin-action-danger {
  color: #C62828;
  border-color: #E0B4B4;
}
.admin-action-danger:hover {
  background-color: #FDECEA;
  border-color: #C62828;
}

.admin-badge-statut {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
}
.admin-badge-statut.standard {
  background-color: #E8F4FD;
  color: #1565C0;
}
.admin-badge-statut.premium {
  background-color: #FFF3CD;
  color: #856404;
}


/* ============================================================
   ZONE DE DANGER (suppression de compte — RGPD)
   ============================================================ */
.zone-danger {
  max-width: 700px;
  margin: 40px auto 60px;
  padding: 24px 28px;
  background-color: #FFF8F8;
  border: 1.5px solid #F5C2C7;
  border-radius: var(--rayon-carte);
}

.zone-danger h3 {
  color: #C62828;
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.zone-danger p {
  color: #6B6B6B;
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.bouton-danger {
  background-color: #C62828;
  color: var(--couleur-blanc);
  border: none;
  padding: 10px 20px;
  border-radius: var(--rayon-bouton);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.bouton-danger:hover {
  background-color: #A31515;
}
.bouton-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}