/* =====================================================================
   accueil.css — mise en page de la page d'accueil (index.html) uniquement.
   Chaque « monde » est une section ; sa couleur de fond est dans
   l'attribut data-fond du HTML, pas ici.
   ===================================================================== */

/* Un monde = une section centrée dans l'espace à droite de la barre */
.monde { padding: 4.5rem 4vw; max-width: 1400px; margin: 0 auto; }
.monde > h2 { margin-bottom: 1.6rem; }
.intro-section { color: var(--texte-secondaire); margin: -0.8rem 0 1.6rem; }
.sous-titre { font-size: 1.05rem; margin-bottom: 1rem; }
.legende { margin-top: 1.6rem; font-size: 0.9rem; }

/* Monde 1 : fiche personnage */
.monde--fiche { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.monde--fiche h1 { margin: 0.8rem 0 1rem; }
.accroche { font-size: 1.15rem; color: var(--texte-secondaire); margin-bottom: 1.6rem; }
.boutons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.ruban-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%; }
.ruban-chiffres li { background: var(--fond-carte); border: 2px solid var(--bordure-douce); padding: 0.8rem 1rem; display: flex; align-items: baseline; gap: 0.6rem; }
.ruban-chiffres b { font-family: var(--police-titre); font-size: 1.8rem; color: var(--accent); }
.ruban-chiffres span { font-size: 0.85rem; color: var(--texte-secondaire); }

/* Monde 2 : apports */
.apports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.apports h3 { margin: 0.8rem 0 0.6rem; }
.apports p { font-size: 0.98rem; color: var(--texte-secondaire); }

/* Monde 3 : grille des projets, 3 par ligne */
.grille-projets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; padding-top: 0.6rem; }
.carte-projet { position: relative; text-decoration: none; background: var(--fond-carte); border: 3px solid var(--texte); box-shadow: var(--ombre-dure); transition: transform 0.12s, box-shadow 0.12s; }
.carte-projet:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--accent); }
.carte-projet__numero { position: absolute; top: -0.9rem; left: -0.6rem; z-index: 1; background: var(--accent); color: var(--noir); font-family: var(--police-pixel); font-weight: 700; font-size: 0.8rem; padding: 0.1rem 0.5rem; border: 2px solid var(--noir); }
.carte-projet__image { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 3px solid var(--texte); background: rgba(255, 255, 255, 0.05); }
.carte-projet__image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carte-projet__image--icone img { object-fit: contain; padding: 1.6rem; }
.carte-projet__image--vide { display: grid; place-content: center; gap: 0.4rem; text-align: center; font-family: var(--police-pixel); font-size: 0.65rem; color: var(--texte-secondaire); }
.carte-projet__image--vide .pixel { font-size: 2rem; }
.carte-projet__corps { padding: 0.9rem 1rem 1rem; display: flex; justify-content: space-between; gap: 0.6rem; align-items: flex-start; }
.carte-projet h3 { font-size: 1.1rem; }
.carte-projet__texte { font-size: 0.85rem; color: var(--texte-secondaire); }
.carte-projet__outils { margin-top: 0.4rem; font-family: var(--police-pixel); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--bleu); }

/* Monde 4 : quête + inventaire */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
.carte--accent h3 { font-size: 1.4rem; margin: 0.6rem 0 0.2rem; }
.objectifs { margin: 1rem 0; display: grid; gap: 0.45rem; }
.objectifs li::before { content: '▢ ' / ''; color: var(--accent); font-family: var(--police-pixel); }
.carte--accent .texte-secondaire { margin-bottom: 1.2rem; }
.competence { margin-bottom: 0.8rem; }
.competence span { display: flex; gap: 0.6rem; font-size: 0.95rem; margin-bottom: 0.25rem; }
.competence span b { font-family: var(--police-pixel); color: var(--bleu); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.06em; }

