/* =====================================================================
   Refonte 2026-09 — « le cycle du jour »
   Chargée APRÈS talos.css : elle en reprend les couleurs et ne fait que
   moderniser la base commune (typographie, navigation, boutons, pied de
   page), puis habille le nouvel accueil. Les autres pages gardent leur
   structure et héritent de cette base.
   ===================================================================== */

:root {
  --aube: #5AA0E8;
  --zenith: #E8A820;
  --crepuscule: #6070C0;
  --minuit: #9050E0;
  --vert: #5BD08A;
  --rouge: #E86A6A;
  --texte: #E9E6F0;
  --texte-doux: #B4B2C4;
  --surface: rgba(20, 19, 28, 0.72);
  --bord: rgba(255, 255, 255, 0.08);
  --rayon: 14px;
  --corps: 'Manrope', 'Raleway', system-ui, sans-serif;
  --titre: 'Cinzel', Georgia, serif;
}

/* ---------- Base : une typographie qui se lit ---------- */
body {
  font-family: var(--corps);
  font-weight: 400;
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { opacity: 0.5; }
p { line-height: 1.7; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze-light); outline-offset: 3px; border-radius: 4px; }

/* ---------- Navigation ---------- */
nav {
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: rgba(8, 8, 12, 0.62);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--bord);
}
.nav-logo { font-size: 1.25rem; letter-spacing: 0.14em; }
.nav-links { gap: 0.35rem; align-items: center; }
.nav-links a {
  font-family: var(--corps);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--texte-doux);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--texte); background: rgba(255, 255, 255, 0.06); }
