/* LA CHARTE DU SITE — issue des FONDATIONS du projet Claude Design « chasse-au-tresor
   — site » [2026-07-22] : fontes.css + tokens.css + composants.css, concaténés tels
   quels sous le nom style.css (aucun HTML à toucher). La version précédente (767
   lignes accumulées page à page) vit dans git. accueil.css reste à part. */

/* La serif du site est une fonte système (Apple) : on la déclare en local() pour
   que la charte soit explicite — aucun fichier à servir, aucun téléchargement.
   Sur Windows/Android, la pile de --serif retombe sur Palatino puis Georgia. */
@font-face {
  font-family: 'Iowan Old Style';
  src: local('Iowan Old Style'), local('IowanOldStyle-Roman');
  font-weight: 400;
  font-style: normal;
}

/* FONDATIONS — jetons « nuit de mer ». Des rôles, pas des teintes.
   Reprend la charte de sources/style.css et la complète : rayons (3 crans au lieu
   de 7 valeurs disséminées), ombres (2 au lieu de 4), familles nommées.
   Portable tel quel : mêmes noms de variables que le site. */
:root {
  /* surfaces — la nuit, la carte posée dessus, le champ creusé dedans */
  --fond: #070d16;
  --carte: #101b2c;
  --saisie: #0a1220;
  /* encres */
  --titre: #f2ece0;        /* os : titres, labels, structure */
  --texte: #dcd6c9;
  --texte-doux: #8a95a6;   /* brume : gris froid */
  --eteint: #5c6675;       /* fermé aux testeurs : lisible, pas cliquable */
  /* l'unique accent */
  --or: #c9a227;           /* laiton : boutons, liens, jalons franchis */
  --or-clair: #1a2338;     /* appui de l'accent sur la nuit */
  /* traits */
  --bordure: #22304a;      /* c'est le liseré qui détache, pas l'ombre */
  --liseret-saisie: #33445f;
  --piste: #24314a;        /* pas encore atteint (frise, badges) */
  /* états */
  --erreur-fond: #2a1418; --erreur-bordure: #7a3038; --erreur-texte: #f0a9ad;
  --succes-fond: #10251a; --succes-bordure: #2f6a45; --succes-texte: #8fd6a8;
  --alerte-fond: #2a2110; --alerte-bordure: #7a5f22; --alerte-texte: #e6c46a;
  /* typographie — 'Iowan Old Style' est une fonte SYSTÈME (Apple) : pas de fichier à
     servir, la pile retombe sur Palatino/Georgia ailleurs — comportement du site actuel. */
  --serif: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; /* @kind font */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* @kind font */
  /* rayons — 3 crans : champ (ce qui se remplit), bloc (ce qui regroupe), carte (ce qui se pose) */
  --rayon-champ: 10px;
  --rayon-bloc: 14px;
  --rayon-carte: 18px;
  --pilule: 999px;
  /* ombres — la carte posée, et une ombre basse pour les blocs secondaires */
  --ombre-carte: 0 6px 20px rgba(0, 0, 0, 0.45);
  --ombre-basse: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* FONDATIONS — composants unifiés. Mêmes noms de classes que sources/style.css :
   ce fichier + tokens.css REMPLACENT style.css sans toucher au HTML des 9 pages.
   Ce qui change : rayons et ombres passés sur les jetons, vignette-monde recolorée
   dans la charte (fini les rgba blancs et le --accent orphelin), paddings de boutons
   alignés. accueil.css (tracé du défilement) reste à part : page-spécifique, cohérent. */

* { box-sizing: border-box; }
body { margin: 0; padding: 2.5rem 1.25rem 4rem; background: var(--fond); color: var(--texte); font-family: var(--sans); line-height: 1.55; }
.conteneur { max-width: 720px; margin: 0 auto; }
a { color: var(--or); }
a:hover { color: #dab63e; }
.lien-retour { display: inline-block; margin-bottom: 1.5rem; color: var(--texte-doux); text-decoration: none; font-size: 0.9rem; }
.lien-retour:hover { color: var(--titre); }

/* ---- titres : h1 serif centré (voix du site), h2/h3 en os ---- */
h1 { color: var(--titre); font-family: var(--serif); font-weight: 400; font-size: 2.3rem; letter-spacing: 0.01em; text-wrap: balance; margin: 0 0 0.75rem; text-align: center; }
h2 { color: var(--titre); font-size: 1.35rem; margin: 0 0 0.4rem; }
h3 { color: var(--titre); font-size: 1.1rem; margin: 0 0 0.5rem; }
.sous-titre { text-align: center; color: var(--texte-doux); font-size: 1.05rem; max-width: 560px; margin: 0 auto 2.5rem; }
.sur-titre { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or); margin: 0 0 0.65rem; }
.aide { font-size: 0.85rem; color: var(--texte-doux); margin: 0.35rem 0 0; }

/* ---- boutons ---- */
.bouton { display: inline-block; background: var(--or); color: var(--fond); border: 1px solid var(--or); border-radius: var(--pilule); padding: 0.8rem 1.6rem; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.bouton:hover { background: transparent; color: var(--or); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.6; cursor: not-allowed; }
.bouton-large { display: block; width: 100%; text-align: center; padding: 1rem; font-size: 1.05rem; }
.btn-secondaire { display: inline-block; background: transparent; color: var(--titre); border: 1.5px solid var(--titre); border-radius: var(--pilule); padding: 0.8rem 1.6rem; font-size: 0.95rem; font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; }
.btn-secondaire:hover { background: var(--titre); color: var(--fond); }
.btn-secondaire.petit { padding: 0.4rem 1rem; font-size: 0.9rem; }
.btn-ajouter { background: transparent; border: 1px dashed var(--or); color: var(--titre); border-radius: var(--rayon-champ); padding: 0.55rem 1rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; font-family: inherit; }
.btn-ajouter:hover { background: var(--or-clair); }
.btn-ajouter:disabled { opacity: 0.5; cursor: not-allowed; border-style: solid; }
.btn-suppr { background: var(--saisie); border: 1px solid var(--bordure); color: var(--erreur-texte); border-radius: var(--rayon-champ); width: 2.4rem; height: 2.4rem; flex-shrink: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.btn-suppr:hover { background: var(--erreur-fond); }

/* ---- surfaces ---- */
.carte, form.carte-form, .bandeau-etapes { background: var(--carte); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); border: 1px solid var(--bordure); padding: 1.75rem 1.5rem; }
form { background: var(--carte); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); border: 1px solid var(--bordure); padding: 1.75rem 1.5rem; }
.carte { text-align: center; display: flex; flex-direction: column; gap: 0.6rem; }
.carte .sous-titre-carte { color: var(--or); font-weight: 600; margin: 0; }
.carte p.description { color: var(--texte-doux); font-size: 0.92rem; margin: 0 0 0.5rem; flex-grow: 1; }
.cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 3rem; }
@media (max-width: 620px) { .cartes { grid-template-columns: 1fr; } }
.section-waouh { background: var(--or-clair); border: 1px solid var(--bordure); border-radius: var(--rayon-bloc); padding: 1.5rem; margin-bottom: 1.75rem; }
.section-waouh h3 { color: var(--or); }
.section-waouh .intro { font-size: 0.92rem; color: var(--texte-doux); margin-bottom: 1.25rem; }
.recap { border: 1px solid var(--bordure); border-radius: var(--rayon-bloc); background: var(--saisie); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.recap dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.2rem; margin: 0; }
.recap dt { color: var(--texte-doux); font-size: 0.88rem; }
.recap dd { margin: 0; color: var(--titre); font-weight: 500; }
.recap dd a { font-size: 0.8rem; margin-left: 0.5em; font-weight: 400; }

