@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ============================================================
   IRAN 2026 , STYLES PARTAGÉS
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg2: #f8f7f5;
  --bg3: #f0efec;
  --bg4: #e6e5e2;
  --text: #1a1a1a;
  --text2: #5c5b57;
  --text3: #8a8983;
  --border: rgba(0,0,0,0.09);
  --border2: rgba(0,0,0,0.05);
  --green: #2E7D32;
  --green-bg: rgba(46,125,50,0.08);
  --red: #C62828;
  --red-bg: rgba(198,40,40,0.08);
  --amber: #E65100;
  --amber-bg: rgba(230,81,0,0.07);
  --blue: #1565C0;
  --blue-bg: rgba(21,101,192,0.08);
  --gold: #9E7B2F;
  --gold-bg: rgba(158,123,47,0.06);
  --gold-light: #c9a84c;
  --coral: #BF5B21;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.shell { max-width: 1100px; margin: 0 auto; padding: 28px 32px 60px; }
.up { color: var(--green); }
.dn { color: var(--red); }

/* ===== TAGS & TITLES ===== */
.tag { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 12px; color: var(--red); letter-spacing: 0.5px; margin-bottom: 6px; }
h1 { font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; letter-spacing: -0.3px; }
h1 em { color: var(--coral); font-style: normal; font-weight: 700; }
.sub { font-size: 15.5px; color: var(--text2); max-width: 720px; margin-bottom: 22px; line-height: 1.6; }
.sec-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.cnt { font-family: 'SF Mono', Consolas, monospace; font-size: 13px; color: var(--text3); background: var(--bg3); padding: 3px 11px; border-radius: 12px; font-weight: 500; }
.foot { text-align: center; font-size: 13px; color: var(--text3); padding: 28px 0 0; border-top: 1px solid var(--border); margin-top: 32px; }