.nav-links a.active { color: var(--bronze-light); background: rgba(201, 146, 42, 0.12); }
.nav-links a.nav-cta {
  color: #1a1206;
  background: linear-gradient(180deg, var(--bronze-light), var(--bronze));
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 18px rgba(201, 146, 42, 0.25);
}
.nav-links a.nav-cta:hover { color: #1a1206; filter: brightness(1.08); }
.btn-particles { border-radius: 8px; border-color: var(--bord); }

/* ---------- Titres de section communs ---------- */
.section-label, .surtitre {
  font-family: var(--corps);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-light);
}
.section-title, .titre-section {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* ---------- Boutons ---------- */
.btn { border-radius: 10px; font-family: var(--corps); font-weight: 700; letter-spacing: 0.06em; }
.bouton {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.9rem 1.35rem 0.9rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--corps);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, filter 0.2s;
}
.bouton svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton > span { display: flex; flex-direction: column; text-align: left; }
.bouton-titre { font-weight: 800; font-size: 0.98rem; letter-spacing: 0.01em; }
.bouton-sous { font-size: 0.78rem; font-weight: 500; opacity: 0.78; }
.bouton--or {
  color: #1a1206;
  background: linear-gradient(180deg, #F2C865, var(--bronze));
  box-shadow: 0 10px 30px -8px rgba(232, 184, 75, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.bouton--or:hover { transform: translateY(-2px); filter: brightness(1.06); }
.bouton--verre {
  color: #fff;
  background: rgba(8, 10, 28, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bouton--verre:hover { background: rgba(8, 10, 28, 0.5); transform: translateY(-2px); }
.bouton--verre .bouton-sous { opacity: 0.85; }

.lien-fleche {
  font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--bronze-light);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.lien-fleche::after { content: '→'; transition: transform 0.2s; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- Pied de page ---------- */
footer { border-top: 1px solid var(--bord); background: #07070b; }
.footer-col-title { font-family: var(--corps); font-weight: 700; letter-spacing: 0.16em; }
.footer-links a { color: var(--texte-doux); }
.footer-links a:hover { color: var(--bronze-light); }

/* =====================================================================
   ACCUEIL
   ===================================================================== */
.contenu--accueil { position: relative; z-index: 1; }
body[data-page="accueil"] #embers { display: none; }

/* ---------- Le ciel ---------- */
.ciel {
  --ciel-haut: #1a1f4a; --ciel-milieu: #6070C0; --ciel-horizon: #f0875a; --ciel-relief: #150f24;
  position: relative;
  max-width: none; margin: 0; /* talos.css borne tous les <section> à 1100 px */
  min-height: min(100svh, 980px);
  display: grid; place-items: center;
  padding: 7rem 1rem 9rem;
  overflow: hidden;
  isolation: isolate;
}
.ciel-degrade {
  position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-milieu) 58%, var(--ciel-horizon) 100%);
  transition: background 2s;
}
.ciel-degrade::after { /* grain léger : évite les bandes du dégradé */
  content: ''; position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ciel-etoiles { position: absolute; inset: 0; z-index: -2; transition: opacity 2s; }
.ciel-etoiles i {
  position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 1px;
  animation: scintille 4s ease-in-out infinite;
}
.ciel-etoiles i.grosse { width: 3px; height: 3px; box-shadow: 0 0 6px #fff; }
@keyframes scintille { 50% { opacity: 0.25; } }

.ciel-astre {
  --astre-coeur: #fff8dc; --astre-bord: #ffd36b; --astre-taille: 1;
  position: absolute; z-index: -2; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--astre-coeur) 0 38%, var(--astre-bord) 55%, transparent 72%);
  box-shadow: 0 0 120px 40px color-mix(in srgb, var(--astre-bord) 38%, transparent);
  transform: scale(var(--astre-taille));
  transition: left 2s, top 2s, transform 2s;
}
.ciel-astre.lune {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: radial-gradient(circle at 38% 38%, #f4f1ff 0 45%, #cfc6ef 62%, rgba(200, 190, 240, 0) 72%);
  box-shadow: 0 0 80px 20px rgba(190, 170, 255, 0.22);
}

/* Paysage en voxels : trois plans, du plus clair (lointain) au plus sombre (proche). */
.ciel-paysage { position: absolute; left: 0; bottom: 0; width: 100%; height: 320px; z-index: -1; }
.ciel-paysage .plan-loin { fill: var(--ciel-relief-loin, var(--ciel-relief)); transition: fill 2s; }
.ciel-paysage .plan-milieu { fill: var(--ciel-relief-milieu, var(--ciel-relief)); transition: fill 2s; }
.ciel-paysage .plan-pres { fill: var(--ciel-relief); transition: fill 2s; }

/* Voile discret derrière le texte : il ne se lève qu en plein jour (--voile vaut 0 la nuit). */
.ciel::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1000px, 110%); height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(10, 14, 40, var(--voile, 0)), transparent);
  pointer-events: none;
}

/* Nuages en blocs à la Minecraft : plats, dessous légèrement ombré, dérive lente. */
.ciel-nuages { position: absolute; inset: 0; z-index: -1; opacity: var(--nuages, 0.6); transition: opacity 2s; overflow: hidden; }
.ciel-nuages i {
  position: absolute; left: 0;
  background: var(--nuage-teinte, #fff);
  box-shadow: inset 0 -7px 0 rgba(20, 30, 60, 0.10);
  animation: derive linear infinite;
}
.ciel-nuages i::before {
  content: ""; position: absolute; bottom: 100%; left: var(--bosse-g, 25%); width: var(--bosse-l, 45%); height: 60%;
  background: inherit;
}
@keyframes derive { from { transform: translateX(-320px); } to { transform: translateX(100vw); } }

/* Étoiles filantes : invisibles 95 % du temps, un trait bref de loin en loin. */
.ciel-etoiles .filante {
  position: absolute; width: 140px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
  transform: rotate(-24deg); opacity: 0;
  animation: filante 14s ease-out infinite;
}
@keyframes filante {
  0%, 90% { opacity: 0; translate: 0 0; }
  91% { opacity: 1; }
  97% { opacity: 0; translate: -260px 116px; }
  100% { opacity: 0; }
}
.ciel::after { /* raccord avec le reste de la page */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1;
  background: linear-gradient(180deg, transparent, var(--obsidian));
}

.ciel-contenu { max-width: 760px; text-align: center; }
.ciel-heure {
  display: inline-block;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  margin-bottom: 1.4rem;
}
.ciel .hero-title {
  font-family: var(--titre);
  font-size: clamp(3.6rem, 12vw, 8.5rem);
  font-weight: 700; line-height: 0.95; letter-spacing: 0.08em;
  /* Le dégradé et le reflet qui balaie les lettres (eclatTalos) viennent de talos.css : ne pas les écraser. */
  margin: 0 0 0.6rem;
}
.ciel-slogan { font-family: var(--titre); font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: #fff; margin-bottom: 1rem; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.ciel-desc { max-width: 560px; margin: 0 auto 2.2rem; color: rgba(255, 255, 255, 0.86); font-size: 1.02rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.ciel-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.ciel-autre { margin-top: 1rem; font-size: 0.86rem; }
.ciel-autre a { color: rgba(255, 255, 255, 0.78); text-underline-offset: 3px; }
.ciel-autre a:hover { color: #fff; }

.ciel-forge-heure {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 7.5rem;
  display: grid; gap: 0.15rem; min-width: 220px;
  padding: 0.9rem 1.1rem; border-radius: var(--rayon);
  background: rgba(8, 8, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none; color: #fff;
  transition: transform 0.2s, background 0.2s;
}
.ciel-forge-heure:hover { transform: translateY(-2px); background: rgba(8, 8, 14, 0.6); }
.fh-libelle { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.fh-nom { font-family: var(--titre); font-size: 1.1rem; font-weight: 600; }
.fh-etat { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; opacity: 0.9; }

.point { width: 8px; height: 8px; border-radius: 50%; background: #888; flex: none; }
.point.en-ligne, .en-ligne > .point { background: var(--vert); box-shadow: 0 0 0 0 rgba(91, 208, 138, 0.6); animation: pouls 2.4s infinite; }
.point.hors, .hors > .point { background: var(--rouge); }
@keyframes pouls { 70% { box-shadow: 0 0 0 7px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }

/* ---------- Blocs ---------- */
.bloc { position: relative; padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 5vw, 4rem); max-width: 1240px; margin: 0 auto; }
.bloc-tete { max-width: 680px; margin-bottom: 2.6rem; }
.titre-section { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0.6rem 0 0.8rem; color: #fff; }
.chapo { color: var(--texte-doux); font-size: 1.05rem; }
.bloc-pied { margin-top: 2rem; display: flex; gap: 1.8rem; flex-wrap: wrap; }

/* ---------- Frise des forges ---------- */
.frise { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: none; }
.frise-forge a {
  --c: var(--bronze);
  position: relative; display: flex; flex-direction: column; gap: 0.25rem; height: 100%;
  padding: 1.4rem 1.3rem 1.3rem; border-radius: var(--rayon);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  text-decoration: none; color: var(--texte);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.frise-forge a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 18px 40px -18px var(--c); }
.frise-forge--dawn a { --c: var(--aube); }
.frise-forge--zenith a { --c: var(--zenith); }
.frise-forge--dusk a { --c: var(--crepuscule); }
.frise-forge--midnight a { --c: var(--minuit); }
.frise-forge.maintenant a { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 18px 50px -20px var(--c); }
.frise-forge.maintenant a::before {
  content: "Forge de l’heure"; position: absolute; top: -0.7rem; left: 1.1rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0b0b10; background: var(--c); padding: 0.2rem 0.55rem; border-radius: 999px;
}
.ff-heures { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.ff-icone { width: 48px; height: 48px; image-rendering: pixelated; margin: 0.7rem 0 0.5rem; border-radius: 10px; }
.ff-nom { font-family: var(--titre); font-size: 1.12rem; font-weight: 600; color: #fff; }
.ff-pack { font-weight: 700; color: color-mix(in srgb, var(--c) 55%, #fff); }
.ff-version { font-size: 0.82rem; color: var(--texte-doux); }
.ff-etat { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 1rem; font-size: 0.86rem; font-weight: 600; }
.ff-semaine { font-size: 0.78rem; color: var(--texte-doux); }

/* ---------- Étapes ---------- */
.pas-liste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pas { padding: 1.6rem; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); }
.pas-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 1rem;
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem; color: #1a1206;
  background: linear-gradient(180deg, #F2C865, var(--bronze));
}
.pas h3 { font-family: var(--corps); font-size: 1.08rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem; }
.pas p { color: var(--texte-doux); font-size: 0.95rem; }

/* ---------- Captures ---------- */
.bande-captures {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem;
  scrollbar-width: thin; scrollbar-color: var(--steel) transparent;
}
.capture { position: relative; margin: 0; scroll-snap-align: start; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 10; background: var(--iron); }
.capture img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.capture:hover img { transform: scale(1.04); }
.capture figcaption {
  position: absolute; left: 0.7rem; bottom: 0.7rem; font-size: 0.78rem; font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff;
}

/* ---------- Appel final ---------- */
.appel {
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; border-radius: 24px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(90, 160, 232, 0.22), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(144, 80, 224, 0.24), transparent 60%),
    radial-gradient(60% 90% at 50% 50%, rgba(232, 168, 32, 0.14), transparent 70%),
    #0e0d15;
  border: 1px solid var(--bord);
}
.appel h2 { font-family: var(--titre); font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin-bottom: 0.6rem; }
.appel p { color: var(--texte-doux); margin: 0 auto 1.8rem; max-width: 520px; }

/* =====================================================================
   PAGES INTÉRIEURES
   Même ciel que l accueil, en bandeau, puis des cartes au même dessin.
   ===================================================================== */
.contenu--telecharger, .contenu--forges, .contenu--soutenir, .contenu--modpacks { padding-top: 0; }

.ciel--bandeau { min-height: 0; padding: 8.5rem 1rem 9.5rem; }
.ciel--bandeau .ciel-paysage { height: 150px; }
/* Le bandeau est trop bas pour les montagnes : coupées par le cadre, elles feraient une ligne droite. */
.ciel--bandeau .plan-loin, .ciel--bandeau .brume-loin { display: none; }
.ciel--bandeau .ciel-astre { transform: scale(0.75); }
.bandeau-contenu { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bandeau-contenu .ciel-heure { margin-bottom: 1.1rem; }
.bandeau-contenu .surtitre { color: #fff; opacity: 0.85; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.bandeau-titre {
  font-family: var(--titre); font-weight: 700; letter-spacing: 0.04em; line-height: 1.05;
  font-size: clamp(2.3rem, 6vw, 4rem); margin: 0.5rem 0 0.9rem;
  color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.bandeau-chapo { max-width: 620px; color: rgba(255, 255, 255, 0.88); font-size: 1.04rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }

/* Cartes et encadrés hérités : même surface, mêmes coins, plus de liseré carré. */
.stat-card, .support-card, .donor-card, .etape, .atout, .repli details, .repli-ram, .dl-linux {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
.support-card, .donor-card, .stat-card { transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.support-card:hover, .donor-card:hover { transform: translateY(-4px); border-color: rgba(232, 184, 75, 0.45); box-shadow: 0 18px 40px -20px rgba(232, 184, 75, 0.6); }
.etape { border-left: 1px solid var(--bord); }
.etape-num {
  border: none !important; border-radius: 12px;
  color: #1a1206 !important; background: linear-gradient(180deg, #F2C865, var(--bronze));
  font-family: var(--titre); font-weight: 700;
}
.etape-titre, .atout-titre, .support-title { font-family: var(--corps); font-weight: 800; letter-spacing: 0.01em; text-transform: none; font-variant: normal; color: #fff; }
.atout-titre { color: var(--bronze-light); }
.dl-linux { border-left: 3px solid var(--bronze); }
.repli details { overflow: hidden; }
code, kbd { border-radius: 6px; }

.btn-primary, .btn-telecharger {
  color: #1a1206;
  background: linear-gradient(180deg, #F2C865, var(--bronze));
  border-radius: 12px;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -8px rgba(232, 184, 75, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover { background: linear-gradient(180deg, #F7D57D, var(--bronze-light)); }
.btn-telecharger-titre { font-weight: 800; font-size: 1rem; text-transform: none; letter-spacing: 0.01em; white-space: nowrap; }
.status-dot.online { background: var(--vert); box-shadow: 0 0 8px rgba(91, 208, 138, 0.7); }
.status-dot.offline { background: var(--rouge); }
.btn-top { border-radius: 12px; background: var(--surface); border: 1px solid var(--bord); backdrop-filter: blur(8px); }

/* Soutenir */
.texte-doux { color: var(--texte-doux); margin-top: 1rem; }
.or { color: var(--bronze-light); font-weight: 700; }
.phrase-forte { margin-top: 1.4rem; font-family: var(--titre); font-size: 1.25rem; color: var(--bronze-light); }

/* Forges */
.forges-consigne {
  display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-light);
}
.forges-grid-wrap { padding-top: 3.5rem; }

/* Modpacks */
.fresque { border-radius: var(--rayon); }
#fresques { padding-top: 3.5rem; }

/* News */
.contenu--news .filters { gap: 0.5rem; }
.filter-btn {
  border-radius: 999px; font-family: var(--corps); font-weight: 700; letter-spacing: 0.02em;
  text-transform: none; font-size: 0.86rem; padding: 0.5rem 1rem;
  background: var(--surface); border: 1px solid var(--bord); color: var(--texte-doux);
}
.filter-btn:hover { color: var(--texte); border-color: rgba(255, 255, 255, 0.2); }
.filter-btn.active { color: #1a1206; background: linear-gradient(180deg, #F2C865, var(--bronze)); border-color: transparent; }
.news-card { border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); border-left-width: 3px; }
.news-title { font-family: var(--titre); }
.news-text { color: var(--texte); }
.news-badge { border-radius: 999px; }
.btn-back { font-family: var(--corps); font-weight: 700; text-transform: none; letter-spacing: 0.01em; }
.btn-admin-float { border-radius: 999px; }
.modal { border-radius: 18px; }

/* Captures */
.cork-section { max-width: 1320px; margin: 0 auto; padding: 3.5rem clamp(1rem, 4vw, 3rem) 5rem; }
.cork-frame { border-radius: 18px; overflow: hidden; }
.btn-reshuffle { border-radius: 999px; font-family: var(--corps); font-weight: 700; text-transform: none; letter-spacing: 0.02em; }

/* ---------- Téléphones et tablettes ---------- */
@media (max-width: 960px) {
  .nav-links.open { gap: 0.6rem; }
  .nav-links.open a { font-size: 1.25rem; padding: 0.7rem 1.6rem; }
  .frise { grid-template-columns: repeat(2, 1fr); }
  .pas-liste { grid-template-columns: 1fr; }
  .ciel-forge-heure { position: static; margin: 2rem auto 0; }
  .ciel { padding-bottom: 8rem; }
  .ciel-contenu { display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 560px) {
  .ciel--bandeau { padding: 7rem 1rem 6rem; }
  .frise { grid-template-columns: 1fr; }
  .bouton { width: 100%; }
  .ciel-actions { width: 100%; }
  .bande-captures { grid-auto-columns: 82%; }
  .ciel-heure { font-size: 0.74rem; border-radius: 16px; }
  .ciel-astre { transform: scale(0.6); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}