/* ============ Orbite – logiciel imaginaire (démo Nexora Studios) ============ */
:root {
  --papier: #f5f6fb;
  --surface: #ffffff;
  --ink: #0e1330;
  --doux: #566083;
  --trait: rgba(14, 19, 48, .12);
  --bleu: #2d4bff;
  --bleu-fonce: #1d34cf;
  --ciel: #e8ecff;
  --soleil: #ffd23f;
  --corail: #ff6b57;
  --menthe: #2fcf8a;
  --ombre: 0 30px 60px -30px rgba(21, 33, 110, .35);
  --titre: "Unbounded", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --texte: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .9, .2, 1);
  --gut: clamp(20px, 5vw, 72px);
  --cadre: max(var(--gut), calc(50% - 620px));
  color-scheme: light;
}
:root[data-theme="sombre"] {
  --papier: #0a0e22;
  --surface: #131937;
  --ink: #eef0ff;
  --doux: #9ba5d3;
  --trait: rgba(238, 240, 255, .14);
  --bleu: #5b74ff;
  --bleu-fonce: #4561ff;
  --ciel: #1a2150;
  --menthe: #3ddc97;
  --ombre: 0 30px 60px -30px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]):not([data-theme="sombre"]) {
    --papier: #0a0e22; --surface: #131937; --ink: #eef0ff; --doux: #9ba5d3; --trait: rgba(238, 240, 255, .14);
    --bleu: #5b74ff; --bleu-fonce: #4561ff; --ciel: #1a2150; --menthe: #3ddc97; --ombre: 0 30px 60px -30px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 500 17px/1.6 var(--texte); color: var(--ink); background: var(--papier); overflow-x: clip; transition: background .4s, color .4s; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--soleil); color: #0e1330; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--papier); transition: top .2s; }
.saut:focus { top: 12px; }
[hidden] { display: none !important; }
h2 { font: 600 clamp(30px, 4.2vw, 58px)/1.08 var(--titre); letter-spacing: -.03em; text-wrap: balance; }
h3 { font: 700 20px/1.25 var(--texte); letter-spacing: -.01em; }
.intro { font-size: 19px; color: var(--doux); max-width: 46ch; text-wrap: pretty; }
section { padding: clamp(70px, 11vh, 130px) var(--cadre); }

/* types de contenu */
.t-video { --tc: var(--corail); }
.t-photo { --tc: var(--menthe); }
.t-direct { --tc: #f2b705; }

/* mots révélés */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .12em; margin: 0 -.05em -.12em; }
.mot > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease); transition-delay: calc(var(--k, 0) * 55ms); }
.rv.vu .mot > span { transform: none; }

