/* ============================================================
   Sol-elec Services — "Schéma électrique éditorial"
   Blueprint d'ingénieur + éditorial bold. Archivo Black / Space Mono / Hanken Grotesk.
   Bleu nuit + jaune électrique en aplats. Bords nets, ombres dures, en-têtes numérotés.
   ============================================================ */

:root {
  --ink:#0B0F1A;          /* presque noir bleuté */
  --ink-2:#0F1626;
  --blue:#1B4DFF;         /* bleu électrique vif */
  --blue-deep:#0A1B4D;
  --yellow:#FFD400;       /* jaune électricité */
  --yellow-deep:#E8C200;
  --paper:#F4F3EC;        /* fond clair chaud (pas blanc stérile) */
  --paper-2:#ECEBE2;
  --card:#FFFFFF;
  --line:rgba(11,15,26,.14);
  --line-2:rgba(11,15,26,.28);
  --grid-dark:rgba(120,160,255,.13);
  --grid-light:rgba(11,15,26,.05);
  --text:#1B2334;
  --muted:#6A7589;
  --d:'Archivo Black', Impact, sans-serif;     /* display */
  --m:'Space Mono', ui-monospace, monospace;   /* mono / labels */
  --b:'Hanken Grotesk', system-ui, sans-serif; /* body */
  --maxw:1200px;
}

/* ---------- Base ---------- */
body { font-family:var(--b); color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased; padding-top:74px !important; }
html { overflow-x:hidden; }
.sol-page { overflow-x:hidden; max-width:100%; }
.sol-wrap { max-width:var(--maxw); margin:0 auto; padding:0 26px; }
/* CLS : réserve l'espace de <main> avant que Angular n'y injecte le contenu */
main { display:block; min-height:100vh; }
h1,h2,h3,h4 { font-family:var(--d); font-weight:400; letter-spacing:-.01em; overflow-wrap:break-word; word-break:break-word; }
p { line-height:1.72; }
html { scroll-behavior:smooth; }
::selection { background:var(--yellow); color:var(--ink); }
*:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
* { scrollbar-color:var(--blue) #e3e3da; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-thumb { background:var(--blue); }
::-webkit-scrollbar-track { background:#e3e3da; }

/* trame blueprint réutilisable */
.bp-dark {
  background-color:var(--ink);
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size:34px 34px; }
.bp-light {
  background-image:linear-gradient(var(--grid-light) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid-light) 1px, transparent 1px);
  background-size:34px 34px; }

/* ============================================================
   NAVBAR — barre claire, type Hanken bold, CTA jaune carré
   ============================================================ */
.sol-nav { position:fixed; top:0; left:0; right:0; z-index:99999; background:var(--paper);
  border-bottom:2px solid var(--ink); transition:box-shadow .25s; }
.sol-nav.is-scrolled { box-shadow:0 6px 0 -2px rgba(11,15,26,.08); }
.sol-nav-inner { max-width:var(--maxw); margin:0 auto; height:74px; padding:0 26px; display:flex; align-items:center; gap:18px; }
.sol-nav-logo { display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 1 auto; min-width:0; }
.sol-nav-logo img { height:36px; flex:0 0 auto; }
.sol-nav-logo span { font-family:var(--d); font-size:17px; color:var(--ink); letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sol-nav-logo span b { color:var(--blue); }
.sol-nav-menu { list-style:none; display:flex; align-items:center; gap:2px; margin:0 0 0 auto; padding:0; }
.sol-nav-menu > li { position:relative; }
.sol-nav-menu > li > a { display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink);
  font-weight:700; font-size:14.5px; padding:9px 13px; transition:color .15s; white-space:nowrap; }
.sol-nav-menu > li > a:hover { color:var(--blue); }
.sol-nav-menu .active > a { color:var(--ink); position:relative; }
.sol-nav-menu .active > a::after { content:""; position:absolute; left:13px; right:13px; bottom:2px; height:4px; background:var(--yellow); }
.sol-nav-sub { list-style:none; position:absolute; top:calc(100% + 6px); left:0; min-width:284px; background:var(--card);
  border:2px solid var(--ink); padding:6px; margin:0; opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s; box-shadow:8px 8px 0 rgba(11,15,26,.12); }
.sol-nav-menu li.has-sub:hover .sol-nav-sub { opacity:1; visibility:visible; transform:translateY(0); }
.sol-nav-sub a { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; padding:11px 12px; }
.sol-nav-sub a i { color:var(--blue); width:18px; text-align:center; }
.sol-nav-sub a:hover { background:var(--ink); color:#fff; }
.sol-nav-sub a:hover i { color:var(--yellow); }
.sol-nav-sub .sol-sub-all a { color:var(--blue); }
.sol-nav-cta { flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--yellow); color:var(--ink); font-weight:800; font-size:14.5px; padding:11px 18px;
  border:2px solid var(--ink); transition:transform .12s, box-shadow .12s; white-space:nowrap; box-shadow:3px 3px 0 var(--ink); }
.sol-nav-cta:hover { transform:translate(-1px,-1px); color:var(--ink); box-shadow:5px 5px 0 var(--ink); }
.sol-nav-burger { display:none; flex:0 0 auto; margin-left:auto; background:var(--ink); color:var(--yellow); border:none; width:46px; height:42px; font-size:19px; cursor:pointer; align-items:center; justify-content:center; }

@media (max-width:1040px){
  .sol-nav-inner { height:64px; } body { padding-top:64px !important; }
  .sol-nav-burger { display:inline-flex; }
  .sol-nav-menu { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--paper); border-bottom:2px solid var(--ink); gap:0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s; box-shadow:0 14px 24px rgba(11,15,26,.18); }
  .sol-nav.is-open .sol-nav-menu { max-height:84vh; overflow:auto; padding:8px; }
  .sol-nav-menu > li > a { padding:13px; font-size:16px; border-bottom:1px solid var(--line); }
  .sol-nav-menu .active > a::after { display:none; }
  .sol-nav-sub { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-left:3px solid var(--yellow); margin:0 0 6px 13px; min-width:0; }
  .sol-nav-cta { display:none; }
  .sol-nav.is-open .sol-nav-cta { display:inline-flex; justify-content:center; margin:8px; }
}

