/* =========================================================================
   Kapsule — Design system (DA V2 « commande borne poste »)
   Ossature V1 « site memento » : header / drawer / sections / footer
   ========================================================================= */

/* ---------- Polices (Loos / Loos Wide, auto-hébergées, subset latin) ---------- */
@font-face{font-family:"Loos";src:url("../fonts/Loos-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Loos";src:url("../fonts/Loos-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Loos";src:url("../fonts/Loos-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Loos Wide";src:url("../fonts/LoosWide-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Loos Wide";src:url("../fonts/LoosWide-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light;
  /* Charte officielle 2026 */
  --k-blue:#00109f;    /* Pantone Blue 072 C */
  --k-cream:#fdf2da;   /* Pantone 9184 C */
  --k-orange:#ff5400;  /* Pantone Orange 021 C */
  --k-black:#000000;   /* Pantone Black 6 C */
  --k-white:#ffffff;

  --blue-75:rgb(0 16 159 / .75);
  --blue-60:rgb(0 16 159 / .6);
  --blue-20:rgb(0 16 159 / .2);
  --blue-15:rgb(0 16 159 / .15);
  --blue-10:rgb(0 16 159 / .1);
  --cream-80:rgb(253 242 218 / .8);
  --cream-75:rgb(253 242 218 / .75);
  --cream-40:rgb(253 242 218 / .4);
  --cream-25:rgb(253 242 218 / .25);
  --cream-15:rgb(253 242 218 / .15);

  --font-display:"Loos Wide","Arial Black",system-ui,sans-serif;
  --font-body:"Loos",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --container:80rem;
  --gutter:clamp(20px,4vw,40px);
  --header-h:72px;
  --section-y:clamp(64px,9vw,128px);
  --radius:6px;

  /* Croix « engineering » (masque, couleur via background-color) */
  --cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v16M0 8h16' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--k-blue);background:var(--k-cream);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--k-orange)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:700}
:focus-visible{outline:2px solid var(--k-orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--k-orange);color:var(--k-cream);padding:10px 16px;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typographie ---------- */
h1,h2,h3{margin:0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:inherit}
h1{font-weight:900;font-size:clamp(2rem,6vw,4.5rem);line-height:1}
h1.display{font-size:clamp(1.75rem,5.2vw,4.75rem);line-height:.98}
h2{font-weight:900;font-size:clamp(1.75rem,4.2vw,3.5rem);line-height:1.05;margin-bottom:.4em}
h3{font-weight:700;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.25;letter-spacing:0;margin:0 0 .6em}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;max-width:62ch;opacity:.85}
.muted{opacity:.7}
.small{font-size:.95rem}
.tiny{font-size:.9rem}
.text-orange{color:var(--k-orange)}
.block{display:block}

/* Contenus longs (politique de confidentialité) */
.legal{max-width:60rem}
.legal h2{font-size:clamp(1.15rem,2vw,1.5rem);margin:2em 0 .6em;padding-top:1.2em;border-top:1px solid var(--blue-15)}
.legal h3{font-family:var(--font-body);font-size:1rem;text-transform:none;letter-spacing:0;margin:1.4em 0 .4em}
.legal .list{margin:0 0 1em}

/* Libellés techniques (eyebrow, repères de page, numéros de série) */
.eyebrow{display:inline-block;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--k-orange);margin-bottom:16px}
.page-mark{position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:3;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
@media (min-width:640px){.page-mark{font-size:11px;letter-spacing:.2em}}
.serial{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Croix d'angle ---------- */
.corners{position:relative}
.corners::before{content:"";position:absolute;inset:-6px;pointer-events:none;z-index:2;background-color:var(--corner,currentColor);
  -webkit-mask:var(--cross) 0 0/12px 12px no-repeat,var(--cross) 100% 0/12px 12px no-repeat,var(--cross) 0 100%/12px 12px no-repeat,var(--cross) 100% 100%/12px 12px no-repeat;
          mask:var(--cross) 0 0/12px 12px no-repeat,var(--cross) 100% 0/12px 12px no-repeat,var(--cross) 0 100%/12px 12px no-repeat,var(--cross) 100% 100%/12px 12px no-repeat}
.section.corners::before,.page-hero.corners::before{inset:22px;
  -webkit-mask-size:16px 16px;mask-size:16px 16px}

/* ---------- Indicateur d'état (barre segmentée) ---------- */
.status{position:absolute;top:22px;right:56px;z-index:3;display:none;flex-direction:column;gap:4px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.status .bars{display:flex;gap:2px;width:128px;height:6px}
.status .bars i{flex:1;background:currentColor}
.status .bars i:nth-child(n+9){opacity:.15}
@media (min-width:768px){.status{display:inline-flex}}

/* ---------- Sections ---------- */
.section{position:relative;padding-block:var(--section-y);overflow:hidden}
.section--blue{background:var(--k-blue);color:var(--k-cream);--corner:var(--k-cream)}
.section--cream{background:var(--k-cream);color:var(--k-blue);--corner:var(--k-blue)}
.section--white{background:var(--k-white);color:var(--k-blue);--corner:var(--k-blue)}
.section--tight{padding-top:clamp(56px,6vw,80px)}
.section--tight .section-head{margin-bottom:clamp(24px,3vw,36px);max-width:none}
.section--tight .section-head h2{font-size:clamp(1.6rem,3.4vw,2.75rem);margin-bottom:0}
.section--tight{padding-top:clamp(36px,4vw,48px)}
.section.section--pt-sm{padding-top:8px}
.page-hero.page-hero--compact{padding-block:clamp(60px,5.5vw,72px) clamp(32px,3.5vw,44px)}
.page-hero--compact .breadcrumb{margin-bottom:14px}
.page-hero--compact h1{max-width:none;font-size:clamp(1.9rem,4.2vw,3.4rem);margin-bottom:.4em}
.page-hero--compact .lead{font-size:clamp(1rem,1.4vw,1.1rem)}
.section-head{margin-bottom:clamp(32px,5vw,56px);max-width:52rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}

/* Bandeau d'en-tête des pages internes */
.page-hero{position:relative;overflow:hidden;background:var(--k-blue);color:var(--k-cream);--corner:var(--k-cream);padding-block:clamp(88px,10vw,128px) clamp(56px,7vw,96px)}
.page-hero h1{max-width:20ch;margin-bottom:.45em}
.page-hero .lead{opacity:.85}
.page-hero .note{color:var(--cream-75);max-width:70ch;margin-top:12px}

/* Variante crème (fond beige, texte bleu) */
.page-hero.page-hero--cream{background:var(--k-cream);color:var(--k-blue);--corner:var(--k-blue)}
.page-hero--cream .breadcrumb{color:var(--blue-75)}
.page-hero.page-hero--cream .card{background:transparent;border-color:var(--blue-20);--corner:var(--k-blue)}
.page-hero--cream .media .frame{border-color:var(--blue-20)}
.page-hero--cream .btn-primary:hover{background:var(--k-blue);color:var(--k-cream);border-color:var(--k-blue)}

/* Titre avec icône dessinée (remplace les emoji) */
.h-icon{display:flex;align-items:center;gap:14px;margin-top:28px}
.h-icon img{width:36px;height:auto;flex-shrink:0}

/* Fil d'Ariane */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-75)}
.breadcrumb a{text-decoration:none;color:inherit}
.breadcrumb a:hover{color:var(--k-orange)}
.breadcrumb .sep{opacity:.5}

/* ---------- Grilles ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,28px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.stack{display:grid;gap:20px;align-content:start}
.prose{max-width:72ch}
.prose p{margin-bottom:1.1em}

/* ---------- Boutons (CTA) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid transparent;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-align:center;line-height:1.2;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--k-orange);color:var(--k-cream);border-color:var(--k-orange)}
.btn-primary:hover{background:var(--k-cream);color:var(--k-blue);border-color:var(--k-cream)}
.btn-ghost{background:transparent;color:currentColor;border-color:currentColor}
.section--blue .btn-ghost:hover,.page-hero .btn-ghost:hover,.site-footer .btn-ghost:hover{background:var(--k-cream);color:var(--k-blue);border-color:var(--k-cream)}
/* Sur fond clair, le survol bascule vers le bleu (cf. cartes tarifs V2) */
.on-light .btn-primary:hover,.section--cream .btn-primary:hover,.section--white .btn-primary:hover{background:var(--k-blue);color:var(--k-cream);border-color:var(--k-blue)}
.on-light .btn-ghost:hover,.section--cream .btn-ghost:hover,.section--white .btn-ghost:hover{background:var(--k-blue);color:var(--k-cream);border-color:var(--k-blue)}
.btn-whatsapp{background:#25d366;color:#fff;border-color:#25d366}
.btn-whatsapp svg{width:20px;height:20px;flex-shrink:0}
.btn-whatsapp:hover{background:#1fb855;color:#fff;border-color:#1fb855}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:28px}
@media (max-width:540px){.btn-row .btn{width:100%}}


/* ---------- Cartes ---------- */
.card{position:relative;background:var(--k-white);color:var(--k-blue);border:1px solid var(--blue-20);padding:clamp(22px,2.6vw,32px);--corner:var(--k-blue)}
.section--white .card{background:var(--k-cream)}
.section--blue .card,.page-hero .card{background:var(--k-cream);border-color:var(--cream-40);--corner:var(--k-cream)}
.card p{color:var(--blue-75)}
.card p strong{color:var(--k-blue)}
.card .index{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1;color:var(--k-orange);margin-bottom:18px}
.card h3{margin-bottom:.7em}
.card .btn-row{margin-top:20px}
.card + .card{margin-top:0}
.card.card--flat{background:transparent}

/* ---------- Listes à puces (pastille + flèche, cf. tarifs V2) ---------- */
.list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.list li{position:relative;padding-left:32px;color:var(--k-blue)}
.list li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--k-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fdf2da' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/12px no-repeat}
.list--orange li::before{background-color:var(--k-orange)}

/* ---------- Médias ---------- */
.media{position:relative;margin:0}
.media .frame{position:relative;border:1px solid var(--cream-40);background:var(--k-blue)}
.section--cream .media .frame,.section--white .media .frame{border-color:var(--blue-20)}
.media .frame img{width:100%;height:100%;object-fit:cover}
.media figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.media figcaption.caption-strong{font-size:.95rem;letter-spacing:0;text-transform:none;opacity:1;font-weight:500}

.sticker{position:absolute;z-index:4;pointer-events:none;height:auto;filter:drop-shadow(0 6px 14px rgb(0 0 0 / .12))}
@media (max-width:640px){.sticker--hide-sm{display:none}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .82);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--blue-10)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h)}
.logo{display:inline-flex;flex-shrink:0}
.logo img{height:44px;width:auto}

nav.primary ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
nav.primary li{position:relative}
nav.primary a{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--k-blue);white-space:nowrap;transition:color .2s}
nav.primary a:hover,nav.primary a[aria-current="page"]{color:var(--k-orange)}
nav.primary a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
nav.primary li.has-submenu > a::after{content:"";width:8px;height:8px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
nav.primary li.has-submenu > a{pointer-events:none;cursor:default}
nav.primary .submenu{position:absolute;left:0;top:100%;display:none;min-width:300px;margin:0;padding:8px;list-style:none;background:var(--k-cream);border:1px solid var(--blue-20);box-shadow:0 18px 40px rgb(0 16 159 / .12)}
nav.primary .submenu li{display:block}
nav.primary .submenu a{display:block;padding:12px 14px;letter-spacing:.08em;white-space:normal}
nav.primary .submenu a:hover{background:var(--k-white)}
nav.primary li:hover > .submenu,nav.primary li:focus-within > .submenu,nav.primary .submenu:hover{display:block}
/* « Contact » = CTA d'en-tête V2 (pilule orange) */
nav.primary a.nav-cta{margin-left:10px;padding:10px 20px;border-radius:999px;background:var(--k-orange);color:var(--k-white);letter-spacing:.1em;transition:transform .2s}
nav.primary a.nav-cta:hover{transform:scale(1.05);color:var(--k-white)}
nav.primary a.nav-cta[aria-current="page"]{text-decoration:none;box-shadow:0 0 0 3px rgb(255 84 0 / .25)}

/* Hamburger */
.menu-toggle{display:none;appearance:none;border:0;background:transparent;padding:10px;margin-right:-10px;line-height:0;cursor:pointer}
.menu-toggle .bar{display:block;width:26px;height:2px;background:var(--k-blue)}
.menu-toggle .bar + .bar{margin-top:6px}

/* Drawer mobile */
.drawer-overlay{position:fixed;inset:0;z-index:80;background:rgb(0 16 159 / .55);opacity:0;pointer-events:none;transition:opacity .25s ease}
.drawer{position:fixed;top:0;right:0;z-index:90;display:flex;flex-direction:column;width:min(90vw,400px);height:100dvh;background:var(--k-blue);color:var(--k-cream);--corner:var(--k-cream);transform:translateX(100%);transition:transform .25s ease;overflow-y:auto}
.drawer > header{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);border-bottom:1px solid var(--cream-15)}
.drawer > header strong{font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.drawer .close{appearance:none;border:0;background:transparent;color:var(--k-cream);padding:8px;margin-right:-8px;line-height:0;cursor:pointer}
.drawer nav{padding:20px var(--gutter) 28px}
.drawer nav ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.drawer nav a,.drawer .has-sub{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-family:var(--font-display);font-weight:700;font-size:1.15rem;text-transform:uppercase;text-decoration:none;color:var(--k-cream);border-bottom:1px solid var(--cream-15);cursor:pointer;list-style:none}
.drawer .has-sub::-webkit-details-marker{display:none}
.drawer nav a:hover,.drawer nav a[aria-current="page"],.drawer .has-sub:hover{color:var(--k-orange)}
.drawer .chevron{width:20px;height:20px;transition:transform .2s ease}
.drawer details[open] .chevron{transform:rotate(180deg)}
.drawer .submenu{display:grid;padding:4px 0 8px 16px}
.drawer .submenu a{font-family:var(--font-body);font-size:1rem;font-weight:500;text-transform:none;border-bottom:0;padding:10px 0}
.drawer-foot{margin-top:auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--cream-15);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-75)}
.drawer-foot img{height:28px;width:auto}

.nav-open .drawer{transform:translateX(0)}
.nav-open .drawer-overlay{opacity:1;pointer-events:auto}
.nav-open,.nav-open body{overflow:hidden}

@media (max-width:1080px){
  .menu-toggle{display:inline-block}
  nav.primary{display:none}
}
@media (min-width:1081px){.drawer,.drawer-overlay{display:none}}

/* ---------- Hero d'accueil ---------- */
.hero{position:relative;overflow:hidden;background:var(--k-blue);color:var(--k-cream);--corner:var(--k-cream);min-height:calc(100dvh - var(--header-h))}
.hero.corners::before{inset:22px;-webkit-mask-size:16px 16px;mask-size:16px 16px}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:center;padding-block:clamp(88px,10vw,120px)}
.hero .wrap > div:first-child{align-self:start;margin-top:-8px}
.hero h1{margin:22px 0 26px}
.hero h1.display{font-size:clamp(1.75rem,4.3vw,3.9rem);line-height:1}
.hero .lead{color:var(--cream-80);opacity:1}
.hero .lead strong{color:var(--k-cream)}
.hero-visual{position:relative;width:100%;max-width:400px;margin-inline:auto;aspect-ratio:2/3}
.hero-visual img.borne{width:100%;height:100%;object-fit:contain}
.hero-visual--strips{aspect-ratio:845/1562;max-width:300px}
.hero-visual--strips img.borne{filter:drop-shadow(0 24px 36px rgb(0 0 0 / .35))}
@media (max-width:920px){.hero-visual.hero-visual--strips{max-width:230px}}
.hero-serial{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:none;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
@media (min-width:768px){.hero-serial{display:flex}}

/* ---------- Partenaire officiel (Touquet Music Beach) ---------- */
.partner{position:relative;--corner:var(--k-blue)}
.partner-inner{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(28px,5vw,64px);background:var(--k-blue);color:var(--k-cream)}
.partner-palm{position:absolute;left:-90px;bottom:-140px;width:460px;opacity:.06;pointer-events:none}
.partner-copy{position:relative;z-index:1}
.partner-lockup{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:6px 0 28px}
.partner-lockup img{height:40px;width:auto}
.partner-lockup .partner-tmb{height:22px;max-width:100%}
.partner-x{font-family:var(--font-display);font-weight:900;font-size:1.4rem;line-height:1;color:var(--k-orange)}
.partner h2{font-size:clamp(1.75rem,3.6vw,3rem);margin-bottom:.45em}
.partner .lead{color:var(--cream-80);opacity:1}

/* Accréditation festival (visuel décoratif) */
.pass-wrap{position:relative;display:grid;place-items:center;min-height:460px}
.pass-sun{position:absolute;top:50%;left:50%;width:min(92%,380px);translate:-50% -50%;animation:pass-spin 60s linear infinite}
@keyframes pass-spin{to{rotate:360deg}}
.pass{position:relative;z-index:1;width:min(100%,270px);background:var(--k-cream);color:var(--k-blue);border-radius:18px;rotate:-6deg;box-shadow:0 30px 60px rgb(0 0 0 / .35)}
.pass::before{content:"";position:absolute;left:50%;bottom:calc(100% - 22px);width:44px;height:320px;translate:-50% 0;z-index:-1;background:var(--k-orange) repeating-linear-gradient(0deg,transparent 0 14px,rgb(253 242 218 / .35) 14px 16px)}
.pass-hole{display:block;width:56px;height:12px;margin:18px auto 0;border-radius:999px;background:var(--k-blue)}
.pass-band{display:block;margin-top:16px;padding:10px;background:var(--k-orange);color:var(--k-cream);text-align:center;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.pass-body{display:grid;justify-items:center;gap:12px;padding:22px 24px 20px;text-align:center}
.pass-tmb{width:170px;height:auto}
.pass-kps{width:132px;height:auto}
.pass-x{font-family:var(--font-display);font-weight:900;font-size:1.1rem;line-height:1;color:var(--k-orange)}
.pass-title{margin-top:6px;font-family:var(--font-display);font-weight:900;font-size:1.55rem;line-height:1;text-transform:uppercase}
.pass-bars{display:block;width:100%;height:40px;margin-top:4px;background:repeating-linear-gradient(90deg,var(--k-blue) 0 2px,transparent 2px 5px,var(--k-blue) 5px 9px,transparent 9px 11px,var(--k-blue) 11px 12px,transparent 12px 16px)}
.pass-foot{display:flex;justify-content:space-between;width:100%;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* « Pourquoi Kapsule ? » — 4 formules (location, longue durée, vente, sur-mesure) */
.why{margin-top:clamp(56px,7vw,96px)}
.why-head{display:grid;grid-template-columns:auto 1fr;gap:16px 48px;align-items:end;margin-bottom:clamp(28px,3.5vw,44px)}
.why-head .eyebrow{margin-bottom:10px}
.why-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.05;margin:0}
.why-lead{max-width:34rem;margin:0 0 4px auto;color:var(--blue-75);font-size:1.05rem}
.formulas{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px)}
.formula{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,30px);border:1px solid var(--blue-20);color:var(--k-blue);text-decoration:none;--corner:var(--k-blue);transition:background-color .25s,color .25s,transform .25s,border-color .25s}
.formula:hover,.formula:focus-visible{background:var(--k-blue);color:var(--k-cream);border-color:var(--k-blue);transform:translateY(-4px)}
.formula-top{display:flex;margin-bottom:2px}
.formula .index{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1;color:var(--k-orange)}
.formula-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.15;text-transform:uppercase}
.formula-desc{font-size:.95rem;line-height:1.55;opacity:.8}
.formula .list{gap:8px;font-size:.9rem}
.formula .list li{color:inherit;padding-left:28px}
.formula .list li::before{width:18px;height:18px;top:2px;background-size:11px}
.formula:hover .list li::before,.formula:focus-visible .list li::before{background-color:var(--k-orange)}
.formula-more{margin-top:auto;padding-top:16px;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 20%,transparent);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.formula-more span{display:inline-block;transition:transform .25s}
.formula:hover .formula-more span{transform:translateX(4px)}
@media (max-width:1080px){.formulas{grid-template-columns:repeat(2,1fr)}.why-head{grid-template-columns:1fr}.why-lead{margin-left:0}}
@media (max-width:600px){.formulas{grid-template-columns:1fr}}

@media (max-width:920px){
  .partner-inner{grid-template-columns:1fr}
  .pass-wrap{min-height:400px;margin-top:24px}
  .pass::before{height:90px}
  .pass{width:min(100%,240px)}
}

/* ---------- Page Concept (manifeste de marque) ---------- */
.concept-hero{padding-block:clamp(96px,10vw,140px) clamp(64px,8vw,112px)}
.concept-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,64px);align-items:center}
.concept-hero h1.display{max-width:none;margin:8px 0 28px;font-size:clamp(1.85rem,6vw,4.6rem)}
.concept-hero .lead{color:var(--cream-80);opacity:1;max-width:58ch}
.concept-tagline{margin-top:28px;font-family:var(--font-display);font-weight:900;font-size:clamp(1rem,1.6vw,1.25rem);text-transform:uppercase;letter-spacing:.02em;color:var(--k-orange)}
.concept-stickers{display:flex;flex-direction:column;width:100%;max-width:420px;justify-self:center;filter:drop-shadow(0 10px 20px rgb(0 0 0 / .25))}
.concept-stickers img{height:auto}