/* ---------- boutons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; isolation: isolate; overflow: hidden;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 15px/1.1 var(--texte); transition: transform .35s var(--ease), box-shadow .35s, background .3s, color .3s, border-color .3s;
}
.btn-bleu { background: var(--bleu); color: #fff; }
.btn-bleu:hover { background: var(--bleu-fonce); box-shadow: 0 14px 30px -10px rgba(45, 75, 255, .7); }
.btn-contour { border-color: var(--trait); background: transparent; color: var(--ink); }
.btn-contour:hover { border-color: var(--ink); }
.btn-soleil { background: var(--soleil); color: #0e1330; }
.btn-soleil:hover { box-shadow: 0 14px 30px -10px rgba(255, 210, 63, .8); }
.btn:active { transform: scale(.97) !important; }

/* ---------- en-tête ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 74px; padding: 0 var(--cadre);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.top.defile { background: color-mix(in srgb, var(--papier) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--trait); }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 22px/1 var(--titre); letter-spacing: -.04em; }
.marque svg { color: var(--ink); }
#menu ul { display: flex; gap: clamp(16px, 2.6vw, 38px); }
#menu a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--doux); transition: color .25s; position: relative; padding: 6px 0; }
#menu a:hover, #menu a:focus-visible { color: var(--ink); }
#menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--bleu); transform: scaleX(0); transition: transform .35s var(--ease); }
#menu a:hover::after { transform: scaleX(1); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top .btn { padding: 11px 20px; }
.theme { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--surface); cursor: pointer; display: grid; place-items: center; transition: transform .4s var(--ease), border-color .3s; }
.theme:hover { transform: rotate(18deg); border-color: var(--ink); }
.theme .i-soleil { display: none; }
:root[data-theme="sombre"] .theme .i-soleil { display: block; }
:root[data-theme="sombre"] .theme .i-lune { display: none; }
.burger { display: none; }

/* ============ HERO ============ */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 70px); align-items: center; min-height: 100svh; padding-top: 120px; padding-bottom: 70px; isolation: isolate; }
.hero-orbites { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--ink); opacity: .12; animation: respire 9s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.04) rotate(.6deg); } }
.titre { font: 600 clamp(38px, 5.2vw, 80px)/1.04 var(--titre); letter-spacing: -.04em; }
.ligne { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.ligne > span { display: inline-block; animation: leve 1.1s var(--ease) both; }
.ligne:nth-child(2) > span { animation-delay: .1s; }
.ligne:nth-child(3) > span { animation-delay: .2s; color: var(--bleu); }
@keyframes leve { from { transform: translateY(112%); } }
.chapeau { margin-top: 26px; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--doux); text-wrap: pretty; animation: apparait 1s .4s both; }
.mail { margin-top: 30px; display: flex; gap: 6px; padding: 6px; max-width: 520px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--trait); box-shadow: 0 14px 40px -24px rgba(21, 33, 110, .5); animation: apparait 1s .55s both; transition: border-color .3s, box-shadow .3s; }
.mail:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(45, 75, 255, .16); }
.mail input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 18px; font-weight: 600; outline: none; }
.mail input::placeholder { color: var(--doux); opacity: .8; }
.mail-note { margin-top: 14px; font-size: 14px; color: var(--doux); animation: apparait 1s .7s both; }
.mail-note.err { color: var(--corail); font-weight: 700; }
@keyframes apparait { from { opacity: 0; transform: translateY(16px); } }

/* maquette */
.maquette { position: relative; perspective: 1400px; }
.fenetre {
  position: relative; z-index: 2; border-radius: 24px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); overflow: hidden;
  transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform .5s var(--ease); animation: apparait 1.2s .3s both;
}
.f-barre { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--trait); font-size: 13px; font-weight: 700; }
.f-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--trait); }
.f-barre i:nth-child(1) { background: #ff6b57; } .f-barre i:nth-child(2) { background: #ffd23f; } .f-barre i:nth-child(3) { background: #3ddc97; }
.f-barre span { margin-left: 10px; }
.f-compteur { margin-left: auto; font-weight: 600; color: var(--doux); }
.f-compteur em { font: 600 13px/1 var(--titre); font-style: normal; color: var(--bleu); margin-left: 4px; font-variant-numeric: tabular-nums; }
.f-corps { display: grid; grid-template-columns: 24% 1fr; gap: 12px; padding: 14px 14px 18px; }
.f-idees h4, .f-col h4 { font-size: 12px; font-weight: 800; color: var(--doux); margin-bottom: 8px; }
.f-idees { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 16px; background: var(--ciel); }
.f-idees h4 { margin-bottom: 0; }
.f-semaine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.f-col { min-height: 210px; padding: 8px 6px; border-radius: 14px; border: 1.5px dashed var(--trait); display: flex; flex-direction: column; gap: 6px; align-content: start; transition: background .3s, border-color .3s; }
.f-col.cible { background: var(--ciel); border-color: var(--bleu); }
.mc { position: relative; padding: 8px 8px 7px; border-radius: 10px; font-size: 11.5px; font-weight: 700; line-height: 1.25; background: color-mix(in srgb, var(--tc) 16%, var(--surface)); border-left: 3px solid var(--tc); box-shadow: 0 2px 6px -3px rgba(14, 19, 48, .3); }
.mc small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: var(--doux); }
.mc.leve { z-index: 9; box-shadow: 0 16px 28px -10px rgba(14, 19, 48, .45); transition: transform 1s var(--ease), box-shadow .3s; }
.f-toast { position: absolute; z-index: 6; right: 14px; bottom: 12px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--papier); font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); }
.f-toast.on { opacity: 1; transform: none; }
.curseur { position: absolute; z-index: 8; left: 0; top: 0; pointer-events: none; opacity: 0; transition: transform 1s var(--ease), opacity .4s; filter: drop-shadow(0 6px 8px rgba(14, 19, 48, .3)); }
.curseur.on { opacity: 1; }
.curseur.serre { transition: transform 1s var(--ease), opacity .4s; }

