/* ============================================================
   Aerioss — aerioss.fr
   Thème : bleu ciel (#0274C2) + orange chaud (#D95F00)
   Différent de Noctura (violet/beige) et Pedalix (vert forêt)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:      #0274C2;
  --blue-dark: #015a9a;
  --blue-light:#E8F4FD;
  --orange:    #D95F00;
  --orange-lt: #FFF3EB;
  --text:      #1A2332;
  --text-muted:#5A6A7E;
  --bg:        #FAFCFF;
  --surface:   #FFFFFF;
  --border:    #D4E4F0;
  --radius:    8px;
  --shadow:    0 2px 12px rgba(2,116,194,.10);
  --max-w:     860px;
}

html { scroll-behavior: smooth; }
body { font-family: system-ui,-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--text); line-height:1.7; font-size:1rem; }

/* ── Layout ── */
.page-wrapper { display:flex; flex-direction:column; min-height:100vh; }
.page-main    { flex:1; max-width:var(--max-w); margin:0 auto; padding:1.5rem 1.25rem 3rem; width:100%; }

/* ── Header ── */
.site-header  { background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.header-inner { max-width:var(--max-w); margin:0 auto; padding:.75rem 1.25rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.site-logo    { display:flex; align-items:center; gap:.4rem; text-decoration:none; font-size:1.25rem; font-weight:800; color:var(--blue); }
.logo-icon    { font-size:1.4rem; }
.site-nav     { display:flex; gap:1.25rem; flex-wrap:wrap; }
.site-nav a   { text-decoration:none; color:var(--text-muted); font-size:.9rem; font-weight:500; transition:color .15s; }
.site-nav a:hover { color:var(--blue); }

/* ── Breadcrumb ── */
.breadcrumb   { font-size:.82rem; color:var(--text-muted); margin-bottom:1.25rem; display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; }
.breadcrumb a { color:var(--blue); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span[aria-hidden] { color:var(--border); margin:0 .15rem; }

/* ── Hero ── */
.hero-section   { margin-bottom:1.75rem; }
.hero-title     { font-size:1.9rem; font-weight:800; line-height:1.2; color:var(--text); margin-bottom:.75rem; }
.hero-intro     { font-size:1.05rem; color:var(--text-muted); max-width:72ch; }
.hero-meta      { margin-top:.6rem; font-size:.82rem; color:var(--text-muted); display:flex; gap:.75rem; flex-wrap:wrap; }

/* ── Verdict box ── */
.verdict-box    { background:var(--blue-light); border-left:4px solid var(--blue); border-radius:var(--radius); padding:1.1rem 1.4rem; margin-bottom:2rem; }
.verdict-label  { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--blue); margin-bottom:.4rem; }
.verdict-text   { font-size:1rem; line-height:1.65; }

.verdict-produit .verdict-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.verdict-score-global { display:flex; align-items:baseline; gap:.1rem; }
.score-number   { font-size:2rem; font-weight:900; color:var(--blue); }
.score-denom    { font-size:1rem; color:var(--text-muted); }
.btn-verdict    { display:inline-block; margin-top:.9rem; }

/* ── Picks / cards ── */
.picks-section  { margin-bottom:2.5rem; }
.products-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem; margin-top:1rem; }
.product-card   { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; position:relative; box-shadow:var(--shadow); transition:box-shadow .15s; }
.product-card:hover { box-shadow:0 4px 20px rgba(2,116,194,.16); }
.product-card.card--top { border-color:var(--blue); }
.card-badge     { position:absolute; top:.75rem; right:.75rem; background:var(--orange); color:#fff; font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:20px; }
.card-header    { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; margin-bottom:.5rem; }
.card-name      { font-weight:700; font-size:.95rem; line-height:1.3; }
.card-score     { font-size:.88rem; font-weight:700; color:var(--blue); white-space:nowrap; }
.card-desc      { font-size:.85rem; color:var(--text-muted); margin-bottom:.5rem; }
.card-price     { font-size:.9rem; font-weight:600; color:var(--orange); margin-bottom:.75rem; }
.card-ctas      { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Buttons ── */
.btn-buy, .btn-details {
  display:inline-block; padding:.55rem 1.1rem; border-radius:6px;
  font-size:.87rem; font-weight:600; text-decoration:none; text-align:center;
  transition:opacity .15s;
}
.btn-buy      { background:var(--orange); color:#fff; }
.btn-buy:hover { opacity:.88; }
.btn-details  { background:var(--blue-light); color:var(--blue); border:1px solid var(--blue); }
.btn-details:hover { background:var(--blue); color:#fff; }
.btn-large    { font-size:1rem; padding:.75rem 1.6rem; }

/* ── Scores barres ── */
.scores-section { margin-bottom:2rem; }
.scores-grid    { display:flex; flex-direction:column; gap:.7rem; margin-top:.75rem; }
.rating-bar     { display:grid; grid-template-columns:180px 1fr 60px; align-items:center; gap:.6rem; }
.rating-label   { font-size:.875rem; color:var(--text); }
.bar-track      { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.bar-fill       { height:100%; background:var(--blue); border-radius:4px; transition:width .3s ease; }
.bar-fill.bar-energie { background:#27AE60; }
.bar-fill.bar-prix    { background:var(--orange); }
.rating-value   { font-size:.85rem; font-weight:700; color:var(--text-muted); }

/* ── Pour qui / Pas pour qui ── */
.pour-qui-section { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; }
.pour-qui-bloc  { border-radius:var(--radius); padding:1rem 1.25rem; }
.pour-qui-bloc.pour   { background:#EAF7EE; border:1px solid #B5DFC0; }
.pour-qui-bloc.pas-pour { background:#FDF0EF; border:1px solid #F5C2BD; }
.pour-qui-title { font-size:.9rem; font-weight:700; margin-bottom:.6rem; }
.pour-title     { color:#1A7C3A; }
.pas-title      { color:#C0392B; }
.pour-qui-list  { list-style:none; padding:0; }
.pour-qui-list li { font-size:.875rem; padding:.25rem 0; padding-left:1.25rem; position:relative; }
.pour-qui-list li::before { content:"✓"; position:absolute; left:0; }
.pour-qui-bloc.pour .pour-qui-list li::before { color:#1A7C3A; }
.pour-qui-bloc.pas-pour .pour-qui-list li::before { content:"✗"; color:#C0392B; }

/* ── Specs table ── */
.specs-section  { margin-bottom:2rem; }
.specs-table    { width:100%; border-collapse:collapse; font-size:.9rem; }
.specs-table th,
.specs-table td { padding:.55rem .75rem; border:1px solid var(--border); text-align:left; vertical-align:top; }
.specs-table th { background:var(--blue-light); font-weight:600; width:40%; color:var(--blue-dark); }
.specs-table tr:nth-child(even) td { background:#F6FAFD; }

/* ── Contenu éditorial ── */
.page-content,
.article-content { margin-bottom:2.5rem; }
.page-content h2,
.article-content h2 { font-size:1.35rem; font-weight:700; margin:2rem 0 .75rem; color:var(--text); border-bottom:2px solid var(--blue-light); padding-bottom:.4rem; }
.page-content h3,
.article-content h3 { font-size:1.1rem; font-weight:700; margin:1.5rem 0 .5rem; color:var(--text); }
.page-content p,
.article-content p  { margin-bottom:1rem; }
.page-content ul,
.page-content ol,
.article-content ul,
.article-content ol { margin:0 0 1rem 1.4rem; }
.page-content li,
.article-content li { margin-bottom:.35rem; }
.page-content strong,
.article-content strong { color:var(--text); }
.page-content a,
.article-content a  { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

/* ── Pages statiques (homepage, about…) ── */
.home-section   { margin-bottom:2.5rem; }
.section-intro  { color:var(--text-muted); margin-bottom:1.25rem; }

/* ── Breadcrumb sémantique (ol/li) ── */
.breadcrumb ol  { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem; align-items:center; padding:0; margin:0; }
.breadcrumb li  { display:flex; align-items:center; gap:.25rem; }
.breadcrumb li + li::before { content:"›"; color:var(--border); margin-right:.15rem; }

/* Section titles (hors page-content) */
.section-title  { font-size:1.25rem; font-weight:700; margin-bottom:1rem; }

/* ── CTA block ── */
.cta-section    { text-align:center; margin:2rem 0; }
.cta-legal      { font-size:.78rem; color:var(--text-muted); margin-top:.5rem; }

/* ── Liens internes ── */
.related-section { margin-bottom:2rem; }
.related-list   { list-style:none; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.related-list li { font-size:.9rem; }
.related-list a  { color:var(--blue); text-decoration:none; font-weight:500; }
.related-list a:hover { text-decoration:underline; }
.link-desc      { color:var(--text-muted); font-size:.85rem; }

/* ── FAQ ── */
.faq-section    { margin-bottom:2.5rem; }
.faq-item       { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.5rem; overflow:hidden; background:var(--surface); }
.faq-question   { list-style:none; padding:.85rem 1.1rem; font-weight:600; font-size:.95rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-question::after { content:"▸"; font-size:.8rem; color:var(--blue); transition:transform .2s; flex-shrink:0; }
details[open] .faq-question::after { transform:rotate(90deg); }
.faq-answer     { padding:.75rem 1.1rem 1rem; font-size:.9rem; border-top:1px solid var(--border); }

/* ── Cookie banner ── */
.cookie-banner  { position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; z-index:200; box-shadow:0 -2px 12px rgba(0,0,0,.08); }
.cookie-banner p { font-size:.87rem; flex:1; min-width:200px; }
.cookie-banner a { color:var(--blue); }
.cookie-actions { display:flex; gap:.6rem; }
.btn-cookie     { padding:.4rem .9rem; border-radius:5px; font-size:.85rem; font-weight:600; cursor:pointer; border:none; }
.btn-accept     { background:var(--blue); color:#fff; }
.btn-refuse     { background:var(--blue-light); color:var(--blue); border:1px solid var(--blue); }

/* ── Footer ── */
.site-footer    { background:var(--text); color:#CBD5E1; margin-top:auto; }
.footer-inner   { max-width:var(--max-w); margin:0 auto; padding:2rem 1.25rem; }
.footer-brand   { font-size:.95rem; margin-bottom:.75rem; }
.footer-brand strong { color:#fff; }
.footer-nav     { display:flex; gap:1.25rem; flex-wrap:wrap; margin-bottom:.9rem; }
.footer-nav a   { color:#94A3B8; text-decoration:none; font-size:.88rem; }
.footer-nav a:hover { color:#fff; }
.footer-legal   { font-size:.78rem; color:#64748B; line-height:1.6; }
.footer-legal a { color:#94A3B8; }

/* ── Responsive ── */
@media (max-width:680px) {
  .hero-title       { font-size:1.5rem; }
  .products-grid    { grid-template-columns:1fr; }
  .pour-qui-section { grid-template-columns:1fr; }
  .rating-bar       { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .rating-label     { grid-column:1/-1; }
  .site-nav         { gap:.75rem; }
}

@media print {
  .site-header, .cookie-banner, .site-footer { display:none; }
  .page-main { max-width:100%; }
}