/* ============================================
   BULLISH THEME — Shop-Elec.com / Leo Blog
   Fichier de référence UNIQUE du template blog (ADR 0007).
   Remplace blog-style-lusine-nouvelle.css (fusionné ici) et la palette
   bleu/orange périmée de workflow-03-template-ADN-BULLISH-v2.md Partie E.

   Emplacement FTP cible : /themes/at_movic/assets/css/bullish-theme.css
   Inclusion : voir instructions-depot-ftp-julien.md (lien dans head.tpl,
   chemin absolu codé en dur — {$urls.theme_path} n'est pas fiable en
   FrontController sur cette version de Prestashop).

   Vocabulaire de classes autorisé dans le contenu (ADR 0007, corrige
   workflow-02 §4.1) : zéro style inline, zéro classe sur les éléments de
   prose (p, h2, h3, ul, ol, li, table, td, a courants) — ils héritent des
   sélecteurs descendants de .se-article-body ci-dessous. class= réservée
   aux composants nommés listés dans ce fichier. id= réservé aux ancres de
   sommaire (H2/H3).
   ============================================ */

:root {
  --se-brand-primary:  #b91c1c;  /* rouge — accent unique (liens forts, CTA, numéros de section) */
  --se-brand-dark:     #0f172a;  /* noir/marine — hero, titres, bandeaux CTA */
  --se-brand-yellow:   #f2b824;  /* bandeau métadonnées */
  --se-success:        #16a34a;
  --se-warning:        #d97706;
  --se-danger:         #ef4444;
  --se-info:           #1d4ed8;
  --se-text-body:      #334155;
  --se-text-muted:     #64748b;
  --se-bg-light:       #FFFFFF;
  --se-bg-alt:         #f8fafc;
  --se-border:         #cbd5e1;

  --se-font-heading:   'Archivo', sans-serif;
  --se-font-serif:     Georgia, Cambria, 'Times New Roman', Times, serif;
  --se-font-body:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --se-font-mono:      monospace;
  --se-prose-width:    72ch;
  --se-radius:         4px;
}

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&display=swap');

/* ============================================
   HERO — vit dans blog.tpl (migré depuis le contenu, ADR 0007)
   ============================================ */
