/* base.css — tronc commun des maquettes.
 * Généré par _tools/build_base_css.php. Ne pas éditer à la main :
 * modifier la maquette source puis relancer l'outil.
 */
:root{
    --ink:#0f161b;
    --ink-soft:#3d4a52;
    --bone:#eef1f3;
    --cream:#f7f8fa;
    --paper:#ffffff;
  --surface:#ffffff;
    --line:rgba(15,22,27,.13);
    --line-soft:rgba(15,22,27,.07);
    --accent:#17a3ec;
    --accent-deep:#0d77bd;
    --accent-soft:#e3f1fb;
    --grad:linear-gradient(180deg,#46b6f0,#1488cc);
    --glow:0 0 44px rgba(23,163,236,.45);
    --dark:#0a1116;
    --dark2:#070d11;
    --shadow:0 24px 60px -28px rgba(12,40,58,.5);
    --r:14px;
    --maxw:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Hanken Grotesk",-apple-system,sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:"Jost",-apple-system,sans-serif;font-weight:400;line-height:1.08;letter-spacing:-.005em}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-family:"Jost",sans-serif;font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:var(--accent-deep);
    display:inline-flex;align-items:center;gap:11px}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}

  /* ---------- glass mullion motif ---------- */
  .mullions{position:absolute;inset:0;pointer-events:none;
    background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(11.111% - 1px),rgba(255,255,255,.16) calc(11.111% - 1px),rgba(255,255,255,.16) 11.111%);
    z-index:1;mix-blend-mode:overlay}

  /* ---------- header ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .35s ease;background:transparent}
  header.scrolled, body.sans-hero header{background:rgba(250,247,241,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);box-shadow:0 6px 24px -18px rgba(0,0,0,.35)}
  .topbar{background:var(--dark);color:rgba(255,255,255,.9);font-family:"Jost",sans-serif;font-size:.82rem;letter-spacing:.02em;line-height:1.3;
    padding:9px 20px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}
  .topbar svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.8;flex:none}
  .topbar .hl{color:#5cc4f2;font-weight:600}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
  header.scrolled .nav, body.sans-hero header .nav{padding:10px 24px}
  @media(max-width:560px){.topbar{font-size:.71rem;padding:8px 12px;gap:7px}.topbar svg{width:14px;height:14px}}
  .brand{display:flex;align-items:center;gap:16px}
  .brand img{height:80px;width:auto;transition:height .35s}
  header.scrolled .brand img, body.sans-hero header .brand img{height:66px}
  .brand .logo-dark{display:none}
  header.scrolled .brand .logo-light, body.sans-hero header .brand .logo-light{display:none}
  header.scrolled .brand .logo-dark, body.sans-hero header .brand .logo-dark{display:block}
  @media(max-width:560px){.brand img{height:60px}}
  .brand-tag{font-family:"Jost",sans-serif;font-size:.76rem;line-height:1.5;letter-spacing:.03em;color:rgba(255,255,255,.85);padding-left:16px;border-left:1px solid rgba(255,255,255,.35);white-space:nowrap;transition:color .35s,border-color .35s}
  .brand-tag b{color:#86d3f6;font-weight:600;transition:color .35s}
  header.scrolled .brand-tag, body.sans-hero header .brand-tag{color:var(--ink-soft);border-color:var(--line)}
  header.scrolled .brand-tag b, body.sans-hero header .brand-tag b{color:var(--accent-deep)}
  .brand-tag{display:none}

/* ------------------------------------------------------------------
   Primitives partagees.
   .pad et .lede ne vivaient que dans accueil.css et seeglass_one.css :
   une page dont la feuille ne les portait pas perdait tout son rythme
   vertical. Meme cause que le header non style avant layout.css.
   .reveal n'est PAS ici a dessein : elle met l'opacite a zero et depend
   du JS d'une page pour se reveler. La generaliser rendrait invisible
   toute page sans ce JS.
   ------------------------------------------------------------------ */
.pad{padding:clamp(72px,9vw,128px) 0}
.lede{font-size:clamp(1.02rem,1.6vw,1.16rem);line-height:1.6;color:var(--ink-soft);max-width:68ch}

/* Cartes de conseils : posees sur l'accueil, reprises par le blog. */
.conseils-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:26px 0 24px}
.conseil{display:flex;flex-direction:column;gap:6px;padding:20px 22px;text-decoration:none;
  border:1px solid var(--line);border-radius:3px;background:var(--surface);
  transition:border-color .25s ease,transform .25s ease}
.conseil:hover{border-color:var(--accent);transform:translateY(-2px)}
.conseil-t{font-size:.97rem;line-height:1.35;color:var(--ink)}
.conseil-d{font-size:.78rem;color:var(--ink-soft)}
.conseils-plus{margin:0}

