/* ARPANTA · feuille de style du site et de l'espace utilisateur (charte validée le 27/09/2026) */
:root {
  --nuit: #0B0572; --clair: #CFEAFF; --vif: #3542E8; --gris: #5C5A7A; --doux: #F5F6FB; --blanc: #FFFFFF;
  --trait: .5px; --r: 22px; --ease: cubic-bezier(.2, .8, .2, 1);
  --w: min(1180px, calc(100vw - 48px));
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font-family: Montserrat, system-ui, sans-serif; font-weight: 500; color: var(--nuit); background: var(--blanc); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden }
img, svg { display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
.w { width: var(--w); margin: 0 auto }
.sb { font-weight: 600 }
.gris { color: var(--gris) }
h1, h2, h3 { font-weight: 600; letter-spacing: -.03em; line-height: 1.04 }
h1 { font-size: clamp(44px, 7.4vw, 104px) }
h2 { font-size: clamp(34px, 4.8vw, 64px) }
h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em }
.chapo { font-size: clamp(18px, 1.6vw, 22px); color: var(--gris); max-width: 720px; line-height: 1.45 }

/* ---------------------------------------------------------------- navigation */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .4s var(--ease), box-shadow .4s var(--ease) }
.nav.pleine { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 var(--trait) 0 rgba(11, 5, 114, .12) }
.nav .w { display: flex; align-items: center; height: 68px; gap: 32px }
.nav .logo img { height: 30px; width: auto }
.nav .liens { display: flex; gap: 28px; margin-left: auto; font-size: 15px }
.nav .liens a { opacity: .78; transition: opacity .2s }
.nav .liens a:hover { opacity: 1 }
.bouton { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 22px; background: var(--nuit); color: #fff; font-weight: 600; font-size: 15px; transition: transform .25s var(--ease), background .25s }
.bouton:hover { background: var(--vif); transform: translateY(-1px) }
.bouton.clair { background: var(--clair); color: var(--nuit) }
.bouton.clair:hover { background: #B3D9FA }
.bouton svg { width: 16px; height: 16px }
@media (max-width: 820px) { .nav .liens { display: none } .nav .w { justify-content: space-between } }

/* ---------------------------------------------------------------- héros */
.heros { min-height: 100svh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(20px, 4vh, 44px); overflow: hidden; padding: 96px 24px 72px;
  background: radial-gradient(120% 90% at 50% 38%, var(--clair) 0%, #E9F5FF 38%, var(--blanc) 72%) }
.heros .scene { position: relative; width: min(460px, 70vw, 48vh); aspect-ratio: 1; flex: none }
.heros .cadran { position: absolute; inset: 0; animation: tourne 90s linear infinite }
.heros .signe { position: absolute; inset: 21% }
.heros .signe path { transition: transform 1.4s var(--ease), opacity 1.2s var(--ease) }
.heros .signe:not(.pret) .soleil { transform: translateY(26px); opacity: 0 }
.heros .signe:not(.pret) .la { transform: translateX(-60px); opacity: 0 }
.heros .signe:not(.pret) .lb { transform: translateX(-90px); opacity: 0 }
.heros .signe .la { transition-delay: .25s } .heros .signe .lb { transition-delay: .45s }
.heros .texte { text-align: center; max-width: 1000px }
.heros .texte h1 { font-size: clamp(38px, 6vw, 86px) }
.heros .texte p { margin: 18px auto 0; max-width: 680px }
.heros .fleche { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; width: 22px; opacity: .5; animation: flotte 2.4s var(--ease) infinite }
@keyframes tourne { to { transform: rotate(360deg) } }
@keyframes flotte { 50% { transform: translateY(6px) } }

/* ---------------------------------------------------------------- sections */
section.bloc { padding: clamp(96px, 14vh, 160px) 0 }
.surtitre { font-size: 15px; font-weight: 600; color: var(--vif); margin-bottom: 18px; display: flex; align-items: center; gap: 10px }
.surtitre svg { width: 18px; height: auto }
.apparait { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease) }
.apparait.vu { opacity: 1; transform: none }
.d1 { transition-delay: .1s } .d2 { transition-delay: .2s } .d3 { transition-delay: .3s }

/* écosystème */
.eco { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center }
.roue { position: relative; aspect-ratio: 1; width: min(540px, 88vw); margin: 0 auto }
.roue .centre { position: absolute; inset: 36%; }
.roue .centre img { width: 100%; filter: drop-shadow(0 18px 40px rgba(11, 5, 114, .22)) }
.roue button.ico { position: absolute; width: 17%; aspect-ratio: 1; translate: -50% -50%; transition: transform .35s var(--ease) }
.roue button.ico img { width: 100% }
.roue button.ico span { position: absolute; left: 50%; top: 104%; translate: -50% 0; font-size: 12px; font-weight: 600; white-space: nowrap }
.roue button.ico span i { font-style: normal; font-weight: 400 }
.roue button.ico:hover, .roue button.ico.actif { transform: scale(1.16) }
.fiche { min-height: 220px }
.fiche .etape { color: var(--vif); font-weight: 600 }
.fiche h3 { font-size: clamp(34px, 3.6vw, 48px); margin: 6px 0 14px }
.fiche h3 span { font-weight: 400 }
.fiche p { font-size: 19px; color: var(--gris); max-width: 480px }
@media (max-width: 900px) { .eco { grid-template-columns: 1fr } }

/* appel à l'espace */
.appel { text-align: center; background: linear-gradient(180deg, var(--blanc), var(--clair)) }
.appel .bouton { margin-top: 36px; height: 54px; padding: 0 30px; border-radius: 27px; font-size: 17px }

/* pied */
.pied { padding: 64px 0 48px; background: var(--clair) }
.pied .w { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between }
.pied img.base { height: 44px; width: auto }
.pied .contact { text-align: right; font-size: 15px }
.pied .contact a { color: var(--gris) }
.pied .base { font-size: 15px }
.chargement { display: flex; gap: 6px; justify-content: center }
.chargement i { display: block; overflow: hidden; position: relative }
@keyframes leve2 { 0% { transform: translateY(70%) } 60%, 100% { transform: translateY(0) } }

/* ================================================================ ESPACE UTILISATEUR */
.espace { background: var(--doux); min-height: 100svh }
.barre { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 var(--trait) 0 rgba(11, 5, 114, .12) }
.barre .w { display: flex; align-items: center; gap: 18px; height: 64px }
.barre img.logo { height: 26px; width: auto }
.barre .fil { font-size: 15px; color: var(--gris); display: flex; gap: 10px; align-items: center }
.barre .fil b { color: var(--nuit); font-weight: 600 }
.barre .moi { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--gris) }
.barre .moi button { color: var(--nuit); font-weight: 600 }

/* connexion */
.connexion { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr }
.connexion .gauche { background: var(--nuit); color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px }
.connexion .gauche img { height: 30px; width: auto }
.connexion .gauche h1 { font-size: clamp(36px, 4vw, 56px); max-width: 460px; position: relative }
.connexion .gauche .cadran { position: absolute; width: 130%; right: -45%; top: 50%; translate: 0 -50%; opacity: .9; animation: tourne 120s linear infinite }
.connexion .droite { display: grid; place-items: center; padding: 48px 24px }
.formulaire { width: min(400px, 100%) }
.formulaire h2 { font-size: 36px; margin-bottom: 8px }
.formulaire label { display: block; font-size: 14px; color: var(--gris); margin: 22px 0 8px }
.formulaire input { width: 100%; height: 52px; border-radius: 14px; border: 1px solid rgba(11, 5, 114, .16); padding: 0 16px; font: inherit; color: var(--nuit); background: #fff; transition: border-color .2s, box-shadow .2s }
.formulaire input:focus { outline: none; border-color: var(--vif); box-shadow: 0 0 0 4px rgba(53, 66, 232, .14) }
.formulaire .bouton { width: 100%; justify-content: center; height: 52px; margin-top: 28px; border-radius: 14px; font-size: 16px }
.formulaire .erreur { color: #B42318; font-size: 14px; margin-top: 14px; min-height: 20px }
.formulaire .note { font-size: 13px; color: var(--gris); margin-top: 26px }
@media (max-width: 860px) { .connexion { grid-template-columns: 1fr } .connexion .gauche { min-height: 260px } }

/* tableau des applications */
.accueil { padding: 56px 0 96px }
.accueil h1 { font-size: clamp(34px, 4vw, 52px) }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 40px }
.app { background: #fff; border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; min-height: 230px; position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 1px 2px rgba(11, 5, 114, .05) }
a.app:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(11, 5, 114, .12) }
.app img { width: 52px; height: 52px }
.app h3 { margin-top: 20px; font-size: 24px }
.app h3 span { font-weight: 400 }
.app p { color: var(--gris); font-size: 15px; margin-top: 4px; flex: 1 }
.app .etat { margin-top: 18px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px }
.app .etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--ton) }
.app.inactive { background: transparent; box-shadow: inset 0 0 0 1px rgba(11, 5, 114, .1) }
.app.inactive img { opacity: .45 }

/* liste des villes */
.outils { display: flex; gap: 12px; align-items: center; margin-top: 32px; flex-wrap: wrap }
.recherche { flex: 1; min-width: 240px; height: 48px; border-radius: 24px; border: 1px solid rgba(11, 5, 114, .14); padding: 0 20px; font: inherit; background: #fff; color: var(--nuit) }
.recherche:focus { outline: none; border-color: var(--vif) }
.dep { margin-top: 40px }
.dep h2 { font-size: 15px; letter-spacing: 0; color: var(--gris); font-weight: 600; margin-bottom: 14px }
.villes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px }
.ville { background: #fff; border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; transition: box-shadow .3s var(--ease), transform .3s var(--ease) }
.ville:hover { box-shadow: 0 14px 36px rgba(11, 5, 114, .1); transform: translateY(-2px) }
.ville .nom { font-size: 20px; font-weight: 600; letter-spacing: -.02em }
.ville .meta { font-size: 13px; color: var(--gris) }
.ville .actions { display: flex; gap: 8px; flex-wrap: wrap }
.ville .actions a { font-size: 14px; font-weight: 600; height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center; background: var(--doux) }
.ville .actions a.principal { background: var(--nuit); color: #fff }
.ville .actions a:hover { background: var(--vif); color: #fff }

/* visionneuse plein écran */
.vision { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff }
.vision .barre .w { width: calc(100vw - 32px) }
.vision iframe { flex: 1; width: 100%; border: 0 }
.vision .attente { position: absolute; inset: 64px 0 0; display: grid; place-items: center; background: #fff; transition: opacity .5s }
.vision .attente.fini { opacity: 0; pointer-events: none }
.vision .attente p { margin-top: 18px; color: var(--gris); font-size: 15px; text-align: center }

/* héros : bandeau bleu clair et signe libéré en fond, comme le teaser */
.heros .fond-signe { position: absolute; right: -12vw; top: -14vh; width: min(760px, 70vw); opacity: .75; pointer-events: none }
.heros .texte img.base { height: clamp(40px, 5vw, 56px); width: auto; margin: 0 auto 26px }

/* produit, éclaire, accélère */
.benefices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.benef { position: relative; overflow: hidden; border-radius: var(--r); background: var(--f); color: var(--tx); padding: 44px 34px 48px; text-align: center; min-height: 340px }
.benef .sg { position: absolute; right: -18%; bottom: -30%; width: 88%; pointer-events: none }
.benef .picto { position: relative; width: 44px; height: 44px; margin: 0 auto 22px }
.benef h3 { position: relative; font-size: 26px }
.benef p { position: relative; margin-top: 12px; font-size: 16px; line-height: 1.55; opacity: .92 }
@media (max-width: 900px) { .benefices { grid-template-columns: 1fr } }

/* neuf agents, un seul écosystème */
.ecosysteme { background: var(--blanc) }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px }
.fagent { position: relative; overflow: hidden; border-radius: var(--r); background: var(--c0); padding: 28px 28px 30px; min-height: 290px; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease) }
.fagent:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(11, 5, 114, .12) }
.fagent .sg { position: absolute; right: -10%; bottom: -16%; width: 46%; opacity: .55; pointer-events: none; transition: transform .8s var(--ease) }
.fagent:hover .sg { transform: translate(-6px, -6px) }
.fagent .tete { display: flex; gap: 14px; align-items: center; position: relative }
.fagent .tete img { width: 58px; height: 58px }
.fagent h3 { font-size: 26px }
.fagent h3 span { font-weight: 400 }
.fagent .role { font-size: 13px; color: var(--c3) }
.fagent p { position: relative; margin-top: 20px; font-size: 16px; line-height: 1.5; flex: 1 }
.fagent .pastille { position: relative; background: var(--c2); color: var(--nuit) }
.fagent .pastille.bientot { background: transparent; box-shadow: inset 0 0 0 1px var(--c3); color: var(--c3) }
@media (max-width: 1000px) { .grille { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px) { .grille { grid-template-columns: 1fr } .pied .contact { text-align: left } }
.pastille { align-self: flex-start; margin-top: 22px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 14px }
.fiche { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(11, 5, 114, .1) }
.ecosysteme .chapo { max-width: 780px }
.nav .court { display: none }
@media (max-width: 520px) { .nav .long { display: none } .nav .court { display: inline } .nav .bouton { padding: 0 16px } }