/* =========================================================================
   PHILLIAS 32 — V2 · feuille de style
   Aucun style en ligne nulle part (CSP flylab.fr : style-src 'self').
   Palette : la scène s'allume. Rouge/magenta = identité, bleu/orange/jaune
   = lumières contextuelles. Les sections claires servent de respiration.
   ========================================================================= */

@font-face{font-family:'Bricolage';src:url('fonts/BricolageGrotesque-Variable.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'InterVar';src:url('fonts/Inter-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --nuit:#0B0D1C; --nuit2:#11132a; --prune:#17102A; --encre:#05060F;
  --papier:#F7F5FB; --papier2:#EDEAF5;
  --rouge:#E21D48; --rouge-clair:#FF3F68; --magenta:#D946EF;
  --bleu:#3B82F6; --orange:#F97316; --jaune:#FDE047; --vert:#34D399;
  --texte:#FAF8FC; --doux:#A6ABC9; --sombre:#1A1730;

  --accent:var(--rouge); --accent2:var(--magenta);

  --display:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;
  --texte-f:'InterVar','Inter',system-ui,-apple-system,sans-serif;

  --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:40px;
  --wrap:1220px; --pad:clamp(16px,4vw,32px);
  --t:.32s cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--nuit);color:var(--texte);
  font-family:var(--texte-f);font-size:clamp(16px,1.05vw,17.5px);line-height:1.65;
  font-weight:380;letter-spacing:.005em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:8px;top:8px;position:fixed;z-index:99;background:var(--rouge);color:#fff;padding:10px 16px;border-radius:var(--r-s)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:6px}

/* ---------- typographie ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.035em;margin:0}
h1{font-size:clamp(2.6rem,8.2vw,6.4rem)}
h2{font-size:clamp(2rem,5.1vw,3.9rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1em}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--doux);max-width:62ch;line-height:1.6}
.oeil{font-family:var(--texte-f);font-size:.735rem;font-weight:650;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.oeil::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;flex:none}
.brille{background:linear-gradient(100deg,var(--accent) 0%,var(--accent2) 52%,var(--jaune) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-bottom:.06em}
.petit{font-size:.85rem;color:var(--doux)}

/* ---------- décor : faisceaux ---------- */
.faisceaux{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.75}
.faisceaux i{position:absolute;top:-28vh;width:46vw;height:150vh;transform-origin:50% 0;filter:blur(46px);opacity:.32;border-radius:50%}
.f1{left:-14vw;background:radial-gradient(ellipse at 50% 0,var(--rouge),transparent 66%);transform:rotate(15deg)}
.f2{left:32vw;background:radial-gradient(ellipse at 50% 0,var(--magenta),transparent 66%);transform:rotate(-9deg)}
.f3{right:-16vw;background:radial-gradient(ellipse at 50% 0,var(--bleu),transparent 66%);transform:rotate(-20deg)}
@media (prefers-reduced-motion:no-preference){
  .faisceaux i{animation:balayer 15s ease-in-out infinite alternate}
  .f2{animation-duration:19s;animation-delay:-4s}
  .f3{animation-duration:23s;animation-delay:-9s}
}
@keyframes balayer{from{transform:rotate(var(--a,12deg)) translateX(-3vw)}to{transform:rotate(calc(var(--a,12deg) * -1)) translateX(3vw)}}
.f1{--a:15deg}.f2{--a:-9deg}.f3{--a:-20deg}

/* ---------- navigation ---------- */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);
  background:color-mix(in srgb,var(--encre) 78%,transparent);
  border-bottom:1px solid rgba(255,255,255,.07);transition:background var(--t)}
.nav__in{display:flex;align-items:center;gap:clamp(10px,2.4vw,30px);min-height:66px}
.nav__logo{flex:none;display:flex;align-items:center;padding:4px 0}
.nav__logo img{height:46px;width:auto}
@media (max-width:520px){.nav__logo img{height:38px}}
.nav__liens{display:flex;gap:clamp(10px,1.6vw,24px);margin-left:auto;flex-wrap:wrap}
.nav__liens a{text-decoration:none;font-size:.905rem;font-weight:500;color:var(--doux);
  padding:6px 2px;position:relative;transition:color var(--t);white-space:nowrap}
.nav__liens a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--rouge),var(--magenta));transition:right var(--t)}
.nav__liens a:hover{color:var(--texte)}
.nav__liens a:hover::after{right:0}
.nav__tel{flex:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:650;font-size:.93rem;padding:9px 15px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);transition:border-color var(--t),background var(--t)}
.nav__tel:hover{border-color:var(--rouge);background:rgba(226,29,72,.12)}
@media (max-width:900px){.nav__liens{display:none}}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:650;font-size:1rem;
  border:1px solid transparent;cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);
  line-height:1.1;text-align:center}
