/* =========================================================================
   ACD - acd-design.css
   Systeme de design partage "Edition chaude" (lignee live.html)
   --------------------------------------------------------------------------
   SOURCE UNIQUE DE LA DA. Tout se retouche dans le bloc :root ci-dessous.
   Re-SCP ce seul fichier et la modif se propage a index + toutes les sections.
   Regle : aucun hex en dur ailleurs que dans ce :root.
   Changer de theme plus tard = reecrire ce fichier, rien d'autre.
   ========================================================================= */

/* =========================================================================
   1. TOKENS  (le tableau de bord de la DA)
   ========================================================================= */
:root{
  /* --- couleurs --- */
  --cream:      #f5f1ea;   /* fond                                   */
  --cream-2:    #efe8db;   /* fond alterne / tuiles                  */
  --ink:        #2c2622;   /* texte, traits                          */
  --ink-soft:   #6b6358;   /* texte secondaire                       */
  --terracotta: #8a4a2b;   /* accent primaire                        */
  --ochre:      #b07d1e;   /* accent secondaire                      */
  --line:       rgba(44,38,34,.12);   /* filet hairline              */
  --line-2:     rgba(44,38,34,.20);   /* filet appuye                */
  --card:       rgba(245,241,234,.92);/* materiau des cartes givrees  */

  /* --- etats semantiques (couleur de valeur pilotee par JS) --- */
  --ok:    #5e7d3e;   /* favorable (alt. densite basse, givrage faible)  */
  --warn:  #c2791c;   /* a surveiller                                    */
  --alert: #a6341d;   /* critique (alt. densite elevee, givrage severe)  */

  /* --- ombres --- */
  --shadow:     0 12px 40px rgba(44,38,34,.10);
  --shadow-sm:  0 2px 10px rgba(44,38,34,.08);

  /* --- rayons --- */
  --r-card:     18px;
  --r-nav:      14px;

  /* --- typographie --- */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'DM Sans', system-ui, -apple-system, sans-serif;

  /* --- rythme --- */
  --pad: clamp(20px, 3vw, 48px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }

/* =========================================================================
   2. ORCHESTRATEUR  (body.acd-app)
   ========================================================================= */
body.acd-app{
  font-family:var(--font-body); color:var(--ink);
  background:var(--cream); overflow:hidden; -webkit-font-smoothing:antialiased;
}

/* fond : lumiere chaude + trajectoire ocre (signature, tres discrete) */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 70% at 82% 8%, rgba(176,125,30,.10), transparent 60%); }
.field svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

.frame{ position:fixed; inset:0; z-index:1; display:flex; flex-direction:column;
  padding:var(--pad); gap:clamp(14px,1.8vw,26px); }

/* =========================================================================
   3. BANDEAU
   ========================================================================= */
.topbar{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }

.hud{ background:var(--card); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  border:1px solid var(--line); border-radius:var(--r-card); padding:22px 28px;
  box-shadow:var(--shadow); max-width:min(58%, 680px); }
.eyebrow{ display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:clamp(11px,1vw,13px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:12px; }
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--terracotta); flex:none;
  box-shadow:0 0 0 0 rgba(138,74,43,.5); animation:acd-pulse 2s infinite; }
@keyframes acd-pulse{ 0%{box-shadow:0 0 0 0 rgba(138,74,43,.45)} 70%{box-shadow:0 0 0 12px rgba(138,74,43,0)} 100%{box-shadow:0 0 0 0 rgba(138,74,43,0)} }
.hud__title{ font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,3.4vw,52px); line-height:1.02; letter-spacing:-.015em; color:var(--ink); }
.hud__meta{ margin-top:10px; font-size:clamp(13px,1.1vw,16px); font-weight:500;
  color:var(--ochre); letter-spacing:.01em; }

.instruments{ display:flex; align-items:center; gap:clamp(14px,1.6vw,24px); padding-top:6px; }
.clock{ text-align:right; }
.clock__t{ font-family:var(--font-display); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:clamp(22px,2.2vw,34px); line-height:1; color:var(--ink); letter-spacing:.01em; }
.clock__z{ font-weight:500; font-size:clamp(10px,.9vw,12px); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }
.tvbtn{ font-family:var(--font-body); font-weight:600; font-size:clamp(12px,1vw,13px);
  letter-spacing:.06em; color:var(--ink); background:var(--card); border:1px solid var(--line-2);
  border-radius:999px; padding:11px 20px; cursor:pointer; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-sm); transition:all .18s; }