/* Les regles ci-dessus sont groupees avec « body.sans-hero header » :
 * le header est transparent au repos, concu pour se poser sur un grand
 * visuel sombre. Une page qui n'en a pas — le blog, la 404 — voyait son
 * contenu defiler sous un bandeau invisible. Elle porte « sans-hero » et
 * recoit donc en permanence l'aspect opaque. Grouper plutot que recopier :
 * une seule regle a modifier le jour ou la maquette change. */

/* ------------------------------------------------------------------
   Fil d'Ariane et voile de grand visuel.
   Employes par le blog, les pages produit et la 404 : ils appartiennent
   au socle, pas a la feuille d'une page. Les laisser dans blog.css les
   rendait absents partout ailleurs — fil sans espacement, titre illisible
   sur une image claire.
   ------------------------------------------------------------------ */
.fil{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.78rem;color:var(--ink-soft);margin:0 0 22px}
.fil a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{border-bottom-color:currentColor}
.fil span[aria-hidden]{opacity:.4}
.fil-clair{color:rgba(255,255,255,.72)}
.fil-clair a:hover{color:#fff}

.hero-voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,17,22,.72) 0%,rgba(8,17,22,.34) 28%,rgba(8,17,22,.6) 62%,rgba(8,17,22,.86) 100%)}

/* ------------------------------------------------------------------
   Pages produit converties depuis l'ancien site.

   Elles empruntent le vocabulaire de la maquette seeglass (.hero, .sec-head,
   .benefits, .spec-tile) et n'ajoutent que ce qui lui manque : du texte
   courant, des listes et un tableau technique — trois choses que la maquette
   n'avait pas a porter, ayant ete dessinee pour un seul produit.
   Ces regles vivent ici plutot que dans seeglass_one.css, qui reste la
   feuille de SA page.
   ------------------------------------------------------------------ */
.lead{font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.6;max-width:60ch}
.pr-logo{margin:0 0 14px}
.pr-logo img{height:clamp(32px,4vw,48px);width:auto;display:block}
.pr-p{font-size:1.02rem;line-height:1.72;color:var(--ink);margin:0 0 1.2em;max-width:72ch}
.pr-st{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.1rem,2.1vw,1.4rem);line-height:1.28;color:var(--ink);
  margin:2em 0 .6em}
.pr-liste{margin:0 0 1.4em;padding-left:1.3em;max-width:72ch}
.pr-liste li{margin:0 0 .5em;line-height:1.6}
.pr-liste li::marker{color:var(--accent)}

.pr-figure{margin:2em 0;max-width:860px}
.pr-figure img{width:100%;height:auto;display:block;border-radius:4px}
.pr-figure figcaption{font-size:.79rem;line-height:1.45;color:var(--ink-soft);margin-top:10px}

.pr-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));
  gap:12px;margin:2em 0}
.pr-gtile{overflow:hidden;border-radius:4px;background:var(--bone)}
.pr-gtile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pr-gtile:hover img{transform:scale(1.03)}

/* Le tableau defile dans sa propre boite : le corps de page ne doit jamais
   defiler lateralement. */
.pr-table-boite{overflow-x:auto;margin:1.6em 0 2em}
.pr-table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.pr-table th,.pr-table td{border:1px solid var(--line);padding:12px 14px;
  text-align:left;vertical-align:top;line-height:1.5}
.pr-table th[scope=row]{width:38%;font-weight:500;background:var(--cream);color:var(--ink)}
.pr-table-titre{font-family:"Jost",sans-serif;font-size:1.02rem;font-weight:500;
  background:var(--dark);color:#fff;border-color:var(--dark)}

.pr-devis{background:var(--dark);color:#fff}
.pr-devis .sec-head h2{color:#fff}
.pr-devis .sec-head p{color:rgba(255,255,255,.76)}
.pr-devis .eyebrow{color:#7fcdee}

@media (prefers-reduced-motion:reduce){.pr-gtile:hover img{transform:none}}

/* Carte d'atout dont l'image est un PICTO et non une photo : la maquette
   etire l'image sur toute la largeur de la carte, ce qui affichait des icones
   de 64 px en 370 px, floues. On les rend a leur echelle, en tete de carte. */
.bcard-picto{display:flex;flex-direction:column-reverse;justify-content:flex-end;
  gap:14px;padding:26px}
.bcard-picto .bimg{background:none;aspect-ratio:auto;height:auto;overflow:visible}
.bcard-picto .bimg img{width:52px;height:52px;object-fit:contain;display:block}
.bcard-picto .btitle{margin:0}