/* NVS, site public — feuille unique */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-opsz-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Kufi Arabic NVS";
  src: url("../fonts/noto-kufi-arabic-600-nvs.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --nuit: #0F0D33;
  --nuit-2: #17154A;
  --indigo: #2A2670;
  --violet: #4F46D8;
  --violet-fonce: #3D35BD;
  --violet-pale: #ECEBFC;
  --or-1: #F7EBCB;
  --or: #DDB66A;
  --or-3: #F3E2B5;
  --brume: #F5F6FB;
  --encre: #12143A;
  --encre-2: #474A6E;
  --trait: #DCDEEC;
  --lune: #C9C7EC;
  --blanc: #fff;
  --vert: #1F7A55;

  --f-titre: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-texte: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.125rem);
  --t-3xl: clamp(2.75rem, 1.6rem + 6vw, 5.5rem);

  --largeur: 72rem;
  --marge: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 28px;

  --filet: linear-gradient(90deg, var(--or-1), var(--or) 55%, var(--or-3));
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.065' stroke-width='1'%3E%3Cpath d='M36 14l6.4 6.4h9.2v9.2L58 36l-6.4 6.4v9.2h-9.2L36 58l-6.4-6.4h-9.2v-9.2L14 36l6.4-6.4v-9.2h9.2z'/%3E%3Cpath d='M22 0l14 14 14-14M58 36l14-14M58 36l14 14M22 72l14-14 14 14M14 36L0 22M14 36L0 50'/%3E%3Cpath d='M0 -22l6.4 6.4h9.2v9.2L22 0l-6.4 6.4v9.2H6.4L0 22l-6.4-6.4M72 -22l-6.4 6.4h-9.2v9.2L50 0l6.4 6.4v9.2h9.2L72 22M0 94l6.4-6.4h9.2v-9.2L22 72l-6.4-6.4v-9.2H6.4L0 50M72 94l-6.4-6.4h-9.2v-9.2L50 72l6.4-6.4v-9.2h9.2L72 50'/%3E%3C/g%3E%3C/svg%3E");
  --nuit-fond: radial-gradient(120% 90% at 75% 20%, var(--indigo) 0%, var(--nuit-2) 45%, var(--nuit) 85%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--encre);
  background: var(--brume);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-optical-sizing: auto;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.02em; max-width: 20ch; }