.tvbtn__ic{ width:14px; height:14px; fill:currentColor; }
.tvbtn:hover{ border-color:var(--terracotta); color:var(--terracotta); }
body.tv .tvbtn{ background:var(--terracotta); color:#fff; border-color:var(--terracotta); }

/* =========================================================================
   4. NAVIGATION
   ========================================================================= */
.nav{ position:relative; display:flex; align-items:stretch; gap:4px;
  background:var(--card); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  border:1px solid var(--line); border-radius:var(--r-nav); padding:6px;
  box-shadow:var(--shadow-sm); overflow:hidden; }
.nav-item{ appearance:none; background:transparent; border:0; cursor:pointer; flex:1;
  font-family:var(--font-body); font-weight:600; font-size:clamp(11px,.92vw,13px);
  letter-spacing:.05em; color:var(--ink-soft); padding:11px 10px; border-radius:9px;
  white-space:nowrap; transition:color .18s, background .18s; }
.nav-item:hover{ color:var(--ink); background:rgba(44,38,34,.04); }
.nav-item.active{ color:var(--terracotta); background:rgba(138,74,43,.08); }
.nav-prog{ position:absolute; left:6px; bottom:0; height:2px; width:calc(100% - 12px);
  transform-origin:left center; transform:scaleX(0); background:var(--terracotta); opacity:0; }
body.tv .nav-prog{ opacity:1; }

/* =========================================================================
   5. SCENE & PANNEAUX
   ========================================================================= */
.stage{ position:relative; flex:1; min-height:0; }
.panel{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s; display:flex; flex-direction:column; }
.panel.show{ opacity:1; visibility:visible; }
.panel iframe{ width:100%; height:100%; border:0; background:transparent; }

/* =========================================================================
   6. COMPOSANTS DE CONTENU
   ========================================================================= */
.card{ background:var(--card); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(20px,2.4vw,34px);
  box-shadow:var(--shadow); }
.card__eyebrow{ display:flex; align-items:center; gap:9px; font-weight:600;
  font-size:clamp(10px,.9vw,12px); letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:clamp(14px,1.6vw,22px); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ochre); flex:none; }

/* etats semantiques : couleur de valeur pilotee par JS (alt. densite, givrage) */
.is-ok{ color:var(--ok); }
.is-warn{ color:var(--warn); }
.is-alert{ color:var(--alert); }

/* --- meteo (vitrine) --- */
.wx{ flex:1; min-height:0; display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:1.6fr 1fr; }
.wx-main{ display:flex; flex-direction:column; }
.figs{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px);
  align-content:center; }
.fig__val{ font-family:var(--font-display); font-weight:500; line-height:1;
  font-size:clamp(26px,3vw,46px); color:var(--ink); letter-spacing:-.01em; }
.fig__val small{ font-size:.5em; color:var(--ink-soft); font-weight:500; }
.fig__val.accent{ color:var(--terracotta); }
.fig__lbl{ margin-top:9px; font-weight:600; font-size:clamp(10px,.85vw,12px);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.metar{ margin-top:clamp(16px,1.8vw,24px); padding-top:16px; border-top:1px solid var(--line);
  font-size:clamp(11px,.95vw,13px); letter-spacing:.04em; color:var(--ink-soft); }
.metar b{ color:var(--terracotta); font-weight:600; }
.wx-side{ display:flex; flex-direction:column; }
.tendency{ flex:1; display:flex; align-items:center;
  font-family:var(--font-display); font-style:italic; font-weight:400; line-height:1.45;
  font-size:clamp(16px,1.6vw,24px); color:var(--ink); }

/* --- suivi : marqueur repris de live.html --- */
.minimap{ flex:1; position:relative; border-radius:var(--r-nav); overflow:hidden;
  background:linear-gradient(135deg, #e9e2d4, #e4dccb); border:1px solid var(--line); }
.minimap::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 30% 40%, rgba(176,125,30,.10), transparent 40%),
    radial-gradient(circle at 70% 65%, rgba(138,74,43,.08), transparent 40%); }
.trail{ position:absolute; left:18%; top:70%; width:48%; height:2px; }
.trail svg{ width:100%; height:60px; overflow:visible; }
.ac{ position:absolute; left:64%; top:46%; width:38px; height:38px; }
.ac svg{ width:27px; height:27px; fill:var(--terracotta);
  filter:drop-shadow(0 1px 2px rgba(44,38,34,.35)); }
.ac-tag{ position:absolute; top:30px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:var(--cream); color:var(--terracotta); font-weight:600; font-size:11px;
  padding:3px 8px; border-radius:7px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }

/* --- tuiles thematiques legeres --- */
.tile{ flex:1; display:flex; }
.tile .card{ flex:1; display:flex; flex-direction:column; }
.tile__body{ flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; text-align:center; }
.tile__art{ width:clamp(56px,6vw,86px); height:clamp(56px,6vw,86px); color:var(--terracotta); }
.tile__art.ochre{ color:var(--ochre); }
.tile__art svg{ width:100%; height:100%; }
.tile__line{ font-size:clamp(13px,1.1vw,16px); font-weight:500; color:var(--ink-soft);
  letter-spacing:.01em; }
.quote{ font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.2vw,32px); line-height:1.4; color:var(--ink); max-width:60ch; }
.gauge{ width:100%; max-width:420px; }
.gauge__val{ font-family:var(--font-display); font-weight:500; color:var(--ochre);
  font-size:clamp(34px,4vw,56px); line-height:1; }