/* ---- formulaire ---- */
fieldset { border: none; padding: 0; margin: 0 0 1.75rem; }
legend { color: var(--titre); font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: 1rem; }
.champ { margin-bottom: 1.35rem; }
.champ > label, .champ > .label { display: block; font-weight: 600; color: var(--titre); margin-bottom: 0.4rem; }
input[type="text"], input[type="email"], input[type="number"], select, textarea { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--liseret-saisie); border-radius: var(--rayon-champ); font-family: inherit; font-size: 1rem; background: var(--saisie); color: var(--texte); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--or); outline-offset: 1px; }
textarea { resize: vertical; min-height: 4.5rem; }
.groupe-repetable { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.ligne-repetable { display: flex; gap: 0.5rem; align-items: flex-start; }
.ligne-repetable input, .ligne-repetable textarea { flex: 1; }
.groupe-radio label { display: block; background: var(--saisie); border: 1px solid var(--bordure); border-radius: var(--rayon-bloc); padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer; font-weight: 500; }
.groupe-radio input[type="radio"] { margin-right: 0.6rem; accent-color: var(--or); }
.groupe-radio label:has(input:checked) { border-color: var(--or); background: var(--or-clair); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 0.45rem 0.9rem; border: 1px solid var(--bordure); border-radius: var(--pilule); background: var(--carte); cursor: pointer; font-size: 0.88rem; font-weight: 500; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--or); background: var(--or-clair); color: var(--titre); }
.case { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500; cursor: pointer; }
.case input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--or); }
details { background: var(--saisie); border: 1px solid var(--bordure); border-radius: var(--rayon-bloc); padding: 0.9rem 1.1rem; margin-bottom: 1.75rem; }
summary { cursor: pointer; font-weight: 600; color: var(--titre); }
details .groupe-repetable { margin-top: 1rem; }
.notice-rgpd { font-size: 0.85rem; background: var(--saisie); border-left: 4px solid var(--or); padding: 0.9rem 1.1rem; border-radius: var(--rayon-champ); margin: 0 0 1.5rem; color: var(--texte-doux); }
.erreurs { background: var(--erreur-fond); border: 1px solid var(--erreur-bordure); color: var(--erreur-texte); border-radius: var(--rayon-champ); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.erreurs p { margin: 0 0 0.4rem; font-weight: 600; }
.erreurs ul { margin: 0; padding-left: 1.2rem; }

/* ---- vignettes de monde — recolorées dans la charte [fondations 2026-07-22] :
   le champ se creuse (--saisie), le trait détache (--bordure), l'élu prend l'or.
   Avant : rgba(255,255,255,…) et var(--accent, #d4a12a) qui n'existait nulle part. */
.vignettes-monde { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 6px; }
.vignette-monde { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; text-align: center; cursor: pointer; border: 1.5px solid var(--bordure); border-radius: var(--rayon-bloc); background: var(--saisie); transition: border-color .18s, background .18s, transform .18s; }
.vignette-monde:hover { border-color: var(--liseret-saisie); transform: translateY(-2px); }
.vignette-monde input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.vignette-monde svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.vignette-monde .vignette-texte { display: flex; flex-direction: column; gap: 2px; }
.vignette-monde .vignette-texte strong { font-size: .95rem; color: var(--titre); }
.vignette-monde .vignette-texte span { font-size: .8rem; color: var(--texte-doux); line-height: 1.25; }
.vignette-monde:has(input:checked) { border-color: var(--or); background: var(--or-clair); }
.vignette-monde:has(input:checked) svg { opacity: 1; color: var(--or); }

/* ---- bandeau de site : une seule barre fixe, construite par bandeau.js ---- */
.bandeau-site { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; gap: 16px; padding: 0.65rem 1.25rem; background: rgba(16, 27, 44, 0.92); border-bottom: 1px solid var(--bordure); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 0.92rem; }
.bandeau-site .bs-espace { flex: 1; }
.bandeau-site .bs-mondes { display: flex; align-items: center; gap: clamp(6px, 1.6vw, 16px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.bandeau-site .bs-mondes::-webkit-scrollbar { display: none; }
.bandeau-site .bs-monde { display: flex; align-items: center; gap: 7px; color: var(--or); text-decoration: none; opacity: 0.78; white-space: nowrap; transition: opacity 0.2s, transform 0.2s; }
.bandeau-site .bs-monde:hover, .bandeau-site .bs-monde:focus-visible { opacity: 1; transform: translateY(-1px); }
.bandeau-site .bs-monde svg { width: 30px; height: 30px; flex: none; border: 1.4px solid currentColor; border-radius: 50%; padding: 4px; }
.bandeau-site .bs-monde svg .tr-trait { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.bandeau-site .bs-monde span { font-size: 0.78rem; letter-spacing: 0.03em; }
.bandeau-site .bs-monde-a-venir { opacity: 0.45; }
.bandeau-site .bs-monde-a-venir:hover { opacity: 0.75; }
.bandeau-site .bs-lien { display: inline-flex; align-items: center; gap: 6px; color: var(--or); text-decoration: none; white-space: nowrap; }
.bandeau-site .bs-lien:hover { text-decoration: underline; }
.bandeau-site .bs-icone { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .bandeau-site .bs-monde span { display: none; }
  .bandeau-site .bs-lien span { display: none; }
  .bandeau-site .bs-panier span { display: inline; font-size: 0.8rem; }
  .bandeau-site .bs-mondes { -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%); mask-image: linear-gradient(to right, #000 84%, transparent 100%); }
}
.bandeau-site ~ .conteneur { padding-top: 4.2rem; }
.bandeau-reprise { background: var(--carte); border: 1.5px solid var(--or); border-radius: var(--rayon-bloc); padding: 14px 18px; margin: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- frise d'étapes (commande + statut) ---- */
.bandeau-etapes h2 { text-align: center; margin-bottom: 1.25rem; }
.etapes { display: flex; gap: 1rem; justify-content: space-between; }
@media (max-width: 620px) { .etapes { flex-direction: column; gap: 1.25rem; } }
.etape { flex: 1; text-align: center; }
.etape .numero { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--or); color: var(--fond); font-weight: 700; margin-bottom: 0.5rem; }
.etape p { margin: 0; font-size: 0.92rem; }
.frise { position: relative; display: flex; justify-content: space-between; margin: 2rem 0 2.5rem; }
.frise::before { content: ""; position: absolute; top: 1.05rem; left: 6%; right: 6%; height: 2px; background: var(--bordure); z-index: 0; }
.etape-statut { position: relative; z-index: 1; flex: 1; text-align: center; }
.etape-statut .point { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--piste); color: var(--fond); font-weight: 700; margin: 0 auto 0.5rem; font-size: 0.9rem; }
.etape-statut p { margin: 0; font-size: 0.85rem; color: var(--texte-doux); }
.etape-statut.active .point { background: var(--titre); }
.etape-statut.active p { color: var(--titre); font-weight: 600; }
.etape-statut.faite .point { background: var(--or); }
.etape-statut.faite p { color: var(--texte); }

/* ---- messages d'état ---- */
.statut-texte { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--titre); background: var(--carte); border-radius: var(--rayon-bloc); padding: 1.25rem; box-shadow: var(--ombre-carte); border: 1px solid var(--bordure); }
.message-livree, .message-sav { border-radius: var(--rayon-bloc); padding: 1.75rem; text-align: center; margin-top: 1.5rem; font-size: 1.1rem; }
.message-livree { background: var(--succes-fond); border: 1px solid var(--succes-bordure); color: var(--succes-texte); }
.message-sav { background: var(--alerte-fond); border: 1px solid var(--alerte-bordure); color: var(--alerte-texte); }
.message-attente { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-bloc); padding: 18px 22px; margin-top: 18px; color: var(--titre); line-height: 1.5; }
.message-attente p + p { margin-top: 10px; color: var(--texte-doux); }
.atelier { text-align: center; padding: 26px 20px 18px; background: var(--carte); border-radius: var(--rayon-bloc); box-shadow: var(--ombre-basse); border: 1px solid var(--bordure); margin-top: 18px; }
.roue { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid var(--piste); border-top-color: var(--or); animation: tourne 1.1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
#atelier-message { color: var(--titre); font-weight: 600; min-height: 1.4em; }
.atelier-duree { color: var(--texte-doux); font-size: 0.92em; margin-top: 6px; }
.atelier-note { color: var(--texte-doux); font-size: 0.88em; margin-top: 12px; line-height: 1.45; }
.id-commande { text-align: center; color: var(--texte-doux); margin-bottom: 2rem; }
.badge-theme { text-align: center; color: var(--or); font-weight: 600; margin: -0.5rem 0 1.5rem; }

/* ---- « bientôt » : présent mais en retrait ---- */
.bientot { opacity: 0.9; }
.bientot, .bientot * { cursor: not-allowed; }
.bientot > label, .bientot label, .bientot .label, .bientot p, .bientot select { color: var(--eteint); }
.badge-bientot { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.5em; font-size: 0.72em; font-weight: 600; border-radius: var(--pilule); background: var(--piste); color: var(--texte-doux); vertical-align: middle; letter-spacing: 0.02em; }