.anneau { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed rgba(45, 75, 255, .4); translate: -50% -50%; animation: tourne linear infinite; pointer-events: none; }
.a1 { width: 112%; aspect-ratio: 1; animation-duration: 46s; }
.a2 { width: 90%; aspect-ratio: 1; animation-duration: 34s; animation-direction: reverse; border-style: solid; border-color: rgba(45, 75, 255, .16); }
.a3 { width: 130%; aspect-ratio: 1; animation-duration: 64s; border-color: rgba(45, 75, 255, .22); }
@keyframes tourne { to { rotate: 360deg; } }
.puce { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 7px 14px; border-radius: 999px; font: 700 12px/1 var(--texte); font-style: normal; color: #0e1330; background: var(--tc); box-shadow: 0 8px 20px -8px var(--tc); animation: contre linear infinite; }
.a1 .puce { animation-duration: 46s; } .a2 .puce { animation-duration: 34s; animation-direction: reverse; } .a3 .puce { animation-duration: 64s; }
@keyframes contre { to { rotate: -360deg; } }
.p-video { --tc: var(--corail); } .p-photo { --tc: var(--menthe); top: 100%; } .p-direct { --tc: var(--soleil); }

/* ============ CHIFFRES ============ */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 34px; padding-bottom: 34px; border-block: 1px solid var(--trait); }
.chiffre { display: grid; gap: 6px; }
.chiffre strong { font: 600 clamp(28px, 3.6vw, 50px)/1 var(--titre); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.chiffre span { font-size: 15px; color: var(--doux); max-width: 22ch; }

/* ============ DÉMO ============ */
.demo-tete { display: grid; gap: 18px; margin-bottom: 36px; max-width: 760px; }
.plan { padding: clamp(16px, 2.4vw, 30px); border-radius: 32px; background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.plan-barre { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 520px; }
.ajout input[type="text"] { flex: 1 1 220px; min-width: 0; padding: 13px 18px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--papier); font-weight: 600; transition: border-color .3s, box-shadow .3s; }
.ajout input[type="text"]:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(45, 75, 255, .16); }
.types { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--papier); border: 1.5px solid var(--trait); }
.types input { position: absolute; opacity: 0; pointer-events: none; }
.types label { cursor: pointer; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--doux); transition: background .3s, color .3s; }
.types input:checked + label { background: var(--tc); color: #0e1330; }
.types input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 2px; }
.erreur { margin-bottom: 12px; color: var(--corail); font-weight: 700; font-size: 15px; }
.plan-corps { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.plan-grille { display: grid; gap: 12px; min-width: 0; }
.boite { padding: 12px; border-radius: 20px; background: var(--ciel); min-height: 92px; transition: outline-color .2s; outline: 2px dashed transparent; outline-offset: -2px; }
.boite.survol { outline-color: var(--bleu); }
.boite h4, .jour h4 { font-size: 13px; font-weight: 800; color: var(--doux); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.boite-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.vide { font-size: 13px; color: var(--doux); font-weight: 600; padding: 6px 2px; }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.jour { min-height: 178px; padding: 10px 8px; border-radius: 16px; border: 1.5px dashed var(--trait); transition: background .25s, border-color .25s; }
.jour.survol { background: var(--ciel); border-color: var(--bleu); }
.jour-liste { display: grid; gap: 7px; align-content: start; }
.top-jour { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--soleil); color: #0e1330; font-size: 10px; font-weight: 800; }
.cp {
  position: relative; display: block; width: 100%; padding: 9px 10px 8px; border-radius: 12px; text-align: left; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  font-size: 13px; font-weight: 700; line-height: 1.25; background: color-mix(in srgb, var(--tc) 17%, var(--surface)); border: 0; border-left: 4px solid var(--tc); color: var(--ink);
  box-shadow: 0 2px 8px -4px rgba(14, 19, 48, .4); transition: transform .3s var(--ease), box-shadow .3s;
}
.boite .cp { width: auto; max-width: 240px; }
.cp:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(14, 19, 48, .5); }
.cp.arrive { animation: pop .5s var(--ease); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.cp.fantome { opacity: .3; }
.cp small { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--doux); }
.cp-fin { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--doux); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; display: grid; place-items: center; }
.cp:hover .cp-fin, .cp:focus-within .cp-fin, .cp.ouverte .cp-fin { opacity: 1; }
.cp-fin:hover { background: var(--trait); color: var(--ink); }
.cp-jours { display: none; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cp.ouverte .cp-jours { display: flex; }
.cp-jours button { padding: 4px 8px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--surface); font-size: 11px; font-weight: 800; cursor: pointer; color: var(--ink); }
.cp-jours button:hover, .cp-jours button[aria-current="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.ghost { position: fixed; z-index: 300; pointer-events: none; left: 0; top: 0; rotate: 3deg; box-shadow: 0 24px 40px -14px rgba(14, 19, 48, .55); opacity: .96; }
.plan-cote { display: grid; gap: 14px; }
.cote-carte { padding: 18px 20px; border-radius: 22px; background: var(--papier); border: 1px solid var(--trait); }
.cote-lib { font-size: 13px; font-weight: 800; color: var(--doux); }
.cote-num { font: 600 40px/1.1 var(--titre); letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 4px 0 14px; }
.barres { display: flex; align-items: end; gap: 5px; height: 54px; }
.barres span { flex: 1; min-height: 4px; height: var(--h, 4px); border-radius: 5px 5px 2px 2px; background: var(--bleu); opacity: .85; transition: height .6s var(--ease); }
.cote-reg { display: flex; align-items: center; gap: 16px; }
#p-anneau { transition: stroke-dashoffset .8s var(--ease); }
.cote-reg-txt { font: 700 17px/1.2 var(--texte); }
.cote-conseil { padding: 16px 18px; border-radius: 18px; background: var(--ciel); font-size: 15px; font-weight: 600; text-wrap: pretty; }
.plan-aide { margin-top: 16px; font-size: 14px; color: var(--doux); }

/* ============ FONCTIONS ============ */
.fonctions-tete { display: grid; gap: 18px; max-width: 700px; margin-bottom: 40px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tuile { position: relative; grid-column: span 2; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--trait); overflow: hidden; isolation: isolate; display: grid; grid-template-rows: 1fr auto auto; align-content: stretch; gap: 0; }
.tuile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 75, 255, .13), transparent 60%); }
.tuile:hover::before { opacity: 1; }
.t-cal { grid-column: span 4; } .t-heure, .t-stats, .t-equipe, .t-auto { grid-column: span 3; }
.tuile h3 { margin-bottom: 8px; }
.tuile p { color: var(--doux); font-size: 16px; max-width: 44ch; text-wrap: pretty; }
.tuile-vis { min-height: 160px; display: grid; align-content: center; margin-bottom: 22px; }
.minimois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 520px; }
.minimois span { aspect-ratio: 1.15; border-radius: 9px; background: var(--papier); display: grid; place-items: center; position: relative; font-size: 11px; font-weight: 700; color: var(--doux); }
.minimois span i { position: absolute; bottom: 5px; left: 50%; width: 6px; height: 6px; border-radius: 50%; translate: -50% 0; background: var(--tc); }
.minimois span i + i { translate: 4px 0; }
.minimois span.auj { background: var(--bleu); color: #fff; animation: pouls 2.4s infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 10px rgba(45, 75, 255, 0); } 0% { box-shadow: 0 0 0 0 rgba(45, 75, 255, .45); } }
.notes { position: relative; height: 150px; }
.note { position: absolute; left: 8%; padding: 14px 18px; border-radius: 14px; font-weight: 800; font-size: 15px; background: color-mix(in srgb, var(--tc) 28%, var(--surface)); box-shadow: 0 10px 22px -12px rgba(14, 19, 48, .5); transition: transform .6s var(--ease); }
.n1 { top: 6px; rotate: -6deg; } .n2 { top: 44px; left: 24%; rotate: 4deg; } .n3 { top: 84px; left: 10%; rotate: -2deg; }
.t-idees:hover .n1 { transform: translate(-6px, -10px); } .t-idees:hover .n2 { transform: translate(14px, 0); } .t-idees:hover .n3 { transform: translate(-4px, 12px); }
.chaleur { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 360px; }
.chaleur i { aspect-ratio: 1.5; border-radius: 7px; background: var(--bleu); opacity: var(--o); transition: transform .25s var(--ease), outline-color .2s; outline: 2px solid transparent; cursor: default; }
.chaleur i:hover, .chaleur i.meilleur { transform: scale(1.14); outline-color: var(--soleil); }
.chaleur i.meilleur { animation: pouls2 2s infinite; }
@keyframes pouls2 { 50% { outline-color: transparent; } }
.chaleur-lib { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--bleu); min-height: 1.5em; }
.mini-barres { display: flex; align-items: end; gap: 10px; height: 150px; max-width: 360px; }
.mini-barres i { flex: 1; height: 0; border-radius: 9px 9px 4px 4px; background: linear-gradient(180deg, var(--bleu), color-mix(in srgb, var(--bleu) 45%, transparent)); transition: height 1s var(--ease); transition-delay: calc(var(--k) * 70ms); }
.tuile.vu .mini-barres i { height: var(--h); }
.avatars { display: flex; margin-bottom: 14px; }
.avatars span { width: 46px; height: 46px; margin-right: -10px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--c, var(--bleu)); border: 3px solid var(--surface); }
.avatars .plus { background: var(--ciel); color: var(--bleu); }
.bulle-com { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--ciel); font-size: 14px; font-weight: 600; max-width: 330px; }
.points { display: inline-flex; gap: 4px; margin-left: 4px; }
.points i { width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); animation: saute 1.2s infinite; }
.points i:nth-child(2) { animation-delay: .15s; } .points i:nth-child(3) { animation-delay: .3s; }
@keyframes saute { 30% { transform: translateY(-5px); } 60% { transform: none; } }
.inter { width: 78px; height: 44px; border-radius: 999px; border: 0; background: var(--trait); position: relative; cursor: pointer; transition: background .3s; }
.inter i { position: absolute; left: 4px; top: 4px; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(14, 19, 48, .3); transition: transform .4s var(--ease); }
.inter[aria-checked="true"] { background: var(--bleu); }
.inter[aria-checked="true"] i { transform: translateX(34px); }
.auto-etat { margin-top: 14px; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.auto-etat.ok { color: var(--menthe); }

/* ============ ÉTAPES ============ */
.etapes { background: var(--ciel); }
.etapes h2 { margin-bottom: 44px; max-width: 18ch; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.trois::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; border-top: 2px dashed color-mix(in srgb, var(--bleu) 45%, transparent); z-index: 0; }
.trois li { position: relative; z-index: 1; display: grid; gap: 10px; align-content: start; }
.num { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 600 22px/1 var(--titre); background: var(--bleu); color: #fff; box-shadow: 0 0 0 8px var(--ciel); margin-bottom: 8px; }
.trois h3 { font: 600 28px/1.1 var(--titre); letter-spacing: -.04em; }
.trois p { color: var(--doux); max-width: 32ch; text-wrap: pretty; }

/* ============ STATS ============ */
.stats-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.onglets { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--trait); }
.onglets button { padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; font-weight: 700; font-size: 14px; color: var(--doux); cursor: pointer; transition: background .3s, color .3s; }
.onglets button[aria-selected="true"] { background: var(--ink); color: var(--papier); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.kpi { padding: 20px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--trait); display: grid; gap: 4px; }
.kpi p { font-size: 14px; font-weight: 700; color: var(--doux); }
.kpi strong { font: 600 clamp(26px, 3vw, 38px)/1.1 var(--titre); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.delta { font-size: 14px; font-weight: 800; color: var(--menthe); }
.delta.bas { color: var(--corail); }
.graphe { position: relative; padding: 24px 24px 40px; border-radius: 28px; background: var(--surface); border: 1px solid var(--trait); cursor: crosshair; touch-action: pan-y; }
.graphe svg { width: 100%; height: clamp(200px, 30vw, 340px); overflow: visible; }
.g-ligne { stroke: var(--trait); }
.g-point { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--bleu); translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: 0 0 0 6px rgba(45, 75, 255, .18); }
.g-bulle { position: absolute; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--papier); font-size: 13px; font-weight: 700; white-space: nowrap; translate: -50% calc(-100% - 18px); pointer-events: none; opacity: 0; transition: opacity .2s; }
.graphe.actif .g-point, .graphe.actif .g-bulle { opacity: 1; }
.g-axe { position: absolute; left: 24px; right: 24px; bottom: 14px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--doux); }

