/* ==========================================================================
   JF·IA·LAB · feuille de style unique du site du labo
   Charon IA — L'Humain aux commandes
   Claude Opus 5.5 (Anthropic) — outil et partenaire de connaissance

   Règles (regles-site-labo.md) :
   - Une seule feuille pour tout le site, aucun style dans le HTML.
   - Polices hébergées sur le site (fonts/, licence SIL OFL) : aucune requête externe.
   - Les couleurs sont définies une seule fois, dans :root. Pour changer la palette,
     on change seulement ces lignes-là.
   - Ambiance : lumineuse, positive, confiante. Le futur en plein jour.
   ========================================================================== */


/* 1. POLICES ------------------------------------------------------------- */
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("fonts/dm-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 600; font-display: swap; src: url("fonts/dm-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("fonts/dm-sans-latin-700.woff2") format("woff2"); }


/* 2. COULEURS (palette « aube » : ciel clair, puis le bleu et l'or de la boule d'entrée) */
:root {
  --ciel:     #f4f9ff;   /* fond de page, bleu très pâle et lumineux */
  --nuage:    #fbfdff;   /* fond des cartes */
  --brume:    #e8f2fe;   /* sections alternées, puces */
  --trait:    #d3e3f7;   /* bordures fines, quadrillage */
  --encre:    #15243b;   /* texte courant */
  --ardoise:  #4a5d78;   /* texte secondaire (contraste 6,6:1 sur --ciel) */
  --azur:     #24569e;   /* bleu de la boule d'entrée : titres, liens, boutons */
  --nuit:     #162c4d;   /* bleu nuit de la boule (lapis de Charon) : fonds profonds */
  --lagon:    #0e8fa8;   /* turquoise : accents, état « stable » */
  --aube:     #e2b04f;   /* or des orbites : décor seulement, jamais du petit texte */
  --corail:   #c98a2b;   /* or bruni (le bois) : dégradés, décor */
  --lilas:    #5b7fc9;   /* bleu ciel du globe : état « à venir », décor */
  --ambre-txt:#7a5512;   /* ambre lisible pour le petit texte (contraste 5,9:1) */
  --lilas-txt:#2f5aa8;   /* lilas lisible pour le petit texte */
  --lagon-txt:#0b6f83;   /* turquoise lisible pour le petit texte */

  --corps: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --fixe: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --rayon: 18px;

  /* Fenêtre d'accueil (banniere.js) : couleurs d'origine du site Charon, pour garder
     la boule spatiale et l'avis Loi 25 identiques à l'entrée approuvée le 2026-09-29. */
  --creme: #faf8f5; --carte: #fdfbf7; --voile: #f3eee4; --ligne: #e6ded3; --texte: #2d2620;
  --gris: #6b5f55; --lapis: #162c4d; --bronze: #6e4f17; --or: #b8892e;
}


/* 3. BASE --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; font-family: var(--corps); color: var(--encre); line-height: 1.65;
  background-color: var(--ciel);
  background-image:
    radial-gradient(900px 520px at 85% -8%, rgba(226, 176, 79, .18), transparent 60%),
    radial-gradient(800px 600px at -10% 10%, rgba(14, 143, 168, .14), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(91, 127, 201, .10), transparent 60%),
    linear-gradient(var(--trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: auto, auto, auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
}
a { color: var(--azur); }
img { max-width: 100%; height: auto; }
.contenant { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.fixe { font-family: var(--fixe); }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 16px; top: 16px; background: var(--nuage); padding: 8px 12px; z-index: 50; }


/* 4. EN-TÊTE ------------------------------------------------------------ */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(244, 249, 255, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--trait); }
.entete .contenant { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { font-family: var(--fixe); font-weight: 700; letter-spacing: .14em; color: var(--encre); text-decoration: none; white-space: nowrap; }
.logo .l-jf { color: var(--azur); }
.logo .l-ia { color: var(--corail); }
.logo { text-shadow: none; }
.menu { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.menu a { color: var(--ardoise); text-decoration: none; padding: 7px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.menu a:hover, .menu a:focus { color: var(--azur); background: var(--brume); }
.langue { font-family: var(--fixe); font-size: .85rem; border: 1px solid var(--trait); border-radius: 999px; padding: 6px 12px; text-decoration: none; color: var(--encre); background: var(--nuage); }

.etat-labo { display: flex; border-top: 1px solid var(--trait); overflow: hidden; white-space: nowrap; font-family: var(--fixe); font-size: .78rem; color: var(--ardoise); }
.etat-labo ul { flex: none; display: flex; gap: 28px; list-style: none; margin: 0; padding: 7px 14px; animation: defile 40s linear infinite; }
.etat-labo li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--etat, var(--lagon)); box-shadow: 0 0 0 3px rgba(14, 143, 168, .15); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-100%); } }


