/* =========================================================
   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; }

/* ---------- 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; }

.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);
}
.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; }
	.hero__col--media { display: flex; flex: 1; justify-content: flex-end; }
}

/* ---------- 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; background: var(--white-pure); }
.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__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; }

.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 { display: flex; flex-direction: column; gap: 3rem; position: relative; }
.timeline__step { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.timeline__num {
	display: none;
	width: 3rem; height: 3rem; border-radius: 50%; background: var(--pink-darkest);
	color: var(--white-pure); align-items: center; justify-content: center;
	font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.timeline__content { display: flex; flex-direction: column; gap: .75rem; }
.timeline__media img { border-radius: 8px; }
@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; }
}

/* ---------- 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; }