/* =========================================================
   LOU SOLEU — Charte graphique « Solaire lumineux & moderne »
   Bleu nuit profond · jaune solaire · cyan — cartes flottantes & glow
   ========================================================= */

:root{
  /* Bleus nuit */
  --navy:#0B1B3A;          /* bleu nuit primaire */
  --navy-deep:#071427;     /* le plus profond (bandeaux, footer) */
  --navy-ink:#0B1B3A;      /* texte/ancre le plus foncé */

  /* Accents solaires */
  --solar:#FFC107;         /* jaune solaire vif (fills, glows, dégradés) */
  --solar-deep:#E6A100;
  --amber:#B26A00;         /* accent TEXTE (eyebrows, liens) — lisible sur blanc */
  --gold:#FFC107;          /* doré sur fonds sombres */
  --cyan:#06B6D4;          /* accent secondaire frais */
  --cyan-soft:#22D3EE;

  /* Surfaces */
  --sand:#FFF3D6;          /* puce solaire pâle */
  --cream:#FFFBF0;
  --bg:#FFFFFF;
  --bg-soft:#F4F7FB;       /* gris bleuté clair */
  --surface:#FFFFFF;
  --text:#1E293B;          /* slate lisible */
  --muted:#5A6B85;         /* gris bleu */
  --line:#E2E8F2;          /* bordure froide */
  --success:#16A34A;       /* vert */

  --radius:20px;
  --radius-sm:13px;
  --shadow-sm:0 4px 18px rgba(11,27,58,.06);
  --shadow:0 22px 55px rgba(11,27,58,.12);
  --shadow-lg:0 34px 80px rgba(11,27,58,.20);
  --glow-solar:0 16px 40px rgba(255,193,7,.40);
  --glow-cyan:0 16px 40px rgba(6,182,212,.32);
  --maxw:1180px;

  /* Bandeaux pleine largeur : lever de soleil lumineux (nuit ~15% max) */
  --magic:
    linear-gradient(110deg,#c2410c 0%, #f97316 50%, #fde047 100%);
  /* Fond nuit (petits encarts & carte de marque) */
  --night:
    radial-gradient(700px 440px at 90% 0%, rgba(255,176,92,.16), transparent 58%),
    linear-gradient(140deg,#0B1B3A 0%, #0E2350 55%, #071427 100%);

  /* Voile du hero plein écran (varie selon le moment de la journée) */
  --hero-overlay:linear-gradient(105deg, rgba(6,16,35,.74) 0%, rgba(9,22,48,.40) 40%, rgba(11,27,58,.10) 74%, rgba(11,27,58,0) 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;line-height:1.1;color:var(--navy-ink);font-weight:800;letter-spacing:-.02em}
.serif{font-family:'Manrope',sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;text-transform:uppercase;
  letter-spacing:.18em;font-size:.72rem;font-weight:800;color:var(--amber);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--solar),var(--cyan));display:inline-block;border-radius:2px}
.section{padding:88px 0}
.section.tight{padding:56px 0}
.center{text-align:center}
.lead{font-size:1.13rem;color:var(--muted);max-width:680px}
.center .lead{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.amber{color:var(--amber)}

/* focus accessible */
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.98rem;
  padding:14px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,color .25s;
  font-family:'Inter',sans-serif;overflow:hidden;will-change:transform}
.btn svg{position:relative;z-index:1}
.btn-primary{background:linear-gradient(135deg,var(--solar),var(--solar-deep));color:#0B1B3A;
  box-shadow:var(--glow-solar)}
.btn-primary:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 22px 48px rgba(255,193,7,.52)}
/* reflet lumineux qui balaye le bouton primaire */
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .6s ease}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-3px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-deep);transform:translateY(-3px);box-shadow:var(--shadow)}
.btn-outline{border-color:var(--line);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- Header ---------- */
.topbar{background:var(--navy-deep);color:#cfe0f7;font-size:.84rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:18px}
.topbar a{color:#cfe0f7}
.topbar .tb-right{display:flex;gap:20px;align-items:center}
.topbar .tb-right a:hover{color:#fff}
@media(max-width:760px){.topbar .tb-left span:nth-child(2){display:none}}

header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line);
  transition:height .3s ease, box-shadow .3s ease, background .3s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:104px;transition:height .3s ease}
/* header condensé au scroll */
header.nav.scrolled{background:rgba(255,255,255,.94);box-shadow:0 10px 30px rgba(11,27,58,.10)}
header.nav.scrolled .nav-inner{height:78px}
header.nav.scrolled .brand img{height:62px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:84px;width:auto;transition:height .3s ease}
@media(max-width:560px){.brand img{height:60px}.nav-inner{height:78px}}
.menu{display:flex;align-items:center;gap:1px;list-style:none;margin:0 auto}
.menu>li{position:relative}
.menu>li>a{position:relative;display:flex;align-items:center;gap:6px;padding:10px 14px;font-weight:600;
  font-size:.92rem;letter-spacing:.005em;color:var(--navy-ink);border-radius:999px;transition:.22s;white-space:nowrap}
.menu>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--solar),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.menu>li>a:hover{color:var(--navy)}
.menu>li>a:hover::after{transform:scaleX(1)}
.menu>li>a .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:.22s}
.dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(10px);
  min-width:308px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:14px;opacity:0;visibility:hidden;transition:.24s cubic-bezier(.2,.7,.2,1);z-index:60}