h3 { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.s-clair :focus-visible, .s-blanc :focus-visible { outline-color: var(--violet); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.saut {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blanc); color: var(--encre); padding: 0.75rem 1rem; border-radius: var(--r-s);
}
.saut:focus { top: 1rem; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }

/* ------------------------------------------------------------ fonds */
.s-nuit {
  color: var(--blanc);
  background-color: var(--nuit);
  background-image: var(--zellige), var(--nuit-fond);
  background-size: 72px 72px, 100% 100%;
}
.s-nuit-plat { color: var(--blanc); background: var(--nuit); }
.s-clair { background: var(--brume); color: var(--encre); }
.s-blanc { background: var(--blanc); color: var(--encre); }
.section { padding-block: var(--section); }

.chapeau { font-size: var(--t-l); line-height: 1.5; max-width: 58ch; color: var(--encre-2); }
.s-nuit .chapeau, .s-nuit-plat .chapeau { color: var(--lune); }
.tete-section { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.tete-section .filet { margin-bottom: 0.25rem; }

.filet {
  display: block; width: 7rem; height: 2px; border-radius: 2px;
  background: var(--filet); transform-origin: left center;
}

/* ------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  font: 600 var(--t-m)/1.2 var(--f-texte);
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primaire { background: var(--violet); color: var(--blanc); }
.btn-primaire:hover { background: var(--violet-fonce); }
.s-nuit .btn-primaire, .s-nuit-plat .btn-primaire { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px -10px rgba(79,70,216,.9); }
.btn-contour { border-color: rgba(247,235,203,.5); color: var(--or-1); background: transparent; }
.btn-contour:hover { border-color: var(--or); background: rgba(221,182,106,.08); }
.btn-encre { border-color: var(--encre); color: var(--encre); background: transparent; }
.btn-encre:hover { background: var(--encre); color: var(--blanc); }
.btn-wa::before {
  content: ""; width: 1.1em; height: 1.1em; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3zm0 1.8a7.2 7.2 0 1 1-3.7 13.4l-.3-.2-2.4.7.7-2.3-.2-.3A7.2 7.2 0 0 1 12 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3zm0 1.8a7.2 7.2 0 1 1-3.7 13.4l-.3-.2-2.4.7.7-2.3-.2-.3A7.2 7.2 0 0 1 12 4.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.alt { font-size: var(--t-s); color: var(--encre-2); }
.s-nuit .alt, .s-nuit-plat .alt { color: var(--lune); }
.alt a { color: inherit; font-weight: 500; }

/* ------------------------------------------------------------ en-tête */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(15, 13, 51, .88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  color: var(--blanc);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.marque { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.marque img { width: 34px; height: 34px; border-radius: 9px; }
.marque span { font: 700 1.375rem/1 var(--f-titre); letter-spacing: 0.01em; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 var(--t-s)/1 var(--f-texte); color: var(--blanc);
  background: transparent; border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: .65rem 1rem; cursor: pointer; min-height: 2.75rem;
}
.menu-toggle span[aria-hidden] { display: grid; gap: 4px; }
.menu-toggle span[aria-hidden] i { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .2s ease; }
.menu-toggle[aria-expanded="true"] span[aria-hidden] i:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span[aria-hidden] i:last-child { transform: translateY(-2.75px) rotate(-45deg); }
.nav { display: none; }
.nav.is-open {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--nuit); border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1rem var(--marge) 1.5rem; max-height: calc(100vh - 4rem); overflow-y: auto;
}
.nav ul { list-style: none; display: grid; gap: .25rem; }
.nav a, .nav-ouvrir { display: block; padding: .7rem 0; text-decoration: none; font-weight: 500; }
.nav a:hover, .nav-ouvrir:hover { color: var(--or-1); }
.nav a[aria-current="page"], .nav-groupe[data-courant] > .nav-ouvrir { color: var(--or); }
.nav-ouvrir { font: 500 1rem/1.5 var(--f-texte); color: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; gap: .5rem; }
.nav-ouvrir::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.nav-ouvrir[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav .nav-sous { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.12); margin: .1rem 0 .4rem; }
.js .nav .nav-sous { display: none; }
.js .nav .nav-sous.is-open { display: grid; }
.nav .nav-sous a { padding: .45rem 0; color: var(--lune); font-weight: 400; }
.nav .nav-sous a:hover, .nav .nav-sous a[aria-current="page"] { color: var(--or-1); }
.nav .nav-tout a { color: var(--or-1); }
.nav .nav-demo { margin-top: .75rem; }
.nav .nav-demo a { display: inline-flex; padding: .75rem 1.4rem; }

@media (min-width: 1120px) {
  .menu-toggle { display: none; }
  .nav, .nav.is-open { display: block; position: static; background: none; border: 0; padding: 0; max-height: none; overflow: visible; }
  .nav > ul { display: flex; align-items: center; gap: 1.35rem; }
  .nav a, .nav-ouvrir { padding: .5rem 0; font-size: var(--t-s); }
  .nav-groupe { position: relative; }
  .nav .nav-sous {
    position: absolute; top: calc(100% + .6rem); left: -1rem; min-width: 17rem; z-index: 60;
    background: var(--nuit); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-m);
    padding: .6rem 1rem; margin: 0; box-shadow: 0 24px 50px -20px rgba(5,4,25,.8);
  }
  .nav .nav-demo { margin: 0; }
  .nav .nav-demo a { padding: .6rem 1.15rem; min-height: 2.6rem; }
}

/* ------------------------------------------------------------ héros */
.heros { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); }
.heros .conteneur { display: grid; gap: clamp(3rem, 6vw, 4rem); align-items: center; }
@media (min-width: 960px) { .heros .conteneur { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.heros-texte { display: grid; gap: 1.6rem; justify-items: start; }
.icone-halo { position: relative; width: 76px; height: 76px; }
.icone-halo img { position: relative; width: 76px; height: 76px; border-radius: 19px; z-index: 1; }
.icone-halo::before {
  content: ""; position: absolute; inset: -38px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79,70,216,.85), rgba(79,70,216,.25) 60%, transparent);
  opacity: .7;
}
.heros h1 {
  font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.018em; line-height: 1;
  font-variation-settings: "opsz" 96;
}
.heros h1 .ligne { display: block; }
.signature { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--t-s); color: var(--lune); }
.signature img { height: 19px; width: auto; }
.heros .chapeau { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: #DAD8F4; }
.heros-actions { display: grid; gap: .9rem; }

.heros-activite { gap: 1.2rem; }
.fil-ariane { font-size: var(--t-s); color: var(--lune); }
.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.fil-ariane li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
.fil-ariane a { color: inherit; }
.activite-nom { font: 600 var(--t-l)/1.2 var(--f-titre); color: var(--or-1); }
.heros-activite h1 { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.1rem); letter-spacing: -0.03em; line-height: 1.02; max-width: 16ch; }
.prix-depuis { font-size: var(--t-s); color: var(--lune); }
.prix-depuis a { color: var(--or-1); font-weight: 600; }
.prix-depuis strong { color: var(--blanc); font-size: var(--t-l); font-family: var(--f-titre); }

