/* =========================================================
   Flex — site vitrine « motion »
   Couleurs et polices : charte Flex (05 Marque/Charte.md)
   ========================================================= */

:root {
  --fond: #0F0E1A;
  --fond-2: #131226;
  --encre: #17152B;
  --carte: #17152B;
  --carte-2: #1E1B38;
  --lavande: #A894FF;
  --lavande-vive: #5B3FCF;
  --lavande-douce: #262145;
  --vert: #4CC594;
  --texte: #ECEAF6;
  --texte-2: #A09CBC;
  --texte-3: #8A86A8;
  --trait: rgba(168, 148, 255, .13);
  --trait-2: rgba(168, 148, 255, .24);
  --f-titre: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texte: "Literata", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-appli: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --conteneur: 1240px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --entete: 72px;
  color-scheme: dark;
}

/* Couleurs des agents (avatars, repères) et visage 3D (image fixe rendue depuis personnages.js) */
.av-bruno  { --c: #A894FF; --visage: url(assets/agents/bruno-mini.webp); }
.av-cindy  { --c: #F59E62; --visage: url(assets/agents/cindy-mini.webp); }
.av-sophie { --c: #C38BFF; --visage: url(assets/agents/sophie-mini.webp); }
.av-marc   { --c: #7CC97A; --visage: url(assets/agents/marc-mini.webp); }
.av-julie  { --c: #5AA9F0; --visage: url(assets/agents/julie-mini.webp); }
.av-ines   { --c: #F07489; --visage: url(assets/agents/ines-mini.webp); }
.av-herve  { --c: #7C8CF8; --visage: url(assets/agents/herve-mini.webp); }
.av-vous   { --c: #ECEAF6; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete) + 16px);
  background: var(--fond);
}
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.menu-ouvert { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(168, 148, 255, .35); color: #fff; }

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--texte);
}
h2 {
  font-size: clamp(2.3rem, 1.45rem + 3.7vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h3 { font-size: 1.3rem; line-height: 1.15; letter-spacing: -.02em; }

.ic { width: 1.25em; height: 1.25em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--lavande); outline-offset: 3px; border-radius: 10px; }
[tabindex="-1"]:focus { outline: none; }

.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Lenis (défilement doux) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Intro du héros : masquée avant l'animation, jamais plus de 3 s (filet de sécurité si le JS échoue) */
.motion:not(.intro-go) [data-intro] { opacity: 0; animation: intro-secours .01s linear 3s forwards; }
@keyframes intro-secours { to { opacity: 1; } }

/* Mots découpés pour l'apparition mot à mot */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .03em .16em; margin: -.1em -.03em -.16em; }
.mot-in { display: inline-block; }
.mot-defile { transition: none; }

/* ---------- Éléments communs ---------- */
.evitement {
  position: fixed; left: 16px; top: -90px; z-index: 100;
  padding: 12px 18px; border-radius: 12px;
  background: var(--lavande); color: var(--encre);
  font: 600 1rem/1 var(--f-titre); text-decoration: none;
  transition: top .25s var(--ease);
}
.evitement:focus { top: 16px; }

.progression { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progression span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #5B3FCF, #A894FF 60%, #4CC594);
}

.lueur-souris { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s; }
.lueur-souris span {
  position: absolute; left: 0; top: 0;
  width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 99, 255, .17), rgba(124, 99, 255, .05) 55%, transparent);
  will-change: transform;
}
.lueur-souris.is-visible { opacity: 1; }
main, .pied { position: relative; z-index: 1; }

.pastille {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--trait-2); border-radius: 999px;
  background: rgba(38, 33, 69, .5);
  font: 500 .75rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--lavande);
}
.pastille-point, .point-vert {
  display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--vert); box-shadow: 0 0 0 0 rgba(76, 197, 148, .55);
  animation: pouls 2.4s ease-out infinite;
}
@keyframes pouls {
  0% { box-shadow: 0 0 0 0 rgba(76, 197, 148, .55); }
  70% { box-shadow: 0 0 0 7px rgba(76, 197, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 197, 148, 0); }
}

.etiquette-exemple {
  display: inline-flex; align-items: center;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--trait-2);
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-2); white-space: nowrap;
}

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c, var(--lavande)); color: var(--encre);
  font: 800 .74rem/1 var(--f-titre); letter-spacing: -.02em;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .14), inset 0 2px 3px rgba(255, 255, 255, .35);
}
.avatar--l { width: 40px; height: 40px; font-size: 1rem; }
/* le visage recouvre la lettre (si l'image manque, la lettre reste visible) */
.avatar { position: relative; overflow: hidden; }
.avatar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--visage, none) 50% 42% / 112% auto no-repeat;
}
.avatar[class*="av-"]:not(.av-vous) { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 58%, color-mix(in srgb, var(--c) 70%, #17152B) 100%); }

/* ---------- Boutons ---------- */
.btn {
  --h: 48px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--h); padding: 0 1.35em;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 1rem/1 var(--f-titre); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.btn--primaire {
  color: var(--encre);
  background: linear-gradient(180deg, #C2B6FF 0%, #A894FF 52%, #937AFF 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 32px -12px rgba(168, 148, 255, .8);
}
.btn--primaire:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .18), 0 18px 44px -12px rgba(168, 148, 255, .95); }
.btn--fantome { color: var(--texte); background: rgba(255, 255, 255, .03); border-color: var(--trait-2); }
.btn--fantome:hover { background: rgba(168, 148, 255, .1); border-color: rgba(168, 148, 255, .45); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--grand { --h: 56px; font-size: 1.0625rem; padding: 0 1.6em; }
.btn--petit { --h: 44px; font-size: .95rem; padding: 0 1.1em; }
.btn--plein { width: 100%; }
.btn-fleche { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.btn:hover .btn-fleche { transform: translateX(3px); }
.btn:focus-visible { border-radius: 999px; outline-offset: 4px; }
.btn.is-inactif { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, backdrop-filter .4s;
}
.entete.is-defile, body.menu-ouvert .entete {
  background: rgba(15, 14, 26, .93);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  backdrop-filter: saturate(1.4) blur(20px);
  border-bottom-color: var(--trait);
}
.entete-in { display: flex; align-items: center; gap: 12px; height: var(--entete); }
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none;
  font: 800 1.55rem/1 var(--f-titre); letter-spacing: -.045em;
}
.logo-f { width: 30px; height: 30px; }
.nav { margin-inline: auto; }
.nav-liens { display: none; list-style: none; }
.entete-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.entete-connexion { display: none; }
.menu-bouton {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--trait-2); background: rgba(255, 255, 255, .03);
  cursor: pointer;
}
.menu-bouton .ic { width: 22px; height: 22px; }

html:not(.js) .menu-bouton { display: none; }
html:not(.js) .entete-in { flex-wrap: wrap; height: auto; padding-block: 12px; }
html:not(.js) .nav { order: 3; width: 100%; }
html:not(.js) .nav-liens { display: flex; gap: 4px; overflow-x: auto; }
html:not(.js) .nav-liens a { padding: 8px 10px; white-space: nowrap; color: var(--texte-2); }
html:not(.js) .entete { position: absolute; background: rgba(15, 14, 26, .9); border-bottom-color: var(--trait); }
html:not(.js) .heros { padding-top: calc(var(--entete) + 84px); }
html:not(.js) .indice { display: none; }

.menu-mobile {
  position: fixed; inset: 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--entete) + 20px) var(--gouttiere) max(28px, env(safe-area-inset-bottom));
  background: radial-gradient(90% 60% at 100% 0%, rgba(91, 63, 207, .28), transparent 70%), var(--fond);
  overflow-y: auto;
}
.menu-mobile ul { list-style: none; }
.menu-mobile li a {
  display: block; padding: 14px 0;
  border-bottom: 1px solid var(--trait);
  font: 800 2rem/1.1 var(--f-titre); letter-spacing: -.035em;
  color: var(--texte); text-decoration: none;
}
.menu-mobile-actions { display: grid; gap: 12px; }
.menu-mobile-note { margin: -4px 0 4px; text-align: center; font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .04em; color: var(--texte-2); }

@media (min-width: 720px) {
  .entete-connexion { display: inline-flex; }
}
@media (min-width: 1080px) {
  .nav-liens { display: flex; gap: 2px; }
  .nav-liens a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border-radius: 999px; color: var(--texte-2); text-decoration: none;
    font: 500 .95rem/1 var(--f-titre); letter-spacing: -.005em;
    transition: color .25s, background-color .25s;
  }
  .nav-liens a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
  .menu-bouton { display: none; }
}

/* ---------- Héros ---------- */
.heros { position: relative; padding: calc(var(--entete) + 40px) 0 64px; overflow-x: clip; }
.heros-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.heros-points {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(168, 148, 255, .2) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 62% 38%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 60% at 62% 38%, #000 10%, transparent 72%);
  opacity: .7;
}
.heros-halo { position: absolute; border-radius: 50%; }
.heros-halo--a {
  width: 900px; height: 900px; right: -260px; top: -180px;
  background: radial-gradient(closest-side, rgba(91, 63, 207, .55), rgba(91, 63, 207, .12) 55%, transparent);
}
.heros-halo--b {
  width: 700px; height: 700px; left: -320px; top: 360px;
  background: radial-gradient(closest-side, rgba(76, 197, 148, .12), transparent);
}
.motion .heros-halo--a { animation: derive 16s ease-in-out infinite alternate; }
.motion .heros-halo--b { animation: derive 20s ease-in-out infinite alternate-reverse; }
@keyframes derive { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-60px, 40px, 0) scale(1.08); } }