.menu>li:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu>li:hover .chev{transform:rotate(-135deg);margin-top:2px}
.dd-group-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--amber);
  font-weight:800;padding:8px 12px 4px}
.dropdown a.dd-item{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:12px;transition:.18s}
.dropdown a.dd-item:hover{background:var(--bg-soft);transform:translateX(3px)}
.dd-item .ico{flex:0 0 36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--sand),#fff);
  display:grid;place-items:center;color:var(--navy);border:1px solid var(--line)}
.dd-item b{font-size:.92rem;color:var(--navy-ink);display:block}
.dd-item small{color:var(--muted);font-size:.8rem}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:26px;height:2.5px;background:var(--navy-ink);border-radius:2px;transition:.2s}

@media(max-width:1080px){
  .menu,.nav-cta .btn span.lbl{display:none}
  .burger{display:flex}
}
/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(7,20,39,.55);opacity:0;visibility:hidden;transition:.25s;backdrop-filter:blur(3px)}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(86%,360px);background:#fff;
  padding:24px;overflow-y:auto;transform:translateX(100%);transition:.32s cubic-bezier(.2,.7,.2,1)}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-panel h4{margin:18px 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amber)}
.drawer-panel a{display:block;padding:10px 8px;border-radius:8px;color:var(--navy-ink);font-weight:500}
.drawer-panel a:hover{background:var(--bg-soft)}
.drawer-close{position:absolute;top:16px;right:16px;font-size:1.6rem;background:none;border:none;cursor:pointer;color:var(--navy)}

/* ---------- Hero (image plein écran) ---------- */
.hero{position:relative;color:#fff;overflow:hidden;min-height:90vh;display:flex;align-items:center;
  background-image:var(--hero-overlay),
    url("https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=1920&q=80");
  background-size:cover;background-position:center;transition:background-image .6s ease}
/* halo solaire animé en fond de hero */
.hero::before{content:"";position:absolute;top:-20%;right:-10%;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,rgba(255,193,7,.22),transparent 62%);filter:blur(20px);
  animation:floatGlow 14s ease-in-out infinite;pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-25%;left:-12%;width:48vw;height:48vw;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,212,.18),transparent 60%);filter:blur(20px);
  animation:floatGlow 18s ease-in-out infinite reverse;pointer-events:none}
@keyframes floatGlow{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,4%) scale(1.08)}}
.hero .wrap{position:relative;z-index:2;padding:120px 24px 128px;max-width:var(--maxw);will-change:transform}
.hero-inner{max-width:680px}
/* lisibilité garantie sur la photo, quelle que soit l'ambiance/la luminosité */
.hero .eyebrow{color:#FFE08A;text-shadow:0 1px 5px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.45)}
.hero .eyebrow::before{background:linear-gradient(90deg,var(--solar),var(--cyan-soft));box-shadow:0 0 6px rgba(0,0,0,.4)}
.hero h1{text-shadow:0 2px 16px rgba(0,0,0,.42)}
.hero p.sub{text-shadow:0 1px 10px rgba(0,0,0,.38)}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4.1rem);letter-spacing:-.025em;line-height:1.06}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--solar),var(--cyan-soft));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.sub{font-size:1.18rem;color:#dbe6f7;max-width:585px;margin:24px 0 32px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:38px}
.hero-badge{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#eef4ff;font-weight:600}
.hero-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--solar);box-shadow:0 0 0 4px rgba(255,193,7,.22)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:900px){.hero{min-height:auto}.hero .wrap{padding:80px 24px 88px}}

