/*
  Feuille de styles partagée — copie de prévisualisation locale uniquement.
  Reprend fidèlement les tokens, le header, le footer et les composants déjà
  utilisés sur index.html / saga.html / lore.html / forge-des-armes.html /
  comprenons-nous-la-realite.html. Ne pas déployer sans revue.
*/

:root{
  --bg:#090807; --panel:#12100e; --panel-2:#181410; --line:rgba(210,154,74,.26);
  --gold:#d9b06a; --gold-soft:#f0d7a4; --text:#f4ead5; --muted:#d7c19a;
  --accent:#c77836; --accent2:#9d5721;
  --shadow:0 24px 50px rgba(0,0,0,.42); --radius:24px; --max:1240px;
  --red:#b33a20; --red2:#ff6b32;
}

/* Variante froide, réservée aux pages du Parcours 1 (Concepts et science-fiction).
   L'or reste la couleur d'identité ; le bleu nuit et le cyan restent des touches
   discrètes (contours, pictogrammes, survols), jamais un fond dominant. */
body.theme-cold{
  --cold-line: rgba(122,168,214,.30);
  --cold-glow: rgba(76,110,168,.12);
  --cyan: #8fd6e0;
}
body.theme-cold{
  background:
    radial-gradient(circle at top, var(--cold-glow), transparent 32%),
    linear-gradient(180deg, #0a0c10 0%, #090807 62%);
}
body.theme-cold .panel{ border-color: var(--cold-line); }
body.theme-cold .eyebrow, body.theme-cold .kicker, body.theme-cold .badge{
  border-color: rgba(143,214,224,.32); color:#d3eef2;
}
body.theme-cold .btn:hover{ border-color: rgba(143,214,224,.5); box-shadow: 0 0 0 1px rgba(143,214,224,.16) inset; }
body.theme-cold .card{ border-top: 2px solid rgba(143,214,224,.4); }
body.theme-cold .path-badge{ border-color: rgba(143,214,224,.4); color:#d3eef2; }

/* Variante « passerelle », mélange mesuré de froid et de braise pour le Parcours 3. */
body.theme-bridge{
  --cold-line: rgba(122,168,214,.20);
  --cyan: #8fd6e0;
}
body.theme-bridge .card{ border-top: 2px solid rgba(224,160,75,.35); }
body.theme-bridge .card.card-cold{ border-top-color: rgba(143,214,224,.4); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Georgia,"Times New Roman",serif; color:var(--text);
  background:
    radial-gradient(circle at top, rgba(201,113,36,.09), transparent 30%),
    linear-gradient(180deg, #0a0908 0%, #090807 100%);
}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}

/* Header et navigation */
header{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);background:rgba(9,8,7,.86);border-bottom:1px solid rgba(210,154,74,.14)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold-soft)}
.brand-mark{width:40px;height:40px;border-radius:999px;border:1px solid rgba(217,176,106,.34);display:grid;place-items:center;background:radial-gradient(circle, rgba(217,176,106,.12), transparent 70%);font-size:20px}
.brand-name{letter-spacing:.1em;font-size:1.55rem;color:var(--gold)}

.nav-toggle{
  display:none; background:transparent; border:1px solid rgba(217,176,106,.3); color:var(--gold-soft);
  width:42px;height:42px;border-radius:10px;font-size:1.2rem;cursor:pointer;
}

nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:flex-end}
nav a{text-decoration:none;color:var(--gold-soft);font-size:1rem;position:relative;padding-bottom:2px}
nav a:hover, nav a[aria-current="page"]{color:#fff}
nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);transition:right .2s ease;
}
nav a:not(.btn):hover::after{right:0}

.nav-dropdown{position:relative}
.nav-dropdown-toggle{
  background:transparent;border:0;color:var(--gold-soft);font-family:inherit;font-size:1rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0;
}
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle{color:#fff}
.nav-dropdown-toggle .caret{font-size:.7em;transition:transform .18s ease}
.nav-dropdown.open .nav-dropdown-toggle .caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:260px;padding:10px;border-radius:16px;border:1px solid var(--line);
  background:rgba(15,12,10,.98);box-shadow:var(--shadow);z-index:40;
}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
  display:block;padding:10px 12px;border-radius:10px;font-size:.96rem;color:var(--muted);
}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.04);color:var(--gold-soft)}
.nav-dropdown-menu a::after{display:none}
.nav-dropdown-menu .menu-note{
  padding:8px 12px 4px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#8b7a5c;
}

main{padding:28px 0 48px}
.section{margin-top:28px}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