/* ============================================================
   BOUTONS — nets, ombre dure, bold
   ============================================================ */
.sol-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; font-family:var(--b); font-weight:800; font-size:15.5px; letter-spacing:.01em;
  text-decoration:none; border:2px solid var(--ink); cursor:pointer; line-height:1; overflow:hidden;
  transition:transform .12s, box-shadow .12s, background .15s, color .15s; }
.sol-btn::before { content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-20deg); transition:left .6s; }
.sol-btn:hover::before { left:160%; }
.sol-btn-primary { background:var(--yellow); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.sol-btn-primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); color:var(--ink); }
.sol-btn-blue { background:var(--blue); color:#fff; box-shadow:4px 4px 0 var(--ink); }
.sol-btn-blue:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); color:#fff; }
.sol-btn-ghost { background:transparent; color:#fff; border-color:#fff; }
.sol-btn-ghost:hover { background:var(--yellow); color:var(--ink); border-color:var(--ink); }
.sol-btn-outline { background:var(--card); color:var(--ink); box-shadow:4px 4px 0 rgba(11,15,26,.18); }
.sol-btn-outline:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--blue); color:var(--blue); }

/* ============================================================
   HERO ACCUEIL — éditorial blueprint
   ============================================================ */
.sol-home-hero { position:relative; overflow:hidden; color:#fff; }
.sol-home-hero { background-color:var(--ink);
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size:34px 34px; }
.sol-home-hero::before { content:""; position:absolute; top:-30%; right:-10%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(27,77,255,.55), transparent 62%); pointer-events:none; }
.sol-hero-grid { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:84px 26px 92px;
  display:grid; grid-template-columns:1.18fr .82fr; gap:54px; align-items:center; }
.sol-hero-grid > *, .sol-hero-text, .sol-hero-visual { min-width:0; }  /* évite l'expansion de la colonne grid (overflow mobile) */
.sol-hero-eyebrow { max-width:100%; }
.sol-hero-eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--m); font-size:12.5px;
  letter-spacing:3px; text-transform:uppercase; color:var(--yellow); border:1px solid rgba(255,212,0,.4); padding:7px 14px; }
