/* =========================================================
   itsi Vitrine — feuille de styles principale
   Reconstruction en CSS pur (sans dépendance de build) de la
   charte graphique originale (palette + typographies Lato/Poppins).
   ========================================================= */

:root {
	--primary-lightest: #DDEBFB;
	--primary-light: #A4C9DE;
	--primary: #6499B7;
	--primary-dark: #0E547C;
	--primary-darkest: #023860;

	--grey-lightest: #E7E6F3;
	--grey-light: #D0CFDC;
	--grey: #9E9DAF;
	--grey-dark: #696786;
	--grey-darkest: #29283d;

	--pink-lightest: #FCE6ED;
	--pink-light: #F9D4DB;
	--pink: #F0B2BD;
	--pink-dark: #E4708C;
	--pink-darkest: #CE506E;

	--white-pure: #FFFFFF;
	--white: #F8F7F9;
	--white-dark: #e9e8ea;

	--yellow: #FAD655;
	--yellow-dark: #D3A500;

	--poppaye: #FFCF04;
	--poppaye-pink: #FF0069;

	--container-width: 1024px;
	--radius: 6px;
	--radius-lg: 14px;
	--shadow: 0 10px 30px rgba(41,40,61,.10);
	--shadow-lg: 0 20px 45px rgba(41,40,61,.16);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	overflow-x: hidden;
	font-family: 'Lato', ui-sans-serif, system-ui, sans-serif;
	color: var(--grey-darkest);
	background: var(--white-pure);
	line-height: 1.6;
	font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; border-radius: 2px; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: 'Poppins', 'Lato', sans-serif;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-right { text-align: right; }
.text-pink { color: var(--pink-darkest); }
.text-primary-light { color: var(--primary-light); }
.fine-print { font-size: .8rem; color: var(--grey-dark); }

@media (min-width: 640px) {
	h1 { font-size: 2.25rem; }
	h2 { font-size: 1.75rem; }
}

/* ---------- Layout helpers ---------- */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}
.content-narrow { max-width: 760px; }
.section { padding: 3rem 0 3.5rem; }
.section--white { background: linear-gradient(to bottom, var(--white-pure), var(--white)); }
.section--dark { background: var(--grey-darkest); color: var(--white-pure); }
.section--top-pad { padding-top: 6rem; }
@media (min-width: 640px) {
	.section--top-pad { padding-top: 8rem; }
}
.section-head { max-width: 640px; margin: 0 auto 2.5rem; }
.section-head--center { text-align: center; }
.eyebrow {
	color: var(--primary); font-weight: 700; margin-bottom: .5rem;
	font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
}
.eyebrow--pink { color: var(--pink-dark); }
.prose h2 { margin-top: 2.2rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--primary-dark); text-decoration: underline; }
.lead { color: var(--grey-dark); }

/* ---------- Scroll reveal (le contenu "monte" en douceur à l'apparition, façon Qonto) ----------
   Placé tôt dans la cascade pour que les états d'interaction définis plus loin (hover des
   cartes, etc.) restent toujours prioritaires une fois l'élément révélé. */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }
.reveal--d1.is-revealed { transition-delay: .08s; }
.reveal--d2.is-revealed { transition-delay: .16s; }
.reveal--d3.is-revealed { transition-delay: .24s; }

.reveal--from-left { transform: translateX(-48px); }
.reveal--from-left.is-revealed { transform: translateX(0); }
.reveal--from-right { transform: translateX(48px); }
.reveal--from-right.is-revealed { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 640px) {
	.section { padding: 5rem 0 5.5rem; }
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	border-radius: 999px;
	padding: .6rem 1.1rem;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
	cursor: pointer;
	font-size: .95rem;
}
.btn svg { flex-shrink: 0; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn--small { border-radius: var(--radius); padding: .55rem 1rem; }
.btn--dark { background: var(--grey-darkest); color: var(--white-pure); }
.btn--dark:hover { background: rgba(41,40,61,.8); box-shadow: 0 8px 20px rgba(41,40,61,.3); }
.btn--dark-outline { background: transparent; border-color: var(--grey-darkest); color: var(--grey-darkest); }
.btn--dark-outline:hover { background: rgba(0,0,0,.05); }
.btn--outline-white { background: rgba(255,255,255,.1); border-color: var(--white-pure); color: var(--white-pure); }
.btn--outline-white:hover { background: rgba(255,255,255,.2); }
.btn--pink { background: var(--pink-darkest); color: var(--white-pure); }
.btn--pink:hover { background: rgba(206,80,110,.85); box-shadow: 0 8px 20px rgba(206,80,110,.35); }
.btn--primary { background: var(--primary); color: var(--white-pure); }
.btn--primary:hover { background: rgba(100,153,183,.9); box-shadow: 0 8px 20px rgba(100,153,183,.35); }
.btn--primary-dark { background: var(--primary-darkest); color: var(--white-pure); border-radius: 999px; }
.btn--primary-dark:hover { background: rgba(2,56,96,.85); box-shadow: 0 8px 20px rgba(2,56,96,.35); }
.btn--poppaye { background: var(--poppaye); color: var(--grey-darkest); }
.btn--poppaye:hover { background: rgba(255,207,4,.85); }
.btn--nav-login { background: transparent; border-color: currentColor; padding: .5rem 1rem; }

#main-content { position: relative; }

/* Trait pointillé qui prolonge le contour de la bannière partenaires (voir logo-strip),
   dans la marge gauche, jusqu'au bas de la section "Centralisé". Lié au scroll comme
   le contour de la bannière (voir main.js), désactivé en dessous de 992px (pas assez
   de marge disponible pour que le trait ne chevauche pas le texte). */
.page-trail {
	position: absolute; top: 0; left: 0; width: 100%;
	overflow: visible; pointer-events: none; z-index: 2;
}
.page-trail__path {
	fill: none;
	stroke: var(--primary-light);
	stroke-width: 2px;
	stroke-linecap: round;
}
@media (max-width: 991px) {
	.page-trail { display: none; }
}

/* ---------- Header / Navigation ---------- */
.site-header { position: relative; z-index: 50; }
.nav--desktop { display: none; }
.nav__row { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; }
.nav__logo { display: flex; align-items: center; gap: .4rem; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; }
.nav__logo-imgs { position: relative; width: 17px; height: 30px; flex-shrink: 0; }
.nav__logo-img { position: absolute; inset: 0; width: 17px; height: 30px; }
.nav--desktop .nav__logo-img { transition: opacity .3s ease; }
.nav__links { display: flex; gap: 1.5rem; align-items: center; }
.nav__links a { font-weight: 700; }
.nav__links a:hover { opacity: .8; }

.nav--desktop.nav--white,
.nav--desktop.nav--dark {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	background: transparent;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	border-bottom: 1px solid transparent;
	transition: background-color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease, border-color .4s ease, color .35s ease;
}
.nav--desktop.nav--white { color: var(--white-pure); }
.nav--desktop.nav--dark { color: var(--grey-darkest); }

.nav--desktop.nav--white.is-elevated {
	background: rgba(0, 0, 0, .12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: rgba(255, 255, 255, .1);
}
.nav--desktop.nav--dark.is-elevated {
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: rgba(41, 40, 61, .06);
}
.nav--desktop .btn--nav-login {
	color: inherit;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, color .3s ease, border-color .3s ease;
}
/* Se connecter (nav desktop) : léger verre dépoli au repos déjà, qui s'intensifie
   au survol, puis le verre s'opacifie en blanc plein au clic (texte qui repasse
   en foncé pour rester lisible). */
.nav--desktop .btn--nav-login:hover {
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, .6);
}
.nav--desktop .btn--nav-login:active {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--grey-darkest);
	border-color: rgba(255, 255, 255, .92);
}