/* ===== KPI STRIP ===== */
.strip { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.kpi { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 13px 16px; min-width: 130px; flex: 1; position: relative; }
.kpi-l { font-size: 12.5px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.kpi-l .info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--bg3); color: var(--text3); font-size: 9px; font-weight: 700; cursor: help; flex-shrink: 0; border: 1px solid var(--border); line-height: 1; }
.kpi-v { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 24px; font-weight: 700; line-height: 1.2; }
.kpi-s { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 13px; color: var(--text3); margin-top: 2px; }
.kpi-d { font-size: 13px; font-weight: 600; margin-top: 3px; }
.ttip { position: absolute; bottom: calc(100% + 8px); left: 12px; right: 12px; background: #1a1a1a; color: #f0f0f0; font-size: 14px; line-height: 1.55; padding: 14px 16px; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 50; box-shadow: 0 6px 24px rgba(0,0,0,0.18); font-weight: 400; min-width: 260px; }
.ttip strong { color: #fff; font-weight: 600; }
.kpi:hover .ttip { opacity: 1; }
.ttip::after { content: ''; position: absolute; top: 100%; left: 28px; border: 7px solid transparent; border-top-color: #1a1a1a; }

/* ===== ANIMATION ===== */
@keyframes newpulse { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

/* ===== PERSONNEL , NEW BADGE ===== */
.card-new { display: inline-block; background: #D32F2F; color: #fff; padding: 2px 8px; border-radius: 3px; font-family: 'SF Mono', Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; margin-left: 8px; animation: newpulse 2s infinite; vertical-align: middle; }

/* ===== STRUCTURELLE CARDS ===== */
.s-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; position: relative; overflow: hidden; }
.s-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.15); }
.s-card .s-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.s-card .s-id { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }
.s-card .s-name { font-size: 14px; font-weight: 700; line-height: 1.3; margin: 4px 0 8px; }
.s-card .s-cred { font-family: 'SF Mono', Consolas, monospace; font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.s-card .s-cred-bar { height: 4px; background: var(--bg3); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.s-card .s-cred-fill { height: 100%; border-radius: 2px; transition: width 0.4s; }
.s-card .s-date { font-size: 11px; color: var(--text2); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border2); line-height: 1.5; }
.s-card .s-last { font-size: 11.5px; color: var(--text); margin-top: 8px; line-height: 1.55; }
.s-card .s-new { display: inline-block; background: #D32F2F; color: #fff; padding: 2px 7px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.3px; margin-left: 6px; animation: newpulse 2s infinite; }

/* ===== TACTIQUE CARDS ===== */
.t-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: box-shadow 0.15s; position: relative; }
.t-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.06); }
.t-card .t-status { position: absolute; top: 0; left: 0; right: 0; height: 2.5px; border-radius: 8px 8px 0 0; }
.t-card .t-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.t-card .t-id { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; font-weight: 600; color: var(--text3); }
.t-card .t-tag { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 600; font-family: 'SF Mono', Consolas, monospace; }
.t-card .t-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; color: var(--text); }
.t-card .t-evt { font-size: 11px; color: var(--text2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.t-card .t-new { display: inline-block; background: #D32F2F; color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 8px; font-weight: 700; animation: newpulse 2s infinite; margin-left: 4px; }
.t-card canvas { display: block; margin-top: 8px; }
.t-filter { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; color: var(--text2); transition: all 0.12s; font-weight: 500; }
.t-filter:hover { background: var(--bg3); }
.t-filter.active { background: var(--text); color: #fff; border-color: var(--text); }

/* ===== SIDE PANEL ===== */
.tpanel-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.tpanel-overlay.open { opacity: 1; pointer-events: auto; }
.tpanel { position: fixed; top: 0; right: -520px; width: 480px; max-width: 90vw; height: 100vh; background: #fff; z-index: 201; transition: right 0.3s ease; overflow-y: auto; box-shadow: -4px 0 24px rgba(0,0,0,0.08); }
.tpanel.open { right: 0; }
.tpanel-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text2); }
.tpanel-close:hover { background: var(--bg2); }
.tpanel-head { padding: 24px 24px 0; }
.tpanel-head .tp-tag { font-family: 'SF Mono', Consolas, monospace; font-size: 10px; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 6px; font-weight: 600; }
.tpanel-head .tp-title { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.tpanel-head .tp-sub { font-size: 13px; color: var(--text2); line-height: 1.5; }
.tpanel-body { padding: 16px 24px 32px; }
.tpanel-body h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--coral); margin: 18px 0 5px; }
.tpanel-body h4:first-child { margin-top: 0; }
.tpanel-body p { font-size: 13.5px; color: var(--text2); line-height: 1.7; margin-bottom: 6px; }
.tpanel-body .tp-proj { font-family: 'SF Mono', Consolas, monospace; font-size: 11px; padding: 10px 14px; background: var(--bg3); border-radius: 7px; margin-top: 12px; line-height: 1.65; border: 1px solid var(--border2); }

/* ===== PERSONNEL , CARDS ===== */
.card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 16px; }
.card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text3); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.card-title .dot { width: 8px; height: 8px; border-radius: 50%; }
.big-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.big { flex: 1; min-width: 180px; }
.big-label { font-size: 13px; color: var(--text3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.big-val { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 32px; font-weight: 500; line-height: 1.2; }
.big-sub { font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 13.5px; color: var(--text3); margin-top: 2px; }
.big-delta { font-size: 14px; font-weight: 600; margin-top: 3px; }
.private-tag { display: inline-block; font-family: 'SF Mono', SFMono-Regular, Consolas, monospace; font-size: 12px; color: #fff; background: var(--red); padding: 3px 10px; border-radius: 4px; letter-spacing: 0.5px; margin-bottom: 10px; }

/* ===== SCENARIO GRID ===== */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.sc-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; position: relative; overflow: hidden; }
.sc-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.sc-val { font-family: 'SF Mono', Consolas, monospace; font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.sc-sub { font-size: 11px; color: var(--text2); line-height: 1.5; }
.sc-date { font-family: 'SF Mono', Consolas, monospace; font-size: 11px; color: var(--text3); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sc-hyp { font-size: 11px; color: var(--text3); margin-top: 8px; line-height: 1.5; font-style: italic; }

/* ===== DRIVERS ===== */
.drivers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.driver { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.driver-cat { font-family: 'SF Mono', Consolas, monospace; font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.driver-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.driver-val { font-family: 'SF Mono', Consolas, monospace; font-size: 12px; color: var(--text2); }
.driver-dir { font-size: 11px; font-weight: 600; margin-top: 2px; }

/* ===== RATIO BAR ===== */
.ratio-bar { height: 10px; background: var(--bg3); border-radius: 5px; margin-top: 8px; overflow: hidden; position: relative; }
.ratio-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; }

/* ===== PLACEHOLDER ===== */
.placeholder { background: var(--bg); border: 2px dashed var(--border); border-radius: 10px; padding: 28px; text-align: center; color: var(--text3); font-size: 13px; line-height: 1.6; }

/* ===== ACCORDION ===== */
.acc { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.acc-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--bg); cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text); transition: background 0.12s; user-select: none; }
.acc-head:hover { background: var(--bg2); }
.acc-head::before { content: '▸'; font-size: 11px; color: var(--text3); transition: transform 0.2s; flex-shrink: 0; }
.acc.open .acc-head::before { transform: rotate(90deg); }
.acc-body { display: none; padding: 0 14px 14px; font-size: 14px; color: var(--text2); line-height: 1.65; }
.acc.open .acc-body { display: block; }

/* ===== SITE FOOTER (colophon V3c) ===== */
.site-footer { margin:56px 0 0; padding:0 32px 80px; width:100%; display:flex; justify-content:center; }
.site-footer-inner { display:flex; align-items:center; gap:14px; }
.site-footer-sig { text-align:right; }
.site-footer-sig-name { font-size:11px; color:#8a8983; font-weight:500; letter-spacing:0.5px; }
.site-footer-sig-date { font-family:'SF Mono',SFMono-Regular,Consolas,monospace; font-size:10px; color:#8a8983; margin-top:2px; }
.site-footer-bar { width:0.5px; height:24px; background:rgba(0,0,0,0.2); flex-shrink:0; }
.site-footer-src { font-size:10px; color:var(--text3); opacity:0.55; text-align:left; line-height:1.8; letter-spacing:0.2px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
  .sc-grid { grid-template-columns: 1fr; }
  .drivers { grid-template-columns: 1fr; }
  .big-row { flex-direction: column; gap: 12px; }
  .strip { flex-direction: column; }
}

/* ===== NAVIGATION SITE (style collection JBC) ===== */
.site-nav { display:flex; align-items:center; justify-content:center; gap:24px; padding:18px 36px; max-width:1200px; margin:0 auto; position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:0.5px solid rgba(0,0,0,0.09); }
.site-nav__brand { position:absolute; left:36px; top:50%; transform:translateY(-50%); font-family:'EB Garamond', Georgia, serif; font-size:22px; font-weight:400; color:#791F1F; text-decoration:none; letter-spacing:-0.2px; white-space:nowrap; }
.site-nav__brand:hover { opacity:0.85; }
.site-nav__links { display:flex; align-items:center; gap:16px; font-family:'IBM Plex Mono', 'SF Mono', Consolas, monospace; flex-wrap:wrap; justify-content:center; }
.site-nav__link { font-size:11px; color:#5c5b57; text-decoration:none; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; padding:4px 2px; white-space:nowrap; transition:color 0.15s; }
.site-nav__link:hover { color:#1a1a1a; }
.site-nav__link.here { color:#1a1a1a; font-weight:600; border-bottom:1.5px solid #791F1F; pointer-events:none; }
.site-nav__arrow { color:#791F1F; font-size:13px; font-family:'IBM Plex Mono', monospace; }
@media (max-width: 900px) {
  .site-nav { padding:14px 20px; gap:14px; flex-direction:column; justify-content:center; position:static; }
  .site-nav__brand { position:static; transform:none; }
  .site-nav__links { gap:10px; flex-wrap:wrap; justify-content:center; }
  .site-nav__link { font-size:10.5px; letter-spacing:1.2px; }
}


/* ============================================================
   COLLECTION JBC, STYLES PARTAGÉS (hero + timeline)
   ============================================================ */

/* Hero de page d'accueil */
.hp-wrap { max-width:760px; margin:0 auto; text-align:center; padding:72px 24px 32px; }
.hp-title { font-family:'EB Garamond', Georgia, serif; font-style:italic; font-size:54px; font-weight:400; color:#1a1a1a; letter-spacing:-0.5px; line-height:1.1; margin-bottom:24px; }
.hp-subtitle-wrap { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:28px; }
.hp-subtitle-line { width:64px; height:1px; background:#791F1F; opacity:0.5; }
.hp-subtitle { font-family:'IBM Plex Mono', 'SF Mono', monospace; font-size:11px; color:#791F1F; font-weight:500; text-transform:uppercase; letter-spacing:2.5px; }
.hp-tagline { font-family:'EB Garamond', Georgia, serif; font-style:italic; font-size:17px; color:#1a1a1a; line-height:1.5; max-width:520px; margin:0 auto; }

/* Timeline verticale */
.hp-tl-wrap { max-width:720px; margin:0 auto; padding:24px 24px 64px; position:relative; }
.hp-tl-line { position:absolute; left:37px; top:42px; bottom:42px; width:1.5px; background:#E8C8C8; opacity:0.7; }
.hp-tl-item { display:flex; align-items:center; gap:22px; padding:20px 0; text-decoration:none; color:inherit; position:relative; border-bottom:0.5px solid rgba(0,0,0,0.06); }
.hp-tl-item:last-child { border-bottom:none; }
.hp-tl-dot { width:11px; height:11px; border:1.5px solid #c8c7c2; border-radius:50%; flex-shrink:0; margin-left:8px; background:#fff; box-sizing:border-box; }
.hp-tl-item.here .hp-tl-dot { border:1.5px dashed #791F1F; }
.hp-tl-content { flex:1; }
.hp-tl-label { font-family:'IBM Plex Mono', 'SF Mono', monospace; font-size:13px; font-weight:500; color:#1a1a1a; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:4px; }
.hp-tl-desc { font-family:'IBM Plex Sans', -apple-system, sans-serif; font-size:13.5px; color:#8a8983; line-height:1.5; }
.hp-tl-item.here .hp-tl-desc { color:#791F1F; font-weight:500; }
.hp-tl-num { font-family:'IBM Plex Mono', 'SF Mono', monospace; font-size:14px; color:#c8c7c2; }
.hp-tl-item.here .hp-tl-num { color:#791F1F; font-weight:500; }
.hp-tl-item:hover .hp-tl-label { color:#791F1F; }

@media (max-width: 600px) {
  .hp-wrap { padding:48px 20px 24px; }
  .hp-title { font-size:38px; }
  .hp-tl-wrap { padding:16px 20px 48px; }
  .hp-tl-line { left:33px; }
}

/* Installation sur l'ecran d'accueil : option discrete, masquee tant que le
   navigateur n'a pas declare le site installable (install.js). */
.site-install { text-align:center; padding:0 28px 18px; font-family:'IBM Plex Sans', -apple-system, sans-serif; font-size:11px; color:#8a8983; }
.site-install[hidden] { display:none; }
.site-install__link { color:#791F1F; text-decoration:underline; text-underline-offset:2px; }
.site-install__link[hidden], .site-install__ios[hidden] { display:none; }

/* Partager : icone seule, jamais de phrase a l'ecran (share.js).
   Dans le pied de page de toutes les pages, entre deux filets, comme sur le
   Gold Signal : en rangee sur ordinateur, en colonne centree sur mobile. */
.share-wrap { display:flex; align-items:center; justify-content:center; gap:8px; position:relative; flex-shrink:0; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:#791F1F; opacity:0.6; text-decoration:none; }
.share-btn:hover { opacity:1; background:rgba(121,31,31,0.07); }
.share-fb { font-family:'IBM Plex Sans', -apple-system, sans-serif; font-size:11px; color:#8a8983; white-space:nowrap; }
.share-fb[hidden] { display:none; }

/* Ordinateur : ni installation ni partage, ces options n'ont de sens qu'au
   telephone. Tout reste present dans le HTML et n'apparait qu'en dessous de
   700 px (le seuil ou le pied de page passe en colonne). */
@media (min-width: 701px) {
  .site-install, .site-footer-share, .site-footer-share + .site-footer-bar { display:none !important; }
}
@media (max-width: 700px) {
  .site-footer-inner { flex-direction:column; gap:12px; }
  .site-footer-sig { text-align:center; }
  .site-footer-bar { width:64px; height:0.5px; }
  .site-footer-src { text-align:center; }
}