/* ═══════════════════════════════════════════════════════════════════
   KamiFood — site vitrine, refonte du 15/09/2026
   Direction : la cuisine qui tourne, vue du poste de pilotage. Un teal
   de nuit pour l'ouverture, un papier froid et net pour le reste, et le
   vocabulaire du métier en caractères d'étiqueteuse (°C, J−2, 11:00).
   Titres : Bricolage Grotesque (opsz, wdth). Texte : Instrument Sans.
   Chiffres, heures, étiquettes : Martian Mono.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --papier: #f4f7f6;
  --surface: #ffffff;
  --encre: #0d1b19;
  --encre-2: #3a4a47;
  --gris: #5d6f6a;
  --trait: #d9e3e0;
  --trait-fort: #c4d3cf;
  --teinte: #e6f2ef;
  --accent: #0d9488;
  --accent-fonce: #0b6b62;
  --accent-texte: #0b6b62;
  --menthe: #5eead4;
  --nuit: #082522;
  --nuit-2: #0d302c;
  --nuit-trait: rgba(94, 234, 212, 0.16);
  --sur-nuit: #e4f1ee;
  --sur-nuit-2: #a9c9c3;
  --critique: #c2452d;
  --vigilance: #b7791f;
  --ok: #0f766e;
  --ombre: 0 1px 2px rgba(8, 37, 34, 0.06), 0 12px 32px -12px rgba(8, 37, 34, 0.18);
  --ombre-appareil: 0 40px 80px -30px rgba(3, 20, 18, 0.55), 0 18px 36px -18px rgba(3, 20, 18, 0.4);

  --titre: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --texte: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gouttiere: clamp(18px, 4.5vw, 56px);
  --large: 78rem;
  --mesure: 36rem;
  --bloc: clamp(72px, 10vw, 136px);
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --barre-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0a1312;
    --surface: #0f1b19;
    --encre: #e5eeec;
    --encre-2: #b6c7c3;
    --gris: #8ea39e;
    --trait: #1f2f2c;
    --trait-fort: #2b3f3b;
    --teinte: #0d1f1c;
    --accent: #2dd4bf;
    --accent-fonce: #5eead4;
    --accent-texte: #5eead4;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0a1312;
  --surface: #0f1b19;
  --encre: #e5eeec;
  --encre-2: #b6c7c3;
  --gris: #8ea39e;
  --trait: #1f2f2c;
  --trait-fort: #2b3f3b;
  --teinte: #0d1f1c;
  --accent: #2dd4bf;
  --accent-fonce: #5eead4;
  --accent-texte: #5eead4;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ─── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--barre-h) + 16px); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(16.5px, 0.95rem + 0.2vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
/* Un lien au milieu d'un paragraphe se voit : le modèle de reprise à télécharger. */
.mene a, .palier a, .calendrier a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--titre); margin: 0; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 1.1rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; font-variation-settings: "wdth" 88, "opsz" 96; }
h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.03em; font-variation-settings: "wdth" 90, "opsz" 72; }
h3 { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.16; letter-spacing: -0.02em; font-variation-settings: "wdth" 94, "opsz" 36; }
p { margin: 0 0 1em; }
.chiffre, .tbl .m, .tbl .chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mene { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.28rem); color: var(--encre-2); max-width: 38rem; line-height: 1.5; text-wrap: pretty; }
.sur {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-texte); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: 0.6em;
}
.sur::before { content: ""; width: 1.4em; height: 1px; background: currentColor; opacity: 0.7; }
.sur-clair { color: var(--menthe); }
.appui { color: var(--gris); font-size: 0.95rem; max-width: 44rem; margin-top: 2rem; }
.legende { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--gris); margin: 1.2rem 0 0; max-width: 46rem; line-height: 1.6; }
.legende-clair { color: var(--sur-nuit-2); }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: var(--gouttiere); top: 0.6rem; z-index: 200; background: var(--surface); color: var(--encre); padding: 0.6em 1em; border-radius: 8px; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.bande { padding-block: var(--bloc); padding-inline: var(--gouttiere); position: relative; }
.dedans { max-width: var(--large); margin-inline: auto; }
.b-teinte { background: var(--teinte); }
.b-nuit { background: var(--nuit); color: var(--sur-nuit); }
.b-nuit .mene { color: var(--sur-nuit-2); }
.entete-section { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.entete-section h2 { margin-bottom: 0.5em; }

/* ─── Boutons ──────────────────────────────────────────────────────── */
.btn {
  font-family: var(--texte); font-size: 0.98rem; font-weight: 600; line-height: 1; letter-spacing: -0.005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.95em 1.45em; border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--courbe), color 0.2s var(--courbe), border-color 0.2s var(--courbe), transform 0.2s var(--courbe), box-shadow 0.2s var(--courbe);
  min-height: 48px;
}
.btn .fleche { transition: transform 0.25s var(--courbe); }
.btn:hover .fleche { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-plein { background: var(--accent); color: #fff; }
.btn-plein:hover { background: var(--accent-fonce); color: var(--papier); }
.btn-lumiere { background: var(--menthe); color: var(--nuit); box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.4); }
.btn-lumiere:hover { background: #99f6e4; box-shadow: 0 10px 30px -8px rgba(94, 234, 212, 0.55); }
.btn-verre { background: rgba(255, 255, 255, 0.05); color: var(--sur-nuit); border-color: rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-verre:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.btn-petit { min-height: 40px; padding: 0.7em 1.15em; font-size: 0.88rem; background: var(--menthe); color: var(--nuit); }
.btn-petit:hover { background: #99f6e4; }

/* ─── Barre de navigation ──────────────────────────────────────────── */
.progression { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; background: var(--menthe); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progression { animation: progresse linear both; animation-timeline: scroll(root); }
  @keyframes progresse { to { transform: scaleX(1); } }
}
.barre {
  position: sticky; top: 0; z-index: 100; height: var(--barre-h);
  background: rgba(8, 37, 34, 0.72); color: var(--sur-nuit);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: background-color 0.3s var(--courbe), border-color 0.3s var(--courbe);
}
.barre.defilee { background: rgba(8, 37, 34, 0.94); border-bottom-color: var(--nuit-trait); }
.barre-in { max-width: var(--large); height: 100%; margin: 0 auto; padding-inline: var(--gouttiere); display: flex; align-items: center; gap: 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.logo .jeton {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, #14b8a6, #0d9488 55%, #0b6b62); color: #fff; font-size: 0.95rem; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.logo .mot { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; font-variation-settings: "wdth" 90; }
.logo .mot span { color: var(--menthe); }
.nav { display: none; gap: 1.6rem; margin-left: auto; font-size: 0.92rem; }
.nav a { text-decoration: none; color: var(--sur-nuit-2); position: relative; padding-block: 0.4em; transition: color 0.2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--menthe); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s var(--courbe); }
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.barre .btn-petit { margin-left: auto; display: none; }
.burger { margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--sur-nuit); transition: transform 0.3s var(--courbe); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 959px) {
  .nav.ouverte {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--barre-h); left: 0; right: 0;
    background: var(--nuit); border-bottom: 1px solid var(--nuit-trait); padding: 0.5rem var(--gouttiere) 1.2rem;
  }
  .nav.ouverte a { padding-block: 0.85em; font-size: 1.05rem; border-bottom: 1px solid var(--nuit-trait); }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .nav + .btn-petit { display: inline-flex; margin-left: 0.4rem; }
  .burger { display: none; }
}

/* ─── Ouverture ────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--nuit); color: var(--sur-nuit); overflow: hidden; padding-inline: var(--gouttiere); padding-block: clamp(40px, 6vw, 88px) 0; margin-top: calc(var(--barre-h) * -1); padding-top: calc(var(--barre-h) + clamp(40px, 6vw, 88px)); isolation: isolate; }
.hero-halo {
  position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 30%, rgba(45, 212, 191, 0.22), transparent 70%),
    radial-gradient(35% 40% at 12% 8%, rgba(94, 234, 212, 0.12), transparent 70%),
    linear-gradient(180deg, transparent 60%, var(--nuit) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background-image: linear-gradient(var(--nuit-trait) 1px, transparent 1px), linear-gradient(90deg, var(--nuit-trait) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.hero-grille { max-width: var(--large); margin: 0 auto; display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }
.hero-texte { max-width: 44rem; }
.pastille {
  display: inline-flex; align-items: center; gap: 0.6em; margin-bottom: 1.6rem; padding: 0.4em 0.9em 0.4em 0.45em; border-radius: 999px;
  border: 1px solid var(--nuit-trait); background: rgba(94, 234, 212, 0.06); color: var(--sur-nuit); text-decoration: none; font-size: 0.85rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.pastille:hover { border-color: rgba(94, 234, 212, 0.45); background: rgba(94, 234, 212, 0.1); }
.pastille b { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; background: var(--menthe); color: var(--nuit); padding: 0.35em 0.65em; border-radius: 999px; }
.hero h1 { color: #f3faf8; }
.hero h1 em { font-style: normal; color: var(--menthe); }
.hero .mene { color: var(--sur-nuit-2); margin-top: 1.4rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.garanties { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--sur-nuit-2); }
.garanties li { display: inline-flex; align-items: center; gap: 0.55em; }
.garanties li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 10px var(--menthe); }
@media (min-width: 1100px) {
  .hero-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hero-texte { padding-top: 2.5rem; }
}

/* La journée : frise + écran + notification */
.journee { position: relative; min-width: 0; }
.frise {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 4px; align-items: stretch;
  margin-bottom: 14px; padding: 5px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--nuit-trait);
}
.moment {
  position: relative; z-index: 1; border: 0; background: transparent; color: var(--sur-nuit-2); cursor: pointer; border-radius: 10px;
  padding: 0.55em 0.3em; display: grid; gap: 1px; justify-items: center; font-family: var(--texte); transition: color 0.25s, background-color 0.25s;
}
.moment .h { font-family: var(--mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.moment .l { font-size: 0.72rem; opacity: 0.8; }
.moment:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.moment[aria-pressed="true"] { color: var(--nuit); background: var(--menthe); }
.moment[aria-pressed="true"] .l { opacity: 1; }
.lecture { z-index: 1; width: 42px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: var(--sur-nuit); cursor: pointer; display: grid; place-items: center; }
.lecture:hover { background: rgba(255, 255, 255, 0.14); }
.ico-lecture { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.lecture.en-cours .ico-lecture { width: 10px; height: 12px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.frise-avance { position: absolute; left: 5px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--menthe); width: 0; opacity: 0; }
.journee.joue .frise-avance { opacity: 0.9; }
@media (max-width: 540px) {
  .moment .l { display: none; }
  .moment { padding: 0.7em 0.1em; }
  .moment .h { font-size: 0.66rem; }
}

.notif {
  position: relative; margin: 14px 0 0 auto; width: min(100%, 22rem); padding: 12px 14px 12px 14px; border-radius: 14px;
  background: rgba(15, 30, 28, 0.86); border: 1px solid rgba(94, 234, 212, 0.25); color: #e9f5f2;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; gap: 3px; font-size: 0.82rem; line-height: 1.4;
}
.notif-app { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--sur-nuit-2); text-transform: uppercase; }
.notif-app .ec-jeton { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
.notif b { font-size: 0.88rem; }
.notif span:last-child { color: var(--sur-nuit-2); }
.notif.arrive { animation: notif-arrive 0.6s var(--courbe) both; }
@keyframes notif-arrive { from { transform: translateY(-10px) scale(0.98); opacity: 0.2; } to { transform: none; opacity: 1; } }
@media (min-width: 1100px) {
  .notif { position: absolute; right: -14px; top: 96px; margin: 0; z-index: 3; }
}

/* Le défilé : ce qu'on range au placard */
.defile { margin: clamp(48px, 7vw, 88px) calc(var(--gouttiere) * -1) 0; border-top: 1px solid var(--nuit-trait); padding-block: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile-intro { text-align: center; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sur-nuit-2); margin: 0 0 14px; }
.defile-piste { display: flex; gap: 2.6rem; width: max-content; animation: defile 60s linear infinite; }
.defile-piste span { font-family: var(--titre); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem); font-weight: 600; color: rgba(228, 241, 238, 0.42); white-space: nowrap; font-variation-settings: "wdth" 92; display: inline-flex; align-items: center; gap: 2.6rem; }
.defile-piste span::after { content: "×"; font-family: var(--mono); font-size: 0.8em; color: rgba(94, 234, 212, 0.5); }
.defile:hover .defile-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ─── Appareils ────────────────────────────────────────────────────── */
.portable { background: #1c2826; border-radius: 16px; padding: 9px 9px 14px; box-shadow: var(--ombre-appareil); border: 1px solid rgba(255, 255, 255, 0.06); }
.portable .vitre { overflow: hidden; border-radius: 6px; background: #fff; }
.socle { height: 12px; margin: 0 -28px; background: linear-gradient(#cfd8d6, #93a39f); border-radius: 0 0 16px 16px; }
.tablette { background: #111a19; border-radius: 26px; padding: 13px; box-shadow: var(--ombre-appareil); max-width: 52rem; margin-inline: auto; }
.tablette .vitre { overflow: hidden; border-radius: 12px; background: #fff; }
.telephone { background: #111a19; border-radius: 36px; padding: 9px; box-shadow: var(--ombre-appareil); width: min(250px, 72vw); margin: 22px auto 0; }
.telephone .vitre { overflow: hidden; border-radius: 28px; background: #fff; }
@media (min-width: 820px) {
  .portable .vitre { aspect-ratio: 16 / 10; }
  .telephone .vitre { aspect-ratio: 390 / 800; }
}
.scene { position: relative; max-width: 58rem; }
@media (min-width: 1000px) {
  .scene.duo { padding-right: 150px; }
  .scene.duo .telephone, .scene.duo .etiquette { position: absolute; right: 0; bottom: -24px; margin: 0; z-index: 2; }
  .scene.duo .telephone { width: 226px; }
}

/* ─── Écrans reconstruits de l'application ─────────────────────────── */
.ec { background: #f5f8f7; color: #16201e; font-family: var(--texte); font-size: 11px; line-height: 1.35; text-align: left; display: grid; grid-template-columns: 1fr; height: 100%; min-height: 0; }
.ec-plein { background: #f1f5f4; }
.ec-flanc { display: none; background: #0d3431; color: #cfe3de; padding: 13px 11px; overflow: hidden; }
.ec-marque { display: flex; align-items: center; gap: 7px; padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 11px; }
.ec-jeton { width: 24px; height: 24px; border-radius: 6px; background: #0d9488; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.ec-jeton.gros { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.ec-marque b { display: block; font-size: 12px; letter-spacing: -0.01em; }
.ec-marque em { display: block; font-style: normal; font-size: 9px; color: #8fb0aa; line-height: 1.2; }
.ec-menu { display: grid; gap: 1px; }
.ec-menu span { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; color: #bdd4cf; font-size: 11px; }
.ec-menu span.on { background: rgba(94, 234, 212, 0.17); color: #fff; font-weight: 600; }
.ec-menu span.sous { padding-left: 18px; font-size: 10.5px; color: #9dbcb6; }
.ec-menu span i { font-style: normal; font-family: var(--mono); font-size: 9px; color: #86b3ac; }
.ec-lic { margin-top: 12px; padding: 7px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); font-size: 9px; color: #a9c5bf; }
.ec-lic b { display: block; color: #5eead4; font-size: 10px; margin-bottom: 1px; }
.ec-corps { padding: 13px; min-width: 0; overflow: hidden; }
.ec-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ec-tete h5 { font-family: var(--titre); font-size: 15px; margin: 0 0 1px; letter-spacing: -0.02em; font-weight: 700; font-variation-settings: "wdth" 92; }
.ec-tete p { font-size: 10px; color: #66756f; margin: 0; max-width: 48ch; line-height: 1.35; }
.ec-qui { display: flex; align-items: center; gap: 6px; flex: none; }
.ec-pastille { width: 23px; height: 23px; border-radius: 50%; background: #d7e6e2; color: #134e4a; display: grid; place-items: center; font-weight: 700; font-size: 9.5px; }
.ec-qui b { display: block; font-size: 10px; }
.ec-qui em { display: block; font-style: normal; font-family: var(--mono); font-size: 7.5px; color: #87958f; letter-spacing: 0.04em; }
.ec-lab { font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: 0.12em; color: #87958f; margin: 0 0 5px; }
.ec-sel { border: 1px solid #d6dedc; background: #fff; border-radius: 5px; padding: 3px 8px; font-size: 10px; font-weight: 600; color: #394543; white-space: nowrap; }
.ec-sel.plein { background: #0d9488; color: #fff; border-color: #0d9488; }
.ec-sel.gros { padding: 6px 18px; font-size: 12px; }
.ec-sel.teal { border-color: #0d9488; color: #0b6b62; }
.bloc { background: #fff; border: 1px solid #e3e9e7; border-radius: 7px; overflow: hidden; margin-bottom: 10px; }
.rang { display: flex; align-items: center; gap: 8px; padding: 6.5px 10px; border-bottom: 1px solid #eef2f1; }
.rang:last-child { border-bottom: 0; }
.rang.entete { background: #f6f9f8; }
.pt { width: 7px; height: 7px; border-radius: 50%; flex: none; transition: background-color 0.4s; }
.pt-r { background: #c2452d; box-shadow: 0 0 0 3px rgba(194, 69, 45, 0.14); }
.pt-a { background: #b7791f; }
.pt-v { background: #0d9488; }
.tx { flex: 1; min-width: 0; }
.tx b { display: block; font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx em { font-style: normal; font-size: 9px; color: #87958f; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act { font-size: 9.5px; color: #0b6b62; font-weight: 600; white-space: nowrap; flex: none; }
.act.gris { color: #87958f; font-weight: 400; font-family: var(--mono); font-size: 8.5px; }
.act.rouge { color: #c2452d; }
.act.ambre { color: #9a6516; }
.act.fort { font-family: var(--mono); font-size: 10px; color: #0b6b62; }
.act.cadre { border: 1px solid #0d9488; border-radius: 4px; padding: 2px 7px; }
.alertes .rang { animation: rang-entre 0.45s var(--courbe) both; }
.alertes .rang:nth-child(2) { animation-delay: 0.06s; }
.alertes .rang:nth-child(3) { animation-delay: 0.12s; }
@keyframes rang-entre { from { transform: translateY(6px); opacity: 0.35; } to { transform: none; opacity: 1; } }
.rang.regle .tx b { color: #6d7c77; text-decoration: line-through; text-decoration-color: rgba(13, 148, 136, 0.6); }

.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.tuile { background: #fff; border: 1px solid #e3e9e7; border-radius: 7px; padding: 8px 9px; min-width: 0; }
.tuile .l { font-family: var(--mono); font-size: 7.5px; color: #87958f; letter-spacing: 0.06em; display: block; margin-bottom: 2px; }
.tuile .v { font-family: var(--titre); font-size: 18px; font-weight: 700; letter-spacing: -0.03em; display: block; line-height: 1.05; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 90; }
.tuile .v.petit { font-size: 14px; }
.tuile .s { font-size: 8.5px; color: #87958f; display: block; margin-top: 2px; line-height: 1.3; }
.tuile.ok .v { color: #0b6b62; }
.tuile.al .v { color: #c2452d; }

.tbl { width: 100%; border-collapse: collapse; font-size: 10px; background: #fff; }
.tbl th { background: #eef3f2; color: #5b6964; text-align: left; padding: 5px 8px; font-family: var(--mono); font-size: 7.5px; font-weight: 500; letter-spacing: 0.08em; border-bottom: 1px solid #dfe6e4; text-transform: uppercase; }
.tbl td { padding: 5.5px 8px; border-bottom: 1px solid #eef2f1; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td b { font-weight: 600; }
.tbl td em { font-style: normal; color: #87958f; font-size: 8.5px; display: block; }
.tbl .m { text-align: right; white-space: nowrap; font-size: 9.5px; }
.tbl .chiffre { font-size: 9.5px; white-space: nowrap; }
.tbl .tot td { background: #eefaf7; font-weight: 700; border-top: 1px solid #cde6e0; }
.tbl-cadre { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border: 1px solid #e3e9e7; border-radius: 7px; margin-bottom: 10px; }
.st { display: inline-block; padding: 1.5px 7px; border-radius: 20px; font-size: 8.5px; font-weight: 700; white-space: nowrap; }
.st-ok { background: #e2f3ef; color: #0b6b62; }
.st-w { background: #fbf2de; color: #92600f; }
.st-b { background: #fbe8e3; color: #b23b24; }
.champ-mini { display: inline-block; border: 1px solid #d3dcda; border-radius: 4px; background: #fff; padding: 1.5px 7px; font-family: var(--mono); font-size: 9px; color: #9aa7a3; min-width: 38px; text-align: center; }
.ban { background: #fdf7ea; border: 1px solid #efdcaf; border-radius: 7px; padding: 8px 10px; margin-bottom: 10px; }
.ban b { font-size: 10.5px; display: block; margin-bottom: 2px; }
.ban p { margin: 0; font-size: 9.5px; color: #66756f; line-height: 1.4; }
.doc { padding: 11px 12px; }
.doc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.doc-tete b { font-size: 11px; display: block; font-family: var(--mono); letter-spacing: -0.02em; }
.doc-tete em { font-style: normal; display: block; font-size: 9px; color: #87958f; }
.doc-champs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.doc p { margin: 0; font-size: 9.5px; color: #66756f; line-height: 1.45; }
.doc .ia { color: #87958f; font-weight: 600; }
.quota { margin: 0; font-size: 9.5px; color: #87958f; }
@media (max-width: 760px) { .cl-lg { display: none; } }

.tel-ec { background: #f5f8f7; color: #16201e; font-family: var(--texte); font-size: 11.5px; height: 100%; display: flex; flex-direction: column; }
.tel-tete { background: #0d3431; color: #eef6f4; padding: 12px 12px 10px; flex: none; }
.tel-tete.tel-nuit { background: #0a1c1a; }
.tel-tete .h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; }
.tel-tete .h .ec-jeton { width: 18px; height: 18px; font-size: 9px; border-radius: 5px; }
.tel-tete b { display: block; font-family: var(--titre); font-size: 15px; margin-top: 7px; letter-spacing: -0.02em; }
.tel-tete em { font-style: normal; display: block; font-size: 9.5px; color: #a9c5bf; }
.tel-corps { padding: 11px; overflow: hidden; flex: 1; }
.tel-btn { display: block; background: #0d9488; color: #fff; text-align: center; padding: 9px; border-radius: 9px; font-weight: 700; font-size: 11.5px; margin-bottom: 6px; }
.tel-btn span { display: block; font-weight: 400; font-size: 9px; opacity: 0.85; }
.tel-btn.creux { background: #fff; color: #134e4a; border: 1.5px solid #d3dcda; }
.tel-btn.creux span { color: #87958f; opacity: 1; }
.tel-onglets { display: flex; gap: 4px; margin-bottom: 9px; }
.tel-onglets span { flex: 1; text-align: center; padding: 5px 2px; border-radius: 6px; font-size: 9.5px; font-weight: 600; background: #e6ecea; color: #66756f; }
.tel-onglets span.on { background: #0d3431; color: #fff; }
.tel-note { font-size: 10px; color: #87958f; margin: 0; }
/* Le pointage par téléphone : la puce de l'entrée, et le prénom de celui qui vient de poser son téléphone. */
.puce-nfc { height: 64px; border-radius: 9px; margin: 0 0 8px; border: 1px solid #d3dcda; background: #f4f8f7; display: grid; place-items: center; }
.puce-nfc span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #0b6b62; box-shadow: 0 0 0 6px rgba(11, 107, 98, 0.16), 0 0 0 13px rgba(11, 107, 98, 0.07); }
.tel-salut { font-size: 13px; font-weight: 700; color: #0e2a27; margin: 6px 0 8px; }
.bravo { background: #e2f3ef; border: 1px solid #bde3da; border-radius: 9px; padding: 9px 10px; margin-bottom: 9px; font-size: 11px; color: #0b6b62; font-weight: 600; }
.qr { height: 76px; border-radius: 9px; margin: 6px 0 10px; border: 1px solid #d3dcda; opacity: 0.2;
  background: repeating-linear-gradient(90deg, #1f2a28 0 6px, #fff 6px 12px, #1f2a28 12px 15px, #fff 15px 24px, #1f2a28 24px 30px, #fff 30px 33px, #1f2a28 33px 42px, #fff 42px 48px); }
.photo { height: 120px; border-radius: 10px; margin-bottom: 9px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #cfd6d4 0%, #e9eeed 35%, #b9c3c0 36%, #dfe5e3 60%, #aab5b2 100%); }
.photo::after { content: ""; position: absolute; left: 10%; top: 38%; width: 34%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(160, 120, 40, 0.35), transparent); filter: blur(2px); }
.photo span { position: absolute; left: 8px; bottom: 7px; font-family: var(--mono); font-size: 8px; color: #fff; background: rgba(0, 0, 0, 0.45); padding: 2px 6px; border-radius: 4px; }
.avis { background: #fff; border: 1px solid #e3e9e7; border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; }
.avis p { margin: 5px 0 0; font-size: 10px; color: #394543; line-height: 1.4; }
.avis .ia-mini { font-size: 8.5px; color: #87958f; font-family: var(--mono); }

.tg { background: #0e1621; height: 100%; padding: 14px; font-family: var(--texte); overflow: hidden; }
.tg-tete { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 12px; }
.tg-tete b { color: #fff; font-size: 12px; display: block; }
.tg-tete em { font-style: normal; color: #6d8098; font-size: 9.5px; display: block; }
.tg-jour { text-align: center; color: #7d90a8; font-size: 9px; margin: 0 0 10px; font-family: var(--mono); }
.tg-bulle { background: #182533; border-radius: 12px 12px 12px 3px; padding: 12px 14px; color: #e7edf3; font-size: 10.5px; line-height: 1.5; max-width: 30rem; }
.tg-bulle h6 { margin: 0 0 6px; font-size: 11.5px; color: #fff; font-weight: 700; }
.tg-bulle .t { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.12em; color: #5eead4; margin: 10px 0 3px; }
.tg-bulle ul { margin: 0; padding-left: 15px; }
.tg-bulle li { margin-bottom: 3px; }
.tg-bulle .fin { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #9fb3c8; font-size: 10px; }
.tg-h { text-align: right; color: #5b6c80; font-size: 8.5px; margin: 5px 0 0; font-family: var(--mono); }

@media (min-width: 820px) {
  .ec { grid-template-columns: 162px 1fr; font-size: 11.5px; }
  .ec-plein { grid-template-columns: 1fr; }
  .ec-flanc { display: block; }
  .ec-corps { padding: 17px 19px; }
  .ec-tete h5 { font-size: 18px; }
  .tuiles { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .tuiles.t3 { grid-template-columns: repeat(3, 1fr); }
  .tuiles.t2 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tuiles.t2 .tuile { padding: 11px 12px; }
  .tbl { font-size: 10.5px; }
}

/* L'étiquette d'ouverture : ce que sort l'imprimante */
.etiquette {
  display: grid; gap: 4px; width: min(250px, 78vw); margin: 24px auto 0; padding: 14px 16px 12px; border-radius: 6px;
  background: #fbfbf8; color: #111; font-family: var(--mono); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: rotate(-2.5deg); position: relative;
}
.etiquette::before, .etiquette::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: radial-gradient(circle at 5px 0, transparent 4px, #fbfbf8 4.5px) 0 0 / 10px 7px repeat-x; }
.etiquette::before { top: -6px; transform: scaleY(-1); }
.etiquette::after { bottom: -6px; }
.et-tete { font-size: 8.5px; letter-spacing: 0.12em; border-bottom: 1.5px solid #111; padding-bottom: 5px; }
.et-produit { font-family: var(--titre); font-size: 22px; letter-spacing: -0.02em; font-variation-settings: "wdth" 85; }
.et-dates { display: grid; gap: 1px; font-size: 10px; }
.et-dates strong { font-size: 15px; }
.et-pied { font-size: 8px; color: #555; border-top: 1px dashed #999; padding-top: 5px; }
.et-code { height: 22px; opacity: 0.85; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px); }

/* ─── Le quotidien ─────────────────────────────────────────────────── */
.obligations { display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--trait); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; }
.oblig { background: var(--surface); padding: 1.6rem 1.5rem 1.5rem; display: grid; gap: 0.35rem; align-content: start; transition: background-color 0.3s; }
.oblig:hover { background: var(--teinte); }
.oblig .signe { font-family: var(--mono); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 500; color: var(--accent-texte); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-bottom: 0.9rem; }
.oblig h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
.oblig p { margin: 0; color: var(--gris); font-size: 0.95rem; line-height: 1.5; }
.chute { margin-top: 2.2rem; font-family: var(--titre); font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; font-variation-settings: "wdth" 92; max-width: 40rem; }
.chute span { color: var(--accent-texte); }

/* ─── Le tour du produit ───────────────────────────────────────────── */
.tour { max-width: var(--large); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.tour-rail {
  position: sticky; top: var(--barre-h); z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gouttiere) * -1); padding: 10px var(--gouttiere); background: color-mix(in srgb, var(--teinte) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-block: 1px solid var(--trait);
}
.tour-rail::-webkit-scrollbar { display: none; }
.tour-rail a { flex: none; display: inline-flex; align-items: center; gap: 0.55em; text-decoration: none; font-size: 0.86rem; color: var(--gris); padding: 0.5em 0.85em; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.tour-rail a .n { font-family: var(--mono); font-size: 0.66rem; opacity: 0.7; }
.tour-rail a:hover { color: var(--encre); }
.tour-rail a.on { color: var(--encre); background: var(--surface); border-color: var(--trait-fort); box-shadow: var(--ombre); }
.tour-rail a.on .n { color: var(--accent-texte); opacity: 1; }
.chapitres { display: grid; gap: clamp(88px, 12vw, 160px); min-width: 0; }
.chapitre { min-width: 0; scroll-margin-top: calc(var(--barre-h) + 72px); }
.chapitre .dit { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 44px); }
.chapitre .num { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-texte); margin: 0 0 0.9rem; }
.chapitre h3, .chapitre .ch-titre { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem); letter-spacing: -0.028em; line-height: 1.1; margin-bottom: 0.6em; font-variation-settings: "wdth" 90, "opsz" 60; }
.chapitre .dit > p { color: var(--encre-2); max-width: 40rem; }
.puces { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 0.55rem; }
@media (min-width: 720px) { .puces { grid-template-columns: 1fr 1fr; gap: 0.55rem 1.8rem; } }
.puces li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; line-height: 1.45; color: var(--encre); }
.puces li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.75em; height: 0.75em; border-radius: 3px; background: var(--accent); -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border: 2px solid transparent; }
.puces li::after { content: ""; position: absolute; left: 0.22em; top: 0.62em; width: 0.33em; height: 0.18em; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (min-width: 1100px) {
  .tour { grid-template-columns: 14.5rem minmax(0, 1fr); align-items: start; }
  .tour-rail { flex-direction: column; top: calc(var(--barre-h) + 28px); margin: 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; gap: 2px; }
  .tour-rail a { border-radius: 10px; padding: 0.6em 0.8em; }
  .tour-rail a.on { box-shadow: none; }
}

/* ─── Rôles ────────────────────────────────────────────────────────── */
.roles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .roles { grid-template-columns: repeat(3, 1fr); } }
.role { border: 1px solid var(--trait); background: var(--surface); border-radius: 16px; padding: 1.5rem; }
.role-qui { font-family: var(--titre); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; display: block; margin-bottom: 0.6rem; font-variation-settings: "wdth" 90; }
.role p { margin: 0; color: var(--encre-2); font-size: 0.97rem; }

/* ─── Le marché ────────────────────────────────────────────────────── */
.marche-grille { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) { .marche-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.cadre-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--trait); background: var(--surface); }
.cadre-table table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 26rem; }
.cadre-table th { text-align: left; padding: 0.85rem 1rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--trait); }
.cadre-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.cadre-table tbody tr:last-child td { border-bottom: 0; }
.cadre-table .m { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.graphe { margin: 0; padding: 1.4rem 1.4rem 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--trait); --c-nom: 11.5rem; --c-val: 7.6rem; }
.graphe figcaption { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin-bottom: 1.2rem; }
.barres { display: grid; gap: 14px; }
.barre-ligne { display: grid; grid-template-columns: var(--c-nom) minmax(0, 1fr) var(--c-val); gap: 12px; align-items: center; }
.barre-nom { font-size: 0.9rem; font-weight: 600; }
.barre-piste { position: relative; height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, var(--trait) 0 1px, transparent 1px calc(100% / 3)); }
.barre-plage { position: absolute; top: 0; bottom: 0; left: var(--de); right: calc(100% - var(--a)); border-radius: 7px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--vigilance) 55%, transparent) 0 5px, color-mix(in srgb, var(--vigilance) 25%, transparent) 5px 10px); border: 1px solid color-mix(in srgb, var(--vigilance) 60%, transparent); }
.barre-plein { position: absolute; top: 0; bottom: 0; left: 0; width: var(--a); border-radius: 7px; background: linear-gradient(90deg, var(--accent-fonce), var(--accent)); transform-origin: 0 50%; }
.barre-val { font-family: var(--mono); font-size: 0.8rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barre-ligne.kami .barre-nom { color: var(--accent-texte); }
.axe { display: grid; grid-template-columns: var(--c-nom) minmax(0, 1fr) var(--c-val); gap: 12px; margin-top: 8px; }
.axe-piste { position: relative; height: 1.2em; font-family: var(--mono); font-size: 0.62rem; color: var(--gris); }
.axe-piste span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.axe-piste span:nth-child(1) { left: 0; transform: none; }
.axe-piste span:nth-child(2) { left: 33.333%; }
.axe-piste span:nth-child(3) { left: 66.667%; }
.axe-piste span:nth-child(4) { left: 100%; transform: translateX(-100%); }
@media (max-width: 620px) {
  .graphe { --c-nom: 1fr; }
  .barre-ligne { grid-template-columns: minmax(0, 1fr) var(--c-val); }
  .barre-nom { grid-column: 1 / -1; }
  .axe { grid-template-columns: minmax(0, 1fr) var(--c-val); }
  .axe > span:first-child { display: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .barre-plein { animation: barre-pousse linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes barre-pousse { from { transform: scaleX(0.35); } to { transform: scaleX(1); } }
  }
}

/* ─── Formules ─────────────────────────────────────────────────────── */
.bascule { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); margin-bottom: 1.6rem; gap: 2px; flex-wrap: wrap; }
.bascule button { font: inherit; font-size: 0.9rem; font-weight: 600; border: 0; background: transparent; color: var(--gris); padding: 0.6em 1.1em; border-radius: 999px; cursor: pointer; min-height: 40px; transition: background-color 0.25s, color 0.25s; }
.bascule button.on { background: var(--encre); color: var(--papier); }
.formules { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .formules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .formules { grid-template-columns: repeat(4, 1fr); } }
.formule { position: relative; border: 1px solid var(--trait); background: var(--surface); border-radius: 20px; padding: 1.6rem 1.5rem 1.5rem; display: grid; align-content: start; gap: 0.4rem; transition: opacity 0.3s, transform 0.3s var(--courbe), border-color 0.3s; }
.formule:hover { transform: translateY(-3px); border-color: var(--trait-fort); }
.formule h3 { font-size: 1.35rem; }
.formule-prix { margin: 0.5rem 0 0; display: flex; align-items: baseline; gap: 0.4em; flex-wrap: wrap; }
.formule-prix .montant { font-family: var(--titre); font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 86; }
.formule-prix .unite { font-size: 0.85rem; color: var(--gris); }
.formule-dispo { font-size: 0.88rem; color: var(--accent-texte); font-weight: 600; margin: 0 0 0.6rem; min-height: 2.6em; }
.formule ul { list-style: none; padding: 0.9rem 0 0; margin: 0; border-top: 1px solid var(--trait); display: grid; gap: 0.45rem; }
.formule li { font-size: 0.92rem; color: var(--encre-2); padding-left: 1.2rem; position: relative; }
.formule li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--accent-texte); }
.formule.indisponible { opacity: 0.45; }
.formule.indisponible:hover { transform: none; }
.formule.vedette { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--angle, 0deg), var(--accent), var(--menthe), #99f6e4, var(--accent-fonce), var(--accent)) border-box; border: 1.5px solid transparent; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) { .formule.vedette { animation: tourne 8s linear infinite; } }
@keyframes tourne { to { --angle: 360deg; } }
.formule-badge { position: absolute; top: -0.8rem; left: 1.4rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 0.45em 0.8em; border-radius: 999px; }
.conditions { display: grid; gap: 1px; grid-template-columns: 1fr; margin-top: 1.6rem; background: var(--trait); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; }
.condition { background: var(--surface); padding: 1.3rem 1.4rem; }
.condition h3 { font-size: 1.02rem; margin-bottom: 0.45rem; }
.condition p { margin: 0; font-size: 0.93rem; color: var(--encre-2); line-height: 1.55; }
.condition .chiffre { font-size: 0.85em; color: var(--encre); white-space: nowrap; }

/* ─── Simulateur ───────────────────────────────────────────────────── */
.simu { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px) { .simu { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
fieldset { border: 0; padding: 0; margin: 0 0 1.8rem; min-width: 0; }
legend { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--menthe); padding: 0; margin-bottom: 0.8rem; }
.choix { display: grid; gap: 8px; }
@media (min-width: 520px) { .choix.duo { grid-template-columns: 1fr 1fr; } .choix.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .choix.quatre { grid-template-columns: repeat(4, 1fr); } }
.opt { position: relative; display: block; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: block; height: 100%; padding: 0.8rem 0.95rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.035); font-size: 0.93rem; line-height: 1.35; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.opt span b { display: block; font-weight: 600; color: #f1f8f6; }
.opt span em { display: block; font-style: normal; font-size: 0.8rem; color: var(--sur-nuit-2); margin-top: 0.2em; }
.opt:hover span { border-color: rgba(94, 234, 212, 0.4); }
.opt input:checked + span { border-color: var(--menthe); background: rgba(94, 234, 212, 0.12); box-shadow: inset 0 0 0 1px var(--menthe); }
.opt input:focus-visible + span { outline: 2.5px solid var(--menthe); outline-offset: 2px; }
.opt input:disabled + span { opacity: 0.3; cursor: not-allowed; }
.compteur { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compteur button { width: 48px; height: 48px; flex: none; border-radius: 12px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #f1f8f6; font-size: 1.4rem; line-height: 1; font-family: var(--mono); }
.compteur button:hover { background: rgba(255, 255, 255, 0.12); }
.compteur input[type="number"] { width: 5.6rem; height: 48px; text-align: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #fff; font-family: var(--mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.palier { font-size: 0.88rem; color: var(--sur-nuit-2); margin: 10px 0 0; min-height: 1.4em; }
/* Établissements et salariés côte à côte : ce sont les deux nombres qui font le tarif, ils se lisent ensemble. */
.effectifs { display: grid; gap: 1.2rem 1.4rem; }
@media (min-width: 560px) { .effectifs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.effectif { min-width: 0; }
.effectif-lab { display: block; font-size: 0.85rem; font-weight: 600; color: #f1f8f6; margin-bottom: 0.55rem; }
/* « Salariés, tous établissements confondus » passe sur deux lignes à côté d'« Établissements » :
   la sous-grille donne aux deux libellés la même hauteur, et les compteurs restent alignés. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 560px) {
    .effectif { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .effectif-lab { align-self: end; }
  }
}
#bloc-taille .palier { margin-top: 14px; }

/* Le ticket : le devis sort comme un bon de commande */
.ticket { position: relative; }
@media (min-width: 1000px) { .ticket { position: sticky; top: calc(var(--barre-h) + 24px); } }
.ticket-papier {
  position: relative; background: #fbfbf7; color: #12201e; border-radius: 4px 4px 0 0; padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.7); font-size: 0.9rem;
}
.ticket-papier::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 7px, #fbfbf7 7px) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 7px, #fbfbf7 7px) 0 0 / 14px 10px repeat-x; }
.ticket-tete { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 0.9rem; border-bottom: 1.5px solid #12201e; margin: 0 0 0.3rem; flex-wrap: wrap; }
.ticket-tete .chiffre { letter-spacing: 0; text-transform: none; color: #5d6f6a; }
.ticket-bloc { padding: 0.9rem 0 0.8rem; border-bottom: 1px dashed #a9b5b2; }
.ticket-lab { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5d6f6a; margin: 0 0 0.45rem; }
.ticket-lignes { display: grid; gap: 0.3rem; }
.t-ligne { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-size: 0.84rem; color: #3a4a47; }
.t-ligne span:last-child { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; color: #12201e; font-variant-numeric: tabular-nums; }
.ticket-total { display: flex; justify-content: space-between; gap: 12px; margin: 0.55rem 0 0; font-weight: 700; }
.ticket-total .chiffre { font-size: 1rem; }
.ticket-note { margin: 0.45rem 0 0; font-size: 0.8rem; color: #3a4a47; line-height: 1.45; }
.ticket-note b { font-family: var(--mono); font-weight: 500; }
.ticket-offre { margin-top: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 8px; background: #e7f6f2; border: 1px solid #b9e2d9; font-size: 0.82rem; color: #0b4f48; line-height: 1.5; }
.ticket-offre b { display: block; margin-bottom: 0.2rem; }
.ticket-avert { margin: 0.6rem 0 0; font-size: 0.82rem; color: #9a3a26; }
.ticket .btn { width: 100%; margin-top: 1.1rem; }
.ticket .btn-plein { background: #0d9488; color: #fff; }
.ticket .btn-plein:hover { background: #0b6b62; color: #fff; }
.ticket-fine { font-size: 0.72rem; color: #66756f; margin: 0.8rem 0 0; line-height: 1.5; }
.pulse { animation: pulse 0.5s var(--courbe); }
@keyframes pulse { 0% { color: #0d9488; } 100% { color: inherit; } }

/* ─── Installation ─────────────────────────────────────────────────── */
.calendrier { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; grid-template-columns: 1fr; position: relative; }
.calendrier li { position: relative; padding: 0 0 1.8rem 2rem; border-left: 1.5px solid var(--trait-fort); margin-left: 0.4rem; }
.calendrier li:last-child { border-left-color: transparent; padding-bottom: 0; }
.calendrier li::before { content: ""; position: absolute; left: -7px; top: 0.25em; width: 12px; height: 12px; border-radius: 50%; background: var(--papier); border: 2px solid var(--accent); }
.calendrier .quand { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--accent-texte); display: block; margin-bottom: 0.3rem; }
.calendrier p { margin: 0; color: var(--encre-2); font-size: 0.97rem; max-width: 26rem; }
@media (min-width: 900px) {
  .calendrier { grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
  .calendrier li { border-left: 0; margin: 0; padding: 1.8rem 0 0; border-top: 1.5px solid var(--trait-fort); }
  .calendrier li:last-child { border-top-color: var(--trait-fort); }
  .calendrier li::before { left: 0; top: -7px; }
}

/* ─── Données ──────────────────────────────────────────────────────── */
.garde { margin: 0; display: grid; gap: 1px; grid-template-columns: 1fr; background: var(--trait); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; }
.garde > div { background: var(--surface); padding: 1.4rem 1.5rem; }
.garde dt { font-family: var(--titre); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.015em; margin-bottom: 0.35rem; }
.garde dd { margin: 0; color: var(--encre-2); font-size: 0.95rem; }
.sous-traitants { margin-top: 1.6rem; font-size: 0.9rem; color: var(--gris); max-width: 52rem; }
.sous-traitants b { color: var(--encre); font-weight: 600; }

/* ─── Questions ────────────────────────────────────────────────────── */
.questions { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .questions { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; } .questions .entete-section { position: sticky; top: calc(var(--barre-h) + 32px); align-self: start; } }
.faq { border-top: 1px solid var(--trait); }
details { border-bottom: 1px solid var(--trait); interpolate-size: allow-keywords; }
summary { cursor: pointer; padding: 1.2rem 2.4rem 1.2rem 0; font-family: var(--titre); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.012em; list-style: none; position: relative; line-height: 1.35; font-variation-settings: "wdth" 96; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 0.3rem; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 1.5px solid var(--accent-texte); border-bottom: 1.5px solid var(--accent-texte); transform: rotate(45deg); transition: transform 0.3s var(--courbe); }
details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.4s var(--courbe), content-visibility 0.4s allow-discrete; }
details[open]::details-content { block-size: auto; }
.rep p { padding-bottom: 1.3rem; color: var(--encre-2); font-size: 0.98rem; margin: 0; max-width: 42rem; }

/* ─── Demande ──────────────────────────────────────────────────────── */
.demande { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .demande { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; } }
.form { max-width: 42rem; }
.champ { margin-bottom: 1.1rem; }
.champ label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.35rem; }
.champ input, .champ textarea { width: 100%; padding: 0.85rem 0.95rem; border: 1px solid var(--trait-fort); border-radius: 12px; font: inherit; font-size: 1rem; background: var(--surface); color: var(--encre); transition: border-color 0.2s, box-shadow 0.2s; }
.champ textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.duo-champ { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .duo-champ { grid-template-columns: 1fr 1fr; } }
.recap { background: var(--surface); border: 1px dashed var(--trait-fort); border-radius: 12px; padding: 1rem 1.1rem; font-family: var(--mono); font-size: 0.78rem; color: var(--encre-2); white-space: pre-line; margin-bottom: 1.3rem; line-height: 1.7; }
.consent { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 1.3rem; }
.consent input { width: 21px; height: 21px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.consent label { font-size: 0.87rem; color: var(--encre-2); line-height: 1.45; }
.retour { font-size: 0.92rem; margin-top: 1.1rem; padding: 0.85rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-texte); }
.retour.erreur { background: color-mix(in srgb, var(--critique) 9%, transparent); border-color: color-mix(in srgb, var(--critique) 35%, transparent); color: var(--critique); }
.fine { font-size: 0.82rem; color: var(--gris); margin: 0.9rem 0 0; }
.fine a { color: var(--accent-texte); }

/* ─── Pied de page ─────────────────────────────────────────────────── */
.pied { position: relative; overflow: hidden; background: var(--nuit); color: var(--sur-nuit-2); padding-block: var(--bloc) 3rem; padding-inline: var(--gouttiere); font-size: 0.9rem; }
.pied::before { content: "神"; position: absolute; right: -0.08em; bottom: -0.28em; font-size: clamp(14rem, 30vw, 26rem); line-height: 1; color: rgba(94, 234, 212, 0.04); pointer-events: none; }
.pied .dedans { position: relative; display: grid; gap: 2.8rem; }
.pied a { color: var(--menthe); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied h4 { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #7fa39c; margin-bottom: 0.9rem; }
.pied p { color: var(--sur-nuit-2); line-height: 1.65; max-width: 38rem; }
.pied-haut { display: grid; gap: 2rem; }
@media (min-width: 720px) { .pied-haut { grid-template-columns: 1.4fr 1fr; } }
.pied nav p { display: grid; gap: 0.35rem; }
.logo-pied { margin-bottom: 1rem; }
.logo-pied .mot { color: #f1f8f6; }
.legales { border-top: 1px solid var(--nuit-trait); padding-top: 1.8rem; font-size: 0.84rem; }
.arempli { background: rgba(94, 234, 212, 0.14); border-bottom: 1px dashed var(--menthe); padding: 0 0.25em; border-radius: 2px; color: #bdf5ea; }

/* ─── Apparitions au défilement (depuis un état lisible) ───────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .apparait { animation: apparait linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .chapitre .scene { animation: monte linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes apparait { from { opacity: 0.55; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    @keyframes monte { from { opacity: 0.6; transform: translateY(36px) scale(0.985); } to { opacity: 1; transform: none; } }
  }
}

/* ─── Mouvement réduit : tout s'arrête, rien ne disparaît ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .defile-piste { flex-wrap: wrap; width: auto; justify-content: center; gap: 1rem 2rem; }
  .defile-piste span:nth-child(n + 15) { display: none; }
}

@media print { .barre, .progression, .simu, .form, .btn, .frise, .defile, .barre-prix { display: none; } }

/* Des rangées pleines : le nombre de colonnes suit le nombre d'éléments. */
@media (min-width: 560px) { .obligations, .conditions, .garde { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .obligations, .conditions { grid-template-columns: repeat(4, 1fr); } .garde { grid-template-columns: repeat(3, 1fr); } }

/* Le détail de la mise en service, replié : il se consulte, il ne s'impose pas. */
.t-detail { margin-top: 0.55rem; border: 0; }
.t-detail summary { font-family: var(--texte); font-weight: 600; font-size: 0.8rem; color: #0b6b62; padding: 0.3rem 1.4rem 0.3rem 0; font-variation-settings: normal; letter-spacing: 0; }
.t-detail summary::after { width: 7px; height: 7px; border-color: #0b6b62; margin-top: -5px; }
.t-detail .ticket-lignes { padding: 0.4rem 0 0.2rem; }
.t-detail .t-ligne:last-child { border-top: 1px dashed #a9b5b2; padding-top: 0.35rem; margin-top: 0.15rem; font-weight: 600; }

/* Le champ piège du formulaire : hors de l'écran, hors du clavier, hors des lecteurs d'écran. */
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.retour a { color: inherit; font-weight: 600; }
.retour .copier { font: inherit; font-size: 0.85rem; font-weight: 600; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 0.2rem 0.75rem; margin-top: 0.35rem; cursor: pointer; }
.retour .copier:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Le nombre de points froids, sous l'option des sondes. */
.sondes-nb { padding: 0.9rem 0.95rem; border-radius: 12px; border: 1px dashed rgba(94, 234, 212, 0.35); background: rgba(94, 234, 212, 0.05); }
.sondes-nb > label { display: block; font-size: 0.85rem; font-weight: 600; color: #f1f8f6; margin-bottom: 0.55rem; }
.sondes-nb .palier { margin-top: 0.6rem; }

/* LES TUILES DE RUBRIQUES DE L'ACCUEIL — telles qu'elles sont dans le produit
   depuis le 05/10/2026 : un objet en volume (Fluent Emoji 3D, le jeu du
   logiciel, recopié par icones.mjs), la couleur du module sur le cadre de
   l'objet et sur le nom, et la pastille de ce qu'il reste à y faire. La scène
   doit montrer l'application d'aujourd'hui, pas celle d'avant-hier. */
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 6px; }
/* Les couleurs sont écrites en clair, pas prises au thème du site : la scène est
   l'écran BLANC de l'application, et les variables du site (sombre) y rendaient le
   bord et le fond invisibles. Mêmes valeurs que les tuiles du produit (palette de
   Tailwind 4 : la teinte 700 pour le nom, la teinte 500 à 10 % pour le cadre). */
.mod { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
       gap: 5px; padding: 7px 4px 6px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff;
       box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
/* L'urgence : le bord et la pastille, jamais la couleur de la rubrique ; et plus le
   fond depuis le 05/10/2026, quatre fonds teintés côte à côte faisaient crier l'écran. */
.mod.ton-ambre { border-color: #fe9a00; }
.mod.ton-rouge { border-color: #fb2c36; }
/* Le cadre teinté derrière l'objet, comme dans le produit : sans lui, l'objet flotte
   au milieu d'une tuile vide. 26 px pour 21 px d'image, le rapport du produit (88 pour 72).
   Pas plus : la vitre du portable a la proportion d'un écran (16/10) et coupe ce qui
   dépasse ; à 30 px et 9 px de marge, la rangée du bas était tranchée à 1280 px et les
   chiffres du jour à 820 px (mesuré le 18/10/2026). */
.mod-d { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; }
/* L'ombre portée du produit (0 3px 4px sous 72 px), ramenée à l'échelle de la maquette. */
.mod-d img { width: 21px; height: 21px; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none;
             filter: drop-shadow(0 1px 1.3px rgba(15, 23, 42, 0.18)); }
/* Le nom prend la couleur du module (héritée de .m-…), comme dans le produit. */
.mod-n { font-size: 0.5rem; font-weight: 600; text-align: center; line-height: 1.15; letter-spacing: -0.01em; }
/* La pastille est posée sur le coin du cadre, comme dans le produit. */
.mod-p { position: absolute; top: -6px; right: -10px; min-width: 14px; height: 14px; padding: 0 3px;
         border-radius: 7px; background: #1e293b; color: #fff; font-size: 0.45rem; font-weight: 800;
         font-style: normal; display: flex; align-items: center; justify-content: center;
         box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); }
.ton-ambre .mod-p { background: #fe9a00; }
.ton-rouge .mod-p { background: #e7000b; }
.m-indigo { color: #432dd7; } .m-indigo .mod-d { background: rgba(97, 95, 255, 0.1); }
.m-cyan { color: #007595; } .m-cyan .mod-d { background: rgba(0, 184, 219, 0.1); }
.m-violet { color: #7008e7; } .m-violet .mod-d { background: rgba(142, 81, 255, 0.1); }
.m-teal { color: #00786f; } .m-teal .mod-d { background: rgba(0, 187, 167, 0.1); }
.m-ambre { color: #bb4d00; } .m-ambre .mod-d { background: rgba(254, 154, 0, 0.1); }
.m-emeraude { color: #007a55; } .m-emeraude .mod-d { background: rgba(0, 188, 125, 0.1); }
.m-bleu { color: #0069a8; } .m-bleu .mod-d { background: rgba(0, 166, 244, 0.1); }
.m-ardoise { color: #314158; } .m-ardoise .mod-d { background: rgba(98, 116, 142, 0.1); }
@media (max-width: 720px) { .modules { grid-template-columns: repeat(3, 1fr); } }

/* La seconde rangée de l'accueil : plus petite, parce qu'on y va moins souvent.
   Comme dans le produit, l'objet y est seul, sans cadre teinté, et le nom reste en
   encre neutre. `.mod.mod-s` l'emporte sur `.m-… .mod-d`, écrit plus haut avec le
   même poids : sans ce poids de plus, deux tuiles sur six garderaient leur cadre. */
.modules-s { grid-template-columns: repeat(6, 1fr); margin: 0 0 10px; }
.mod-s { padding: 6px 3px 5px; gap: 3px; border-radius: 9px; }
.mod.mod-s .mod-d { width: 15px; height: 15px; border-radius: 0; background: none; }
.mod.mod-s .mod-d img { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18)); }
.mod.mod-s .mod-n { font-size: 0.4rem; color: #0f172a; }
@media (max-width: 720px) { .modules { grid-template-columns: repeat(4, 1fr); } .modules-s { grid-template-columns: repeat(3, 1fr); } }

/* La borne de cuisine (page produit), reconstruite comme ecran-borne.tsx : le bouton
   Badger en façade, puis une tuile par chose à faire. Le ton colore le cadre, le fond
   et le texte (rouge-500 / ambre-500 à 10 %, texte 700 / 800), jamais l'objet ; le
   carré derrière l'objet est blanc sur une tuile teintée, gris sur une tuile calme.
   Deux colonnes au téléphone, trois au-delà de 820 px ; la première, si elle est
   rouge, en prend deux et se lit en ligne, image à gauche, comme dans le produit. */
.bt-heure { font-family: var(--mono); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: #16201e; }
.bt-badger { display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 0 0 10px; border-radius: 9px;
             background: #0d9488; color: #fff; font-family: var(--titre); font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
             box-shadow: 0 6px 14px -8px rgba(13, 148, 136, 0.55); }
.bornes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 96px;
      padding: 10px 7px; border: 1.5px solid #e2e8f0; border-radius: 14px; background: #fff; color: #16201e; text-align: center; }
.bt-rouge { border-color: #fb2c36; background: rgba(251, 44, 54, 0.1); color: #c10007; }
.bt-ambre { border-color: #fe9a00; background: rgba(254, 154, 0, 0.1); color: #973c00; }
.bt-vedette { grid-column: span 2; }
.bt-d { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #eef2f1; }
.bt-rouge .bt-d, .bt-ambre .bt-d { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.bt-d img { width: 32px; height: 32px; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none;
            filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.18)); }
.bt-p { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
        background: rgba(22, 32, 30, 0.8); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700;
        font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); }
.bt-rouge .bt-p { background: #e7000b; }
.bt-ambre .bt-p { background: #fe9a00; }
.bt-t { display: block; min-width: 0; }
.bt-l { display: block; font-weight: 600; font-size: 10.5px; line-height: 1.2; letter-spacing: -0.01em; }
.bt-s { display: block; font-style: normal; font-size: 8.5px; line-height: 1.3; color: #64748b; margin-top: 2px; overflow-wrap: anywhere; }
@media (min-width: 820px) {
  .bornes { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .bt { min-height: 112px; }
  .bt-vedette { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 12px 20px; text-align: left; }
  .bt-vedette .bt-d { width: 56px; height: 56px; border-radius: 14px; }
  .bt-vedette .bt-d img { width: 40px; height: 40px; }
  .bt-vedette .bt-l { font-size: 14px; }
  .bt-vedette .bt-s { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Refonte du 21/09/2026 : le site en plusieurs pages. Tout ce qui suit
   s'ajoute aux règles d'origine, sans en retirer.
   ═══════════════════════════════════════════════════════════════════ */

/* Au téléphone, 16 px de gouttière : clamp() donnerait 17,55 px à 390 px. */
@media (max-width: 420px) {
  :root { --gouttiere: 16px; }
  /* Deux pixels de gouttière en moins : le socle du portable (28 px de débord) sortait de l'écran. */
  .socle { margin-inline: -24px; }
}

/* ─── Menu : la page courante se voit ──────────────────────────────── */
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 960px) { .nav .nav-connexion { margin-left: 0.4rem; } }
/* Le bouton de devis reste visible au téléphone : c'est l'action du site. */
@media (max-width: 959px) {
  .barre .btn-petit { display: inline-flex; margin-left: auto; }
  .burger { margin-left: 0.5rem; }
}
@media (max-width: 540px) { .barre-in { gap: 0.6rem; } .barre .btn-petit { padding-inline: 0.95em; } }

/* ─── En-tête de page, sur le fond de l'ouverture ──────────────────── */
.entete-page {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--nuit); color: var(--sur-nuit);
  padding-inline: var(--gouttiere); padding-bottom: clamp(40px, 6vw, 72px);
}
.entete-page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.3;
  background-image: linear-gradient(var(--nuit-trait) 1px, transparent 1px), linear-gradient(90deg, var(--nuit-trait) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 10%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 10%, #000 20%, transparent 75%);
}
.entete-page h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); color: #f3faf8; max-width: 22ch; margin-bottom: 0.45em; }
.entete-page .mene { color: var(--sur-nuit-2); max-width: 62ch; margin-bottom: 0; }
.entete-page .actions { margin-top: 1.8rem; }
.entete-erreur { min-height: 64vh; display: grid; align-content: center; }
.b-nuit .entete-section h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); color: #f3faf8; margin-bottom: 0.5em; }
/* La barre translucide se pose sur du sombre, comme à l'accueil. */
main > .entete-page:first-child, main > .b-nuit:first-child {
  margin-top: calc(var(--barre-h) * -1);
  padding-top: calc(var(--barre-h) + clamp(40px, 6vw, 88px));
}

/* ─── Liens de suite ───────────────────────────────────────────────── */
a.oblig { color: inherit; text-decoration: none; }
a.oblig:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -4px; border-radius: 0; }
.lien-suite {
  display: inline-flex; align-items: center; gap: 0.45em; margin-top: 1.4rem; padding-bottom: 2px;
  font-weight: 600; font-size: 0.98rem; color: var(--accent-texte); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: border-color 0.2s;
}
.lien-suite:hover { border-bottom-color: currentColor; }
.b-nuit .lien-suite { color: var(--menthe); }
.actions-suite { align-items: center; gap: 12px 22px; }
.actions .lien-suite { margin-top: 0; }

/* ─── Les formules, en bref (accueil) ──────────────────────────────── */
.formules-bref { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .formules-bref { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .formules-bref { grid-template-columns: repeat(4, 1fr); } }
.formule-bref {
  display: grid; gap: 0.35rem; align-content: start; padding: 1.4rem 1.4rem 1.3rem; border-radius: 18px;
  border: 1px solid var(--trait); background: var(--surface); color: inherit; text-decoration: none;
  transition: transform 0.25s var(--courbe), border-color 0.2s;
}
.formule-bref:hover { transform: translateY(-3px); border-color: var(--trait-fort); }
.formule-bref.vedette-bref { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.fb-nom { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; font-variation-settings: "wdth" 92; }
.fb-montant { font-family: var(--titre); font-size: clamp(2rem, 1.7rem + 1vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 88; }
.fb-mention { font-size: 0.86rem; color: var(--gris); line-height: 1.4; }

/* ─── Mise en service et données (accueil) ─────────────────────────── */
.cartes-liens { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cartes-liens { grid-template-columns: repeat(2, 1fr); } }
.carte-lien {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--trait); border-radius: 20px; background: var(--surface); color: inherit; text-decoration: none;
  transition: transform 0.25s var(--courbe), border-color 0.2s;
}
.carte-lien:hover { transform: translateY(-3px); border-color: var(--trait-fort); }
.carte-lien:hover .lien-suite { border-bottom-color: currentColor; }
.carte-lien .sur { margin-bottom: 0.2rem; }
.carte-lien h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); }
.carte-lien p { margin: 0 0 0.6rem; color: var(--encre-2); max-width: 34rem; }
.carte-lien .lien-suite { margin-top: auto; }

/* ─── Le bandeau final ─────────────────────────────────────────────── */
/* Le bandeau et le pied de page sont tous deux sombres : un filet les sépare. */
.appel-final { text-align: center; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--nuit-trait); }
.appel-final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 80% at 50% 0%, rgba(45, 212, 191, 0.16), transparent 70%); }
.appel-final .dedans { max-width: 46rem; }
.appel-final h2 { color: #f3faf8; margin-bottom: 0.5em; }
.appel-final .mene { margin-inline: auto; }
.appel-final .btn { margin-top: 1.2rem; }

/* ─── Tarifs : le bouton en bas de chaque carte ────────────────────── */
.formules .formule { grid-template-rows: auto auto auto 1fr auto; align-content: stretch; }
.formules .formule ul { align-self: start; }
.formule-action { margin-top: 1.2rem; }
/* À 390 px, les trois libellés ne tiennent pas sur une ligne : trois cases égales, plutôt qu'un bouton renvoyé à la ligne. */
@media (max-width: 480px) {
  .bascule { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 16px; }
  .bascule button { border-radius: 12px; font-size: 0.85rem; line-height: 1.25; padding: 0.55em 0.5em; }
}

/* ─── Le marché, sur /tarifs ───────────────────────────────────────── */
/* L'en-tête « Équivalent du marché… » héritait de .m (0,82 rem, sans retour à la
   ligne) : le tableau débordait son cadre et rognait la colonne des montants. */
.cadre-table th.m { white-space: normal; font-size: 0.66rem; }
/* En demi-largeur sous 1200 px, la piste du graphe est trop courte pour ses
   graduations (« 2 000 € » et « 3 000 € » se chevauchaient) : on empile. */
@media (min-width: 1000px) { .marche-grille { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) { .marche-grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
@media (min-width: 621px) { .graphe { --c-nom: 10rem; } }
/* Au téléphone : le tableau tient dans son cadre, et la piste du graphe prend toute
   la largeur (le montant monte à côté du nom) pour que les graduations se lisent. */
@media (max-width: 620px) {
  .cadre-table table { min-width: 0; }
  .barre-ligne { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .barre-nom { grid-column: 1; grid-row: 1; }
  .barre-val { grid-column: 2; grid-row: 1; }
  .barre-piste { grid-column: 1 / -1; grid-row: 2; }
  .axe { grid-template-columns: minmax(0, 1fr); }
  .axe > span:last-child { display: none; }
}

/* ─── Questions, par groupe ────────────────────────────────────────── */
.faq-colonne { max-width: 820px; }
.faq-groupe + .faq-groupe { margin-top: clamp(40px, 6vw, 72px); }
.faq-groupe h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 0.9rem; }
.faq-colonne .fine { margin-top: 2rem; font-size: 0.95rem; }

/* ─── Mentions légales ─────────────────────────────────────────────── */
/* Aligné sur le titre de l'en-tête : la colonne garde la largeur du site, seul le texte se resserre. */
.texte-legal > * { max-width: 46rem; }
.texte-legal h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 0.9rem; }
.texte-legal p { color: var(--encre-2); }
.texte-legal a { color: var(--accent-texte); }
/* .arempli est pensé pour le fond sombre du pied de page. */
.bande .arempli { color: var(--accent-texte); background: var(--teinte); border-bottom-color: var(--accent); }

/* ─── Pied de page : cinq colonnes ─────────────────────────────────── */
@media (min-width: 620px) { .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied-marque { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .pied-haut { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); gap: 2rem 1.6rem; } .pied-marque { grid-column: auto; } }
.pied-marque p { max-width: 24rem; }
.pied .pied-bas { border-top: 1px solid var(--nuit-trait); padding-top: 1.6rem; margin: 0; max-width: none; font-size: 0.8rem; color: #8fb3ac; }

/* ─── L'assistant « Une question ? » ─────────────────────────────────────── */
/* Un bouton flottant ; la fenêtre remplace le bouton quand elle s'ouvre. Hors du
   <main> : rien à voir avec la hauteur des pages. Tout en variables du thème,
   le mode sombre suit. */
.assistant { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-family: var(--texte); }
.assistant-bouton { min-height: 44px; padding: 0.7em 1.1em; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 0.92rem; box-shadow: var(--ombre); cursor: pointer; }
.assistant-bouton:hover { background: var(--accent-fonce); }
.assistant-panneau { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 32px)); display: flex; flex-direction: column; background: var(--surface); color: var(--encre); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; }
.assistant-tete { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem 1rem 0.7rem; border-bottom: 1px solid var(--trait); }
.assistant-titre { margin: 0; font-family: var(--titre); font-weight: 700; font-size: 1rem; }
.assistant-mention { margin: 0.25rem 0 0; font-size: 0.74rem; line-height: 1.35; color: var(--gris); }
.assistant-fermer { margin-left: auto; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--trait); border-radius: 50%; background: transparent; color: var(--encre); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.assistant-fermer:hover { background: var(--teinte); }
.assistant-fil { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.assistant-fil:empty { display: none; }
.assistant-msg { max-width: 92%; padding: 0.6rem 0.8rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-msg.visiteur { align-self: flex-end; background: var(--accent); color: #fff; }
.assistant-msg.assistant { align-self: flex-start; background: var(--teinte); color: var(--encre); }
.assistant-msg a { color: inherit; text-decoration: underline; }
.assistant-boutons { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1rem 0; }
.assistant-boutons:empty { display: none; }
.assistant-boutons button { border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); color: var(--accent-texte); font: inherit; font-size: 0.8rem; padding: 0.4em 0.8em; cursor: pointer; text-align: left; }
.assistant-boutons button:hover { background: var(--teinte); }
.assistant-saisie { display: flex; gap: 0.5rem; padding: 0.7rem 1rem 0.9rem; }
.assistant-saisie input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0.5em 0.8em; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--surface); color: var(--encre); font: inherit; font-size: 0.9rem; }
.assistant-contact { display: grid; gap: 0.35rem; padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--trait); font-size: 0.86rem; }
.assistant-contact label { color: var(--encre-2); }
.assistant-contact input, .assistant-contact textarea { padding: 0.45em 0.7em; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--surface); color: var(--encre); font: inherit; font-size: 0.9rem; }
.assistant-contact-titre { margin: 0 0 0.3rem; font-weight: 600; }
.assistant-consent { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.78rem; color: var(--gris); }
.assistant-consent input { margin-top: 0.2em; }
.assistant-retour { margin: 0.3rem 0 0; font-size: 0.84rem; color: var(--accent-texte); }
.assistant-retour.erreur { color: var(--critique); }
@media (max-width: 540px) { .assistant-panneau { right: 8px; bottom: 8px; left: 8px; width: auto; max-height: calc(100vh - 16px); } }
@media (prefers-reduced-motion: no-preference) {
  .assistant-panneau { animation: assistant-apparait 0.22s var(--courbe); }
  @keyframes assistant-apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ─── Devis en trois questions (24/10/2026) ────────────────────────── */
/* Le numéro de la question : on sait où l'on en est, et qu'il n'y en a que trois. */
.etape-n { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; margin-right: 0.6em; border-radius: 50%; border: 1px solid var(--menthe); color: var(--menthe); font-size: 0.95em; letter-spacing: 0; vertical-align: middle; }
/* Les options : repliées, sous les trois questions ; le titre dit combien sont choisies. */
.options { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 0 1rem; margin: 0 0 0.4rem; background: rgba(255, 255, 255, 0.025); }
.options summary { font-family: var(--texte); font-weight: 600; font-size: 0.95rem; color: #f1f8f6; padding: 0.95rem 2rem 0.95rem 0; letter-spacing: 0; font-variation-settings: normal; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline; }
.options summary::after { border-color: var(--menthe); }
.options-compte { font-family: var(--mono); font-weight: 400; font-size: 0.72rem; color: var(--sur-nuit-2); }
.options[open] { padding-bottom: 1rem; }
/* Les deux chiffres du ticket : par mois, puis une fois. */
.ticket-chiffre { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0.1rem 0 0.55rem; }
.ticket-chiffre strong { font-family: var(--titre); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variation-settings: "wdth" 86; color: #0b4f48; overflow-wrap: anywhere; }
.ticket-chiffre span { font-size: 0.86rem; color: #3a4a47; }
.ticket-chiffre-second strong { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem); color: #12201e; }
/* « facultatif », à côté du libellé d'un champ qu'on peut laisser vide. */
.facultatif { font-weight: 400; font-size: 0.8rem; color: var(--gris); margin-left: 0.35em; }
/* La barre du prix, sur téléphone et tablette : le ticket est sous les questions. */
.barre-prix { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom)); background: #fbfbf7; color: #12201e; border-top: 1px solid #a9b5b2; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.5); }
.barre-prix[hidden] { display: none; }
.barre-prix p { margin: 0; min-width: 0; line-height: 1.25; }
.barre-prix strong { font-family: var(--titre); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; color: #0b4f48; }
.barre-prix p > span { font-size: 0.82rem; color: #3a4a47; }
.barre-prix .bp-sous { display: block; font-size: 0.76rem; }
.barre-prix .btn { flex: none; background: #0b6b62; color: #fff; }
.barre-prix .btn:hover { background: #084f48; color: #fff; }
@media (min-width: 1000px) { .barre-prix { display: none !important; } }
/* Le défilement (clavier, ancres) garde libre la hauteur de la barre : un champ focalisé ne finit jamais dessous. */
html:has(body.avec-barre-prix) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* Le bouton « Une question ? » occupe le même coin : il monte au-dessus de la barre. */
body.avec-barre-prix .assistant { bottom: 88px; }