/* ---------- Generic page hero / bannières « lever de soleil » ---------- */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:96px 0 108px;color:var(--navy-ink);
  background:
    /* éclat blanc chaud — cœur du soleil en haut à droite */
    radial-gradient(680px 460px at 90% -34%, rgba(255,255,255,.62), transparent 60%),
    /* dégradé lever de soleil */
    var(--magic),
    /* filet d'accent solaire→cyan tout en bas */
    linear-gradient(90deg,var(--solar),var(--cyan)) bottom/100% 4px no-repeat;
}
/* rayons de soleil — couche conique masquée vers le coin haut-droit */
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-conic-gradient(from -8deg at 90% -8%,
    rgba(255,255,255,.20) 0deg 3.4deg, transparent 3.4deg 12deg);
  -webkit-mask:radial-gradient(720px 600px at 90% -8%, #000 0%, transparent 72%);
          mask:radial-gradient(720px 600px at 90% -8%, #000 0%, transparent 72%);
  opacity:.65;
}
/* halo lumineux flottant (cohérent avec le hero d'accueil) */
.page-hero::after{
  content:"";position:absolute;top:-26%;right:-4%;width:380px;height:380px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 42%, rgba(255,255,255,.9), rgba(255,224,138,.55) 42%, rgba(255,193,7,0) 72%);
  filter:blur(3px);animation:floatGlow 16s ease-in-out infinite}
.page-hero .wrap{position:relative;z-index:1}
/* fil d'Ariane en pastille de verre */
.page-hero .crumb{display:inline-block;font-size:.8rem;font-weight:600;margin-bottom:20px;
  color:var(--navy);background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  padding:6px 15px;border-radius:999px;backdrop-filter:blur(6px)}
.page-hero .crumb a{color:rgba(13,22,44,.75)}
.page-hero .crumb a:hover{color:var(--navy-ink)}
.page-hero h1{color:var(--navy-ink);font-size:clamp(2.05rem,4.2vw,3.05rem);max-width:760px;
  text-shadow:0 1px 0 rgba(255,255,255,.28)}
.page-hero p{color:rgba(15,18,30,.84);font-size:1.13rem;max-width:640px;margin-top:18px}
/* entrée en fondu-montée (désactivée par prefers-reduced-motion) */
.page-hero .crumb{animation:heroRise .7s cubic-bezier(.2,.7,.2,1) both}
.page-hero h1{animation:heroRise .7s cubic-bezier(.2,.7,.2,1) .08s both}
.page-hero p{animation:heroRise .7s cubic-bezier(.2,.7,.2,1) .16s both}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* variante bleu nuit (page Simulateur) — ciel étoilé plutôt qu'aube */
.page-hero.dark{color:#fff;
  background:
    radial-gradient(640px 440px at 90% -30%, rgba(255,193,7,.20), transparent 60%),
    var(--night),
    linear-gradient(90deg,var(--solar),var(--cyan)) bottom/100% 4px no-repeat}
.page-hero.dark::before{background:repeating-conic-gradient(from -8deg at 90% -8%,
    rgba(255,255,255,.12) 0deg 3.4deg, transparent 3.4deg 12deg);opacity:.5}