.btn--p{background:linear-gradient(100deg,var(--rouge),var(--magenta));color:#fff;
  box-shadow:0 10px 34px -10px rgba(226,29,72,.75)}
.btn--p:hover{transform:translateY(-2px);box-shadow:0 16px 44px -10px rgba(226,29,72,.9)}
.btn--f{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:var(--texte)}
.btn--f:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.36);transform:translateY(-2px)}
.btn--clair{background:var(--sombre);color:#fff}
.btn--clair:hover{transform:translateY(-2px)}
.btn[disabled]{opacity:.42;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;padding:clamp(40px,7vh,86px) 0 clamp(44px,7vh,80px);overflow:hidden}
.hero__fond{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  opacity:.34;transform:scale(1.1);filter:saturate(1.15)}
.hero__voile{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,6,15,.7) 0%,rgba(5,6,15,.5) 32%,var(--nuit) 97%)}
.hero__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,56px);align-items:center}
.hero h1{margin-bottom:20px;max-width:13ch}
.hero .lead{max-width:52ch;color:#D5D8EC}

/* la boucle animée du logo : cadrée pour sortir le filigrane de génération
   (il est en bas à droite du rendu d'origine — on garde 88 % × 85 % de l'image) */
.hero__anim{position:relative;width:100%;aspect-ratio:1126/612;overflow:hidden;
  border-radius:var(--r-l);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 90px -34px rgba(226,29,72,.6),0 0 0 1px rgba(255,255,255,.05) inset;
  background:#05060F}
.hero__anim video{position:absolute;top:0;left:0;width:113.64%;height:117.65%;
  max-width:none;object-fit:cover}
.hero__anim::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%,rgba(226,29,72,.24),transparent 62%)}
@media (max-width:940px){
  .hero__in{grid-template-columns:1fr}
  .hero__anim{order:-1;max-width:620px}
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__note{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;
  font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--jaune);
  border:1px solid rgba(253,224,71,.34);background:rgba(253,224,71,.09);
  padding:7px 15px;border-radius:999px}
.hero__lieu{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--doux);margin-bottom:16px}

/* ---------- sections ---------- */
.sec{position:relative;z-index:1;padding:clamp(58px,9vh,116px) 0}
.sec--clair{background:var(--papier);color:var(--sombre)}
.sec--clair .lead,.sec--clair .petit{color:#5A5570}
.sec--clair .oeil{color:var(--rouge)}
.sec--bord{border-top:1px solid rgba(255,255,255,.07)}
.sec__tete{max-width:70ch;margin-bottom:clamp(30px,5vh,54px)}

/* bandeau de preuves */
.preuves{position:relative;z-index:1;border-block:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.022);padding:26px 0}
.preuves__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:22px}
.preuve b{display:block;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:6px}
.preuve span{font-size:.845rem;color:var(--doux);line-height:1.4;display:block}
.preuve:nth-child(1) b{color:var(--rouge-clair)}
.preuve:nth-child(2) b{color:var(--magenta)}
.preuve:nth-child(3) b{color:var(--bleu)}
.preuve:nth-child(4) b{color:var(--jaune)}

/* ---------- les trois portes ---------- */
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.porte{position:relative;display:flex;flex-direction:column;padding:30px 26px 26px;
  border-radius:var(--r-l);border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(168deg,rgba(255,255,255,.075),rgba(255,255,255,.018));
  overflow:hidden;text-align:left;cursor:pointer;width:100%;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.porte::before{content:"";position:absolute;inset:-40% -10% auto;height:74%;
  background:radial-gradient(ellipse at 50% 0,var(--c),transparent 68%);opacity:.3;
  transition:opacity var(--t);pointer-events:none}
.porte:hover,.porte:focus-visible{transform:translateY(-6px);border-color:var(--c);
  box-shadow:0 26px 60px -26px var(--c)}
.porte:hover::before{opacity:.62}
.porte__n{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.2em;
  color:var(--c);margin-bottom:14px}
.porte h3{margin-bottom:10px}
.porte p{color:var(--doux);font-size:.945rem;margin-bottom:18px;flex:1}
.porte__prix{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--texte);
  padding-top:16px;border-top:1px solid rgba(255,255,255,.11)}
.porte__prix small{display:block;font-family:var(--texte-f);font-weight:400;
  font-size:.79rem;color:var(--doux);letter-spacing:0;margin-top:3px}
.porte--1{--c:var(--rouge)}.porte--2{--c:var(--bleu)}.porte--3{--c:var(--orange)}

