/* ==========================================================================
   Movelya — vitrine (refonte 2026)
   Feuille de style commune à toutes les pages de movelya.fr.
   Servie à l'adresse /landing/v2/movelya.css (dossier landing/ du dépôt crm_mobilite).
   ========================================================================== */

:root {
	--marine-900: #0B1B30;
	--marine-800: #10233D;
	--marine-700: #1B3A5F;
	--marine-600: #2A4A72;
	--sarcelle-700: #1E8F8D;
	--sarcelle-600: #229E9C;
	--sarcelle-500: #2AB3B1;
	--sarcelle-400: #3ECFCD;
	--sarcelle-100: #E2F5F5;
	--sarcelle-50: #F1FAFA;
	--ambre-500: #F5A623;
	--ambre-100: #FEF3DE;
	--corail-500: #FF6B6B;
	--corail-100: #FFEDED;
	--vert-500: #22C55E;
	--vert-100: #E4F8EC;
	--bleu-500: #3B82F6;
	--encre: #10233D;
	--encre-douce: #4A6572;
	--filet: #DCE8E9;
	--fond: #FFFFFF;
	--fond-doux: #F6FAFA;
	--rayon: 18px;
	--rayon-s: 10px;
	--ombre: 0 18px 40px -18px rgba(16, 35, 61, .28), 0 2px 6px rgba(16, 35, 61, .06);
	--ombre-forte: 0 40px 80px -30px rgba(11, 27, 48, .55);
	--largeur: 1180px;
	--police: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); color: var(--encre); background: var(--fond); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--sarcelle-700); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--encre); }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 850; }
h3 { font-size: 1.2rem; font-weight: 800; }
p { margin: 0 0 1em; }
.conteneur { width: min(var(--largeur), 100% - 40px); margin-inline: auto; }
.etroit { width: min(780px, 100% - 40px); margin-inline: auto; }
.lecteur-ecran { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 10px 16px; border-radius: 8px; }
.lien-evitement:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--ambre-500); outline-offset: 3px; border-radius: 6px; }

/* --- Boutons ---------------------------------------------------------------- */
.bouton { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background-color .2s, color .2s; font-family: inherit; line-height: 1.2; }
.bouton:hover { transform: translateY(-2px); }
.bouton--plein { background: var(--sarcelle-500); color: var(--marine-900); box-shadow: 0 12px 26px -10px rgba(42, 179, 177, .8); }
.bouton--plein:hover { background: var(--sarcelle-400); }
.bouton--ambre { background: var(--ambre-500); color: var(--marine-900); box-shadow: 0 12px 26px -10px rgba(245, 166, 35, .8); }
.bouton--contour { border-color: rgba(255, 255, 255, .45); color: #fff; }
.bouton--contour:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.bouton--contour-sombre { border-color: var(--marine-700); color: var(--marine-700); }
.bouton--contour-sombre:hover { background: var(--marine-700); color: #fff; }
.bouton svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* --- En-tête ---------------------------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(11, 27, 48, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.entete .conteneur { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.entete-logo img { display: block; height: 38px; width: auto; }
.entete-nav { display: flex; gap: 24px; margin-left: auto; }
.entete-nav a { color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.entete-nav a:hover, .entete-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--sarcelle-400); }
.entete .bouton { padding: 11px 20px; font-size: .92rem; }
.entete-menu { display: none; margin-left: auto; background: none; border: 2px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 12px; width: 46px; height: 46px; cursor: pointer; }
.entete-menu svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
	.entete-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--marine-800); padding: 10px 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
	.entete-nav a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 1.05rem; }
	.entete-nav.est-ouvert { display: flex; }
	.entete-menu { display: inline-grid; place-items: center; }
	.entete .bouton { display: none; }
}