/* 5. ACCUEIL (héros) ---------------------------------------------------- */
.heros { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; padding: 72px 0 56px; }
.surtitre { font-family: var(--fixe); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lagon-txt); margin: 0; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); line-height: 1.02; letter-spacing: -.025em; margin: 14px 0 22px; color: var(--encre); }
h1 .degrade { background: linear-gradient(90deg, var(--corail), var(--aube) 30%, var(--azur) 70%, var(--nuit)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapeau { font-size: 1.18rem; color: var(--ardoise); max-width: 560px; margin: 0; }
.actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.bouton { display: inline-block; font-weight: 700; padding: 13px 22px; border-radius: 999px; text-decoration: none; border: 2px solid var(--azur); background: var(--azur); color: var(--nuage); transition: transform .2s, box-shadow .2s; }
.bouton:hover, .bouton:focus { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(36, 86, 158, .28); }
.bouton.secondaire { background: transparent; color: var(--azur); }

.astre { position: relative; aspect-ratio: 1; width: 100%; max-width: 440px; margin: auto; }
.astre .orbite { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(226, 176, 79, .55); animation: tourne 46s linear infinite; }
.astre .orbite.o2 { inset: 13%; border: 1.5px solid rgba(226, 176, 79, .35); animation-duration: 30s; animation-direction: reverse; }
.astre .orbite.o3 { inset: 24%; border: 1.5px dashed rgba(36, 86, 158, .45); animation-duration: 20s; }
.astre .coeur { position: absolute; inset: 33%; border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 17%, rgba(240, 205, 120, .45) 17% 18%),
    radial-gradient(circle at 38% 34%, #9cc2f0, #3b6db3 30%, var(--nuit) 70%, #0a1424 100%);
  border: 2px solid rgba(240, 205, 120, .7);
  box-shadow: 0 0 60px rgba(226, 176, 79, .45), 0 0 140px rgba(91, 127, 201, .25); animation: respire 3.6s ease-in-out infinite; }
.astre .etiquette { position: absolute; font-family: var(--fixe); font-size: .74rem; color: var(--encre); background: var(--nuage); border: 1px solid var(--trait); padding: 5px 10px; border-radius: 999px; box-shadow: 0 6px 18px rgba(21, 36, 59, .08); white-space: nowrap; }
.astre .e1 { top: 6%; left: 56%; } .astre .e2 { top: 46%; left: -2%; } .astre .e3 { bottom: 8%; left: 50%; }
.astre .orbite::after { content: ""; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; border-radius: 50%; background: #ffe9b0; box-shadow: 0 0 14px #f0cd78, 0 0 4px #fff; }
.astre .orbite.o3::after { width: 10px; height: 10px; left: -5px; background: var(--azur); box-shadow: 0 0 10px rgba(36, 86, 158, .6); }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes respire { 50% { transform: scale(1.06); } }


/* 6. SECTIONS ----------------------------------------------------------- */
section.bloc { padding: 84px 0; }
.titre-bloc { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.titre-bloc .numero { font-family: var(--fixe); color: var(--ambre-txt); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -.015em; margin: 0; }
.titre-bloc p { width: 100%; max-width: 720px; color: var(--ardoise); margin: 4px 0 0; }
.carte { background: var(--nuage); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 12px 36px rgba(21, 36, 59, .07); }


/* 7. BANC D'ESSAI ------------------------------------------------------- */
.banc { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; }
.banc .gauche { padding: 34px; }
.banc .droite { padding: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 340px;
  background:
    radial-gradient(1.5px 1.5px at 14% 20%, rgba(255, 255, 255, .9), transparent),
    radial-gradient(1px 1px at 80% 16%, rgba(240, 205, 120, .9), transparent),
    radial-gradient(1.5px 1.5px at 70% 82%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1px 1px at 26% 78%, rgba(240, 205, 120, .8), transparent),
    radial-gradient(1px 1px at 90% 55%, rgba(255, 255, 255, .7), transparent),
    radial-gradient(ellipse at 50% 40%, #2e5694 0%, var(--nuit) 55%, #0d1a2e 100%); }
.banc .droite .avis { color: #e6dcc6; }
.banc h3 { font-size: 1.6rem; margin: 12px 0 8px; }
.fiche { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 18px 0 0; font-size: .92rem; }
.fiche dt { font-family: var(--fixe); color: var(--ardoise); }
.fiche dd { margin: 0; }
.micro { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #fff3d0, #f0cd78 45%, var(--corail)); box-shadow: 0 0 0 6px rgba(240, 205, 120, .18), 0 0 40px rgba(240, 205, 120, .45); transition: transform .2s; }
.micro:hover, .micro:focus { transform: scale(1.05); }
.micro svg { width: 46px; height: 46px; stroke: var(--nuit); }
.onde { display: flex; gap: 5px; height: 34px; align-items: center; }
.onde span { width: 5px; border-radius: 3px; background: #f0cd78; opacity: .85; animation: onde 1.1s ease-in-out infinite; }
.onde span:nth-child(2), .onde span:nth-child(8) { animation-delay: .1s; }
.onde span:nth-child(3), .onde span:nth-child(7) { animation-delay: .2s; }
.onde span:nth-child(4), .onde span:nth-child(6) { animation-delay: .3s; }
.onde span:nth-child(5) { animation-delay: .4s; }
@keyframes onde { 0%, 100% { height: 6px; } 50% { height: 30px; } }
.avis { font-size: .86rem; color: var(--ardoise); text-align: center; max-width: 340px; margin: 0; }


/* 8. BAIES D'EXPÉRIENCES ------------------------------------------------ */
.baies { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.baie { padding: 24px; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; }
.baie::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--aube), var(--corail), var(--azur)); opacity: .85; }
.baie:hover { transform: translateY(-5px); border-color: var(--azur); box-shadow: 0 18px 44px rgba(36, 86, 158, .14); }
.baie .haut { display: flex; justify-content: space-between; font-family: var(--fixe); font-size: .76rem; color: var(--ardoise); }
.baie h3 { margin: 14px 0 8px; font-size: 1.22rem; }
.baie p { color: var(--ardoise); margin: 0; font-size: .95rem; }
.pastille { font-family: var(--fixe); font-size: .72rem; padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.stable { color: var(--lagon-txt); background: rgba(14, 143, 168, .12); }
.essai { color: var(--ambre-txt); background: rgba(226, 176, 79, .16); }
.venir { color: var(--lilas-txt); background: rgba(91, 127, 201, .12); }
.outils { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; padding: 0; list-style: none; }
.outils li { font-family: var(--fixe); font-size: .7rem; color: var(--azur); background: var(--brume); padding: 3px 8px; border-radius: 6px; }
.baie.libre { border-style: dashed; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; }
.baie.libre::before { display: none; }
.baie.libre .plus { font-size: 2.4rem; line-height: 1; color: var(--azur); font-family: var(--fixe); }


/* 9. JOURNAL ------------------------------------------------------------ */
.journal { list-style: none; margin: 0 0 0 8px; padding: 0; border-left: 2px solid var(--trait); }
.journal li { position: relative; padding: 0 0 28px 30px; }
.journal li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--nuage); border: 3px solid var(--aube); }
.journal time { font-family: var(--fixe); font-size: .84rem; color: var(--ambre-txt); font-weight: 700; }
.journal p { margin: 2px 0 0; color: var(--ardoise); max-width: 740px; }


/* 10. LE COMPAGNON ------------------------------------------------------ */
.compagnon { display: grid; grid-template-columns: auto 1fr; gap: 34px; padding: 34px; align-items: center; }
.medaillon { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-family: var(--fixe); font-size: 2.2rem; font-weight: 700; color: var(--nuage);
  background: radial-gradient(circle at 38% 34%, #9cc2f0, #3b6db3 35%, var(--nuit) 80%); border: 3px solid var(--aube); box-shadow: 0 14px 40px rgba(36, 86, 158, .22); }
.compagnon h3 { margin: 0; font-size: 1.45rem; }
.compagnon p { color: var(--ardoise); margin: 10px 0 0; }


/* 11. PIED DE PAGE ------------------------------------------------------ */
.pied { border-top: 1px solid var(--trait); padding: 30px 0 40px; margin-top: 40px; font-size: .9rem; color: var(--ardoise); }
.pied .contenant { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pied .signature { font-size: .78rem; font-style: italic; }


/* 12. APPARITION AU DÉFILEMENT (labo.js ajoute .visible) ------------------ */
.js .apparait { opacity: 0; transform: translateY(22px); transition: opacity .8s, transform .8s; }
.js .apparait.visible { opacity: 1; transform: none; }


/* 13. TÉLÉPHONE ET MOUVEMENT RÉDUIT ------------------------------------- */
@media (max-width: 860px) {
  .heros { grid-template-columns: 1fr; padding-top: 44px; }
  .astre { max-width: 300px; }
  .banc { grid-template-columns: 1fr; }
  .compagnon { grid-template-columns: 1fr; text-align: center; }
  .medaillon { margin: auto; }
  .entete .contenant { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .menu { order: 3; width: 100%; min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin-left: 0; }
  .menu a { white-space: nowrap; padding: 6px 10px; }
  .entete .contenant { max-width: 100%; }
  .langue { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .apparait { opacity: 1; transform: none; }
}


/* 14. FENÊTRE D'ACCUEIL (banniere.js) ------------------------------------
   Bloc repris TEL QUEL du site Charon (approuvé le 2026-09-29) : la boule
   spatiale dans le ciel de nuit et l'avis Loi 25, demandés par Jean-François.
   Les couleurs passent par les alias de :root (--lapis, --or, --creme...). */
/* ===== Fenêtre d'accueil (banniere.js) — choix de la langue puis J'accepte / Je refuse ===== */
/* ==========================================================================
   FENÊTRE D'ACCUEIL — à coller à la fin de styles.css (avec banniere.js)
   Charon IA — L'Humain aux commandes
   Claude Sonnet 5.5 (Anthropic) — outil et partenaire de connaissance
   Couleurs : uniquement celles de :root (règle du site, section 14).
   Les deux boutons ont exactement le même style : aucun choix n'est poussé.
   ========================================================================== */
html.entree-ouverte { overflow: hidden; }

.entree-voile {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(22, 44, 77, .78);   /* lapis translucide */
}
.entree-fenetre {
  width: 100%; max-width: 36rem; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--carte); color: var(--texte);
  border: 1px solid var(--ligne); border-top: 4px solid var(--or);
  border-radius: var(--rayon);
  padding: 28px 26px;
}
.entree-fenetre h2 { margin: 0 0 14px; font-size: 1.5rem; }
.entree-fenetre p { margin: 0 0 12px; }
.entree-fenetre .entree-accroche { font-size: 1.2rem; font-weight: 600; color: var(--lapis); line-height: 1.45; }
.entree-fenetre .entree-note { color: var(--gris); font-size: .95rem; }
.entree-fenetre a { color: var(--lapis); }
.entree-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.entree-btn {
  flex: 1 1 10rem;
  font: 700 1.05rem var(--corps);
  padding: 14px 18px;
  border: 2px solid var(--lapis); border-radius: 12px;
  background: var(--lapis); color: var(--creme);
  cursor: pointer;
}
.entree-btn:hover { background: var(--creme); color: var(--lapis); }
.entree-btn:focus-visible, .entree-fenetre a:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }
.entree-fenetre:focus { outline: none; }

/* ===== Étape 1 : choix de la langue (symbole, salutations, menu) ===== */
.entree-centre{text-align:center}
.entree-symbole{display:block;margin:0 auto .5rem;max-width:40vw;height:auto}
.entree-symbole .sym-anneau{fill:none;stroke:var(--or);stroke-width:2}
.entree-symbole .sym-graduations{fill:none;stroke:var(--bronze);stroke-width:5;stroke-dasharray:1 7.5;opacity:.7}
.entree-symbole .sym-disque{fill:var(--lapis)}
.entree-symbole .sym-ligne{fill:none;stroke:var(--or);stroke-width:1.4;opacity:.85}
.entree-symbole .sym-orbite{fill:none;stroke:var(--bronze);stroke-width:2}
.entree-symbole .sym-point{fill:var(--or)}
.entree-symbole .sym-obole{fill:var(--or);stroke:var(--creme);stroke-width:2}
.entree-symbole .sym-tourne{transform-origin:100px 100px;animation:sym-tour 18s linear infinite}
.entree-symbole .sym-globe{transform-origin:100px 100px;animation:sym-pouls 6s ease-in-out infinite}
@keyframes sym-tour{to{transform:rotate(360deg)}}
@keyframes sym-pouls{50%{opacity:.8}}
@media (prefers-reduced-motion:reduce){.entree-symbole .sym-tourne,.entree-symbole .sym-globe{animation:none}}
.entree-salut{margin:.2rem 0 .8rem;text-align:center;font-size:.95rem;color:var(--bronze);letter-spacing:.04em}
.entree-autres{margin-top:1rem}
.entree-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.5rem;margin:.6rem 0}
.entree-langue{font:inherit;color:var(--lapis);background:var(--carte);border:1.5px solid var(--ligne);border-radius:10px;padding:.6rem .5rem;cursor:pointer;min-height:44px}
.entree-langue:hover{border-color:var(--or);background:var(--voile)}
.entree-langue:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}

/* ===== Étape 1 sans mot : la roue des langues ===== */
.entree-fenetre--langue{background:transparent;border:0;box-shadow:none;max-width:36rem;width:100%;padding:0}
.entree-roue{position:relative;width:min(94vw,34rem,calc(100vh - 1.5rem));aspect-ratio:1;margin:0 auto}
.entree-roue .entree-symbole{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0}
.entree-roue .sym-graduations{stroke:var(--or);opacity:.55}
.entree-roue .sym-anneau{stroke-width:2.5}
.entree-noeud{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  font:inherit;color:var(--lapis);background:var(--creme);border:2px solid var(--or);border-radius:50%;cursor:pointer;
  width:14%;min-width:44px;aspect-ratio:1;padding:0;box-shadow:0 0 0 0 rgba(184,137,46,0);
  transition:box-shadow .2s,background .2s;animation:noeud-entree .5s ease-out both}
.entree-noeud-fixe{width:21%;font-size:clamp(1.1rem,4.4vw,1.9rem);font-weight:700;letter-spacing:.04em;background:var(--creme)}
.entree-noeud-ext{font-size:clamp(.95rem,3.6vw,1.45rem);font-weight:600}
.entree-noeud:hover{background:#fff8e8;box-shadow:0 0 0 4px rgba(184,137,46,.45)}
.entree-noeud:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--bronze)}
.entree-glyphe{pointer-events:none;line-height:1}
.entree-suggere{animation:noeud-entree .5s ease-out both,noeud-halo 2.4s ease-in-out .6s infinite}
@keyframes noeud-entree{from{opacity:0}to{opacity:1}}
@keyframes noeud-halo{0%,100%{box-shadow:0 0 0 0 rgba(184,137,46,.75)}50%{box-shadow:0 0 0 12px rgba(184,137,46,0)}}
.entree-roue--attente .entree-symbole .sym-tourne{animation-duration:3s}
.entree-pourcent{position:absolute;left:0;right:0;bottom:6%;margin:0;text-align:center;color:var(--creme);font-size:1.4rem;font-weight:600;letter-spacing:.06em}
.entree-secousse .entree-roue{animation:secousse .45s ease-in-out}
@keyframes secousse{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@media (prefers-reduced-motion:reduce){.entree-noeud,.entree-suggere,.entree-secousse .entree-roue{animation:none}.entree-suggere{box-shadow:0 0 0 5px rgba(184,137,46,.7)}}
.entree-fenetre--langue{overflow:visible;max-height:none}
.entree-roue .entree-symbole{inset:4%;width:92%;height:92%}

/* ===== Version « marketing » : ciel, lueurs, orbites vivantes ===== */
.entree-voile{background:
  radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.9),transparent),
  radial-gradient(1px 1px at 82% 12%,rgba(255,255,255,.8),transparent),
  radial-gradient(2px 2px at 68% 84%,rgba(240,205,120,.9),transparent),
  radial-gradient(1px 1px at 24% 76%,rgba(255,255,255,.8),transparent),
  radial-gradient(1.5px 1.5px at 92% 58%,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 6% 52%,rgba(240,205,120,.8),transparent),
  radial-gradient(1px 1px at 44% 8%,rgba(255,255,255,.7),transparent),
  radial-gradient(1.5px 1.5px at 56% 94%,rgba(255,255,255,.8),transparent),
  radial-gradient(ellipse at 50% 45%,rgba(46,86,148,.97) 0%,rgba(22,44,77,.98) 45%,rgba(8,16,30,.99) 100%)}
.entree-symbole .sym-halo{animation:sym-respire 5s ease-in-out infinite;transform-origin:100px 100px}
@keyframes sym-respire{50%{opacity:.55;transform:scale(1.04)}}
.entree-symbole .sym-tourne{animation-duration:90s;animation-direction:reverse}
.entree-symbole .sym-orbite{fill:none;stroke:#f0cd78;stroke-width:1.8;opacity:.9}
.entree-symbole .sym-orbite--b{stroke:#e6c374;stroke-width:1.5;opacity:.75}
.entree-symbole .sym-orbite--c{stroke:#fff;stroke-width:1.4;opacity:.7;stroke-dasharray:3 5;animation:sym-flux 3s linear infinite}
@keyframes sym-flux{to{stroke-dashoffset:-14}}
.entree-symbole .sym-sat{fill:#ffe9b0}
.entree-symbole .sym-traine{fill:#f0cd78}
.entree-symbole .sym-mer{transform-box:fill-box;transform-origin:center;animation:sym-meridien 8s linear infinite}
@keyframes sym-meridien{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.03)}}
.entree-symbole .sym-reflet{fill:#fff;opacity:.16}
.entree-symbole .sym-atmosphere{fill:none;stroke:#f0cd78;stroke-width:1.6;opacity:.6}
.entree-symbole .sym-disque{fill:url(#sym-g-globe)}
.entree-symbole .sym-ligne{opacity:.75;stroke:#e6c374;stroke-width:1.1}
.entree-noeud{box-shadow:0 0 14px rgba(240,205,120,.45),inset 0 0 0 2px rgba(255,255,255,.35);background:linear-gradient(160deg,#fffdf6,#f3e6c6)}
.entree-noeud-fixe{box-shadow:0 0 26px rgba(240,205,120,.8),0 0 0 4px rgba(184,137,46,.55),inset 0 0 0 2px rgba(255,255,255,.5)}
.entree-noeud:hover{transform:translate(-50%,-50%) scale(1.14);box-shadow:0 0 30px rgba(255,225,150,.95),0 0 0 4px #fff}
@media (prefers-reduced-motion:reduce){.entree-symbole .sym-halo,.entree-symbole .sym-mer,.entree-symbole .sym-orbite--c{animation:none}}

/* ===== Flèche de retour (de la fenêtre d'accueil vers le choix de langue) ===== */
.entree-retour{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 .5rem;padding:0;
  color:var(--lapis);background:transparent;border:2px solid var(--lapis);border-radius:50%;cursor:pointer;transition:background .2s}
.entree-retour:hover{background:var(--voile)}
.entree-retour:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
.entree-fleche{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.entree-fenetre[dir="rtl"] .entree-fleche{transform:scaleX(-1)}

/* ===== Fenêtre d'accueil dans l'image du premier écran : ciel bleu nuit, lueur dorée ===== */
.entree-fenetre--accueil{position:relative;color:#efe8d8;
  background:
    radial-gradient(1.5px 1.5px at 10% 12%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 88% 9%,rgba(240,205,120,.9),transparent),
    radial-gradient(1px 1px at 94% 46%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 6% 62%,rgba(240,205,120,.8),transparent),
    radial-gradient(1px 1px at 82% 90%,rgba(255,255,255,.7),transparent),
    radial-gradient(ellipse at 50% 0%,rgba(59,109,179,.45) 0%,rgba(20,38,74,0) 60%),
    linear-gradient(165deg,#173056,#0d1a2e);
  border:1px solid rgba(240,205,120,.5);border-top:4px solid var(--or);
  box-shadow:0 0 70px rgba(184,137,46,.35),0 20px 60px rgba(0,0,0,.5)}
.entree-fenetre--accueil .entree-symbole{width:112px;height:112px;max-width:none;margin:0 auto .35rem}
.entree-fenetre--accueil h2{color:#fff8e6;text-align:center;text-shadow:0 0 18px rgba(240,205,120,.35)}
.entree-fenetre--accueil p{color:#efe8d8}
.entree-fenetre--accueil .entree-accroche{color:#f0cd78}
.entree-fenetre--accueil .entree-note{color:#cbbfa5}
.entree-fenetre--accueil a{color:#f0cd78}
.entree-fenetre--accueil a:hover{color:#fff8e6}
.entree-fenetre--accueil .entree-btn{color:#fff8e6;background:rgba(240,205,120,.08);border:2px solid #f0cd78;
  box-shadow:0 0 16px rgba(240,205,120,.25);transition:background .2s,color .2s,box-shadow .2s}
.entree-fenetre--accueil .entree-btn:hover{background:#f0cd78;color:#0d1a2e;box-shadow:0 0 26px rgba(240,205,120,.6)}
.entree-fenetre--accueil .entree-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.entree-fenetre--accueil .entree-retour{position:absolute;top:14px;inset-inline-start:14px;margin:0;color:#f0cd78;border-color:#f0cd78;background:rgba(240,205,120,.08);z-index:1}
.entree-fenetre--accueil .entree-retour:hover{background:#f0cd78;color:#0d1a2e}
.entree-fenetre--accueil .entree-retour:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:520px){.entree-fenetre--accueil .entree-symbole{width:84px;height:84px}}


/* 16. PAGES DE TEXTE (confidentialité, 404) ------------------------------ */
.page-texte { max-width: 780px; padding-top: 48px; padding-bottom: 48px; }
.page-texte h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-texte h2 { font-size: 1.35rem; margin-top: 34px; color: var(--azur); }
.page-texte p { color: var(--encre); }
.page-texte.centre { text-align: center; padding-top: 90px; }