.sol-hero-grid h1 { font-family:var(--d); font-size:clamp(38px,6vw,72px); line-height:.98; text-transform:uppercase;
  letter-spacing:-.02em; margin:22px 0 20px; color:#fff; }
.sol-hero-grid h1 .hl { background:var(--yellow); color:var(--ink); padding:0 .1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.sol-hero-lead { color:#c4cee4; font-family:var(--b); font-size:clamp(16px,1.5vw,19px); max-width:540px; margin:0 0 28px; line-height:1.65; }
.sol-hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.sol-hero-mini { display:flex; gap:0; flex-wrap:wrap; margin-top:30px; border-top:1px solid rgba(255,255,255,.15); }
.sol-hero-mini div { display:flex; align-items:center; gap:9px; color:#d6def0; font-family:var(--m); font-size:12.5px;
  letter-spacing:1px; text-transform:uppercase; padding:16px 22px 0 0; }
.sol-hero-mini i { color:var(--yellow); }
.sol-hero-visual { position:relative; z-index:1; }
.sol-hero-visual .ph { overflow:hidden; border:2px solid #fff; aspect-ratio:4/5; box-shadow:12px 12px 0 var(--blue); }
.sol-hero-visual .ph img { width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05); }
.sol-hero-badge { position:absolute; background:var(--yellow); color:var(--ink); padding:13px 16px; border:2px solid var(--ink);
  display:flex; align-items:center; gap:12px; box-shadow:5px 5px 0 var(--ink); }
.sol-hero-badge .ic { font-size:20px; }
.sol-hero-badge b { display:block; font-family:var(--d); font-size:17px; line-height:1; text-transform:uppercase; }
.sol-hero-badge span { font-family:var(--m); font-size:11px; letter-spacing:.5px; }
.sol-hero-badge.b1 { top:18px; left:-24px; background:#fff; }
.sol-hero-badge.b2 { bottom:26px; right:-20px; }
@media (max-width:880px){
  .sol-hero-grid { grid-template-columns:1fr; gap:38px; padding:54px 26px 66px; }
  .sol-hero-visual { max-width:380px; }
  .sol-hero-badge.b1 { left:6px; } .sol-hero-badge.b2 { right:6px; }
  .sol-hero-mini div { padding:14px 18px 0 0; }
}

/* ============================================================
   TRUST BAR — bandeau mono technique
   ============================================================ */
.sol-trust { position:relative; background:var(--ink); border-bottom:3px solid var(--yellow); }
.sol-trust .sol-wrap { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; }
.sol-trust .it { display:flex; align-items:center; gap:13px; color:#fff; justify-content:center;
  font-family:var(--m); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; padding:20px 16px; border-right:1px solid rgba(255,255,255,.12); }
.sol-trust .it:last-child { border-right:none; }
.sol-trust .it i { color:var(--yellow); font-size:18px; }
@media (max-width:760px){ .sol-trust .sol-wrap { grid-template-columns:repeat(2,1fr); }
  .sol-trust .it:nth-child(2){ border-right:none; } .sol-trust .it { border-bottom:1px solid rgba(255,255,255,.12); } }

/* ============================================================
   SECTIONS — en-têtes ÉDITORIAUX alignés à gauche + numérotés
   ============================================================ */
.sol-section { padding:88px 0; position:relative; }
.sol-section.alt { background:var(--paper-2); }
.sol-section.blue { background-color:var(--ink); color:#fff;
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px); background-size:34px 34px; }
.sol-kicker { display:inline-flex; align-items:center; gap:10px; font-family:var(--m); font-size:12.5px;
  letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
.sol-kicker::before { content:""; width:26px; height:4px; background:var(--yellow); }
.sol-section.blue .sol-kicker { color:var(--yellow); }
.sol-section.blue .sol-kicker::before { background:var(--blue); }
.sol-section h2 { font-family:var(--d); text-transform:uppercase; font-size:clamp(28px,4.2vw,48px); line-height:1;
  letter-spacing:-.02em; margin:0 0 18px; color:var(--ink); max-width:18ch; }
.sol-section.blue h2 { color:#fff; }
.sol-section .sol-sub { color:var(--muted); max-width:62ch; margin:0 0 50px; font-size:17.5px; line-height:1.6; }
.sol-section.blue .sol-sub { color:#b9c4dc; }
/* recentrage explicite quand demandé */
.sol-center .sol-kicker, .sol-center h2, .sol-center .sol-sub { margin-left:auto; margin-right:auto; }
.sol-center h2, .sol-center .sol-sub { max-width:none; }

/* ============================================================
   CARTES "FICHE TECHNIQUE" — plates, bord net, indice mono, hover ombre dure
   ============================================================ */
.sol-grid { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:f; }
@media (max-width:980px){ .sol-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .sol-grid { grid-template-columns:1fr; } }
.sol-feature { position:relative; background:var(--card); padding:34px 28px; border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(11,15,26,.09); transition:transform .15s, box-shadow .15s, background .15s, color .15s; overflow:hidden; }
.sol-feature::before { counter-increment:f; content:counter(f,decimal-leading-zero); position:absolute; top:20px; right:22px;
  font-family:var(--m); font-size:13px; color:var(--muted); letter-spacing:1px; }
.sol-feature .sol-ic { width:54px; height:54px; display:grid; place-items:center; font-size:23px; background:var(--ink);
  color:var(--yellow); margin-bottom:20px; transition:.15s; }
.sol-feature h3 { font-family:var(--d); text-transform:uppercase; font-size:18px; line-height:1.05; color:var(--ink); margin:0 0 10px; letter-spacing:-.01em; }
.sol-feature p { color:var(--text); font-size:15px; margin:0; line-height:1.6; }
.sol-feature ul { margin:14px 0 0; padding:0; list-style:none; }
.sol-feature ul li { display:flex; gap:9px; color:var(--text); font-size:14.5px; margin:8px 0; }
.sol-feature ul li::before { content:"+"; font-family:var(--m); color:var(--blue); font-weight:700; }
a.sol-feature { display:block; text-decoration:none; }
a.sol-feature .sol-more { display:inline-flex; align-items:center; gap:8px; font-family:var(--m); text-transform:uppercase;
  letter-spacing:1px; color:var(--blue); font-size:12.5px; font-weight:700; margin-top:16px; }
.sol-feature:hover { background:var(--yellow); transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); }
.sol-feature:hover .sol-ic { background:var(--ink); color:var(--yellow); transform:rotate(-4deg); }
.sol-feature:hover .sol-more, .sol-feature:hover ul li::before, .sol-feature:hover::before { color:var(--ink); }
a.sol-feature:hover .sol-more { gap:12px; }

/* ============================================================
   PERSONAS — panneaux blueprint bordés
   ============================================================ */
.sol-persona { background:var(--card); border:2px solid var(--ink); display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s; }
.sol-persona:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--blue); }
.sol-persona .hd { background:var(--ink); color:#fff; padding:26px 26px 22px; position:relative;
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px); background-size:26px 26px; }
.sol-persona .hd i { font-size:26px; color:var(--yellow); }
.sol-persona .hd h3 { font-family:var(--d); text-transform:uppercase; font-size:21px; margin:14px 0 4px; color:#fff; letter-spacing:-.01em; }
.sol-persona .hd span { font-family:var(--m); font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--yellow); }
.sol-persona .bd { padding:24px 26px 28px; flex:1; display:flex; flex-direction:column; }
.sol-persona .bd ul { list-style:none; padding:0; margin:0 0 20px; }
.sol-persona .bd li { display:flex; gap:11px; color:var(--text); font-size:15px; margin:11px 0; padding-bottom:11px; border-bottom:1px dashed var(--line); }
.sol-persona .bd li:last-child { border-bottom:none; }
.sol-persona .bd li i { color:var(--blue); margin-top:3px; }
.sol-persona .bd .sol-btn { margin-top:auto; }

/* ============================================================
   ÉTAPES — reliées par une ligne de circuit
   ============================================================ */
.sol-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:2px solid currentColor; }
.sol-section.blue .sol-steps { border-color:rgba(255,255,255,.4); }
.sol-step { position:relative; padding:34px 24px 30px; border-right:2px solid var(--line-2); }
.sol-section.blue .sol-step { border-right-color:rgba(255,255,255,.18); }
.sol-step:last-child { border-right:none; }
.sol-step .n { font-family:var(--d); font-size:46px; line-height:1; color:var(--yellow); -webkit-text-stroke:0; margin-bottom:14px; }
.sol-section:not(.blue) .sol-step .n { color:var(--ink); position:relative; display:inline-block; }
.sol-section:not(.blue) .sol-step .n::after { content:""; position:absolute; left:0; bottom:4px; width:100%; height:10px; background:var(--yellow); z-index:-1; }
.sol-step h3 { font-family:var(--d); text-transform:uppercase; font-size:17px; color:inherit; margin:0 0 8px; letter-spacing:-.01em; }
.sol-step p { font-size:14.5px; color:var(--muted); margin:0; }
.sol-section.blue .sol-step p { color:#b9c4dc; }
@media (max-width:860px){ .sol-steps { grid-template-columns:repeat(2,1fr); } .sol-step:nth-child(2){ border-right:none; } }

/* ============================================================
   ENGAGEMENTS — liste check carrée
   ============================================================ */
.sol-checks { list-style:none; padding:0; margin:0; display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
.sol-checks li { display:flex; align-items:center; gap:14px; color:var(--ink); font-size:16px; font-weight:700;
  background:var(--card); padding:18px 20px; border:2px solid var(--ink); box-shadow:3px 3px 0 rgba(11,15,26,.08); }
.sol-checks li i { color:var(--ink); background:var(--yellow); width:30px; height:30px; display:grid; place-items:center; font-size:13px; flex:0 0 auto; }
@media (max-width:680px){ .sol-checks { grid-template-columns:1fr; } }

/* ============================================================
   FAQ — accordéon technique
   ============================================================ */
.sol-faq { border:2px solid var(--ink); }
.sol-faq details { border-bottom:2px solid var(--ink); background:var(--card); }
.sol-faq details:last-child { border-bottom:none; }
.sol-faq summary { cursor:pointer; list-style:none; padding:20px 22px; font-family:var(--b); font-weight:800; color:var(--ink);
  font-size:16.5px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.sol-faq summary::-webkit-details-marker { display:none; }
.sol-faq summary::before { content:"Q"; font-family:var(--d); color:var(--blue); margin-right:6px; }
.sol-faq summary::after { content:"+"; font-family:var(--m); font-weight:700; color:var(--blue); font-size:20px; transition:.2s; }
.sol-faq details[open] summary { background:var(--ink); color:#fff; }
.sol-faq details[open] summary::before { color:var(--yellow); }
.sol-faq details[open] summary::after { content:"–"; color:var(--yellow); }
.sol-faq .a { padding:20px 22px; color:var(--text); font-size:15.5px; line-height:1.75; border-top:1px dashed var(--line); }

/* ============================================================
   HERO PAGES INTERNES
   ============================================================ */
.sol-hero { position:relative; overflow:hidden; color:#fff; text-align:center; padding:84px 26px 74px;
  background-color:var(--ink);
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px); background-size:34px 34px; }
.sol-hero::before { content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:600px; height:420px;
  background:radial-gradient(circle, rgba(27,77,255,.45), transparent 64%); pointer-events:none; }
.sol-hero > * { position:relative; z-index:1; }
.sol-hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  opacity:.4; filter:grayscale(.2) contrast(1.05); }
.sol-hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,26,.3), rgba(11,15,26,.55)); }
/* visuel home : si image Pexels, on garde le cadre */
.sol-home-hero .sol-hero-bg { opacity:.18; }
.sol-hero .sol-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--m); font-size:12.5px;
  letter-spacing:3px; text-transform:uppercase; color:var(--yellow); border:1px solid rgba(255,212,0,.4); padding:6px 14px; margin-bottom:18px; }
