/* ============================================================
   CRONAVE — Feuille de style principale
   Couvre : index.html (accueil) + jeu.html (interface de jeu)
   ============================================================ */


/* ============================================================
   1. IMPORT GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400&family=Cormorant+SC:wght@400&family=Jost:wght@200;300&display=swap');


/* ============================================================
   2. VARIABLES CSS (palette & typographie)
   Modifier une variable ici = changer partout dans le site.
   ============================================================ */
:root {
  /* Couleurs */
  --fond-principal:    #0F0C07;
  --fond-secondaire:   #1A1208;
  --fond-carte:        #2A1E0A;
  --couleur-or:        #C9A84C;
  --couleur-or-pale:   #E8D5A3;
  --texte-principal:   #F5ECD7;
  --texte-secondaire:  #B8A882;
  --alerte:            #8B2E2E;

  /* Bordures */
  --bordure:           1px solid rgba(201, 168, 76, 0.20);
  --bordure-forte:     1px solid rgba(201, 168, 76, 0.40);

  /* Typographies */
  --font-titre:        'Cormorant Garamond', serif;
  --font-sc:           'Cormorant SC', serif;
  --font-corps:        'Jost', sans-serif;

  /* Espacements */
  --rayon:             0px; /* pas de bords arrondis — règle d'interface */
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 17px; /* taille de base — tout le site scale proportionnellement */
}

body {
  background-color: var(--fond-principal);
  color: var(--texte-principal);
  font-family: var(--font-corps);
  font-weight: 300;
  line-height: 1.8;
  min-height: 100vh;
}

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

a:hover {
  color: var(--couleur-or-pale);
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: var(--font-corps);
  border: none;
  border-radius: var(--rayon);
}


/* ============================================================
   4. PAGE D'ACCUEIL — index.html
   ============================================================ */

.page-accueil {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- En-tête accueil --- */
.header-accueil {
  text-align: center;
  padding: 80px 20px 60px;
  border-bottom: var(--bordure);
  position: relative;
}

/* Logo SVG (injecté en HTML) */
.logo-svg {
  display: block;
  margin: 0 auto 24px;
}

/* Wordmark CRONAVE */
.logo-cronave {
  font-family: var(--font-sc);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: 10px;
  color: var(--texte-principal);
  margin-bottom: 12px;
}

/* Tagline */
.slogan {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 1.1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

/* --- Contenu accueil --- */
.contenu-accueil {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  width: 100%;
}

.titre-section {
  font-family: var(--font-sc);
  font-size: 1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  font-weight: 400;
  margin-bottom: 40px;
}

/* --- Grille de scénarios --- */
.grille-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}

/* --- Carte de scénario --- */
.carte-scenario {
  background-color: var(--fond-secondaire);
  border: var(--bordure);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.carte-scenario.disponible:hover {
  border-color: rgba(201, 168, 76, 0.50);
  transform: translateY(-2px);
}

.carte-scenario.bientot {
  opacity: 0.5;
}

/* Badge "Disponible" / "Bientôt" */
.badge-scenario {
  position: absolute;
  top: -1px;
  right: 28px;
  background-color: var(--couleur-or);
  color: var(--fond-principal);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 4px 12px;
}

.titre-scenario {
  font-family: var(--font-titre);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--texte-principal);
  line-height: 1.3;
  margin-bottom: 4px;
}

.lieu-scenario {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--couleur-or);
  margin-bottom: 16px;
}

.description-scenario {
  font-size: 1.15rem;
  color: var(--texte-secondaire);
  line-height: 1.8;
}

.details-scenario {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1.1rem;
  color: var(--texte-secondaire);
  font-weight: 200;
  border-top: var(--bordure);
  padding-top: 20px;
}

/* --- Bouton principal --- */
.btn-jouer {
  display: block;
  background-color: var(--couleur-or);
  color: var(--fond-principal);
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  padding: 16px 24px;
  border-radius: var(--rayon);
  transition: background-color 0.2s ease;
  margin-top: auto;
}