/* --- Sections ------------------------------------------------------------------ */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--doux { background: var(--fond-doux); }
.section--sombre { background: radial-gradient(1200px 600px at 80% -10%, #1F4A73 0%, transparent 60%), var(--marine-800); color: rgba(255, 255, 255, .86); }
.section--sombre h2, .section--sombre h3 { color: #fff; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sarcelle-600); margin-bottom: 14px; }
.surtitre::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.section--sombre .surtitre { color: var(--sarcelle-400); }
.chapeau { font-size: 1.15rem; color: var(--encre-douce); max-width: 680px; }
.section--sombre .chapeau { color: rgba(255, 255, 255, .78); }
.entete-section { margin-bottom: 48px; }
.entete-section--centre { text-align: center; }
.entete-section--centre .chapeau { margin-inline: auto; }

/* --- Héros ---------------------------------------------------------------------- */
.heros { position: relative; overflow: hidden; color: #fff; background:
	radial-gradient(900px 520px at 85% 15%, rgba(42, 179, 177, .28), transparent 60%),
	radial-gradient(700px 500px at 0% 100%, rgba(59, 130, 246, .18), transparent 60%),
	var(--marine-900); padding: 64px 0 90px; }
.heros::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to bottom, #000 40%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.heros .conteneur { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.heros h1 { color: #fff; margin-bottom: 22px; }
.heros h1 em { font-style: normal; background: linear-gradient(90deg, var(--sarcelle-400), #8EF0EE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heros-pastille { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .9); margin-bottom: 24px; }
.heros-pastille b { width: 8px; height: 8px; border-radius: 50%; background: var(--vert-500); box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.heros p.chapeau { color: rgba(255, 255, 255, .8); font-size: 1.2rem; margin-bottom: 30px; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.heros-note { font-size: .9rem; color: rgba(255, 255, 255, .62); }
.heros-visuel { position: relative; }
@media (max-width: 960px) {
	.heros .conteneur { grid-template-columns: 1fr; }
	.heros { padding: 40px 0 70px; }
}

/* --- Chiffres ---------------------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: -48px; position: relative; z-index: 2; }
.chiffre { background: #fff; border-radius: var(--rayon); padding: 24px 22px; box-shadow: var(--ombre); border: 1px solid var(--filet); }
.chiffre b { display: block; font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 900; letter-spacing: -.03em; color: var(--marine-700); font-variant-numeric: tabular-nums; line-height: 1.1; }
.chiffre span { font-size: .94rem; color: var(--encre-douce); }
@media (max-width: 860px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Bande des références (injectée par index.php) ------------------------------------ */
.refs-band { padding: 34px 0 10px; }
.refs-band .container { width: min(var(--largeur), 100% - 40px); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.refs-band .lbl { width: 100%; text-align: center; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--encre-douce); margin-bottom: 4px; }
.refs-band .ref, .refs-band .logo-chip { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; background: var(--fond-doux); border: 1px solid var(--filet); font-weight: 700; color: var(--marine-700); }
.refs-band .logo-chip img { height: 40px; width: auto; display: block; }

/* --- Cartes ---------------------------------------------------------------------- */
.grille { display: grid; gap: 22px; }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grille--3, .grille--4, .grille--2 { grid-template-columns: 1fr; } }
.carte { background: #fff; border-radius: var(--rayon); padding: 26px; border: 1px solid var(--filet); box-shadow: 0 1px 2px rgba(16, 35, 61, .04); transition: transform .25s, box-shadow .25s; }
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte p { color: var(--encre-douce); font-size: .97rem; margin: 0; }
.carte-picto { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--sarcelle-100); color: var(--sarcelle-700); margin-bottom: 16px; }
.carte-picto svg { width: 28px; height: 28px; }
.carte--ambre .carte-picto { background: var(--ambre-100); color: #B7740B; }
.carte--corail .carte-picto { background: var(--corail-100); color: #D94848; }
.carte--bleu .carte-picto { background: #E8F1FE; color: var(--bleu-500); }

/* --- Listes cochées ------------------------------------------------------------------- */
.coches { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 10px; }
.coches li { position: relative; padding-left: 34px; }
.coches li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--sarcelle-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8F8D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.section--sombre .coches li::before { background-color: rgba(62, 207, 205, .16); }

/* --- Duo texte / visuel -------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.duo--inverse > :first-child { order: 2; }
@media (max-width: 960px) { .duo { grid-template-columns: 1fr; gap: 32px; } .duo--inverse > :first-child { order: 0; } }

/* --- Cadre navigateur ------------------------------------------------------------------ */
.navigateur { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--ombre-forte); border: 1px solid rgba(16, 35, 61, .1); }
.navigateur-barre { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #EEF3F4; border-bottom: 1px solid var(--filet); }
.navigateur-barre i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.navigateur-barre i:nth-child(2) { background: #FEBC2E; } .navigateur-barre i:nth-child(3) { background: #28C840; }
.navigateur-barre span { margin-left: 12px; flex: 1; background: #fff; border-radius: 7px; font-size: .78rem; color: var(--encre-douce); padding: 4px 12px; border: 1px solid var(--filet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navigateur img { display: block; width: 100%; height: auto; }

/* --- Visite guidée (onglets) ----------------------------------------------------------- */
.visite { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 40px; align-items: start; }
.visite-onglets { display: grid; gap: 10px; }
.visite-onglet { text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: 16px 18px; cursor: pointer; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.visite-onglet strong { display: block; font-size: 1rem; }
.visite-onglet span { display: block; font-size: .9rem; color: var(--encre-douce); margin-top: 3px; }
.visite-onglet[aria-selected="true"] { border-color: var(--sarcelle-500); box-shadow: 0 10px 24px -14px rgba(42, 179, 177, .9); }
.visite-onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sarcelle-500); transform-origin: left; animation: visite-progres var(--duree, 6s) linear forwards; }
.visite.en-pause .visite-onglet::after { animation-play-state: paused; }
@keyframes visite-progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.visite-ecran { position: relative; }
.visite-ecran figure { margin: 0; display: none; }
.visite-ecran figure.est-actif { display: block; animation: visite-fondu .5s ease-out; }
.visite-ecran figcaption { margin-top: 16px; color: var(--encre-douce); font-size: .95rem; }
@keyframes visite-fondu { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
	.visite { grid-template-columns: 1fr; }
	.visite-onglets { grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
	.visite-onglet { scroll-snap-align: start; }
}

/* --- Tarifs ----------------------------------------------------------------------------- */
.tarifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.tarif { background: #fff; border-radius: 22px; padding: 30px 28px; border: 1px solid var(--filet); display: flex; flex-direction: column; position: relative; }
.tarif--vedette { background: var(--marine-800); color: rgba(255, 255, 255, .86); border-color: var(--marine-800); box-shadow: var(--ombre-forte); transform: translateY(-10px); }
.tarif--vedette h3, .tarif--vedette .tarif-prix { color: #fff; }
.tarif-etiquette { position: absolute; top: -14px; left: 28px; background: var(--ambre-500); color: var(--marine-900); font-weight: 800; font-size: .78rem; padding: 5px 12px; border-radius: 999px; }
.tarif-pour { font-size: .92rem; color: var(--encre-douce); margin-bottom: 18px; }
.tarif--vedette .tarif-pour { color: rgba(255, 255, 255, .7); }
.tarif-prix { font-size: 2.6rem; font-weight: 900; letter-spacing: -.03em; color: var(--marine-700); line-height: 1; margin-bottom: 4px; }
.tarif-prix small { font-size: .95rem; font-weight: 600; letter-spacing: 0; }
.tarif-detail { font-size: .88rem; color: var(--encre-douce); margin-bottom: 20px; }
.tarif--vedette .tarif-detail { color: rgba(255, 255, 255, .7); }
.tarif .coches { font-size: .94rem; flex: 1; }
.tarif .bouton { justify-content: center; }
.tarifs-note { text-align: center; color: var(--encre-douce); font-size: .92rem; margin-top: 28px; }
@media (max-width: 960px) { .tarifs { grid-template-columns: 1fr; } .tarif--vedette { transform: none; } }

/* --- Questions fréquentes --------------------------------------------------------------- */
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-weight: 800; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--sarcelle-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8F8D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--encre-douce); padding: 0 0 22px; margin: 0; }

/* --- Contact ----------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.contact-carte { background: #fff; color: var(--encre); border-radius: 22px; padding: 30px; box-shadow: var(--ombre-forte); }
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ label { font-weight: 700; font-size: .92rem; }
.champ input, .champ textarea { font: inherit; padding: 13px 15px; border-radius: 12px; border: 2px solid var(--filet); background: #fff; color: var(--encre); }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--sarcelle-500); box-shadow: 0 0 0 4px rgba(42, 179, 177, .18); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.contact-legal { font-size: .82rem; color: var(--encre-douce); margin: 12px 0 0; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .champs-2 { grid-template-columns: 1fr; } }

/* --- Pied de page ---------------------------------------------------------------------- */
.pied { background: var(--marine-900); color: rgba(255, 255, 255, .7); padding: 64px 0 28px; font-size: .95rem; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied img { height: 36px; width: auto; margin-bottom: 14px; }
.pied h4 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .85rem; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }

/* --- Bandeau d'appel ------------------------------------------------------------------- */
.appel { border-radius: 28px; padding: clamp(36px, 6vw, 64px); background: radial-gradient(700px 300px at 100% 0%, rgba(62, 207, 205, .35), transparent 60%), var(--marine-700); color: rgba(255, 255, 255, .85); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 30px; align-items: center; }
.appel h2 { color: #fff; margin-bottom: 10px; }
@media (max-width: 860px) { .appel { grid-template-columns: 1fr; } }

/* --- Pages de contenu (ressources) -------------------------------------------------------- */
.fil { font-size: .88rem; color: rgba(255, 255, 255, .65); margin-bottom: 18px; }
.fil a { color: rgba(255, 255, 255, .85); }
.heros--page { padding: 56px 0 70px; }
.heros--page .conteneur { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.article { font-size: 1.07rem; }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.8em; }
.article ul { padding-left: 1.2em; }
.article li { margin-bottom: .5em; }
.encadre { background: var(--sarcelle-50); border: 1px solid var(--sarcelle-100); border-left: 5px solid var(--sarcelle-500); border-radius: 14px; padding: 20px 22px; margin: 1.6em 0; }
.encadre--ambre { background: var(--ambre-100); border-color: #FBE3B6; border-left-color: var(--ambre-500); }

/* ==========================================================================
   Animations (schémas). État par défaut = état final, lisible sans JavaScript.
   .anime-pret = état de départ ; .anime-joue = lecture (movelya.js).
   ========================================================================== */
@keyframes m-fondu { to { opacity: 1; } }
@keyframes m-monte { to { opacity: 1; transform: none; } }
@keyframes m-pop { to { opacity: 1; transform: none; } }
@keyframes m-trace { to { stroke-dashoffset: 0; } }
@keyframes m-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes m-onde { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes m-tourne { to { transform: rotate(360deg); } }
@keyframes m-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.apparait { opacity: 0; transform: translateY(26px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .8, .3, 1); transition-delay: var(--retard, 0s); }
.apparait.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.apparait { opacity: 1; transform: none; }
}

.contact-retour { margin-top: 14px; padding: 14px 16px; border-radius: 12px; font-weight: 700; font-size: .95rem; }
.contact-retour--ok { background: var(--vert-100); color: #116B36; border: 2px solid var(--sarcelle-500); }
.contact-retour--erreur { background: var(--corail-100); color: #9B2C2C; border: 2px solid var(--corail-500); }

/* --- 1. Héros : le dossier au centre des modules ----------------------------------------- */
.constellation svg { display: block; width: 100%; height: auto; overflow: visible; }
.cst-lien { fill: none; stroke: rgba(62, 207, 205, .35); stroke-width: 2; stroke-dasharray: 4 7; }
.cst-noeud circle.cst-fond { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
.cst-noeud text { font: 700 15px var(--police); fill: rgba(255, 255, 255, .92); }
.cst-noeud path, .cst-noeud rect, .cst-noeud circle.cst-ic { fill: none; stroke: var(--sarcelle-400); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cst-impulsion { fill: var(--ambre-500); filter: drop-shadow(0 0 6px rgba(245, 166, 35, .9)); }
.cst-dossier rect.cst-carte { fill: #fff; }
.cst-dossier text { font-family: var(--police); }
.cst-ligne { fill: #E3ECEE; }
.cst-ligne--pleine { fill: var(--sarcelle-500); transform-box: fill-box; transform-origin: left center; }
.cst-coche { fill: none; stroke: var(--vert-500); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; }
.cst-halo { fill: none; stroke: var(--sarcelle-400); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.cst-orbite { transform-origin: 300px 270px; }
.anime-joue .cst-orbite { animation: m-tourne 80s linear infinite; }
.anime-joue .cst-orbite .cst-noeud-contenu { animation: m-tourne 80s linear infinite reverse; transform-box: fill-box; transform-origin: center; }
.anime-pret .cst-ligne--pleine { transform: scaleX(0); }
.anime-pret .cst-coche { stroke-dashoffset: 20; }
.anime-joue .cst-ligne--pleine { animation: cst-remplit .9s ease-out calc(1.2s + var(--k) * 1.1s) forwards; }
.anime-joue .cst-coche { animation: m-trace .5s ease-out calc(1.9s + var(--k) * 1.1s) forwards; }
.anime-joue .cst-halo { animation: m-onde 2.4s ease-out 0s infinite; }
.anime-joue .cst-flotte { animation: m-flotte 6s ease-in-out infinite; }
@keyframes cst-remplit { to { transform: none; } }

/* --- 2. Du désordre à un seul outil ------------------------------------------------------- */
.desordre { position: relative; }
.desordre svg { display: block; width: 100%; height: auto; overflow: visible; }
.dso-objet { transform-box: fill-box; transform-origin: center; }
.dso-papier { fill: #fff; stroke: #B9C9CC; stroke-width: 2; }
.dso-trait { stroke: #C7D5D8; stroke-width: 3; stroke-linecap: round; }
.dso-cible rect { fill: var(--marine-800); }
.dso-ligne { fill: rgba(255, 255, 255, .18); }
.dso-ligne-ok { fill: var(--sarcelle-400); transform-box: fill-box; transform-origin: left center; }
.anime-joue .dso-objet { animation: dso-range 1.6s cubic-bezier(.6, 0, .3, 1) var(--t) both; }
.anime-pret .dso-ligne-ok { transform: scaleX(0); }
.anime-joue .dso-ligne-ok { animation: cst-remplit .6s ease-out calc(var(--t) + 1.3s) forwards; }
.anime-joue .dso-objet--flotte { animation: dso-flotte 2.2s ease-in-out infinite alternate, dso-range 1.6s cubic-bezier(.6, 0, .3, 1) var(--t) both; }
@keyframes dso-range { 0%, 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(20deg); } }
@keyframes dso-flotte { to { transform: translateY(-6px) rotate(-3deg); } }

/* --- 4. Le trajet d'une prescription ------------------------------------------------------ */
.trajet { position: relative; }
.trajet-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; position: relative; }
.trajet-etapes::before { content: ""; position: absolute; left: 7%; right: 7%; top: 31px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--sarcelle-400) 0 10px, transparent 10px 18px); }
.trajet-etapes::after { content: ""; position: absolute; top: 25px; left: 7%; width: 16px; height: 16px; border-radius: 50%; background: var(--ambre-500); box-shadow: 0 0 0 6px rgba(245, 166, 35, .25); opacity: 0; }
.trajet-etape { position: relative; text-align: center; z-index: 1; }
.trajet-rond { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; background: #fff; border: 2px solid var(--filet); display: grid; place-items: center; color: var(--marine-700); box-shadow: 0 0 0 8px var(--fond-doux); transition: background-color .3s; }
.trajet-rond svg { width: 30px; height: 30px; }
.trajet-etape strong { display: block; font-size: .98rem; margin-bottom: 4px; }
.trajet-etape span { font-size: .86rem; color: var(--encre-douce); display: block; line-height: 1.4; }
.anime-joue .trajet-etapes::after { animation: trajet-voyage 7.2s linear forwards; }
.anime-joue .trajet-rond { animation: trajet-allume .5s ease-out calc(.3s + var(--n) * 1.2s) forwards; }
.anime-pret .trajet-etape > :not(.trajet-rond) { opacity: .35; }
.anime-joue .trajet-etape > :not(.trajet-rond) { animation: m-fondu .5s ease-out calc(.4s + var(--n) * 1.2s) forwards; }
@keyframes trajet-allume { 0% { transform: scale(.9); } 60% { transform: scale(1.12); } 100% { transform: none; background: var(--sarcelle-500); border-color: var(--sarcelle-500); color: #fff; } }
@keyframes trajet-voyage { 0% { opacity: 1; left: 7%; } 100% { opacity: 1; left: calc(93% - 16px); } }
@media (max-width: 900px) {
	.trajet-etapes { grid-template-columns: 1fr; gap: 18px; }
	.trajet-etapes::before { left: 31px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--sarcelle-400) 0 10px, transparent 10px 18px); }
	.trajet-etapes::after { display: none; }
	.trajet-etape { display: grid; grid-template-columns: 66px 1fr; column-gap: 16px; text-align: left; align-items: center; }
	.trajet-rond { margin: 0; grid-row: span 2; }
	.trajet-etape strong { align-self: end; margin: 0; }
	.trajet-etape span { align-self: start; }
}

/* --- 5. Feuille de présence FSE+ -------------------------------------------------------------- */
.emargement { background: #fff; color: var(--encre); border-radius: 20px; padding: 24px; box-shadow: var(--ombre-forte); position: relative; overflow: hidden; }
.emargement h3 { font-size: 1.02rem; display: flex; gap: 10px; align-items: center; }
.emargement h3 svg { width: 26px; height: 18px; flex: 0 0 auto; }
.emg-lignes { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.emg-lignes li { display: grid; grid-template-columns: 1fr auto 110px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--fond-doux); font-size: .92rem; }
.emg-lignes em { font-style: normal; font-size: .8rem; color: var(--encre-douce); }
.emg-signature { height: 28px; }
.emg-signature path { fill: none; stroke: var(--marine-700); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 160; }
.emg-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.emg-badges span { font-size: .8rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--sarcelle-100); color: var(--sarcelle-700); }
.emg-tampon { position: absolute; right: 20px; bottom: 22px; width: 116px; height: 116px; border-radius: 50%; border: 4px solid var(--vert-500); color: var(--vert-500); display: grid; place-items: center; text-align: center; font-weight: 900; font-size: .9rem; line-height: 1.1; transform: rotate(-14deg); background: rgba(255, 255, 255, .85); text-transform: uppercase; letter-spacing: .04em; }
.anime-pret .emg-lignes li { opacity: 0; transform: translateX(-12px); }
.anime-pret .emg-signature path { stroke-dashoffset: 160; }
.anime-pret .emg-badges span, .anime-pret .emg-tampon { opacity: 0; }
.anime-joue .emg-lignes li { animation: m-monte .45s ease-out calc(.3s + var(--n) * .9s) forwards; }
.anime-joue .emg-signature path { animation: m-trace .7s ease-out calc(.6s + var(--n) * .9s) forwards; }
.anime-joue .emg-badges span { animation: m-fondu .4s ease-out calc(4.2s + var(--n) * .25s) forwards; }
.anime-joue .emg-tampon { animation: emg-tamponne .5s cubic-bezier(.3, 1.6, .5, 1) 5s forwards; }
@keyframes emg-tamponne { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* --- 6. Assistance IA ---------------------------------------------------------------------------- */
.ia { background: #fff; color: var(--encre); border-radius: 20px; padding: 22px; box-shadow: var(--ombre-forte); }
.ia-audio { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--marine-800); color: #fff; }
.ia-micro { width: 44px; height: 44px; border-radius: 50%; background: var(--corail-500); display: grid; place-items: center; flex: 0 0 auto; position: relative; }
.ia-micro::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--corail-500); opacity: 0; }
.anime-joue .ia-micro::after { animation: m-onde 1.4s ease-out 0s 3; }
.ia-micro svg { width: 22px; height: 22px; }
.ia-onde { display: flex; align-items: center; gap: 4px; height: 36px; flex: 1; }
.ia-onde i { width: 4px; border-radius: 2px; background: var(--sarcelle-400); height: 30%; }
.anime-joue .ia-onde i { animation: ia-onde .7s ease-in-out calc(var(--k) * -.09s) 6 alternate; }
@keyframes ia-onde { from { height: 18%; } to { height: 100%; } }
.ia-citation { font-size: .92rem; color: var(--encre-douce); font-style: italic; margin: 14px 2px; }
.ia-cr { border: 2px solid var(--sarcelle-100); border-radius: 14px; padding: 14px 16px; }
.ia-cr strong { color: var(--sarcelle-700); font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; }
.ia-cr p { margin: 8px 0 0; font-size: .92rem; }
.ia-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ia-actions span { font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--ambre-100); color: #8A5A08; }
.anime-pret .ia-citation, .anime-pret .ia-cr p, .anime-pret .ia-actions span { opacity: 0; }
.anime-pret .ia-cr { border-color: transparent; }
.anime-joue .ia-citation { animation: m-fondu .6s ease-out .6s forwards; }
.anime-joue .ia-cr { animation: ia-cadre .5s ease-out 3.2s forwards; }
.anime-joue .ia-cr p { animation: m-monte .5s ease-out calc(3.5s + var(--n) * .5s) forwards; }
.anime-joue .ia-actions span { animation: m-pop .4s cubic-bezier(.3, 1.6, .5, 1) calc(5.2s + var(--n) * .3s) forwards; }
@keyframes ia-cadre { to { border-color: var(--sarcelle-100); } }

/* --- 7. MobiScope --------------------------------------------------------------------------------- */
.mobiscope { position: relative; border-radius: 22px; overflow: hidden; background: #E9F2EF; box-shadow: var(--ombre-forte); }
.mobiscope svg { display: block; width: 100%; height: auto; }
.msc-zone { transform-box: fill-box; transform-origin: center; }
.msc-zone--60 { fill: rgba(42, 179, 177, .16); stroke: rgba(42, 179, 177, .5); }
.msc-zone--40 { fill: rgba(42, 179, 177, .24); stroke: rgba(42, 179, 177, .6); }
.msc-zone--20 { fill: rgba(42, 179, 177, .38); stroke: var(--sarcelle-600); }
.msc-zone { stroke-width: 2; }
.msc-emploi { fill: var(--marine-700); transform-box: fill-box; transform-origin: center; }
.msc-legende { position: absolute; right: 14px; top: 14px; display: grid; gap: 6px; }
.msc-legende span { background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 6px 12px; font-size: .82rem; font-weight: 700; box-shadow: 0 4px 10px rgba(16, 35, 61, .1); }
.msc-legende b { color: var(--sarcelle-700); font-variant-numeric: tabular-nums; }
.anime-pret .msc-zone { transform: scale(0); }
.anime-pret .msc-emploi { opacity: 0; }
.anime-pret .msc-legende span { opacity: 0; }
.anime-joue .msc-zone--20 { animation: m-pop 1s cubic-bezier(.3, 1.3, .5, 1) .3s forwards; }
.anime-joue .msc-zone--40 { animation: m-pop 1.1s cubic-bezier(.3, 1.3, .5, 1) 1.2s forwards; }
.anime-joue .msc-zone--60 { animation: m-pop 1.2s cubic-bezier(.3, 1.3, .5, 1) 2.2s forwards; }
.anime-joue .msc-emploi { animation: m-fondu .3s ease-out calc(.6s + var(--d) * 1s) forwards; }
.anime-joue .msc-legende span { animation: m-monte .4s ease-out calc(.8s + var(--n) * 1s) forwards; }
.msc-note { font-size: .82rem; color: var(--encre-douce); text-align: center; padding: 8px 12px 12px; margin: 0; background: #fff; }

/* --- Modules ---------------------------------------------------------------------------------------- */
.module-et-aussi { text-align: center; margin-top: 30px; color: var(--encre-douce); }

/* Corrections après relecture */
.cst-ic * { fill: none !important; stroke: var(--sarcelle-400); stroke-width: 2.4; }
.module-et-aussi svg, p a svg { width: 18px; height: 18px; vertical-align: -3px; }
.trajet-rond svg { width: 30px; height: 30px; }
.carte-picto svg { width: 28px; height: 28px; }
.champ input, .champ textarea { width: 100%; min-width: 0; }
.dso-ligne { fill: rgba(255, 255, 255, .14); }
.desordre { max-width: 560px; margin-inline: auto; }
.emargement h3 { color: var(--encre); }
.emg-tampon { top: 16px; bottom: auto; right: 18px; width: 96px; height: 96px; font-size: .8rem; }
.dso-cible .dso-ligne { fill: rgba(255, 255, 255, .14); }
.dso-cible .dso-ligne-ok { fill: var(--sarcelle-400); }
.visite > *, .duo > *, .contact > *, .heros .conteneur > * { min-width: 0; }
@media (max-width: 960px) { .visite-onglets { max-width: 100%; } }
.ia-onde { min-width: 0; overflow: hidden; }
.ia-audio small { flex: 0 1 auto; min-width: 0; font-size: .78rem; line-height: 1.2; }
@media (max-width: 480px) { .ia-audio small { display: none; } }

/* --- Pages ressources : animations ------------------------------------------------------- */
.heros--page .heros-visuel > * { max-width: 470px; margin-left: auto; }
.cout-excel, .seance { background: #fff; color: var(--encre); border-radius: 22px; padding: 24px; box-shadow: var(--ombre-forte); }
.cx-titre { font-weight: 900; font-size: 1.15rem; margin: 0; }
.cx-cas { font-size: .9rem; color: var(--encre-douce); margin: 4px 0 16px; }
.cx-trimestres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cx-tri { background: var(--fond-doux); border-radius: 12px; padding: 10px; text-align: center; }
.cx-tri small { font-weight: 800; color: var(--encre-douce); }
.cx-tri > div { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.cx-jour { width: 26px; height: 32px; border-radius: 6px; background: var(--corail-500); position: relative; }
.cx-jour::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .7); box-shadow: 0 7px 0 rgba(255, 255, 255, .7), 0 14px 0 rgba(255, 255, 255, .7); }
.cx-total { margin: 18px 0 0; font-weight: 800; }
.cx-total b { font-size: 2.6rem; color: #D94848; margin-right: 6px; vertical-align: -6px; }
.cx-total span { font-weight: 500; font-size: .9rem; color: var(--encre-douce); }
.anime-pret .cx-jour { transform: scale(0); }
.anime-joue .cx-jour { animation: m-pop .35s cubic-bezier(.3, 1.6, .5, 1) calc(.3s + var(--k) * .35s) forwards; }

.sc-source { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: var(--marine-800); color: #fff; }
.sc-source svg { width: 40px; height: 40px; color: var(--sarcelle-400); flex: 0 0 auto; }
.sc-source strong { display: block; }
.sc-source span { font-size: .88rem; opacity: .75; }
.sc-fourche { display: block; width: 100%; height: 80px; }
.sc-fourche path { fill: none; stroke: var(--sarcelle-500); stroke-width: 4; stroke-dasharray: 1; stroke-linecap: round; }
.sc-lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-lignes li { background: var(--sarcelle-50); border: 2px solid var(--sarcelle-100); border-radius: 12px; padding: 12px 10px; text-align: center; font-size: .84rem; font-weight: 700; display: grid; gap: 6px; justify-items: center; }
.sc-lignes svg { width: 26px; height: 26px; color: var(--sarcelle-700); }
.sc-note { text-align: center; margin: 12px 0 0; font-weight: 800; color: var(--sarcelle-700); }
.anime-pret .sc-fourche path { stroke-dashoffset: 1; }
.anime-pret .sc-lignes li, .anime-pret .sc-note { opacity: 0; transform: translateY(10px); }
.anime-joue .sc-fourche path { animation: m-trace .9s ease-out .5s forwards; }
.anime-joue .sc-lignes li { animation: m-monte .5s ease-out calc(1.3s + var(--n) * .35s) forwards; }
.anime-joue .sc-note { animation: m-monte .5s ease-out 2.6s forwards; }
@media (max-width: 960px) { .heros--page .heros-visuel > * { margin: 0 auto; } }
.heros--page h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.heros--demo { padding-bottom: 120px; }
.heros--demo .conteneur { grid-template-columns: 1fr; text-align: center; }
.heros--demo .chapeau { margin-inline: auto; }
.resa .booking-card { position: relative; z-index: 2; margin-top: -90px !important; }
@media (max-width: 960px) { .heros--page .conteneur { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cx-jour { width: 20px; height: 26px; } .cx-trimestres { gap: 6px; } .sc-lignes { grid-template-columns: 1fr; } .emg-lignes li { grid-template-columns: 1fr 70px; } .emg-lignes li > span:nth-child(2) { display: none; } }