.heros-grille { position: relative; z-index: 1; display: grid; gap: 48px; }
.heros-texte { display: flex; flex-direction: column; align-items: flex-start; }
.heros-titre {
  margin: 22px 0 22px;
  font-size: clamp(3.3rem, min(1.6rem + 6.2vw, 12.5vh), 6.6rem);
  line-height: .9; letter-spacing: -.035em;
}
.heros-titre .accent { color: var(--lavande); }
.heros-titre .accent .mot-in {
  background: linear-gradient(110deg, #A894FF 0%, #A894FF 42%, #EDE8FF 50%, #A894FF 58%, #A894FF 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion .heros-titre .accent .mot-in { animation: reflet 7s ease-in-out 2.4s infinite; }
.motion .heros-titre .accent .mot:nth-child(2) .mot-in { animation-delay: 2.65s; }
@keyframes reflet { 0% { background-position: 100% 0; } 30%, 100% { background-position: -60% 0; } }

.heros-accroche { font-size: clamp(1.08rem, 1rem + .45vw, 1.28rem); line-height: 1.55; color: var(--texte-2); max-width: 35ch; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; width: 100%; }
.heros-actions .btn { flex: 1 1 210px; }
.heros-essai { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font: 500 .8rem/1.45 var(--f-mono); letter-spacing: .02em; color: var(--texte-2); }
.heros-essai .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--vert); }
.heros-chiffres {
  list-style: none; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--trait);
}
.heros-chiffres li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.heros-chiffres b { font: 500 1.4rem/1 var(--f-mono); letter-spacing: -.03em; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.heros-chiffres li > span { font-size: .86rem; line-height: 1.35; color: var(--texte-2); }

.heros-visuel { position: relative; display: grid; gap: 16px; }
.scene-bruno {
  position: relative; isolation: isolate;
  height: clamp(390px, 100vw, 520px);
  border-radius: 30px; overflow: hidden;
  /* tour 3 : Bruno est placé PAR RAPPORT À LA CARTE (unités de conteneur cqw / cqh), centré, la tête vers 40-50 %
     de la hauteur ; la bulle part de sa tête. --s : côté du carré de l'image (et de la 3D, même cadrage) ;
     --cx : centre horizontal ; --cy : hauteur du centre de la tête ; --bx / --by : départ de la bulle (en côtés de carré) */
  container-type: size;
  --s: 68cqw; --cx: 50cqw; --cy: 53cqh; --bx: .13; --by: .06;
  border: 1px solid var(--trait-2);
  background: radial-gradient(110% 80% at 50% 28%, #2C2456 0%, #1C1838 46%, #131129 100%);
  box-shadow: 0 50px 120px -50px rgba(91, 63, 207, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.scene-bruno::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 45% at 50% 42%, rgba(168, 148, 255, .3), transparent 72%);
}
.scene-bruno::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
  mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.scene-sol {
  position: absolute; left: 50%; bottom: -16%; width: 130%; height: 42%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 148, 255, .26), transparent);
}
.perso-hote { position: absolute; inset: 0; }
/* téléphone : Bruno moins serré (buste entier, visage plus petit), la bulle ne touche plus le visage */
.scene-bruno .perso-hote { inset: 25% 13% 0; }
@media (min-width: 560px) { .scene-bruno .perso-hote { inset: 15% 3% 0; } }
@supports (width: 1cqw) {
  /* le centre de la tête est à 34,5 % du haut du carré (cadrage « hero » de personnages.js) */
  .scene-bruno .perso-hote { inset: auto; width: var(--s); height: var(--s); left: calc(var(--cx) - var(--s) / 2); top: calc(var(--cy) - .345 * var(--s)); }
}
/* repli si le module 3D ne se charge pas (le module apporte lui-même son style .fx-perso) */
.perso-fixe { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.perso-fixe > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; }
.perso-fixe--mini > img { object-fit: cover; object-position: 50% 18%; }

.bulle-bruno {
  position: absolute; top: 6%; right: 5%; z-index: 3;
  max-width: min(250px, 64%);
  padding: 12px 16px; border-radius: 18px 18px 18px 6px;
  background: rgba(240, 238, 250, .97); color: var(--encre);
  font: 600 .95rem/1.35 var(--f-titre); letter-spacing: -.01em;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  transform-origin: 0% 100%;
}
/* petite pointe vers la bouche de Bruno */
.bulle-bruno::after {
  content: ""; position: absolute; left: 3px; bottom: -9px; width: 16px; height: 13px;
  background: inherit; clip-path: polygon(0 100%, 12% 0, 100% 0);
}
@media (min-width: 720px) {
  @supports (width: 1cqw) {
    /* la bulle part juste au-dessus de sa tempe droite (côté opposé au journal) et grandit vers le haut */
    .bulle-bruno { top: auto; right: auto; left: calc(var(--cx) + var(--bx) * var(--s)); bottom: calc(100cqh - var(--cy) + var(--by) * var(--s)); max-width: min(250px, calc(100cqw - var(--cx) - var(--bx) * var(--s) - 16px)); }
  }
}
.scene-etiquette {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(15, 14, 26, .74);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--trait-2);
  font-size: .92rem;
}
.scene-etiquette b { font: 700 1rem/1 var(--f-titre); }
.scene-etiquette span:last-child { font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lavande); }

/* Journal des agents */
.journal {
  position: relative; z-index: 4;
  padding: 16px 16px 12px; border-radius: 22px;
  background: rgba(22, 20, 42, .84);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--trait-2);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.journal-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.journal-titre { display: flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--f-titre); letter-spacing: -.01em; }