/* ---------- les trois packs ---------- */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:22px}
.pack{display:flex;flex-direction:column;border-radius:var(--r-l);overflow:hidden;
  background:#fff;color:var(--sombre);border:1px solid rgba(0,0,0,.07);
  box-shadow:0 18px 44px -28px rgba(11,13,28,.5);
  transition:transform var(--t),box-shadow var(--t)}
.pack:hover{transform:translateY(-6px);box-shadow:0 34px 70px -30px rgba(11,13,28,.62)}
.pack__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--nuit2)}
.pack__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pack:hover .pack__img img{transform:scale(1.055)}
.pack__tag{position:absolute;left:12px;top:12px;font-size:.66rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(5,6,15,.76);color:#fff;padding:5px 11px;border-radius:999px;
  backdrop-filter:blur(6px)}
.pack__corps{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.pack__label{font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--rouge);margin-bottom:9px}
.pack__prix{font-family:var(--display);font-size:clamp(2rem,3.6vw,2.7rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;margin-bottom:4px}
.pack__prix small{font-family:var(--texte-f);font-size:.88rem;font-weight:400;color:#6B6684;letter-spacing:0}
.pack__devis{font-size:1.35rem;font-weight:650;letter-spacing:-.02em;color:#6B6684}
.pack__accroche{color:#5A5570;font-size:.945rem;margin:12px 0 16px}
.pack ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.pack li{position:relative;padding-left:24px;font-size:.905rem;color:#413C57;line-height:1.45}
.pack li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:50%;
  background:linear-gradient(135deg,var(--rouge),var(--magenta))}
.pack .btn{margin-top:auto}

/* ---------- configurateur ---------- */
.conf{position:relative;z-index:1}
.conf__etapes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;padding:0;list-style:none;counter-reset:e}
.conf__etapes li{counter-increment:e;display:flex;align-items:center;gap:9px;font-size:.845rem;
  font-weight:550;color:var(--doux);padding:9px 17px 9px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);transition:all var(--t)}
.conf__etapes li::before{content:counter(e);display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;background:rgba(255,255,255,.09);font-size:.78rem;font-weight:700;
  font-family:var(--display);flex:none}
.conf__etapes li[data-actif]{color:var(--texte);border-color:var(--rouge);background:rgba(226,29,72,.14)}
.conf__etapes li[data-actif]::before{background:linear-gradient(135deg,var(--rouge),var(--magenta));color:#fff}
.conf__etapes li[data-fait]::before{content:"✓";background:var(--vert);color:#06281c}

.panneau{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-l);
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  padding:clamp(20px,3.4vw,34px);margin-bottom:20px}
.panneau > h3{margin-bottom:6px}
.panneau__sous{color:var(--doux);font-size:.925rem;margin-bottom:22px}

/* choix segmentés */
.choix{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.choix label{position:relative;display:inline-flex;align-items:center;gap:9px;padding:11px 19px;
  border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.035);
  cursor:pointer;font-size:.92rem;font-weight:500;transition:all var(--t)}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix label:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08)}
.choix input:checked + span{color:#fff}
.choix label:has(input:checked){border-color:var(--rouge);background:rgba(226,29,72,.2);
  box-shadow:0 0 0 1px var(--rouge) inset}
.choix input:focus-visible + span{outline:3px solid var(--jaune);outline-offset:5px;border-radius:4px}

/* calendrier */
/* repli sans JavaScript : un simple champ date natif */
.cal__repli{display:flex;flex-direction:column;gap:8px;max-width:340px;margin-bottom:18px}
.cal__repli label{font-size:.83rem;font-weight:600;color:var(--doux)}
.cal__repli input{padding:13px 15px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.3);font-size:.965rem}
.cal__repli input:focus{border-color:var(--rouge);outline:none}

.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px;margin-bottom:20px}
.cal__mois{border:1px solid rgba(255,255,255,.09);border-radius:var(--r-m);
  background:rgba(255,255,255,.028);padding:16px}
.cal__titre{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal__titre h4{font-size:1rem;font-family:var(--display);font-weight:650;letter-spacing:-.01em;text-transform:capitalize}
.cal__nav{display:flex;gap:6px}
.cal__nav button{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);cursor:pointer;display:grid;place-items:center;
  font-size:.9rem;line-height:1;transition:all var(--t)}
