/* ==========================================================================
   Charon IA · feuille de style unique pour tout le site
   Charon IA — L'Humain aux commandes
   Claude Opus 5.5 (Anthropic) — outil et partenaire de connaissance

   Règles :
   - Une seule feuille pour toutes les pages.
   - Polices hébergées sur le site (dossier fonts/, licence SIL OFL) :
     aucune requête vers l'extérieur.
   - Les couleurs sont définies une seule fois, dans :root, plus bas.
     Pour changer la palette, on change seulement ces lignes-là.
   ========================================================================== */


/* 1. POLICES ------------------------------------------------------------- */
@font-face { font-family: "Playfair Display"; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-700.woff2") format("woff2"); }
@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"); }
@font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url("fonts/cinzel-latin-700.woff2") format("woff2"); } /* police du logo (obole) */


/* 2. COULEURS (palette « lapis et bronze » de l'obole) --------------------- */
:root {
  --creme:   #faf8f5;   /* fond de page */
  --carte:   #fdfbf7;   /* fond des cartes */
  --voile:   #f3eee4;   /* fond des sections alternées (crème doré) */
  --ligne:   #e6ded3;   /* bordures fines */
  --texte:   #2d2620;   /* texte courant */
  --gris:    #6b5f55;   /* texte secondaire */
  --lapis:   #162c4d;   /* titres, boutons : couleur de CHARON IA */
  --bronze:  #6e4f17;   /* surtitres, détails : famille de l'or */
  --or:      #b8892e;   /* l'obole : filets et décor seulement, jamais du petit texte */

  --titre: "Playfair Display", Georgia, serif;
  --corps: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --rayon: 16px;
}


/* 3. BASE ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--texte); font: 17px/1.7 var(--corps); }
h1, h2, h3 { font-family: var(--titre); color: var(--lapis); line-height: 1.2; }
a { color: var(--lapis); }
img { max-width: 100%; height: auto; }
.enveloppe { max-width: 1080px; margin: 0 auto; padding: 0 20px; }


/* 4. EN-TÊTE ------------------------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 10; background: var(--creme); border-bottom: 1px solid var(--ligne); }
.entete .enveloppe { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 1.2rem; color: var(--lapis); }
.marque img { width: 44px; height: 44px; }
.menu { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.langue-globe { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--lapis); text-decoration: none; }
.langue-globe svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.langue-globe:hover, .langue-globe:focus-visible { background: var(--voile); color: var(--or); }
.langue-menu { position: fixed; z-index: 20; display: flex; flex-direction: column; min-width: 150px; padding: 6px; background: var(--creme); border: 1px solid var(--ligne); border-radius: 10px; box-shadow: 0 6px 20px rgba(45,38,32,.15); }
.langue-menu a { display: block; padding: 12px 16px; border-radius: 8px; color: var(--texte); text-decoration: none; font-size: 1rem; }
.langue-menu a:hover, .langue-menu a:focus-visible { background: var(--voile); color: var(--lapis); }
.langue-menu a[aria-current] { font-weight: 700; color: var(--lapis); }
.menu a { text-decoration: none; font-size: .92rem; color: var(--gris); }
.menu a:hover { color: var(--lapis); }
/* Cellulaire : le menu passe sous le logo, sur une seule ligne qui défile de côté (aucun script). */
@media (max-width: 820px) {
  .entete .enveloppe { flex-wrap: wrap; gap: 0 16px; padding-top: 8px; padding-bottom: 0; min-height: 0; }
  .langue-globe { margin-left: auto; }
  .menu { order: 3; flex: 0 0 100%; flex-wrap: nowrap; gap: 6px; margin: 4px -20px 0; padding: 0 20px 8px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: 10px 12px; font-size: .95rem; border-radius: 8px; }
  .menu.menu-court { flex-wrap: wrap; white-space: normal; }
  section[id] { scroll-margin-top: 112px; }
}


/* 5. OUVERTURE (haut de la page d'accueil) -------------------------------- */
.ouverture { padding: 56px 20px 48px; text-align: center; }
.ouverture .embleme { width: 260px; height: 260px; display: block; margin: 0 auto; }
.ouverture h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 36px auto 18px; max-width: 820px; }
.chapeau { font-size: 1.15rem; max-width: 720px; margin: 0 auto; }
/* Devise d'ouverture : même police que l'obole (Cinzel), couleurs du logo
   (lapis pour « Votre IA. », bronze pour « Vos conditions. »), filets or de chaque côté. */