.gauge__bar{ height:8px; border-radius:999px; background:rgba(44,38,34,.10); margin-top:18px;
  overflow:hidden; }
.gauge__fill{ height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--ochre), var(--terracotta)); }
.tags{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.tag{ background:var(--cream); color:var(--terracotta); font-weight:600;
  font-size:clamp(13px,1.1vw,15px); padding:7px 14px; border-radius:9px;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); }

/* =========================================================================
   7. MARGINALIA
   ========================================================================= */
.foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:500; font-size:clamp(10px,.85vw,12px); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(44,38,34,.4); }
.foot .state{ color:var(--terracotta); }
body:not(.tv) .foot .state::before{ content:"Mode interactif"; }
body.tv .foot .state::before{ content:"Mode TV \00B7 lecture auto"; }

/* =========================================================================
   6bis. GALERIE D'IMAGES  (solos, photos, annonces)
   ========================================================================= */
.gallery{ position:relative; flex:1; min-height:0; border-radius:var(--r-card);
  overflow:hidden; border:1px solid var(--line); background:var(--cream-2); }
.gallery-slide{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s;
  display:flex; align-items:center; justify-content:center; }
.gallery-slide.show{ opacity:1; visibility:visible; }
.gallery-slide img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; }

/* legende (chip sombre en bas a gauche) */
.gallery-cap{ position:absolute; left:clamp(14px,1.6vw,22px); bottom:clamp(14px,1.6vw,22px);
  z-index:3; max-width:70%;
  background:rgba(44,38,34,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-radius:12px; padding:clamp(10px,1.2vw,16px) clamp(14px,1.6vw,20px); color:#fff; }
.gallery-cap__main{ font-family:var(--font-display); font-weight:500; line-height:1.2;
  font-size:clamp(16px,1.8vw,24px); }
.gallery-cap__sub{ display:flex; align-items:center; gap:7px; margin-top:6px;
  font-family:var(--font-body); font-weight:500; font-size:clamp(11px,1vw,14px); opacity:.92; }
.gallery-cap__sub svg{ width:13px; height:13px; fill:currentColor; flex:none; }

/* pastilles de navigation (en haut a droite, sur pilule sombre) */
.gallery-dots{ position:absolute; right:clamp(14px,1.6vw,22px); top:clamp(14px,1.6vw,22px);
  z-index:4; display:flex; gap:7px; align-items:center;
  background:rgba(44,38,34,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:8px 12px; border-radius:999px; }
.gallery-dots.hidden{ display:none; }
.gallery-dot{ width:8px; height:8px; border-radius:50%; background:rgba(245,241,234,.5);
  cursor:pointer; transition:background .2s, transform .2s; }
.gallery-dot.active{ background:#fff; transform:scale(1.3); }

/* etat vide */
.gallery-empty{ position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center; color:var(--ink-soft); }
.gallery-empty.show{ display:flex; }
.gallery-empty svg{ width:clamp(48px,5vw,72px); height:clamp(48px,5vw,72px); color:var(--ochre); }
.gallery-empty .t{ font-family:var(--font-display); font-weight:500;
  font-size:clamp(18px,1.8vw,26px); color:var(--ink); }
.gallery-empty .s{ font-weight:500; font-size:clamp(12px,1.1vw,15px); }

/* =========================================================================
   8. PAGES DE SECTION AUTONOMES  (chargees en iframe)
   --------------------------------------------------------------------------
   Une page de section ajoute la classe .section-page sur <html> et ne dessine
   QUE son contenu. Fond transparent dans l'orchestrateur ; fond creme quand
   ouverte seule (.standalone, posee par ACD.markStandalone).
   ========================================================================= */
html.section-page, html.section-page body{ height:100%; background:transparent; }
html.section-page body{ font-family:var(--font-body); color:var(--ink);
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; overflow:hidden; }
html.section-page.standalone{ background:var(--cream); }
.section-page .section-stage{ position:relative; flex:1; min-height:0;
  display:flex; flex-direction:column; }
/* marge seulement en autonome ; en iframe, l'orchestrateur gere deja le cadrage */
html.section-page.standalone .section-stage{ margin:var(--pad); }

/* =========================================================================
   9. RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){ .wx{ grid-template-columns:1fr; } }
@media (max-width:760px){
  body.acd-app{ overflow:auto; } .frame{ position:relative; min-height:100dvh; }
  .topbar{ flex-direction:column; align-items:stretch; gap:16px; }
  .hud{ max-width:none; } .instruments{ justify-content:space-between; }
  .nav{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nav-item{ flex:none; }
  .stage{ min-height:60vh; }
  .figs{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================================
   10. ACCESSIBILITE
   ========================================================================= */
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }
.nav-item:focus-visible,.tvbtn:focus-visible{ outline:2.5px solid var(--terracotta); outline-offset:3px; }