.btn-jouer:hover {
  background-color: var(--couleur-or-pale);
  color: var(--fond-principal);
}

.btn-jouer.desactive {
  background-color: rgba(201, 168, 76, 0.15);
  color: var(--texte-secondaire);
  cursor: not-allowed;
}

/* --- Pied de page --- */
.footer-cronave {
  text-align: center;
  padding: 24px;
  border-top: var(--bordure);
  font-size: 0.9rem;
  font-weight: 200;
  letter-spacing: 2px;
  color: var(--texte-secondaire);
}


/* ============================================================
   5. PAGE DE JEU — jeu.html
   ============================================================ */

.page-jeu {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden; /* on gère le scroll manuellement dans chaque zone */
}

/* --- En-tête de jeu --- */
.header-jeu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: var(--bordure);
  background-color: var(--fond-secondaire);
  flex-shrink: 0; /* ne rétrécit pas */
}

.btn-retour {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--texte-secondaire);
  transition: color 0.2s ease;
}

.btn-retour:hover {
  color: var(--couleur-or);
}

.titre-enquete {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: var(--texte-principal);
}

.date-enquete {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.95rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--couleur-or);
}

/* --- Contenu jeu (deux colonnes) --- */
.contenu-jeu {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  overflow: hidden;
}

/* --- Colonne principale (gauche) --- */
.colonne-principale {
  overflow-y: auto;
  padding: 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Scrollbar discrète */
.colonne-principale::-webkit-scrollbar { width: 4px; }
.colonne-principale::-webkit-scrollbar-track { background: var(--fond-principal); }
.colonne-principale::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.2); }

/* --- Introduction --- */
.bloc-introduction {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--texte-secondaire);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 0;
}

.consigne {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

/* --- Liste des personnages --- */
.liste-personnages {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* --- Carte personnage --- */
.carte-personnage {
  background-color: var(--fond-secondaire);
  border: var(--bordure);
  padding: 24px;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.carte-personnage:hover {
  border-color: rgba(201, 168, 76, 0.50);
}

.carte-personnage h3 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--texte-principal);
}

.titre-personnage {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--couleur-or);
}

.portrait-personnage {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
  line-height: 1.6;
  flex: 1;
}

.carte-personnage button {
  background-color: transparent;
  border: var(--bordure);
  color: var(--couleur-or);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-top: 8px;
}

.carte-personnage button:hover {
  background-color: var(--couleur-or);
  color: var(--fond-principal);
}

/* --- Zone d'interrogatoire --- */
.zone-interrogatoire {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.identite-personnage {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: var(--bordure);
  padding-bottom: 20px;
}

.identite-personnage h2 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--texte-principal);
}

.titre-cour {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--couleur-or);
  margin: 4px 0 12px;
}

.presentation {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--texte-secondaire);
  max-width: 500px;
}

/* --- Zone de conversation (bulles) --- */
.zone-conversation {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
  min-height: 200px;
  max-height: 480px;
}

.zone-conversation::-webkit-scrollbar { width: 3px; }
.zone-conversation::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.15); }

/* Bulle générique */
.message {
  padding: 14px 18px;
  max-width: 78%;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Bulle du joueur — droite, fond or translucide */
.message-joueur {
  align-self: flex-end;
  background-color: rgba(201, 168, 76, 0.12);
  border: var(--bordure-forte);
  color: var(--texte-principal);
  font-family: var(--font-corps);
  font-weight: 300;
}

/* Bulle du personnage — gauche, fond sombre */
.message-personnage {
  align-self: flex-start;
  background-color: #231908;
  border: 1px solid rgba(201, 168, 76, 0.15);
  color: var(--texte-principal);
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1rem;
}

/* Message système (neutre, centré) */
.message-jeu {
  align-self: center;
  color: var(--texte-secondaire);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 1rem;
  letter-spacing: 2px;
  font-style: italic;
  text-align: center;
  max-width: 100%;
}

/* --- Indicateur de chargement (points animés) --- */
.chargement {
  display: flex;
  gap: 6px;
  padding: 8px 0;
}

.point {
  width: 6px;
  height: 6px;
  background-color: var(--couleur-or);
  border-radius: 50%;
  animation: pulsation 1.2s infinite ease-in-out;
}

.point:nth-child(2) { animation-delay: 0.2s; }
.point:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulsation {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1);   }
}