.journal-titre .ic { color: var(--lavande); width: 18px; height: 18px; }
.journal-liste { list-style: none; padding: 4px 0; }
.journal-liste li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px dashed rgba(168, 148, 255, .09);
}
.journal-liste li:last-child { border-bottom: 0; }
.j-heure { font: 500 .74rem/1 var(--f-mono); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.journal-liste .avatar { width: 24px; height: 24px; font-size: .7rem; }
/* lignes jamais coupées par « … » : un texte trop long passe à la ligne (place réservée pendant la frappe) */
.j-texte { min-width: 0; font-size: .86rem; line-height: 1.35; color: var(--texte-2); overflow-wrap: break-word; }
.j-texte b { font: 700 .9rem/1 var(--f-titre); color: var(--texte); margin-right: 2px; }
.tape-reste { color: transparent; }
.journal-liste li { transition: opacity .35s; }
.journal-liste li.is-attente { opacity: .55; }
.journal-liste li.is-attente .j-heure { color: transparent; background: rgba(168, 148, 255, .1); border-radius: 4px; }
.journal-liste li.is-attente .j-texte { background: linear-gradient(90deg, rgba(168, 148, 255, .13), rgba(168, 148, 255, .04) 80%); border-radius: 6px; }
.journal-liste li.is-attente .j-texte b { color: transparent; }
.journal-liste li.is-attente .avatar { filter: grayscale(1); opacity: .35; }
.j-tag {
  justify-self: end; padding: 5px 8px; border-radius: 999px;
  font: 500 .64rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.j-tag--fait { color: var(--vert); background: rgba(76, 197, 148, .13); }
.j-tag--valider { color: var(--lavande); background: rgba(168, 148, 255, .15); }
.j-tag--transmis { color: #8CCBFF; background: rgba(90, 169, 240, .15); }
.j-tag--cours { color: var(--texte-2); background: rgba(255, 255, 255, .07); }
.j-tag--attente { color: var(--texte-3); background: rgba(255, 255, 255, .05); letter-spacing: .2em; }
/* téléphone : le prénom sur sa ligne, l'action dessous, en entier (avant : « Devis D-2026-0… ») */
@media (max-width: 719px) {
  .journal-liste li { align-items: start; row-gap: 4px; }
  .journal-liste .j-heure { padding-top: 6px; }
  .journal-liste .j-texte b { display: block; margin: 1px 0 4px; }
  .journal-liste .j-tag { align-self: center; }
}
.journal-pied {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--trait);
  font: 500 .72rem/1 var(--f-mono); color: var(--texte-2);
}
.journal-pied > span { display: inline-flex; align-items: center; gap: 8px; }
.j-compte { display: inline-block; min-width: 1ch; color: var(--lavande); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (min-width: 720px) {
  .heros-actions { width: auto; }
  .heros-actions .btn { flex: 0 0 auto; }
  .heros-chiffres { grid-template-columns: repeat(3, auto); justify-content: start; gap: 36px; }
  .heros-chiffres b { font-size: 1.65rem; }
  /* libellés sur deux lignes au plus : le troisième chiffre reste visible à côté du journal */
  .heros-chiffres li > span { max-width: 10em; text-wrap: balance; }
  .scene-bruno { height: 540px; --s: min(66cqh, 62cqw); --cy: 43cqh; --bx: .14; }
}
@media (min-width: 1024px) {
  .heros { padding: calc(var(--entete) + 24px) 0 40px; }
  .heros-grille {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center; gap: 32px;
    min-height: calc(100svh - var(--entete) - 64px);
  }
  .heros-visuel { display: flex; flex-direction: column; padding: 8px 0 24px; }
  .scene-bruno { height: clamp(360px, 52vh, 480px); margin-left: 6%; --s: min(80cqh, 66cqw); --cy: 41cqh; }
  @supports not (width: 1cqw) { .scene-bruno .perso-hote { inset: 9% 0 0 10%; } }
  .scene-etiquette { left: auto; right: 16px; }
  .journal { width: 88%; margin: -84px 0 0 -4%; }
}
@media (min-width: 1360px) {
  .heros-visuel { display: block; padding: 8px 0 56px; }
  /* tour 3 : carte moins haute, Bruno centré (tête vers 41 %) ; le journal glisse vers la gauche pour ne plus
     toucher son visage */
  .scene-bruno { height: min(560px, calc(100svh - 210px)); min-height: 480px; margin-left: 16%; --s: 72cqw; --cy: 41cqh; --bx: .13; }
  @supports not (width: 1cqw) { .scene-bruno .perso-hote { inset: 9% 0 0 22%; } }
  .journal { position: absolute; left: -34%; bottom: 0; width: 404px; margin: 0; }
}

/* ---------- Bandeau défilant ---------- */
.bandeau {
  position: relative; z-index: 1; overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid var(--trait);
  background: rgba(23, 21, 43, .55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bandeau-piste { display: flex; width: max-content; animation: defile 42s linear infinite; }
.bandeau-liste { display: flex; gap: 48px; padding-right: 48px; list-style: none; }
.bandeau-liste li {
  display: flex; align-items: center; gap: 11px; white-space: nowrap;
  font: 600 1.05rem/1 var(--f-titre); letter-spacing: -.01em; color: var(--texte-2);
}
.bandeau-liste .avatar { width: 24px; height: 24px; font-size: .7rem; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(72px, 8.5vw, 124px) 0; overflow-x: clip; }
.section-tete { display: grid; gap: 18px; justify-items: start; max-width: 780px; margin-bottom: clamp(36px, 5.5vw, 68px); }
.section-tete--duo { max-width: none; }
.section-tete--centre { margin-inline: auto; justify-items: center; text-align: center; }
.section-tete--centre .section-accroche { margin-inline: auto; }
.section-accroche { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; color: var(--texte-2); max-width: 40ch; }
.section-accroche a { color: var(--lavande); }
.indice { margin-top: 14px; font: 500 .74rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lavande); }
.indice-doigt { display: none; }
@media (hover: none), (pointer: coarse), (max-width: 719px) { .indice-souris { display: none; } .indice-doigt { display: inline; } }
@media (min-width: 1024px) {
  .section-tete--duo { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 56px; }
}

/* Carte « vive » : reflet qui suit la souris + inclinaison 3D (JS) */
.carte-vive {
  position: relative; isolation: isolate;
  border-radius: 24px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, #1B1835 0%, #141229 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .35s;
  will-change: transform;
}
.carte-vive::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(168, 148, 255, .17), transparent 46%);
  opacity: 0; transition: opacity .45s;
}
.carte-vive:hover { border-color: var(--trait-2); }
.carte-vive:hover::before { opacity: 1; }

/* ---------- L'équipe ---------- */
.equipe-bande {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 12px;
  margin-inline: calc(var(--gouttiere) * -1);
  padding: 10px var(--gouttiere) 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.equipe-bande::-webkit-scrollbar { display: none; }
.agent {
  position: relative; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 12px 16px; text-align: center;
  border-radius: 22px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, #1C1937 0%, #151329 100%);
  cursor: pointer;
  transition: border-color .3s, background-color .3s, box-shadow .45s var(--ease), transform .45s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.agent:hover { border-color: var(--trait-2); transform: translateY(-4px); }
.agent[aria-selected="true"] {
  border-color: rgba(168, 148, 255, .62);
  background: linear-gradient(180deg, #282151 0%, #18152F 100%);
  box-shadow: 0 24px 60px -26px rgba(124, 99, 255, .75), inset 0 0 0 1px rgba(168, 148, 255, .22);
}
.agent:focus-visible { border-radius: 22px; }
.agent-haut { display: flex; justify-content: space-between; align-items: center; width: 100%; font: 500 .66rem/1 var(--f-mono); color: var(--texte-3); }
.agent-statut { display: inline-flex; align-items: center; gap: 10px; color: var(--vert); letter-spacing: .02em; }
.agent-statut .point-vert { width: 6px; height: 6px; animation-name: pouls-petit; }
@keyframes pouls-petit {
  0% { box-shadow: 0 0 0 0 rgba(76, 197, 148, .55); }
  70% { box-shadow: 0 0 0 4px rgba(76, 197, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 197, 148, 0); }
}
.agent-scene {
  position: relative; display: block; width: 100%; height: 160px; margin: 8px 0 10px;
  border-radius: 16px;
  background: radial-gradient(70% 62% at 50% 58%, rgba(168, 148, 255, .2), transparent 72%);
}
.agent-repli {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: var(--encre);
  font: 800 1.6rem/1 var(--f-titre);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .16), inset 0 3px 6px rgba(255, 255, 255, .35), 0 16px 30px -14px rgba(0, 0, 0, .7);
  transition: opacity .5s;
}
.agent-scene.is-monte .agent-repli { opacity: 0; }
html:not(.js) .perso-hote:has(img) + .agent-repli { opacity: 0; }
.agent-bulle {
  position: absolute; top: 5px; left: 50%; z-index: 3;
  padding: 7px 11px; border-radius: 12px 12px 12px 4px;
  background: #F0EEFA; color: var(--encre);
  font: 600 .78rem/1.2 var(--f-titre); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 6px) scale(.9); transform-origin: 30% 100%; pointer-events: none;
  transition: opacity .25s, transform .4s var(--ease);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8);
}
.agent:hover .agent-bulle, .agent.is-parle .agent-bulle { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Le CLIC (ou le toucher) change l'exemple, pas le survol : « Cliquez pour voir » au survol,
   « Exemple ci-dessous » sur l'agent dont l'exemple est affiché */
.agent-voir {
  position: absolute; left: 50%; bottom: -6px; z-index: 3;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  border: 1px solid var(--trait-2); background: rgba(15, 14, 26, .88); color: var(--texte);
  font: 500 .6rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translate(-50%, 5px); transition: opacity .25s, transform .35s var(--ease);
}
.agent-voir-b { display: none; }
.agent[aria-selected="true"] .agent-voir { opacity: 1; transform: translate(-50%, 0); border-color: var(--lavande); background: var(--lavande); color: var(--encre); }
.agent[aria-selected="true"] .agent-voir-a { display: none; }
.agent[aria-selected="true"] .agent-voir-b { display: inline; }
@media (hover: hover) and (pointer: fine) {
  .agent:hover .agent-voir, .agent:focus-visible .agent-voir { opacity: 1; transform: translate(-50%, 0); }
}
html:not(.js) .agent-voir { display: none; }
@media (max-width: 719px) { .agent-voir { padding: 5px 8px; font-size: .56rem; letter-spacing: .06em; } }
.agent-nom { font: 800 1.25rem/1.1 var(--f-titre); letter-spacing: -.025em; }
.agent-role { font: 500 .68rem/1.25 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lavande); }
.agent-desc { margin-top: 8px; font-size: .8rem; line-height: 1.4; color: var(--texte-2); }

.equipe-panneau {
  display: grid; gap: 14px; margin-top: 18px; padding: 12px;
  border-radius: 28px; border: 1px solid var(--trait-2);
  background: linear-gradient(180deg, rgba(31, 27, 58, .9), rgba(19, 17, 38, .94));
  box-shadow: 0 40px 100px -50px rgba(91, 63, 207, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.conv {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--trait);
  background: rgba(13, 12, 24, .62);
}
.conv-tete { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--trait); }
.conv-avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(168, 148, 255, .35), 0 10px 24px -10px rgba(0, 0, 0, .8); }
.conv-avatar .perso-hote { z-index: 1; border-radius: 50%; overflow: hidden; }
.perso-hote--nouveau { opacity: 0; }
.conv-avatar .perso-hote, .profil-portrait .perso-hote { transition: opacity .25s ease; }
.conv-qui { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; line-height: 1.15; }
.conv-nom { font: 800 1.08rem/1.1 var(--f-titre); letter-spacing: -.02em; }
.conv-role { font-size: .8rem; color: var(--texte-2); }
.conv-fil {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
  position: relative; max-height: 560px; padding: 16px 14px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(168, 148, 255, .25) transparent;
  background-image: radial-gradient(rgba(168, 148, 255, .07) 1px, transparent 1.4px);
  background-size: 20px 20px;
}
.msg { position: relative; display: flex; align-items: flex-end; gap: 9px; max-width: 94%; }
/* message pas encore dévoilé : il garde sa place (pas de grand vide, pas de saut) */
.msg-cache { visibility: hidden; }
.msg-points { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; gap: 9px; visibility: visible; }
.msg-points .msg-bulle { display: inline-flex; gap: 5px; padding: 13px 15px; background: #221E40; border: 1px solid var(--trait); border-radius: 18px; border-bottom-left-radius: 6px; }
.msg-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-2); opacity: .4; animation: ecrit 1.1s ease-in-out infinite; }
.msg-points i:nth-child(2) { animation-delay: .15s; }
.msg-points i:nth-child(3) { animation-delay: .3s; }
.msg .avatar { width: 28px; height: 28px; font-size: .74rem; }
.msg--vous { align-self: flex-end; justify-content: flex-end; }
.msg-corps { display: grid; gap: 7px; min-width: 0; justify-items: start; }
.msg--vous .msg-corps { justify-items: end; }
.msg-bulle { padding: 10px 14px; border-radius: 18px; font-size: .94rem; line-height: 1.45; }
.msg--agent .msg-bulle { background: #221E40; border: 1px solid var(--trait); border-bottom-left-radius: 6px; color: var(--texte); }
.msg--vous .msg-bulle { background: linear-gradient(180deg, #6A50E2, #5B3FCF); color: #fff; border-bottom-right-radius: 6px; }
.msg-etiquette { display: inline-flex; align-items: center; gap: 6px; font: 500 .66rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.msg-etiquette .ic { width: 13px; height: 13px; color: var(--lavande); }
.msg-systeme {
  align-self: center; display: inline-flex; align-items: center; gap: 7px; text-align: center;
  padding: 6px 11px; border-radius: 999px;
  font: 500 .7rem/1.35 var(--f-mono); letter-spacing: .03em;
  color: var(--texte-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--trait);
}
.msg-systeme--ok { color: var(--vert); background: rgba(76, 197, 148, .1); border-color: rgba(76, 197, 148, .22); }
.msg-systeme .ic { width: 14px; height: 14px; }
.msg-ecrit .msg-bulle { display: inline-flex; gap: 5px; padding: 13px 15px; }
.msg-ecrit i { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-2); opacity: .4; animation: ecrit 1.1s ease-in-out infinite; }
.msg-ecrit i:nth-child(2) { animation-delay: .15s; }
.msg-ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes ecrit { 0%, 100% { transform: translateY(0); opacity: .35; } 45% { transform: translateY(-4px); opacity: 1; } }

/* Cartes dans la conversation (papier clair, comme l'appli) */
.carte-msg {
  width: min(330px, 100%); padding: 12px 14px; border-radius: 16px;
  background: #F7F6FB; color: var(--encre); border: 1px solid #E4E1EF;
  font-family: var(--f-appli); font-size: .84rem; line-height: 1.4;
  box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .9);
}
.cm-titre, .cm-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .9rem; }
.cm-titre span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: #EDE9FF; color: #5B3FCF; font-size: .72rem; }
.carte-msg ul { list-style: none; margin-top: 6px; }
.carte-msg--todo li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-top: 1px solid #ECEAF3; }
.carte-msg--todo li:first-child { border-top: 0; }
.carte-msg--todo em { margin-left: auto; padding-left: 8px; font-style: normal; font-size: .76rem; color: #75718F; white-space: nowrap; }
.cm-point { width: 7px; height: 7px; border-radius: 50%; background: #E8833A; flex: none; transform: translateY(-1px); }
.cm-badge { padding: 3px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.cm-badge--brouillon { background: #FFEEDC; color: #A9500C; }
.cm-badge--pret { background: #EDE9FF; color: #4B32B8; }
.cm-badge--ok { background: #DFF4EA; color: #17734F; }
.cm-sous { margin-top: 2px; font-size: .78rem; color: #6C6888; }
.cm-lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px dashed #E1DEEC; font-size: .8rem; }
.cm-lignes li span { min-width: 0; }
.cm-lignes small { display: block; color: #75718F; font-size: .74rem; }
.cm-lignes b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 8px; border-top: 1px solid #D9D5E8; font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.cm-montant { margin: 6px 0 4px; font: 800 1.5rem/1.1 var(--f-titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cm-checks li { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: .8rem; color: #3E3A5A; }
.cm-checks .ic { width: 15px; height: 15px; color: #1E8A5F; }
.cm-champs { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 8px; font-size: .8rem; }
.cm-champs dt { color: #75718F; }
.cm-champs dd { margin: 0; font-weight: 600; }
.cm-mail { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #E8E5F1; font-family: var(--f-texte); font-size: .8rem; line-height: 1.55; color: #2C2848; }
.cm-meta { font-size: .76rem; color: #6C6888; margin-top: 6px; }
.cm-meta b { color: var(--encre); font-weight: 600; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cm-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 9px; border: 1px solid #D9D5E8; background: #fff;
  font-size: .78rem; font-weight: 600; color: var(--encre);
  transition: transform .2s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.cm-btn--ok { background: #5B3FCF; border-color: #5B3FCF; color: #fff; }
.cm-btn--ok.is-presse { transform: scale(.92); }
.cm-btn--ok.is-fait { background: #1E8A5F; border-color: #1E8A5F; }
.cm-btn .ic { width: 14px; height: 14px; }
.cm-post-tete { display: flex; align-items: center; gap: 8px; }
.cm-post-tete .cm-page { width: 30px; height: 30px; border-radius: 50%; background: var(--encre); display: grid; place-items: center; color: #fff; font: 800 .8rem/1 var(--f-titre); }
.cm-post-tete small { display: block; font-size: .72rem; color: #75718F; font-weight: 500; }
.cm-photo {
  position: relative; height: 112px; margin-top: 10px; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .0) 40%, rgba(0, 0, 0, .18)),
    repeating-linear-gradient(98deg, #B97B4B 0 22px, #A86C3E 22px 24px, #C48A58 24px 46px, #9E6436 46px 48px);
}
.cm-photo::before { content: ""; position: absolute; inset: 0 0 58% 0; background: linear-gradient(180deg, #9CC7EF, #CFE4F5); }
.cm-photo::after { content: "Photo du chantier"; position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; font-size: .66rem; font-weight: 600; }
.cm-legende { margin-top: 8px; font-size: .8rem; color: #2C2848; }

.profil { display: flex; flex-direction: column; gap: 14px; padding: 10px 8px 6px; min-width: 0; }
.profil-tete { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: end; gap: 16px; }
.profil-entete { display: grid; gap: 10px; padding-bottom: 6px; }
.profil-portrait {
  position: relative; height: 128px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(70% 62% at 50% 60%, rgba(168, 148, 255, .3), rgba(168, 148, 255, .04) 75%), rgba(255, 255, 255, .02);
  border: 1px solid var(--trait);
}
.profil-role { font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lavande); }
.profil-titre { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.profil-liste { list-style: none; display: grid; gap: 11px; }
.profil-liste li { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-2); line-height: 1.45; }
.profil-liste .ic { color: var(--vert); width: 18px; height: 18px; margin-top: 3px; }
.profil-outils { display: flex; flex-wrap: wrap; gap: 6px; }
.profil-outils span { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--trait-2); background: rgba(255, 255, 255, .03); font: 500 .68rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--texte-2); }
.profil-cta { align-self: flex-start; margin-top: 6px; }
.profil-note { padding-top: 14px; border-top: 1px solid var(--trait); font: 500 .74rem/1.55 var(--f-mono); color: var(--texte-3); }
@media (min-width: 1024px) {
  .profil { justify-content: center; }
  .profil-tete { grid-template-columns: 136px minmax(0, 1fr); }
  .profil-portrait { height: 152px; }
}

@media (min-width: 720px) {
  .equipe-bande { grid-auto-columns: 172px; }
  .agent-scene { height: 170px; }
}
@media (min-width: 1180px) {
  .equipe-bande {
    grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0; padding: 10px 0 16px; overflow: visible;
  }
  .agent-desc { min-height: 3.4em; }
}
@media (min-width: 1024px) {
  .equipe-panneau { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; padding: 16px; }
  .profil { padding: 26px 22px 18px; }
  .conv-fil { height: 470px; max-height: none; padding: 18px 18px; }
}

/* ---------- Comment ça marche ---------- */
.etapes { position: relative; }
.etapes-liste { list-style: none; display: grid; gap: 40px; position: relative; }
.etape { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 62px; }
.etape-num {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--trait-2); background: var(--fond);
  font: 500 .8rem/1 var(--f-mono); color: var(--lavande);
  transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s;
}
.etape.is-on .etape-num { background: var(--lavande); color: var(--encre); border-color: var(--lavande); box-shadow: 0 0 0 7px rgba(168, 148, 255, .14); }
.etape h3 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); margin-top: 6px; }
.etape > p { color: var(--texte-2); }
.etape-tag { font: 500 .72rem/1.45 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--vert); }
.etapes-ligne { position: absolute; z-index: 1; left: 21px; top: 22px; width: 2px; height: 0; background: rgba(168, 148, 255, .14); border-radius: 2px; pointer-events: none; }
.etapes-ligne span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #A894FF, #5B3FCF); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.etapes-ligne.is-horizontale span { background: linear-gradient(90deg, #A894FF, #5B3FCF); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
html:not(.js) .etapes-ligne { display: none; }

.vignette {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px; min-height: 176px; padding: 16px;
  border-radius: 20px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, #17142E, #100E21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px -36px rgba(0, 0, 0, .9);
}
.v-ligne { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.v-ligne b { font: 700 1rem/1 var(--f-titre); }
.v-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(168, 148, 255, .14); color: var(--lavande); }
.v-icone .ic { width: 18px; height: 18px; }
.v-mono { margin-left: auto; font: 500 .72rem/1 var(--f-mono); color: var(--texte-3); }
.v-sous { font-size: .85rem; color: var(--texte-2); }
.v-puces { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-puces li {
  display: flex; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--trait); color: var(--texte-3);
  font: 600 .82rem/1 var(--f-titre);
  transition: border-color .35s, color .35s, background-color .35s;
}
.v-puces .ic { width: 15px; height: 15px; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease); }
.v-puces li.is-on { border-color: rgba(168, 148, 255, .45); color: var(--texte); background: rgba(168, 148, 255, .08); }
.v-puces li.is-on .ic { opacity: 1; transform: none; color: var(--vert); }
.vignette--reglages li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; border-bottom: 1px dashed var(--trait);
  font: 600 .88rem/1.2 var(--f-titre); color: var(--texte-2);
}
.vignette--reglages li:last-child { border-bottom: 0; }
.inter { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .1); transition: background-color .35s; }
.inter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.vignette--reglages li.is-on { color: var(--texte); }
.vignette--reglages li.is-on .inter { background: var(--lavande-vive); }
.vignette--reglages li.is-on .inter::after { transform: translateX(16px); }
.vignette--valider { justify-content: center; gap: 16px; }
.v-notif { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--trait); font-size: .9rem; color: var(--texte-2); }
.v-notif b { font: 700 .95rem/1 var(--f-titre); color: var(--texte); margin-right: 4px; }
.v-boutons { display: flex; gap: 8px; }
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-height: 42px; border-radius: 12px; border: 1px solid var(--trait-2); font: 600 .9rem/1 var(--f-titre); color: var(--texte-2); transition: transform .2s var(--ease), background-color .35s, border-color .35s, color .35s; }
.v-btn--ok { position: relative; background: var(--lavande); border-color: var(--lavande); color: var(--encre); }
.v-btn .ic { width: 16px; height: 16px; }
.v-ok-b { display: none; align-items: center; gap: 6px; }
.vignette--valider.is-presse .v-btn--ok { transform: scale(.94); }
.vignette--valider.is-valide .v-btn--ok { background: var(--vert); border-color: var(--vert); }
.vignette--valider.is-valide .v-ok-a { display: none; }
.vignette--valider.is-valide .v-ok-b { display: inline-flex; }

@media (min-width: 900px) {
  .etapes-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .etape { padding-left: 0; padding-top: 68px; }
  .etape-num { top: 0; }
}

/* ---------- L'appli ---------- */
.appli-grille { display: grid; gap: 56px; }
.appli-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.appli-etapes { list-style: none; display: grid; gap: 10px; width: 100%; margin-top: 10px; }
.appli-etape {
  position: relative; overflow: hidden; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start;
  padding: 16px 18px; text-align: left;
  border-radius: 18px; border: 1px solid var(--trait);
  background: rgba(23, 21, 43, .55); cursor: pointer;
  transition: border-color .35s, background-color .35s;
}
.appli-etape:hover { border-color: var(--trait-2); }
.appli-etape.is-actif { border-color: rgba(168, 148, 255, .5); background: rgba(40, 34, 74, .72); }
.ae-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--trait-2); font: 500 .8rem/1 var(--f-mono); color: var(--lavande); transition: background-color .35s, color .35s; }
.appli-etape.is-actif .ae-num { background: var(--lavande); color: var(--encre); border-color: var(--lavande); }
.ae-txt b { display: block; font: 700 1.06rem/1.25 var(--f-titre); letter-spacing: -.01em; }
.ae-txt > span { display: block; margin-top: 3px; font-size: .92rem; line-height: 1.45; color: var(--texte-2); }
.ae-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(168, 148, 255, .1); }
.ae-barre i { display: block; height: 100%; background: linear-gradient(90deg, #5B3FCF, #A894FF); transform: scaleX(0); transform-origin: 0 50%; }
.appli-etape.is-actif .ae-barre i { transform: scaleX(1); }
.motion .appli-etape .ae-barre i { transform: scaleX(0); }
.appli-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 8px; }
.appli-supports { font: 500 .74rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }

.appli-visuel { position: relative; display: grid; justify-items: center; gap: 16px; perspective: 1700px; }
.appli-visuel::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: 560px; height: 560px; max-width: 150%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(91, 63, 207, .6), rgba(91, 63, 207, .1) 60%, transparent);
}
.legende-maquette { font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .06em; color: var(--texte-3); text-align: center; }

.telephone {
  position: relative; font-size: 14px;
  transform: rotateY(-9deg) rotateX(3deg) rotateZ(.6deg); transform-origin: 50% 55%;
  width: 20em; height: 41.6em; padding: .62em;
  border-radius: 3.3em;
  background: linear-gradient(150deg, #34305A 0%, #0D0C18 28%, #0B0A14 70%, #2A2648 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 .3em #0B0A14, 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(168, 148, 255, .15), 18px 26px 0 -6px rgba(8, 7, 16, .55);
}
.motion .telephone { animation: flotte 8s ease-in-out infinite; }
@keyframes flotte {
  0%, 100% { transform: rotateY(-9deg) rotateX(3deg) rotateZ(.6deg) translateY(0); }
  50% { transform: rotateY(-5deg) rotateX(1.5deg) rotateZ(.2deg) translateY(-10px); }
}
.tel-ecran {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 2.7em; background: #F3F2F7; color: var(--encre);
  font-family: var(--f-appli); font-size: 1em; line-height: 1.35;
}
.tel-ile { position: absolute; top: .65em; left: 50%; z-index: 6; width: 6.6em; height: 1.95em; transform: translateX(-50%); border-radius: 1em; background: #0B0A14; }
.tel-statut { position: absolute; inset: 0 0 auto; z-index: 5; height: 3.3em; display: flex; justify-content: space-between; align-items: center; padding: 0 1.9em 0 2.1em; font-size: .86em; font-weight: 700; }
.tel-icones { display: flex; align-items: center; gap: .4em; }
.tel-reseau { display: flex; align-items: flex-end; gap: .14em; height: .8em; }
.tel-reseau b { width: .22em; background: var(--encre); border-radius: .1em; }
.tel-reseau b:nth-child(1) { height: 35%; } .tel-reseau b:nth-child(2) { height: 55%; } .tel-reseau b:nth-child(3) { height: 78%; } .tel-reseau b:nth-child(4) { height: 100%; }
.tel-batterie { position: relative; width: 1.7em; height: .82em; border-radius: .25em; border: .1em solid rgba(23, 21, 43, .45); }
.tel-batterie::before { content: ""; position: absolute; inset: .1em; right: .35em; border-radius: .12em; background: var(--encre); }
.ecran {
  position: absolute; inset: 3.4em 0 4.5em; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: .7em; padding: .35em .85em .6em;
  opacity: 0; visibility: hidden; transform: translateX(14px);
  transition: opacity .5s var(--ease), visibility .5s, transform .6s var(--ease);
}
.ecran.is-actif { opacity: 1; visibility: visible; transform: none; }
.app-barre { display: flex; align-items: center; gap: .55em; padding: .25em .05em; }
.app-barre b { margin-right: auto; font-size: 1.32em; font-weight: 750; letter-spacing: -.02em; }
.app-logo { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .6em; background: var(--encre); }
.app-logo svg { width: 1.3em; height: 1.3em; }
.app-initiales { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #E7E2FA; color: #5B3FCF; font-size: .8em; font-weight: 700; }
.app-carte { padding: .75em .8em; border-radius: 1em; background: #fff; border: 1px solid #E7E4F0; box-shadow: 0 1px 2px rgba(23, 21, 43, .04); }
.app-qui { display: flex; align-items: center; gap: .5em; font-size: .86em; }
.app-qui > span:last-child { color: #66627F; }
.app-avatar { position: relative; flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; overflow: hidden; background: #EDE9FF; }
.app-avatar .perso-hote { position: absolute; inset: 0; }
.app-avatar-repli { position: absolute; inset: 0; display: grid; place-items: center; color: #5B3FCF; font-weight: 800; transition: opacity .4s; }
.app-avatar.is-monte .app-avatar-repli { opacity: 0; }
.app-bulle { margin-top: .55em; padding: .6em .75em; border-radius: .8em .8em .8em .25em; background: #F1EEFF; color: #2A2645; font-size: .88em; line-height: 1.4; }
.app-titre { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3em; font-size: .92em; font-weight: 700; }
.app-titre span { font-size: .85em; font-weight: 500; color: #66627F; }
.app-todo { list-style: none; }
.app-todo li { display: flex; gap: .6em; padding: .55em 0; border-top: 1px solid #F0EEF6; font-size: .8em; line-height: 1.3; }
.app-todo li:first-child { border-top: 0; }
.app-todo i { flex: none; width: .55em; height: .55em; margin-top: .38em; border-radius: 50%; background: #E8833A; }
.app-todo small { display: block; margin-top: .15em; font-size: .9em; color: #66627F; }
.app-jlignes { list-style: none; }
.app-jlignes li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .55em; padding: .45em 0; border-top: 1px solid #F0EEF6; font-size: .78em; line-height: 1.25; color: #3F3B5C; }
.app-jlignes li:first-child { border-top: 0; }
.app-jlignes time { font-variant-numeric: tabular-nums; font-size: .92em; color: #66627F; }
.app-jlignes .avatar { width: 1.95em; height: 1.95em; font-size: .78em; box-shadow: none; }
.app-jlignes b { font-weight: 700; color: var(--encre); margin-right: .2em; }
.app-jlignes li > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-onglets { display: flex; gap: .35em; }
.app-onglets span { padding: .45em .9em; border-radius: .6em; font-size: .8em; color: #8A86A3; }
.app-onglets .is-actif { background: #EDE9FF; color: #5B3FCF; font-weight: 650; }
.app-devis { position: relative; }
.app-devis-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .45em; font-size: .84em; }
.app-devis-tete b { letter-spacing: .02em; }
.app-devis-tete span { color: #4A4664; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-devis-tete em { font-style: normal; font-weight: 750; white-space: nowrap; }
.app-devis-etat { display: flex; align-items: center; gap: .5em; margin: .55em 0 .45em; font-size: .72em; color: #8A86A3; }
.app-badge { display: inline-flex; align-items: center; gap: .3em; padding: .28em .7em; border-radius: 999px; font-size: 1em; font-weight: 650; }
.app-badge .ic { width: 1.1em; height: 1.1em; }
.app-badge--brouillon { background: #FFF0E0; color: #A9500C; }
.app-badge--valide { display: none; background: #E3F5EC; color: #17734F; }
.app-badge--envoye { background: #E9F1FF; color: #2A62B8; }
.app-devis.is-valide .app-badge--brouillon { display: none; }
.app-devis.is-valide .app-badge--valide { display: inline-flex; }
.app-lignes { list-style: none; margin-bottom: .55em; font-size: .7em; }
.app-lignes li { display: flex; justify-content: space-between; gap: .6em; padding: .4em 0; border-top: 1px dashed #E7E4F0; color: #4A4664; }
.app-lignes b { white-space: nowrap; color: var(--encre); }
.app-actions { position: relative; display: flex; gap: .4em; }
.app-btn { display: inline-flex; align-items: center; padding: .55em .85em; border-radius: .6em; border: 1px solid #DCD8EA; background: #fff; font-size: .74em; font-weight: 650; }
.app-btn--plein { position: relative; overflow: hidden; background: #5B3FCF; border-color: #5B3FCF; color: #fff; transition: background-color .35s, transform .2s var(--ease); }
.app-btn--plein.is-presse { transform: scale(.93); }
.abv-b { display: none; }
.app-devis.is-valide .abv-a { display: none; }
.app-devis.is-valide .abv-b { display: inline; }
.app-doigt { position: absolute; left: 7.4em; top: .2em; width: 2.3em; height: 2.3em; border-radius: 50%; background: rgba(23, 21, 43, .2); border: .15em solid rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(23, 21, 43, .3); opacity: 0; pointer-events: none; }
.app-devis--pale { opacity: .72; }
.app-toast {
  position: absolute; left: .85em; right: .85em; bottom: .7em;
  display: flex; align-items: center; gap: .55em; padding: .75em .9em;
  border-radius: .85em; background: var(--encre); color: #fff;
  font-size: .76em; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(23, 21, 43, .55);
  opacity: 0; transform: translateY(10px);
}
.app-toast .ic { color: #4CC594; width: 1.3em; height: 1.3em; }
.app-reseau { position: relative; display: flex; justify-content: center; padding: .55em; border-radius: .7em; background: #FFF3DE; color: #8F5400; font-size: .72em; font-weight: 650; transition: background-color .4s, color .4s; }
.ar-b { display: none; }
.ecran.is-reseau .app-reseau { background: #E3F5EC; color: #17734F; }
.ecran.is-reseau .ar-a { display: none; }
.ecran.is-reseau .ar-b { display: inline; }
.app-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; flex: 1; }
.app-note { align-self: flex-end; max-width: 90%; padding: .7em .85em; border-radius: 1em 1em .3em 1em; background: #7B62E3; color: #fff; font-size: .82em; line-height: 1.4; }
.app-note small { display: block; margin-top: .45em; font-size: .82em; opacity: .9; }
.an-b { display: none; align-items: center; gap: .3em; }
.an-b .ic { width: 1.1em; height: 1.1em; }
.ecran.is-reseau .an-a { display: none; }
.ecran.is-reseau .an-b { display: inline-flex; }
.app-reponse { display: flex; align-items: flex-end; gap: .5em; font-size: .82em; line-height: 1.4; }
.app-reponse > span:last-child { padding: .65em .8em; border-radius: 1em 1em 1em .3em; background: #fff; border: 1px solid #E7E4F0; }
.app-avatar--cindy { display: grid; place-items: center; width: 2em; height: 2em; background: #F59E62; color: var(--encre); font-size: .85em; font-weight: 800; }
.app-saisie { display: flex; align-items: center; gap: .45em; padding: .4em .4em .4em .9em; border-radius: 1em; background: #fff; border: 1px solid #E7E4F0; font-size: .78em; color: #8A86A3; }
.app-saisie > span { flex: 1; }
.app-micro, .app-envoi { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .7em; border: 1px solid #E7E4F0; color: var(--encre); }
.app-micro .ic, .app-envoi .ic { width: 1.25em; height: 1.25em; }
.app-envoi { background: #5B3FCF; border-color: #5B3FCF; color: #fff; }
.motion .ecran.is-actif .app-micro { animation: micro 1.6s ease-in-out infinite; }
@keyframes micro { 50% { box-shadow: 0 0 0 .35em rgba(91, 63, 207, .18); border-color: #5B3FCF; color: #5B3FCF; } }
.app-nav {
  position: absolute; inset: auto 0 0; z-index: 3; height: 6.6em;
  display: flex; justify-content: space-between; align-items: flex-start; padding: .6em 2.2em 0;
  background: #fff; border-top: 1px solid #E7E4F0;
  font-size: .62em; color: #8A86A3;
}
.app-nav span { display: flex; flex-direction: column; align-items: center; gap: .25em; transition: color .3s; }
/* barre d'accueil du téléphone : les libellés ne touchent plus le bord arrondi */
.app-nav::after { content: ""; position: absolute; left: 50%; bottom: .9em; width: 36%; height: .5em; border-radius: 1em; background: #17152B; opacity: .82; transform: translateX(-50%); }
.tel-reflet { position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .07) 100%); }
.app-nav .ic { width: 2em; height: 2em; }
.app-nav .is-actif { color: #5B3FCF; font-weight: 650; }

@media (max-width: 1023px) {
  .appli-grille { gap: 18px; }
  .appli-texte { display: contents; }
  .appli-texte > .pastille { justify-self: start; }
  .appli-visuel { order: 4; margin: 26px 0 18px; }
  .appli-etapes { order: 5; margin-top: 0; }
  .appli-bas { order: 6; }
}
@media (max-width: 400px) { .telephone { font-size: 13px; } }
@media (min-width: 1024px) {
  .appli-grille { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: 72px; }
  .telephone { font-size: 15px; }
}

/* ---------- Manifeste ---------- */
.manifeste { position: relative; padding: clamp(56px, 7vw, 104px) 0 clamp(20px, 3vw, 44px); text-align: center; overflow-x: clip; }
.manifeste + .section { padding-top: clamp(48px, 6vw, 88px); }
.manifeste::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 520px; max-width: 160%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(91, 63, 207, .32), transparent);
}
.manifeste-texte {
  position: relative; max-width: 22em; margin-inline: auto;
  font: 800 clamp(2.1rem, 1rem + 3.6vw, 4.2rem)/1.02 var(--f-titre); letter-spacing: -.032em;
  text-wrap: balance;
}
.manifeste-texte .accent { color: var(--lavande); }
.manifeste-sous { position: relative; margin-top: 22px; font: 500 .8rem/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }

/* ---------- Pour qui ---------- */
.metiers-grille { list-style: none; display: grid; gap: 14px; }
.metier { display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 26px; }
.metier-icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(168, 148, 255, .1); border: 1px solid var(--trait-2); color: var(--lavande); margin-bottom: 6px; }
.metier-icone .ic { width: 27px; height: 27px; }
.metier h3 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); }
.metier p { color: var(--texte-2); font-size: .98rem; }
.metier .metier-exemple {
  display: flex; align-items: center; gap: 9px;
  margin-top: 4px; padding: 9px 12px; border-radius: 12px;
  background: rgba(13, 12, 24, .55); border: 1px dashed rgba(168, 148, 255, .2);
  font-size: .86rem; line-height: 1.3; color: var(--texte);
}
.metier-exemple time { font: 500 .72rem/1 var(--f-mono); color: var(--texte-3); }
.metier-exemple .avatar { width: 22px; height: 22px; font-size: .64rem; }
.metier-exemple span:not(.avatar) { flex: 1 1 auto; min-width: 0; }
.metier-exemple time, .metier-exemple em { flex: none; }
.metier-exemple em { font: 500 .62rem/1 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.metier-perso { position: absolute; top: 8px; right: 8px; width: 108px; height: 122px; pointer-events: none; }
.metier-perso .perso-hote { border-radius: 18px; overflow: hidden; }
.metier-bulle {
  position: absolute; right: 86px; top: 10px; z-index: 2;
  padding: 7px 11px; border-radius: 12px 12px 4px 12px;
  background: #F0EEFA; color: var(--encre); font: 600 .76rem/1.2 var(--f-titre); white-space: nowrap;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(6px) scale(.92); transform-origin: 100% 100%; transition: opacity .25s, transform .4s var(--ease);
}
.metier--perso:hover .metier-bulle, .metier--perso.is-parle .metier-bulle { opacity: 1; transform: none; }
.metier .metier-agents { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 10px; font: 500 .74rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--texte-2); }
.avatars { display: flex; }
.avatars .avatar { width: 28px; height: 28px; margin-left: -7px; box-shadow: 0 0 0 2px #17152B, inset 0 -3px 6px rgba(0, 0, 0, .14); }
.avatars .avatar:first-child { margin-left: 0; }
@media (min-width: 720px) { .metiers-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .metiers-grille, .formules {
    grid-auto-flow: column; grid-auto-columns: min(84%, 330px); gap: 12px;
    margin-inline: calc(var(--gouttiere) * -1); padding: 6px var(--gouttiere) 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none;
  }
  .metiers-grille::-webkit-scrollbar, .formules::-webkit-scrollbar { display: none; }
  .metiers-grille > *, .formules > * { scroll-snap-align: start; }
  .metier { min-height: 0; }
  .formule-pour { min-height: 0; }
  .formule-badge { position: static; align-self: flex-start; margin-bottom: 2px; }
}
@media (min-width: 1024px) {
  .metiers-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .metier { grid-column: span 2; }
  .metier--large { grid-column: span 3; min-height: 260px; }
}

/* ---------- Confiance ---------- */
.confiance-grille { display: grid; gap: 48px; }
.confiance-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.journal-mini { width: 100%; max-width: 440px; margin-top: 10px; padding: 16px; border-radius: 20px; border: 1px solid var(--trait-2); background: rgba(22, 20, 42, .75); }
.jm-titre { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--trait); font: 700 .95rem/1.2 var(--f-titre); }
.jm-titre .ic { width: 17px; height: 17px; color: var(--lavande); }
.jm-titre .etiquette-exemple { margin-left: auto; }
.journal-mini ol { list-style: none; }
.journal-mini li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; font-size: .86rem; color: var(--texte-2); border-bottom: 1px dashed rgba(168, 148, 255, .09); }
.journal-mini li:last-child { border-bottom: 0; }
.journal-mini time { font: 500 .72rem/1 var(--f-mono); color: var(--texte-3); }
.journal-mini .avatar { width: 22px; height: 22px; font-size: .66rem; }
.journal-mini b { font: 700 .88rem/1 var(--f-titre); color: var(--texte); margin-right: 3px; }
.engagements { list-style: none; display: grid; gap: 14px; }
.engagement { display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.eng-icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; margin-bottom: 4px; background: linear-gradient(180deg, rgba(168, 148, 255, .22), rgba(91, 63, 207, .14)); border: 1px solid var(--trait-2); color: #fff; }
.eng-icone .ic { width: 24px; height: 24px; }
.engagement:first-child .eng-icone { background: rgba(76, 197, 148, .15); border-color: rgba(76, 197, 148, .32); color: var(--vert); }
.engagement h3 { font-size: 1.32rem; }
.engagement p { color: var(--texte-2); font-size: .96rem; }
.engagement .eng-preuve { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--trait); font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--lavande); }
@media (min-width: 720px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .confiance-grille { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .confiance-texte { position: sticky; top: calc(var(--entete) + 40px); }
}

/* ---------- Offres ---------- */
.parcours { list-style: none; display: grid; gap: 12px; margin-bottom: 18px; }
.parcours li { position: relative; display: grid; gap: 6px; padding: 20px 22px; border-radius: 20px; border: 1px dashed var(--trait-2); background: rgba(22, 20, 42, .45); }
.parcours-quand { font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.parcours h3 { font-size: 1.2rem; }
.parcours p { font-size: .92rem; color: var(--texte-2); }
.parcours b { font: 700 1.02rem/1.2 var(--f-titre); color: var(--vert); }
.parcours-equipe { position: absolute; top: 16px; right: 18px; }
.parcours-equipe .avatar { width: 24px; height: 24px; margin-left: -6px; }
.formule-badge .avatars .avatar { width: 22px; height: 22px; margin-left: -6px; box-shadow: 0 0 0 2px #A894FF; }
.formule-badge .avatars .avatar:first-child { margin-left: 0; }
.formules { display: grid; gap: 14px; }
.formule { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.formule h3 { font-size: 1.65rem; }
.formule-pour { color: var(--texte-2); min-height: 3em; }
.formule-prix { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fp-de { font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.fp-montant { font: 800 3.1rem/1 var(--f-titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fp-unite { font-size: .92rem; color: var(--texte-2); }
.formule-installation { font: 500 .8rem/1.4 var(--f-mono); color: var(--lavande); font-variant-numeric: tabular-nums; }
.formule ul { list-style: none; display: grid; gap: 10px; margin: 8px 0 12px; padding-top: 16px; border-top: 1px solid var(--trait); }
.formule li { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-2); }
.formule li .ic { color: var(--vert); width: 18px; height: 18px; margin-top: 3px; }
.formule .btn { margin-top: auto; }
.formule--phare {
  border-color: rgba(168, 148, 255, .55);
  background: linear-gradient(180deg, #2B2456 0%, #1A1734 100%);
  box-shadow: 0 40px 100px -46px rgba(124, 99, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.formule-badge { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-radius: 999px; background: var(--lavande); color: var(--encre); font: 500 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.note { margin-top: 22px; text-align: center; font: 500 .76rem/1.5 var(--f-mono); color: var(--texte-3); }
@media (min-width: 900px) {
  .parcours { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .parcours li:not(:last-child)::after {
    content: ""; position: absolute; right: -12px; top: 50%; z-index: 1; width: 10px; height: 10px;
    border-top: 1.5px solid var(--lavande); border-right: 1.5px solid var(--lavande);
    transform: translateY(-50%) rotate(45deg);
  }
  .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Offres 2026 (accueil) : badge « 7 jours gratuits », têtes des agents inclus, offre « Populaire » */
.formule-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.formule-essai {
  flex: none; padding: 5px 9px; border-radius: 999px;
  border: 1px solid rgba(76, 197, 148, .35); background: rgba(76, 197, 148, .1); color: var(--vert);
  font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.formule-essai--demo { border-color: var(--trait-2); background: rgba(168, 148, 255, .1); color: var(--lavande); }
.formules--2026 .formule-pour { min-height: 3.2em; }
.fp-montant--texte { font-size: 2.35rem; letter-spacing: -.035em; }
.formule-agents { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 500 .76rem/1.3 var(--f-mono); color: var(--texte-2); }
.formule-agents .avatars .avatar { width: 34px; height: 34px; margin-left: -9px; box-shadow: 0 0 0 2px #191633; }
.formule-agents .avatars .avatar:first-child { margin-left: 0; }
.formule--phare .formule-agents .avatars .avatar { box-shadow: 0 0 0 2px #262050; }
.formule-agents .avatar-plus {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: -9px; border-radius: 50%;
  border: 1.5px dashed rgba(168, 148, 255, .6); background: #1D1A3A; color: var(--lavande); font: 700 1rem/1 var(--f-titre);
}
.formule-badge--populaire {
  top: 0; right: auto; left: 50%; transform: translate(-50%, -50%);
  padding: 7px 14px; font: 700 .8rem/1 var(--f-titre); letter-spacing: 0; text-transform: none; white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(168, 148, 255, .95);
}
.offres .note a { color: var(--lavande); text-underline-offset: 3px; }
.formule-sous { margin-top: -4px; text-align: center; font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--texte-3); }
@media (max-width: 719px) {
  .formules--2026 { padding-top: 24px; }
  .formules--2026 .formule-badge--populaire { position: absolute; }
  .formules--2026 .formule-pour { min-height: 0; }
}

/* ---------- FAQ ---------- */
.faq-grille { display: grid; gap: 36px; }
.faq-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.question { border-bottom: 1px solid var(--trait); overflow: hidden; }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 4px; list-style: none; cursor: pointer;
  font: 700 clamp(1.06rem, 1rem + .35vw, 1.24rem)/1.3 var(--f-titre); letter-spacing: -.015em;
  transition: color .25s;
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: #fff; }
.question summary:focus-visible { outline-offset: -3px; }
.question summary .ic {
  width: 36px; height: 36px; padding: 8px; border-radius: 50%;
  border: 1px solid var(--trait-2); color: var(--lavande);
  transition: transform .45s var(--ease), background-color .3s;
}
.question[open] summary .ic { transform: rotate(45deg); background: rgba(168, 148, 255, .12); }
.question.se-ferme summary .ic { transform: none; background: transparent; }
.reponse { padding: 0 4px 24px; max-width: 62ch; color: var(--texte-2); }
.reponse a { color: var(--lavande); }
@media (min-width: 1024px) {
  .faq-grille { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
  .faq-tete { position: sticky; top: calc(var(--entete) + 40px); }
}

/* ---------- Essai gratuit (inscription sur l'appli) ---------- */
.essai-carte {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; gap: 18px; text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: clamp(30px, 5.5vw, 64px) clamp(18px, 4.5vw, 56px);
  border-radius: 32px; border: 1px solid rgba(168, 148, 255, .4);
  background: radial-gradient(120% 120% at 50% 0%, #332A66 0%, #1D1939 52%, #141229 100%);
  box-shadow: 0 50px 120px -60px rgba(124, 99, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.essai-carte::after {
  content: ""; position: absolute; left: 50%; top: -280px; z-index: -1; width: 680px; height: 540px; max-width: 160%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 148, 255, .22), transparent);
}
.essai-carte h2 { max-width: 16ch; }
.essai-carte .section-accroche { margin-inline: auto; max-width: 46ch; }
.essai-carte .avatars .avatar { width: 40px; height: 40px; margin-left: -10px; box-shadow: 0 0 0 3px #2A2354; }
.essai-carte .avatars .avatar:first-child { margin-left: 0; }
.essai-etapes { list-style: none; display: grid; gap: 10px; width: 100%; max-width: 1000px; margin-top: 6px; text-align: left; }
.essai-etapes li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--trait); background: rgba(13, 12, 24, .45);
  font: 600 .95rem/1.3 var(--f-titre); letter-spacing: -.005em; color: var(--texte);
}
.essai-etapes span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lavande); color: var(--encre); font: 500 .78rem/1 var(--f-mono); }
.essai-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 6px; }
.essai-actions .btn { flex: 1 1 240px; max-width: 360px; }
.essai-note { font: 500 .74rem/1.5 var(--f-mono); color: var(--texte-3); text-wrap: balance; }
.essai-note a { color: var(--lavande); text-underline-offset: 3px; }
@media (min-width: 720px) {
  .essai-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .essai-actions .btn { flex: 0 0 auto; }
}
@media (min-width: 1080px) { .essai-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Contact (cas particuliers) ---------- */
.contact-carte {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 36px; padding: clamp(22px, 4.5vw, 60px);
  border-radius: 32px; border: 1px solid rgba(168, 148, 255, .32);
  background: radial-gradient(120% 120% at 0% 0%, #2C2559 0%, #1A1734 50%, #141229 100%);
  box-shadow: 0 50px 120px -60px rgba(124, 99, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.contact-carte::after {
  content: ""; position: absolute; right: -180px; bottom: -220px; z-index: -1; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 148, 255, .2), transparent);
}
.contact-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contact-suite { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.contact-suite li { display: flex; align-items: center; gap: 12px; color: var(--texte-2); }
.contact-suite span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--trait-2); font: 500 .76rem/1 var(--f-mono); color: var(--lavande); }
.contact-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 12px; }
.contact-perso { position: relative; width: 100%; max-width: 380px; height: 188px; margin-top: 4px; }
.contact-perso .perso-hote { right: auto; width: 168px; }
.contact-bulle {
  position: absolute; left: 150px; top: 30px; max-width: 210px;
  padding: 11px 15px; border-radius: 16px 16px 16px 5px;
  background: rgba(240, 238, 250, .97); color: var(--encre);
  font: 600 .95rem/1.3 var(--f-titre); letter-spacing: -.01em;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
.contact-coord { display: grid; gap: 5px; font: 500 .76rem/1.4 var(--f-mono); color: var(--texte-2); overflow-wrap: anywhere; }
.formulaire { display: grid; gap: 16px; min-width: 0; padding: clamp(18px, 3vw, 28px); border-radius: 24px; border: 1px solid var(--trait); background: rgba(13, 12, 24, .58); }
.champ { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ label, .champ legend { padding: 0; font: 600 .92rem/1.3 var(--f-titre); color: var(--texte); }
.facultatif { font-weight: 500; color: var(--texte-3); }
.champ input, .champ textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border-radius: 14px; border: 1px solid var(--trait-2);
  background: rgba(255, 255, 255, .04); color: var(--texte);
  font: 400 1rem/1.4 var(--f-texte);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 96px; }
.champ input::placeholder, .champ textarea::placeholder { color: #77739A; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--lavande); background: rgba(168, 148, 255, .08); box-shadow: 0 0 0 4px rgba(168, 148, 255, .2); }
.champ input[aria-invalid="true"] { border-color: #FF8FA6; }
.champ-duo { display: grid; gap: 16px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.puce { position: relative; display: inline-flex; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.puce span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--trait-2);
  font: 500 .92rem/1 var(--f-titre); color: var(--texte-2); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.puce span:hover { border-color: rgba(168, 148, 255, .5); color: var(--texte); }
.puce input:checked + span { background: var(--lavande); border-color: var(--lavande); color: var(--encre); }
.puce input:focus-visible + span { outline: 3px solid var(--lavande); outline-offset: 2px; }
.form-erreur { padding: 10px 14px; border-radius: 12px; background: rgba(255, 120, 150, .1); border: 1px solid rgba(255, 143, 166, .35); color: #FFB3C3; font-size: .92rem; }
.form-erreur:empty { display: none; }
.form-note { font-size: .84rem; line-height: 1.5; color: var(--texte-3); }
.form-note.is-ok { color: var(--vert); }
.form-repli a, .form-erreur a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* piège à robots : hors de l'écran, jamais vu ni atteint au clavier */
.champ-piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.champ-accord { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: .86rem; line-height: 1.45; color: var(--texte-2); }
.champ-accord input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lavande); cursor: pointer; }
.champ-accord input[aria-invalid="true"] { outline: 2px solid #FF8FA6; outline-offset: 2px; }
.champ-accord label { cursor: pointer; }
.champ-accord a { color: var(--lavande); text-decoration: underline; text-underline-offset: 2px; }
.form-offre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: 12px; background: rgba(168, 148, 255, .1); border: 1px solid rgba(168, 148, 255, .25); font-size: .9rem; color: var(--texte-2); }
.form-offre[hidden] { display: none; }
.form-offre b { color: var(--texte); font-family: var(--f-titre); }
.form-offre-retirer { margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--trait-2); background: transparent; color: var(--texte-2); font: 500 .74rem/1 var(--f-mono); cursor: pointer; }
.form-offre-retirer:hover { color: var(--texte); border-color: rgba(168, 148, 255, .5); }
.formulaire.is-envoi .form-envoyer { opacity: .7; cursor: progress; }
.formulaire.is-envoye { align-content: center; }
.formulaire.is-envoye > :not(.form-merci) { display: none; }
.form-merci { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 8px 0; outline: none; }
.form-merci[hidden] { display: none; }
.form-merci-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(76, 197, 148, .16); color: var(--vert); }
.form-merci-icone .ic { width: 24px; height: 24px; }
.form-merci-titre { font: 800 1.35rem/1.15 var(--f-titre); letter-spacing: -.02em; color: var(--texte); }
.form-merci-texte { color: var(--texte-2); }
@media (min-width: 560px) { .champ-duo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-carte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }

/* ---------- Pied de page ---------- */
.pied { padding-top: 72px; border-top: 1px solid var(--trait); overflow: hidden; }
.pied-haut { display: grid; gap: 36px; }
.pied-slogan { margin-top: 18px; font: 800 1.6rem/1.1 var(--f-titre); letter-spacing: -.035em; }
.pied-sous { margin-top: 8px; font-size: .92rem; line-height: 1.6; color: var(--texte-2); }
.pied-titre { margin-bottom: 10px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.pied-col ul { list-style: none; display: grid; gap: 2px; }
.pied-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-2); text-decoration: none; transition: color .2s; }
.pied-col a:hover { color: #fff; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 48px; padding: 22px 0; border-top: 1px solid var(--trait); font: 500 .74rem/1.5 var(--f-mono); color: var(--texte-3); }
.pied-geant {
  margin: 0 0 -.14em; text-align: center; user-select: none;
  font: 800 clamp(6rem, 30vw, 25rem)/.82 var(--f-titre); letter-spacing: -.035em;
  background: linear-gradient(180deg, rgba(168, 148, 255, .26), rgba(168, 148, 255, 0) 82%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 900px) { .pied-haut { grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); } }

/* ---------- Mentions légales ---------- */
.page-legale { padding: calc(var(--entete) + 48px) 0 96px; }
.page-legale .conteneur { max-width: 880px; }
.page-legale h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); letter-spacing: -.035em; margin: 18px 0 16px; }
.page-legale .chapeau { color: var(--texte-2); font-size: 1.1rem; max-width: 60ch; }
.page-legale section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--trait); }
.page-legale h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: 16px; }
.page-legale h3 { font-size: 1.12rem; margin: 22px 0 8px; }
.page-legale p, .page-legale li { color: var(--texte-2); }
.page-legale p + p { margin-top: 12px; }
.page-legale ul { padding-left: 1.2em; display: grid; gap: 6px; margin-top: 10px; }
.page-legale a { color: var(--lavande); overflow-wrap: anywhere; }
.page-legale dl { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.page-legale dt { color: var(--texte); font-weight: 600; font-family: var(--f-titre); }
.page-legale dd { margin: 0; color: var(--texte-2); overflow-wrap: anywhere; }
.a-completer { padding: 1px 6px; border-radius: 6px; background: rgba(255, 196, 92, .14); color: #FFD08A; font: 500 .82em/1.4 var(--f-mono); }
/* notes de travail : visibles seulement avec ?relecture à la fin de l'adresse (un visiteur ne voit jamais ces crochets) */
.relecture-seule { display: none !important; }
html.relecture .relecture-seule { display: inline !important; }
html.relecture p.relecture-seule, html.relecture li.relecture-seule, html.relecture div.relecture-seule { display: block !important; }
.page-legale strong { color: var(--texte); font-weight: 600; }
/* Conditions d'utilisation : « L'essentiel » en tête de page */
.cgu-essentiel { margin-top: 28px; padding: 20px 22px; border-radius: 20px; border: 1px solid rgba(76, 197, 148, .3); background: linear-gradient(180deg, rgba(76, 197, 148, .08), rgba(76, 197, 148, .02)); }
.page-legale .cgu-essentiel-titre { font: 700 1.1rem/1.2 var(--f-titre); letter-spacing: -.01em; color: var(--texte); }
.page-legale .cgu-essentiel ul { list-style: none; padding-left: 0; gap: 9px; margin-top: 12px; }
.cgu-essentiel li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.cgu-essentiel .ic { width: 18px; height: 18px; margin-top: 4px; color: var(--vert); }
.retour { display: inline-flex; align-items: center; gap: 8px; color: var(--lavande); text-decoration: none; font: 600 .95rem/1 var(--f-titre); }
.retour .ic { transform: rotate(180deg); }
@media (max-width: 560px) { .page-legale dl { grid-template-columns: 1fr; gap: 4px; } .page-legale dd { margin-bottom: 10px; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bandeau-piste { animation: none !important; }
  .bandeau { -webkit-mask-image: none; mask-image: none; }
  .bandeau-piste { width: auto; }
  .bandeau-liste { flex-wrap: wrap; justify-content: center; gap: 14px 32px; padding: 0 var(--gouttiere); }
  .bandeau-liste + .bandeau-liste { display: none; }
}