/* ============================================================
   AquaLED Home — « Le Banc Optique » (Direction A)
   Tout scopé sous #al-home pour ne pas percuter global.css.
   ============================================================ */
#al-home{
  --al-paper:#F8FAFB; --al-surface:#FFFFFF; --al-reef:#0B1B2E; --al-reef2:#0B2A4A;
  --al-ink:#0E1824; --al-soft:#5B6B7A; --al-hair:#E4EAF0;
  --al-cyan:#0AA9C7; --al-cyan-text:#0B6E93; --al-cyan-pop:#22C6E0;
  --al-coral:#FF6A4D; --al-coral-text:#C6412A;
  --al-green:#067A66; --al-green-pill:#16B98A; --al-alert:#D93A2B;
  --al-reef-ink:#EAF1F6; --al-reef-soft:#9FB4C6; --al-reef-hair:rgba(255,255,255,.12);
  --al-spectrum:linear-gradient(90deg,#6B4BD6 0%,#3B6BE0 18%,#22C6E0 40%,#16B98A 58%,#E8C33A 78%,#FF6A4D 100%);
  --al-mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  --al-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --al-wrap:1360px;
  background:var(--al-paper); color:var(--al-ink);
  font-family:var(--al-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
#al-home *{box-sizing:border-box}
#al-home h1,#al-home h2,#al-home h3,#al-home h4{margin:0; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--al-ink); font-family:var(--al-sans)}
/* reset du style de titre du thème (#center_column h2 : fond cyan + padding) qui bave sur les h1/h2 */
#al-home h1,#al-home h2{background:none !important; padding:0 !important; color:var(--al-ink) !important; text-transform:none !important}
#al-home .al-path-reef h2,#al-home .al-reefband h2{color:var(--al-reef-ink) !important}
#al-home p{margin:0}
#al-home img{max-width:100%; height:auto}
#al-home a{color:var(--al-cyan-text); text-decoration:none}
#al-home a:hover{text-decoration:none}
#al-home .al-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
#al-home .al-wrap{max-width:var(--al-wrap); margin:0 auto; padding:0 16px}
#al-home .al-block{padding:64px 0}
#al-home .al-surface{background:var(--al-surface); border-top:1px solid var(--al-hair); border-bottom:1px solid var(--al-hair)}

/* ---------- SIGNATURE : eyebrow à repère ---------- */
#al-home .al-eyebrow{font-family:var(--al-mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--al-cyan-text); display:inline-flex; align-items:center; gap:10px}
#al-home .al-eyebrow::before{content:""; width:22px; height:2px; background:var(--al-cyan); border-radius:2px}
#al-home .al-eyebrow.reef{color:var(--al-coral)}
#al-home .al-eyebrow.reef::before{background:var(--al-coral)}

/* ---------- SIGNATURE : fil de spectre (divider) ---------- */
#al-home .al-wl{display:flex; align-items:center; gap:18px; margin:14px 0 30px}
#al-home .al-wl::before,#al-home .al-wl::after{content:""; height:1px; background:var(--al-hair); flex:1}
#al-home .al-wl .m{display:inline-flex; align-items:center; gap:12px; font-family:var(--al-mono); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--al-ink); white-space:nowrap; text-transform:none}
#al-home .al-wl .thread{width:64px; height:3px; border-radius:3px; background:var(--al-spectrum); flex:none}
#al-home .al-wl.left{justify-content:flex-start}
#al-home .al-wl.left::before{display:none}
#al-home .al-wl.left::after{max-width:160px}

/* ---------- SIGNATURE : cadre à repères ---------- */
#al-home .al-frame{position:relative; background:var(--al-surface); border:1px solid var(--al-hair); border-radius:4px}
#al-home .al-frame::before,#al-home .al-frame::after{content:""; position:absolute; width:15px; height:15px; pointer-events:none; transition:width .2s ease, height .2s ease}
#al-home .al-frame::before{top:-1px; left:-1px; border-top:2px solid var(--al-cyan); border-left:2px solid var(--al-cyan); border-top-left-radius:4px}
#al-home .al-frame::after{bottom:-1px; right:-1px; border-bottom:2px solid var(--al-cyan); border-right:2px solid var(--al-cyan); border-bottom-right-radius:4px}
#al-home a.al-frame:hover::before,#al-home a.al-frame:hover::after,#al-home .al-frame:hover::before,#al-home .al-frame:hover::after{width:24px; height:24px}
#al-home .al-frame .al-idx{font-family:var(--al-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-soft); display:block; margin-bottom:12px}
/* variante récif : fond bleu nuit, repères cyan pop */
#al-home .al-path-reef{background:radial-gradient(120% 120% at 75% 8%,var(--al-reef2),var(--al-reef)); border-color:var(--al-reef-hair); color:var(--al-reef-ink); box-shadow:inset 0 0 70px rgba(34,198,224,.08)}
#al-home .al-path-reef::before,#al-home .al-path-reef::after{border-color:var(--al-cyan-pop)}
#al-home .al-path-reef .al-idx{color:var(--al-reef-soft)}
#al-home .al-path-reef p,#al-home .al-path-reef h2,#al-home .al-path-reef h3{color:var(--al-reef-ink)}
/* variante phare : fil de spectre en arête haute */
#al-home .al-flag{background:var(--al-spectrum) top left / 100% 2px no-repeat, var(--al-surface)}
#al-home .al-flag.al-path-reef{background:var(--al-spectrum) top left / 100% 2px no-repeat, radial-gradient(120% 120% at 75% 8%,var(--al-reef2),var(--al-reef))}

/* ---------- placeholders visuels (pas d'images) ---------- */
#al-home .al-ph{display:block; border-radius:6px; min-height:150px; background:linear-gradient(160deg,var(--al-surface),#F0F3F6); border:1px solid var(--al-hair)}
#al-home .al-ph-douce{background:linear-gradient(160deg,#FFFFFF,#EAF6F0)}
#al-home .al-ph-reef{background:radial-gradient(130% 130% at 65% 20%,var(--al-reef2),var(--al-reef)); border-color:var(--al-reef-hair); box-shadow:inset 0 0 80px rgba(34,198,224,.12)}
#al-home .al-ph-prod{background:linear-gradient(160deg,#FFFFFF,#F0F3F6); min-height:170px}

/* ---------- boutons ---------- */
#al-home .al-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--al-sans); font-weight:600; font-size:15px; line-height:1; padding:14px 22px; border-radius:4px; border:1px solid transparent; cursor:pointer; min-height:44px; text-decoration:none; transition:background .15s,border-color .15s,color .15s}
#al-home .al-btn svg{width:16px; height:16px}
#al-home .al-btn-primary{background:var(--al-cyan); color:#0E1824; border-color:var(--al-cyan)}
#al-home .al-btn-primary:hover{background:var(--al-cyan-text); border-color:var(--al-cyan-text); color:#fff}
#al-home .al-btn-reef{background:var(--al-cyan-pop); color:#06131f; border-color:var(--al-cyan-pop)}
#al-home .al-btn-reef:hover{background:#3ad3ea; border-color:#3ad3ea; color:#06131f}
#al-home .al-btn-full{width:100%}
#al-home .al-btn-sm{min-height:40px; padding:10px 16px; font-size:14px}
#al-home .al-link{font-family:var(--al-sans); font-weight:600; font-size:14px; color:var(--al-cyan-text); display:inline-flex; align-items:center; gap:6px}
#al-home .al-link svg{width:14px; height:14px}

/* ---------- HERO ---------- */
#al-home .al-hero{padding:56px 0 56px}
#al-home .al-hero-top{display:grid; grid-template-columns:1.08fr .92fr; gap:32px; align-items:center; margin-bottom:32px}
#al-home .al-hero-intro{min-width:0}
#al-home .al-hero-sig{padding:22px 22px 20px; align-self:stretch; display:flex; flex-direction:column; justify-content:center}
#al-home .al-hero-sig .al-idx{margin-bottom:6px}
#al-home .al-hero-spectrum{margin:8px 0 14px}
#al-home .al-hero-spectrum svg{width:100%; height:auto; display:block}
#al-home .al-h1{font-size:clamp(34px,5vw,54px); margin-top:14px; text-wrap:balance}
#al-home .al-lede{color:var(--al-soft); font-size:19px; font-weight:400; max-width:60ch; margin-top:16px}
#al-home .al-proof{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; padding-top:18px; border-top:1px solid var(--al-hair)}
#al-home .al-pf{display:inline-flex; align-items:baseline; gap:7px; font-family:var(--al-mono); font-size:13px; color:var(--al-soft)}
#al-home .al-pf b{color:var(--al-ink); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums}
#al-home .al-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:12px}
#al-home .al-path{padding:28px; display:flex; flex-direction:column}
#al-home .al-path .al-ph{margin:0 0 22px}
#al-home .al-path h3{font-size:26px; margin:0 0 8px}
#al-home .al-path p{color:var(--al-soft); margin-bottom:20px}
#al-home .al-path .al-btn{margin-top:auto}
#al-home .al-path-reef p{color:var(--al-reef-soft)}
#al-home .al-specs{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:22px}
#al-home .al-si{display:flex; flex-direction:column}
#al-home .al-si .v{font-family:var(--al-mono); font-size:22px; font-weight:600; color:var(--al-cyan-pop)}
#al-home .al-si .l{font-family:var(--al-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--al-reef-soft)}

/* ---------- BANDEAU STATS ---------- */
#al-home .al-stats-band{background:var(--al-surface); border-top:1px solid var(--al-hair); border-bottom:1px solid var(--al-hair); padding:40px 0}
#al-home .al-stats-lead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
#al-home .al-stats-lead h2{font-size:24px; max-width:34ch}
#al-home .al-note{font-family:var(--al-mono); font-size:11px; letter-spacing:.04em; color:var(--al-soft)}
#al-home .al-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
#al-home .al-stat{padding:2px 28px; border-left:1px solid var(--al-hair)}
#al-home .al-stat:first-child{border-left:0; padding-left:0}
#al-home .al-stat .v{font-family:var(--al-mono); font-size:40px; font-weight:600; color:var(--al-ink); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
#al-home .al-stat .v .u{font-size:16px; color:var(--al-soft); margin-left:3px; font-weight:600}
#al-home .al-stat .l{font-family:var(--al-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--al-soft); margin-top:12px; line-height:1.5}

/* ---------- UNIVERS ---------- */
#al-home .al-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
#al-home .al-tile{padding:24px; display:flex; flex-direction:column; color:var(--al-ink)}
#al-home .al-tile .al-ic{width:44px; height:44px; border-radius:6px; border:1px solid var(--al-hair); display:flex; align-items:center; justify-content:center; color:var(--al-cyan-text); margin-bottom:16px}
#al-home .al-tile .al-ic svg{width:22px; height:22px}
#al-home .al-tile-reef .al-ic{color:var(--al-coral-text)}
#al-home .al-tile-douce .al-ic{color:var(--al-green)}
#al-home .al-tile h3{font-size:20px; margin-bottom:8px}
#al-home .al-tile p{color:var(--al-soft); font-size:14px; margin-bottom:16px; flex:1; font-family:var(--al-mono)}

/* ---------- CONFIGURATEUR ---------- */
#al-home .al-config{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:stretch}
#al-home .al-config-panel{padding:28px}
#al-home .al-cfg-step{margin-bottom:22px}
#al-home .al-cfg-step:last-child{margin-bottom:0}
#al-home .al-cfg-step .stepnum{font-family:var(--al-mono); font-size:12px; color:var(--al-cyan-text); letter-spacing:.08em; display:block; margin-bottom:10px}
#al-home .al-chips{display:flex; gap:8px; flex-wrap:wrap}
#al-home .al-chip{font-family:var(--al-sans); font-size:14px; padding:9px 14px; border:1px solid var(--al-hair); border-radius:4px; background:var(--al-paper); color:var(--al-ink); cursor:pointer; min-height:40px; display:inline-flex; align-items:center; gap:8px}
#al-home .al-chip:hover{border-color:var(--al-cyan-text)}
#al-home .al-chip.on{border-color:var(--al-cyan); background:color-mix(in srgb,var(--al-cyan) 12%,transparent); font-weight:600}
#al-home .al-chip.on::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--al-cyan)}
#al-home .al-cfg-reco{padding:28px; display:flex; flex-direction:column}
#al-home .al-cfg-reco h3{font-size:22px; margin:6px 0 10px}
#al-home .al-cfg-reco p{color:var(--al-reef-soft); font-size:14.5px; margin-bottom:18px}
#al-home .al-cfg-reco .al-btn{margin-top:auto}

/* ---------- GUIDES ---------- */
#al-home .al-guides{display:grid; grid-template-columns:1.12fr .88fr; gap:16px}
#al-home .al-gfeat{padding:28px; display:flex; flex-direction:column}
#al-home .al-gfeat h3{font-size:26px; margin:14px 0 10px; text-wrap:balance}
#al-home .al-gfeat p{color:var(--al-soft); font-size:15px; max-width:48ch}
#al-home .al-spectrum{margin:22px 0; border:1px solid var(--al-hair); border-radius:6px; background:var(--al-paper); padding:14px}
#al-home .al-spectrum svg{width:100%; height:auto; display:block}
#al-home .al-gmeta{font-family:var(--al-mono); font-size:11px; color:var(--al-soft); display:flex; gap:16px; margin-top:auto; padding-top:16px}
#al-home .al-glist{display:flex; flex-direction:column; gap:16px}
#al-home .al-gitem{padding:20px 22px; display:flex; flex-direction:column; justify-content:center; flex:1}
#al-home .al-glabel{font-family:var(--al-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:9px; color:var(--al-cyan-text)}
#al-home .al-tile-reef .al-glabel{color:var(--al-coral-text)}
#al-home .al-tile-douce .al-glabel{color:var(--al-green)}
#al-home .al-gitem h4{font-size:18px; margin-bottom:6px}
#al-home .al-gitem p{color:var(--al-soft); font-size:13.5px}

/* ---------- SECHEAD (titre + lien) ---------- */
#al-home .al-sechead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px}
#al-home .al-sechead .al-wl{margin:12px 0 0}

/* ---------- PRODUITS ---------- */
#al-home .al-pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
#al-home .al-pcard{display:flex; flex-direction:column; overflow:hidden}
#al-home .al-pmedia{position:relative; display:block; border-bottom:1px solid var(--al-hair); background:var(--al-surface)}
#al-home .al-pmedia img{width:100%; aspect-ratio:1/1; object-fit:contain; padding:14px; display:block}
#al-home .al-pmedia .al-ph{border:0; border-radius:0}
#al-home .al-badge{position:absolute; top:10px; left:10px; z-index:2; font-family:var(--al-mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:2px}
#al-home .al-badge-promo{background:var(--al-coral); color:#fff}
#al-home .al-pbody{padding:16px; display:flex; flex-direction:column; flex:1}
#al-home .al-pbrand{font-family:var(--al-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--al-soft); margin-bottom:4px}
#al-home .al-pcard h3{font-size:16px; line-height:1.3; margin-bottom:8px}
#al-home .al-pcard h3 a{color:var(--al-ink)}
#al-home .al-psignal{display:inline-flex; align-items:center; gap:7px; font-family:var(--al-mono); font-size:11.5px; letter-spacing:.03em; color:var(--al-cyan-text); margin-bottom:10px}
#al-home .al-psignal svg{width:13px; height:13px; flex:none}
#al-home .al-stock{font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px; margin-bottom:12px}
#al-home .al-stock .dot{width:8px; height:8px; border-radius:50%}
#al-home .al-stock.in{color:var(--al-green)}
#al-home .al-stock.in .dot{background:var(--al-green-pill)}
#al-home .al-stock.out{color:var(--al-soft)}
#al-home .al-stock.out .dot{background:var(--al-soft)}
#al-home .al-price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto; margin-bottom:12px}
#al-home .al-price{font-family:var(--al-mono); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--al-ink)}
#al-home .al-old{font-family:var(--al-mono); font-size:13px; color:var(--al-soft); text-decoration:line-through}

/* ---------- BANDEAU RÉCIFAL ---------- */
#al-home .al-reefband{padding:40px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center}
#al-home .al-reefband h2{font-size:33px; color:var(--al-reef-ink); text-wrap:balance}
#al-home .al-reefband p{color:var(--al-reef-soft); margin:14px 0 20px; max-width:52ch}
#al-home .al-reef-brands{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
#al-home .al-reef-brands span{font-family:var(--al-mono); font-size:12px; color:var(--al-reef-soft); border:1px solid var(--al-reef-hair); border-radius:2px; padding:5px 9px}
#al-home .al-reef-spectrum{background:rgba(8,20,34,.4); border:1px solid var(--al-reef-hair); border-radius:6px; padding:16px}
#al-home .al-reef-spectrum svg{width:100%; height:auto; display:block}
#al-home .al-splegend{display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-family:var(--al-mono); font-size:11.5px; color:var(--al-reef-soft)}
#al-home .al-splegend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle}
#al-home .al-splegend b{color:var(--al-reef-ink); font-weight:600}

/* ---------- MARQUES ---------- */
#al-home .al-brands{display:grid; grid-template-columns:repeat(7,1fr); gap:12px}
#al-home .al-brandchip{min-height:80px; display:flex; align-items:center; justify-content:center; padding:14px 10px; background:var(--al-surface)}
#al-home .al-brandchip img{max-height:44px; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.72; transition:filter .15s,opacity .15s}
#al-home .al-brandchip:hover img{filter:grayscale(0); opacity:1}
#al-home .al-brandchip .bm{font-weight:700; font-size:15px; letter-spacing:-.02em; color:var(--al-ink); text-align:center}

/* ---------- BLOG ---------- */
#al-home .al-bloggrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
#al-home .al-bcard{display:flex; flex-direction:column; overflow:hidden}
#al-home .al-bcard .al-pmedia img{aspect-ratio:16/10; object-fit:cover; padding:0}
#al-home .al-bcard .al-ph{min-height:170px; border:0; border-radius:0}
#al-home .al-bbody{padding:20px; display:flex; flex-direction:column; flex:1}
#al-home .al-bcat{font-family:var(--al-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--al-cyan-text); margin-bottom:10px}
#al-home .al-bcard h3{font-size:19px; margin-bottom:8px}
#al-home .al-bcard h3 a{color:var(--al-ink)}
#al-home .al-bcard p{color:var(--al-soft); font-size:14px; margin-bottom:16px; flex:1}
#al-home .al-bmeta{font-family:var(--al-mono); font-size:11px; color:var(--al-soft)}

/* ---------- RÉASSURANCE ---------- */
#al-home .al-reass{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
#al-home .al-rblock{padding:24px}
#al-home .al-rblock .al-ic{width:40px; height:40px; border:1px solid var(--al-hair); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--al-cyan-text); margin-bottom:16px}
#al-home .al-rblock .al-ic svg{width:20px; height:20px}
#al-home .al-rblock h4{font-size:16px; margin-bottom:8px}
#al-home .al-rblock p{color:var(--al-soft); font-size:14px}

/* ---------- NEWSLETTER ---------- */
#al-home .al-news{padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center}
#al-home .al-news h2{font-size:28px; margin-top:10px}
#al-home .al-news p{color:var(--al-soft); margin-top:10px; max-width:44ch}
#al-home .al-newsform{display:flex; gap:10px; flex-wrap:wrap}
#al-home .al-newsform input{flex:1; min-width:200px; height:48px; border:1px solid var(--al-hair); border-radius:4px; background:var(--al-paper); padding:0 16px; font-family:var(--al-sans); font-size:15px; color:var(--al-ink)}
#al-home .al-newsform input:focus{outline:2px solid var(--al-cyan); outline-offset:1px; border-color:var(--al-cyan)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  #al-home .al-tiles,#al-home .al-pgrid,#al-home .al-reass,#al-home .al-stats{grid-template-columns:repeat(2,1fr)}
  #al-home .al-stat{padding:2px 20px}
  #al-home .al-stat:nth-child(3){border-left:0; padding-left:0}
  #al-home .al-brands{grid-template-columns:repeat(4,1fr)}
  #al-home .al-bloggrid{grid-template-columns:1fr 1fr}
  #al-home .al-hero-top,#al-home .al-hero-grid,#al-home .al-config,#al-home .al-guides,#al-home .al-reefband,#al-home .al-news{grid-template-columns:1fr}
}
@media (max-width:640px){
  #al-home .al-block{padding:44px 0}
  #al-home .al-hero{padding:36px 0 44px}
  #al-home .al-tiles,#al-home .al-pgrid,#al-home .al-reass,#al-home .al-bloggrid,#al-home .al-stats,#al-home .al-brands{grid-template-columns:1fr}
  #al-home .al-stat{border-left:0; padding-left:0; padding-right:0}
  #al-home .al-wl .m{font-size:17px; white-space:normal}
  #al-home .al-reefband{padding:26px}
}
@media (prefers-reduced-motion:reduce){
  #al-home .al-frame::before,#al-home .al-frame::after{transition:none}
}