/* ==========================================================================
   Soluprog — feuille de styles
   Reproduction de la maquette Figma (cadres de 1920 px).
   Échelle : 1rem = 10 px de maquette ; la page se réduit proportionnellement
   jusqu'à 1024 px, puis passe en mise en page mobile empilée.
   ========================================================================== */

/* ---------- Jetons ---------- */
:root {
    --blue: #2F4460;      /* Bleu client */
    --pale: #EAECEF;      /* Gris pâle */
    --grey: #BAC5D4;      /* Gris */
    --white: #FFFFFF;
    --green: #82BC46;     /* Vert - SoluDoc */
    --orange: #EF7B00;    /* Orange - SoluTemps */
    --sky: #0083C9;       /* Bleu - SoluPlan */
    --c: var(--blue);     /* couleur de produit courante */
    --header-h: 11.2rem;
    --ease: cubic-bezier(.65, 0, .35, 1);
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}

.hero-sol--soludoc, .sol-slide--soludoc, .features--soludoc, .benefits--soludoc, .integrations--soludoc, .cta--soludoc { --c: var(--green); }
.hero-sol--solutemps, .sol-slide--solutemps, .features--solutemps, .benefits--solutemps, .integrations--solutemps, .cta--solutemps { --c: var(--orange); }
.hero-sol--soluplan, .sol-slide--soluplan, .features--soluplan, .benefits--soluplan, .integrations--soluplan, .cta--soluplan { --c: var(--sky); }
.cta--dark { --c: var(--blue); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: clamp(5.334px, calc(100vw / 192), 10px);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--white);
    color: var(--blue);
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 2.4rem;
    font-stretch: 100%;
    line-height: normal;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

main { display: block; padding-top: var(--header-h); }
.page-accueil main, .page-entreprise main { padding-top: 0; }