.page-hero.dark::after{background:radial-gradient(circle at 42% 42%, rgba(255,224,138,.55), rgba(255,193,7,0) 70%)}
.page-hero.dark .crumb{color:#dbe6f7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.page-hero.dark .crumb a{color:#9fb6dd}
.page-hero.dark .crumb a:hover{color:#fff}
.page-hero.dark h1{color:#fff;text-shadow:none}
.page-hero.dark p{color:#cfdcf2}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;overflow:hidden}
/* liseré dégradé qui s'illumine au survol */
.card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--solar),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
a.card:hover{border-color:transparent}
.card .ico-lg{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  display:grid;place-items:center;color:var(--solar);margin-bottom:18px;box-shadow:var(--shadow-sm);transition:.3s}
.card:hover .ico-lg{transform:translateY(-2px) rotate(-4deg);box-shadow:var(--glow-solar)}
.card h3{font-size:1.22rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.96rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--amber);font-weight:700;font-size:.9rem;transition:.2s}
.card .more:hover{gap:11px;color:var(--navy)}

.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature-row.rev .col-text{order:2}
@media(max-width:860px){.feature-row{grid-template-columns:1fr;gap:30px}.feature-row.rev .col-text{order:0}}

.tick-list{list-style:none;display:grid;gap:14px;margin-top:22px}
.tick-list li{display:flex;gap:13px;align-items:flex-start}
.tick-list li::before{content:"";flex:0 0 23px;height:23px;border-radius:50%;margin-top:2px;
  background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 4px 10px rgba(22,163,74,.28)}
.tick-list li b{color:var(--navy-ink)}

/* liste à tirets alignés (label | — description) */
.tick-list.cols li{display:grid;grid-template-columns:23px minmax(150px,215px) 1fr;column-gap:13px;row-gap:2px;align-items:start}
.tick-list.cols li .k{font-weight:700;color:var(--navy-ink)}
.tick-list.cols li .v{color:var(--muted)}
@media(max-width:600px){
  .tick-list.cols li{grid-template-columns:23px 1fr}
  .tick-list.cols li .k,.tick-list.cols li .v{grid-column:2}
}

/* carte de marque (remplace les visuels) */
.brandcard{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--night);
  min-height:360px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;
  text-align:center;padding:30px 30px 26px;box-shadow:var(--shadow)}
.brandcard::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38'%3E%3Cpath d='M0 37h38M37 0v38' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none}
.brandcard .plate{position:relative;z-index:2;background:#fff;border-radius:20px;padding:30px 34px;box-shadow:0 24px 60px rgba(7,20,39,.34)}
.brandcard .plate img{height:104px;width:auto;margin:0 auto}
.brandcard .tag{position:relative;z-index:2;margin-top:0;color:var(--gold);font-weight:700;will-change:auto;
  letter-spacing:.04em;font-size:.92rem;text-transform:uppercase}

/* scène illustrée « maison solaire » (remplace la plaque logo) */
.bc-scene{position:relative;z-index:2;width:100%;max-width:520px;height:auto;color:var(--solar)}
.bc-glow{transform-box:fill-box;transform-origin:center;animation:bcPulse 6s ease-in-out infinite}
.bc-rays{transform-box:fill-box;transform-origin:center;animation:bcSpin 64s linear infinite}
.bc-flow{stroke-dasharray:5 9;animation:bcFlow 1.1s linear infinite}
.bc-flow.alt{animation-duration:1.5s}
.bc-bolt{animation:bcWin 2.4s ease-in-out infinite}
.bc-win{animation:bcWin 4s ease-in-out infinite}
.bc-win:nth-of-type(2){animation-delay:.6s}
.bc-win:nth-of-type(3){animation-delay:1.2s}
@keyframes bcSpin{to{transform:rotate(360deg)}}
@keyframes bcPulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.1)}}
@keyframes bcFlow{to{stroke-dashoffset:-28}}
@keyframes bcWin{0%,100%{opacity:.4}50%{opacity:1}}

/* stats band */
.stats{background:var(--magic);color:var(--navy-ink);position:relative;overflow:hidden}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:58px 24px;text-align:center;position:relative;z-index:1}
.stat .n{font-family:'Manrope',sans-serif;font-size:2.7rem;font-weight:800;line-height:1;color:var(--navy-ink)}
.stat .l{color:rgba(13,20,40,.78);font-size:.92rem;margin-top:8px}
@media(max-width:620px){.stats .wrap{grid-template-columns:repeat(2,1fr)}}

/* steps */
.steps{counter-reset:s;display:grid;gap:22px}
.step{display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow-sm)}
.step>div{min-width:0}
.step h4{margin-bottom:4px}
.step::before{counter-increment:s;content:counter(s);width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:var(--solar);display:grid;place-items:center;
  font-family:'Manrope',sans-serif;font-size:1.4rem;font-weight:800}
.step h4{font-size:1.1rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.95rem}

/* diagram box */
.diagram{background:linear-gradient(180deg,#fff,var(--bg-soft));border:1px solid var(--line);
  border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);transition:.3s}
