:root{
  --rose:#ff1e7d; --magenta:#e6006e; --fonce:#a30052; --encre:#3d0020;
  --bonbon:#ffd3e4; --pale:#fff2f7; --blanc:#fff; --gris:#8a6b79;
  /* bleu Tiffany : tous les contours du site */
  --ciel:#0abab5; --ciel2:#6fd9d5; --cielpale:#e7faf9; --cielfonce:#05605d;
  --trait:#8fe3e0;
  --max:1180px; --r:20px;
  --ombre:0 10px 26px rgba(10,186,181,.16);
  --ombre-f:0 20px 44px rgba(10,186,181,.26);
  --neon:0 0 0 3px rgba(10,186,181,.22), 0 0 26px rgba(10,186,181,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:98px}
body{margin:0;background:var(--pale);color:var(--encre);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  overflow-x:hidden;text-transform:uppercase}
p,li,td,th,.lead,.detail p,.faq p{letter-spacing:.012em}
.lead{line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:var(--magenta)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
h1,h2,h3,h4{text-transform:uppercase;letter-spacing:-.012em;line-height:1.08;margin:0}
h1{font-size:clamp(2.1rem,6.4vw,3.7rem);font-weight:900}
h2{font-size:clamp(1.55rem,4.5vw,2.45rem);font-weight:900}
h3{font-size:1.14rem;font-weight:800}
.lead{color:var(--gris);font-size:clamp(1rem,2.4vw,1.2rem);margin:16px auto 0;max-width:63ch}
.center{text-align:center}
section{padding:58px 0;scroll-margin-top:98px;position:relative}
.eyebrow{display:inline-block;background:var(--blanc);border:3px solid var(--ciel);color:var(--magenta);
  font-size:.76rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase;
  padding:9px 20px;border-radius:999px;animation:pouls 3.4s ease-in-out infinite}
@keyframes pouls{
  0%,100%{box-shadow:0 0 0 0 rgba(10,186,181,.45)}
  50%{box-shadow:0 0 0 10px rgba(10,186,181,0)}}

/* ============ INTRO ============ */
#intro{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:#20040f;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s ease,visibility .55s}
#intro.parti{opacity:0;visibility:hidden}
#intro .caisson{border:4px solid var(--rose);border-radius:16px;padding:22px 26px;background:#2c0716;
  box-shadow:0 0 60px rgba(255,30,125,.55)}
#intro .nom{font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.15rem,5.2vw,2.1rem);color:#fff;white-space:nowrap}
#intro .nom i{font-style:normal;opacity:0;animation:allume .5s forwards}
#intro .nom i.p{color:#ffffff}
#intro .nom i.e{color:var(--rose);text-shadow:0 0 18px rgba(255,30,125,.8)}
#intro .nom .fr{color:var(--ciel);text-shadow:0 0 16px rgba(10,186,181,.8)}
#intro .sous{margin-top:16px;text-align:center;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;color:#ff9ac7;opacity:0;animation:allume .6s .95s forwards}
@keyframes allume{
  0%{opacity:0}30%{opacity:1}42%{opacity:.25}55%{opacity:1}68%{opacity:.4}100%{opacity:1}}

/* ============ REVEAL ============ */
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
html.js .rv.vu{opacity:1;transform:none}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:90;background:rgba(255,242,247,.94);
  backdrop-filter:saturate(1.5) blur(10px);border-bottom:2px solid var(--trait)}
.bar{display:flex;align-items:center;gap:12px;height:78px;min-width:0}
.burger{background:var(--blanc);border:2px solid var(--ciel);border-radius:12px;
  width:44px;height:44px;cursor:pointer;padding:10px;flex:0 0 auto}
.burger span{display:block;width:20px;height:2.4px;background:var(--magenta);border-radius:2px;
  margin:3px auto;transition:transform .3s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
.logo{font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--magenta);
  font-size:1.26rem;text-decoration:none;white-space:nowrap;flex:0 0 auto;
  border:2.5px solid var(--ciel);border-radius:12px;padding:7px 14px;background:#fff;
  box-shadow:0 0 0 3px rgba(10,186,181,.14), 0 0 20px rgba(10,186,181,.45);
  transition:box-shadow .3s}
.logo:hover{box-shadow:0 0 0 3px rgba(10,186,181,.22), 0 0 30px rgba(10,186,181,.75)}
.logo b,.logo span,.logo em{font-style:normal;font-weight:900}
.logo b{color:var(--encre)}
.logo span{color:var(--rose);text-shadow:0 0 14px rgba(255,30,125,.45)}
.logo em{color:var(--ciel);text-shadow:0 0 12px rgba(10,186,181,.55)}
nav.menu{display:none;gap:2px;margin-left:10px}
nav.menu a{text-decoration:none;color:var(--encre);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;padding:9px 11px;border-radius:999px;transition:.25s;white-space:nowrap}
nav.menu a:hover,nav.menu a.on{background:var(--magenta);color:#fff}
.actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;white-space:nowrap;
  font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:.88rem;
  padding:13px 20px;border-radius:999px;border:3px solid var(--ciel);
  background:var(--magenta);color:#fff;cursor:pointer;font-family:inherit;transition:.25s;
  box-shadow:0 6px 18px rgba(10,186,181,.30)}