.wrap { width: 153rem; margin-inline: auto; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; left: 1.6rem; top: -10rem; z-index: 1000;
    background: var(--blue); color: #fff; padding: 1.2rem 2rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1.6rem; }

:focus-visible { outline: .3rem solid var(--sky); outline-offset: .3rem; }

.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Typographie ---------- */
.h-section { font-size: 4.8rem; font-weight: 700; text-transform: uppercase; }
.t-lead { font-size: 2.8rem; font-weight: 500; }
.t-body { font-size: 2.4rem; font-weight: 500; }
.t-body > p, p.t-body { white-space: pre-wrap; }
.eyebrow { font-size: 2rem; font-weight: 700; text-transform: uppercase; color: var(--c); white-space: nowrap; }

/* ---------- Bouton (composant Figma « Button ») ---------- */
.btn {
    --bg: var(--blue);
    --fg: var(--white);
    display: inline-flex;
    align-items: stretch;
    height: 5.8rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    text-decoration: none;
    cursor: pointer;
    flex: none;
    -webkit-tap-highlight-color: transparent;
}
.btn__l, .btn__r, .btn__t { background-color: var(--bg); transition: background-color .2s ease-out, color .2s ease-out; }
.btn__l, .btn__r {
    width: 2.2rem;
    flex: none;
    -webkit-mask: url(../img/ui/btn-dark-large-l.svg) center / 100% 100% no-repeat;
    mask: url(../img/ui/btn-dark-large-l.svg) center / 100% 100% no-repeat;
}
.btn__l { margin-right: -1px; }
.btn__r { margin-left: -1px; transform: rotate(180deg); }
.btn__t {
    display: flex;
    align-items: center;
    padding: 0 .6rem;
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.btn--default { height: 4.8rem; }
.btn--default .btn__l, .btn--default .btn__r {
    width: 1.8rem;
    -webkit-mask-image: url(../img/ui/btn-dark-default-l.svg);
    mask-image: url(../img/ui/btn-dark-default-l.svg);
}
.btn--default .btn__t { font-size: 1.8rem; }

.btn--white  { --bg: var(--white);  --fg: var(--blue); }
.btn--dark   { --bg: var(--blue);   --fg: var(--white); }
.btn--green  { --bg: var(--green);  --fg: var(--white); }
.btn--orange { --bg: var(--orange); --fg: var(--white); }
.btn--blue   { --bg: var(--sky);    --fg: var(--white); }

/* Survol (variantes Figma « State=Hover ») : bleu foncé et blanc → bleu vif #0083C9 ;
   vert / orange / bleu → même couleur éclaircie d'un voile blanc à 32 % */
.btn--white, .btn--dark { --bg-h: var(--sky); --fg-h: var(--white); }
.btn--green, .btn--orange, .btn--blue { --bg-h: color-mix(in srgb, var(--bg) 68%, #fff); --fg-h: var(--fg); }
.btn:hover .btn__l, .btn:hover .btn__r, .btn:hover .btn__t,
.btn:focus-visible .btn__l, .btn:focus-visible .btn__r, .btn:focus-visible .btn__t { background-color: var(--bg-h); }
.btn:hover .btn__t, .btn:focus-visible .btn__t { color: var(--fg-h); }
.btn:focus-visible { outline: none; }
.btn:focus-visible .btn__t { text-decoration: underline; text-underline-offset: .4rem; }

/* ---------- Logos ---------- */
.logo { display: block; position: relative; width: 30.569rem; height: 6.604rem; }
.logo__mark { position: absolute; left: 0; top: 0; width: 5.5883rem; height: 100%; }
.logo__text { position: absolute; left: 6.6304rem; top: 2.462rem; width: 23.939rem; height: 2.6798rem; }

.logo-sol { display: inline-grid; grid-template: max-content / max-content; line-height: 0; font-size: 1rem; --logo-w: 36.78; }
.logo-sol > img { grid-area: 1 / 1; }
.logo-sol__mark { width: 7.6051em; height: 9.0044em; }
.logo-sol__text { margin: 3.359em 0 0 9.025em; width: 27.7523em; height: 3.648em; }
.logo-sol--solutemps { --logo-w: 44.8; }
.logo-sol--solutemps .logo-sol__mark { width: 7.6023em; height: 8.9894em; }
.logo-sol--solutemps .logo-sol__text { margin-top: 3.352em; width: 35.7752em; height: 3.6467em; }
.logo-sol--soluplan { --logo-w: 40.6; }
.logo-sol--soluplan .logo-sol__mark { width: 7.6037em; height: 9.0057em; }
.logo-sol--soluplan .logo-sol__text { margin-top: 3.361em; width: 31.5704em; height: 3.6467em; }

/* ---------- Élément de menu ---------- */
.menu-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.menu-item { transition: color .2s ease-out; }
.menu-item:hover, .menu-item:focus-visible { color: var(--sky); }

/* ==========================================================================
   En-tête
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--header-h);
    color: var(--blue);
    background-color: transparent;
    transition: background-color .35s ease, color .35s ease;
}
.site-header[data-theme="white"] { background-color: var(--white); }
.site-header[data-theme="gray"] { background-color: var(--pale); }
.site-header[data-theme="transparent"] { color: var(--white); }

.site-header__inner { position: relative; max-width: 192rem; height: 100%; margin-inline: auto; }

.site-header__logo { position: absolute; left: 19.5rem; top: 2.3rem; display: block; }
.site-header .logo--white { display: none; }
.site-header[data-theme="transparent"] .logo--dark { display: none; }
.site-header[data-theme="transparent"] .logo--white { display: block; }

.site-nav { position: absolute; left: calc(50% + .05rem); top: 4.6rem; transform: translateX(-50%); }
.site-nav__list { display: flex; align-items: center; gap: 3.2rem; }
.site-nav__item { position: relative; display: flex; }
.site-footer__menu li { display: flex; }
.site-nav__sub {
    position: absolute;
    left: 50%;
    top: calc(100% + 2.2rem);
    min-width: 22rem;
    padding: 1.6rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    background: var(--white);
    color: var(--blue);
    border-radius: .2rem;
    box-shadow: 0 .8rem 2.4rem rgba(47, 68, 96, .12);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -.8rem);
    transition: opacity .25s ease, transform .25s var(--ease-out), visibility 0s .25s;
}
.site-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -2.4rem; height: 2.4rem; }
.has-sub:hover .site-nav__sub, .has-sub:focus-within .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .25s ease, transform .25s var(--ease-out), visibility 0s;
}

.site-header__cta { position: absolute; right: 19.5rem; top: 3.2rem; }
.site-header[data-theme="transparent"] [data-btn-theme="header"] { --bg: var(--white); --fg: var(--blue); }

.burger { display: none; }
.mobile-menu { display: none; }

/* ==========================================================================
   Accueil
   ========================================================================== */
.hero-home {
    position: relative;
    height: 108rem;
    margin-bottom: var(--header-h);
    overflow: hidden;
    background: var(--pale);
    color: var(--white);
}
.hero-home__bg { position: absolute; inset: 0; isolation: isolate; }
.hero-home__bg img, .hero-home__bg video { width: 100%; height: 100%; object-fit: cover; object-position: bottom; filter: grayscale(1) contrast(.9); }
/* le filtre de la vidéo crée un contexte d'empilement : les calques doivent passer au-dessus */
.hero-home__bg::before, .hero-home__bg::after { z-index: 1; }
.hero-home__bg::before { content: ""; position: absolute; inset: 0; background: #2C405A; mix-blend-mode: hard-light; }
.hero-home__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--blue) 0%, rgba(47, 68, 96, 0) 29.537%); }
.hero-home__content {
    position: absolute;
    left: calc(50% + .05rem);
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    width: 107.7rem;
    text-align: center;
}
.hero-home__text { display: flex; flex-direction: column; align-items: center; gap: 2.4rem; width: 100%; }
.hero-home__title { width: 107.7rem; font-size: 6.4rem; font-weight: 700; text-transform: uppercase; }
.hero-home__lead { width: 105.3rem; font-size: 2.8rem; }
.hero-home__content > * { animation: rise 1s var(--ease-out) both; }
.hero-home__text { animation-delay: .1s; }
.hero-home__content > .btn { animation-delay: .35s; }

/* Statistiques */
.stats { position: relative; height: 100.4rem; max-width: 192rem; margin-inline: auto; }
.stats__bg { position: absolute; inset: 0; overflow: hidden; border-radius: .2rem; }
.stats__bg img { position: absolute; left: -3.26%; top: -13.19%; width: 110.34%; height: 115.1%; }
.stats__list { position: absolute; left: 19.5rem; top: 65.7rem; width: 153rem; display: flex; gap: 1.6rem; }
.stat {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 4.8rem;
    background: var(--pale);
    border-radius: .2rem;
    white-space: nowrap;
}
.stat__small { font-size: 2.8rem; }
.js .stat.reveal { transition-duration: .45s; }
.stat__big { font-size: 8rem; font-stretch: 110%; font-variant-numeric: tabular-nums; }

/* CTA */
.cta { height: 26.4rem; background: var(--c); color: var(--white); }
.cta__inner { position: relative; max-width: 192rem; height: 100%; margin-inline: auto; }
.cta__text { position: absolute; left: 34.9rem; top: calc(50% - 5.2rem); width: 68.2rem; font-size: 4.8rem; font-weight: 600; font-stretch: 110%; }
.cta__inner > div { position: absolute; left: 123.6rem; top: 10.3rem; }
.cta--solutemps .cta__text { width: 78.7rem; }

/* Sections « texte + image » */
.split { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 16rem; }
.split__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.6rem; width: 63.1rem; }
.split__media { position: relative; width: 76rem; height: 79.1rem; overflow: hidden; border-radius: .2rem; flex: none; }
.split--home-vision, .split--about { height: 79rem; }

/* Nos solutions
   Sans JS (ou animations réduites) : 3 cadres de 1080 px les uns sous les autres, comme dans Figma.
   Avec JS (.is-pinned) : la scène reste fixe à l'écran et les cartes 2 et 3 glissent par-dessus.
   Écran plus haut que la scène (108rem) : elle n'est centrée que pendant l'épinglage (sticky à --frame-top) ;
   avant et après, les espaces avec « Vision globale » et « Valeur commune » restent ceux de la maquette.
   La section a --frame-top de plus : arrêt final où « Valeur commune » monte sous la scène, cartes déjà en place. */
.solutions { position: relative; max-width: 192rem; margin-inline: auto; }
.solutions__title { position: absolute; left: 19.5rem; top: 16.4rem; z-index: 5; }
.sol-slide { position: relative; height: 108rem; }

.solutions.is-pinned { height: calc(324rem + var(--frame-top, 0px)); }
.solutions.is-pinned .solutions__stage { position: sticky; top: var(--frame-top, 0px); height: calc(108rem * var(--frame-scale, 1)); }
.solutions.is-pinned .solutions__frame {
    position: absolute;
    left: 50%;
    top: 0;
    width: 192rem;
    height: 108rem;
    transform: translateX(-50%) scale(var(--frame-scale, 1));
    transform-origin: 50% 0;
}
.solutions.is-pinned .sol-slide { position: absolute; inset: 0; height: auto; will-change: transform; }
.solutions.is-pinned .sol-slide:nth-of-type(2) { z-index: 2; }
.solutions.is-pinned .sol-slide:nth-of-type(3) { z-index: 3; }
.solutions.is-pinned .sol-card { box-shadow: 0 -2.4rem 6.4rem rgba(47, 68, 96, var(--shadow, 0)); }
.sol-slide__counter {
    position: absolute;
    left: 168.2rem;
    top: 17rem;
    padding: .8rem;
    background: var(--white);
    font-size: 2.4rem;
    text-transform: uppercase;
}
.sol-card { position: absolute; left: 19.5rem; top: 24rem; width: 153rem; height: 80rem; overflow: hidden; background: color-mix(in srgb, var(--c) 10%, #fff); }
.sol-card__media { position: absolute; left: 77.3rem; top: 2.4rem; width: 73.3rem; height: 75.2rem; overflow: hidden; border-radius: .2rem; }
.sol-card__media img { position: absolute; }
.sol-slide--soludoc .sol-card__media img { left: -57.94%; top: -2.26%; width: 196.59%; height: 104.52%; }
.sol-slide--solutemps .sol-card__media img { left: -43.19%; top: -11.47%; width: 231.24%; height: 122.94%; }
.sol-slide--soluplan .sol-card__media img { left: -46.05%; top: 0; width: 188.09%; height: 100%; }
.sol-card__content { position: absolute; left: 8.8rem; bottom: 8.796rem; width: 58rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.sol-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; width: 100%; }
.sol-slide--reverse .sol-card__media { left: 2.4rem; }
.sol-slide--reverse .sol-card__content { left: 86.2rem; }
.sol-slide--soluplan .sol-card__content { width: 60.4rem; }

/* Valeur commune */
.value { position: relative; z-index: 1; height: 37rem; background: var(--white); }
.value__inner { position: relative; max-width: 192rem; height: 100%; margin-inline: auto; }
.value__title { position: absolute; left: 34.9rem; top: 9.9rem; width: 28.3rem; }
.value__text { position: absolute; left: 81.3rem; top: 6rem; width: 75.8rem; }

/* Bandeau « Contactez-nous » */
.contact-band { position: relative; height: 53rem; overflow: hidden; background: var(--pale); }
.contact-band__frame { position: relative; max-width: 192rem; height: 100%; margin-inline: auto; }
.contact-band__img { position: absolute; left: 66.7rem; top: -3.4rem; width: 132.8rem; height: 72.4rem; object-fit: cover; }
.contact-band__content { position: absolute; left: 19.5rem; top: 16rem; width: 50.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.contact-band__heading { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; }
.contact-band__heading .t-lead { white-space: pre-wrap; }
.page-entreprise .contact-band { margin-top: 16rem; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer { position: relative; z-index: 1; height: 54.4rem; background: var(--blue); color: var(--white); }
.site-footer__inner { position: relative; max-width: 192rem; height: 100%; margin-inline: auto; }
.site-footer__brand { position: absolute; left: 19.5rem; top: 12.8rem; width: 44.9rem; height: 28.8rem; display: flex; flex-direction: column; justify-content: space-between; }
.site-footer__brand-top { width: 43.1rem; display: flex; flex-direction: column; gap: 2.4rem; }
.site-footer__legal { display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem; white-space: nowrap; }
.site-footer__legal a { text-decoration: none; transition: color .2s ease-out; }
.site-footer__legal a:hover { color: var(--sky); }
.site-footer__items { position: absolute; left: 81.3rem; top: 12.8rem; width: 91.2rem; height: 28.8rem; }
.site-footer__menu { display: flex; align-items: center; gap: 3.2rem; }
.site-footer__divider { position: absolute; left: 0; top: 4.3rem; width: 91.2rem; height: 0; margin: 0; border: 0; border-top: .2rem solid var(--white); }
.site-footer__coords { position: absolute; left: 0; top: 7.6rem; display: flex; align-items: flex-start; gap: 4.3rem; }
.site-footer__items > .btn { position: absolute; left: 0; top: 23rem; }
.site-footer .coord { display: flex; flex-direction: column; gap: .8rem; }
.site-footer .coord--address { width: 45.9rem; }
.site-footer .coord--phone { width: 15.2rem; }
.site-footer .coord-group { display: flex; flex-direction: column; gap: 1.6rem; }
.site-footer .coord--email { width: 21.5rem; }
.coord__label { font-size: 1.8rem; font-weight: 700; text-transform: uppercase; }
.coord__value { font-size: 2.4rem; }
.coord__value a { text-decoration: none; transition: color .2s ease-out; }
.coord__value a:hover, .coord__value a:focus-visible { color: var(--sky); }

/* ==========================================================================
   Pages solutions
   ========================================================================== */
.hero-sol { position: relative; height: 96.8rem; overflow: hidden; background: var(--pale); max-width: 192rem; margin-inline: auto; }
.hero-sol__bg { position: absolute; inset: 0; overflow: hidden; }
.hero-sol__bg img { position: absolute; }
.hero-sol--soludoc .hero-sol__bg img { left: -.26%; top: -23.15%; width: 124.53%; height: 134.73%; }
.hero-sol--solutemps .hero-sol__bg img { left: 0; top: -4.09%; width: 105.78%; height: 114.44%; }
.hero-sol--soluplan .hero-sol__bg img { left: -9.55%; top: -21.5%; width: 115.17%; height: 128.55%; }
.hero-sol__card {
    position: absolute;
    left: 19.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 6.4rem;
    background: var(--white);
    border-radius: .2rem;
    animation: heroCard 1s .4s cubic-bezier(0, 0, .2, 1) both;
}
.hero-sol__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.hero-sol__text .t-lead { width: 60.9rem; }

.split--sol { height: 56rem; }
.split--sol .split__text { width: var(--w, 61.1rem); }
.split--sol .t-body { width: 61.1rem; }
.page-soluplan .split--sol .t-body { width: 71.8rem; }
.split__visual { position: relative; width: 75.7rem; height: 56rem; flex: none; align-self: flex-start; }
.visual-doc, .visual-time, .visual-plan { position: absolute; left: 0; top: 0; width: 75.7rem; height: 56rem; overflow: hidden; transform-origin: 0 0; }

/* Visuel Soludoc (composant Figma « Soludoc visuel », 6 états, boucle de 8,35 s) :
   fichiers empilés → étalés → ligne de balayage aller-retour → réempilés */
.visual-doc { background: var(--white); }
.file-icon { position: absolute; width: 14.4rem; height: 18.5143rem; }
.file-icon--img { left: 29.1rem; top: 21.1rem; z-index: 1; animation: docImg 8.35s infinite; }
.file-icon--doc { left: 30.7rem; top: 18.7rem; z-index: 2; }
.file-icon--pdf { left: 33.1rem; top: 16.3rem; z-index: 3; animation: docPdf 8.35s infinite; }
.file-icon__shape { position: absolute; left: -.15rem; top: -.15rem; width: 14.7rem; height: 18.8143rem; }
.file-icon__corner { position: absolute; left: 9.106rem; top: -.15rem; width: 5.4429rem; height: 5.4429rem; }
.file-icon__label {
    position: absolute;
    left: 50%;
    top: 60.98%;
    transform: translateX(-50%);
    font-size: 4.2146rem;
    color: var(--green);
    white-space: nowrap;
    line-height: normal;
}
.visual-doc__scan {
    position: absolute; left: 7.9rem; top: 14.45rem; z-index: 4; width: 60rem; height: .5rem;
    border-radius: .25rem; background: var(--sky);
    box-shadow: 0 0 .8rem .2rem rgba(0, 131, 201, .35), 0 0 2.8rem 1.2rem rgba(0, 131, 201, .16);
    opacity: 0; animation: docScan 8.35s infinite;
}
.js .visual-doc:not(.is-playing) *, .js .visual-time:not(.is-playing) *, .js .visual-plan:not(.is-playing) * { animation-play-state: paused; }

/* Visuel Solutemps : mouvement du composant Figma « Solutemps visuel » (allumage ×1,15 en 0,3 s ease-in,
   retour 0,3 s ease-out, maintien 0,5 s, extinction 2 s ease-out, pause 0,8 s) appliqué tour à tour
   aux 4 tuiles, avec le chrono qui compte les secondes (demande du client, comme la version 1).
   Boucle de 15,604 s ; chaque tuile est décalée de 3,901 s (--d) ; le texte est mis à jour en JS. */
.time-tile {
    position: absolute;
    left: calc(var(--x) * .1rem);
    top: calc(var(--y) * .1rem);
    width: 14.4rem;
    height: 14.4rem;
    overflow: hidden;
    border: .3rem solid var(--grey);
    border-radius: 1.6rem;
    background: var(--white);
}
.time-tile__user {
    position: absolute;
    left: 4.5rem;
    top: 1.6rem;
    width: 4.9rem;
    height: 6.5611rem;
    transform: scaleY(-1);
    background-color: var(--grey);
    -webkit-mask: url(../img/icons/user-grey.svg) center / 100% 100% no-repeat;
    mask: url(../img/icons/user-grey.svg) center / 100% 100% no-repeat;
}
.time-tile__time {
    position: absolute;
    left: .05rem; right: 0;
    bottom: 1.22rem;
    text-align: center;
    font-size: 3.2rem;
    color: var(--grey);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.time-tile { animation: timeTile 15.604s var(--d, 0s) infinite backwards; }
.time-tile__user { animation: timeIcon 15.604s var(--d, 0s) infinite backwards; }
.time-tile__time--value { opacity: 0; color: var(--orange); animation: timeValue 15.604s var(--d, 0s) infinite backwards; }
.time-tile__time--dash { animation: timeDash 15.604s var(--d, 0s) infinite backwards; }
/* sans animation (animations réduites) : première tuile allumée */
.time-tile--lit { border-color: var(--orange); background-color: rgb(253.4, 241.8, 229.5); } /* orange à 10 % sur blanc */
.time-tile--lit .time-tile__user { background-color: var(--orange); }
.time-tile--lit .time-tile__time--value { opacity: 1; }
.time-tile--lit .time-tile__time--dash { opacity: 0; }

/* Visuel Soluplan (composant Figma « Soluplan visuel », 6 états, boucle de 6 s) :
   4 traits de 1 s (ease-in-out) séparés de 0,2 s ; le montant change à chaque trait */
.visual-plan__rect { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.visual-plan__rect path {
    fill: none;
    stroke: var(--sky);
    stroke-width: 3;
    stroke-dasharray: 1120;
    stroke-dashoffset: 1120;
    animation: planDraw 6s infinite;
}
.visual-plan__pen { position: absolute; left: 23.95rem; top: 6.75rem; width: 7.5rem; height: 7.5rem; animation: planPen 6s infinite; }
.visual-plan__price {
    position: absolute;
    left: calc(50% + .05rem);
    top: calc(50% - 2.2rem);
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    font-size: 4rem;
    color: var(--sky);
    white-space: nowrap;
}
.visual-plan__price span { grid-area: 1 / 1; opacity: 0; animation-duration: 6s; animation-iteration-count: infinite; }
.visual-plan__price span:nth-child(1) { animation-name: planAmount1; }
.visual-plan__price span:nth-child(2) { animation-name: planAmount2; }
.visual-plan__price span:nth-child(3) { animation-name: planAmount3; }
.visual-plan__price span:nth-child(4) { animation-name: planAmount4; }

/* Fonctionnalités : liste défilante */
.features-wrap { margin-top: 16rem; }
.features { position: relative; height: 53.4rem; overflow: hidden; background: var(--pale); border-radius: .2rem; }
.features__heading { position: absolute; left: 15.4rem; top: 19.8rem; width: 54.8rem; display: flex; flex-direction: column; gap: 1.2rem; }
.features__heading .h-section { width: 50rem; }
.features--soluplan .features__heading .h-section { width: 52.3rem; }
.features__ticker { position: absolute; left: 88.2rem; top: 9.6rem; display: flex; align-items: center; gap: 1.6rem; }
.features--multiline .features__ticker { left: 80.2rem; }
.features__marker { width: 1.3177rem; height: 2.2676rem; margin: -.1338rem -.2691rem -.1338rem -.1486rem; flex: none; }
.features__viewport { position: relative; width: 46.9rem; height: 34.2rem; overflow: hidden; }
.features--wide .features__viewport { width: 63.5rem; }
.features__list { display: flex; flex-direction: column; gap: 4.8rem; will-change: transform; }
.features__list.is-animated { transition: transform .3s ease-out; }
.features__item { font-size: 2.8rem; white-space: nowrap; opacity: .4; transition: opacity .3s ease-out; }
.features--wide .features__item { white-space: normal; }
.features__item.is-active { opacity: 1; }
.features__list:not(.is-animated) .features__item { transition: none; }

/* La correspondance */
.matching { position: relative; width: 161.3rem; height: 69.2rem; margin: 16rem auto 0; }
.matching__heading { position: absolute; z-index: 2; left: 46.7rem; top: 0; width: 67.8rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.matching__titles { display: flex; flex-direction: column; gap: .8rem; width: 100%; }
.switch { position: relative; width: 67.8rem; height: 9rem; background: var(--pale); border-radius: .2rem; }
.switch__select {
    position: absolute;
    left: .8rem;
    top: .8rem;
    width: 31.9rem;
    height: 7.4rem;
    background: var(--white);
    border-radius: .2rem;
    box-shadow: 0 .4rem .4rem rgba(0, 0, 0, .08);
    transition: transform .3s ease-out, width .3s ease-out;
}
.switch[data-active="3"] .switch__select { transform: translateX(33.7rem); width: 32.5rem; }
.switch__btn {
    position: absolute;
    top: .8rem;
    height: 7.4rem;
    padding: 0 4.8rem;
    border: 0;
    border-radius: .2rem;
    background: none;
    font-size: 2.4rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--blue);
    opacity: .6;
    cursor: pointer;
    transition: opacity .3s ease-out;
}
.switch__btn[data-factors="2"] { left: .8rem; width: 31.9rem; }
.switch__btn[data-factors="3"] { left: 34.5rem; width: 32.5rem; }
.switch__btn.is-active, .switch__btn:hover { opacity: 1; }

.matching__graph { position: absolute; inset: 0; }
.mg-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.2rem 4.8rem;
    border: .2rem solid var(--grey);
    border-radius: 1.6rem;
    background: color-mix(in srgb, var(--grey) 10%, #fff);
    font-size: 2.8rem;
    text-align: center;
}
.mg-box--payables { z-index: 1; left: 0; top: 43rem; width: 36.4rem; height: 12.4rem; }
.mg-box--payables p { width: 26.8rem; }
.mg-box--erp { display: grid; place-items: center; left: 138.7rem; top: 41.3rem; width: 22.6rem; height: 15.8rem; }
.mg-box--erp p { grid-area: 1 / 1; transition: opacity .3s ease-out; }
.mg-box--erp .mg-erp--long { width: 14rem; }
.mg-box--soludoc { left: 65.1rem; top: 29.2rem; width: 40rem; height: 40rem; padding: 0; border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, #fff); }
.mg-box--soludoc .logo-sol { transform: scale(.797); }
.mg-file { position: absolute; z-index: 0; width: 7.5rem; height: 9.6rem; transform-origin: 50% 50%; }
.mg-file--1 { left: 7.85rem; top: 36.4rem; transform: rotate(-11.91deg); }
.mg-file--2 { left: 20.65rem; top: 38.2rem; transform: rotate(20.26deg); }
.mg-file--3 { left: 14.1rem; top: 34.8rem; transform: rotate(5.7deg); }
.matching.is-visible .mg-file { animation: fileFloat 4s ease-in-out infinite; }
.matching.is-visible .mg-file--2 { animation-delay: -1.3s; }
.matching.is-visible .mg-file--3 { animation-delay: -2.6s; }

.mg-label { position: absolute; font-size: 2.4rem; text-align: center; white-space: nowrap; transition: top .3s ease-out, opacity .3s ease-out; }
.mg-label--in { left: 46.6rem; top: 45.4rem; }
.mg-label--po { left: 115.6rem; top: 36.9rem; width: 12.6rem; white-space: normal; }
.mg-label--receipt { left: 116.3rem; top: 57.2rem; }
.mg-label--out { left: 117.8rem; top: 51.3rem; }

.mg-arrow { position: absolute; display: block; height: 0; transition: top .3s ease-out, opacity .3s ease-out; }
.mg-arrow--in { left: 40.4rem; top: 49.2rem; width: 20.6rem; }
.mg-arrow--po { left: 111.6rem; top: 43.3rem; width: 20.5rem; }
.mg-arrow--receipt { left: 111.6rem; top: 61rem; width: 20.5rem; }
.mg-arrow--out { left: 111.6rem; top: 55.1rem; width: 20.5rem; }
.mg-arrow__line { position: absolute; left: 0; right: 0; top: -.1rem; height: .2rem; background: var(--grey); }
.mg-arrow__line { transform-origin: left; }
.mg-arrow__head { position: absolute; right: -.1rem; top: -2.27rem; width: 2.2091rem; height: 4.5345rem; background: url(../img/ui/corr-marker.svg) center / 100% 100% no-repeat; }
.mg-arrow__head--rev { left: -.1rem; right: auto; transform: scaleX(-1); }
.matching.is-visible .mg-arrow__line { animation: lineDraw .9s var(--ease) both; }

.matching__graph[data-factors="2"] .mg-label--receipt,
.matching__graph[data-factors="2"] .mg-arrow--receipt,
.matching__graph[data-factors="2"] .mg-erp--short,
.matching__graph[data-factors="3"] .mg-erp--long { opacity: 0; pointer-events: none; }
.matching__graph[data-factors="3"] .mg-label--po { top: 31rem; }
.matching__graph[data-factors="3"] .mg-arrow--po { top: 37.4rem; }
.matching__graph[data-factors="3"] .mg-label--out { top: 45.4rem; }
.matching__graph[data-factors="3"] .mg-arrow--out { top: 49.2rem; }

/* Bénéfices */
.benefits {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: var(--min-h);
    margin-top: 16rem;
    padding: 9.6rem 0;
    background: color-mix(in srgb, var(--c) 10%, #fff);
}
.benefits__heading { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; white-space: nowrap; }
.benefits__list { display: flex; flex-direction: column; gap: 1.6rem; width: 91.2rem; margin-top: 4.8rem; }
.benefit { display: flex; align-items: center; gap: 2.4rem; padding: 4rem 4.8rem; background: var(--white); border-radius: .2rem; font-size: 2.4rem; }
.benefit img { width: 5.1rem; height: 5.1rem; margin: -.15rem; flex: none; }

/* Intégrations */
.integrations { position: relative; height: 67.5rem; max-width: 192rem; margin: 9.6rem auto; }
.integrations__text { position: absolute; left: 19.5rem; top: calc(50% + .05rem); transform: translateY(-50%); width: 58.3rem; display: flex; flex-direction: column; gap: 1.6rem; }
.js .integrations .integrations__text.reveal { transform: translateY(calc(-50% + 4rem)); }
.js .integrations .integrations__text.reveal.is-visible { transform: translateY(-50%); }
.integrations__heading { display: flex; flex-direction: column; gap: 1.2rem; width: 44.9rem; }
.integrations--solutemps .integrations__heading { width: 100%; }
.integrations__cloud { position: absolute; left: 109.2rem; top: 4.9rem; width: 57.6rem; height: 57.6rem; transform-origin: 0 0; }
.int-logo {
    position: absolute;
    left: calc(var(--x) * 10rem);
    top: calc(var(--y) * 10rem);
    width: 17.6rem;
    height: 17.6rem;
    border: .2rem solid var(--grey);
    border-radius: 50%;
    background: var(--white);
    transition: border-color .3s ease;
}
.int-logo img { position: absolute; left: -.2rem; top: -.2rem; width: 17.6rem; height: 17.6rem; }
.int-logo--avantage img { left: 1.43rem; top: 7.54rem; width: 14.337rem; height: 2.921rem; }
.int-logo--ctrl img { left: 3rem; top: 7rem; width: 11.2rem; height: 3.3rem; }
.int-logo--acomba img { left: 1.8rem; top: 7rem; width: 13.6rem; height: 2.7rem; }
.int-logo--allpriser img { left: 2.2rem; top: 7.3rem; width: 12.8rem; height: 2.6rem; object-fit: cover; }
.int-logo--eplans img { left: 2.2rem; top: 6.8rem; width: 12.8rem; height: 3.6rem; object-fit: cover; }
.int-logo:hover { border-color: var(--c); }
.js .int-logo { opacity: 0; transform: scale(.85); transition: opacity .6s ease, transform .6s var(--ease-out), border-color .3s ease; transition-delay: calc(var(--d) * 90ms), calc(var(--d) * 90ms), 0s; }
.js .integrations__cloud.is-visible .int-logo { opacity: 1; transform: none; }

/* ==========================================================================
   Entreprise
   ========================================================================== */
.hero-about { position: relative; height: 108rem; overflow: hidden; background: var(--pale); }
.hero-about__title { position: absolute; left: calc(50% + .05rem); top: 20.8rem; width: 110.3rem; margin-left: -55.15rem; font-size: 6.4rem; font-weight: 700; text-transform: uppercase; text-align: center; }
.hero-about__media { position: absolute; left: 50%; top: 41.2rem; width: 140.8rem; height: 66.8rem; margin-left: -70.4rem; background: var(--white); }
.split--about-1 { margin-top: 16rem; }
.split__media--crop-qui { background: var(--pale); }
.split__media--crop-qui img { position: absolute; left: -37.26%; top: 7.33%; width: 176.88%; height: 92.7%; }
.split__media--crop-pourquoi img { position: absolute; left: -46.2%; top: 0; width: 190.81%; height: 100%; }
.approach { display: flex; align-items: center; justify-content: center; height: 53.8rem; margin-top: 16rem; background: var(--blue); color: var(--white); }
.approach__text { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 89.3rem; text-align: center; }
.approach__text .h-section { width: 100%; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-page { display: flex; flex-direction: column; align-items: center; gap: 6.4rem; width: 122.2rem; margin-inline: auto; padding: 11.2rem 0; }
.faq-page__title { width: 100%; font-size: 6.4rem; font-weight: 700; text-transform: uppercase; text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; }
.accordion { background: var(--pale); border-radius: .2rem; overflow: hidden; }
.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.2rem;
    padding: 4rem 4.8rem;
    cursor: pointer;
    list-style: none;
}
.accordion__header::-webkit-details-marker { display: none; }
.accordion__header::marker { content: ""; }
.accordion__q { font-size: 2.4rem; font-weight: 600; text-transform: uppercase; text-align: left; }
.accordion__chevron { width: 1.2133rem; height: 2.2007rem; margin: -.65rem .39rem; transform: rotate(90deg); transition: transform .3s ease-out; flex: none; }
.accordion[open] .accordion__chevron { transform: rotate(-90deg); }
.accordion.is-closing .accordion__chevron { transform: rotate(90deg); }
.accordion__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; margin-top: -.8rem; padding: 0 4.8rem 4rem; }
@media (hover: hover) {
    .accordion__header:hover .accordion__q { text-decoration: underline; text-underline-offset: .5rem; text-decoration-thickness: .2rem; }
}

/* ==========================================================================
   Nous joindre
   ========================================================================== */
.contact-page { display: flex; flex-direction: column; align-items: stretch; width: 91.2rem; margin-inline: auto; padding: 11.2rem 0; }
.contact-page__title { font-size: 6.4rem; font-weight: 700; text-transform: uppercase; text-align: center; white-space: nowrap; }
.contact-page__intro { width: 94.9rem; margin: 3.2rem -1.85rem 0; font-size: 2.8rem; text-align: center; }
.form-alert { margin-top: 4rem; padding: 2.4rem 3.2rem; border-left: .4rem solid #C62828; background: #FDECEA; font-size: 2rem; }
.form-alert ul { margin-top: .8rem; padding-left: 2.4rem; list-style: disc; }
.form { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; margin-top: 7.2rem; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: flex; gap: 4rem; width: 100%; }
.field { display: flex; flex: 1 0 0; flex-direction: column; gap: 1.2rem; min-width: 0; }
.form > .field { width: 100%; flex: none; }
.field__label { font-size: 1.8rem; font-weight: 700; text-transform: uppercase; }
.field__input {
    width: 100%;
    height: 5.8rem;
    padding: 0 1.6rem;
    border: .15rem solid var(--grey);
    border-radius: .2rem;
    background: var(--white);
    font-size: 2.4rem;
    color: var(--blue);
    transition: border-color .2s ease;
}
.field__input:hover { border-color: color-mix(in srgb, var(--grey) 60%, var(--blue)); }
.field__input:focus { outline: none; border-color: var(--blue); }
.field__input--area { height: 23.2rem; padding: 1.6rem; resize: vertical; }
.field__input[aria-invalid="true"] { border-color: #C62828; }

.contact-info { height: 70.2rem; background: var(--pale); }
.contact-info__content { display: flex; align-items: flex-start; justify-content: center; gap: 6.4rem; padding-top: 8rem; }
.contact-info__items { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4rem; width: 55.5rem; height: 54.2rem; }
.contact-info__coords { display: flex; flex-direction: column; gap: 4rem; }
.contact-info .coord { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-info .coord__label, .contact-info .coord__value { font-size: 2.4rem; }
.contact-info__map { position: relative; display: block; width: 60.3rem; height: 54.2rem; overflow: hidden; border-radius: .2rem; }
.contact-info__map img { position: absolute; left: -95.01%; top: -52.88%; width: 278.94%; height: 178.23%; }

/* Confirmation */
.confirm { height: 96.8rem; padding-top: 36.2rem; text-align: center; }
.confirm__title { font-size: 6.4rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.confirm__text { width: 94.9rem; margin: 3.2rem auto 0; font-size: 2.8rem; }

/* Politique de confidentialité */
.legal { width: 122.2rem; margin-inline: auto; padding: 11.2rem 0 16rem; }
.legal__title { font-size: 6.4rem; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 6.4rem; }
.legal__body h2 { margin: 4.8rem 0 1.6rem; font-size: 2.8rem; font-weight: 700; text-transform: uppercase; }
.legal__body p { margin-bottom: 1.6rem; }

/* ==========================================================================
   Animations
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(4rem); transition: opacity .9s ease, transform .9s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: none; } }
@keyframes heroCard { from { opacity: 0; transform: translateY(calc(-50% + 4.8rem)); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fileFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.8rem; } }

/* Soludoc : 0-2 s empilés · 2-3 s étalement · 4-4,3 s ligne visible · 4,5-5,5 s descente ·
   5,5-6,5 s remontée · 6,55-6,85 s ligne masquée · 7,85-8,35 s réempilement */
@keyframes docImg {
    0%, 23.95%     { transform: none; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    35.93%, 94.01% { transform: translate(19.6rem, -2.4rem); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    100%           { transform: none; }
}
@keyframes docPdf {
    0%, 23.95%     { transform: none; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    35.93%, 94.01% { transform: translate(-20.4rem, 2.4rem); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    100%           { transform: none; }
}
@keyframes docScan {
    0%, 47.9%      { opacity: 0; transform: none; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    51.5%, 53.89%  { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    65.87%         { opacity: 1; transform: translateY(26.6rem); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    77.84%, 78.44% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    82.04%, 100%   { opacity: 0; transform: none; }
}

/* Solutemps (τ = temps depuis l'allumage de la tuile, boucle 15,604 s) : 0-0,3 s allumage ×1,15 (ease-in) ·
   0,301-0,601 s retour à la taille (ease-out) · 1,101-3,101 s extinction (ease-out) ·
   3,901-4,201 s « mm:ss » → « --:-- » (ease-in, pendant l'allumage de la tuile suivante) */
@keyframes timeTile {
    0%               { border-color: var(--grey); background-color: var(--white); transform: none; animation-timing-function: ease-in; }
    1.9226%, 1.929%  { border-color: var(--orange); background-color: rgb(253.4, 241.8, 229.5); transform: scale(1.15); animation-timing-function: ease-out; }
    3.8516%, 7.0559% { border-color: var(--orange); background-color: rgb(253.4, 241.8, 229.5); transform: none; animation-timing-function: ease-out; }
    19.8731%, 100%   { border-color: var(--grey); background-color: var(--white); transform: none; }
}
@keyframes timeIcon {
    0%               { background-color: var(--grey); animation-timing-function: ease-in; }
    1.9226%, 7.0559% { background-color: var(--orange); animation-timing-function: ease-out; }
    19.8731%, 100%   { background-color: var(--grey); }
}
@keyframes timeValue {
    0%               { opacity: 0; color: var(--orange); animation-timing-function: ease-in; }
    1.9226%, 7.0559% { opacity: 1; color: var(--orange); animation-timing-function: ease-out; }
    19.8731%, 25%    { opacity: 1; color: var(--grey); animation-timing-function: ease-in; }
    26.9226%, 100%   { opacity: 0; color: var(--grey); }
}
@keyframes timeDash {
    0%               { opacity: 1; animation-timing-function: ease-in; }
    1.9226%, 25%     { opacity: 0; animation-timing-function: ease-in; }
    26.9226%, 100%   { opacity: 1; }
}

/* Soluplan : traits 0,2-1,2 s (bas) · 1,4-2,4 s (droite) · 2,6-3,6 s (haut) · 3,8-4,8 s (gauche) · 5-6 s fondu */
@keyframes planPen {
    0%, 3.333%    { transform: none; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    20%, 23.333%  { transform: translate(0, 27.9rem); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    40%, 43.333%  { transform: translate(27.8rem, 27.8rem); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    60%, 63.333%  { transform: translate(27.7rem, -.1rem); animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    80%, 100%     { transform: none; }
}
@keyframes planDraw {
    0%, 3.333%    { stroke-dashoffset: 1120; opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    20%, 23.333%  { stroke-dashoffset: 840; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    40%, 43.333%  { stroke-dashoffset: 560; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    60%, 63.333%  { stroke-dashoffset: 280; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    80%, 83.333%  { stroke-dashoffset: 0; opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    100%          { stroke-dashoffset: 0; opacity: 0; }
}
/* Montants : fondu enchaîné pendant tout le trait (smart animate Figma) */
@keyframes planAmount1 {
    0%, 3.333%   { opacity: 0; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    20%, 23.333% { opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    40%, 100%    { opacity: 0; }
}
@keyframes planAmount2 {
    0%, 23.333%  { opacity: 0; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    40%, 43.333% { opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    60%, 100%    { opacity: 0; }
}
@keyframes planAmount3 {
    0%, 43.333%  { opacity: 0; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    60%, 63.333% { opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    80%, 100%    { opacity: 0; }
}
@keyframes planAmount4 {
    0%, 63.333%  { opacity: 0; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    80%, 83.333% { opacity: 1; animation-timing-function: cubic-bezier(.42, 0, .58, 1); }
    100%         { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js .reveal, .js .int-logo { opacity: 1; transform: none; }
    .visual-doc *, .visual-time *, .visual-plan * { animation: none !important; }
    .visual-plan__rect path { stroke-dashoffset: 0; }
    .visual-plan__price span:nth-child(4) { opacity: 1; }
}

/* ==========================================================================
   Mobile et tablette portrait (< 1024 px)
   ========================================================================== */
@media (max-width: 1023.98px) {
    :root { --header-h: 7.2rem; }
    html { font-size: 10px; }
    body { font-size: 1.7rem; }

    .h-section { font-size: 3rem; }
    .t-lead { font-size: 2rem; }
    .t-body { font-size: 1.7rem; }
    .eyebrow { font-size: 1.4rem; }

    .btn { height: 5rem; }
    .btn__l, .btn__r { width: 1.9rem; }
    .btn__t { font-size: 1.8rem; }
    .btn--default { height: 4.4rem; }
    .btn--default .btn__l, .btn--default .btn__r { width: 1.65rem; }
    .btn--default .btn__t { font-size: 1.5rem; }

    .wrap { width: auto; margin-inline: 2rem; }

    /* En-tête */
    .site-header__logo { left: 2rem; top: 50%; transform: translateY(-50%); height: 4rem; }
    .site-header__logo .logo { transform: scale(.6); transform-origin: 0 0; }
    .site-nav, .site-header__cta { display: none; }
    .burger {
        position: absolute;
        right: 1.2rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: .6rem;
        width: 4.8rem;
        height: 4.8rem;
        padding: 1.2rem;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .burger span { display: block; height: .25rem; background: currentColor; border-radius: .2rem; transition: transform .3s var(--ease), opacity .2s ease; }
    .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.85rem) rotate(45deg); }
    .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.85rem) rotate(-45deg); }
    .mobile-menu {
        position: fixed;
        inset: var(--header-h) 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3.2rem;
        padding: 3.2rem 2rem 4rem;
        overflow-y: auto;
        background: var(--white);
        color: var(--blue);
    }
    .mobile-menu[hidden] { display: none; }
    .mobile-menu ul { display: flex; flex-direction: column; gap: 2rem; width: 100%; }
    .mobile-menu a:not(.btn) { font-size: 2.4rem; font-weight: 700; text-transform: uppercase; text-decoration: none; }
    body.menu-open { overflow: hidden; }

    /* Accueil */
    .hero-home { height: auto; min-height: 100svh; margin-bottom: 0; display: flex; align-items: center; padding: calc(var(--header-h) + 4rem) 2rem 6.4rem; }
    .hero-home__content { position: relative; left: auto; top: auto; transform: none; width: 100%; }
    .hero-home__title { width: 100%; font-size: 3.4rem; }
    .hero-home__lead { width: 100%; font-size: 1.8rem; }
    .hero-home__title br { display: none; }

    .stats { height: auto; padding: 32rem 2rem 2rem; }
    .stats__bg { bottom: auto; height: 44rem; }
    .stats__bg img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
    .stats__list { position: relative; left: auto; top: auto; width: 100%; flex-direction: column; gap: 1.2rem; }
    .stat { padding: 2.4rem; white-space: normal; }
    .stat__small { font-size: 1.8rem; }
    .stat__big { font-size: 4.4rem; }

    .cta { height: auto; padding: 4.8rem 2rem; }
    .cta__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
    .cta__text, .cta--solutemps .cta__text, .cta__inner > div { position: static; width: auto; font-size: 3rem; }

    .split, .split--home-vision, .split--about, .split--sol { flex-direction: column; align-items: stretch; gap: 3.2rem; height: auto; margin-top: 6.4rem; }
    .split__text, .split--sol .split__text { width: auto; }
    .split .t-body, .split--sol .t-body, .page-soluplan .split--sol .t-body { width: auto; }
    .split__text .h-section { max-width: none !important; }
    .split__media { width: 100%; height: auto; aspect-ratio: 760 / 791; }
    .split__visual { width: 100%; height: auto; aspect-ratio: 757 / 560; overflow: hidden; }

    .solutions { padding-top: 6.4rem; }
    .solutions__stage, .solutions__frame { display: contents; }
    .solutions__title { position: static; padding: 0 2rem 1.6rem; }
    .sol-slide { position: relative; height: auto; padding: 0 2rem 3.2rem; }
    .sol-slide__counter { position: static; padding: 0 0 .8rem; text-align: right; font-size: 1.6rem; }
    .sol-card { position: static; width: auto; height: auto; display: flex; flex-direction: column; }
    .sol-card__media, .sol-slide--reverse .sol-card__media { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 733 / 752; margin: 1.2rem 1.2rem 0; }
    .sol-card__content, .sol-slide--reverse .sol-card__content, .sol-slide--soluplan .sol-card__content { position: static; width: auto; padding: 2.4rem 2rem 3.2rem; }
    .sol-card .logo-sol { font-size: min(.7rem, calc((100vw - 8rem) / var(--logo-w))); }

    .value { height: auto; padding: 6.4rem 2rem; }
    .value__title, .value__text { position: static; width: auto; }
    .value__text { margin-top: 2.4rem; }

    .contact-band { height: auto; }
    .contact-band__frame { display: flex; flex-direction: column; }
    .contact-band__content { order: 1; position: static; width: auto; padding: 6.4rem 2rem 0; }
    .contact-band__img { order: 2; position: static; width: 100%; height: 30rem; margin-top: 3.2rem; object-fit: cover; object-position: 50% 100%; }
    .page-entreprise .contact-band { margin-top: 6.4rem; }

    /* Pied de page */
    .site-footer { height: auto; padding: 6.4rem 2rem 4rem; }
    .site-footer__inner { display: flex; flex-direction: column-reverse; gap: 4rem; }
    .site-footer__brand, .site-footer__items { position: static; width: auto; height: auto; }
    .site-footer__brand { gap: 4rem; }
    .site-footer__brand-top { width: auto; }
    .site-footer__brand .logo { zoom: .75; }
    .site-footer__legal { gap: 2rem; flex-wrap: wrap; }
    .site-footer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.4rem; }
    .site-footer__divider { position: static; width: 100%; margin: 2.4rem 0; }
    .site-footer__coords { position: static; flex-direction: column; gap: 2.4rem; }
    .site-footer .coord--address, .site-footer .coord--phone, .site-footer .coord--email { width: auto; }
    .site-footer .coord-group { gap: 2.4rem; }
    .site-footer__items > .btn { position: static; margin-top: 3.2rem; }
    .coord__label { font-size: 1.4rem; }
    .coord__value { font-size: 1.8rem; }

    /* Pages solutions */
    .hero-sol { height: auto; display: flex; flex-direction: column; overflow: visible; background: var(--white); }
    .hero-sol__bg { position: relative; inset: auto; height: 34rem; }
    .hero-sol--soludoc .hero-sol__bg img, .hero-sol--solutemps .hero-sol__bg img, .hero-sol--soluplan .hero-sol__bg img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
    .hero-sol--soludoc .hero-sol__bg img { object-position: 80% 50%; }
    .hero-sol--solutemps .hero-sol__bg img { object-position: 50% 50%; }
    .hero-sol--soluplan .hero-sol__bg img { object-position: 85% 50%; }
    .hero-sol__card { position: relative; left: auto; top: auto; margin: -6.4rem 2rem 0; padding: 3.2rem 2.4rem; transform: none; animation-name: rise; box-shadow: 0 .8rem 3.2rem rgba(47, 68, 96, .12); }
    .hero-sol__text .t-lead { width: auto; }
    .hero-sol .logo-sol { font-size: min(.7rem, calc((100vw - 8.8rem) / var(--logo-w))); }

    .features-wrap { margin-top: 6.4rem; }
    .features { height: auto; padding: 4rem 2.4rem; }
    .features__heading { position: static; width: auto; }
    .features__heading .h-section, .features--soluplan .features__heading .h-section { width: auto; }
    .features__ticker, .features--multiline .features__ticker { position: relative; left: auto; top: auto; margin-top: 3.2rem; align-items: center; }
    .features__viewport, .features--wide .features__viewport {
        flex: 1; width: auto; height: 26rem;
        -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
        mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
    }
    .features__list { gap: 3.2rem; }
    .features__item { font-size: 1.8rem; white-space: normal; }

    .matching { width: auto; height: auto; margin: 6.4rem 2rem 0; }
    .matching__heading { position: static; width: auto; }
    .switch { width: 100%; height: 6.4rem; display: flex; padding: .6rem; }
    .switch__select { left: .6rem; top: .6rem; width: calc(50% - .6rem); height: 5.2rem; }
    .switch[data-active="3"] .switch__select { transform: translateX(100%); width: calc(50% - .6rem); }
    .switch__btn, .switch__btn[data-factors="2"], .switch__btn[data-factors="3"] { position: relative; left: auto; top: auto; flex: 1; width: auto; height: 100%; padding: 0 .8rem; font-size: 1.3rem; }
    /* Schéma vertical : Payables → Soludoc, puis les flèches côte à côte relient Soludoc à l'ERP */
    .matching__graph {
        position: relative; inset: auto; display: grid; justify-items: center; column-gap: .8rem; margin-top: 4rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto 12rem auto 16rem auto;
        grid-template-areas: "pay pay pay" "in in in" "sol sol sol" "po out rec" "erp erp erp";
    }
    .matching__graph[data-factors="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pay pay" "in in" "sol sol" "po out" "erp erp"; }
    .mg-box, .mg-label, .mg-arrow { position: relative; left: auto !important; top: auto !important; }
    .mg-box { width: 100%; max-width: 32rem; height: auto; padding: 2rem; font-size: 1.8rem; }
    .mg-box p { width: auto !important; }
    .mg-box--payables { grid-area: pay; }
    .mg-box--soludoc { grid-area: sol; width: 22rem; height: 22rem; }
    .mg-box--soludoc .logo-sol { zoom: .55; transform: none; }
    .mg-box--erp { grid-area: erp; }
    .mg-files { display: none; }
    .mg-label--in, .mg-arrow--in { grid-area: in; }
    .mg-label--po, .mg-arrow--po { grid-area: po; }
    .mg-label--out, .mg-arrow--out { grid-area: out; }
    .mg-label--receipt, .mg-arrow--receipt { grid-area: rec; }
    .mg-label { z-index: 1; align-self: center; width: auto !important; max-width: 100%; padding: .6rem .2rem; background: var(--white); font-size: 1.5rem; line-height: 1.25; white-space: normal; }
    .mg-arrow { align-self: stretch; width: .2rem !important; height: auto; margin: 1rem 0; }
    .mg-arrow__line { left: 0; right: auto; top: 0; bottom: 0; width: .2rem; height: auto; transform-origin: top; }
    /* pointe du chevron (bord droit, mi-hauteur) posée au bout de la ligne, puis rotation autour de ce point */
    .mg-arrow__head, .mg-arrow__head--rev { left: -2.1091rem; right: auto; bottom: auto; width: 2.2091rem; height: 4.5345rem; transform-origin: 100% 50%; }
    .mg-arrow__head { top: calc(100% - 2.26725rem); transform: rotate(90deg); }
    .mg-arrow__head--rev { top: -2.26725rem; transform: rotate(-90deg); }
    .matching.is-visible .mg-arrow__line { animation: none; }
    .matching__graph[data-factors="2"] .mg-label--receipt, .matching__graph[data-factors="2"] .mg-arrow--receipt { display: none; }

    .benefits { min-height: 0; margin-top: 6.4rem; padding: 6.4rem 2rem; }
    .benefits__heading { white-space: normal; }
    .benefits__list { width: 100%; margin-top: 3.2rem; gap: 1.2rem; }
    .benefit { gap: 1.6rem; padding: 2.4rem 2rem; font-size: 1.6rem; }
    .benefit img { width: 3.6rem; height: 3.6rem; margin: 0; }

    .integrations { height: auto; margin: 6.4rem 0; padding: 0 2rem; }
    .integrations__text, .js .integrations .integrations__text.reveal, .js .integrations .integrations__text.reveal.is-visible { position: static; width: auto; transform: none; }
    .integrations__heading { width: auto; }
    .integrations__cloud { position: relative; left: auto; top: auto; margin: 4rem auto 0; }

    /* Entreprise */
    .hero-about { height: auto; margin-bottom: 0; padding: calc(var(--header-h) + 4rem) 2rem 0; }
    .hero-about__title { position: static; width: auto; margin: 0; font-size: 3.2rem; }
    .hero-about__media { position: static; width: 100%; height: auto; aspect-ratio: 1408 / 668; margin: 3.2rem 0 0; }
    .split--about-1 { margin-top: 6.4rem; }
    .approach { height: auto; margin-top: 6.4rem; padding: 6.4rem 2rem; }
    .approach__text { width: auto; }

    /* FAQ */
    .faq-page { width: auto; margin-inline: 2rem; padding: 4rem 0 6.4rem; gap: 3.2rem; }
    .faq-page__title { font-size: 4rem; }
    .accordion__header { padding: 2.4rem 2rem; gap: 1.6rem; }
    .accordion__q { font-size: 1.5rem; line-height: 1.4; text-underline-offset: .3rem !important; text-decoration-thickness: .15rem !important; }
    .accordion__body { padding: 0 2rem 2.4rem; gap: 2.4rem; }

    /* Nous joindre */
    .contact-page { width: auto; margin-inline: 2rem; padding: 4rem 0 6.4rem; }
    .contact-page__title { font-size: 4rem; white-space: normal; }
    .contact-page__intro { width: auto; margin: 2rem 0 0; font-size: 1.8rem; }
    .form { margin-top: 4rem; gap: 2.4rem; }
    .form__row { flex-direction: column; gap: 2.4rem; }
    .field__label { font-size: 1.4rem; }
    .field__input { height: 5rem; font-size: 1.6rem; }
    .field__input--area { height: 18rem; }

    .contact-info { height: auto; padding: 6.4rem 2rem; }
    .contact-info__content { flex-direction: column; align-items: stretch; gap: 4rem; padding-top: 0; }
    .contact-info__items { width: auto; height: auto; }
    .contact-info .coord__label, .contact-info .coord__value { font-size: 1.8rem; }
    .contact-info__map { width: 100%; height: auto; aspect-ratio: 603 / 542; }

    .confirm { height: auto; padding: 12rem 2rem; }
    .confirm__title { font-size: 3.2rem; white-space: normal; }
    .confirm__text { width: auto; font-size: 1.8rem; }

    .legal { width: auto; margin-inline: 2rem; padding: 4rem 0 6.4rem; }
    .legal__title { font-size: 3.2rem; margin-bottom: 3.2rem; }
    .legal__body h2 { font-size: 2rem; }
}