.sol-hero h1 { font-family:var(--d); text-transform:uppercase; color:#fff; margin:0 auto 16px; max-width:20ch;
  font-size:clamp(30px,5vw,54px); line-height:1; letter-spacing:-.02em; }
.sol-hero .sol-lead { color:#c4cee4; max-width:64ch; margin:0 auto; font-size:clamp(16px,1.5vw,18.5px); line-height:1.6; }
.sol-hero .sol-cta-row { margin-top:28px; }

/* ============================================================
   CTA bands / rows
   ============================================================ */
.sol-cta-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.sol-center { text-align:center; }
.sol-cta-band { position:relative; overflow:hidden; text-align:center; padding:72px 26px; color:#fff;
  background-color:var(--blue);
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:34px 34px; }
.sol-cta-band h2 { font-family:var(--d); text-transform:uppercase; color:#fff; font-size:clamp(26px,3.6vw,42px); line-height:1; margin:0 auto 14px; max-width:22ch; }
.sol-cta-band p { font-family:var(--m); color:#dde4ff; font-size:14px; letter-spacing:1px; text-transform:uppercase; margin:0 0 26px; }

/* ============================================================
   CHIPS / zones
   ============================================================ */
.sol-targets { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.sol-chip { display:inline-flex; align-items:center; gap:8px; background:var(--card); border:2px solid var(--ink);
  color:var(--ink); padding:9px 16px; font-family:var(--m); font-weight:700; font-size:13px; letter-spacing:.5px; text-transform:uppercase; box-shadow:3px 3px 0 var(--ink); }
.sol-chip i { color:var(--blue); }
.sol-section.blue .sol-chip { background:transparent; color:#fff; box-shadow:3px 3px 0 var(--yellow); border-color:#fff; }

/* ============================================================
   FICHE SERVICE
   ============================================================ */
.sol-svc-intro { max-width:70ch; margin:0 auto; color:var(--text); font-size:18px; line-height:1.8; }
.sol-svc-grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .sol-svc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .sol-svc-grid { grid-template-columns:1fr; } }
.sol-svc-card { background:var(--card); padding:26px; border:2px solid var(--ink); box-shadow:4px 4px 0 rgba(11,15,26,.08); transition:transform .15s, box-shadow .15s, background .15s; }
.sol-svc-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--blue); }
.sol-svc-card h3 { font-family:var(--d); text-transform:uppercase; font-size:16px; color:var(--ink); margin:0 0 10px; display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.sol-svc-card h3 i { color:var(--blue); }
.sol-svc-card p { color:var(--text); font-size:14.5px; margin:0; line-height:1.6; }
.sol-svc-card:hover { background:var(--paper-2); }
.sol-svc-card:hover h3 i { color:var(--yellow); }

/* ============================================================
   RÉALISATIONS
   ============================================================ */
.sol-gallery { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.sol-gallery figure { margin:0; overflow:hidden; position:relative; background:var(--ink); aspect-ratio:4/3; border:2px solid var(--ink); }
.sol-gallery img { width:100%; height:100%; object-fit:cover; }
.sol-gallery figcaption { position:absolute; inset:auto 0 0 0; background:var(--ink); color:#fff; padding:14px 16px;
  font-family:var(--d); text-transform:uppercase; font-size:14px; letter-spacing:-.01em; border-top:3px solid var(--yellow); }
.sol-gallery figcaption small { display:block; font-family:var(--m); font-weight:400; text-transform:none; color:var(--yellow); font-size:11.5px; margin-top:3px; letter-spacing:.5px; }
.sol-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; padding:18px;
  color:rgba(255,255,255,.5);
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px); background-size:26px 26px; }
.sol-placeholder i { font-size:34px; color:var(--yellow); }
.sol-placeholder span { font-family:var(--m); font-size:11px; letter-spacing:1px; text-transform:uppercase; }

/* ============================================================
   AVIS
   ============================================================ */
.sol-reviews { display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .sol-reviews { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .sol-reviews { grid-template-columns:1fr; } }
.sol-review { background:var(--card); padding:30px; position:relative; border:2px solid var(--ink); box-shadow:4px 4px 0 rgba(11,15,26,.08); }
.sol-review .sol-stars { color:var(--yellow); font-size:16px; letter-spacing:3px; margin-bottom:14px; }
.sol-review p { font-family:var(--b); font-size:17px; color:var(--ink); margin:0 0 16px; line-height:1.6; font-weight:500; }
.sol-review .sol-author { display:block; font-style:normal; font-family:var(--m); font-weight:700; color:var(--ink); text-transform:uppercase; font-size:13px; letter-spacing:.5px; }
.sol-review .sol-author small { display:block; font-weight:400; color:var(--muted); text-transform:none; margin-top:3px; }

/* ============================================================
   CONTACT
   ============================================================ */
.sol-contact-wrap { display:grid; gap:0; grid-template-columns:1fr 1fr; border:2px solid var(--ink); }
@media (max-width:880px){ .sol-contact-wrap { grid-template-columns:1fr; } }
.sol-contact-info { background:var(--ink); color:#fff; padding:38px;
  background-image:linear-gradient(var(--grid-dark) 1px, transparent 1px), linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px); background-size:30px 30px; }
.sol-contact-info h3 { font-family:var(--d); text-transform:uppercase; color:#fff; margin:0 0 20px; font-size:22px; }
.sol-line { display:flex; align-items:center; gap:14px; margin:16px 0; font-size:16px; }
.sol-line i { color:var(--ink); background:var(--yellow); width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; }
.sol-contact-info a { color:#fff; text-decoration:none; font-weight:700; }
.sol-legalbox { margin-top:26px; padding-top:22px; border-top:1px dashed rgba(255,255,255,.3); font-family:var(--m); font-size:12.5px; color:#aab6d2; line-height:1.9; }
.sol-form { background:var(--card); padding:38px; }
.sol-form label { display:block; font-family:var(--m); font-weight:700; color:var(--ink); margin:0 0 7px; font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; }
.sol-form input,.sol-form textarea,.sol-form select { width:100%; padding:13px 15px; border:2px solid var(--line-2); background:var(--paper);
  margin-bottom:18px; font-size:15.5px; font-family:var(--b); color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.sol-form input:focus,.sol-form textarea:focus,.sol-form select:focus { outline:none; border-color:var(--blue); box-shadow:4px 4px 0 var(--blue); }
.sol-form textarea { min-height:130px; resize:vertical; }
.sol-form .sol-btn { width:100%; }
.sol-form-msg { padding:14px 16px; margin-bottom:18px; font-weight:700; border:2px solid; }
.sol-form-msg.ok { background:#eafaf0; color:#0c7a3c; border-color:#0c7a3c; }
.sol-form-msg.err { background:#fdeaea; color:#c0271e; border-color:#c0271e; }

/* ============================================================
   LÉGAL
   ============================================================ */
.sol-legal { max-width:80ch; margin:0 auto; padding:64px 26px; color:var(--text); }
.sol-legal h1 { font-family:var(--d); text-transform:uppercase; color:var(--ink); }
.sol-legal h2 { font-family:var(--d); text-transform:uppercase; color:var(--ink); font-size:20px; margin-top:32px; }
.sol-legal p,.sol-legal li { font-size:16px; line-height:1.75; color:var(--text); }

/* ============================================================
   FIL D'ARIANE
   ============================================================ */
.sol-crumb { background:var(--paper-2); border-bottom:2px solid var(--ink); }
.sol-crumb .sol-wrap { display:flex; align-items:center; gap:12px; padding-top:14px; padding-bottom:14px;
  font-family:var(--m); font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; flex-wrap:wrap; }
.sol-crumb a { color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:7px; font-weight:700; }
.sol-crumb a:hover { color:var(--ink); }
.sol-crumb .sep { color:var(--muted); font-size:9px; }
.sol-crumb span { color:var(--muted); }

/* ============================================================
   SERVICES ASSOCIÉS (maillage)
   ============================================================ */
.sol-related { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px){ .sol-related { grid-template-columns:1fr; } }
.sol-related a { display:flex; align-items:center; gap:14px; text-decoration:none; background:var(--card);
  padding:18px 20px; border:2px solid var(--ink); box-shadow:3px 3px 0 rgba(11,15,26,.08); transition:transform .15s, box-shadow .15s, background .15s; }
.sol-related a:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.sol-related a:hover { background:var(--yellow); }
.sol-related .ic { width:42px; height:42px; flex:0 0 auto; background:var(--ink); color:var(--yellow); display:grid; place-items:center; font-size:18px; }
.sol-related a:hover .ic { background:var(--ink); }
.sol-related .tx { font-family:var(--d); text-transform:uppercase; color:var(--ink); font-size:14px; line-height:1.1; letter-spacing:-.01em; }
.sol-related .tx small { display:block; font-family:var(--m); font-weight:400; color:var(--blue); font-size:11px; text-transform:uppercase; margin-top:4px; letter-spacing:.5px; }
.sol-related a:hover .tx small { color:var(--ink); }

/* ============================================================
   SPLIT / divers
   ============================================================ */
.sol-split { display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:center; }
@media (max-width:860px){ .sol-split { grid-template-columns:1fr; gap:34px; } }

/* ============================================================
   LIGNE DE COURANT ANIMÉE + flottant + reveal
   ============================================================ */
.sol-cta-band::after, .sol-section.blue::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--yellow) 25%, #fff 50%, var(--yellow) 75%, transparent); background-size:220% 100%; animation:solCurrent 3.5s linear infinite; }
@keyframes solCurrent { to { background-position:-220% 0; } }

.sol-floating-call { position:fixed; right:18px; bottom:18px; z-index:99998; background:var(--yellow); color:var(--ink);
  width:60px; height:60px; display:none; align-items:center; justify-content:center; font-size:24px; text-decoration:none;
  border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); animation:solPulse 2.4s infinite; }
@keyframes solPulse { 0%,100%{ box-shadow:4px 4px 0 var(--ink), 0 0 0 0 rgba(255,212,0,.5);} 50%{ box-shadow:4px 4px 0 var(--ink), 0 0 0 14px rgba(255,212,0,0);} }
@media (max-width:880px){ .sol-floating-call { display:flex; } }

/* Reveal sans translation -> 0 layout shift (CLS) */
.sol-reveal { opacity:0; animation:solUp .6s ease forwards; }
.sol-reveal.d1{animation-delay:.08s}.sol-reveal.d2{animation-delay:.16s}.sol-reveal.d3{animation-delay:.24s}.sol-reveal.d4{animation-delay:.32s}
@keyframes solUp { to{ opacity:1; } }
.reveal-init { opacity:0; transition:opacity .55s cubic-bezier(.2,.7,.2,1); }
.reveal-init.is-in { opacity:1; }

.sol-muted { color:var(--muted); }

/* ---------- Formules de maintenance ---------- */
.sol-feature.featured { border-color:var(--blue); box-shadow:6px 6px 0 var(--blue); }
.sol-feature.featured:hover { background:var(--card); box-shadow:9px 9px 0 var(--blue); }
.sol-plan-tag { display:inline-block; font-family:var(--m); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  background:var(--yellow); color:var(--ink); padding:4px 10px; margin-bottom:14px; border:1.5px solid var(--ink); }
.sol-feature.featured .sol-plan-tag { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- Prose / contenu rédactionnel ---------- */
.sol-prose { max-width:76ch; }
.sol-prose.center { margin-left:auto; margin-right:auto; }
.sol-prose p { color:var(--text); font-size:17px; line-height:1.85; margin:0 0 18px; }
.sol-prose h3 { font-family:var(--d); text-transform:uppercase; font-size:19px; color:var(--ink); margin:32px 0 12px; letter-spacing:-.01em; }
.sol-section.blue .sol-prose h3 { color:#fff; }
.sol-section.blue .sol-prose p { color:#c4cee4; }
.sol-prose ul { margin:0 0 20px; padding:0; list-style:none; }
.sol-prose ul li { position:relative; padding-left:28px; margin:10px 0; color:var(--text); font-size:16.5px; line-height:1.65; }
.sol-prose ul li::before { content:"+"; position:absolute; left:0; top:1px; font-family:var(--m); color:var(--blue); font-weight:700; }
.sol-prose strong { color:var(--ink); }
.sol-prose.lead-in { font-size:18.5px; }
.sol-prose.lead-in > p:first-child { font-size:19px; color:var(--ink); font-weight:500; }

/* Liens contextuels dans le corps de texte (maillage interne) */
.sol-section p a:not(.sol-btn), .sol-svc-intro a:not(.sol-btn), .sol-hero-lead a {
  color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px; text-decoration-color:var(--yellow); transition:background .15s, color .15s; }
.sol-section p a:not(.sol-btn):hover, .sol-svc-intro a:not(.sol-btn):hover { background:var(--yellow); color:var(--ink); text-decoration:none; }
.sol-section.blue p a:not(.sol-btn), .sol-hero-lead a, .sol-hero .sol-lead a { color:var(--yellow); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; text-decoration-color:var(--yellow); font-weight:700; }
.sol-hero .sol-lead a:hover { color:#fff; }

@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity:1 !important; transform:none !important; }
  .sol-cta-band::after, .sol-section.blue::after, .sol-floating-call { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE — tablette & mobile
   ============================================================ */
@media (max-width:760px){
  .sol-section { padding:60px 0; }
  .sol-section h2 { max-width:none; }
  .sol-section .sol-sub { margin-bottom:36px; }
  .sol-hero { padding:64px 22px 54px; }
  .sol-hero-grid h1 { font-size:clamp(26px,8vw,42px); }
  .sol-hero h1 { font-size:clamp(24px,7vw,40px); }
  .sol-hero-eyebrow, .sol-hero .sol-eyebrow { letter-spacing:1.2px; flex-wrap:wrap; max-width:100%; }
  .sol-kicker { letter-spacing:1.5px; }
  .sol-checks { grid-template-columns:1fr; }
}
@media (max-width:520px){
  .sol-wrap { padding:0 18px; }
  .sol-section { padding:52px 0; }
  .sol-hero-cta .sol-btn, .sol-cta-row .sol-btn, .sol-hero-cta a, .sol-cta-row a { width:100%; }
  .sol-cta-row { flex-direction:column; }
  .sol-hero-badge { display:none; }            /* badges flottants masqués sur très petit écran */
  .sol-hero-visual { max-width:100%; }
  .sol-trust .it { justify-content:flex-start; padding:16px 18px; }
  .sol-nav-logo span { font-size:15px; }
}