.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);margin:0;padding:0;list-style:none}
.timeline::before{content:"";position:absolute;left:0;right:0;top:15px;border-top:1px dashed var(--blue-20)}
.timeline li{position:relative;padding-top:52px}
.timeline-index{position:absolute;top:0;left:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--k-orange);color:var(--k-cream);font-family:var(--font-display);font-weight:700;font-size:12px}
.timeline-place{display:block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--k-orange)}
.timeline h3{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:900;margin-bottom:.5em}
.timeline p{color:var(--blue-75);font-size:.98rem}

.made-grid{align-items:center}
.made-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.made-cols h3{color:var(--k-cream)}
.section--blue .list li{color:var(--cream-80)}
.made-eco{margin-top:32px;padding-top:20px;border-top:1px solid var(--cream-15);font-size:.95rem;color:var(--cream-75)}

.eco{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--blue-20);border-left:1px solid var(--blue-20)}
.eco li{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:150px;padding:22px;border-right:1px solid var(--blue-20);border-bottom:1px solid var(--blue-20);transition:background-color .25s,color .25s}
.eco li:hover{background:var(--k-blue);color:var(--k-cream)}
.eco-tag{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--k-orange)}
.eco-name{font-family:var(--font-display);font-weight:900;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.15;text-transform:uppercase}
.eco-award{display:flex;align-items:center;gap:12px;margin-top:28px;font-weight:700}
.eco-award-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--k-orange);color:var(--k-cream);font-size:14px}