.diagram:hover{box-shadow:var(--shadow)}
.diagram svg{width:100%;height:auto;display:block}
.diagram .cap{margin-top:16px;font-size:.86rem;color:var(--muted);text-align:center}

/* callout */
.callout{background:linear-gradient(120deg,var(--cream),#fff);border:1px solid var(--line);
  border-left:5px solid var(--solar);border-radius:16px;padding:22px 26px;box-shadow:var(--shadow-sm)}
.callout b{color:var(--navy-ink)}
.callout.navy{background:var(--night);color:#e7eefb;border-left-color:var(--cyan)}
.callout.navy b{color:#fff}

/* table */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);font-size:.94rem}
.tbl th,.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--navy);color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.04em}
.tbl tbody tr{transition:background .18s}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:nth-child(even){background:var(--bg-soft)}
.tbl tbody tr:hover{background:#FFF8E1}
.tbl td b{color:var(--navy-ink)}

/* faq */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.faq-item.open{box-shadow:var(--shadow-sm);border-color:#cfe0f4}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:20px 24px;
  font-weight:600;font-size:1.02rem;color:var(--navy-ink);display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:'Inter',sans-serif}
.faq-q .pm{flex:0 0 26px;height:26px;border-radius:50%;background:var(--sand);color:var(--amber);
  display:grid;place-items:center;font-size:1.2rem;transition:.25s cubic-bezier(.2,.7,.2,1)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)}
.faq-a div{padding:0 24px 22px}
.faq-item.open .faq-a{max-height:480px}
.faq-item.open .pm{transform:rotate(135deg);background:linear-gradient(135deg,var(--solar),var(--solar-deep));color:var(--navy-ink)}

/* testimonial */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.quote .stars{color:var(--solar);letter-spacing:2px;margin-bottom:12px}
.quote p{font-size:1rem;color:var(--text)}
.quote .who{margin-top:16px;font-weight:700;color:var(--navy-ink);font-size:.92rem}
.quote .who span{display:block;color:var(--muted);font-weight:500;font-size:.84rem}

/* CTA band */
.cta-band{background:var(--magic);color:var(--navy-ink);border-radius:28px;padding:58px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.cta-band::before{content:"";position:absolute;top:-40%;left:-8%;width:36vw;height:36vw;border-radius:50%;
  background:radial-gradient(circle,rgba(9,18,42,.28),transparent 62%);pointer-events:none}
.cta-band h2{color:var(--navy-ink);font-size:clamp(1.8rem,3.4vw,2.6rem);position:relative;z-index:1}
.cta-band p{color:rgba(17,18,30,.82);max-width:560px;margin:14px auto 28px;position:relative;z-index:1}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.cta-band .btn-primary{background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(7,20,39,.30)}
.cta-band .btn-primary:hover{background:var(--navy-deep)}
.cta-band .btn-ghost{border-color:rgba(11,27,58,.55);color:var(--navy-ink)}
.cta-band .btn-ghost:hover{background:rgba(11,27,58,.10)}

/* pill tags */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--sand);color:var(--amber);
  font-weight:800;font-size:.78rem;padding:6px 14px;border-radius:999px}