.se-hero { margin-bottom: 35px; }
.se-hero-badge { display: inline-block; background: var(--se-brand-primary); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; margin-bottom: 14px; font-family: var(--se-font-mono); }
.se-breadcrumb { font-family: var(--se-font-mono); font-size: 12px; margin-bottom: 20px; color: var(--se-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.se-breadcrumb a { color: var(--se-brand-primary); text-decoration: none; font-weight: 700; }
.se-breadcrumb a:hover, .se-breadcrumb a:focus-visible { text-decoration: underline; }
.se-breadcrumb-current { color: var(--se-brand-dark); font-weight: 700; }
.se-hero-title { font-family: var(--se-font-serif); font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.25; color: var(--se-brand-dark); margin: 0 0 18px; letter-spacing: -.01em; }
.se-hero-subtitle { font-size: 17px; color: var(--se-text-body); max-width: 800px; margin: 0 0 24px; line-height: 1.6; }
.se-hero-meta-band { background: var(--se-brand-yellow); color: var(--se-brand-dark); padding: 12px 20px; font-family: var(--se-font-mono); font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-radius: 2px; }
.se-hero-author a { color: var(--se-brand-primary); text-decoration: none; }

/* --- Image principale --- */
.se-hero-image { width: 100%; margin: 35px auto; border-radius: var(--se-radius); overflow: hidden; border: 1px solid var(--se-border); box-shadow: 0 4px 15px rgba(0,0,0,.05); }
.se-hero-image img { width: 100%; height: auto; display: block; }

/* ============================================
   SOMMAIRE (TOC) — reste dans le contenu de chaque article (ADR 0007) :
   Smarty n'a pas accès aux H2 du contenu brut pour générer des ancres
   dynamiques. Version grille numérotée (reprise du brouillon, qui
   fonctionne bien avec l'identité "presse industrielle") + scroll-spy
   JS (bullish-components.js). Pas de position:sticky : la TOC est une
   grille pleine largeur, pas une barre latérale étroite — la rendre
   sticky créerait un bloc figé disproportionné à l'écran. Amélioration
   possible plus tard : barre compacte qui apparaît au scroll (hors
   périmètre du premier lot).
   ============================================ */
.se-toc { background: var(--se-bg-alt); border: 1px solid var(--se-border); padding: 24px 30px; border-radius: var(--se-radius); margin-bottom: 40px; border-top: 3px solid var(--se-brand-dark); }
.se-toc-title { font-size: 12px; font-family: var(--se-font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; color: var(--se-brand-dark); border-bottom: 2px solid var(--se-brand-primary); padding-bottom: 6px; display: inline-block; }
.se-toc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 40px; font-family: var(--se-font-mono); font-size: 13.5px; }
.se-toc-list a { color: var(--se-brand-dark); text-decoration: none; font-weight: 700; }
.se-toc-list a:hover, .se-toc-list a:focus-visible { text-decoration: underline; }
.se-toc-list a.se-toc-active { color: var(--se-brand-primary); }
.se-toc-num { color: var(--se-brand-primary); }

/* ============================================
   CORPS DE L'ARTICLE
   ============================================ */
.se-article-body { max-width: var(--se-prose-width); margin: 0 auto; font-family: var(--se-font-body); color: var(--se-text-body); font-size: 15px; line-height: 1.7; }
.se-article-body h2 { font-family: var(--se-font-heading); font-size: 23px; font-weight: 800; color: var(--se-brand-dark); margin-top: 45px; margin-bottom: 20px; border-bottom: 2px solid var(--se-border); padding-bottom: 8px; letter-spacing: -.01em; }
.se-article-body h2 .se-h2-index { color: var(--se-brand-primary); font-family: var(--se-font-mono); }
.se-article-body h3 { font-size: 18px; font-weight: 700; color: var(--se-brand-dark); margin-top: 25px; margin-bottom: 12px; }
.se-article-body p { margin: 0 0 20px; }
.se-article-body ul, .se-article-body ol { padding-left: 22px; margin: 0 0 25px; font-size: 14.5px; line-height: 1.7; }
.se-article-body li { margin-bottom: 10px; }
.se-article-body li:last-child { margin-bottom: 0; }
.se-article-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 20px 0; }
.se-article-body th { background: var(--se-brand-dark); color: #fff; padding: 10px 14px; text-align: left; font-family: var(--se-font-mono); }
.se-article-body td { padding: 10px 14px; border-bottom: 1px solid var(--se-border); }
.se-article-body a { color: var(--se-info); font-weight: 700; }
.se-article-body a:hover, .se-article-body a:focus-visible { text-decoration: underline; }
.se-article-body strong { color: var(--se-brand-dark); }

/* --- Équation / callout technique --- */
.se-callout { background: var(--se-bg-alt); border-left: 4px solid var(--se-brand-primary); padding: 15px 20px; margin: 20px 0; font-family: var(--se-font-mono); font-size: 14px; color: var(--se-brand-dark); }
.se-callout strong { color: var(--se-brand-primary); }

/* --- Barre de progression comparative (données sourcées uniquement) --- */
.se-progress-card { background: var(--se-bg-alt); border: 1px solid var(--se-border); padding: 24px; border-radius: var(--se-radius); margin: 30px 0; }
.se-progress-card h3 { margin: 0 0 15px; font-size: 14px; font-weight: 700; color: var(--se-brand-dark); text-transform: uppercase; letter-spacing: .02em; font-family: var(--se-font-mono); }
.se-progress-item { margin-bottom: 20px; }
.se-progress-item:last-of-type { margin-bottom: 10px; }
.se-progress-label { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; color: var(--se-text-muted); font-weight: 500; gap: 12px; }
.se-progress-track { background: #e2e8f0; height: 10px; border-radius: 2px; overflow: hidden; width: 100%; }
.se-progress-fill { height: 100%; background: var(--se-brand-primary); }
.se-progress-fill.se-fill-success { background: var(--se-success); }
.se-progress-fill.se-fill-warning { background: var(--se-warning); }
.se-progress-fill.se-fill-danger { background: var(--se-danger); }
.se-progress-note { font-size: 11.5px; color: var(--se-text-muted); margin-top: 12px; margin-bottom: 0; font-style: italic; }

/* --- Accordéon FAQ natif (details/summary — zéro JS) --- */
.se-article-body details { background: var(--se-bg-alt); border: 1px solid var(--se-border); border-radius: var(--se-radius); margin-bottom: 12px; }
.se-article-body summary { padding: 16px; font-weight: 700; cursor: pointer; color: var(--se-brand-dark); font-size: 14.5px; font-family: var(--se-font-mono); list-style: none; }
.se-article-body summary::-webkit-details-marker { display: none; }
.se-article-body summary::after { content: '→'; float: right; color: var(--se-brand-primary); }
.se-article-body details[open] summary::after { content: '↓'; }
.se-article-body details > div { padding: 0 20px 20px; border-top: 1px solid var(--se-border); font-size: 13.5px; }
.se-article-body summary:focus-visible { outline: 2px solid var(--se-info); outline-offset: 2px; }

/* --- Citation experte (voir docs/expertise/personnages-cites.md) --- */
.se-expert-quote { background: var(--se-bg-alt); border-left: 4px solid var(--se-brand-primary); padding: 24px; border-radius: var(--se-radius); margin: 25px 0; }
.se-expert-quote p { font-style: italic; font-weight: 500; margin: 0 0 12px; }
.se-quote-author { font-size: 12px; font-weight: 700; color: var(--se-brand-primary); text-transform: uppercase; font-family: var(--se-font-mono); font-style: normal !important; }

/* --- Bandeau alerte constructeur --- */
.se-alert { background: #fff1f2; border: 1px solid #fecdd3; border-left: 4px solid var(--se-brand-primary); padding: 20px; border-radius: var(--se-radius); margin: 30px 0; }
.se-alert strong { color: var(--se-brand-primary); font-family: var(--se-font-mono); text-transform: uppercase; font-size: 13px; display: block; margin-bottom: 6px; }

/* --- Micro-CTA contextuel (pont interne mid-article, plus léger que la bannière) --- */
.se-inline-cta { background: #fffbeb; border-left: 4px solid var(--se-brand-primary); padding: 20px; border-radius: 0 var(--se-radius) var(--se-radius) 0; margin: 30px 0; }
.se-inline-cta h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--se-brand-primary); }
.se-inline-cta p { font-size: 13.5px; color: #78350f; margin: 0 0 15px; line-height: 1.5; }
.se-inline-cta a { background: var(--se-brand-primary); color: #fff !important; text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 8px 18px; border-radius: 3px; display: inline-block; }
.se-inline-cta a:focus-visible { outline: 2px solid var(--se-brand-dark); outline-offset: 2px; }

/* --- Onglets (JS vanilla, voir bullish-components.js) --- */
.se-tabs-container { margin: 25px 0; }
.se-tabs-nav { display: flex; gap: 8px; border-bottom: 2px solid var(--se-border); margin-bottom: 16px; flex-wrap: wrap; }
.se-tab { background: none; border: none; padding: 8px 16px; cursor: pointer; font-family: var(--se-font-heading); font-weight: 600; color: var(--se-text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.se-tab:focus-visible { outline: 2px solid var(--se-info); outline-offset: 2px; }
.se-tab.se-tab-active { color: var(--se-brand-primary); border-bottom-color: var(--se-brand-primary); }
.se-tab-content { display: none; }
.se-tab-content.se-tab-content-active { display: block; }

/* --- Badge de tendance --- */
.se-trend-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; font-family: var(--se-font-mono); }
.se-trend-up { background: rgba(22,163,74,.12); color: var(--se-success); }
.se-trend-down { background: rgba(239,68,68,.12); color: var(--se-danger); }
.se-trend-new { background: rgba(185,28,28,.12); color: var(--se-brand-primary); }
.se-trend-stable { background: rgba(100,116,139,.12); color: var(--se-text-muted); }

/* --- CTA banner --- */
.se-cta-banner { background: var(--se-brand-dark); color: #fff; padding: 44px 32px; border-radius: var(--se-radius); text-align: center; margin: 44px 0; border-top: 4px solid var(--se-brand-primary); }
.se-cta-banner h3 { font-family: var(--se-font-mono); font-size: 19px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; color: #fff; }
.se-cta-banner p { color: #cbd5e1; max-width: 720px; margin: 0 auto 24px; font-size: 14px; line-height: 1.6; }
.se-cta-btn { background: var(--se-brand-primary); color: #fff !important; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 13px 32px; border-radius: 2px; display: inline-block; font-size: 13.5px; }
.se-cta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Articles liés : restyle le bloc natif Prestashop $samecats/$tagrelated
   (patché dans blog.tpl, ADR 0007) — plus de cartes codées en dur dans le
   contenu des articles. --- */
.se-related-posts { border-top: 1px solid var(--se-border); padding-top: 28px; margin-top: 48px; }
.se-related-posts h3 { font-family: var(--se-font-heading); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--se-brand-dark); margin: 0 0 20px; }
.se-related-grid { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; }
.se-related-card { flex: 1 1 220px; border: 1px solid var(--se-border); border-radius: var(--se-radius); padding: 14px 16px; text-decoration: none; color: var(--se-text-body); font-size: 13.5px; font-weight: 600; display: block; }
.se-related-card:hover, .se-related-card:focus-visible { border-color: var(--se-brand-primary); }

/* --- Bloc commentaires natif Leo Blog : alignement minimal de largeur
   pour rester dans le rythme visuel de la page (le module reste actif ou
   non par choix de Julien en back-office, voir instructions-depot-ftp-
   julien.md — ceci ne fait qu'aligner sa largeur si actif). --- */
.blog-comment-block { max-width: var(--se-prose-width); margin: 40px auto 0; }

/* --- Largeurs utilitaires pour .se-progress-fill (évite le style inline
   sur une donnée qui varie par instance — ADR 0007, zéro style inline sans
   exception). Pas de préprocesseur sur ce projet (pas de build local) :
   les 100 classes sont écrites à la main une fois pour toutes. --- */
.se-w-1{width:1%}.se-w-2{width:2%}.se-w-3{width:3%}.se-w-4{width:4%}.se-w-5{width:5%}
.se-w-6{width:6%}.se-w-7{width:7%}.se-w-8{width:8%}.se-w-9{width:9%}.se-w-10{width:10%}
.se-w-11{width:11%}.se-w-12{width:12%}.se-w-13{width:13%}.se-w-14{width:14%}.se-w-15{width:15%}
.se-w-16{width:16%}.se-w-17{width:17%}.se-w-18{width:18%}.se-w-19{width:19%}.se-w-20{width:20%}
.se-w-21{width:21%}.se-w-22{width:22%}.se-w-23{width:23%}.se-w-24{width:24%}.se-w-25{width:25%}
.se-w-26{width:26%}.se-w-27{width:27%}.se-w-28{width:28%}.se-w-29{width:29%}.se-w-30{width:30%}
.se-w-31{width:31%}.se-w-32{width:32%}.se-w-33{width:33%}.se-w-34{width:34%}.se-w-35{width:35%}
.se-w-36{width:36%}.se-w-37{width:37%}.se-w-38{width:38%}.se-w-39{width:39%}.se-w-40{width:40%}
.se-w-41{width:41%}.se-w-42{width:42%}.se-w-43{width:43%}.se-w-44{width:44%}.se-w-45{width:45%}
.se-w-46{width:46%}.se-w-47{width:47%}.se-w-48{width:48%}.se-w-49{width:49%}.se-w-50{width:50%}
.se-w-51{width:51%}.se-w-52{width:52%}.se-w-53{width:53%}.se-w-54{width:54%}.se-w-55{width:55%}
.se-w-56{width:56%}.se-w-57{width:57%}.se-w-58{width:58%}.se-w-59{width:59%}.se-w-60{width:60%}
.se-w-61{width:61%}.se-w-62{width:62%}.se-w-63{width:63%}.se-w-64{width:64%}.se-w-65{width:65%}
.se-w-66{width:66%}.se-w-67{width:67%}.se-w-68{width:68%}.se-w-69{width:69%}.se-w-70{width:70%}
.se-w-71{width:71%}.se-w-72{width:72%}.se-w-73{width:73%}.se-w-74{width:74%}.se-w-75{width:75%}
.se-w-76{width:76%}.se-w-77{width:77%}.se-w-78{width:78%}.se-w-79{width:79%}.se-w-80{width:80%}
.se-w-81{width:81%}.se-w-82{width:82%}.se-w-83{width:83%}.se-w-84{width:84%}.se-w-85{width:85%}
.se-w-86{width:86%}.se-w-87{width:87%}.se-w-88{width:88%}.se-w-89{width:89%}.se-w-90{width:90%}
.se-w-91{width:91%}.se-w-92{width:92%}.se-w-93{width:93%}.se-w-94{width:94%}.se-w-95{width:95%}
.se-w-96{width:96%}.se-w-97{width:97%}.se-w-98{width:98%}.se-w-99{width:99%}.se-w-100{width:100%}

/* --- Responsive --- */
@media (max-width: 767px) {
  .se-hero-meta-band { flex-direction: column; align-items: flex-start; }
  .se-tabs-nav { overflow-x: auto; }
  .se-article-body table { display: block; overflow-x: auto; }
  .se-toc-list { grid-template-columns: 1fr; }
}