/* Monde 5 : chemin de progression, façon carte du monde */
.chemin { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; padding-top: 0.5rem; }
.chemin::before { content: ''; position: absolute; left: 8%; right: 8%; top: 2rem; border-top: 4px dashed var(--bordure-douce); }
.chemin li { position: relative; text-align: center; }
.noeud { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto 1rem; background: #0b0b16; border: 3px solid var(--bordure-douce); font-family: var(--police-pixel); font-size: 0.9rem; box-shadow: 4px 4px 0 var(--noir); }
.chemin h3 { font-size: 0.95rem; }
.chemin p { font-size: 0.8rem; color: var(--texte-secondaire); }
.chemin .fait .noeud { border-color: var(--vert); color: var(--vert); }
.chemin .en-cours .noeud { border-color: var(--accent); color: var(--accent); animation: pulse-noeud 1s steps(2, start) infinite; }
.chemin .suivant .noeud { border-color: var(--rose); color: var(--rose); border-style: dashed; }
.chemin .suivant h3 { color: var(--texte); }
.chemin .verrouille { opacity: 0.5; }
@keyframes pulse-noeud { to { box-shadow: 4px 4px 0 var(--accent); } }
@media (prefers-reduced-motion: reduce) { .noeud { animation: none; } .carte-projet { transition: none; } }

/* Monde 6 : contact */
.liens-contact { display: grid; gap: 0.7rem; margin-top: 1rem; }
.liens-contact a { display: flex; gap: 0.8rem; align-items: center; padding: 0.8rem 1rem; background: var(--fond-carte); border: 2px solid var(--bordure-douce); text-decoration: none; }
.liens-contact a:hover { border-color: var(--accent); }
.liens-contact .pixel { color: var(--accent); }
.liens-contact__email { display: flex; gap: 0.6rem; align-items: stretch; }
.liens-contact__email a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.statut-formulaire { margin-top: 1rem; font-family: var(--police-pixel); font-size: 0.7rem; line-height: 1.8; color: var(--vert); }
.statut-formulaire:empty { margin-top: 0; }
.statut-formulaire--erreur { color: var(--rose); }
.statut-formulaire a { color: inherit; text-decoration: underline; }
.pied-de-page { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 3px solid var(--bordure-douce); color: var(--texte-secondaire); font-size: 0.9rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* Écrans moyens et téléphones */
@media (max-width: 1000px) {
  .monde--fiche { min-height: 0; }
  .ruban-chiffres, .apports { grid-template-columns: 1fr 1fr; }
  .grille-projets { grid-template-columns: 1fr 1fr; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .chemin { grid-template-columns: repeat(3, 1fr); }
  .chemin::before { display: none; }
}
@media (max-width: 600px) {
  .monde { padding: 3rem 1rem; }
  .ruban-chiffres, .apports, .grille-projets { grid-template-columns: 1fr; }
  .chemin { grid-template-columns: 1fr 1fr; }
  .boutons .bouton { white-space: normal; }
  .liens-contact__email { flex-direction: column; }
}

/* Monde 2 : qui je suis */
.a-propos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.6rem; align-items: start; }
.a-propos__texte h3 { margin: 1.6rem 0 0.6rem; }
.a-propos__texte h3:first-child { margin-top: 0; }
.a-propos__texte p { font-size: 1.05rem; }
.a-propos__carte { text-align: center; }
.a-propos__photo { width: 160px; aspect-ratio: 1; object-fit: cover; object-position: top; margin: 0 auto 1rem; border: 3px solid var(--texte); box-shadow: 6px 6px 0 var(--accent); }
.a-propos__carte h3 { font-size: 1.3rem; }
.a-propos__sous-titre { font-family: var(--police-pixel); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu); margin: 1.3rem 0 0.5rem; }
.a-propos__passions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.a-propos__passions li { border: 2px solid var(--bordure-douce); background: rgba(255, 255, 255, 0.05); padding: 0.3rem 0.7rem; font-size: 0.9rem; }
.a-propos__objectifs { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.a-propos__objectifs li::before { content: '▢ ' / ''; color: var(--accent); font-family: var(--police-pixel); }
@media (max-width: 1000px) { .a-propos { grid-template-columns: 1fr; } }