.btn:hover{background:var(--fonce);transform:translateY(-2px);box-shadow:var(--neon)}
.btn.ghost{background:var(--blanc);color:var(--magenta);box-shadow:none}
.btn.ghost:hover{background:var(--ciel);border-color:var(--ciel);color:#fff}
.btn.sm{padding:11px 16px;font-size:.78rem}
.btn.tel{width:46px;height:46px;padding:0;border-radius:50%;flex:0 0 auto}
.btn.tel svg{width:19px;height:19px}
#mob{display:none;border-top:2px solid var(--trait);padding:8px 0 18px}
#mob a{display:block;text-decoration:none;color:var(--encre);font-weight:800;text-transform:uppercase;
  font-size:.88rem;padding:13px 6px;border-bottom:1px solid var(--trait)}
@media(min-width:1040px){nav.menu{display:flex}.burger{display:none}}
@media(max-width:1330px) and (min-width:1040px){
  nav.menu a{font-size:.71rem;padding:8px 8px;letter-spacing:.03em}
  nav.menu{margin-left:6px}
  .bar{gap:9px}}
@media(max-width:1039px){.logo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:560px){
  .bar{gap:7px;height:70px}
  .logo{font-size:.9rem;letter-spacing:.02em;padding:6px 10px;border-width:2px}
  .btn.sm{padding:10px 12px;font-size:.68rem}
  .btn.tel{width:42px;height:42px}
  .btn.tel svg{width:17px;height:17px}}
@media(max-width:560px){
  /* le caisson passe sur deux lignes : le nom reste entier et bien lisible */
  .bar{height:auto;padding:9px 0}
  .logo{overflow:visible;text-overflow:clip;font-size:.84rem;line-height:1.08;
    padding:7px 11px;text-align:center}
  .logo span{display:block;letter-spacing:.05em}}
@media(max-width:420px){
  .logo{font-size:.76rem;padding:5px 8px}
  .btn.sm{padding:9px 10px;font-size:.62rem}
  .btn.tel{width:38px;height:38px}
  .burger{width:40px;height:40px;padding:9px}}

/* ============ HERO ============ */
.hero{padding:56px 0 66px;background:
  radial-gradient(880px 480px at 86% -12%,rgba(10,186,181,.30),transparent 62%),
  radial-gradient(760px 430px at 4% 108%,rgba(255,255,255,.95),transparent 66%),
  var(--bonbon);border-bottom:3px solid var(--ciel);overflow:hidden}
.hero h1{margin-top:20px}
/* ---- le mot LUMINEUSE s'allume comme un vrai neon ---- */
.hero h1 em{font-style:normal;position:relative;color:#fff;
  animation:demarrage 2.6s steps(1,end) 1 both, respire 3.4s ease-in-out 2.6s infinite}