.cal__nav button:hover:not([disabled]){background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.cal__jours,.cal__grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__jours{margin-bottom:6px}
.cal__jours span{text-align:center;font-size:.68rem;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:var(--doux);padding:3px 0}
.cal__c{aspect-ratio:1;border:0;border-radius:9px;background:rgba(255,255,255,.05);color:var(--texte);
  font-size:.845rem;font-weight:500;cursor:pointer;display:grid;place-items:center;position:relative;
  transition:all .18s ease;font-variant-numeric:tabular-nums}
.cal__c[data-vide]{background:none;cursor:default;pointer-events:none}
.cal__c:hover:not([disabled]):not([data-vide]){background:rgba(255,255,255,.16);transform:scale(1.08)}
.cal__c[data-etat="demande"]{background:rgba(249,115,22,.2);color:#FFC79A;
  box-shadow:0 0 0 1px rgba(249,115,22,.44) inset}
.cal__c[data-etat="indisponible"],.cal__c[disabled]{background:rgba(255,255,255,.028);color:#4C5070;
  cursor:not-allowed;text-decoration:line-through;text-decoration-color:rgba(226,29,72,.66)}
/* l'ordre compte : le jour choisi porte aussi data-plage, il doit gagner */
.cal__c[data-plage]{background:rgba(226,29,72,.3);color:#fff;
  box-shadow:0 0 0 1px rgba(226,29,72,.55) inset}
.cal__c[data-choisi]{background:linear-gradient(135deg,var(--rouge),var(--magenta));color:#fff;
  font-weight:700;box-shadow:0 6px 18px -6px rgba(226,29,72,.85)}
.cal__legende{display:flex;flex-wrap:wrap;gap:16px;font-size:.815rem;color:var(--doux);margin-top:6px}
.cal__legende i{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:7px;
  vertical-align:-2px}
.lg-libre{background:rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.lg-dem{background:rgba(249,115,22,.42);box-shadow:0 0 0 1px rgba(249,115,22,.8) inset}
.lg-ind{background:rgba(255,255,255,.05);box-shadow:0 0 0 1.5px rgba(226,29,72,.75) inset}
.lg-sel{background:linear-gradient(135deg,var(--rouge),var(--magenta))}

.duree{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.duree label{font-weight:550}
.pas{display:inline-flex;align-items:center;border-radius:999px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.pas button{width:38px;height:38px;border:0;background:none;cursor:pointer;font-size:1.15rem;
  line-height:1;transition:background var(--t)}
.pas button:hover:not([disabled]){background:rgba(255,255,255,.13)}
.pas input{width:52px;height:38px;border:0;background:none;text-align:center;font-weight:700;
  font-family:var(--display);font-size:1.02rem;-moz-appearance:textfield}
.pas input::-webkit-outer-spin-button,.pas input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.duree__res{font-size:.9rem;color:var(--doux)}
.duree__res b{color:var(--texte);font-weight:650}

/* catalogue */
.filtres{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.filtres button{padding:9px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.035);cursor:pointer;font-size:.885rem;font-weight:500;transition:all var(--t)}
.filtres button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.filtres button[data-actif]{background:rgba(226,29,72,.2);border-color:var(--rouge);color:#fff}

.cat{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.art{position:relative;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-m);
  background:rgba(255,255,255,.032);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.art:hover{border-color:rgba(255,255,255,.28);transform:translateY(-4px);
  box-shadow:0 22px 46px -26px rgba(0,0,0,.8)}
.art:has(input:checked){border-color:var(--rouge);background:rgba(226,29,72,.1);
  box-shadow:0 0 0 1px var(--rouge) inset,0 20px 44px -26px rgba(226,29,72,.7)}
.art__pick{display:block;cursor:pointer;position:relative}
.art__pick input{position:absolute;opacity:0;width:1px;height:1px}
/* span inline par défaut : sans display:block, aspect-ratio ne s'applique pas
   et les cartes se déséquilibrent selon l'orientation de la photo. */
.art__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--nuit2);position:relative}
.art__img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.art:hover .art__img img{transform:scale(1.06)}
.art__check{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);background:rgba(5,6,15,.55);backdrop-filter:blur(5px);
  display:grid;place-items:center;transition:all var(--t);z-index:2}
.art__check::after{content:"";width:9px;height:5px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform var(--t);margin-top:-3px}
.art:has(input:checked) .art__check{background:linear-gradient(135deg,var(--rouge),var(--magenta));border-color:transparent}
.art:has(input:checked) .art__check::after{transform:rotate(-45deg) scale(1)}
.art__corps{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.art__nom{font-family:var(--display);font-weight:650;font-size:1rem;letter-spacing:-.015em;
  line-height:1.2;margin-bottom:5px}
.art__ref{font-size:.735rem;color:var(--bleu);font-weight:550;margin-bottom:7px}
.art__desc{font-size:.83rem;color:var(--doux);line-height:1.42;margin-bottom:11px;flex:1;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.art__bas{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.09);flex-wrap:wrap}
.art__prix{font-family:var(--display);font-weight:700;font-size:.955rem;letter-spacing:-.02em}
.art__prix small{font-family:var(--texte-f);font-weight:400;font-size:.75rem;color:var(--doux);letter-spacing:0}
.art__prix[data-devis]{color:var(--doux);font-size:.86rem;font-weight:550}
.art__stock{font-size:.745rem;color:var(--doux)}
.art__stock[data-bas]{color:var(--orange)}
.art__stock[data-nul]{color:var(--rouge-clair)}
.art__qte{display:flex;align-items:center;gap:6px;margin-top:11px}
.art__qte label{font-size:.755rem;color:var(--doux)}
.art__qte input{width:56px;padding:5px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);text-align:center;font-weight:650;-moz-appearance:textfield}
.art__qte input::-webkit-outer-spin-button,.art__qte input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* les deux packs ouvrent le catalogue : ils doivent se distinguer des articles */
.art--pack{border-color:rgba(226,29,72,.4);background:linear-gradient(168deg,rgba(226,29,72,.14),rgba(217,70,239,.05))}
.art--pack .art__nom{font-size:1.08rem}
.art--pack::after{content:"PACK";position:absolute;left:10px;top:10px;z-index:2;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;padding:4px 9px;border-radius:999px;
  background:linear-gradient(100deg,var(--rouge),var(--magenta));color:#fff}

.art[data-epuise]{opacity:.44}
.art[data-epuise] .art__pick{pointer-events:none}
.art__note{font-size:.735rem;color:var(--orange);margin-top:8px;line-height:1.35}

/* récapitulatif */
.reca{position:sticky;bottom:0;z-index:30;margin-top:24px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);
  background:color-mix(in srgb,var(--encre) 92%,transparent);backdrop-filter:blur(18px);
  padding:clamp(18px,2.6vw,26px);box-shadow:0 -12px 46px -18px rgba(0,0,0,.9)}
.reca__haut{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.reca__t{font-size:.75rem;font-weight:650;letter-spacing:.17em;text-transform:uppercase;
  color:var(--doux);margin-bottom:8px}
.reca__m{font-family:var(--display);font-size:clamp(1.8rem,4.4vw,2.85rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;
  background:linear-gradient(100deg,var(--rouge),var(--magenta) 60%,var(--jaune));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.reca__avert{font-size:.815rem;color:var(--doux);margin-top:9px;max-width:46ch;line-height:1.45}
.reca__lignes{list-style:none;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.1);display:grid;gap:7px;max-height:190px;overflow-y:auto}
.reca__lignes li{display:flex;justify-content:space-between;gap:14px;font-size:.885rem}
.reca__lignes span:first-child{color:var(--doux)}
.reca__lignes b{font-weight:650;white-space:nowrap}
.reca__lignes li[data-dep] span:first-child::before{content:"↳ ";color:var(--bleu)}
.reca__extra{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:6px;font-size:.83rem;color:var(--doux)}
.reca__extra b{color:var(--texte)}
.reca__alertes{margin-top:14px;display:grid;gap:8px}
.alerte{display:flex;gap:10px;font-size:.85rem;line-height:1.45;padding:11px 14px;border-radius:var(--r-s);
  background:rgba(249,115,22,.11);border:1px solid rgba(249,115,22,.3);color:#FFD3AE}
.alerte--info{background:rgba(59,130,246,.11);border-color:rgba(59,130,246,.3);color:#BDD6FF}
.reca__vide{color:var(--doux);font-size:.9rem}

/* ---------- écran LED ---------- */
.led{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:center}
.led__img{border-radius:var(--r-l);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.led__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.formats{display:grid;gap:11px;margin:24px 0 26px;list-style:none;padding:0}
.formats li{display:flex;align-items:center;gap:15px;padding:15px 18px;border-radius:var(--r-m);
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.032)}
.formats b{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;
  color:var(--orange);flex:none;min-width:72px}
.formats span{font-size:.9rem;color:var(--doux);line-height:1.42}
@media (max-width:880px){.led{grid-template-columns:1fr}}

/* ---------- atelier / galerie ---------- */
.video{border-radius:var(--r-l);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);background:#000}
.video video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:14px}
.galerie figure{margin:0;border-radius:var(--r-m);overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.1)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.galerie figure:hover img{transform:scale(1.06)}
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-size:.82rem;
  background:linear-gradient(transparent,rgba(5,6,15,.9));color:#E7E9F5}
.galerie figure:nth-child(1),.galerie figure:nth-child(6){grid-column:span 2}
@media (max-width:640px){.galerie figure{grid-column:span 1!important}}

/* ---------- portrait ---------- */
.apropos{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4.4vw,58px);align-items:center}
.apropos__p{border-radius:var(--r-l);overflow:hidden;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);position:relative}
.apropos__p img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:38% 22%}
.apropos__p::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 52%,rgba(226,29,72,.2))}
.signature{font-family:var(--display);font-size:1.25rem;font-weight:650;letter-spacing:-.02em;
  margin-top:22px;color:var(--texte)}
@media (max-width:840px){.apropos{grid-template-columns:1fr}}

/* ---------- méthode ---------- */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px}
.etape{padding:26px 24px;border-radius:var(--r-l);border:1px solid rgba(0,0,0,.08);background:#fff}
.sec--clair .etape{box-shadow:0 12px 34px -24px rgba(11,13,28,.5)}
.etape__n{font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.2em;
  color:var(--rouge);margin-bottom:14px}
.etape h3{margin-bottom:9px}
.etape p{font-size:.925rem;color:#5A5570;margin:0}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:11px;max-width:840px}
.faq details{border:1px solid rgba(255,255,255,.11);border-radius:var(--r-m);
  background:rgba(255,255,255,.032);overflow:hidden;transition:border-color var(--t)}
.faq details[open]{border-color:rgba(226,29,72,.42);background:rgba(226,29,72,.055)}
.faq summary{padding:18px 22px;cursor:pointer;font-weight:600;font-size:1.01rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;font-weight:400;
  color:var(--rouge);flex:none;line-height:1;transition:transform var(--t)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 22px 20px;margin:0;color:var(--doux);font-size:.935rem}

/* ---------- formulaire ---------- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ--large{grid-column:1/-1}
.champ label{font-size:.83rem;font-weight:600;color:var(--doux)}
.champ label .req{color:var(--rouge-clair)}
.champ input,.champ select,.champ textarea{padding:13px 15px;border-radius:var(--r-s);
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);font-size:.965rem;
  transition:border-color var(--t),background var(--t);width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--rouge);
  background:rgba(0,0,0,.44);outline:none}
.champ textarea{resize:vertical;min-height:110px;font-family:inherit}
.champ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--doux) 50%),linear-gradient(135deg,var(--doux) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.rgpd{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:.865rem;color:var(--doux);line-height:1.5}
.rgpd input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--rouge)}
.pot{position:absolute;left:-9999px}

/* ---------- pied ---------- */
.pied{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.09);
  padding:46px 0 30px;background:var(--encre)}
.pied__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:30px;margin-bottom:32px}
.pied h4{font-size:.75rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--doux);margin-bottom:13px;font-family:var(--texte-f)}
.pied a{color:var(--texte);text-decoration:none;transition:color var(--t)}
.pied a:hover{color:var(--rouge-clair)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}
.pied__logo img{height:38px;margin-bottom:14px}
.pied__bas{padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.815rem;color:var(--doux)}