.nav--mobile { display: block; }
.nav__mobile-bar {
	position: fixed; inset-inline: 0; top: 0; height: 4rem; z-index: 60;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 1.5rem; background: var(--white-pure); box-shadow: var(--shadow);
	color: var(--grey-darkest);
}
.nav__toggle, .nav__close { background: none; border: none; padding: .35rem; cursor: pointer; color: var(--grey-darkest); }
.nav__mobile-panel {
	position: fixed; inset: 0; z-index: 70; background: var(--primary);
	padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.nav__mobile-panel.is-open { opacity: 1; visibility: visible; }
.nav__mobile-panel-inner {
	background: var(--white-pure); border-radius: 12px; padding: 1.5rem;
	display: flex; flex-direction: column; gap: 1.5rem; height: 100%; overflow-y: auto;
}
.nav__mobile-panel-top { display: flex; align-items: center; justify-content: space-between; }
.nav__mobile-links { display: flex; flex-direction: column; gap: 1.25rem; }
.nav__mobile-links a { font-weight: 700; padding: .25rem 0; display: block; }
body.menu-open { overflow: hidden; }

@media (min-width: 640px) {
	.nav--desktop { display: block; }
	.nav--mobile { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 3rem 0 5rem; overflow: hidden; position: relative; }
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; max-width: 640px; padding-top: 4rem; padding-bottom: 5rem; }
.hero--home {
	background-color: var(--primary);
	background-image: url('../images/logo_pattern.png');
	background-repeat: repeat;
	color: var(--white-pure);
	border-bottom-right-radius: 100px;
	padding-bottom: 10rem;
}
.hero__kicker {
	font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
	color: rgba(255,255,255,.85);
}
/* Le H1 de l'accueil peut dépasser la colonne centrée de .hero__inner (640px) pour
   tenir sur moins de lignes — le reste du hero (kicker, lead, actions) reste dans
   cette colonne étroite. Une largeur définie (pas max-width seul, ni fit-content)
   est nécessaire : en flex avec align-items non-stretch, le H1 se contente sinon
   d'un shrink-to-fit borné par la largeur de .hero__inner et n'atteint jamais son
   max-width. min() avec vw évite tout débordement horizontal sur petit écran. */
.hero--home h1 { width: min(900px, 90vw); }
.hero__lead { max-width: 480px; margin: 0 auto; }
.hero__actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.hero__shot {
	position: relative; margin-top: -4rem; box-shadow: var(--shadow-lg);
	border: 1px solid var(--primary-light); border-radius: var(--radius-lg); overflow: hidden;
	background: rgba(164, 201, 222, .25);
	backdrop-filter: blur(3.5px);
	-webkit-backdrop-filter: blur(3.5px);
	padding: 14px;
}
.hero__shot img { border-radius: 13px; width: 100%; }

.hero--dark { background: var(--grey-darkest); color: var(--white-pure); padding-bottom: 8rem; }
.hero--light { background: var(--primary-lightest); color: var(--grey-darkest); padding-bottom: 8rem; }

@media (min-width: 640px) {
	.hero--dark, .hero--light { padding-bottom: 16rem; }
	.hero__actions { flex-direction: row; }
	.hero__inner { padding-bottom: 12rem; }
	.hero__shot { margin-top: -11rem; }
}
.hero__row { display: flex; flex-direction: column; gap: 2rem; padding-top: 2rem; }
.hero__col { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }
.hero__col--media { display: none; }
.hero__col--media img { border-radius: 10px; }
.store-badges { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.store-badge { display: inline-flex; align-items: center; gap: 1rem; border: 1px solid currentColor; border-radius: var(--radius); padding: .6rem 1rem; font-weight: 700; width: fit-content; }

.hero__tri-stats {
	display: flex; flex-direction: column; gap: 2rem;
	margin-top: 2.5rem; text-align: center;
}
.hero__tri-stats .stats__item { flex: 1; }

@media (min-width: 640px) {
	.hero__row { flex-direction: row; justify-content: space-between; padding-top: 4rem; padding-bottom: 4rem; }
	.hero__tri-stats { flex-direction: row; justify-content: space-between; gap: 3rem; padding-bottom: 4rem; }
	.hero__col--media { display: flex; flex: 1; justify-content: flex-end; }
}

/* Composition iPad + iPhone du hero Productions : positionnée en absolu par rapport à
   .hero (pas à .container, qui plafonne à 1024px) pour venir se coller au bord réel de
   la fenêtre (width en vw, pas besoin de JS), et pour que le H1 puisse légèrement
   déborder par-dessus au lieu d'une stricte colonne texte / colonne image. Apparition
   différée à l'ouverture de la page (pas liée au scroll, le hero est visible dès le
   chargement), glissée depuis la droite, avec un délai différent par appareil (l'iPhone
   arrive après l'iPad) pour un effet désynchronisé plutôt qu'un mouvement groupé. */
.hero__devices { position: relative; width: 100%; max-width: 1100px; }
.hero__col--media .hero__device {
	display: block; border-radius: 0;
	opacity: 0; transform: translateX(70px);
	animation: itsi-hero-device-in .9s cubic-bezier(.16,.8,.3,1) forwards;
}
.hero__col--media .hero__device--ipad { width: 100%; position: relative; z-index: 1; animation-delay: .35s; }
.hero__col--media .hero__device--iphone { width: 44%; position: absolute; right: 15%; bottom: 10%; z-index: 2; animation-delay: .8s; }
@keyframes itsi-hero-device-in { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
	.hero__col--media .hero__device { opacity: 1; transform: none; animation: none; }
}
@media (min-width: 640px) {
	.hero__row > .hero__col:not(.hero__col--media) { max-width: 640px; position: relative; z-index: 2; }
	.hero__row > .hero__col:not(.hero__col--media) > p { max-width: 400px; }
	.hero__col--media {
		flex: 0 0 auto; width: min(50vw, 900px);
		position: absolute; top: 6rem; right: 0;
		z-index: 1;
	}
}

/* ---------- Stats ---------- */
.stats { background: linear-gradient(to bottom, var(--white-pure), var(--white)); }
.stats--home { padding-top: 3rem; padding-bottom: 3rem; border-bottom: 2px dotted var(--primary-light); }
.stats--home .stats__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}
.stats--home .stats__item.is-visible { opacity: 1; transform: translateY(0); }
.stats--home .stats__item:nth-child(1).is-visible { transition-delay: 0s; }
.stats--home .stats__item:nth-child(2).is-visible { transition-delay: .15s; }
.stats--home .stats__item:nth-child(3).is-visible { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	.stats--home .stats__item { opacity: 1; transform: none; transition: none; }
}
.stats__row { display: flex; flex-direction: column; gap: 1.5rem; text-align: center; max-width: 700px; margin: 0 auto; }
.stats__value { font-weight: 700; font-size: 1.2rem; margin-bottom: 0; font-variant-numeric: tabular-nums; }
.stats__item { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.stats__item img { margin-bottom: .35rem; }
.stats__item h3 { margin-bottom: .1rem; }
.stats__item--light h3, .stats__item--light p { color: inherit; }

@media (min-width: 640px) {
	.stats__row { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- Logo strip (outils / plateformes intégrées) ---------- */
.logo-strip { padding: 2.5rem 0; }
.logo-strip .container {
	position: relative;
	max-width: none;
	padding: 1.75rem 1rem;
}

.logo-strip__label {
	text-align: center; color: var(--grey-dark); font-weight: 700;
	font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
	margin-bottom: 1.75rem;
}
.logo-strip__row {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 2rem 3rem;
}
.logo-strip__row img {
	height: 26px; width: auto;
	filter: grayscale(1) opacity(.55);
	transition: filter .25s ease;
}
.logo-strip__row img:hover { filter: grayscale(0) opacity(1); }

@media (min-width: 640px) {
	.logo-strip { padding: 3rem 0; }
	.logo-strip .container { padding: 2.25rem 2.5rem; }
	.logo-strip__row img { height: 32px; }
}

/* ---------- Section shots (screenshot straddling two sections) ---------- */
.section-shot-wrap { position: relative; max-width: var(--container-width); margin: 0 auto; z-index: 5; padding: 0 1rem; }
.section-shot { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-top: 3rem; border: 1px solid var(--primary-light); }
.section-shot-wrap .section-shot { margin-top: -4rem; }
.section--shot-offset { padding-top: 2rem; }

@media (min-width: 640px) {
	.section-shot-wrap .section-shot { margin-top: -11rem; }
}

/* ---------- Split (image + text) ---------- */
.split__row { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; }
.split__text { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; }
.split__media { flex: 1; }
.split__media--wide { max-width: 480px; }

/* ---------- Composition iPad + iPhone (section "Centralisé") ----------
   Un wrapper par appareil porte l'apparition (fondu + glissement horizontal, via .reveal) ;
   l'image à l'intérieur porte uniquement le flottement continu. Deux éléments distincts,
   chacun avec son propre transform, pour que les deux animations ne s'écrasent pas.
   Pas de marge négative ici : ça poussait la page en scroll horizontal. La taille vient
   uniquement du ratio flex avec la colonne de texte (plus étroite, largeur fixe).
   Positionnement de l'iPhone calé sur la zone réellement visible du mockup iPad (mesurée
   dans le PNG : le contenu commence à 6% du bord gauche et se termine à 86% en hauteur),
   pas sur le pourcentage du canevas qui inclut une bonne marge transparente. */
.split__media--devices {
	position: relative;
	overflow: visible;
	max-width: none;
	width: 100%;
}
.device-shot-wrap { display: block; }
.device-shot-wrap--ipad { position: relative; z-index: 1; width: 100%; }
.device-shot-wrap--iphone {
	position: absolute;
	z-index: 2;
	width: 55%;
	left: 6%;
	bottom: 6%;
}
.device-shot { display: block; width: 100%; }
.device-shot--iphone { filter: drop-shadow(0 16px 24px rgba(41,40,61,.18)); }

@media (min-width: 640px) {
	.split__text { flex: 0 0 440px; }
	.split__media--devices { flex: 0 0 auto; width: 500px; }
	.device-shot-wrap--iphone { width: 52%; left: 8%; bottom: 8%; }
}

@media (prefers-reduced-motion: no-preference) {
	.device-shot--ipad { animation: itsi-device-float 6s ease-in-out infinite; }
	.device-shot--iphone { animation: itsi-device-float 5s ease-in-out infinite .6s; }
}

@keyframes itsi-device-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (min-width: 640px) {
	.split__row { flex-direction: row; }
}

/* ---------- Feature list (2/3 columns of short blurbs) ---------- */
.feature-list { display: grid; gap: 2rem; }
.feature-list--2col { grid-template-columns: 1fr; }
.feature-list--3col { grid-template-columns: 1fr; margin: 2.5rem 0; }
.feature-list__title { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-bottom: .35rem; }
.feature-list__title svg { color: var(--primary); }
.feature-list--light .feature-list__title svg { color: var(--pink-light); }
.feature-list--light p { color: rgba(255,255,255,.85); }
@media (min-width: 640px) {
	.feature-list--2col { grid-template-columns: 1fr 1fr; }
	.feature-list--3col { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Cards with checklists (feature cards) ---------- */
.feature-card {
	position: relative;
	display: flex; flex-direction: column; gap: 2rem;
	background: var(--white-pure); border: 1px solid var(--grey-lightest);
	border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2.25rem;
	margin-bottom: 2rem;
}
.feature-card__text { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.feature-card__media { flex: 1; display: flex; align-items: center; }
.feature-card__media img { border-radius: 8px; width: 100%; }
@media (min-width: 640px) {
	.feature-card { flex-direction: row; align-items: center; }
	.feature-card--reverse { flex-direction: row-reverse; }
}

.check-list { display: flex; flex-direction: column; gap: .6rem; }
.check-list li { position: relative; padding-left: 1.6rem; }
.check-list li::before {
	content: ''; position: absolute; left: 0; top: .3em; width: 16px; height: 16px;
	background: var(--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* itsi-production = rose : toute la page Productions reprend cette couleur pour ses coches */
body.page-template-template-productions-php .check-list li::before { background: var(--pink-darkest); }
.check-list--compact li { font-size: .95rem; }
.check-list--dot li::before { background: var(--grey-dark); border-radius: 50%; width: 6px; height: 6px; top: .6em; -webkit-mask: none; mask: none; }

/* ---------- CTA blocks ---------- */
.cta-inline {
	text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
	padding: 2.5rem 1.5rem; margin-top: 1rem;
}
.cta-inline--card { position: relative; background: var(--grey-darkest); color: var(--white-pure); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.cta-inline__actions { display: flex; flex-direction: column; gap: 1rem; }
.cta-inline__note { font-size: .85rem; color: var(--grey-light); }
@media (min-width: 640px) {
	.cta-inline__actions { flex-direction: row; }
}

.cta-block { position: relative; text-align: center; border-radius: var(--radius-lg); padding: 2.5rem; margin-bottom: 2.5rem; }
.cta-block--primary { background: var(--primary-darkest); color: var(--white-pure); }
.cta-block--dark { background: var(--grey-darkest); color: var(--white-pure); }
.cta-block h2 { max-width: 480px; margin-inline: auto; }
.cta-block p { max-width: 480px; margin-inline: auto; margin-bottom: 1.5rem; }
/* .cta-inline__actions est centré par le flex de son parent habituel .cta-inline ;
   dans .cta-block (pas de display:flex), ses boutons s'étirent sinon en pleine
   largeur faute d'align-items. */
.cta-block .cta-inline__actions { align-items: center; justify-content: center; }

.text-block--center { text-align: center; max-width: 620px; margin: 0 auto; }

.cta-panels { display: flex; flex-direction: column; gap: 2rem; }
.cta-panel {
	position: relative;
	display: flex; flex-direction: column; gap: 2rem;
	background: var(--grey-darkest); color: var(--white-pure);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.5rem;
}
.cta-panel__text { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.cta-panel__actions { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; }
.cta-panel__grid { flex: 1.4; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.cta-panel__grid > div { display: flex; flex-direction: column; gap: .5rem; }
.cta-panel__kicker { font-weight: 700; }
.cta-panel:has(.btn--pink) .cta-panel__grid svg { color: var(--pink-light); }
.cta-panel:has(.btn--primary) .cta-panel__grid svg { color: var(--primary-light); }
.cta-panel:has(.btn--poppaye) .cta-panel__grid svg { color: var(--poppaye); }
@media (min-width: 640px) {
	.cta-panel { flex-direction: row; justify-content: space-between; }
	.cta-panel__actions { flex-direction: row; }
	.cta-panel__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Info cards / testimonials (Reliable section) ---------- */
.card-grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
.info-card {
	position: relative; border: 1px solid var(--grey-darkest); border-radius: var(--radius-lg);
	padding: 2rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
}
.info-card--icon { color: var(--grey-darkest); }
.info-card__bg-icon { position: absolute; right: 1rem; bottom: 1rem; color: var(--primary-lightest); z-index: 0; }
.info-card h3, .info-card p, .info-card > a { position: relative; z-index: 1; }
.logo-row { display: flex; gap: 1rem; align-items: center; }
.testimonials { display: flex; flex-direction: column; gap: 1.5rem; }
.testimonial { display: flex; flex-direction: column; gap: .4rem; }
.stars { color: var(--yellow-dark); letter-spacing: .1em; }
.testimonial__source { text-transform: uppercase; font-size: .75rem; color: var(--grey-dark); }
@media (min-width: 640px) {
	.card-grid--7-5 { grid-template-columns: 7fr 5fr; }
	.card-grid--5-7 { grid-template-columns: 5fr 7fr; }
	.testimonials { flex-direction: row; }
}

/* ---------- Timeline (project lifecycle) ---------- */
.timeline-wrap { position: relative; }
.timeline { display: flex; flex-direction: column; gap: 3rem; }
.timeline__step { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.timeline__num {
	display: none;
	position: relative; z-index: 1;
	width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--white-pure); border: 2px solid var(--pink-darkest); color: var(--pink-darkest);
	align-items: center; justify-content: center;
	font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
	transition: background .3s ease, color .3s ease, transform .3s ease;
}
.timeline__num.is-filled { background: var(--pink-darkest); color: var(--white-pure); transform: scale(1.08); }
.timeline__content { display: flex; flex-direction: column; gap: .75rem; }
.timeline__media img { border-radius: 8px; }
.timeline__line { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.timeline__line-bg { fill: none; stroke: var(--grey-lightest); stroke-width: 2; }
.timeline__line-draw { fill: none; stroke: var(--pink-darkest); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .25s ease-out; }
@media (min-width: 640px) {
	.timeline { padding-left: 0; }
	.timeline__step {
		display: grid;
		grid-template-columns: 1fr 3rem 1fr;
		grid-template-areas: "content num media";
		align-items: center;
		column-gap: 2rem;
	}
	.timeline__step--reverse { grid-template-areas: "media num content"; }
	.timeline__content { grid-area: content; }
	.timeline__media { grid-area: media; }
	.timeline__num { grid-area: num; display: flex; width: 3rem; height: 3rem; margin: 0 auto; flex-shrink: 0; }
	.timeline__line { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.timeline__num { transition: none; }
	.timeline__line { display: none; }
	.timeline__line-draw { transition: none; }
}

/* ---------- Pricing box ---------- */
.pricing-box {
	position: relative;
	display: flex; flex-direction: column; gap: 2rem;
	border: 1px solid var(--grey-darkest); border-radius: var(--radius-lg); padding: 2.5rem;
	border-top: 4px solid var(--pink-darkest);
}
.pricing-box__text { flex: 1; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.pricing-box .check-list { flex: 1; }
@media (min-width: 640px) {
	.pricing-box { flex-direction: row; }
}

/* ---------- Support list (Aide / Ressources) ---------- */
.support-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.support-card {
	position: relative;
	display: flex; align-items: center; gap: 1rem;
	border: 1px solid var(--grey-lightest); border-radius: var(--radius);
	padding: 1.1rem 1.4rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.support-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.support-card__icon {
	display: flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary-lightest);
	color: var(--primary-darkest); font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.support-card__arrow { margin-left: auto; flex-shrink: 0; }
.section-subtitle { color: var(--grey-dark); }

/* ---------- Pop Paye ---------- */
.poppaye-hero { padding-top: 6rem; padding-bottom: 1rem; }
.poppaye-hero__logo { display: flex; justify-content: center; padding-bottom: 1.5rem; border-bottom: 2px solid var(--poppaye-pink); }
.btn--poppaye-outline { border: 1px solid var(--grey-darkest); color: var(--grey-darkest); }

/* ---------- Privacy ---------- */
.privacy-icon { display: flex; justify-content: center; margin-bottom: 1rem; }

/* ---------- Footer ---------- */
.site-footer { padding: 4rem 0 3rem; background: linear-gradient(to bottom, var(--white-pure), var(--white-dark)); font-size: .9rem; border-top: 3px solid var(--primary-light); }
.footer__top { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.footer__brand { display: flex; align-items: center; gap: .4rem; font-family: 'Poppins', sans-serif; font-weight: 700; }
.footer__legal { display: flex; flex-direction: column; gap: 1rem; justify-content: center; text-align: center; }
.footer__legal a { text-decoration: underline; }
@media (min-width: 640px) {
	.footer__legal { flex-direction: row; }
}

/* ---------- Card hover: cartes claires se soulèvent, cartes sombres approfondissent leur ombre ---------- */
.feature-card, .info-card, .cta-panel, .pricing-box, .cta-inline--card, .cta-block, .support-card {
	transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover, .info-card:hover, .pricing-box:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
.cta-panel:hover, .cta-inline--card:hover, .cta-block:hover {
	box-shadow: 0 20px 40px rgba(41,40,61,.25);
}

.cta-panel, .cta-inline--card, .cta-block { overflow: hidden; }
.cta-panel__text, .cta-panel__grid { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
	.feature-card::before, .info-card::before, .cta-panel::before, .pricing-box::before,
	.cta-inline--card::before, .cta-block::before, .support-card::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: var(--glow-width, 1.5px);
		background: radial-gradient(var(--glow-size, 220px) circle at var(--x, 50%) var(--y, 50%), var(--glow-color, rgba(14,84,124,.5)), transparent 70%);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		opacity: 0;
		transition: opacity .3s ease;
		pointer-events: none;
		z-index: 2;
	}
	.cta-inline--card, .cta-block { --glow-color: rgba(255,255,255,.45); }
	.cta-panel:has(.btn--pink) { --glow-color: rgba(228,112,140,.95); --glow-width: 3px; --glow-size: 320px; }
	.cta-panel:has(.btn--primary) { --glow-color: rgba(164,201,222,.95); --glow-width: 3px; --glow-size: 320px; }
	.cta-panel:has(.btn--poppaye) { --glow-color: rgba(255,207,4,.95); --glow-width: 3px; --glow-size: 320px; }
	.feature-card:hover::before, .info-card:hover::before, .pricing-box:hover::before, .support-card:hover::before,
	.cta-panel:hover::before, .cta-inline--card:hover::before, .cta-block:hover::before {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.feature-card, .info-card, .cta-panel, .pricing-box, .cta-inline--card, .cta-block, .support-card {
		transition: none;
	}
	.feature-card:hover, .info-card:hover, .pricing-box:hover {
		transform: none;
	}
}

/* ---------- Illustration tilt (léger effet de perspective au survol) ---------- */
@media (hover: hover) and (pointer: fine) {
	.hero__shot, .section-shot, .feature-card__media img, .timeline__media img {
		transition: transform .2s ease-out;
		transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
		will-change: transform;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__shot, .section-shot, .feature-card__media img, .timeline__media img {
		transform: none !important;
		transition: none;
	}
}

/* ---------- Calendly embed spacing ---------- */
.calendly-inline-widget { margin-top: 2rem; }

/* ---------- Animation : demande de renseignement (page Productions) ----------
   Auto-jouée une fois au scroll (IntersectionObserver), rejouable via un bouton,
   respecte prefers-reduced-motion. Voir template-productions.php et main.js. */
.itsi-anim{
  --itsi-orange:var(--status-pending-bg,#E27436);
  --itsi-vert:var(--status-paid-bg,#248F24);
  position:relative;max-width:none;width:100%;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,sans-serif;
}
.feature-card__media:has(.itsi-anim) { flex: 1.7; }
.feature-card:has(.itsi-anim) .feature-card__text { flex: 1; }
.itsi-anim__svg{
  display:block;width:100%;height:auto;
  border-radius:10px;box-shadow:0 18px 50px rgba(53,51,77,.13);
}

/* ── Les deux couches d’état se croisent ── */
.etat{transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.etat--b{opacity:0}
[data-etape="2"] .etat--a,[data-etape="3"] .etat--a{opacity:0}
[data-etape="2"] .etat--b,[data-etape="3"] .etat--b{opacity:1}

/* ── Les bandeaux d’alerte se rétractent avant le croisement ── */
.alertes{
  transform-box:fill-box;transform-origin:left center;
  transition:opacity .3s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
[data-etape="2"] .alertes,[data-etape="3"] .alertes,
[data-etape="4"] .alertes,[data-etape="5"] .alertes{opacity:0;transform:scaleX(.02)}

/* ── Les six jalons : apparition décalée, puis virage au vert ── */
.jalon{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);
  transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i) * 70ms);
}
[data-etape="2"] .jalon,[data-etape="3"] .jalon,
[data-etape="4"] .jalon,[data-etape="5"] .jalon{opacity:1;transform:scale(1)}

/* Étape 3 : chaque pastille se coche à son tour, en rebondissant.
   La couleur est portée par les keyframes (fill-mode both) pour qu'elle
   reste verte à l'arrivée. L'index --i est posé sur chaque rect : les
   sélecteurs nth-of-type comptaient tous les rects frères, pas seulement
   les pastilles. */
[data-etape="3"] .jalon,[data-etape="4"] .jalon,[data-etape="5"] .jalon{
  fill:var(--itsi-vert);                 /* état de repos : vert, quoi qu'il arrive */
}
[data-etape="3"] .jalon{
  animation:itsi-coche .46s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i) * 135ms);
}
@keyframes itsi-coche{
  0%{transform:scale(1);fill:var(--itsi-orange)}
  38%{transform:scale(1.65);fill:var(--itsi-vert)}
  100%{transform:scale(1);fill:var(--itsi-vert)}
}

/* ── Badge : couleur en CSS, forme interpolée en JS ── */
.badge{transform-box:fill-box;transform-origin:center}
.pilule{transition:fill .45s ease}
[data-etape="2"] .pilule{fill:#FDE2CE}
[data-etape="3"] .pilule,[data-etape="4"] .pilule,
[data-etape="5"] .pilule{fill:var(--itsi-vert)}
.lab{opacity:0;transition:opacity .3s ease}
.lab-a{opacity:1}
[data-etape="2"] .lab-a,[data-etape="3"] .lab-a,
[data-etape="4"] .lab-a,[data-etape="5"] .lab-a{opacity:0}
[data-etape="2"] .lab-b{opacity:1}
[data-etape="3"] .lab-c,[data-etape="4"] .lab-c,[data-etape="5"] .lab-c{opacity:1}

/* ── Le clic : le badge s’enfonce, une onde part du point de contact ── */
.badge.presse{animation:itsi-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-presse{
  0%{transform:scale(1)} 42%{transform:scale(.94)} 100%{transform:scale(1)}
}
.onde{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.onde.part{animation:itsi-anim-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-anim-onde{
  0%{opacity:.55;transform:scale(.55)} 100%{opacity:0;transform:scale(4.6)}
}

/* ── Le pop d’arrivée sur « Synchronisé » ── */
.badge.pop{animation:itsi-pop .58s cubic-bezier(.34,1.56,.64,1)}
@keyframes itsi-pop{
  0%{transform:scale(1)} 34%{transform:scale(1.22)}
  62%{transform:scale(.97)} 100%{transform:scale(1)}
}

/* ── Curseur ── */
.curseur{
  opacity:0;
  transform:translate(506px,196px);
  transition:transform 1s cubic-bezier(.34,1.06,.5,1),opacity .35s ease;
}
.curseur.visible{opacity:1}
.curseur.survole{transform:translate(452px,77px)}
.curseur.vers-bouton{transform:translate(172px,50px)}
.curseur.saut{transition:none}   /* remise au repos hors champ, sans glissement */
/* Pas d'animation de clic sur le curseur : il reste immobile et s'efface.
   Le retour du clic est porté par l'onde et l'enfoncement du badge. */


/* ══ Étape 4 — l’onglet Liste technique, sélection des postes en masse ══ */
.etat--c{opacity:0}
[data-etape="4"] .etat--a,[data-etape="5"] .etat--a,
[data-etape="4"] .etat--b,[data-etape="5"] .etat--b{opacity:0}
[data-etape="4"] .etat--c,[data-etape="5"] .etat--c{opacity:1}
.badge{transition:opacity .35s ease}
[data-etape="4"] .badge,[data-etape="5"] .badge{opacity:0}

/* Les douze cases se cochent l’une après l’autre : c’est la sélection en masse.
   Même vocabulaire que les jalons — un pop, jamais un fondu. */
.mcase{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .22s ease,transform .34s cubic-bezier(.34,1.56,.64,1);
}
[data-etape="4"] .mcase,[data-etape="5"] .mcase{
  opacity:1;transform:scale(1);
  transition-delay:calc(300ms + var(--i) * 65ms);   /* après le croisement des couches */
}

/* Le clic sur « Créer contrat(s) » reprend l’onde et l’enfoncement du badge. */
.btn-creer{transform-box:fill-box;transform-origin:center}
.btn-creer.presse{animation:itsi-presse .26s cubic-bezier(.34,1.4,.64,1)}
.onde2{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.onde2.part{animation:itsi-anim-onde .62s cubic-bezier(.16,1,.3,1)}

/* ══ Étape 5 — la modale tombe du ciel ══ */
.voile{opacity:0;transition:opacity .42s ease}
[data-etape="5"] .voile{opacity:.15}
.modale-carte{
  opacity:0;transform:translateY(-24px);
  filter:drop-shadow(0 5px 9px rgba(23,23,41,.20));
  transition:opacity .3s ease,transform .55s cubic-bezier(.22,1.25,.36,1);
}
[data-etape="5"] .modale-carte{opacity:1;transform:translateY(0)}

/* ── Accessibilité ── */
@media (prefers-reduced-motion:reduce){
  .etat,.alertes,.jalon,.pilule,.lab,.curseur,
  .mcase,.voile,.modale-carte{transition:none!important}
  .badge.presse,.badge.pop,.onde.part,.onde2.part,.btn-creer.presse,
  .jalon{animation:none!important}
  [data-etape="3"] .jalon{fill:var(--itsi-vert)}
  .curseur{display:none}
}

/* ---------- Animation : parcours applicatif (hero, page Productions) ----------
   Remplace la capture d'écran statique au-dessus du hero. Le cadre/l'ombre sont
   dessinés dans le SVG lui-même (pas de border/box-shadow CSS ici) ; seul le
   décalage négatif qui crée le chevauchement avec le hero est repris. */
.section-shot-wrap .itsi-parcours {
	margin-top: -4rem;
	max-width: none;
	background: rgba(164, 201, 222, .25);
	backdrop-filter: blur(3.5px);
	-webkit-backdrop-filter: blur(3.5px);
	border: 1px solid var(--primary-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 2px;
}
@media (min-width: 640px) {
	.section-shot-wrap .itsi-parcours { margin-top: -11rem; }
}
.itsi-parcours{
  --itsi-bleu:var(--brand-primary,#6499B7);
  position:relative;max-width:860px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-parcours__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Les écrans : un seul visible, fondu court d'un onglet à l'autre ─────── */
.itsi-parcours .ecran{
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.itsi-parcours .ecran.actif{
  opacity:1;visibility:visible;
  transition:opacity .3s ease .06s,visibility 0s;
}

/* Chaque rangée entre par le bas, décalée par son rang --i. */
.itsi-parcours .ligne{opacity:0;transform:translateY(5px)}
.itsi-parcours .ecran.actif .ligne{
  opacity:1;transform:none;
  transition:opacity .3s ease calc(120ms + var(--i) * 34ms),
             transform .44s cubic-bezier(.22,1,.36,1) calc(120ms + var(--i) * 34ms);
}

/* ── Onglets : le libellé passe de gris régulier à bleu gras ─────────────── */
.itsi-parcours .ong-dor,.itsi-parcours .ong-vif{transition:opacity .26s ease}
.itsi-parcours .ong-vif{opacity:0}
.itsi-parcours .onglet.actif .ong-vif{opacity:1}
.itsi-parcours .onglet.actif .ong-dor{opacity:0}

/* Le trait glisse d'un onglet à l'autre : c'est lui qui porte le mouvement. */
.itsi-parcours .souligne{
  transform-box:view-box;transform-origin:0 0;
  transform:translateX(192px) scaleX(0.57280);
  transition:transform .52s cubic-bezier(.34,1.02,.42,1);
}

/* ── Les cases de la liste technique se cochent l'une après l'autre ──────── */
.itsi-parcours .mcase{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
}
.itsi-parcours .ecran--liste.actif .mcase{
  opacity:1;transform:scale(1);
  transition:opacity .2s ease calc(420ms + var(--i) * 62ms),
             transform .34s cubic-bezier(.34,1.56,.64,1) calc(420ms + var(--i) * 62ms);
}

/* ── L'onde du clic ──────────────────────────────────────────────────────── */
.itsi-parcours .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-parcours .onde.part{animation:itsi-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-onde{
  from{opacity:.55;transform:scale(.28)}
  to{opacity:0;transform:scale(1.5)}
}

/* ── Le curseur ─────────────────────────────────────────────────────────── */
.itsi-parcours .curseur{
  opacity:0;transform:translate(616px,306px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .68s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-parcours .curseur.visible{opacity:1}
.itsi-parcours .curseur.saut{transition:none}

/* ── La modale d'export tombe du ciel ───────────────────────────────────── */
.itsi-parcours .voile{opacity:0;transition:opacity .4s ease}
.itsi-parcours .couche-modale.ouverte .voile{opacity:.22}
.itsi-parcours .modale-carte{
  opacity:0;transform:translateY(-26px);
  filter:url(#itsi-ombre-modale);
  transition:opacity .3s ease,transform .56s cubic-bezier(.22,1.24,.36,1);
}
.itsi-parcours .couche-modale.ouverte .modale-carte{opacity:1;transform:translateY(0)}
.itsi-parcours .couche-modale{visibility:hidden;transition:visibility 0s linear .56s}
.itsi-parcours .couche-modale.ouverte{visibility:visible;transition:visibility 0s}

/* ── Mouvement réduit : on se pose sur l'image finale, sans boucle ───────── */
@media (prefers-reduced-motion:reduce){
  .itsi-parcours .ecran,.itsi-parcours .ligne,.itsi-parcours .souligne,
  .itsi-parcours .mcase,.itsi-parcours .curseur,.itsi-parcours .voile,
  .itsi-parcours .modale-carte,.itsi-parcours .ong-dor,.itsi-parcours .ong-vif{
    transition:none!important;animation:none!important;
  }
}

/* ---------- Animation : créer un projet (timeline étape 1, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-projet{
  position:relative;max-width:820px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-projet__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── La fenêtre Projets : centrée tant qu'elle est seule, elle recule
      quand la fenêtre de création vient se poser devant elle ─────────────── */
.itsi-projet .fenetre-arriere{
  transform:translate(31.5px,45.5px);
  transition:transform .75s cubic-bezier(.22,1,.36,1);
}
.itsi-projet.ouvert .fenetre-arriere{transform:none}

/* ── Le menu : l'entrée Projets s'allume ─────────────────────────────────── */
.itsi-projet .nav-actif{opacity:0;transition:opacity .25s ease}
.itsi-projet.projets .nav-actif{opacity:1}

/* ── La page se construit rangée par rangée, et s'efface d'un seul fondu ── */
.itsi-projet .page-projets .ligne{
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease;
}
.itsi-projet.projets .page-projets .ligne{
  opacity:1;transform:none;
  transition:opacity .28s ease calc(60ms + var(--i) * 34ms),
             transform .4s cubic-bezier(.22,1,.36,1) calc(60ms + var(--i) * 34ms);
}

/* ── Le bouton s'enfonce sous le clic ────────────────────────────────────── */
.itsi-projet .btn{transform-box:fill-box;transform-origin:center}
.itsi-projet .btn.presse{animation:itsi-p-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-p-presse{40%{transform:scale(.93)}}

/* ── La nouvelle fenêtre naît du bouton et se déploie jusqu'à sa place ───── */
.itsi-projet .fenetre-avant{
  opacity:0;visibility:hidden;
  transform-box:view-box;transform-origin:536.5px 102.5px;transform:scale(.5);
  transition:opacity .26s ease .1s,transform .48s cubic-bezier(.4,0,.6,1),
             visibility 0s linear .5s;
}
.itsi-projet.ouvert .fenetre-avant{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .28s ease,transform .6s cubic-bezier(.22,1.1,.36,1),visibility 0s;
}
.itsi-projet .section{opacity:0;transform:translateY(6px)}
.itsi-projet.ouvert .section{
  opacity:1;transform:none;
  transition:opacity .3s ease calc(260ms + var(--i) * 110ms),
             transform .45s cubic-bezier(.22,1,.36,1) calc(260ms + var(--i) * 110ms);
}

/* ── Le champ Nom prend le focus ─────────────────────────────────────────── */
.itsi-projet .focus{opacity:0;transition:opacity .2s ease}
.itsi-projet.saisie .focus{opacity:1}
.itsi-projet .caret{opacity:0}
.itsi-projet.saisie .caret{animation:itsi-p-caret 1.05s steps(1) infinite}
@keyframes itsi-p-caret{0%{opacity:1}50%{opacity:0}}

/* ── L'onde du clic et le curseur ────────────────────────────────────────── */
.itsi-projet .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-projet .onde.part{animation:itsi-p-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-p-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
.itsi-projet .curseur{
  opacity:0;transform:translate(596px,397px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-projet .curseur.visible{opacity:1}
.itsi-projet .curseur.saut{transition:none}

/* ── Mouvement réduit : on se pose sur la composition finale, sans boucle ─ */
@media (prefers-reduced-motion:reduce){
  .itsi-projet *{transition:none!important;animation:none!important}
}

/* ---------- Animation : créer un contrat (timeline étape 2, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-contrat{
  position:relative;max-width:820px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-contrat__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Trois couches liées. Le verre dépoli est une copie floutée de la fenêtre
      Contrats, découpée à la forme de la fenêtre de création : pour qu'il reste
      calé pendant le mouvement, sa contre-translation vaut exactement
      (mouvement arrière − mouvement avant), avec la même durée et la même courbe. */
.itsi-contrat .scene-arriere{transform:translate(-32px,57px);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.itsi-contrat.ouvert .scene-arriere,.itsi-contrat.cree .scene-arriere{transform:none}

.itsi-contrat .fenetre-avant{
  opacity:0;visibility:hidden;transform:translate(0,24px);
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .7s;
}
.itsi-contrat.ouvert .fenetre-avant{
  opacity:1;visibility:visible;transform:none;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .35s ease,visibility 0s;
}
.itsi-contrat .contre{transform:translate(-32px,33px);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.itsi-contrat.ouvert .contre{transform:none}
.itsi-contrat.cree .contre{transform:translate(0,-24px)}

/* ── Le formulaire se remplit, et le contrat se rédige en même temps ────── */
.itsi-contrat .saisie,.itsi-contrat .trait{
  transform-box:fill-box;transform-origin:left center;transform:scaleX(0);opacity:0;
  transition:transform 0s linear .45s,opacity 0s linear .45s;   /* on attend que la fenêtre soit partie */
}
.itsi-contrat.ouvert .saisie{
  transform:none;opacity:1;
  transition:transform .42s cubic-bezier(.22,1,.36,1) calc(700ms + var(--i) * 170ms),
             opacity .2s ease calc(700ms + var(--i) * 170ms);
}
.itsi-contrat.ouvert .trait{
  transform:none;opacity:1;
  transition:transform .38s cubic-bezier(.22,1,.36,1) calc(760ms + var(--i) * 72ms),
             opacity .2s ease calc(760ms + var(--i) * 72ms);
}

/* ── Les boutons s'enfoncent sous le clic ────────────────────────────────── */
.itsi-contrat .btn-contrat,.itsi-contrat .btn-creer{transform-box:fill-box;transform-origin:center}
.itsi-contrat .presse{animation:itsi-c-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-c-presse{40%{transform:scale(.92)}}

/* ── Le nouveau contrat prend la tête du tableau ─────────────────────────── */
.itsi-contrat .rangs{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.itsi-contrat.ajoute .rangs{transform:translateY(14px)}
.itsi-contrat .rang:last-child{transition:opacity .3s ease}
.itsi-contrat.ajoute .rang:last-child{opacity:0}
.itsi-contrat .nouvelle-ligne{opacity:0;transition:opacity .3s ease}
.itsi-contrat.ajoute .nouvelle-ligne{opacity:1;transition:opacity .35s ease .15s}
.itsi-contrat .eclat{opacity:0}
.itsi-contrat.ajoute .eclat{animation:itsi-c-eclat 1.7s ease .2s}
@keyframes itsi-c-eclat{0%{opacity:0}18%{opacity:.16}100%{opacity:0}}
.itsi-contrat .nouvelle-ligne .statut{transform-box:fill-box;transform-origin:center}
.itsi-contrat.ajoute .nouvelle-ligne .statut{animation:itsi-c-pop .5s cubic-bezier(.34,1.56,.64,1) .35s backwards}
@keyframes itsi-c-pop{from{transform:scale(.2)}}

/* ── L'onde du clic et le curseur ────────────────────────────────────────── */
.itsi-contrat .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-contrat .onde.part{animation:itsi-c-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-c-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
.itsi-contrat .curseur{
  opacity:0;transform:translate(595px,416px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-contrat .curseur.visible{opacity:1}
.itsi-contrat .curseur.saut{transition:none}

/* ── Mouvement réduit : l'image d'Illu 2, formulaire rempli, sans boucle ── */
@media (prefers-reduced-motion:reduce){
  .itsi-contrat *{transition:none!important;animation:none!important}
}

/* ---------- Animation : inviter la liste technique (timeline étape 3, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-invit{
  position:relative;max-width:820px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-invit__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── On sélectionne tout : les cases se cochent en descendant la page ────── */
.itsi-invit .mcase{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .25s ease,transform .25s ease;
}
.itsi-invit.selection .mcase{
  opacity:1;transform:none;
  transition:opacity .2s ease calc(var(--i) * 55ms),
             transform .34s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 55ms);
}

/* ── Les pastilles : noires, orange d'un seul fondu, puis bleues une à une ── */
.itsi-invit .pastille{
  fill:#171729;transform-box:fill-box;transform-origin:center;
  transition:fill .45s ease;
}
.itsi-invit.envoye .pastille{fill:#E27436}
.itsi-invit .pastille.rejoint{
  fill:#6499B7;transition:fill .4s ease;
  animation:itsi-i-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes itsi-i-pop{45%{transform:scale(1.35)}}

/* ── Le bouton s'enfonce, l'onde naît sous la pointe ─────────────────────── */
.itsi-invit .btn-inviter{transform-box:fill-box;transform-origin:center}
.itsi-invit .btn-inviter.presse{animation:itsi-i-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-i-presse{40%{transform:scale(.93)}}
.itsi-invit .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-invit .onde.part{animation:itsi-i-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-i-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}

.itsi-invit .curseur{
  opacity:0;transform:translate(548px,312px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-invit .curseur.visible{opacity:1}
.itsi-invit .curseur.saut{transition:none}

@media (prefers-reduced-motion:reduce){
  .itsi-invit *{transition:none!important;animation:none!important}
}

/* ---------- Animation : feuilles d'heures, brouillon à signée (timeline étape 4, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-feuilles{
  position:relative;max-width:820px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-feuilles__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Une pile de six pastilles par ligne : seule celle de l'état courant se voit,
      et elle rebondit à peine en arrivant ──────────────────────────────────── */
.itsi-feuilles .puce{
  opacity:0;transform-box:fill-box;transform-origin:left center;
  transition:opacity .28s ease;
}
.itsi-feuilles .statut[data-etat="brouillon"] .p-brouillon,.itsi-feuilles .statut[data-etat="encours"] .p-encours,.itsi-feuilles .statut[data-etat="completee"] .p-completee,.itsi-feuilles .statut[data-etat="validee"] .p-validee,.itsi-feuilles .statut[data-etat="signature"] .p-signature,.itsi-feuilles .statut[data-etat="signee"] .p-signee{opacity:1;animation:itsi-f-pop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes itsi-f-pop{0%{transform:scale(.82)}45%{transform:scale(1.1)}100%{transform:none}}

/* ── L'activation descend la liste ───────────────────────────────────────── */
.itsi-feuilles .eclair{opacity:0}
.itsi-feuilles.activation .eclair{animation:itsi-f-eclair .62s ease calc(var(--i) * 45ms) backwards}
@keyframes itsi-f-eclair{0%{opacity:0}35%{opacity:.2}100%{opacity:0}}

/* ── Le bouton s'enfonce, l'onde naît sous la pointe ─────────────────────── */
.itsi-feuilles .btn-activer{transform-box:fill-box;transform-origin:center}
.itsi-feuilles .btn-activer.presse{animation:itsi-f-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-f-presse{40%{transform:scale(.92)}}
.itsi-feuilles .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-feuilles .onde.part{animation:itsi-f-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-f-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
.itsi-feuilles .curseur{
  opacity:0;transform:translate(560px,420px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-feuilles .curseur.visible{opacity:1}
.itsi-feuilles .curseur.saut{transition:none}

@media (prefers-reduced-motion:reduce){
  .itsi-feuilles *{transition:none!important;animation:none!important}
}

/* ---------- Animation : feuille d'heures, validation (timeline étape 5, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-feuille{
  position:relative;max-width:860px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-feuille__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Liste ↔ grille : fondu croisé, les rangées entrent l'une après l'autre ── */
.itsi-feuille .vue-liste,.itsi-feuille .vue-grille{transition:opacity .28s ease,visibility 0s linear .28s}
.itsi-feuille .vue-grille,.itsi-feuille.grille .vue-liste{opacity:0;visibility:hidden}
.itsi-feuille.grille .vue-grille,.itsi-feuille:not(.grille) .vue-liste{opacity:1;visibility:visible;transition:opacity .3s ease .05s,visibility 0s}
.itsi-feuille .vue-liste .ligne,.itsi-feuille .vue-grille .ligne{opacity:0;transform:translateY(4px)}
.itsi-feuille:not(.grille) .vue-liste .ligne,.itsi-feuille.grille .vue-grille .ligne{
  opacity:1;transform:none;
  transition:opacity .28s ease calc(80ms + var(--i) * 45ms),
             transform .4s cubic-bezier(.22,1,.36,1) calc(80ms + var(--i) * 45ms);
}
.itsi-feuille .b-on{opacity:0;transition:opacity .25s ease}
.itsi-feuille:not(.grille) .bascule-liste .b-on,.itsi-feuille.grille .bascule-grille .b-on{opacity:1}
.itsi-feuille .eclat-ligne{opacity:0;transition:opacity .2s ease}
.itsi-feuille.survol-ligne .eclat-ligne{opacity:.09}

/* ── La modale du détail : le voile tombe, la carte descend et se pose ───── */
.itsi-feuille .modale{visibility:hidden;transition:visibility 0s linear .35s}
.itsi-feuille.modale-ouverte .modale{visibility:visible;transition:visibility 0s}
.itsi-feuille .voile{opacity:0;transition:opacity .35s ease}
.itsi-feuille.modale-ouverte .voile{opacity:.22}
.itsi-feuille .modale-carte{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(-14px) scale(.98);
  transition:opacity .25s ease,transform .3s ease;
}
.itsi-feuille.modale-ouverte .modale-carte{
  opacity:1;transform:none;
  transition:opacity .3s ease,transform .55s cubic-bezier(.22,1.2,.36,1);
}
.itsi-feuille .mligne{opacity:0}
.itsi-feuille.modale-ouverte .mligne{opacity:1;transition:opacity .25s ease calc(220ms + var(--i) * 40ms)}

/* ── Le statut : un menu, puis « Validée » ───────────────────────────────── */
.itsi-feuille .statut-titre{transform-box:fill-box;transform-origin:left center}
.itsi-feuille .statut-titre.presse{animation:itsi-fd-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-fd-presse{40%{transform:scale(.93)}}
.itsi-feuille .menu{
  opacity:0;visibility:hidden;transform-box:fill-box;transform-origin:top left;
  transform:translateY(-4px) scale(.96);
  transition:opacity .18s ease,transform .2s ease,visibility 0s linear .2s;
}
.itsi-feuille.menu-ouvert .menu{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .32s cubic-bezier(.22,1.2,.36,1),visibility 0s;
}
.itsi-feuille .survol{opacity:0;transition:opacity .15s ease}
.itsi-feuille.survol-option .survol{opacity:1}
.itsi-feuille .puce-titre{transform-box:fill-box;transform-origin:left center;transition:opacity .28s ease}
.itsi-feuille .p-validee,.itsi-feuille.valide .p-completee{opacity:0}
.itsi-feuille.valide .p-validee{opacity:1;animation:itsi-fd-pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes itsi-fd-pop{0%{transform:scale(.85)}45%{transform:scale(1.1)}100%{transform:none}}

/* ── L'onde du clic et le curseur ────────────────────────────────────────── */
.itsi-feuille .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-feuille .onde.part{animation:itsi-fd-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-fd-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
.itsi-feuille .curseur{
  opacity:0;transform:translate(616px,334px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-feuille .curseur.visible{opacity:1}
.itsi-feuille .curseur.saut{transition:none}

@media (prefers-reduced-motion:reduce){
  .itsi-feuille *{transition:none!important;animation:none!important}
}

/* ---------- Animation : bulletins de paie, export/externe (timeline étape 6, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-bull{
  position:relative;max-width:860px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-bull__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Sélection : les cases se cochent, deux actions s'allument ───────────── */
.itsi-bull .mcase{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .2s ease,transform .2s ease;
}
.itsi-bull.selection .mcase{
  opacity:1;transform:none;
  transition:opacity .2s ease calc(var(--i) * 70ms),
             transform .32s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 70ms);
}
.itsi-bull .action .b-on{opacity:0;transition:opacity .3s ease}
.itsi-bull.selection .a-0 .b-on,.itsi-bull.selection .a-1 .b-on{opacity:1;transition:opacity .3s ease .2s}

/* ── Les boutons s'enfoncent sous le clic ────────────────────────────────── */
.itsi-bull .btn-export,.itsi-bull .btn-exporter,.itsi-bull .a-0{transform-box:fill-box;transform-origin:center}
.itsi-bull .presse{animation:itsi-b-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-b-presse{40%{transform:scale(.93)}}

/* ── La modale d'export tombe, puis repart ───────────────────────────────── */
.itsi-bull .modale{visibility:hidden;transition:visibility 0s linear .56s}
.itsi-bull.export .modale{visibility:visible;transition:visibility 0s}
.itsi-bull .voile{opacity:0;transition:opacity .4s ease}
.itsi-bull.export .voile{opacity:.22}
.itsi-bull .modale-carte{
  opacity:0;transform:translateY(-24px);filter:url(#ib-ombre-modale);
  transition:opacity .3s ease,transform .56s cubic-bezier(.22,1.24,.36,1);
}
.itsi-bull.export .modale-carte{opacity:1;transform:none}

/* ── Le fichier est parti : une confirmation discrète ────────────────────── */
.itsi-bull .toast{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.itsi-bull.telecharge .toast{opacity:1;transform:none}

/* ── Brouillon → Externe, un bulletin après l'autre ─────────────────────── */
.itsi-bull .puce{transform-box:fill-box;transform-origin:left center;transition:opacity .3s ease}
.itsi-bull .p-externe,.itsi-bull.externe .p-brouillon{opacity:0}
.itsi-bull.externe .p-brouillon{transition:opacity .3s ease calc(var(--i) * 160ms)}
.itsi-bull.externe .p-externe{
  opacity:1;transition:opacity .3s ease calc(var(--i) * 160ms);
  animation:itsi-b-pop .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 160ms) backwards;
}
@keyframes itsi-b-pop{0%{transform:scale(.8)}45%{transform:scale(1.12)}100%{transform:none}}

/* ── L'onde du clic et le curseur ────────────────────────────────────────── */
.itsi-bull .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-bull .onde.part{animation:itsi-b-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-b-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
.itsi-bull .curseur{
  opacity:0;transform:translate(616px,334px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-bull .curseur.visible{opacity:1}
.itsi-bull .curseur.saut{transition:none}

@media (prefers-reduced-motion:reduce){
  .itsi-bull *{transition:none!important;animation:none!important}
}

/* ---------- Animation : demande de traitement des bulletins (timeline étape 7, page Productions) ----------
   Auto-jouée en boucle au scroll (IntersectionObserver), respecte prefers-reduced-motion.
   Voir template-productions.php et main.js. */
.itsi-trait{
  position:relative;max-width:860px;margin:0 auto;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.itsi-trait__svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Sélection : les cases se cochent, deux actions s'allument ───────────── */
.itsi-trait .mcase{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .2s ease,transform .2s ease;
}
.itsi-trait.selection .mcase{
  opacity:1;transform:none;
  transition:opacity .2s ease calc(var(--i) * 70ms),
             transform .32s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 70ms);
}
.itsi-trait .action .b-on{opacity:0;transition:opacity .3s ease}
.itsi-trait.selection .a-0 .b-on,.itsi-trait.selection .a-1 .b-on{opacity:1;transition:opacity .3s ease .2s}

/* ── Les boutons s'enfoncent sous le clic ────────────────────────────────── */
.itsi-trait .a-1{transform-box:fill-box;transform-origin:center}
.itsi-trait .presse{animation:itsi-t-presse .26s cubic-bezier(.34,1.4,.64,1)}
@keyframes itsi-t-presse{40%{transform:scale(.93)}}

/* ── Une pile de pastilles par bulletin : seule celle de l'état courant se voit ── */
.itsi-trait .puce{opacity:0;transform-box:fill-box;transform-origin:left center;transition:opacity .3s ease}
.itsi-trait .statut[data-etat="brouillon"] .p-brouillon,.itsi-trait .statut[data-etat="traitement"] .p-traitement,.itsi-trait .statut[data-etat="traite"] .p-traite,.itsi-trait .statut[data-etat="paye"] .p-paye{opacity:1;animation:itsi-t-pop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes itsi-t-pop{0%{transform:scale(.8)}45%{transform:scale(1.12)}100%{transform:none}}

/* ── L'onde du clic et le curseur ────────────────────────────────────────── */
.itsi-trait .onde{opacity:0;transform-box:fill-box;transform-origin:center}
.itsi-trait .onde.part{animation:itsi-t-onde .62s cubic-bezier(.16,1,.3,1)}
@keyframes itsi-t-onde{from{opacity:.55;transform:scale(.28)}to{opacity:0;transform:scale(1.5)}}
.itsi-trait .curseur{
  opacity:0;transform:translate(616px,334px);
  filter:drop-shadow(0 2px 3px rgba(23,23,41,.28));
  transition:transform .7s cubic-bezier(.34,1.04,.48,1),opacity .3s ease;
}
.itsi-trait .curseur.visible{opacity:1}
.itsi-trait .curseur.saut{transition:none}

@media (prefers-reduced-motion:reduce){
  .itsi-trait *{transition:none!important;animation:none!important}
}