@keyframes demarrage{
  0%{color:#f0b9cf;text-shadow:none}
  8%{color:#fff;text-shadow:0 0 6px #ff6fae,0 0 18px #ff1e7d,0 0 38px #ff1e7d}
  12%{color:#f0b9cf;text-shadow:none}
  18%{color:#fff;text-shadow:0 0 6px #ff6fae,0 0 18px #ff1e7d,0 0 38px #ff1e7d}
  21%{color:#f0b9cf;text-shadow:none}
  26%{color:#fff;text-shadow:0 0 7px #ff6fae,0 0 22px #ff1e7d,0 0 46px #ff1e7d}
  31%{color:#efc9d9;text-shadow:0 0 4px #ff6fae}
  36%,100%{color:#fff;text-shadow:0 0 8px #ff8cc0,0 0 24px #ff1e7d,0 0 52px #ff1e7d,0 0 84px rgba(255,30,125,.6)}}
@keyframes respire{
  0%,100%{text-shadow:0 0 8px #ff8cc0,0 0 24px #ff1e7d,0 0 52px #ff1e7d,0 0 84px rgba(255,30,125,.55)}
  50%{text-shadow:0 0 10px #ffa8cf,0 0 30px #ff1e7d,0 0 66px #ff1e7d,0 0 108px rgba(255,30,125,.75)}}
@media(prefers-reduced-motion:reduce){
  .hero h1 em{animation:none;color:var(--magenta);text-shadow:0 0 22px rgba(255,30,125,.45)}}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.chip{background:var(--blanc);border:2px solid var(--ciel);border-radius:999px;
  padding:9px 15px;font-size:.78rem;font-weight:800;text-transform:uppercase;color:var(--cielfonce)}
/* ---- devanture : vraies photos, encadrees d'une rampe LED bleu ciel ---- */
.devanture{margin:38px auto 0;max-width:1000px;display:grid;gap:14px;
  grid-template-columns:1fr;text-align:center}
@media(min-width:820px){.devanture{grid-template-columns:1.62fr 1fr;align-items:stretch}
  .devanture .legvit{grid-column:1 / -1}}
.vit{position:relative;margin:0;padding:3px;border-radius:var(--r);background:var(--ciel2);
  overflow:hidden;box-shadow:var(--ombre-f);transition:transform .35s,box-shadow .35s}
.vit:hover{transform:translateY(-5px);box-shadow:var(--neon)}
.vit .beam{opacity:.75}
.vit:hover .beam{opacity:1;animation-duration:2.2s}
.vit .ph{position:relative;z-index:2;border-radius:calc(var(--r) - 3px);height:100%;
  min-height:190px;filter:saturate(1.04) contrast(1.03)}
.vit.grand .ph{min-height:300px;background-position:center 46%}
.vitduo{display:grid;gap:14px;grid-template-rows:1fr 1fr}
.vitduo .ph{min-height:143px;background-position:center 42%}
.legvit{margin:4px 0 0;font-size:.76rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cielfonce)}
.neonp{animation:vacille 5.5s infinite}
@keyframes vacille{0%,88%,100%{opacity:1}90%{opacity:.45}92%{opacity:1}94%{opacity:.6}96%{opacity:1}}

/* ============ CARTES LED ============ */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* ---- RAMPE LED QUI DEFILE : le contour lumineux fait le tour du carreau ---- */
.led,.etape,.zn,.stat{position:relative;border-radius:var(--r);padding:3px;border:0;
  background:var(--ciel2);overflow:hidden;box-shadow:var(--ombre);
  transition:transform .35s,box-shadow .35s}
.led:hover,.etape:hover,.zn:hover,.stat:hover{transform:translateY(-6px);box-shadow:var(--neon)}
.beam{position:absolute;top:-80%;left:-80%;width:260%;height:260%;z-index:1;
  background:conic-gradient(from 0deg,transparent 0 68%,rgba(10,186,181,.95) 80%,
    #ffffff 87%,rgba(10,186,181,.95) 92%,transparent 97%);
  animation:tourne 4.4s linear infinite;opacity:.8;transition:opacity .35s}
.led:hover .beam,.led:focus-within .beam{opacity:1;animation-duration:2.2s}
.etape .beam,.zn .beam,.stat .beam{opacity:0;animation-play-state:paused}
.etape:hover .beam,.zn:hover .beam,.stat:hover .beam{opacity:1;animation-play-state:running;
  animation-duration:2.4s}
@keyframes tourne{to{transform:rotate(360deg)}}
.led .in,.etape .in,.zn .in,.stat .in{position:relative;z-index:2;background:var(--blanc);
  border-radius:calc(var(--r) - 3px);height:100%;text-align:center;overflow:hidden}
.led .in{padding:26px 22px}
.led h3{color:var(--magenta);margin-bottom:10px;text-transform:uppercase}
.led p{margin:0;color:var(--cielfonce);font-size:.9rem;text-transform:uppercase;
  letter-spacing:.015em;line-height:1.55}
.led .ico{width:48px;height:48px;margin:0 auto 14px}

/* ============ PHOTOS ============ */
.ph{position:relative;background:linear-gradient(135deg,#ffe4ef,#ffd0e4);
  background-size:cover;background-position:center;overflow:hidden}
.ph .vide{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:#d094b0;padding:10px;font-weight:800}
.ph .vide svg{width:54px;height:40px;opacity:.55}
.ph.ok .vide{display:none}
.produit .vig svg{display:block;width:100%;height:100%}
.ph.ok>svg{display:none}

/* ============ ONGLETS ============ */
.tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:28px 0 26px}
.tabs button{background:var(--blanc);border:3px solid var(--ciel2);color:var(--magenta);
  font-weight:900;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;
  padding:12px 17px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.25s}
.tabs button:hover{border-color:var(--ciel);box-shadow:var(--neon)}
.tabs button[aria-selected="true"]{background:var(--magenta);border-color:var(--ciel);color:#fff;
  box-shadow:var(--neon)}
#liste{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.produit{background:var(--blanc);border:3px solid var(--ciel2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombre);transition:border-color .3s,box-shadow .3s,transform .3s}
.produit:hover{border-color:var(--ciel);box-shadow:var(--neon);transform:translateY(-5px)}
.produit[data-open="1"]{border-color:var(--ciel);box-shadow:var(--neon)}
.produit>button{width:100%;display:block;text-align:center;position:relative;
  background:none;border:0;padding:0 0 18px;cursor:pointer;font-family:inherit}
.produit .vig{display:block;width:100%;height:172px;border-radius:0;overflow:hidden;
  border:0;border-bottom:3px solid var(--ciel2);background-position:center;background-size:cover}
.produit:hover .vig{border-bottom-color:var(--ciel)}
.produit .ti{display:block;padding:16px 16px 0}
.produit .ti strong{display:block;text-transform:uppercase;font-size:.98rem;color:var(--magenta);
  line-height:1.2;margin-bottom:6px}
.produit .ti .sl{display:block;font-size:.76rem;color:var(--cielfonce);text-transform:uppercase;
  letter-spacing:.04em;line-height:1.45}
.produit .ti .pr{display:inline-block;margin-top:12px;background:var(--cielpale);
  border:2px solid var(--ciel);border-radius:999px;padding:6px 14px;
  font-size:.74rem;font-weight:900;color:var(--magenta);letter-spacing:.06em}
.produit .plus{position:absolute;right:12px;top:150px;width:34px;height:34px;line-height:29px;
  border-radius:50%;background:var(--magenta);color:#fff;border:2px solid var(--ciel);
  font-size:1.25rem;font-weight:900;transition:transform .3s;box-shadow:var(--ombre)}
.produit[data-open="1"] .plus{transform:rotate(135deg)}
.detail{max-height:0;overflow:hidden;transition:max-height .45s ease}
.detail .pad{padding:4px 18px 22px;border-top:2px dashed var(--ciel2);text-align:left}
.detail h4{color:var(--magenta);font-size:.74rem;letter-spacing:.14em;margin:20px 0 8px}
.detail p{margin:16px 0 0;color:#5d3b4c;font-size:.9rem}
.detail ul{margin:8px 0 0;padding-left:18px;color:#5d3b4c;font-size:.88rem}
.detail li{margin-bottom:6px}
.btn.plein2{display:flex;width:100%;margin-top:12px}

.specs{width:100%;border-collapse:collapse;margin-top:10px;font-size:.92rem}
.specs th,.specs td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--ciel2);vertical-align:top}
.specs th{color:var(--magenta);text-transform:uppercase;font-size:.74rem;letter-spacing:.06em;width:44%}

/* ============ CONFIGURATEUR ============ */
.config{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:960px){.config{grid-template-columns:1.02fr .98fr;align-items:start}}
.panneau{background:var(--blanc);border:3px solid var(--ciel);border-radius:var(--r);padding:24px;
  box-shadow:0 0 44px rgba(10,186,181,.22)}
.apercu{background:linear-gradient(180deg,#07262b,#031215);border-radius:var(--r);padding:26px 18px;
  border:3px solid var(--ciel);text-align:center;transition:background .6s}
.apercu.jour{background:linear-gradient(180deg,#d8f6f5,#b7ecea)}
.apercu.jour .mur,.apercu.jour .note{color:#05605d}
.apercu .mur{font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:#6fd9d5;margin-bottom:14px}
.apercu .note{font-size:.79rem;color:#9fdedb;margin-top:16px}
.switch{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.10);
  border:2px solid var(--ciel);border-radius:999px;padding:7px 16px 7px 7px;margin-bottom:16px;
  cursor:pointer;font-family:inherit;font-weight:900;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:#bff0ee;transition:.3s}
.switch:hover{box-shadow:var(--neon)}
.switch .pastille{width:26px;height:26px;border-radius:50%;background:var(--ciel);
  box-shadow:0 0 16px rgba(10,186,181,.9);transition:.3s}
.switch[aria-pressed="false"]{color:#05605d;background:rgba(5,96,93,.10)}
.switch[aria-pressed="false"] .pastille{background:#9ab7b6;box-shadow:none}
label.f{display:block;font-weight:900;text-transform:uppercase;font-size:.74rem;letter-spacing:.11em;
  color:var(--magenta);margin:20px 0 9px}
select,input[type=text],input[type=tel],textarea{
  width:100%;padding:13px 14px;border:2px solid var(--ciel);border-radius:12px;
  font-family:inherit;font-size:1rem;background:var(--blanc);color:var(--encre)}
input[type=range]{width:100%;accent-color:var(--ciel)}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opts button{flex:1 1 auto;background:var(--cielpale);border:2px solid var(--ciel2);border-radius:12px;
  padding:11px 10px;font-weight:800;font-size:.82rem;cursor:pointer;font-family:inherit;color:var(--encre);
  text-transform:uppercase;letter-spacing:.03em;transition:.22s}
.opts button:hover{border-color:var(--ciel);box-shadow:var(--neon)}
.opts button[aria-pressed="true"]{background:var(--magenta);border-color:var(--ciel);color:#fff}
.recap{margin-top:22px;background:var(--cielpale);border:2px dashed var(--ciel);border-radius:14px;padding:18px}
.recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.9rem}
.recap dt{color:var(--cielfonce);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;font-weight:800}
.recap dd{margin:0;font-weight:800}

/* ============ AVANT / APRES ============ */
.aa{position:relative;max-width:840px;margin:26px auto 0;border-radius:var(--r);overflow:hidden;
  border:3px solid var(--ciel);box-shadow:var(--ombre-f);background:#fff}
.aa .couche{position:absolute;top:0;left:0;bottom:0;width:50%;overflow:hidden}
.aa .etiq{position:absolute;top:12px;font-size:.68rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;color:#fff;z-index:3}
.aa .etiq.g{left:12px;background:#8a6b79}
.aa .etiq.d{right:12px;background:var(--ciel)}
.aa input[type=range]{position:absolute;bottom:14px;left:6%;width:88%;z-index:4;accent-color:var(--ciel)}

/* ============ CHIFFRES ============ */
.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:30px;
  max-width:720px;margin-left:auto;margin-right:auto}
.stat .in{padding:24px 16px}
.stat b{display:block;font-size:clamp(1.9rem,5vw,2.6rem);font-weight:900;color:var(--rose);line-height:1}
.stat span{display:block;margin-top:8px;font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--cielfonce)}

/* ============ ZONES ============ */
.zones{display:grid;gap:20px;grid-template-columns:1fr;margin-top:34px;text-align:left}
@media(min-width:840px){.zones{grid-template-columns:1fr 1fr}}
.zn .in{padding:28px 22px}
.zn h3{color:var(--magenta);display:flex;align-items:center;justify-content:center;gap:10px}
.zn .deps{margin:14px auto 0;display:inline-block;font-size:.76rem;font-weight:900;letter-spacing:.11em;
  color:var(--cielfonce);text-transform:uppercase;background:var(--cielpale);
  border:2px solid var(--ciel);border-radius:999px;padding:8px 18px}
.zn ul{list-style:none;margin:18px 0 0;padding:0}
.zn li{font-size:.86rem;color:var(--cielfonce);padding:8px 0;border-bottom:1px solid var(--cielpale);
  text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.zn li:last-child{border-bottom:0}

/* ============ ETAPES ============ */
.etapes{counter-reset:e;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.etape .in{padding:26px 20px}
.etape .in::before{counter-increment:e;content:counter(e);display:block;
  width:50px;height:50px;line-height:50px;text-align:center;border-radius:50%;
  background:linear-gradient(140deg,var(--ciel),var(--cielfonce));color:#fff;font-weight:900;
  font-size:1.25rem;margin:0 auto 16px;box-shadow:0 0 22px rgba(10,186,181,.55)}
.etape h3{color:var(--magenta)}
.etape p{color:var(--cielfonce);margin:10px 0 0;font-size:.86rem;text-transform:uppercase;
  line-height:1.55}

/* ============ FAQ ============ */
.faq{max-width:860px;margin:0 auto}
.faq details{background:var(--blanc);border:3px solid var(--ciel2);border-radius:14px;
  margin-bottom:10px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq details:hover{border-color:var(--ciel);box-shadow:var(--neon)}
.faq details[open]{border-color:var(--ciel);box-shadow:var(--neon)}
.faq summary{cursor:pointer;padding:17px 18px;font-weight:900;text-transform:uppercase;
  font-size:.9rem;color:var(--magenta);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--ciel);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 18px 18px;color:#5d3b4c;font-size:.95rem}

/* ============ DEVIS ============ */
.devis{background:var(--bonbon);border-top:3px solid var(--ciel);border-bottom:3px solid var(--ciel)}
form{max-width:660px;margin:26px auto 0;background:var(--blanc);border:3px solid var(--ciel);
  border-radius:var(--r);padding:26px;box-shadow:0 0 44px rgba(10,186,181,.22);text-align:left}
form .row{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:620px){form .row.two{grid-template-columns:1fr 1fr}}
.note{font-size:.83rem;color:var(--gris);margin-top:14px;text-align:center}

/* ============ PIED ============ */
footer{background:linear-gradient(180deg,#0abab5,#7fdedb);color:#04403e;padding:50px 0 34px;
  font-size:.94rem;text-align:center;border-top:4px solid var(--magenta)}
footer a{color:#04403e;font-weight:800;text-decoration:none}
footer a:hover{color:var(--magenta)}
footer .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
footer h4{color:var(--magenta);font-size:.82rem;letter-spacing:.16em;margin-bottom:14px}
footer .nom b,footer .nom span,footer .nom em{font-style:normal;font-weight:900;white-space:nowrap}
footer .nom b{color:#04403e}
footer .nom span{color:var(--rose);text-shadow:0 0 16px rgba(255,30,125,.55)}
footer .nom em{color:#ffffff;text-shadow:0 0 14px rgba(255,255,255,.7)}
footer .nom{white-space:nowrap;display:inline-block;font-size:1.5rem;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:#04403e;margin-bottom:14px;background:#fff;
  border:3px solid var(--magenta);border-radius:14px;padding:10px 20px;
  box-shadow:0 0 0 3px rgba(255,30,125,.16), 0 0 26px rgba(255,30,125,.45)}

footer p{text-transform:uppercase;font-size:.78rem;font-weight:700;line-height:1.7;letter-spacing:.03em}
.contact{display:flex;flex-direction:column;gap:9px;align-items:center}
.contact a{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.72);
  border:2px solid #04403e;border-radius:999px;padding:9px 16px;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;transition:.26s}
.contact a:hover{background:#fff;border-color:var(--magenta);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(4,64,62,.22)}
.contact a.gros{font-size:1.02rem;font-weight:900;letter-spacing:.06em;padding:12px 22px}
.contact svg{width:17px;height:17px;flex:0 0 auto}

.site{display:flex;align-items:center;gap:11px;text-decoration:none;background:rgba(255,255,255,.80);
  border:3px solid #ffffff;border-radius:14px;padding:11px 13px;transition:.28s;text-align:left}
.site:hover{border-color:var(--magenta);background:#fff;transform:translateY(-3px);
  box-shadow:0 0 0 3px rgba(255,30,125,.18),0 0 24px rgba(255,30,125,.45)}
.site .rond{width:38px;height:38px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(140deg,var(--rose),var(--magenta));
  box-shadow:0 0 14px rgba(255,30,125,.45)}
.site .rond svg{width:19px;height:19px}
.site b{display:block;color:#04403e;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.25}
.site small{color:#05605d;font-size:.68rem;text-transform:uppercase}
footer .legal{margin-top:30px;padding-top:16px;border-top:2px solid rgba(4,64,62,.25);
  font-size:.72rem;color:#04403e;text-transform:uppercase;letter-spacing:.03em}

/* ============ BARRE MOBILE ============ */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:8px;padding:10px 12px;
  background:rgba(255,242,247,.97);border-top:2px solid var(--trait)}
.sticky .btn{flex:1;padding:14px 10px}
@media(min-width:960px){.sticky{display:none}}
@media(max-width:959px){body{padding-bottom:80px}}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}html.js .rv{opacity:1;transform:none}#intro{display:none}}

/* ---- liens vers les pages de ville ---- */
.villes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-top:26px}
.villes a{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:#fff;border:3px solid var(--ciel2);border-radius:14px;padding:13px 12px;
  font-weight:900;font-size:.78rem;color:var(--magenta);letter-spacing:.04em;transition:.26s}
.villes a:hover{border-color:var(--ciel);box-shadow:var(--neon);transform:translateY(-3px)}
.villes a svg{width:15px;height:15px;flex:0 0 auto}
.fil{font-size:.72rem;font-weight:800;color:var(--cielfonce);letter-spacing:.08em;margin:0 0 14px}
.fil a{color:var(--magenta);text-decoration:none}
.fil a:hover{text-decoration:underline}
.texte{max-width:78ch;margin:0 auto;text-align:center}
.texte p{color:#5d3b4c;font-size:.95rem;margin:18px 0 0;line-height:1.7}
.texte p strong{color:var(--magenta)}

/* ---- devanture sur petit ecran : moins de hauteur, donc moins de recadrage ---- */
@media(max-width:560px){
  .vit.grand .ph{min-height:150px}
  .vitduo .ph{min-height:118px}
  .devanture{gap:11px}
}

/* ============ PAGES PRODUIT ============ */
.prixhero{margin:22px 0 0;font-size:1.02rem;font-weight:900;color:var(--magenta);
  text-transform:uppercase;letter-spacing:.04em}
.prixhero b{font-size:1.7rem;display:inline-block;background:var(--blanc);
  border:3px solid var(--ciel);border-radius:14px;padding:6px 16px;margin:0 6px;
  box-shadow:0 0 0 3px rgba(10,186,181,.14), 0 0 22px rgba(10,186,181,.42)}
.prixhero .apd{font-size:.76rem;color:var(--cielfonce);letter-spacing:.12em;font-weight:800}
.deuxcol{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:940px){.deuxcol{grid-template-columns:1.08fr .92fr;align-items:start}}
.txtg{color:#5d3b4c;font-size:1rem;margin:16px 0 0;line-height:1.7}
.atouts{list-style:none;margin:14px 0 0;padding:0}
.atouts li{position:relative;padding:10px 0 10px 32px;border-bottom:1px solid var(--ciel2);
  color:#5d3b4c;font-size:.95rem}
.atouts li::before{content:"";position:absolute;left:4px;top:17px;width:12px;height:12px;
  border-radius:50%;background:var(--magenta);
  box-shadow:0 0 0 3px rgba(10,186,181,.30), 0 0 12px rgba(255,30,125,.7)}
.notep{margin:16px 0 0;font-size:.76rem;line-height:1.6;color:var(--cielfonce);
  letter-spacing:.03em;font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pill{display:inline-block;background:var(--blanc);border:3px solid var(--ciel2);
  border-radius:999px;padding:11px 18px;text-decoration:none;color:var(--magenta);
  font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;transition:.25s}
.pill:hover{border-color:var(--ciel);box-shadow:var(--neon);transform:translateY(-2px)}
.prixligne{margin:22px 0 0!important;font-weight:900;color:var(--cielfonce);
  text-transform:uppercase;font-size:.8rem;letter-spacing:.06em}
.prixligne b{color:var(--magenta);font-size:1.16rem}
.arem{background:#fff6b8;border:3px solid var(--magenta);border-radius:14px;padding:14px 16px;
  font-size:.8rem;font-weight:800;color:#6b3b00;letter-spacing:.03em;margin:0}
.mlien{color:#04403e;font-weight:900;font-size:.76rem;letter-spacing:.14em;text-decoration:none;
  border-bottom:2px solid rgba(4,64,62,.4)}
footer .adr{margin-top:14px;font-size:.78rem;font-weight:900;letter-spacing:.09em;
  line-height:1.7;color:#04403e}

/* ---- rien ne doit depasser sur telephone ---- */
.config > *,.deuxcol > *,.grid > *,.stats > *,.etapes > *,footer .cols > *{min-width:0}
.panneau{max-width:100%;overflow-wrap:anywhere}
.apercu,.apercu *{max-width:100%}

/* ---- emblemes des zones : tour Eiffel et lion de Lyon ---- */
.zn h3{display:flex;flex-direction:column;align-items:center;gap:10px}
.emb{width:54px;height:60px;color:var(--magenta);margin:0 auto;
  filter:drop-shadow(0 0 10px rgba(255,30,125,.35));transition:.35s}
.zn:hover .emb{color:var(--ciel);filter:drop-shadow(0 0 14px rgba(10,186,181,.7));transform:translateY(-3px)}

/* ---- rampe de LED sous le curseur : des points nets, jamais de tache ---- */
.led-pt{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:6;
  margin:-3.5px 0 0 -3.5px;animation:ampoule .76s ease-out forwards}
@keyframes ampoule{
  0%{opacity:0;transform:scale(.3)}
  18%{opacity:1;transform:scale(1.15)}
  45%{opacity:.95;transform:scale(1)}
  100%{opacity:0;transform:scale(.45)}}
.hero,#configurateur .apercu{position:relative}
.hero .wrap,#configurateur .apercu>*{position:relative;z-index:5}
@media(prefers-reduced-motion:reduce){.led-pt{display:none}}

/* ---- les six sites du groupe, centres, chacun sur une ligne ---- */
footer h4{text-align:center}
.reseau{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  margin:16px auto 0;max-width:1000px}
.reseau .site{display:flex;align-items:center;gap:11px;text-decoration:none;color:#04403e;
  background:rgba(255,255,255,.58);border:2px solid rgba(4,64,62,.18);border-radius:14px;
  padding:11px 13px;transition:.25s}
.reseau .site:hover{background:#fff;border-color:var(--magenta);transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(230,0,110,.22)}
.reseau .rond{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#04403e;
  display:flex;align-items:center;justify-content:center}
.reseau .rond svg{width:19px;height:19px}
.reseau .ttl{display:block;font-size:.88rem;font-weight:900;letter-spacing:.02em;white-space:nowrap;line-height:1.2}
.reseau .ttl b,.reseau .ttl i,.reseau .ttl em{font-style:normal;font-weight:900}
.reseau .ttl b{color:#04403e}
.reseau .ttl i{color:var(--rose)}
.reseau .ttl em{color:#ffffff;text-shadow:0 1px 2px rgba(4,64,62,.55)}
.reseau .site small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  color:#0a5b58;line-height:1.3;margin-left:auto;text-align:right;max-width:9.5em}
@media(max-width:560px){
  .reseau{grid-template-columns:1fr}
  .reseau .site small{max-width:none;margin-left:auto}}

/* ---- pied de page : tout centre, et le .FR redevient lisible ---- */
footer .nom em{color:var(--ciel)!important;text-shadow:0 0 12px rgba(10,186,181,.5)!important}
footer .cols{text-align:center;justify-items:center}
footer .cols>div{width:100%}
footer .nom{font-size:1.24rem;max-width:100%;padding:9px 16px}
footer .contact{align-items:center}
@media(max-width:560px){footer .nom{font-size:1rem;padding:8px 12px}}

/* ---- les six sites : tuiles compactes, centrees, sur une seule ligne ---- */
.reseau{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px;
  max-width:1060px;margin:16px auto 0}
.reseau .site{flex:0 0 auto;width:164px;flex-direction:column;align-items:center;
  text-align:center;gap:7px;padding:13px 8px}
.reseau .ttl{font-size:.82rem;white-space:nowrap}
.reseau .site small{margin-left:0;text-align:center;max-width:none;font-size:.6rem;
  letter-spacing:.06em}
@media(max-width:700px){.reseau .site{width:calc(50% - 6px)}}
@media(max-width:380px){.reseau .site{width:100%}}
.reseau .ttl b,.reseau .ttl i,.reseau .ttl em{display:inline!important}
.reseau .ttl{width:100%}
.reseau .ttl em{color:var(--cielfonce)!important;text-shadow:none!important}

/* ===================================================================
   PHOTOS ENTIERES : plus rien n'est jamais recadre
   =================================================================== */
.ph{background-size:contain!important;background-repeat:no-repeat;background-position:center!important;
  background-color:#1b0a15}
.vit .ph{min-height:0;aspect-ratio:2.05/1;filter:none}
.devanture.une{grid-template-columns:1fr!important;max-width:940px}
.devanture.une .vit.grand .ph{aspect-ratio:2.05/1;min-height:0}
.produit .vig{height:auto;aspect-ratio:16/10;background-color:#1b0a15}
.galerie .ph,.photos .ph{aspect-ratio:16/10;height:auto!important;background-color:#1b0a15}
@media(max-width:560px){
  .devanture.une .vit.grand .ph{aspect-ratio:2.05/1}
}
.galph{aspect-ratio:16/10;border-radius:20px;border:3px solid var(--ciel);height:auto!important}

/* ===================================================================
   EN-TETE : le nom tient TOUJOURS sur une ligne, meme sur iPhone
   =================================================================== */
.logo span{text-shadow:none!important}          /* plus de degrade sur ENSEIGNE */
.logo em{text-shadow:none!important}
.logo{box-shadow:0 0 0 2px rgba(10,186,181,.16), 0 4px 16px rgba(10,186,181,.30)}
.logo:hover{box-shadow:0 0 0 2px rgba(255,30,125,.20), 0 6px 22px rgba(10,186,181,.55)}
@media(max-width:560px){
  .bar{height:64px;padding:0;gap:6px}
  .logo{display:inline-block;white-space:nowrap!important;overflow:visible!important;
    text-overflow:clip!important;font-size:.72rem;letter-spacing:.01em;padding:6px 9px;
    border-width:2px;line-height:1.1;text-align:center}
  .logo span{display:inline!important}
  .btn.sm{padding:8px 10px;font-size:.58rem;border-width:2px}
  .btn.tel{width:36px;height:36px;border-width:2px}
  .btn.tel svg{width:15px;height:15px}
  .burger{width:38px;height:38px;padding:9px;border-width:2px}
  .actions{gap:6px}}
@media(max-width:400px){
  .logo{font-size:.63rem;padding:5px 7px}
  .btn.sm{padding:7px 8px;font-size:.52rem;letter-spacing:.02em}
  .btn.tel{width:32px;height:32px}
  .burger{width:34px;height:34px;padding:8px}
  .bar{gap:5px;height:58px}}
@media(max-width:344px){
  .logo{font-size:.56rem}
  .btn.sm{font-size:.47rem;padding:6px 7px}}

/* ---- sur telephone, l'en-tete ne garde que le menu et le nom :
       le telephone et le devis sont deja dans la barre fixe du bas ---- */
@media(max-width:700px){
  .actions{display:none}
  .bar{height:62px;gap:10px;justify-content:flex-start}
  .logo{font-size:1rem;padding:8px 13px;letter-spacing:.03em}
}
@media(max-width:380px){.logo{font-size:.88rem;padding:7px 11px}}

/* ---- aucune grille ne force une largeur superieure a l'ecran ---- */
#liste{grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))}
.grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.etapes{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.villes{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
footer .cols{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.zones{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
#liste .produit,#liste .produit *{min-width:0}
#liste .produit{overflow-wrap:anywhere}
.specs{table-layout:fixed;width:100%}
.specs th,.specs td{overflow-wrap:anywhere}

/* ---- petits ecrans : une seule colonne partout, aucune largeur imposee ---- */
@media(max-width:719px){
  #liste,.grid,.stats,.etapes,.villes,.zones,footer .cols,.deuxcol,.config,.devanture{
    grid-template-columns:1fr!important}
  .pills,.tabs{gap:8px}
}

/* ===================================================================
   TITRE : les lettres s'allument UNE PAR UNE, puis le tube grésille
   =================================================================== */
.hero h1 em{animation:none!important;color:inherit!important;text-shadow:none!important;
  font-style:normal;display:inline-block}
.hero h1 em i{font-style:normal;display:inline-block;color:#efc2d7;text-shadow:none;
  transition:color .09s linear,text-shadow .09s linear}
.hero h1 em i.on{color:#fff;
  text-shadow:0 0 6px #ff8cc0,0 0 18px #ff1e7d,0 0 40px #ff1e7d,0 0 72px rgba(255,30,125,.62)}
.hero h1 em i.demi{color:#ffd7e8;text-shadow:0 0 5px rgba(255,30,125,.5)}
@media(prefers-reduced-motion:reduce){
  .hero h1 em i{color:#fff!important;
    text-shadow:0 0 6px #ff8cc0,0 0 18px #ff1e7d,0 0 40px #ff1e7d!important}}
.emb{width:56px;height:62px}
.emb.large{width:74px;height:66px}

/* ===================================================================
   PIED DE PAGE : les pastilles passent en rose pale sur le bleu Tiffany
   =================================================================== */
.reseau .site,footer .contact a{
  background:rgba(255,231,242,.92)!important;
  border-color:rgba(230,0,110,.28)!important}
.reseau .site:hover,footer .contact a:hover{
  background:#fff!important;border-color:var(--magenta)!important;
  box-shadow:0 10px 22px rgba(230,0,110,.26)!important}
.reseau .rond{background:var(--magenta)}
footer .contact a{color:#7a0040}
footer .contact a:hover{color:var(--magenta)}
footer .contact .gros{color:#6e0039}
.reseau .ttl b{color:#3d0020}
.reseau .site small{color:#8a2a5c}
.reseau .ttl em{color:var(--ciel)!important}
main,footer,section{overflow-x:clip}

/* ---- entete : le menu se resserre pour ne jamais deborder ---- */
@media(min-width:1040px) and (max-width:1700px){
  nav.menu a{font-size:.66rem;padding:8px 7px;letter-spacing:.02em}
  nav.menu{margin-left:4px;gap:0}
  .logo{font-size:1.02rem;padding:6px 11px}
  .btn.sm{padding:10px 13px;font-size:.7rem}
  .btn.tel{width:40px;height:40px}
  .bar{gap:8px}}
@media(min-width:1040px) and (max-width:1120px){
  nav.menu a{font-size:.6rem;padding:7px 5px}
  .logo{font-size:.92rem;padding:6px 9px}
  .btn.sm{padding:9px 11px;font-size:.64rem}
  .bar{gap:6px}}

/* ===================================================================
   CURSEUR 4 : la rampe d'ampoules de l'accueil
   =================================================================== */
.rampe{position:absolute;inset:0;z-index:1;pointer-events:none;display:grid;
  grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(12,1fr)}
.amp{align-self:center;justify-self:center;width:5px;height:5px;border-radius:50%;
  background:rgba(230,0,110,.12);transition:background .55s,box-shadow .55s,transform .55s}
.amp.on{background:#ff3d90;box-shadow:0 0 7px #ff1e7d,0 0 15px rgba(255,30,125,.85);
  transform:scale(1.5);transition:none}
/* CURSEUR 3 : les etincelles de soudure du configurateur */
.etinc{position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none;z-index:9}
#configurateur .apercu{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){.rampe,.etinc{display:none}}

/* ===================================================================
   BOUTON MENU : un petit caisson d'enseigne dont les tubes s'allument
   =================================================================== */
.burger{position:relative;background:#1b0a15;border:2.5px solid var(--ciel);border-radius:12px;
  width:46px;height:46px;padding:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;overflow:hidden;
  box-shadow:0 0 0 2px rgba(10,186,181,.16), 0 4px 16px rgba(10,186,181,.30);
  transition:box-shadow .3s,border-color .3s}
.burger span{display:block;width:21px;height:3px;border-radius:2px;margin:0;
  background:#5a2340;box-shadow:none;
  transition:background .18s,box-shadow .18s,transform .3s,opacity .25s;
  animation:tube 2.6s infinite}
.burger span:nth-child(1){animation-delay:0s}
.burger span:nth-child(2){animation-delay:.28s;width:15px}
.burger span:nth-child(3){animation-delay:.56s}
@keyframes tube{
  0%,64%{background:#5a2340;box-shadow:none}
  70%{background:#ff8cc0;box-shadow:0 0 5px #ff1e7d,0 0 11px #ff1e7d}
  74%{background:#7a3055;box-shadow:none}
  78%,96%{background:#ff8cc0;box-shadow:0 0 6px #ff1e7d,0 0 14px #ff1e7d}
  100%{background:#5a2340;box-shadow:none}}
.burger:hover{border-color:var(--rose);
  box-shadow:0 0 0 2px rgba(255,30,125,.22), 0 0 20px rgba(255,30,125,.6)}
.burger:hover span{animation:none;background:#ffffff;
  box-shadow:0 0 6px #ff8cc0,0 0 16px #ff1e7d,0 0 30px rgba(255,30,125,.7)}
.burger[aria-expanded="true"]{background:#2c0716;border-color:var(--rose)}
.burger[aria-expanded="true"] span{animation:none;background:#fff;width:21px;
  box-shadow:0 0 6px #ff8cc0,0 0 16px #ff1e7d}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.burger span{animation:none;background:#ff8cc0}}
@media(max-width:700px){.burger{width:44px;height:44px}}
@media(max-width:400px){.burger{width:40px;height:40px}.burger span{width:18px}
  .burger span:nth-child(2){width:13px}}

/* ---- l'en-tete : tout bien aligne au centre de la barre ---- */
.bar{align-items:center}
.logo{display:inline-flex;align-items:center;justify-content:center}
.actions{align-items:center}
.btn.tel{align-items:center;justify-content:center}

/* ===================================================================
   EN-TETE SUR TELEPHONE : menu a gauche, nom AU CENTRE, telephone a droite
   =================================================================== */
@media(max-width:700px){
  .bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    gap:8px;height:64px;padding:0}
  .burger{grid-column:1;justify-self:start}
  .logo{grid-column:2;justify-self:center;font-size:.92rem;padding:7px 12px;
    white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
  .logo span{display:inline!important}
  .actions{grid-column:3;justify-self:end;display:flex;margin-left:0}
  .actions .btn.sm{display:none}           /* le devis est deja dans la barre du bas */
  .btn.tel{width:42px;height:42px;border-width:2.5px}
  .btn.tel svg{width:18px;height:18px}}
@media(max-width:400px){
  .logo{font-size:.78rem;padding:6px 9px}
  .btn.tel{width:38px;height:38px}
  .burger{width:38px;height:38px}
  .bar{gap:6px;height:58px}}
@media(max-width:340px){.logo{font-size:.68rem;padding:5px 7px}}