/* ---------- pages annexes (légales, merci) ---------- */
.page-simple .nav__in{justify-content:space-between}
.annexe{max-width:72ch}
.annexe h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:26px}
.annexe h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:36px 0 14px}
.annexe h3{margin:26px 0 10px;color:var(--rouge-clair)}
.annexe p,.annexe li{color:var(--doux);line-height:1.7}
.annexe ul{padding-left:22px;display:grid;gap:8px;margin:0 0 18px}
.annexe a{color:var(--rouge-clair)}
.annexe .btn{margin-top:30px;color:var(--texte);text-decoration:none}
.page-simple .pied{margin-top:0}

/* ---------- révélations ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-rev]{opacity:0;transform:translateY(26px);
    transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
  [data-rev][data-vu]{opacity:1;transform:none}
  [data-rev][data-retard="1"]{transition-delay:.09s}
  [data-rev][data-retard="2"]{transition-delay:.18s}
  [data-rev][data-retard="3"]{transition-delay:.27s}
}
.no-js [data-rev]{opacity:1;transform:none}

/* ---------- étroit ---------- */
@media (max-width:520px){
  .hero__actions .btn{width:100%}
  .reca__haut{flex-direction:column}
  .reca__lignes{max-height:150px}
  .cat{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .art__img{aspect-ratio:1}
}
@media (max-width:360px){
  .conf__etapes li{font-size:.78rem;padding:7px 12px 7px 8px}
  .filtres button{font-size:.8rem;padding:7px 13px}
  .cat{grid-template-columns:1fr 1fr;gap:10px}
  .art__corps{padding:11px}
  .art__nom{font-size:.885rem}
  .art__desc{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   CONFIGURATEUR — refonte du 19/08/2026
   Mesuré avant : le récapitulatif collé en bas occupait 325 px à vide et
   568 px avec 8 éléments cochés, soit 79 % d'un écran de 720 px. Il ne
   restait que 85 px pour lire et choisir.
   Après : colonne collante à droite sur grand écran, barre compacte
   dépliable sur téléphone.
   ══════════════════════════════════════════════════════════════════════════ */

/* Un élément marqué hidden doit disparaître quelle que soit sa règle
   d'affichage. .cal__repli{display:flex} écrasait l'attribut natif : le
   champ date restait visible SOUS le calendrier, en double. */
[hidden]{display:none!important}

.conf__grille{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.conf__choix{min-width:0}
.reca__poignee{display:none}
.reca__cta{width:100%;justify-content:center;margin-top:18px}

/* ---------- grand écran : colonne collante ---------- */
@media (min-width:1080px){
  .conf__grille{grid-template-columns:minmax(0,1fr) 358px;gap:26px}
  .conf__choix .panneau:last-child{margin-bottom:0}
  .reca{position:sticky;top:87px;bottom:auto;margin-top:0;z-index:20;
    max-height:calc(100vh - 107px);display:flex;flex-direction:column;
    padding:22px;box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
  .reca__corps{display:flex;flex-direction:column;min-height:0;
    overflow-y:auto;overscroll-behavior:contain}
  .reca__haut{display:block}
  .reca__m{font-size:clamp(1.55rem,2.1vw,2.05rem)}
  .reca__avert{font-size:.78rem;max-width:none}
  .reca__lignes{max-height:none;flex:0 0 auto}
}

/* ---------- téléphone et tablette : barre compacte dépliable ---------- */
@media (max-width:1079px){
  .conf{padding-bottom:104px}
  .reca{position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;z-index:70;
    border-radius:18px 18px 0 0;border-bottom:0;padding:0;
    max-height:min(80vh,640px);display:flex;flex-direction:column;
    box-shadow:0 -18px 50px -16px rgba(0,0,0,.95)}
  .reca__poignee{display:flex;align-items:center;justify-content:space-between;gap:14px;
    width:100%;min-height:66px;padding:12px 18px;
    background:none;border:0;color:var(--texte);font:inherit;text-align:left;cursor:pointer;
    padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .reca[data-ouvert] .reca__poignee{padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.1)}
  .reca__poignee-g{display:grid;gap:2px;min-width:0}
  .reca__poignee-m{font-family:var(--display);font-size:1.28rem;font-weight:700;
    letter-spacing:-.03em;line-height:1.1;
    background:linear-gradient(100deg,var(--rouge),var(--magenta) 60%,var(--jaune));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
  .reca__poignee .reca__t{margin-bottom:0;font-size:.66rem}
  .reca__poignee-d{display:flex;align-items:center;gap:9px;flex:none}
  .reca__poignee-lib{font-size:.85rem;font-weight:600;color:var(--doux)}
  .reca__pastille{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;
    border-radius:999px;background:var(--rouge);color:#fff;
    font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
  .reca__chev{width:11px;height:11px;border-right:2px solid var(--doux);
    border-bottom:2px solid var(--doux);transform:rotate(-135deg);
    transition:transform .22s ease;margin-top:4px}
  .reca[data-ouvert] .reca__chev{transform:rotate(45deg);margin-top:-3px}
  .reca__corps{display:none;padding:16px 18px calc(18px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;min-height:0}
  .reca[data-ouvert] .reca__corps{display:block}
  .reca__lignes{max-height:none}
  .reca__haut .btn{display:none}
}
@media (prefers-reduced-motion:reduce){.reca__chev{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   SCÈNE VIVANTE — couche d'ambiance du 19/08/2026
   Le site d'un éclairagiste ne peut pas être immobile. Six faisceaux au lieu
   de trois, poussière dans la lumière, pulsations douces et halos qui
   respirent derrière chaque section.
   Tout est décoratif (pointer-events:none, aria-hidden) et s'efface
   entièrement sous prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */

/* On garde SIX faisceaux qui balayent, mais a l'intensite lumineuse
   d'origine : monter l'opacite globale renforcait aussi f1-f3 et
   eclaircissait le hero sous le seuil de lisibilite (mesure au pixel). */
.faisceaux{opacity:.76}
.faisceaux i{filter:blur(52px);opacity:.3;will-change:transform}

/* trois faisceaux de plus, en contre-jour, couleurs de la charte */
.f4{left:8vw;width:30vw;
  background:radial-gradient(ellipse at 50% 0,var(--jaune),transparent 62%);
  transform:rotate(6deg);--a:6deg;opacity:.09!important}
.f5{right:6vw;width:34vw;
  background:radial-gradient(ellipse at 50% 0,var(--rouge-clair),transparent 64%);
  transform:rotate(-13deg);--a:-13deg;opacity:.13!important}
.f6{left:44vw;width:26vw;
  background:radial-gradient(ellipse at 50% 0,var(--vert),transparent 60%);
  transform:rotate(3deg);--a:3deg;opacity:.06!important}

/* poussière : ce qui rend un faisceau visible dans une salle */
.poussiere{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.38;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 62% 12%,rgba(255,255,255,.42),transparent),
    radial-gradient(1.5px 1.5px at 82% 44%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 27% 68%,rgba(255,255,255,.36),transparent),
    radial-gradient(1.5px 1.5px at 74% 82%,rgba(255,255,255,.34),transparent),
    radial-gradient(1px 1px at 42% 38%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 92% 66%,rgba(255,255,255,.32),transparent),
    radial-gradient(1.5px 1.5px at 6% 88%,rgba(255,255,255,.28),transparent);
  background-size:100% 100%}

/* pulsation d'ensemble : la salle respire, très légèrement */
/* Mesuré le 19/08 : en mix-blend-mode:screen cette couche eclaircissait le
   hero de 14,7 points de luminance et faisait tomber 1,08 % de la surface
   sous 4,5:1. Sans le mode screen et a intensite reduite, elle respire
   toujours sans jamais manger un texte. */
.pulse{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60vw 38vh at 50% 0,rgba(226,29,72,.07),transparent 72%);
  opacity:.5}

@media (prefers-reduced-motion:no-preference){
  .f4{animation-duration:17s;animation-delay:-6s}
  .f5{animation-duration:21s;animation-delay:-11s}
  .f6{animation-duration:26s;animation-delay:-3s}
  .poussiere{animation:derive 26s linear infinite alternate}
  .pulse{animation:respire 7s ease-in-out infinite alternate}
}
@keyframes derive{from{transform:translate3d(0,0,0) scale(1)}
                  to{transform:translate3d(-2.5vw,-3vh,0) scale(1.07)}}
@keyframes respire{from{opacity:.28}to{opacity:.55}}

/* ---------- halo par section : la lumière suit la lecture ---------- */
.sec{position:relative}
.sec::before{content:"";position:absolute;left:50%;top:-6%;translate:-50% 0;
  width:min(1100px,116%);height:58%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(226,29,72,.07),transparent 76%);
  opacity:0;transition:opacity 1.1s ease}
.sec > *{position:relative;z-index:1}
.sec[data-halo]::before{opacity:1}
.sec:nth-of-type(3n)::before{background:radial-gradient(closest-side,rgba(59,130,246,.07),transparent 76%)}
.sec:nth-of-type(3n+2)::before{background:radial-gradient(closest-side,rgba(217,70,239,.06),transparent 76%)}
.sec--clair::before{background:radial-gradient(closest-side,rgba(226,29,72,.07),transparent 76%)}

/* ---------- révélation : une entrée plus franche ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Une seule autorité par propriete : la regle d'origine anime deja
     transform. On reste sur transform, sinon les deux decalages
     s'additionnent (26 px + 26 px) au depart de l'animation. */
  [data-rev]{opacity:0;transform:translateY(26px);filter:blur(5px);
    transition:opacity .82s cubic-bezier(.2,.7,.3,1),
               transform .82s cubic-bezier(.2,.7,.3,1),
               filter .82s ease}
  [data-rev][data-vu]{opacity:1;transform:none;filter:blur(0)}
}

/* ---------- le repos absolu, si la personne l'a demandé ---------- */
@media (prefers-reduced-motion:reduce){
  .poussiere,.pulse{display:none}
  .faisceaux i{animation:none}
  .sec::before{transition:none}
  [data-rev]{opacity:1;transform:none;filter:none}
}

/* ---------- cibles tactiles : mesure du 19/08 sur la page en ligne ----------
   72 cibles sous 40 px au pouce : jours du calendrier a 35 px, fleches de
   navigation a 30 px. La regle FLY LAB demande 44 px minimum. */
@media (max-width:1079px){
  .cal__nav button{width:44px;height:44px;font-size:1.05rem}
  .cal__mois{padding:14px 10px}
  .panneau{padding:clamp(16px,3vw,26px)}
  .cal__jours,.cal__grille{gap:3px}
  .cal__c{min-height:44px;aspect-ratio:auto;font-size:.9rem}
  .duree .pas button{min-width:44px;min-height:44px}
  .filtres button{min-height:44px}
}