/* --- Zone de saisie --- */
.zone-saisie {
  display: flex;
  gap: 0;
  border: var(--bordure-forte);
}

.input-message {
  flex: 1;
  background-color: var(--fond-secondaire);
  border: none;
  color: var(--texte-principal);
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 0.95rem;
  padding: 14px 18px;
  outline: none;
}

.input-message::placeholder {
  color: var(--texte-secondaire);
  font-style: italic;
  opacity: 0.6;
}

.input-message:focus {
  background-color: rgba(42, 30, 10, 0.8);
}

.btn-envoyer {
  background-color: var(--couleur-or);
  color: var(--fond-principal);
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--rayon);
  transition: background-color 0.2s ease;
}

.btn-envoyer:hover {
  background-color: var(--couleur-or-pale);
}

/* --- Bouton accusation --- */
.zone-accusation {
  padding-top: 12px;
  border-top: var(--bordure);
}

.btn-accuser {
  background-color: transparent;
  border: 1px solid var(--alerte);
  color: var(--alerte);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-accuser:hover {
  background-color: var(--alerte);
  color: var(--texte-principal);
}

/* --- Bouton secondaire --- */
.btn-secondaire {
  background-color: transparent;
  border: var(--bordure);
  color: var(--texte-secondaire);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 16px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-secondaire:hover {
  color: var(--couleur-or);
  border-color: rgba(201, 168, 76, 0.40);
}

/* --- Panneau d'accusation --- */
.panneau-accusation {
  background-color: var(--fond-secondaire);
  border: 1px solid var(--alerte);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panneau-accusation h2 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--alerte);
}

.panneau-accusation p {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
}

.liste-accusation {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-accuser-personnage {
  background-color: var(--fond-carte);
  border: var(--bordure);
  color: var(--texte-principal);
  font-family: var(--font-corps);
  font-size: 0.85rem;
  padding: 14px 20px;
  text-align: left;
  line-height: 1.6;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-accuser-personnage small {
  font-weight: 200;
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--couleur-or);
}

.btn-accuser-personnage:hover {
  border-color: var(--alerte);
  background-color: rgba(139, 46, 46, 0.12);
}

/* --- Fin du jeu --- */
.zone-fin {
  background-color: var(--fond-secondaire);
  border: var(--bordure);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.zone-fin h2 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 2px;
  color: var(--couleur-or);
}

.solution {
  border-left: 2px solid var(--couleur-or);
  padding-left: 24px;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1rem;
  color: var(--texte-secondaire);
  line-height: 2;
}


/* ============================================================
   6. CARNET D'INDICES (colonne droite)
   ============================================================ */

.carnet-indices {
  background-color: var(--fond-secondaire);
  border-left: var(--bordure);
  padding: 32px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carnet-indices::-webkit-scrollbar { width: 3px; }
.carnet-indices::-webkit-scrollbar-thumb { background: rgba(201, 168, 76, 0.15); }

.titre-carnet {
  font-family: var(--font-sc);
  font-size: 1rem;
  letter-spacing: 4px;
  font-weight: 400;
  color: var(--couleur-or);
}

.sous-titre-carnet {
  font-size: 1rem;
  font-weight: 200;
  color: var(--texte-secondaire);
  line-height: 1.6;
}

.liste-indices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.liste-indices li {
  font-size: 1.1rem;
  color: var(--texte-principal);
  line-height: 1.7;
  border-left: 2px solid rgba(201, 168, 76, 0.5);
  padding-left: 14px;
}

.indice-vide {
  font-style: italic;
  opacity: 0.5;
}

.source-indice {
  display: block;
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--couleur-or);
  margin-bottom: 6px;
}

.compteur-indices {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
  border-top: var(--bordure);
  padding-top: 16px;
}

/* Animation quand un nouvel indice apparaît */
.nouvel-indice {
  animation: eclat 2s ease;
}

@keyframes eclat {
  0%   { border-left-color: var(--couleur-or); }
  100% { border-left-color: transparent; }
}


/* ============================================================
   7. NOUVEAUX COMPOSANTS v2
   ============================================================ */

/* Stats dans le header */
.stats-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: var(--texte-secondaire);
}

.stat-sep { opacity: 0.3; }

/* Notification personnage surprise */
.notification-surprise {
  background-color: var(--alerte);
  color: var(--texte-principal);
  text-align: center;
  padding: 12px 24px;
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 1rem;
  letter-spacing: 2px;
  animation: apparition 0.5s ease;
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge "Nouveau" sur Racine */
.badge-surprise {
  display: inline-block;
  background-color: var(--alerte);
  color: var(--texte-principal);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-bottom: 8px;
}

/* Carte personnage déjà visitée */
.carte-personnage.deja-visite {
  opacity: 0.7;
}

.carte-personnage.deja-visite::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--couleur-or);
  font-size: 0.8rem;
}