.devise-ouverture { margin: 30px auto 0; text-align: center; }
.chapeau { margin-top: 36px; }
.devise-ouverture .fr { display: inline-flex; align-items: center; gap: 18px; font-family: "Cinzel", var(--titre); font-weight: 700; font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.3; letter-spacing: .08em; color: var(--lapis); margin: 0; }
.devise-ouverture .fr::before, .devise-ouverture .fr::after { content: ""; width: 48px; height: 2px; background: var(--or); }
.devise-ouverture .fr b { font-weight: 700; color: var(--bronze); }
@media (max-width: 520px) { .devise-ouverture .fr::before, .devise-ouverture .fr::after { display: none; } .devise-ouverture .fr b { display: block; } }
.boutons { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bouton { display: inline-block; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; border: 2px solid var(--lapis); color: var(--lapis); }
.bouton.plein { background: var(--lapis); color: var(--creme); }


/* 6. SECTIONS ------------------------------------------------------------ */
section { padding: 72px 0; border-top: 1px solid var(--ligne); }
section.voile { background: var(--voile); }
.surtitre { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); font-weight: 700; margin: 0 0 10px; }
section h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 24px; max-width: 780px; }
.prose { max-width: 760px; }
.prose p { margin: 0 0 1.1em; }
.citation { border-left: 4px solid var(--or); padding: 6px 0 6px 22px; margin: 34px 0; font-family: var(--titre); font-size: 1.3rem; font-style: italic; color: var(--lapis); max-width: 760px; }
.centre { text-align: center; }
.centre h2, .centre .prose { margin-left: auto; margin-right: auto; }


/* 7. CARTES ET GRILLES ---------------------------------------------------- */
.grille { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 30px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 26px; }
.carte h3 { margin: 0 0 10px; font-size: 1.25rem; }
.carte p { margin: 0; }
.carte .num { display: block; font-family: var(--titre); font-size: 2rem; color: var(--or); line-height: 1; margin-bottom: 10px; }
.carte .etiquette { display: inline-block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.carte.filet { border-top: 5px solid var(--or); }
.grand { font-family: var(--titre); font-size: 1.3rem; color: var(--lapis); line-height: 1.5; }


/* 8. MÉTHODE (étapes numérotées) ----------------------------------------- */
.etapes { counter-reset: e; list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 30px; }
.etapes li { display: flex; gap: 16px; align-items: flex-start; background: var(--carte); border: 1px solid var(--ligne); border-radius: 14px; padding: 20px; }
.etapes li::before { counter-increment: e; content: counter(e); flex: 0 0 40px; height: 40px; border-radius: 50%; background: var(--or); color: var(--creme); font-family: var(--titre); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.etapes h3 { margin: 0 0 4px; font-size: 1.1rem; }
.etapes p { margin: 0; font-size: .95rem; }


/* 9. FONDATEUR ----------------------------------------------------------- */
.fondateur { display: grid; gap: 30px; grid-template-columns: 1fr 1.6fr; align-items: start; }
@media (max-width: 820px) { .fondateur { grid-template-columns: 1fr; } }
.fiche ul { margin: 0; padding-left: 18px; font-size: .95rem; }
.fiche li { margin-bottom: 6px; }
.role { color: var(--bronze); font-weight: 600; margin: 0 0 14px; }


/* 10. MANIFESTE ---------------------------------------------------------- */
.manifeste ul { list-style: none; padding: 0; margin: 30px auto 0; max-width: 760px; }
.manifeste li { font-family: var(--titre); font-size: 1.2rem; color: var(--lapis); padding: 14px 0; border-bottom: 1px dashed var(--or); }
.manifeste li:last-child { border-bottom: 0; }
.devise { margin-top: 34px; font-family: var(--titre); font-style: italic; font-size: 1.4rem; color: var(--bronze); }


/* 11. EMBLÈME (les trois versions de l'obole) ---------------------------- */
.versions { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 30px; }
.versions figure { margin: 0; text-align: center; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 22px; }
.versions img { width: 180px; height: 180px; }
.versions figcaption { margin-top: 10px; font-family: var(--titre); color: var(--lapis); }


/* 12. PAGES DE TEXTE (confidentialité, 404) ------------------------------ */
.page-texte { max-width: 760px; margin: 0 auto; padding: 56px 20px 72px; }


/* 12b. FLÈCHE « REVENIR EN HAUT » (à la fin de chaque section, sans script) */
.retour { text-align: right; margin: 36px 0 0; }
.retour a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--or); color: var(--lapis); background: var(--carte); text-decoration: none; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.retour a:hover, .retour a:focus { background: var(--or); color: var(--creme); }
.centre .retour { text-align: right; }


/* 13. PIED DE PAGE ------------------------------------------------------- */
.pied { border-top: 2px solid var(--or); padding: 36px 20px 50px; text-align: center; font-size: .95rem; }
.pied .auteur { color: var(--lapis); }
.pied .claude { font-size: calc(.95rem - 2pt); font-style: italic; color: var(--gris); margin-top: 4px; }
.pied .liens { margin-top: 18px; font-size: .85rem; color: var(--gris); }
.pied .liens a { color: var(--gris); }

/* ===== 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}}