.eyebrow{display:inline-block;padding:9px 15px;border-radius:999px;border:1px solid rgba(217,176,106,.26);color:var(--gold-soft);background:rgba(12,10,8,.34);font-size:.86rem;letter-spacing:.075em;text-transform:uppercase;margin-bottom:16px}
.kicker{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid rgba(217,176,106,.18);color:var(--gold-soft);background:rgba(255,255,255,.02);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.badge{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid rgba(217,176,106,.18);color:var(--gold-soft);background:rgba(255,255,255,.02);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}

h1{margin:0 0 12px;color:var(--gold);font-weight:normal;line-height:1.02}
h2{margin:0 0 12px;color:var(--gold);font-weight:normal}
.section-title{margin:0 0 18px;color:var(--gold);font-weight:normal;font-size:clamp(1.6rem, 3vw, 2.4rem);line-height:1.15}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:12px;text-decoration:none;border:1px solid rgba(224,160,75,.22);background:rgba(255,255,255,.02);color:var(--gold-soft);text-align:center;transition:transform .18s ease,border-color .18s ease}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent2));color:#fff8ee;border-color:rgba(224,160,75,.4)}
.btn:hover{transform:translateY(-2px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* Focus clavier visible, générique, sur tous les éléments interactifs des nouveaux
   gabarits (liens de nav, boutons, fil d'Ariane, retour au hub). */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-soft);outline-offset:2px;border-radius:4px;
}

/* Fil d'Ariane et retour au hub */
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:#a99471;font-size:.9rem;margin:0 auto 18px;max-width:900px}
.breadcrumb a{color:#c9ad80;text-decoration:none}
.breadcrumb a:hover{color:var(--gold-soft)}
.back-to-hub{display:inline-flex;align-items:center;gap:6px;color:#c9ad80;text-decoration:none;font-size:.95rem;margin-top:8px}
.back-to-hub:hover{color:var(--gold-soft)}

/* Indicateurs de parcours et de lecture */
.path-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(217,176,106,.26);color:var(--gold-soft);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.meta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0 4px;color:#a99471;font-size:.9rem}
.reading-time::before{content:"⏱ "}

/* Cartes génériques (hub, univers, concepts)
   Toute la surface de la carte est le lien cliquable (élément <a> englobant titre,
   texte, cadre et espace intérieur). Le survol/focus ne doit JAMAIS reposer sur un
   transform sur cet élément : un transform sur la cible du clic déplace sa boîte de
   hit-test entre mousedown et mouseup, ce qui fait que le navigateur annule le clic
   quand le pointeur ne retombe plus dessus (constaté en test réel sur les cartes de
   parcours de l'accueil). Le retour visuel passe donc uniquement par la bordure et
   l'ombre, jamais par un déplacement. */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.card-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;
  border:1px solid rgba(217,176,106,.16);background:rgba(255,255,255,.02);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.card:hover{border-color:rgba(224,160,75,.4);background:rgba(255,255,255,.035);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-color:rgba(224,160,75,.5)}
.card strong{color:#f2dfbd;font-size:1.1rem;font-weight:normal}
.card span{color:var(--muted);line-height:1.6;font-size:.96rem}
.card .card-cta{margin-top:auto;color:var(--gold-soft);font-size:.9rem;text-decoration:underline;text-decoration-color:rgba(240,215,164,.35);text-underline-offset:3px}
.card:hover .card-cta, .card:focus-visible .card-cta{text-decoration-color:currentColor}

/* Grand bloc "trois parcours" pour la page d'accueil — même principe : pas de transform
   sur l'élément cliquable, retour visuel par bordure/ombre uniquement. */
.paths-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.path-card{
  padding:26px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;cursor:pointer;
  box-shadow:var(--shadow);transition:border-color .2s ease,box-shadow .2s ease;
}
.path-card:hover{border-color:rgba(224,160,75,.5);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.path-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.path-card h3{margin:0;color:var(--gold);font-weight:normal;font-size:1.35rem}
.path-card p{margin:0;color:var(--muted);line-height:1.65;font-size:.98rem}
.path-card .card-cta{margin-top:auto;color:var(--gold-soft);font-size:.92rem;text-decoration:underline;text-decoration-color:rgba(240,215,164,.35);text-underline-offset:3px}
.path-card:hover .card-cta, .path-card:focus-visible .card-cta{text-decoration-color:currentColor}
.path-card.cold{ border-color: rgba(143,214,224,.32); }
.path-card.cold:hover{ border-color: rgba(143,214,224,.55); }
.path-card.cold h3{color:var(--gold)}
.path-card.bridge{
  border-image: linear-gradient(135deg, rgba(224,160,75,.55), rgba(143,214,224,.45)) 1;
}

/* Cadre introductif des hubs : volontairement non cliquable et visuellement distinct
   d'une carte (pas de survol, pas de curseur de lien, filet latéral plutôt qu'un
   cadre complet, pour que le visiteur distingue au premier regard l'introduction du
   contenu cliquable). */
.intro-block{
  padding:30px 34px;border-radius:18px;border:1px solid rgba(217,176,106,.1);
  border-left:3px solid var(--accent);background:rgba(255,255,255,.014);
  box-shadow:none;cursor:default;
}
.intro-block p{margin:0;color:var(--muted);line-height:1.85;font-size:1.05rem;max-width:74ch}

/* Boîtes de contenu */
.quote-box{padding:26px;border-left:3px solid var(--accent);background:rgba(199,120,54,.06);border-radius:0 16px 16px 0;color:var(--gold-soft);font-size:1.1rem;line-height:1.75;font-style:italic}
.note{padding:18px 20px;border:1px solid rgba(217,176,106,.15);border-radius:14px;color:#d9c49f;background:rgba(255,255,255,.018);line-height:1.7}
.spoiler-soft{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid rgba(179,58,32,.4);background:rgba(179,58,32,.08);color:#f0b79a;font-size:.82rem}
.cross-link{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:22px 26px;
  border-radius:18px;border:1px solid rgba(217,176,106,.2);background:rgba(255,255,255,.02);margin-top:26px;
}
.cross-link strong{display:block;color:#f2dfbd;font-size:1.05rem;font-weight:normal;margin-bottom:4px}
.cross-link p{margin:0;color:var(--muted);line-height:1.6;font-size:.95rem}

/* Corps de page longue (pages Concepts / Fantasy / Passerelles).
   Couleur : l'or reste réservé aux titres, liens, pictogrammes, bordures et
   indicateurs de parcours ; le texte courant utilise le blanc cassé de la charte
   (--text) plutôt que la teinte or-brun (--muted), pour un contraste de lecture plus
   confortable sur les articles longs. Cette règle ne s'applique qu'aux nouveaux
   gabarits (.article-body) : les anciennes pages historiques ne sont pas modifiées. */
/* Largeur : le corps de page ET ses titres partagent le même conteneur (l'article
   entier est plafonné puis centré), pour éviter qu'un h1 étiré sur toute la largeur
   du panneau ne jure avec des paragraphes nettement plus étroits. Colonne visée :
   environ 800-850px de texte utile (900px de conteneur, moins le padding). */
.article-body{padding:34px;max-width:900px;margin:0 auto}
.article-body p{color:var(--text);font-size:1.05rem;line-height:1.9;margin:0 0 20px}
.article-body h1{font-size:clamp(1.9rem,4.2vw,2.6rem);line-height:1.15;max-width:100%}
.article-body h2{font-size:clamp(1.35rem,2.6vw,1.9rem);margin-top:12px;margin-bottom:14px}
.article-body hr{border:0;border-top:1px solid rgba(217,176,106,.16);margin:30px 0}

/* Justification réservée aux paragraphes de corps d'article, sur ordinateur et
   tablette uniquement (min-width 641px). Explicitement exclue : titres, intro
   courte (.intro-block, .eyebrow), boutons, cartes, menus, fil d'Ariane,
   métadonnées, CTA — aucun de ces éléments n'est un `.article-body p`.
   Pas de césure automatique (hyphens: none) : le dictionnaire de coupure du
   navigateur produisait des césures disgracieuses en français (« se-conde »,
   « ré-sume », « expé-rience », « origi-nale »). La colonne élargie ci-dessus rend
   la justification correcte même sans césure ; overflow-wrap/word-break restent à
   leur valeur normale pour ne jamais forcer de coupure au milieu d'un mot. */
@media (min-width:641px){
  .article-body p{
    text-align:justify;
    text-align-last:left;
    hyphens:none;-webkit-hyphens:none;-ms-hyphens:none;
    overflow-wrap:normal;word-break:normal;
    text-wrap:pretty;
  }
}
/* Sous 640px : alignement à gauche, la justification produisant des espacements
   irréguliers sur une colonne aussi étroite. */
@media (max-width:640px){
  .article-body p{text-align:left;hyphens:none;-webkit-hyphens:none;-ms-hyphens:none}
}

footer{margin-top:28px;padding:30px 0 46px;border-top:1px solid rgba(217,176,106,.14)}
.legal{color:#a99471;font-size:.92rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:1080px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paths-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .card-grid.cols-2{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* Sélecteur #mainNav (plutôt que le simple élément nav) : nécessaire pour que ce
     repli mobile l'emporte sur les règles nav{display:flex} déjà présentes, non
     médiatisées, dans le <style> propre à chaque ancienne page (header, lore.html,
     forge-des-armes.html), chargé après cette feuille partagée dans le <head>. */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  #mainNav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:2px;background:rgba(9,8,7,.98);border-bottom:1px solid rgba(210,154,74,.18);padding:12px 20px 18px;
  }
  #mainNav.open{display:flex}
  #mainNav a{padding:10px 0;width:100%}
  #mainNav .nav-dropdown{width:100%}
  .nav-dropdown-toggle{width:100%;justify-content:space-between;padding:10px 0}
  .nav-dropdown-menu{position:static;transform:none;width:100%;margin-top:4px;box-shadow:none;border-color:rgba(217,176,106,.14)}
  .card-grid{grid-template-columns:1fr}
  .cross-link{grid-template-columns:1fr}
}
@media (max-width:640px){
  .article-body{padding:22px}
}

/* ==========================================================================
   Carrousels et visionneuse — galerie éditoriale de diapositives.
   Même principe anti-bug que .card/.path-card : jamais de transform au survol
   sur l'élément cliquable, pour ne pas annuler le clic (voir shared.css plus
   haut). Les cartes sont de vrais <button> (activables au clavier par défaut,
   toute la surface cliquable), pas de simples liens texte.
   ========================================================================== */
button.card{font:inherit;text-align:left;width:100%;background:rgba(255,255,255,.02);cursor:pointer}
.carousel-card{padding:0;overflow:hidden}
.carousel-cover-wrap{aspect-ratio:4/5;overflow:hidden;background:#0d0b09}
.carousel-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.carousel-card-body{padding:18px 20px 20px}
.carousel-card-body strong{color:#f2dfbd;font-size:1.05rem;font-weight:normal;display:block;margin-bottom:6px}
.carousel-card-body span.desc{display:block;color:var(--muted);line-height:1.55;font-size:.94rem;margin-bottom:8px}
.carousel-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:#a99471;margin-bottom:8px}

/* Visionneuse modale */
.carousel-modal{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(6,5,4,.94);padding:16px;
}
.carousel-modal.open{display:flex}
.carousel-modal-stage{
  position:relative;z-index:1;max-width:min(92vw,620px);max-height:86vh;width:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.carousel-modal-stage img{
  max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);background:#111;display:block;
}
/* z-index explicite sur les commandes : sans lui, .carousel-modal-stage (positionné,
   placé après le bouton précédent mais avant le bouton suivant dans le DOM) passe
   au-dessus du bouton précédent dans l'ordre d'empilement par défaut et intercepte son
   clic dès que sa largeur (jusqu'à 92vw) chevauche la position du bouton sur un écran
   étroit — c'est la cause exacte du défaut constaté : la flèche précédente restait
   sous la zone de la diapositive, la flèche suivante y échappait par pur hasard
   d'ordre du DOM. Les commandes reçoivent donc un z-index supérieur à la scène. */
.carousel-modal-close{
  position:fixed;top:18px;right:18px;width:48px;height:48px;border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
  font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;
  z-index:5;pointer-events:auto;
}
.carousel-modal-prev,.carousel-modal-next{
  position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);
  font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;
  z-index:5;pointer-events:auto;overflow:visible;
}
.carousel-modal-prev{left:18px}
.carousel-modal-next{right:18px}
.carousel-modal-prev:disabled,.carousel-modal-next:disabled{opacity:.3;cursor:default}
.carousel-modal-close:hover,.carousel-modal-prev:hover:not(:disabled),.carousel-modal-next:hover:not(:disabled){
  background:rgba(255,255,255,.16);
}
.carousel-modal-close:focus-visible,.carousel-modal-prev:focus-visible,.carousel-modal-next:focus-visible{
  outline:2px solid var(--gold-soft);outline-offset:2px;
}
.carousel-modal-counter{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;
  font-size:.9rem;letter-spacing:.03em;
}
.carousel-modal-title{
  position:fixed;top:22px;left:22px;right:90px;color:#e8d4a8;font-size:.95rem;
  max-width:70vw;
}
@media (max-width:640px){
  .carousel-modal-prev,.carousel-modal-next{width:46px;height:46px;font-size:22px}
  .carousel-modal-prev{left:14px}
  .carousel-modal-next{right:14px}
  .carousel-modal-close{width:44px;height:44px;top:10px;right:10px}
  .carousel-modal-title{display:none}
}