/* séquence d'ouverture */
@keyframes halo { 0% { transform: scale(.6); opacity: 0; } 35% { opacity: .95; transform: scale(1.08); } 65% { transform: scale(.96); opacity: .75; } 100% { transform: scale(1); opacity: .7; } }
@keyframes apparait { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes etire { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes respire { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: .5; transform: scale(.94); } }

.sequence .icone-halo img { animation: apparait .55s cubic-bezier(.2,.8,.2,1) both; }
.sequence .icone-halo::before { animation: halo 1.4s .15s cubic-bezier(.3,.7,.2,1) both, respire 6s 2s ease-in-out infinite; }
.sequence .filet { animation: etire .8s .55s cubic-bezier(.65,0,.25,1) both; }
.sequence h1 .ligne { animation: monte .7s cubic-bezier(.2,.8,.2,1) both; }
.sequence h1 .ligne:nth-child(1) { animation-delay: .7s; }
.sequence h1 .ligne:nth-child(2) { animation-delay: .82s; }
.sequence .signature { animation: fond .6s 1.05s both; }
.sequence .chapeau { animation: monte .6s 1.1s cubic-bezier(.2,.8,.2,1) both; }
.sequence .heros-actions { animation: monte .6s 1.22s cubic-bezier(.2,.8,.2,1) both; }
.sequence .scene { animation: monte .9s .9s cubic-bezier(.2,.8,.2,1) both; }

/* ------------------------------------------------------------ captures réelles dans un cadre de téléphone */
.scene { position: relative; display: grid; justify-items: center; }
.scene::before {
  content: ""; position: absolute; width: min(120%, 100vw); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(79,70,216,.4), transparent 70%); pointer-events: none;
}
.phone { position: relative; margin: 0; width: min(100%, 19.5rem); display: grid; gap: .9rem; justify-items: center; }
.ecran-cadre {
  width: 100%; border-radius: 2.6rem; padding: .55rem;
  background: linear-gradient(160deg, #2B2858, #0A0925 40%, #1C1A44);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 40px 80px -30px rgba(5,4,25,.75), 0 18px 40px -22px rgba(79,70,216,.5);
}
.ecran-vitre { position: relative; aspect-ratio: 390 / 844; border-radius: 2.1rem; overflow: hidden; background: #F4F5FB; isolation: isolate; }
.ecran-vitre picture, .ecran-vitre img { display: block; width: 100%; height: auto; }
.ecran-vitre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(15,13,51,.08) inset; pointer-events: none; }
.phone figcaption { text-align: center; font-size: var(--t-xs); line-height: 1.4; color: var(--lune); display: grid; gap: .1rem; }
.s-clair .phone figcaption, .s-blanc .phone figcaption { color: var(--encre-2); }
.mention-demo { display: inline-block; justify-self: center; font-weight: 600; letter-spacing: .01em; color: #6B4E12; background: var(--or-3); border-radius: 999px; padding: .2rem .6rem; }

/* entrée : apparition courte, puis défilement 2D vers « Valeur en jeu » pour les longues captures */
.js .phone .ecran-cadre { opacity: 0; transform: translateY(14px); }
.js .phone.is-in .ecran-cadre { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.js .ecran-defile.is-in img { animation: defile 2.6s 1.1s cubic-bezier(.65,0,.35,1) both; }
@keyframes defile { from { transform: translateY(0); } to { transform: translateY(var(--defile, 0%)); } }

.duo-ecrans { display: grid; gap: 2.5rem; align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); }
.duo-ecrans .phone { justify-self: center; }
@media (min-width: 820px) { .duo-ecrans { grid-template-columns: auto 1fr; gap: 4rem; } .duo-inverse { grid-template-columns: 1fr auto; } .duo-inverse .phone { order: 2; } }
.duo-texte { display: grid; gap: 1rem; max-width: 34rem; }
.s-nuit .duo-texte p { color: var(--lune); }
.s-clair .duo-texte p, .s-blanc .duo-texte p { color: var(--encre-2); }
.galerie { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); justify-items: center; }
.galerie .phone { width: min(100%, 17rem); }
.lien-fleche { font-weight: 600; color: var(--violet); }
.s-nuit .lien-fleche { color: var(--or-1); }
.lien-fleche::after { content: " →"; }

/* signature de marque */
.slogan-marque { font-style: italic; color: var(--or-1); margin-left: .2rem; }
.signature { flex-wrap: wrap; row-gap: .3rem; }
.tagline-ar { font-family: "Noto Kufi Arabic NVS", "Noto Kufi Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-weight: 600; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.6; color: var(--or-1); }

/* ------------------------------------------------------------ sélecteur d'activités (accueil) */
.selecteur { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 960px) {
  .selecteur { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
  .selecteur .scene { position: sticky; top: 6rem; }
}
.etapes { list-style: none; display: grid; gap: .5rem; counter-reset: etape; margin-bottom: 1.75rem; }
.etapes li { display: flex; gap: .75rem; align-items: baseline; color: var(--encre-2); }
.etapes li::before { counter-increment: etape; content: counter(etape); flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--violet); color: var(--violet); font: 600 .8rem/1 var(--f-texte); transform: translateY(-.1rem); }
.choix { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.choix button {
  display: grid; grid-template-columns: 1fr auto; gap: .15rem .9rem; text-align: left; align-items: center;
  font: inherit; color: var(--encre); background: var(--blanc);
  border: 1.5px solid var(--trait); border-radius: var(--r-m); padding: .9rem 1rem; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choix button:hover { border-color: #B7B3EE; }
.choix button strong { font-weight: 600; line-height: 1.3; }
.choix button span { font-size: var(--t-s); color: var(--encre-2); line-height: 1.35; }
.choix button::after {
  content: ""; grid-row: 1 / span 2; grid-column: 2; width: 1.35rem; height: 1.35rem; border-radius: 6px;
  border: 1.5px solid #A9ACC8; background: var(--blanc) center / 70% no-repeat;
}
.choix button[aria-pressed="true"] { border-color: var(--violet); background: var(--violet-pale); }
.choix button[aria-pressed="true"]::after {
  background-color: var(--violet); border-color: var(--violet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.resultat { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--trait); display: grid; gap: 1.5rem; }
.resultat-tete { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.resultat-tete h3 { font-size: var(--t-xl); }
.resultat-tete p { color: var(--encre-2); font-size: var(--t-s); }
.resultat-cols { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .resultat-cols { grid-template-columns: 1fr 1fr; } }
.resultat h4 { font: 600 var(--t-s)/1.3 var(--f-texte); color: var(--encre-2); margin-bottom: .6rem; }
.liste-coche { list-style: none; display: grid; gap: .45rem; }
.liste-coche li { position: relative; padding-left: 1.5rem; line-height: 1.4; }
.liste-coche li::before { content: ""; position: absolute; left: 0; top: .42em; width: .8rem; height: .45rem; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }
.liste-groupes { list-style: none; display: grid; gap: .5rem; }
.liste-groupes li { line-height: 1.35; }
.liste-groupes span { display: block; font-size: var(--t-s); color: var(--encre-2); }
.resultat-indic { font: 600 var(--t-l)/1.3 var(--f-titre); }
.resultat .actions a:not(.btn) { font-weight: 600; color: var(--violet); }

/* ------------------------------------------------------------ Cockpit (nuit) */
.trois { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .trois { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.bloc { display: grid; gap: .8rem; align-content: start; }
.bloc .filet { width: 3rem; }
.bloc p { color: var(--lune); }
.s-clair .bloc p, .s-blanc .bloc p { color: var(--encre-2); }
.indicateurs { margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(255,255,255,.14); }
.indicateurs h3 { padding: 1.5rem 0 1rem; font-size: var(--t-l); color: var(--or-1); font-weight: 500; }
.indicateurs ul { list-style: none; display: grid; }
@media (min-width: 760px) { .indicateurs ul { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.indicateurs li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.indicateurs li a { text-decoration: none; font-weight: 500; }
.indicateurs li a:hover { color: var(--or-1); text-decoration: underline; }
.indicateurs li span { color: var(--lune); text-align: right; font-size: var(--t-s); }

/* ------------------------------------------------------------ fil de l'affaire */
.fil { list-style: none; display: grid; gap: 0; position: relative; margin-top: .5rem; }
.fil::before {
  content: ""; position: absolute; left: .55rem; top: .6rem; bottom: .6rem; width: 2px;
  background: linear-gradient(180deg, var(--or-1), var(--or) 55%, var(--or-3)); transform-origin: top;
}
.fil li { position: relative; padding: 0 0 1.6rem 2.4rem; }
.fil li:last-child { padding-bottom: 0; }
.fil li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--or); box-sizing: border-box;
}
.fil li:last-child::before { background: var(--or); }
.fil h3 { font-size: var(--t-l); margin-bottom: .2rem; }
.fil p { color: var(--encre-2); font-size: var(--t-s); max-width: 30ch; }
@media (min-width: 860px) {
  .fil { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .fil::before { left: .6rem; right: 10%; top: .55rem; bottom: auto; height: 2px; width: auto; transform-origin: left; background: var(--filet); }
  .fil li { padding: 2.4rem 0 0; }
  .fil li::before { top: 0; }
}
.js .fil[data-reveal]::before { transform: scaleY(0); }
.js .fil[data-reveal] li { opacity: 0; transform: translateY(8px); }
.js .fil[data-reveal].is-in::before { transform: none; transition: transform 1.3s cubic-bezier(.65,0,.25,1); }
.js .fil[data-reveal].is-in li { opacity: 1; transform: none; transition: opacity .45s ease, transform .5s ease; }
.js .fil[data-reveal].is-in li:nth-child(2) { transition-delay: .2s; } .js .fil[data-reveal].is-in li:nth-child(3) { transition-delay: .4s; }
.js .fil[data-reveal].is-in li:nth-child(4) { transition-delay: .6s; } .js .fil[data-reveal].is-in li:nth-child(5) { transition-delay: .8s; }
@media (min-width: 860px) { .js .fil[data-reveal]::before { transform: scaleX(0); } }

.fil-notes { display: grid; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--trait); }
@media (min-width: 760px) { .fil-notes { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.fil-notes h3 { margin-bottom: .4rem; }
.fil-notes p { color: var(--encre-2); }

/* ------------------------------------------------------------ fonctions transverses */
.fonctions { display: grid; gap: 2.25rem 3rem; }
@media (min-width: 700px) { .fonctions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .fonctions { grid-template-columns: repeat(3, 1fr); } }
.fonction { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; align-content: start; }
.fonction svg { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; stroke: var(--violet); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fonction p { color: var(--encre-2); }
.fonction .etiquette { display: inline-block; margin-left: .35rem; font: 500 var(--t-xs)/1 var(--f-texte); color: var(--violet); border: 1px solid #C9C6F3; border-radius: 1rem; padding: .25rem .55rem; vertical-align: .15em; }

/* ------------------------------------------------------------ fiabilité */
.fiabilite { list-style: none; display: grid; gap: 2rem 3rem; }
@media (min-width: 700px) { .fiabilite { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .fiabilite { grid-template-columns: repeat(3, 1fr); } }
.fiabilite li { display: grid; gap: .45rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid rgba(221,182,106,.35); }
.fiabilite h3 { font-size: var(--t-l); }
.fiabilite p { color: var(--lune); }

/* ------------------------------------------------------------ tarifs (aperçu) */
.grille-prix { display: grid; gap: 3rem; }
@media (min-width: 900px) { .grille-prix { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.table-prix { width: 100%; border-collapse: collapse; }
.table-prix caption { text-align: left; font: 600 var(--t-l)/1.3 var(--f-titre); padding-bottom: .9rem; }
.table-prix th, .table-prix td { padding: .85rem 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: baseline; }
.table-prix th { font-weight: 500; }
.table-prix th a { text-decoration: none; }
.table-prix th a:hover { text-decoration: underline; color: var(--violet); }
.table-prix td { text-align: right; white-space: nowrap; font-weight: 600; }
.table-prix td small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--encre-2); }
.table-prix thead th { font-size: var(--t-s); color: var(--encre-2); font-weight: 500; }
.table-prix thead th:last-child { text-align: right; }
.encadre { background: var(--blanc); border-radius: var(--r-l); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; box-shadow: 0 1px 0 rgba(18,20,58,.05), 0 24px 50px -36px rgba(18,20,58,.45); }
.s-blanc .encadre { background: var(--brume); box-shadow: none; }
.encadre h3 { font-size: var(--t-xl); }
.encadre ul { list-style: none; display: grid; gap: .55rem; }
.encadre li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--trait); padding-bottom: .55rem; }
.encadre li span:last-child { font-weight: 600; white-space: nowrap; }
.note { font-size: var(--t-s); color: var(--encre-2); }

/* ------------------------------------------------------------ bientôt */
.bientot { list-style: none; display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .bientot { grid-template-columns: repeat(3, 1fr); } }
.bientot li { display: grid; gap: .7rem; align-content: start; padding: 1.5rem; border-radius: var(--r-m); border: 1px dashed #B9BCD6; background: transparent; }
.bientot .badge { justify-self: start; font: 500 var(--t-xs)/1 var(--f-texte); color: #6B4E12; background: var(--or-3); border-radius: 1rem; padding: .35rem .65rem; }
.bientot p { color: var(--encre-2); }
.bientot a { font-weight: 600; color: var(--violet); }

/* ------------------------------------------------------------ pilote */
.pilote .conteneur { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pilote .conteneur { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.pilote ul { list-style: none; display: grid; gap: .6rem; }
.pilote li { padding-left: 1.6rem; position: relative; color: #DAD8F4; }
.pilote li::before { content: ""; position: absolute; left: 0; top: .6em; width: .8rem; height: 2px; background: var(--or); }
.pilote-texte { display: grid; gap: 1.25rem; }

/* ------------------------------------------------------------ pages activité */
.colonnes { display: grid; gap: 3rem; }
@media (min-width: 900px) { .colonnes { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.socle h3, .options h3 { margin-bottom: 1rem; }
.options-liste { list-style: none; display: grid; gap: 1rem; }
.options-liste li { padding: 1.25rem; border-radius: var(--r-m); background: var(--blanc); display: grid; gap: .35rem; box-shadow: 0 1px 0 rgba(18,20,58,.05); }
.s-blanc .options-liste li { background: var(--brume); box-shadow: none; }
.options-liste .opt-tete { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.options-liste .opt-tete strong { font-size: var(--t-m); }
.options-liste .opt-prix { font-size: var(--t-s); color: var(--violet); font-weight: 600; white-space: nowrap; }
.options-liste p { color: var(--encre-2); font-size: var(--t-s); }
.texte-long { display: grid; gap: 1rem; max-width: 62ch; align-content: start; }
.texte-long p { color: var(--encre-2); }

.leviers { list-style: none; display: grid; }
.leviers li { display: grid; gap: .25rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.leviers li:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.leviers strong { font-weight: 600; }
.leviers span { color: var(--lune); font-size: var(--t-s); }
.leviers .opt, .gestes .opt { color: var(--or-1); font-size: var(--t-xs); font-weight: 500; margin-left: .2rem; white-space: nowrap; }
.gestes { list-style: none; display: grid; gap: .75rem; counter-reset: g; }
.gestes li { display: flex; gap: .9rem; align-items: baseline; }
.gestes li::before { counter-increment: g; content: counter(g); flex: none; font: 700 var(--t-l)/1 var(--f-titre); color: var(--or); width: 1.2rem; }
.gestes small { display: block; color: var(--lune); font-size: var(--t-s); }

.roles { width: 100%; border-collapse: collapse; }
.roles th, .roles td { text-align: left; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.roles thead th { font-size: var(--t-s); color: var(--encre-2); font-weight: 500; }
.roles tbody th { font-weight: 600; white-space: nowrap; }
.roles td { color: var(--encre-2); }
.roles td small { display: block; font-size: var(--t-xs); color: var(--violet); margin-top: .2rem; }
@media (max-width: 480px) { .roles tbody th { white-space: normal; } }

.faq { display: grid; gap: 0; border-top: 1px solid var(--trait); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font: 600 var(--t-l)/1.35 var(--f-titre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.55rem; width: .65rem; height: .65rem; border-right: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.8rem; }
.faq details > div { padding: 0 0 1.4rem; color: var(--encre-2); max-width: 62ch; display: grid; gap: .6rem; }

.autres-activites ul { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.autres-activites a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--trait); text-decoration: none; background: var(--blanc); font-size: var(--t-s); }
.autres-activites a:hover { border-color: var(--violet); color: var(--violet); }

.bande-cta .conteneur { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .bande-cta .conteneur { grid-template-columns: 1fr auto; align-items: center; } }
.bande-cta .section { padding-block: clamp(3rem, 7vw, 5rem); }

/* ------------------------------------------------------------ offres */
.mes { display: grid; gap: 1.25rem; }
@media (min-width: 800px) { .mes { grid-template-columns: 1fr 1fr; } }
.mes article { background: var(--blanc); border-radius: var(--r-l); padding: clamp(1.5rem, 3vw, 2rem); display: grid; gap: .9rem; align-content: start; }
.mes .montant { font: 700 var(--t-2xl)/1 var(--f-titre); letter-spacing: -0.02em; }
.mes .montant small { font: 500 var(--t-s)/1 var(--f-texte); color: var(--encre-2); letter-spacing: 0; margin-left: .3rem; }
.hors { margin-top: 1.5rem; display: grid; gap: .4rem; color: var(--encre-2); font-size: var(--t-s); }

.simulateur { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) {
  .simulateur { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; }
  .sim-sortie { position: sticky; top: 5.5rem; }
}
.sim-form { display: grid; gap: 2.25rem; }
.sim-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .9rem; }
.sim-form legend { font: 600 var(--t-l)/1.3 var(--f-titre); padding: 0; margin-bottom: .9rem; }
.sim-form legend small { display: block; font: 400 var(--t-s)/1.4 var(--f-texte); color: var(--encre-2); margin-top: .2rem; }
.cartes-radio { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.carte-radio { position: relative; }
.carte-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.carte-radio label { display: grid; gap: .2rem; padding: .9rem 1rem; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--blanc); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; height: 100%; }
.carte-radio label strong { font-weight: 600; line-height: 1.3; }
.carte-radio label .desc { font-size: var(--t-s); color: var(--encre-2); }
.carte-radio input:checked + label { border-color: var(--violet); background: var(--violet-pale); }
.carte-radio input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 2px; }
.carte-radio input:hover + label { border-color: #B7B3EE; }
.carte-radio input:checked:hover + label { border-color: var(--violet); }

.sim-check { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; }
.sim-check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--violet); flex: none; }
.sim-check label { cursor: pointer; line-height: 1.4; }
.sim-check label .desc { display: block; font-size: var(--t-s); color: var(--encre-2); }
.sim-check label b { font-weight: 600; color: var(--violet); white-space: nowrap; }
.sim-check.is-principale { opacity: .55; }
.sim-check.is-principale label::after { content: " (activité principale)"; font-size: var(--t-s); color: var(--encre-2); }
.checks-2 { display: grid; gap: 0 2rem; }
@media (min-width: 640px) { .checks-2 { grid-template-columns: 1fr 1fr; } }
.groupe-options { display: grid; gap: .2rem; padding: 1rem 1.15rem; border-radius: var(--r-m); background: var(--blanc); }
.groupe-options h3 { font: 600 var(--t-s)/1.3 var(--f-texte); color: var(--encre-2); margin-bottom: .2rem; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--blanc); }
.stepper button { width: 3rem; height: 3rem; border: 0; background: none; font: 500 1.5rem/1 var(--f-texte); color: var(--violet); cursor: pointer; border-radius: 999px; }
.stepper button:disabled { color: #A7A9C2; cursor: not-allowed; }
.stepper input { width: 4.5rem; text-align: center; border: 0; font: 600 var(--t-l)/1 var(--f-titre); color: var(--encre); background: transparent; -moz-appearance: textfield; appearance: textfield; padding: .5rem 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ligne-util { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ligne-util label { font-weight: 500; }
.segment { display: inline-grid; grid-auto-flow: column; background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 999px; padding: .25rem; justify-self: start; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment label { padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; font-weight: 500; }
.segment input:checked + label { background: var(--violet); color: var(--blanc); }
.segment input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 2px; }
.atelier { padding: 1rem 1.15rem; border-radius: var(--r-m); background: #FBF4E2; border: 1px solid #EAD6A8; }
.atelier p { font-size: var(--t-s); color: #4F3D12; margin-top: .25rem; }

.sim-sortie { color: var(--blanc); background-color: var(--nuit); background-image: var(--zellige), var(--nuit-fond); background-size: 72px 72px, 100% 100%; border-radius: var(--r-l); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.25rem; }
.sim-sortie h3 { font-size: var(--t-l); color: var(--or-1); font-weight: 500; }
.sim-prix { display: grid; gap: .25rem; }
.sim-prix strong { font: 700 clamp(2.6rem, 2rem + 2.4vw, 3.4rem)/1 var(--f-titre); letter-spacing: -0.03em; }
.sim-prix span { color: var(--lune); font-size: var(--t-s); }
.sim-detail { list-style: none; display: grid; gap: .45rem; font-size: var(--t-s); padding: 1rem 0; border-block: 1px solid rgba(255,255,255,.14); }
.sim-detail li { display: flex; justify-content: space-between; gap: 1rem; }
.sim-detail li span:last-child { white-space: nowrap; }
.sim-detail .is-remise { color: var(--or-3); }
.sim-detail .is-total { font-weight: 600; padding-top: .45rem; border-top: 1px dashed rgba(255,255,255,.2); }
.sim-totaux { display: grid; gap: .6rem; margin: 0; }
.sim-totaux div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.sim-totaux dt { color: var(--lune); }
.sim-totaux dt small { display: block; font-size: var(--t-xs); }
.sim-totaux dd { margin: 0; font-weight: 600; white-space: nowrap; }
.sim-totaux .is-grand { padding-top: .7rem; border-top: 1px solid rgba(221,182,106,.45); }
.sim-totaux .is-grand dt { color: var(--blanc); font-weight: 600; }
.sim-totaux .is-grand dd { font: 700 var(--t-xl)/1 var(--f-titre); color: var(--or-1); }
.sim-sortie .note { color: var(--lune); }
.sim-sortie .btn { width: 100%; }

.sim-barre {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .8rem .7rem 1.1rem; border-radius: 999px; color: var(--blanc); background: var(--nuit);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 14px 34px -12px rgba(15,13,51,.7);
  transform: translateY(160%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.sim-barre.is-visible { transform: none; }
.sim-barre p { font-size: var(--t-s); line-height: 1.25; }
.sim-barre strong { font: 700 var(--t-l)/1 var(--f-titre); }
.sim-barre a { flex: none; font-weight: 600; font-size: var(--t-s); color: var(--nuit); background: var(--or-3); border-radius: 999px; padding: .6rem 1rem; text-decoration: none; }
@media (min-width: 1000px) { .sim-barre { display: none; } }

/* ------------------------------------------------------------ texte légal */
.legal { max-width: 46rem; display: grid; gap: 2.5rem; }
.legal section { display: grid; gap: .8rem; }
.legal h2 { font-size: var(--t-xl); max-width: none; }
.legal p, .legal li { color: var(--encre-2); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; margin: 0; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0; color: var(--encre-2); }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: .1rem; } .legal dd { margin-bottom: .6rem; } }

/* ------------------------------------------------------------ pied */
.pied { padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; font-size: var(--t-s); }
.pied-grille { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .pied-grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pied h2 { font: 600 var(--t-m)/1.3 var(--f-texte); color: var(--or-1); margin-bottom: .9rem; max-width: none; letter-spacing: 0; }
.pied ul { list-style: none; display: grid; gap: .5rem; }
.pied a { text-decoration: none; color: #E2E0F7; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied p { color: var(--lune); }
.pied-marque { display: grid; gap: 1rem; align-content: start; }
.pied-marque .slogan { font: 650 var(--t-xl)/1.15 var(--f-titre); color: var(--blanc); letter-spacing: -0.01em; }
.pied-marque .signature img { height: 20px; }
.pied-bas { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: .4rem; color: var(--lune); font-size: var(--t-xs); }
@media (min-width: 860px) { .pied-bas { grid-template-columns: 1fr auto; } }

/* ------------------------------------------------------------ 404 */
.introuvable { min-height: 70vh; display: grid; align-items: center; }
.introuvable .conteneur { display: grid; gap: 1.5rem; justify-items: start; }

/* ------------------------------------------------------------ pages : Pourquoi, Espace client, Modules, Caisse */
.section-courte { padding-block: 2rem; }
.sommaire { list-style: none; display: grid; gap: .4rem 2rem; counter-reset: s; }
@media (min-width: 760px) { .sommaire { grid-template-columns: 1fr 1fr 1fr; } }
.sommaire a { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--trait); text-decoration: none; font-weight: 500; }
.sommaire a:hover { color: var(--violet); }
.sommaire span { font: 700 var(--t-s)/1 var(--f-titre); color: var(--violet); min-width: 1.4rem; }
.point-grille { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .point-grille { grid-template-columns: 1.1fr .9fr; gap: 4rem; } .point-inverse .point-texte { order: 2; } }
.point-texte { display: grid; gap: 1.1rem; align-content: start; }
.point-num { font: 700 var(--t-l)/1 var(--f-titre); color: var(--violet); letter-spacing: .04em; }
.point h2 { max-width: 22ch; }
.portes { list-style: none; display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .portes { grid-template-columns: repeat(3, 1fr); } }
.portes a { display: grid; gap: .3rem; padding: 1.25rem 1.4rem; border-radius: var(--r-m); background: var(--brume); text-decoration: none; border: 1.5px solid transparent; }
.portes a:hover { border-color: var(--violet); }
.portes strong { font: 600 var(--t-l)/1.2 var(--f-titre); }
.portes strong::after { content: " →"; color: var(--violet); }
.portes span { color: var(--encre-2); font-size: var(--t-s); }

.espace { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .espace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.espace-carte { background: var(--blanc); border-radius: var(--r-l); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.5rem; box-shadow: 0 1px 0 rgba(18,20,58,.05), 0 24px 50px -36px rgba(18,20,58,.45); }
.espace-form { display: grid; gap: 1.4rem; }
.espace-form .champ { display: grid; gap: .5rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.espace-form label, .espace-form legend { font-weight: 600; padding: 0; }
.espace-form input[type="text"], .espace-form input[type="url"] { font: 500 var(--t-m)/1.3 var(--f-texte); color: var(--encre); border: 1.5px solid var(--trait); border-radius: var(--r-s); padding: .8rem .9rem; background: var(--blanc); width: 100%; min-width: 0; }
.champ-adresse { display: flex; align-items: center; border: 1.5px solid var(--trait); border-radius: var(--r-s); background: var(--brume); overflow: hidden; }
.champ-adresse span { padding: 0 .6rem; color: var(--encre-2); font-size: var(--t-s); white-space: nowrap; }
.champ-adresse input[type="text"] { border: 0; border-radius: 0; flex: 1; }
.champ-adresse:focus-within { outline: 3px solid var(--violet); outline-offset: 2px; }
.champ-adresse input:focus-visible { outline: none; }
.espace-form input[aria-invalid="true"], .champ-adresse:has(input[aria-invalid="true"]) { border-color: #B42318; }
.erreur { color: #B42318; font-weight: 600; font-size: var(--t-s); min-height: 1.2em; }
.erreur:empty { min-height: 0; }
.ec-perso summary { cursor: pointer; font-weight: 600; color: var(--violet); }
.ec-perso[open] summary { margin-bottom: .6rem; }
.espace-form .btn { justify-self: start; }
.espace-form .segment label { padding: .6rem 1.3rem; font-weight: 500; }
@media (max-width: 420px) { .champ-adresse span:first-child { display: none; } .champ-adresse span { padding: 0 .5rem; } }
.espace-infos { display: grid; gap: 2.5rem; justify-items: start; }
@media (min-width: 640px) { .espace-infos { grid-template-columns: auto 1fr; align-items: start; } }
.espace-infos .phone { width: min(100%, 14rem); }

.filtres { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtres button { font: 500 var(--t-s)/1.2 var(--f-texte); color: var(--encre); background: var(--blanc); border: 1.5px solid var(--trait); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; min-height: 2.6rem; }
.filtres button:hover { border-color: #B7B3EE; }
.filtres button[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--blanc); }
.filtres-etat { margin: 1rem 0 2rem; }
.carte-modules { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .carte-modules { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .carte-modules { grid-template-columns: 1fr 1fr 1fr; } }
.famille { background: var(--blanc); border-radius: var(--r-l); padding: 1.4rem 1.4rem 1.1rem; display: grid; gap: .8rem; align-content: start; }
.famille h2 { font-size: var(--t-l); max-width: none; display: flex; align-items: center; gap: .6rem; }
.famille-pastille { width: .7rem; height: .7rem; border-radius: 50%; background: var(--or); flex: none; }
.modules { list-style: none; display: grid; }
.modules li { padding: .8rem 0; border-top: 1px solid var(--trait); display: grid; gap: .25rem; }
.modules h3 { font: 600 var(--t-m)/1.3 var(--f-texte); letter-spacing: 0; }
.modules p { font-size: var(--t-s); color: var(--encre-2); }
.modules .apport { font-size: var(--t-xs); color: var(--encre-2); }
.modules .apport span { font-weight: 600; color: var(--violet); }
.js .modules li { transition: opacity .25s ease; }
.modules li.is-masque, .famille.is-masque { display: none; }

.grille-caisse { list-style: none; display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 700px) { .grille-caisse { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grille-caisse { grid-template-columns: 1fr 1fr 1fr; } }
.grille-caisse li { display: grid; gap: .35rem; padding-top: 1rem; border-top: 2px solid var(--or); align-content: start; }
.grille-caisse h3 { font-size: var(--t-l); }
.grille-caisse p { color: var(--encre-2); }

/* ------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .phone .ecran-cadre { opacity: 1; transform: none; }
  .js .ecran-defile img { animation: none !important; transform: none; }
  .js .fil[data-reveal] li { opacity: 1; transform: none; }
  .js .fil[data-reveal]::before { transform: none; }
}

@media print {
  .entete, .menu-toggle, .scene, .bande-cta { display: none !important; }
  .s-nuit, .s-nuit-plat { background: #fff !important; color: #000 !important; }
}