@media (max-width:1080px){
  .timeline{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .timeline::before{display:none}
  .eco{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .concept-hero-grid{grid-template-columns:1fr}
  .concept-stickers{max-width:320px}
}
@media (max-width:600px){
  .timeline{grid-template-columns:1fr}
  .made-cols{grid-template-columns:1fr}
  .eco li{min-height:120px;padding:16px}
}

/* ---------- Page Vente ---------- */
.vente-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.vente-hero h1{max-width:none}
.vente-hero > div:first-child{align-self:start;padding-top:16px}
@media (max-width:920px){.vente-hero > div:first-child{padding-top:0}}
.vente-visual{max-width:300px;margin:0 auto;width:100%}
.vente-visual .frame{aspect-ratio:474/1096;border-color:var(--cream-40);background:#03109a}
.vente-visual .frame img{width:100%;height:100%;object-fit:cover}
.price-tag{display:inline-grid;gap:2px;margin-top:28px;padding:18px 24px;background:var(--k-orange);color:var(--k-cream);rotate:-2deg}
.price-from,.price-note{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.price-value{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,4vw,3rem);line-height:1}
.price-value small{font-family:var(--font-body);font-size:.4em;font-weight:700;letter-spacing:.06em}
.included{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--blue-20);border-left:1px solid var(--blue-20)}
.included li{display:flex;flex-direction:column;gap:18px;min-height:170px;padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--blue-20);border-bottom:1px solid var(--blue-20);transition:background-color .25s,color .25s}
.included li:hover{background:var(--k-blue);color:var(--k-cream)}
.included .index{font-family:var(--font-display);font-weight:700;font-size:1.5rem;line-height:1;color:var(--k-orange)}
.included-title{font-family:var(--font-display);font-weight:900;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.2;text-transform:uppercase}
.loa{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,72px);align-items:center}
.loa-card{display:grid;gap:14px;justify-items:start;padding:clamp(24px,3vw,36px);background:var(--k-cream);color:var(--k-blue);--corner:var(--k-cream)}
.loa-card .price-from{color:var(--k-orange)}
.loa-card .list li{color:var(--k-blue)}
.loa-card .btn{margin-top:8px}
.loa-card .btn-primary:hover{background:var(--k-blue);color:var(--k-cream);border-color:var(--k-blue)}
/* Simulateur de rendement */
.sim{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:stretch}
.sim-inputs{display:grid;gap:clamp(24px,3vw,36px);align-content:center}
.sim-field{display:grid;gap:14px}
.sim-label{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sim-label label{font-size:12px}
.sim-input{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-75)}
.sim-input input{width:96px;min-height:44px;padding:8px 10px;text-align:right;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--k-blue)}
.sim input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;min-height:0;padding:0;border:0;border-radius:0;background:linear-gradient(90deg,var(--k-orange) var(--fill,50%),var(--blue-15) var(--fill,50%));cursor:pointer}
.sim input[type=range]:focus{box-shadow:none}
.sim input[type=range]:focus-visible{outline:2px solid var(--k-orange);outline-offset:6px}
.sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--k-blue);border:3px solid var(--k-cream);box-shadow:0 0 0 1px var(--k-blue)}
.sim input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--k-blue);border:3px solid var(--k-cream);box-shadow:0 0 0 1px var(--k-blue)}
.sim-result{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:clamp(24px,3vw,40px);background:var(--k-blue);color:var(--k-cream);--corner:var(--k-blue)}
.sim-result-label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--k-orange)}
.sim-value{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05}
.sim-value--small{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.sim-formula{font-size:.9rem;color:var(--cream-75)}
.sim-sep{display:block;width:100%;margin:18px 0 12px;border-top:1px solid var(--cream-15)}
.sim-note{margin:14px 0 18px;font-size:.8rem;color:var(--cream-75)}
.sim-result .btn{margin-top:auto}

@media (max-width:920px){
  .vente-hero,.loa{grid-template-columns:1fr}
  .sim{grid-template-columns:1fr}
  .vente-visual{max-width:240px}
  .included{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){.included{grid-template-columns:1fr}.included li{min-height:0}}

/* ---------- Savoir-faire Hauts-de-France (accueil) ---------- */
.savoir-inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:56rem}
.savoir-badge{position:relative;width:clamp(150px,18vw,200px);aspect-ratio:1;margin-bottom:clamp(24px,3vw,36px);color:var(--k-blue)}
.savoir-ring{position:absolute;inset:0;width:100%;height:100%;animation:pass-spin 40s linear infinite}
.savoir-ring-text{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.08em;text-transform:uppercase;fill:currentColor}
.savoir-ring-star{font-size:12px;fill:var(--k-orange)}
.savoir-badge img{position:absolute;top:50%;left:50%;width:46%;height:auto;translate:-50% -50%}
.savoir h2{max-width:22ch;margin-bottom:.6em;font-size:clamp(1.6rem,3.4vw,2.75rem)}
.savoir-text{max-width:60ch;color:var(--blue-75);font-size:clamp(1rem,1.4vw,1.125rem)}
.savoir-proofs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(24px,3vw,32px) 0 0;padding:0;list-style:none}
.savoir-proofs li{padding:8px 16px;border:1px solid var(--blue-20);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.savoir-kicker{margin-top:clamp(24px,3vw,36px);font-family:var(--font-display);font-weight:900;font-size:clamp(1.1rem,2vw,1.6rem);text-transform:uppercase;color:var(--k-orange)}
@media (prefers-reduced-motion:reduce){.savoir-ring{animation:none}}

/* ---------- Trio de photos « Nos offres » (accueil) ---------- */
.section.section--photos{padding-block:clamp(72px,7vw,96px)}
.trio{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.trio-item{display:block;color:inherit;text-decoration:none}
.trio-item .frame{aspect-ratio:3/4;overflow:hidden}
.trio-item .frame img{position:absolute;inset:0;transition:transform .5s ease}
.trio-item:hover .frame img{transform:scale(1.04)}
.trio-item figcaption{font-size:11px;opacity:.85;transition:color .2s,opacity .2s}
.trio-item:hover figcaption{color:var(--k-orange);opacity:1}
@media (max-width:600px){.trio{grid-template-columns:1fr}.trio-item .frame{aspect-ratio:4/5}}

/* ---------- Galerie (grille 4 colonnes, une photo verticale sur 2 rangées) ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,28px) clamp(14px,2vw,24px)}
.gallery .media{display:flex;flex-direction:column}
.gallery .frame{aspect-ratio:3/4}
.gallery .frame img{position:absolute;inset:0}
.gallery .media--tall{grid-row:span 2}
.gallery .media--tall .frame{aspect-ratio:auto;flex:1}
@media (max-width:920px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- Tuiles « Ils nous font confiance » ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,40px) clamp(20px,3vw,32px)}
.tile{display:block;text-decoration:none;color:inherit}
.tile .frame{position:relative;aspect-ratio:2.5/1;overflow:hidden;border:1px solid var(--blue-20);background:var(--k-blue)}
.tile .frame img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile:hover .frame img{transform:scale(1.04)}
.tile .meta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--blue-15)}
.tile .title{margin:0;font-family:var(--font-display);font-weight:700;font-size:1rem;text-transform:uppercase;line-height:1.25}
.tile .subtitle{grid-column:1/-1;margin:0;color:var(--blue-75);font-size:.95rem}
.tile .serial{color:var(--k-orange);align-self:center}
.tile:hover .title{color:var(--k-orange)}

/* ---------- FAQ (accordéon V2 sur <details>) ---------- */
.faq{display:grid;gap:16px;max-width:56rem;margin-inline:auto}
.faq details{background:var(--k-white);border:1px solid var(--blue-20);border-radius:var(--radius);padding:0 20px;box-shadow:0 1px 2px rgb(0 16 159 / .05)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:clamp(1rem,1.5vw,1.125rem);font-weight:500;line-height:1.4;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:28px;height:28px;border-radius:var(--radius);background:var(--blue-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300109f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .2s,background-color .2s}
.faq details[open] summary::after{transform:rotate(180deg);background:var(--k-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center/18px no-repeat}
.faq details > :not(summary){color:var(--blue-75)}
.faq details > :last-child{padding-bottom:20px}
.faq details p{margin:0 0 .8em}
.faq details strong{color:var(--k-blue)}
.faq .list{margin:4px 0 12px}

/* ---------- Formulaires ---------- */
form .field{display:grid;gap:8px}
form .fields{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--k-blue)}
input,textarea,select{width:100%;min-height:48px;padding:12px 14px;border:1px solid rgb(0 16 159 / .25);border-radius:var(--radius);background:var(--k-white);color:var(--k-blue);font-family:var(--font-body);font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}
textarea{resize:vertical;min-height:150px}
select{appearance:none;padding-right:44px;background:var(--k-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300109f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
input:focus,textarea:focus,select:focus{border-color:var(--k-orange);box-shadow:0 0 0 3px rgb(255 84 0 / .2)}
input::placeholder,textarea::placeholder{color:var(--blue-60);opacity:1;font-size:.95rem}
form .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.optional-note{font-weight:500;letter-spacing:0;text-transform:none;opacity:.6}
.required-star{color:var(--k-orange);margin-left:2px}
.hs-card{min-height:420px}
.hs-loading,.hs-fallback{margin:0;color:var(--blue-75)}
.form-legal{margin:18px auto 0;max-width:62rem;font-size:.8rem;text-align:center;color:var(--blue-60)}


/* ---------- Footer (V2) ---------- */
.site-footer{background:var(--k-blue);color:var(--k-cream);--corner:var(--k-cream)}
.footer-cta{padding-top:clamp(48px,6vw,80px)}
.footer-cta .card{background:var(--k-cream);border-color:var(--cream-40);--corner:var(--k-cream)}
.footer-cta .card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px}
.footer-cta strong{font-family:var(--font-display);font-weight:900;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.1;text-transform:uppercase;max-width:22ch}
.footer-cta .btn-row{margin-top:0}
.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-block:clamp(48px,6vw,80px)}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.footer-brand .logo img{height:56px}
.footer-brand .seo{max-width:28rem;font-size:.875rem;line-height:1.6;color:var(--cream-80)}
.footer-contact{display:grid;gap:8px;font-size:.875rem;color:var(--cream-80)}
.footer-contact a,.footer-contact p{display:flex;align-items:flex-start;gap:8px;margin:0;text-decoration:none}
.footer-contact svg{flex-shrink:0;width:16px;height:16px;margin-top:3px}
.socials{display:flex;gap:16px}
.socials a{color:var(--k-cream);line-height:0;transition:color .2s}
.socials a:hover{color:var(--k-orange)}
.socials svg{width:20px;height:20px}
.footer-col p{margin:0 0 18px;font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.footer-col ul{display:grid;gap:12px;margin:0;padding:0;list-style:none;font-size:.875rem}
.footer-col a{color:var(--cream-75);text-decoration:none}
.footer-col a:hover{color:var(--k-cream)}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:24px;border-top:1px solid var(--cream-15);font-size:.875rem;color:var(--cream-75)}
.footer-bottom small{font-size:inherit}
.footer-bottom a{color:var(--cream-75)}
.footer-bottom a:hover{color:var(--k-cream)}
.footer-bottom .origin{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .footer-main{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;padding-block:88px 72px}
  .hero-visual{max-width:300px}
  .grid-3,.grid-2,.tiles{grid-template-columns:1fr}
  .creations-visual{margin-top:0}
}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr}
  .tile .frame{aspect-ratio:2.2/1}
}