/* ============ AVIS ============ */
.avis { padding-left: 0; padding-right: 0; overflow: hidden; }
.avis h2 { padding: 0 var(--cadre); margin-bottom: 36px; max-width: 18ch; box-sizing: content-box; }
.avis-piste { display: flex; gap: 18px; width: max-content; animation: defile 70s linear infinite; padding-left: 18px; }
.avis-piste-cadre:hover .avis-piste { animation-play-state: paused; }
@keyframes defile { to { translate: -50% 0; } }
.avis-c { width: min(340px, 78vw); padding: 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--trait); display: grid; gap: 16px; align-content: space-between; }
.avis-c p { font-weight: 600; text-wrap: pretty; }
.avis-qui { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.avis-qui b { display: block; font-size: 15px; }
.avis-qui span:last-child { color: var(--doux); }
.avis-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--c); flex: none; }
.avis-note { padding: 22px var(--cadre) 0; font-size: 14px; color: var(--doux); }

/* ============ TARIFS ============ */
.tarifs-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 40px; }
.tarifs-tete h2 { max-width: 16ch; }
.bascule { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--trait); }
.bascule button { padding: 10px 20px; border-radius: 999px; border: 0; background: transparent; font-weight: 700; font-size: 14px; color: var(--doux); cursor: pointer; transition: background .3s, color .3s; }
.bascule button[aria-pressed="true"] { background: var(--ink); color: var(--papier); }
.bascule em { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--soleil); color: #0e1330; margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan-t { position: relative; padding: 32px 30px; border-radius: 30px; background: var(--surface); border: 1px solid var(--trait); display: grid; gap: 16px; align-content: start; }
.plan-t.vedette { background: var(--bleu); color: #fff; border-color: transparent; box-shadow: 0 40px 70px -34px rgba(45, 75, 255, .8); }
.plan-d { color: var(--doux); font-size: 15px; margin-top: -8px; }
.vedette .plan-d, .vedette li::before { color: rgba(255, 255, 255, .8); }
.ruban { position: absolute; top: -13px; left: 30px; padding: 5px 14px; border-radius: 999px; background: var(--soleil); color: #0e1330; font-size: 12px; font-weight: 800; }
.prix { font: 500 17px/1 var(--texte); display: flex; align-items: baseline; gap: 6px; }
.prix strong { font: 600 56px/1 var(--titre); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.prix span { font-size: 15px; opacity: .7; margin-left: 4px; }
.plan-t ul { display: grid; gap: 10px; margin: 6px 0 10px; }
.plan-t li { display: flex; gap: 10px; font-size: 16px; font-weight: 600; }
.plan-t li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--menthe) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.500 10.500l3 3 6-6.500' fill='none' stroke='%230e1330' stroke-width='2.400' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat; }
.plan-t .btn { width: 100%; margin-top: auto; }
.vedette .btn-bleu { background: #fff; color: var(--bleu); }
.vedette .btn-bleu:hover { background: var(--soleil); color: #0e1330; }
.tarifs-note { margin-top: 24px; text-align: center; font-size: 15px; color: var(--doux); }

/* ============ FAQ ============ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.faq h2 { position: sticky; top: 110px; max-width: 12ch; }
.faq-q { border-bottom: 1px solid var(--trait); }
.faq-q:first-child { border-top: 1px solid var(--trait); }
.faq-q h3 { font: 700 19px/1.3 var(--texte); }
.faq-q button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.faq-q button i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--trait); transition: background .3s, border-color .3s, rotate .4s var(--ease); }
.faq-q button i::before, .faq-q button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: background .3s; }
.faq-q button i::after { rotate: 90deg; }
.faq-q button:hover i { border-color: var(--ink); }
.faq-q button[aria-expanded="true"] i { background: var(--bleu); border-color: var(--bleu); rotate: 45deg; }
.faq-q button[aria-expanded="true"] i::before, .faq-q button[aria-expanded="true"] i::after { background: #fff; }
.faq-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-q.ouvert .faq-r { grid-template-rows: 1fr; }
.faq-r > div { overflow: hidden; }
.faq-r p { padding: 0 54px 24px 0; color: var(--doux); text-wrap: pretty; }

/* ============ ESSAI ============ */
.essai { position: relative; overflow: hidden; background: var(--bleu); color: #fff; text-align: center; padding-top: clamp(90px, 14vh, 170px); padding-bottom: clamp(90px, 14vh, 170px); isolation: isolate; }
:root[data-theme="sombre"] .essai { background: #2c3fd8; }
.essai-orbites { position: absolute; left: 50%; top: 50%; width: min(1100px, 150vw); translate: -50% -50%; z-index: -1; color: rgba(255, 255, 255, .28); }
.tourne-lent { transform-origin: 400px 400px; animation: tourne-svg 38s linear infinite; }
.tourne-inv { transform-origin: 400px 400px; animation: tourne-svg 52s linear infinite reverse; }
@keyframes tourne-svg { to { transform: rotate(360deg); } }
.essai-corps { display: grid; gap: 20px; justify-items: center; max-width: 720px; margin: 0 auto; }
.essai h2 { max-width: 16ch; }
.essai p { color: rgba(255, 255, 255, .86); font-size: 19px; }
.mail-clair { background: #fff; border-color: transparent; color: #0e1330; width: min(520px, 100%); margin-top: 6px; }
.mail-clair input::placeholder { color: #566083; }
.essai .mail-note { color: #fff; font-weight: 800; min-height: 1.6em; }

/* ============ PIED ============ */
.pied { padding: 40px var(--cadre) 34px; display: grid; gap: 26px; border-top: 1px solid var(--trait); }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.pied-haut ul { display: flex; flex-wrap: wrap; gap: 24px; font-weight: 700; font-size: 15px; }
.pied-haut a { text-decoration: none; color: var(--doux); } .pied-haut a:hover { color: var(--ink); }
.pied-haut .marque { color: var(--ink); }
.pied > p { font-size: 14px; color: var(--doux); }
.toast { position: fixed; z-index: 250; left: 50%; bottom: 24px; translate: -50% 30px; padding: 14px 22px; border-radius: 22px; background: var(--ink); color: var(--papier); font-weight: 700; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .3s, translate .5s var(--ease); max-width: calc(100% - 32px); text-align: center; box-shadow: 0 20px 40px -16px rgba(14, 19, 48, .6); }
.toast.on { opacity: 1; translate: -50% 0; }

/* ============ TABLETTE & MOBILE ============ */
@media (max-width: 1060px) {
  .plan-corps { grid-template-columns: 1fr; }
  .plan-cote { grid-template-columns: repeat(2, 1fr); }
  .cote-conseil { grid-column: 1 / -1; }
  .semaine { grid-template-columns: 1fr; }
  .jour { min-height: 0; display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; }
  .jour h4 { margin: 8px 0 0; }
  .jour-liste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 108px; }
  .maquette { max-width: 640px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr; }
  .tuile, .t-cal, .t-heure, .t-stats, .t-equipe, .t-auto { grid-column: auto; }
  .trois { grid-template-columns: 1fr; }
  .trois::before { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan-t.vedette { order: -1; }
  .faq { grid-template-columns: 1fr; }
  .faq h2 { position: static; max-width: none; }
  #menu { position: fixed; inset: 0; z-index: -1; display: grid; align-content: center; padding: 0 var(--gut); background: var(--papier); clip-path: circle(0 at calc(100% - 40px) 37px); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
  #menu.ouvert { clip-path: circle(150% at calc(100% - 40px) 37px); visibility: visible; transition: clip-path .7s var(--ease); }
  #menu ul { flex-direction: column; gap: 6px; }
  #menu a { font: 600 clamp(32px, 9vw, 46px)/1.2 var(--titre); letter-spacing: -.04em; color: var(--ink); }
  #menu a::after { display: none; }
  .burger { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--surface); cursor: pointer; padding: 0; }
  .burger i { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .4s var(--ease); }
  .burger[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
  .top-actions .btn { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .mail { flex-direction: column; border-radius: 24px; padding: 8px; }
  .mail input { padding: 14px 14px; }
  .mail .btn { width: 100%; }
  .f-corps { grid-template-columns: 1fr; }
  .f-idees { display: flex; flex-wrap: wrap; }
  .f-idees h4 { width: 100%; }
  .f-col { min-height: 150px; }
  .plan-cote { grid-template-columns: 1fr; }
  .jour { grid-template-columns: 56px 1fr; }
  .jour-liste { grid-template-columns: 1fr 1fr; }
  .prix strong { font-size: 48px; }
  .faq-r p { padding-right: 0; }
}

/* ============ Mouvement réduit ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mot > span { transform: none; }
  .avis-piste { animation: none; overflow-x: auto; width: auto; }
  .avis-piste-cadre { overflow-x: auto; }
}

/* ============ MISE EN PAGE v2 : barre pilule flottante + hero centré façon application ============ */
.top {
  inset: 14px 0 auto 0; margin: 0 auto; width: min(960px, calc(100% - 24px)); height: 62px; padding: 0 9px 0 22px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--trait); box-shadow: 0 18px 44px -22px rgba(21, 33, 110, .5);
}
.top.defile { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 44px -18px rgba(21, 33, 110, .6); }
.marque { font-size: 19px; }
#menu ul { gap: clamp(12px, 2vw, 30px); }
.top .btn { padding: 11px 20px; font-size: 14px; }
.hero { display: block; text-align: center; padding-top: 150px; min-height: 0; }
.hero-texte { max-width: 880px; margin: 0 auto; }
.hero .titre { font-size: clamp(40px, 6.4vw, 92px); }
.hero .chapeau { margin-left: auto; margin-right: auto; max-width: 52ch; }
.hero .mail { margin-left: auto; margin-right: auto; text-align: left; }
.hero .maquette { max-width: 1080px; margin: clamp(40px, 7vh, 72px) auto 0; text-align: left; }
.hero .fenetre { --ry: 0deg; --rx: 0deg; box-shadow: 0 50px 90px -40px rgba(21, 33, 110, .55); }
@media (max-width: 900px) {
  .top { padding: 0 9px 0 18px; }
  #menu { clip-path: circle(0 at calc(100% - 36px) 45px); }
  #menu.ouvert { clip-path: circle(150% at calc(100% - 36px) 45px); }
  .hero { padding-top: 122px; }
}
@media (max-width: 560px) {
  .hero .mail { text-align: left; }
}
.hero .anneau { display: none; }