.carte-personnage { position: relative; }

/* Bouton "Je sais qui je suis" dans la zone d'interrogatoire */
.zone-hypothese-btn {
  padding-top: 12px;
  border-top: var(--bordure);
}

.btn-hypothese {
  background-color: transparent;
  border: 1px solid var(--couleur-or);
  color: var(--couleur-or);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-hypothese:hover {
  background-color: var(--couleur-or);
  color: var(--fond-principal);
}

/* Panneau de formuler une hypothèse */
.panneau-hypothese {
  background-color: var(--fond-secondaire);
  border: var(--bordure-forte);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panneau-hypothese h2 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 2px;
  color: var(--couleur-or);
}

.panneau-hypothese p {
  font-size: 0.9rem;
  color: var(--texte-secondaire);
  line-height: 1.8;
}

.liste-choix-hypotheses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-choix-hypothese {
  background-color: var(--fond-carte);
  border: var(--bordure);
  color: var(--texte-principal);
  font-family: var(--font-corps);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 16px 20px;
  text-align: left;
  line-height: 1.6;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-choix-hypothese:hover {
  border-color: var(--couleur-or);
  background-color: rgba(201, 168, 76, 0.08);
}

/* Révélation finale */
.revelation {
  border-left: 2px solid var(--couleur-or);
  padding-left: 24px;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--texte-secondaire);
  line-height: 2;
}

/* Score final */
.score-final {
  border: var(--bordure);
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.label-score {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}

.valeur-score {
  font-family: var(--font-titre);
  font-size: 4rem;
  font-weight: 300;
  color: var(--couleur-or);
  line-height: 1;
}

.rarete-score {
  font-family: var(--font-sc);
  font-size: 1rem;
  letter-spacing: 4px;
  color: var(--texte-principal);
}

.description-rarete {
  font-size: 1rem;
  color: var(--texte-secondaire);
  font-weight: 200;
}

.actions-fin {
  display: flex;
  gap: 16px;
}

/* Bouton dans le carnet pour formuler l'hypothèse */
.compteurs-carnet {
  border-top: var(--bordure);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-hypothese-carnet {
  background-color: transparent;
  border: var(--bordure);
  color: var(--texte-secondaire);
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 12px;
  text-align: center;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-hypothese-carnet:hover {
  color: var(--couleur-or);
  border-color: rgba(201, 168, 76, 0.4);
}


/* ============================================================
   8. RESPONSIVE — tablette
   ============================================================ */
@media (max-width: 900px) {

  .contenu-jeu {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .carnet-indices {
    border-left: none;
    border-top: var(--bordure);
    max-height: 200px;
  }

  .header-jeu {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 16px;
  }

  .colonne-principale {
    padding: 24px;
  }

  .grille-scenarios {
    grid-template-columns: 1fr;
  }

  .contenu-accueil {
    padding: 40px 24px;
  }
}