/* spec list */
.spec{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px 0;border-bottom:1px dashed var(--line)}
.spec:last-child{border-bottom:none}
.spec .k{color:var(--muted)}
.spec .v{font-weight:800;color:var(--navy-ink)}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-deep);color:#aebfdb;padding:66px 0 28px;margin-top:10px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
footer.site h5{color:#fff;font-family:'Inter',sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
footer.site a{display:block;padding:5px 0;color:#aebfdb;font-size:.92rem;transition:color .2s,transform .2s}
footer.site a:hover{color:var(--gold);transform:translateX(3px)}
.foot-brand img{height:54px;background:#fff;padding:8px 12px;border-radius:12px;margin-bottom:16px}
.foot-actions{display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:18px}
.foot-socials{display:flex;align-items:center;justify-content:center;gap:12px}
.foot-soc{display:inline-flex;line-height:0;transition:transform .2s}
.foot-soc svg{width:34px;height:34px;display:block}
.foot-soc:hover{transform:translateY(-2px)}
.foot-soc-label{color:#8ea0bd;font-size:.86rem;font-weight:600;margin-right:2px}
.foot-cta{align-self:flex-start}
.foot-cta{display:inline-flex;align-items:center;gap:9px;background:var(--solar);color:var(--navy)!important;
  font-weight:700;font-size:.92rem;padding:13px 24px;border-radius:999px;transition:.22s;box-shadow:0 10px 26px rgba(255,193,7,.22)}
.foot-cta svg{width:18px;height:18px;color:var(--navy)}
.foot-cta:hover{background:#fff;color:var(--navy)!important;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.foot-brand p{font-size:.9rem;color:#93a6c8;max-width:280px}
.foot-contact li{list-style:none;display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.92rem}
.foot-contact .ic{color:var(--gold);flex:0 0 18px;margin-top:2px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#7589ad}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Reveal on scroll (staggered) ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* form */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px;color:var(--navy-ink)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:12px;font-family:inherit;font-size:.96rem;color:var(--text);background:#fcfdff;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(6,182,212,.14)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}

/* small print */
.note{font-size:.8rem;color:var(--muted)}
hr.soft{border:none;border-top:1px solid var(--line);margin:40px 0}

/* formulaire Tally (iframe transparent) : toujours posé sur un fond clair,
   sinon son texte sombre devient illisible en mode nuit */
iframe[data-tally-src]{background:#fff;border-radius:14px}

/* =========================================================
   AMBIANCES SELON LE MOMENT DE LA JOURNÉE
   (pilotées par html[data-mood] — voir main.js)
   ========================================================= */

/* transitions douces lors du changement d'ambiance */
body{transition:background-color .55s ease,color .5s ease}
.card,.faq-item,.quote,.form-card,.step,.tbl,.diagram,.callout,
.field input,.field select,.field textarea,.mood-switch,.simu-panel,.metric{
  transition:background-color .55s ease,border-color .55s ease,color .5s ease,
             box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}

/* sélecteur d'ambiance (injecté dans la nav par main.js) */
.mood-switch{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--surface);color:var(--amber);cursor:pointer;flex:0 0 auto}
.mood-switch:hover{color:var(--navy);border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.mood-switch:active{transform:translateY(0) scale(.94)}
.mood-switch svg{width:21px;height:21px}
.mood-switch .auto-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 2px var(--surface)}

/* ---------- AUBE (≈ 6–9 h) : ciel rosé & or doux ---------- */
html[data-mood="aube"]{
  --bg:#FFFFFF; --bg-soft:#FFF2F1; --surface:#FFFFFF; --cream:#FFF6F2;
  --text:#3B2A30; --muted:#8C7480; --navy-ink:#2E2030; --navy:#3A2B46; --navy-deep:#241828; --line:#F2E2DE;
  --amber:#B14A63; --solar:#FFC371; --solar-deep:#F0A65A; --gold:#F6B36B; --cyan:#E58BA0; --cyan-soft:#F2A6B5;
  --glow-solar:0 16px 40px rgba(255,170,120,.40);
  --magic:linear-gradient(118deg,#fbc6bd 0%,#f7a8ab 36%,#ffcf9e 70%,#fff0cf 100%);
  --hero-overlay:linear-gradient(105deg, rgba(58,28,46,.72) 0%, rgba(150,82,96,.42) 42%, rgba(255,182,150,.12) 80%, rgba(255,200,170,0) 100%);
}

/* ---------- CRÉPUSCULE (≈ 17–20 h) : orange chaud sunset ---------- */
html[data-mood="crepuscule"]{
  --bg:#FFFBF6; --bg-soft:#FBEEDF; --surface:#FFFFFF; --cream:#FFF6EA;
  --text:#3A2A1E; --muted:#8A6E54; --navy-ink:#2E1E12; --navy:#3A2517; --navy-deep:#221409; --line:#F1E2CE;
  --amber:#B5530A; --solar:#FF9A2E; --solar-deep:#F07E1E; --gold:#FF9A2E; --cyan:#E0662C; --cyan-soft:#F0894A;
  --glow-solar:0 16px 40px rgba(255,140,40,.40);
  --magic:linear-gradient(120deg,#f97316 0%,#fb923c 40%,#fdba74 70%,#fde68a 100%);
  --hero-overlay:linear-gradient(105deg, rgba(60,24,10,.78) 0%, rgba(150,60,20,.45) 42%, rgba(234,88,12,.12) 82%, rgba(245,158,11,0) 100%);
}

/* ---------- NUIT (≈ 20–6 h) : vrai mode sombre ---------- */
html[data-mood="nuit"]{
  --bg:#0B1426; --bg-soft:#111E38; --surface:#13203B; --cream:#15233F;
  --text:#D7E1F3; --muted:#9BAFD0; --navy-ink:#FFFFFF; --navy:#1C2C4D; --navy-deep:#0A1730; --line:#26385C;
  --amber:#FFC107; --solar:#FFC107; --solar-deep:#E6A100; --gold:#FFC107; --cyan:#22D3EE; --cyan-soft:#67E8F9;
  --shadow-sm:0 4px 18px rgba(0,0,0,.35); --shadow:0 22px 55px rgba(0,0,0,.5); --shadow-lg:0 34px 80px rgba(0,0,0,.6);
  --magic:radial-gradient(640px 440px at 90% -30%, rgba(255,193,7,.16), transparent 60%),
          linear-gradient(140deg,#0B1B3A 0%,#0E2350 55%,#071427 100%);
  --hero-overlay:linear-gradient(105deg, rgba(2,8,20,.90) 0%, rgba(5,12,28,.64) 45%, rgba(8,16,34,.32) 78%, rgba(8,16,34,.12) 100%);
}
/* nuit — surfaces & chrome qui codaient un blanc en dur */
html[data-mood="nuit"] header.nav{background:rgba(9,17,33,.82);border-bottom-color:var(--line)}
html[data-mood="nuit"] header.nav.scrolled{background:rgba(9,17,33,.95)}
/* logo (texte/oiseau bleu nuit) : plaque claire pour rester lisible la nuit */
html[data-mood="nuit"] .brand img{background:#fff;padding:5px 11px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
html[data-mood="nuit"] .menu>li>a:hover{color:#fff}
html[data-mood="nuit"] .dropdown,
html[data-mood="nuit"] .drawer-panel{background:#13203B;border-color:var(--line)}
html[data-mood="nuit"] .step,
html[data-mood="nuit"] .tbl,
html[data-mood="nuit"] .faq-item,
html[data-mood="nuit"] .quote,
html[data-mood="nuit"] .form-card,
html[data-mood="nuit"] .simu-panel{background:var(--surface);border-color:var(--line)}
html[data-mood="nuit"] .diagram{background:linear-gradient(180deg,#13203B,#0E1A30)}
html[data-mood="nuit"] .metric{background:linear-gradient(180deg,#15233F,#101C34);border-color:var(--line)}
html[data-mood="nuit"] .callout{background:linear-gradient(120deg,#15233F,#101C34);border-color:var(--line)}
html[data-mood="nuit"] .faq-item.open{border-color:#33507f}
html[data-mood="nuit"] .tbl tbody tr:hover{background:#1a2c50}
html[data-mood="nuit"] .field input,
html[data-mood="nuit"] .field select,
html[data-mood="nuit"] .field textarea{background:#0E1A30;color:var(--text);border-color:var(--line)}
html[data-mood="nuit"] .btn-navy{border:1px solid var(--line)}
/* nuit — bannières internes adoptent le rendu sombre */
html[data-mood="nuit"] .page-hero{color:#fff;
  background:radial-gradient(640px 440px at 90% -30%, rgba(255,193,7,.16), transparent 60%),
    var(--magic),linear-gradient(90deg,var(--solar),var(--cyan)) bottom/100% 4px no-repeat}
html[data-mood="nuit"] .page-hero .crumb{color:#dbe6f7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-mood="nuit"] .page-hero .crumb a{color:#9fb6dd}
html[data-mood="nuit"] .page-hero h1{color:#fff;text-shadow:none}
html[data-mood="nuit"] .page-hero p{color:#cfdcf2}
/* nuit — textes sur fonds --magic (stats / CTA) repassent en clair */
html[data-mood="nuit"] .stat .l{color:#bcccea}
html[data-mood="nuit"] .cta-band p{color:#cfdcf2}
html[data-mood="nuit"] .cta-band .btn-primary{background:linear-gradient(135deg,var(--solar),var(--solar-deep));color:#0B1B3A}
html[data-mood="nuit"] .cta-band .btn-primary:hover{background:linear-gradient(135deg,#FFD24D,var(--solar))}
html[data-mood="nuit"] .cta-band .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
html[data-mood="nuit"] .cta-band .btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .hero .wrap{transform:none !important}
}