/*
 * ArchLink — site vitrine.
 *
 * Le style du modèle « Deux écrans » : fond blanc, encre presque noire, un seul
 * bleu (celui du logo), des boutons en pilule et de grands titres serrés.
 * Toutes les couleurs et mesures sont ici, en variables : une page ne choisit
 * jamais une teinte à la main.
 */
:root {
  --encre: #141414;
  --encre-2: #475467;
  --encre-3: #667085;
  --bleu: #2f6fd6;
  --bleu-fonce: #2459ad;
  --bleu-pale: #eef3f8;
  --sable: #fdf4ea;
  --fond: #ffffff;
  --gris: #f6f7f9;
  --trait: #eaecf0;
  --rayon: 20px;
  --police: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --largeur: 1680px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.65 var(--police); }
img { max-width: 100%; height: auto; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--bleu-fonce); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--encre); letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.2rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--gris); padding: .1em .4em; border-radius: 6px; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .4em; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-weight: 600; color: var(--encre-2); font-size: .85rem; }

.saut { position: absolute; left: -9999px; }
.saut:focus { left: 1rem; top: 1rem; z-index: 99; background: var(--encre); color: #fff; padding: .6rem 1rem; border-radius: 8px; }

.bande { max-width: var(--largeur); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 5rem); }
.mesure { max-width: 760px; }
.bande.mesure { max-width: calc(760px + 2 * clamp(1.25rem, 4vw, 3.5rem)); }
.discret { color: var(--encre-3); }
.petit { font-size: .875rem; }
.surtitre { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); margin-bottom: 1rem; }
.chapeau { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--encre-2); max-width: 640px; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.2; border: 0; cursor: pointer; font-family: inherit; transition: background .15s, transform .15s, box-shadow .15s; }
.bouton:active { transform: translateY(1px); }
.bouton-plein { background: var(--bleu); color: #fff; }
.bouton-plein:hover { background: var(--bleu-fonce); color: #fff; box-shadow: 0 8px 20px -10px var(--bleu); }
.bouton-vide { background: var(--gris); color: var(--encre); }
.bouton-vide:hover { background: var(--trait); color: var(--encre); }
.bouton-encre { background: var(--encre); color: #fff; }
.bouton-encre:hover { background: #000; color: #fff; }

/* ── En-tête ─────────────────────────────────────────────────────────── */
.entete { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--trait); }
.entete .bande { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.marque { display: flex; align-items: center; margin-right: auto; }
.marque img, .marque svg { height: 34px; width: auto; display: block; }
.navigation { display: flex; align-items: center; gap: clamp(1rem, 1.5vw, 1.6rem); font-size: .92rem; }
/* Les liens restent visibles et chacun sur une ligne ; quand la place
   manque, le menu se resserre avant de se replier (sous 920 px). */
.navigation a { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1180px) and (min-width: 921px) {
  .entete .bande { gap: 1rem; padding-inline: 1.5rem; }
  .navigation { gap: .95rem; font-size: .88rem; }
  .navigation .bouton { padding: .6rem 1rem; }
  .entete .marque svg { height: 28px; }
}
.navigation a:not(.bouton) { color: var(--encre-2); text-decoration: none; }
.navigation a:not(.bouton):hover, .navigation a[aria-current="page"] { color: var(--encre); }
.navigation a[aria-current="page"] { font-weight: 600; }
.navigation .connexion { margin-left: .4rem; }
.navigation .bouton { padding: .7rem 1.2rem; }
.bascule-menu, .bouton-menu { display: none; }

@media (max-width: 920px) {
  .bouton-menu { display: grid; gap: 5px; padding: 10px; cursor: pointer; }
  .bouton-menu span { display: block; width: 22px; height: 2px; background: var(--encre); border-radius: 2px; }
  .navigation { position: absolute; top: 76px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; border-bottom: 1px solid var(--trait); display: none; }
  .navigation a:not(.bouton) { padding: .85rem 0; border-bottom: 1px solid var(--trait); }
  .navigation .bouton { margin-top: 1rem; }
  .bascule-menu:checked ~ .navigation { display: flex; }
}

/* ── Sections ────────────────────────────────────────────────────────── */
.section { padding: clamp(4rem, 3rem + 4vw, 7rem) 0; }
.section-douce { background: var(--gris); }
.section-bleue { background: var(--bleu-pale); }
.section-encre { background: var(--encre); color: #fff; }
.section-encre h2, .section-encre h3 { color: #fff; }
.section-encre .chapeau, .section-encre .discret { color: #b6bcc6; }
.tete-section { max-width: 720px; margin-bottom: 2.5rem; }
.tete-section.centre { margin-inline: auto; text-align: center; }
.tete-section.centre .chapeau { margin-inline: auto; }

.heros { padding: clamp(3rem, 2rem + 3.5vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem); position: relative; overflow: hidden; }
.heros .bande { text-align: center; }
.heros .chapeau { margin-inline: auto; }
.heros .boutons { justify-content: center; }
.heros.gauche .bande { text-align: left; }
.heros.gauche .chapeau { margin-inline: 0; }
.heros.gauche .boutons { justify-content: flex-start; }
.heros h1 { max-width: 1150px; margin-inline: auto; }
.heros.gauche h1 { margin-inline: 0; }
.note-heros { margin-top: 1.25rem; font-size: .875rem; color: var(--encre-3); }

/* ── Grilles et cartes ───────────────────────────────────────────────── */
.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.carte { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem 1.6rem 1.3rem; }
.section-douce .carte, .section-bleue .carte { border-color: transparent; }
.carte p:last-child { margin-bottom: 0; }
.carte p { color: var(--encre-2); font-size: .95rem; }
.carte-lien { display: block; text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.carte-lien:hover { color: inherit; border-color: var(--bleu); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgb(20 20 20 / .45); }
.carte-lien h3::after { content: " →"; color: var(--bleu); transition: margin .2s; }
.carte-lien:hover h3::after { margin-left: .2em; }
.carte .icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bleu-pale); color: var(--bleu); margin-bottom: 1rem; }
.carte .icone svg { width: 22px; height: 22px; }

.rappel { border-left: 3px solid var(--bleu); background: var(--bleu-pale); padding: 1.1rem 1.4rem; border-radius: 0 14px 14px 0; margin: 1.6rem 0; }
.rappel p:last-child { margin: 0; }
.limite { border-left: 3px solid #f0a35c; background: var(--sable); padding: 1.1rem 1.4rem; border-radius: 0 14px 14px 0; margin: 1.6rem 0; }
.acompleter { background: #fff6c8; padding: 0 .3em; border-radius: 4px; }
.etapes { counter-reset: etape; list-style: none; padding: 0; }
.etapes > li { counter-increment: etape; position: relative; padding: 0 0 1.4rem 3.2rem; }
.etapes > li::before { content: counter(etape); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.table-defilante { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
.table-defilante table { min-width: 560px; }
.liste-liens { list-style: none; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

details { border-bottom: 1px solid var(--trait); padding: 1.1rem 0; }
details:first-of-type { border-top: 1px solid var(--trait); }
summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--bleu); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: .8rem 0 0; color: var(--encre-2); }

.ariane { max-width: var(--largeur); margin: 1.5rem auto 0; padding: 0 clamp(1.25rem, 4vw, 3.5rem); font-size: .85rem; color: var(--encre-3); }
.ariane a { color: var(--encre-3); }
.voisins { max-width: var(--largeur); margin: 0 auto; padding: 3rem clamp(1.25rem, 4vw, 3.5rem) 5rem; border-top: 1px solid var(--trait); }
.voisins h2 { font-size: 1.2rem; }

/* ── Les deux écrans (accueil) ───────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; border-radius: 28px; overflow: hidden; min-height: 480px; }
.duo .cote { position: relative; padding: 2rem 2.2rem; overflow: hidden; }
.duo .cote-archi { background: var(--bleu-pale); }
.duo .cote-client { background: var(--sable); }
.duo .cote h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: .6rem; }
.duo .cote p { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; max-width: 360px; color: var(--encre); }
.ecran { position: absolute; left: 2.2rem; right: 2.2rem; bottom: 0; height: 300px; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 24px 48px -24px rgb(16 24 40 / .35); padding: 1rem; display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
.ecran .menu-app { display: grid; gap: .45rem; align-content: start; }
.ecran .menu-app i { display: block; height: 10px; border-radius: 4px; background: var(--trait); }
.ecran .menu-app i:first-child { background: var(--bleu); }
.ecran .lignes { display: grid; gap: .6rem; align-content: start; }
.ligne-app { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; padding: .6rem .75rem; border: 1px solid var(--trait); border-radius: 9px; opacity: 0; transform: translateY(8px); animation: monte .5s ease forwards; }
.ligne-app b { color: var(--bleu); font-weight: 600; }
.ligne-app:nth-child(2) { animation-delay: .15s; } .ligne-app:nth-child(3) { animation-delay: .3s; } .ligne-app:nth-child(4) { animation-delay: .45s; }
.telephone { position: absolute; left: 50%; bottom: -110px; transform: translateX(-50%); width: 240px; height: 420px; background: var(--encre); border-radius: 36px; padding: 10px; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .5); }
.telephone .ecran-tel { background: #fff; border-radius: 28px; height: 100%; padding: 1.2rem .9rem; display: grid; gap: .6rem; align-content: start; font-size: .8rem; }
.telephone h3 { font-size: .95rem; margin: 0; }
.telephone .plan { height: 120px; border-radius: 12px; background: #f3e3cf; position: relative; overflow: hidden; }
.telephone .plan::before { content: ""; position: absolute; inset: 22px 30px; border: 4px solid #c9a982; border-radius: 2px; }
.telephone .plan::after { content: ""; position: absolute; left: 50%; top: 22px; bottom: 50%; border-left: 4px solid #c9a982; }
.telephone .act { display: grid; gap: .4rem; }
.telephone .act span { text-align: center; padding: .55rem; border-radius: 999px; background: var(--bleu); color: #fff; font-weight: 600; }
.telephone .act span + span { background: var(--gris); color: var(--encre); }
.telephone .valide { display: none; text-align: center; color: #067647; font-weight: 600; padding: .5rem; background: #ecfdf3; border-radius: 10px; }
.duo.joue .telephone .valide { display: block; animation: monte .4s ease; }
.duo.joue .telephone .act span:first-child { background: #067647; }
@keyframes monte { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ligne-app { opacity: 1; transform: none; } }

/* ── Bénéfices numérotés ─────────────────────────────────────────────── */
.benefices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.25rem; counter-reset: b; }
.benefice { counter-increment: b; padding: 1.6rem; border-radius: var(--rayon); background: #fff; border: 1px solid var(--trait); }
.benefice::before { content: "0" counter(b); display: block; font-size: .8rem; font-weight: 700; color: var(--bleu); margin-bottom: 1.2rem; letter-spacing: .05em; }
.benefice h3 { font-size: 1.25rem; }
.benefice p { color: var(--encre-2); font-size: .95rem; margin: 0; }

/* ── Fonctionnalités en alternance ───────────────────────────────────── */
.fonction { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: 3rem 0; }
.fonction + .fonction { border-top: 1px solid var(--trait); }
.fonction:nth-child(even) .visuel { order: -1; }
.fonction .visuel { border-radius: 24px; background: var(--bleu-pale); aspect-ratio: 5 / 4; display: grid; place-items: center; padding: 2rem; }
.fonction:nth-child(3n+2) .visuel { background: var(--sable); }
.fonction:nth-child(3n) .visuel { background: var(--gris); }
.fonction ul { padding: 0; list-style: none; }
.fonction li { padding-left: 1.6rem; position: relative; color: var(--encre-2); }
.fonction li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem; border-radius: 3px; background: var(--bleu); }
.mini { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; box-shadow: 0 24px 48px -28px rgb(16 24 40 / .4); padding: 1.1rem; font-size: .85rem; display: grid; gap: .6rem; }
.mini .titre { font-weight: 700; }
.mini .ligne-app { opacity: 1; transform: none; animation: none; }
.mini .onde { display: flex; align-items: center; gap: 3px; height: 60px; }
.mini .onde i { flex: 1; height: 60%; background: var(--bleu); border-radius: 3px; animation: onde 1.2s ease-in-out infinite alternate; }
.mini .onde i:nth-child(4n+1) { height: 35%; } .mini .onde i:nth-child(4n+2) { height: 85%; } .mini .onde i:nth-child(5n) { height: 100%; } .mini .onde i:nth-child(7n) { height: 45%; }
.mini .onde i:nth-child(odd) { animation-delay: .3s; } .mini .onde i:nth-child(3n) { animation-delay: .6s; }
@keyframes onde { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.mini .bulle { padding: .55rem .8rem; border-radius: 14px; background: var(--gris); justify-self: start; max-width: 85%; }
.mini .bulle.moi { justify-self: end; background: var(--bleu); color: #fff; }
.mini .orateur { font-size: .75rem; font-weight: 700; color: var(--bleu); }
.mini .empreinte { font: .72rem/1.4 ui-monospace, monospace; color: var(--encre-3); }

/* ── Tarifs ──────────────────────────────────────────────────────────── */
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.offre { border: 1px solid var(--trait); border-radius: 24px; padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; background: #fff; position: relative; }
.offre.mise { background: var(--encre); color: #fff; border-color: var(--encre); }
.offre.mise h3, .offre.mise .prix { color: #fff; }
.offre .pastille { position: absolute; top: -.8rem; left: 1.8rem; background: var(--bleu); color: #fff; font-size: .75rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.offre h3 { font-size: 1.4rem; margin: 0; }
.offre .pour { color: var(--encre-3); font-size: .9rem; margin: -.6rem 0 0; }
.offre.mise .pour, .offre.mise .details { color: #b6bcc6; }
.prix { font-size: 3.2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.prix small { font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--encre-3); }
.offre.mise .prix small { color: #b6bcc6; }
.offre .details { font-size: .88rem; color: var(--encre-2); display: flex; gap: .8rem; flex-wrap: wrap; }
.offre .details span { background: var(--gris); padding: .2rem .6rem; border-radius: 999px; }
.offre.mise .details span { background: #2a2a2a; }
.offre ul { list-style: none; padding: 0; margin: 0; flex: 1; font-size: .93rem; }
.offre li { padding-left: 1.6rem; position: relative; margin-bottom: .55rem; }
.offre li::before { content: "✓"; position: absolute; left: 0; color: var(--bleu); font-weight: 700; }
.offre.mise li::before { color: #8fb4ee; }
.offre .bouton { width: 100%; }
.offre.mise .bouton-plein { background: var(--bleu); }
.comparatif td:not(:first-child), .comparatif th:not(:first-child) { text-align: center; }
.comparatif td:first-child { color: var(--encre-2); }
.comparatif .oui { color: var(--bleu); font-weight: 700; }
.comparatif .non { color: #c4c9d1; }
.comparatif .col-mise { background: var(--bleu-pale); }
.bandeau-pilote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--bleu-pale); border-radius: 24px; padding: 1.8rem 2rem; margin-top: 2.5rem; }
.bandeau-pilote h3 { margin: 0 0 .3rem; }
.bandeau-pilote p { margin: 0; color: var(--encre-2); }

/* ── Formulaire ──────────────────────────────────────────────────────── */
.formulaire { display: grid; gap: 1.1rem; background: #fff; border: 1px solid var(--trait); border-radius: 24px; padding: 2rem; }
.champ { display: grid; gap: .4rem; }
.champ label { font-weight: 600; font-size: .9rem; }
.champ input, .champ select, .champ textarea { font: inherit; font-size: .95rem; padding: .8rem 1rem; border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; color: var(--encre); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgb(47 111 214 / .15); }
.champ textarea { min-height: 120px; resize: vertical; }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-form { padding: .9rem 1.1rem; border-radius: 12px; font-size: .92rem; }
.message-form.ok { background: #ecfdf3; color: #067647; }
.message-form.erreur { background: #fef3f2; color: #b42318; }
.message-form[hidden] { display: none; }

/* ── Appel final ─────────────────────────────────────────────────────── */
.appel { background: var(--encre); color: #fff; border-radius: 32px; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem); text-align: center; position: relative; overflow: hidden; }
.appel h2 { color: #fff; max-width: 720px; margin-inline: auto; }
.appel p { color: #b6bcc6; max-width: 560px; margin-inline: auto; }
.appel .boutons { justify-content: center; }
.appel .bouton-vide { background: #2a2a2a; color: #fff; }
.appel .bouton-vide:hover { background: #3a3a3a; color: #fff; }
.appel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.appel > * { position: relative; }

/* ── Apparition au défilement ────────────────────────────────────────── */
.apparait { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .apparait { opacity: 1; transform: none; } }
html:not(.js) .apparait { opacity: 1; transform: none; }

/* ── Pied de page ────────────────────────────────────────────────────── */
.pied { background: var(--gris); padding: 4rem 0 2rem; margin-top: 0; font-size: .92rem; }
.pied-grille { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; margin-bottom: 2.5rem; }
.pied .marque img, .pied .marque svg { height: 30px; }
.pied h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); margin-bottom: .9rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .5rem; }
.pied a { color: var(--encre-2); text-decoration: none; }
.pied a:hover { color: var(--encre); }
.pied .bande:last-child { border-top: 1px solid var(--trait); padding-top: 1.5rem; }

@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; }
  .duo .cote { min-height: 470px; }
  .fonction { grid-template-columns: 1fr; padding: 2rem 0; }
  .fonction:nth-child(even) .visuel { order: 0; }
  .offres { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .deux-champs { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pied-grille { grid-template-columns: 1fr; }
  .ecran { grid-template-columns: 1fr; left: 1.2rem; right: 1.2rem; }
  .ecran .menu-app { display: none; }
  .duo .cote { padding: 1.6rem 1.4rem; }
}

/* ── Le haut de page, animé ──────────────────────────────────────────── */
.heros > .bande { position: relative; z-index: 1; }
.trame-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image: linear-gradient(rgb(47 111 214 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(47 111 214 / .06) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 75%); }
.trame-fond svg { position: absolute; width: 340px; height: 340px; }
.trame-fond .c1 { left: -60px; top: 40px; } .trame-fond .c2 { right: -40px; top: 140px; transform: rotate(8deg); }
.trame-fond path { fill: none; stroke-width: 2.5; stroke-linejoin: miter; stroke-dasharray: 220; stroke-dashoffset: 220; animation: trace 2.4s ease forwards; }
.trame-fond path.b { stroke: var(--bleu); animation-delay: .5s; } .trame-fond path.a { stroke: #c9d6ea; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.mot-tournant { display: inline-grid; justify-items: start; vertical-align: top; color: var(--bleu); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.mot-tournant > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.45em); transition: opacity .45s ease, transform .45s ease; white-space: nowrap; }
.mot-tournant > span.actif { opacity: 1; transform: none; }
.mot-tournant > span.sort { opacity: 0; transform: translateY(-.45em); }
html:not(.js) .mot-tournant > span:first-child { opacity: 1; transform: none; }

.heros .surtitre, .heros h1, .heros .chapeau, .heros .boutons, .note-heros { animation: entre .8s cubic-bezier(.2,.7,.2,1) both; }
.heros h1 { animation-delay: .08s; } .heros .chapeau { animation-delay: .18s; } .heros .boutons { animation-delay: .28s; } .note-heros { animation-delay: .36s; }
@keyframes entre { from { opacity: 0; transform: translateY(22px); } }

/* Les deux écrans montent à l'arrivée, puis suivent un peu le défilement. */
.duo { animation: entre 1s .4s cubic-bezier(.2,.7,.2,1) both; box-shadow: 0 40px 80px -50px rgb(20 20 20 / .35); will-change: transform; }

/* Le doigt qui tape « Approuver ». */
.doigt { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: rgb(20 20 20 / .18); border: 2px solid rgb(255 255 255 / .9); left: 62%; top: 108%; opacity: 0; pointer-events: none; box-shadow: 0 4px 12px rgb(0 0 0 / .2); }
.duo.tape .doigt { animation: tape 1.6s ease forwards; }
@keyframes tape { 0% { opacity: 0; top: 108%; left: 70%; } 35% { opacity: 1; top: 58.5%; left: 47%; } 55% { transform: scale(.75); top: 58.5%; left: 47%; } 75% { transform: scale(1); opacity: 1; } 100% { opacity: 0; top: 58.5%; left: 47%; } }
.ligne-app b { transition: color .3s; }
.duo.joue .ligne-app b[data-statut] { color: #067647; }
.duo.joue .ligne-app:first-child { opacity: 1; transform: none; animation: eclat 1s ease; }
@keyframes eclat { 0% { background: #ecfdf3; border-color: #a6e9c3; } 100% { background: #fff; } }

/* ── Le bandeau qui défile ───────────────────────────────────────────── */
.defile { overflow: hidden; border-block: 1px solid var(--trait); padding: 1.1rem 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile-piste { display: flex; gap: 3rem; width: max-content; animation: defile 38s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile span { display: inline-flex; align-items: center; gap: .8rem; font-weight: 600; font-size: 1.05rem; color: var(--encre-2); white-space: nowrap; }
.defile span::before { content: ""; width: 14px; height: 10px; border: 2.5px solid var(--bleu); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ── Apparitions plus vivantes ───────────────────────────────────────── */
.apparait { transition-duration: .7s; transition-timing-function: cubic-bezier(.2,.7,.2,1); }
.grille > .apparait:nth-child(2), .benefices > .apparait:nth-child(2), .offres > .apparait:nth-child(2) { transition-delay: .08s; }
.grille > .apparait:nth-child(3), .benefices > .apparait:nth-child(3), .offres > .apparait:nth-child(3) { transition-delay: .16s; }
.grille > .apparait:nth-child(4), .benefices > .apparait:nth-child(4) { transition-delay: .24s; }
.fonction.apparait .visuel { transform: translateX(40px) scale(.97); opacity: 0; transition: transform .9s cubic-bezier(.2,.7,.2,1) .15s, opacity .9s ease .15s; }
.fonction.apparait:nth-child(even) .visuel { transform: translateX(-40px) scale(.97); }
.fonction.apparait.vu .visuel { transform: none; opacity: 1; }
.benefice, .carte, .offre { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .7s, translate .7s; }
.benefice:hover, .offre:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgb(20 20 20 / .4); }
.benefice:hover::before { color: var(--encre); }

@media (prefers-reduced-motion: reduce) {
  .trame-fond path { stroke-dashoffset: 0; }
  .defile-piste { animation: none; }
  .fonction.apparait .visuel { transform: none; opacity: 1; }
}
/* ── Le haut de page démonstration : texte à gauche, fenêtre à droite ── */
.heros-demo { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.heros-demo .bande { text-align: left; }
.heros-grille { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.heros-demo h1 { font-size: clamp(2.3rem, 1.3rem + 3vw, 4.4rem); margin-inline: 0; }
.heros-demo .chapeau { margin-inline: 0; }
.heros-demo .boutons { justify-content: flex-start; }
.heros-demo .note-heros { letter-spacing: .02em; }

.demo { background: #fff; border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; box-shadow: 0 50px 90px -50px rgb(20 20 20 / .45), 0 0 0 8px rgb(47 111 214 / .05); animation: entre 1s .3s cubic-bezier(.2,.7,.2,1) both; }
.demo-barre { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--trait); background: #fbfcfd; }
.feux { display: flex; gap: 6px; } .feux i { width: 11px; height: 11px; border-radius: 50%; background: #e4e7ec; }
.demo-onglets { display: flex; gap: .3rem; background: var(--gris); padding: .25rem; border-radius: 999px; }
.demo-onglets button { border: 0; background: transparent; font: 600 .82rem var(--police); color: var(--encre-2); padding: .45rem .9rem; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.demo-onglets button[aria-selected="true"] { background: #fff; color: var(--encre); box-shadow: 0 2px 8px -2px rgb(16 24 40 / .2); }
.demo-corps { position: relative; aspect-ratio: 16 / 11.5; background: linear-gradient(180deg, #f6f9fd, #edf2f8); }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.scene.active { opacity: 1; visibility: visible; }

/* La 3D */
.scene-3d canvas { width: 100%; height: 100%; display: block; }
.epingle-3d { position: absolute; left: 0; top: 0; pointer-events: none; }
.epingle-3d .point, .epingle-2d .point { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; background: var(--bleu); color: #fff; font: 700 .8rem var(--police); display: grid; place-items: center; box-shadow: 0 6px 16px -4px rgb(47 111 214 / .7); transform: scale(0) rotate(-45deg); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.epingle-3d .point::after, .epingle-2d .point::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--bleu); opacity: 0; animation: onde-pin 1.8s ease-out infinite; }
@keyframes onde-pin { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
.demo.commente .epingle-3d .point { transform: scale(1) rotate(-45deg); }
.epingle-3d .point, .epingle-2d .point { font-size: 0; } .epingle-3d .point::before, .epingle-2d .point::before { content: attr(data-n); }
.bulle-com { position: absolute; left: 22px; top: -58px; white-space: nowrap; background: #fff; border-radius: 12px 12px 12px 3px; padding: .5rem .75rem; font-size: .8rem; box-shadow: 0 12px 30px -12px rgb(16 24 40 / .45); opacity: 0; transform: translateY(6px); transition: opacity .4s .25s, transform .4s .25s; }
.bulle-com b { display: block; font-size: .7rem; color: var(--bleu); }
.demo.commente .bulle-com { opacity: 1; transform: none; }
.outils-3d { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: .3rem; background: rgb(20 20 20 / .85); padding: .3rem; border-radius: 999px; backdrop-filter: blur(6px); }
.outils-3d span { color: #e6e9ee; font-size: .75rem; font-weight: 600; padding: .4rem .75rem; border-radius: 999px; white-space: nowrap; transition: background .3s; }
.demo.sans-toit .outils-3d .retirer { background: var(--bleu); color: #fff; }
.legende-demo { position: absolute; left: 1rem; top: .9rem; font-size: .72rem; font-weight: 600; color: var(--encre-2); background: rgb(255 255 255 / .85); padding: .3rem .65rem; border-radius: 999px; }

/* Le plan 2D */
.plan-2d { position: absolute; left: 12%; top: 12%; width: 76%; height: 52%; }
.version-2d { position: absolute; left: 1rem; top: .9rem; font-size: .72rem; font-weight: 700; color: #fff; background: var(--encre); padding: .3rem .7rem; border-radius: 999px; }
.epingle-2d { position: absolute; left: 73%; top: 62%; }
.scene-2d.active .epingle-2d .point { animation: pose .5s .5s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes pose { to { transform: scale(1) rotate(-45deg); } }
.fil-2d { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; display: grid; gap: .45rem; }
.fil-2d .msg { background: #fff; border-radius: 12px; padding: .5rem .8rem; font-size: .8rem; box-shadow: 0 10px 24px -14px rgb(16 24 40 / .45); max-width: 75%; opacity: 0; transform: translateY(8px); }
.fil-2d .msg b { display: block; font-size: .68rem; color: var(--encre-3); }
.fil-2d .archi { justify-self: end; background: var(--bleu); color: #fff; } .fil-2d .archi b { color: #cfe0fb; }
.scene-2d.active .fil-2d .client { animation: monte .45s 1.1s ease forwards; }
.scene-2d.active .fil-2d .archi { animation: monte .45s 2.6s ease forwards; }

/* L'assistant IA */
.chat-ia { position: absolute; inset: 0; padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.chat-ia .question { align-self: flex-end; background: var(--encre); color: #fff; padding: .7rem 1rem; border-radius: 16px 16px 4px 16px; font-size: .92rem; max-width: 80%; opacity: 0; transform: translateY(8px); }
.scene-ia.active .question { animation: monte .45s .3s ease forwards; }
.chat-ia .reponse { background: #fff; border-radius: 16px 16px 16px 4px; padding: 1rem 1.1rem; font-size: .9rem; line-height: 1.6; box-shadow: 0 18px 40px -24px rgb(16 24 40 / .45); max-width: 92%; min-height: 9.5rem; }
.chat-ia .reponse ul { margin: .4rem 0; padding-left: 1.1rem; }
.chat-ia .reponse li { margin-bottom: .2rem; }
.ia-tete { display: block; font-size: .75rem; font-weight: 700; color: var(--bleu); margin-bottom: .35rem; letter-spacing: .02em; }
.chat-ia .sources { display: flex; flex-wrap: wrap; gap: .4rem; opacity: 0; transition: opacity .4s; }
.demo.repondu .chat-ia .sources { opacity: 1; }
.chat-ia .sources span { font-size: .72rem; font-weight: 600; color: var(--bleu); background: var(--bleu-pale); padding: .3rem .65rem; border-radius: 999px; }
.chat-ia .sources span::before { content: "↗ "; }

@media (max-width: 1080px) {
  .heros-grille { grid-template-columns: 1fr; }
  .demo-corps { aspect-ratio: 4 / 3.6; }
}
@media (max-width: 520px) {
  .demo-onglets button { padding: .4rem .6rem; font-size: .75rem; }
  .feux { display: none; }
  .outils-3d span:first-child { display: none; }
  .bulle-com { white-space: normal; width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .fil-2d .msg, .chat-ia .question { opacity: 1; transform: none; }
  .epingle-2d .point { transform: scale(1) rotate(-45deg); }
  .chat-ia .sources { opacity: 1; }
}
/* Dans le haut de page démonstration, le mot qui change a sa ligne à lui. */
.heros-demo .mot-tournant { display: grid; width: auto !important; }
.chat-ia .action { display: flex; align-items: center; gap: .6rem; background: #ecfdf3; color: #067647; font-size: .82rem; font-weight: 600; padding: .6rem .9rem; border-radius: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s .3s, transform .4s .3s; }
.demo.repondu .chat-ia .action { opacity: 1; transform: none; }
.chat-ia .suggestions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-ia .suggestions span { font-size: .75rem; color: var(--encre-2); border: 1px solid var(--trait); background: #fff; padding: .35rem .7rem; border-radius: 999px; }
.chat-ia .saisie { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: .65rem .9rem; font-size: .85rem; color: var(--encre-3); }
.chat-ia .saisie b { width: 30px; height: 30px; border-radius: 9px; background: var(--bleu); color: #fff; display: grid; place-items: center; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .chat-ia .action { opacity: 1; transform: none; } }
/* Sur téléphone, les grands cadres du fond passaient sur le titre : on les
   réduit et on les écarte du texte. La bulle du commentaire passe au-dessus de
   l'épingle pour ne pas sortir de la fenêtre. */
@media (max-width: 720px) {
  .trame-fond svg { width: 160px; height: 160px; opacity: .45; }
  .trame-fond .c1 { left: -90px; top: 0; } .trame-fond .c2 { right: -100px; top: 60px; }
  .bulle-com { left: -75px; top: -88px; width: 150px; border-radius: 12px; }
}
/* ── Démonstration : les scènes « tout le cabinet » ─────────────────── */
.heros-demo h1 { font-size: clamp(2.2rem, 1.2rem + 2.7vw, 4rem); }
.heros-demo .mot-tournant { margin-top: .1em; }
.legende-cadre { margin: .8rem 0 0; text-align: center; font-size: .78rem; color: var(--encre-3); }
.demo-onglets { overflow-x: auto; scrollbar-width: none; min-width: 0; }
.demo-onglets::-webkit-scrollbar { display: none; }
.demo-onglets button { white-space: nowrap; flex: none; }
.demo-barre { min-width: 0; }
.scene .titre { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); margin-bottom: .55rem; }
@keyframes monte { to { opacity: 1; transform: none; } }

/* Projets : le tableau de bord */
.tdb { position: absolute; inset: 0; padding: 1.2rem; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; gap: .8rem; }
.tdb-chiffres { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.tdb-chiffres div, .tdb-projets, .tdb-agenda { background: #fff; border-radius: 14px; box-shadow: 0 10px 26px -18px rgb(16 24 40 / .45); }
.tdb-chiffres div { padding: .8rem 1rem; opacity: 0; transform: translateY(8px); }
.tdb-chiffres b { display: block; font-size: 1.5rem; line-height: 1.1; }
.tdb-chiffres span { font-size: .75rem; color: var(--encre-2); }
.scene-projets.active .tdb-chiffres div { animation: monte .45s ease forwards; }
.scene-projets.active .tdb-chiffres div:nth-child(2) { animation-delay: .12s; } .scene-projets.active .tdb-chiffres div:nth-child(3) { animation-delay: .24s; }
.tdb-projets, .tdb-agenda { padding: .9rem 1rem; display: grid; align-content: start; gap: .55rem; }
.projet-l { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: .8rem; font-size: .82rem; font-weight: 600; }
.projet-l small { display: block; font-weight: 400; font-size: .72rem; color: var(--encre-3); }
.projet-l .barre { height: 7px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.projet-l .barre i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--bleu); }
.scene-projets.active .projet-l .barre i { animation: remplit 1.4s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes remplit { to { width: var(--p); } }
.projet-l b { font-size: .68rem; color: var(--bleu); background: var(--bleu-pale); padding: .2rem .5rem; border-radius: 6px; }
.tdb-agenda div { font-size: .8rem; padding: .5rem .6rem; border-left: 3px solid var(--bleu); background: var(--bleu-pale); border-radius: 0 8px 8px 0; opacity: 0; transform: translateX(10px); }
.tdb-agenda time { display: block; font-weight: 700; font-size: .72rem; color: var(--bleu); }
.scene-projets.active .tdb-agenda div { animation: monte .45s 1.2s ease forwards; }
.scene-projets.active .tdb-agenda div:nth-of-type(2) { animation-delay: 1.45s; } .scene-projets.active .tdb-agenda div:nth-of-type(3) { animation-delay: 1.7s; }

/* Visio : deux tuiles, la transcription qui s'écrit */
.visio { position: absolute; inset: 0; padding: 1.2rem; background: #141a22; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; height: 52%; }
.tuile { position: relative; border-radius: 14px; background: linear-gradient(160deg, #2a3442, #1c232d); display: grid; place-items: center; }
.tuile .avatar { width: 64px; height: 64px; border-radius: 50%; background: #3b4a5e; color: #fff; font-weight: 700; display: grid; place-items: center; }
.tuile.parle .avatar { background: var(--bleu); }
.tuile.parle { box-shadow: inset 0 0 0 2px var(--bleu); }
.scene-visio.active .tuile.parle .avatar { animation: parle 1.1s ease-in-out infinite; }
@keyframes parle { 50% { box-shadow: 0 0 0 10px rgb(47 111 214 / .25); } }
.nom-t { position: absolute; left: .6rem; bottom: .5rem; font-size: .72rem; color: #e6e9ee; background: rgb(0 0 0 / .35); padding: .2rem .5rem; border-radius: 6px; }
.rec { position: absolute; right: 1.7rem; top: 1.7rem; font-size: .72rem; font-weight: 700; color: #fff; background: rgb(217 45 32 / .9); padding: .25rem .6rem; border-radius: 99px; }
.rec::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: .4rem; vertical-align: 1px; animation: clignote 1s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.transcription { margin-top: .8rem; background: #fff; border-radius: 14px; padding: .8rem 1rem; display: grid; gap: .35rem; }
.transcription p { margin: 0; font-size: .82rem; opacity: 0; transform: translateY(6px); }
.transcription b { color: var(--bleu); margin-right: .45rem; }
.scene-visio.active .transcription p { animation: monte .4s .8s ease forwards; }
.scene-visio.active .transcription p:nth-of-type(2) { animation-delay: 2.2s; } .scene-visio.active .transcription p:nth-of-type(3) { animation-delay: 3.6s; }
.cr-pret { position: absolute; left: 50%; bottom: 1rem; transform: translate(-50%, 10px); white-space: nowrap; background: #ecfdf3; color: #067647; font-size: .8rem; font-weight: 600; padding: .5rem .9rem; border-radius: 99px; opacity: 0; }
.scene-visio.active .cr-pret { animation: pose-bas .45s 5s ease forwards; }
@keyframes pose-bas { to { opacity: 1; transform: translate(-50%, 0); } }

/* Chantier : la dictée devient compte rendu */
.crc { position: absolute; inset: 0; padding: 1.2rem; display: grid; grid-template-columns: 1fr 1.15fr; gap: .9rem; }
.crc-dictee, .crc-doc { background: #fff; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 26px -18px rgb(16 24 40 / .45); display: flex; flex-direction: column; gap: .7rem; }
.micro { display: flex; align-items: center; gap: .6rem; }
.micro .pastille { width: 34px; height: 34px; border-radius: 50%; background: #d92d20; flex: none; box-shadow: 0 0 0 0 rgb(217 45 32 / .4); }
.scene-chantier.active .micro .pastille { animation: onde-rec 1.4s ease-out infinite; }
@keyframes onde-rec { to { box-shadow: 0 0 0 12px rgb(217 45 32 / 0); } }
.micro .onde { flex: 1; display: flex; align-items: center; gap: 2px; height: 34px; }
.micro .onde i { flex: 1; height: 50%; background: var(--bleu); border-radius: 2px; }
.micro .onde i:nth-child(3n) { height: 90%; } .micro .onde i:nth-child(4n+1) { height: 30%; } .micro .onde i:nth-child(5n) { height: 70%; }
.scene-chantier.active .micro .onde i { animation: onde .9s ease-in-out infinite alternate; }
.scene-chantier.active .micro .onde i:nth-child(odd) { animation-delay: .25s; }
.micro time { font-size: .75rem; font-weight: 700; color: var(--encre-2); }
.dicte { margin: 0; font-size: .85rem; color: var(--encre-2); font-style: italic; }
.reserve { display: flex; align-items: center; gap: .5rem; font-size: .8rem; padding: .5rem .6rem; border: 1px solid var(--trait); border-radius: 9px; opacity: 0; transform: translateY(6px); }
.reserve b { font-size: .65rem; text-transform: uppercase; color: #b54708; background: #fffaeb; padding: .15rem .4rem; border-radius: 5px; }
.reserve em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .72rem; color: var(--bleu); }
.scene-chantier.active .reserve { animation: monte .4s 1.6s ease forwards; }
.scene-chantier.active .reserve + .reserve { animation-delay: 2.8s; }
.photos { display: flex; gap: .45rem; }
.photos i { width: 54px; height: 42px; border-radius: 7px; background: linear-gradient(135deg, #c9b79c, #8d7b62); opacity: 0; transform: scale(.8); }
.photos i:nth-child(2) { background: linear-gradient(135deg, #b8c4cf, #6e7f90); } .photos i:nth-child(3) { background: linear-gradient(135deg, #d8cfc2, #a0917c); }
.scene-chantier.active .photos i { animation: monte .35s 3.8s ease forwards; }
.scene-chantier.active .photos i:nth-child(2) { animation-delay: 4s; } .scene-chantier.active .photos i:nth-child(3) { animation-delay: 4.2s; }
.pdf { margin-top: auto; font-size: .78rem; font-weight: 600; color: #fff; background: var(--encre); padding: .55rem .8rem; border-radius: 9px; opacity: 0; }
.pdf::before { content: "PDF"; font-size: .62rem; background: #d92d20; padding: .1rem .3rem; border-radius: 4px; margin-right: .5rem; }
.scene-chantier.active .pdf { animation: monte .4s 5s ease forwards; }

/* Factures : les statuts changent, la signature se trace */
.fact { position: absolute; inset: 0; padding: 1.2rem; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr auto; gap: .8rem; }
.fact-liste, .fact-signature, .fact-total { background: #fff; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 26px -18px rgb(16 24 40 / .45); }
.fact-liste { display: grid; align-content: start; gap: .5rem; }
.doc-l { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .8rem; padding: .55rem .2rem; border-bottom: 1px solid var(--gris); }
.doc-l b { font-size: .72rem; white-space: nowrap; }
.doc-l .change { display: inline-grid; } .doc-l .change > * { grid-area: 1 / 1; text-decoration: none; font-style: normal; }
.doc-l .change s { color: var(--encre-3); } .doc-l .change em { color: #067647; opacity: 0; }
.scene-factures.active .change s { animation: efface .3s 1.4s forwards; } .scene-factures.active .change em { animation: monte .3s 1.5s forwards; }
.scene-factures.active .change.c2 s { animation-delay: 3.6s; } .scene-factures.active .change.c2 em { animation-delay: 3.7s; }
@keyframes efface { to { opacity: 0; } }
.doc-l .paye { color: #067647; } .doc-l .attente { color: #b54708; }
.fact-signature { display: flex; flex-direction: column; }
.fact-signature svg { width: 100%; height: auto; margin: auto 0; }
.fact-signature path { fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.scene-factures.active .fact-signature path { animation: trace 1.6s 2.2s ease forwards; }
.fact-signature .date { font-size: .72rem; color: #067647; font-weight: 600; opacity: 0; }
.scene-factures.active .fact-signature .date { animation: monte .4s 3.8s forwards; }
.fact-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--encre-2); }
.fact-total b { color: var(--encre); font-size: 1.1rem; margin-left: .4rem; }

/* Tout ArchLink : douze modules, quatre de front */
.modules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.modules .benefice { display: block; text-decoration: none; color: inherit; padding: 1.3rem 1.4rem; }
.modules .benefice::before { content: counter(b, decimal-leading-zero); margin-bottom: .8rem; }
.modules .benefice h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.modules .benefice:hover { border-color: var(--bleu); }
.grille > .apparait:nth-child(n+5), .modules > .apparait:nth-child(n+5) { transition-delay: .1s; }

@media (max-width: 1080px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .tdb { grid-template-columns: 1fr; padding: .8rem; gap: .55rem; }
  .tdb-agenda { display: none; }
  .tdb-chiffres { gap: .45rem; } .tdb-chiffres div { padding: .55rem .6rem; } .tdb-chiffres b { font-size: 1.05rem; } .tdb-chiffres span { font-size: .65rem; }
  .projet-l { grid-template-columns: 1.4fr .8fr auto; gap: .5rem; font-size: .75rem; }
  .crc, .fact { grid-template-columns: 1fr; padding: .8rem; gap: .55rem; }
  .crc-dictee .titre, .dicte { display: none; }
  .crc-dictee, .crc-doc { padding: .7rem; gap: .45rem; }
  .photos { display: none; }
  .fact-signature { display: none; }
  .visio { padding: .8rem; } .tuile .avatar { width: 44px; height: 44px; }
  .rec { right: 1.2rem; top: 1.2rem; }
  .transcription p { font-size: .75rem; }
  .fact-total { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .modules { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tdb-chiffres div, .tdb-agenda div, .transcription p, .reserve, .photos i, .pdf, .fact-signature .date { opacity: 1; transform: none; }
  .cr-pret { opacity: 1; transform: translate(-50%, 0); }
  .projet-l .barre i { width: var(--p); }
  .doc-l .change s { opacity: 0; } .doc-l .change em { opacity: 1; }
  .fact-signature path { stroke-dashoffset: 0; }
}
/* Les scènes remplissent leur fenêtre : pas de grands vides. */
.tdb-projets { display: flex; flex-direction: column; gap: .55rem; }
.activite { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--gris); display: grid; gap: .4rem; }
.activite div { display: flex; align-items: center; gap: .5rem; font-size: .78rem; opacity: 0; transform: translateY(6px); }
.activite time { margin-left: auto; font-size: .7rem; color: var(--encre-3); }
.activite .pas { width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); flex: none; } .activite .pas.ok { background: #12b76a; }
.scene-projets.active .activite div { animation: monte .4s 2.2s ease forwards; } .scene-projets.active .activite div + div { animation-delay: 2.5s; }
.crc-dictee .photos { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; min-height: 0; }
.crc-dictee .photos i { width: auto; height: auto; min-height: 50px; border-radius: 9px; }
.photos i:nth-child(4) { background: linear-gradient(135deg, #a9b6a0, #6c7a63); }
.scene-chantier.active .photos i:nth-child(4) { animation-delay: 4.4s; }
.reserve.levee b { color: #067647; background: #ecfdf3; }
.scene-chantier.active .reserve + .reserve + .reserve { animation-delay: 3.6s; }
.prochaine { font-size: .78rem; color: var(--encre-2); background: var(--bleu-pale); padding: .55rem .7rem; border-radius: 9px; opacity: 0; }
.scene-chantier.active .prochaine { animation: monte .4s 4.4s ease forwards; }
.doc-l .envoye { color: var(--bleu); }
.fact-signature .quoi { font-size: .8rem; font-weight: 600; }
.fact-signature svg { border: 1.5px dashed var(--trait); border-radius: 10px; padding: .6rem; background: #fbfcfd; }
.trame-fond .c1 { left: -150px; }
@media (max-width: 620px) {
  .activite div:nth-child(3), .prochaine { display: none; }
  .crc-dictee .photos { display: none; }
  .doc-l:nth-child(n+6) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .activite div, .prochaine { opacity: 1; transform: none; } }
/* Sans ça, les sept onglets (qui ne passent pas à la ligne) élargissent
   la colonne, et toute la page déborde sur téléphone. */
.demo-cadre { min-width: 0; }
@media (max-width: 620px) {
  .demo-corps { aspect-ratio: 4 / 5; }
  .reserve em, .doc-l b { white-space: nowrap; }
  .doc-l { font-size: .75rem; padding: .45rem .1rem; }
}
@media (max-width: 620px) { .activite { display: none; } }

/* ── Finance : devis, contrats, factures ─────────────────────────────── */
.finance { position: absolute; inset: 0; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.fin-barre { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.fin-onglets { display: flex; gap: .3rem; background: #fff; padding: .25rem; border-radius: 12px; box-shadow: 0 6px 18px -12px rgb(16 24 40 / .4); }
.fin-onglets button { border: 0; background: transparent; font: 600 .82rem var(--police); color: var(--encre-2); padding: .5rem 1rem; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.fin-onglets button:hover { color: var(--encre); }
.fin-onglets button:active { transform: scale(.95); }
.fin-onglets button[aria-selected="true"] { background: var(--bleu); color: #fff; }
.fin-total { font-size: .8rem; color: var(--encre-2); }
.fin-total b { font-size: 1.15rem; color: var(--encre); margin-left: .35rem; font-variant-numeric: tabular-nums; }
.fin-volet { flex: 1; min-height: 0; display: none; grid-template-columns: 1.5fr 1fr; gap: .8rem; }
.fin-volet.actif { display: grid; }
.feuille { background: #fff; border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 10px 26px -18px rgb(16 24 40 / .45); display: flex; flex-direction: column; gap: .2rem; overflow: hidden; }
.fin-volet.actif .feuille { animation: feuille .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes feuille { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.feuille-tete { padding-bottom: .6rem; margin-bottom: .3rem; border-bottom: 2px solid var(--encre); }
.feuille-tete b { display: block; font-size: .95rem; } .feuille-tete span { font-size: .72rem; color: var(--encre-3); }
.poste { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--gris); opacity: 0; }
.poste b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.poste.total { border-bottom: 0; font-weight: 700; font-size: .9rem; }
.fin-volet.actif .poste { animation: monte .35s ease forwards; transform: translateY(6px); }
.fin-volet.actif .poste:nth-of-type(2) { animation-delay: .25s; } .fin-volet.actif .poste:nth-of-type(3) { animation-delay: .4s; }
.fin-volet.actif .poste:nth-of-type(4) { animation-delay: .55s; } .fin-volet.actif .poste:nth-of-type(5) { animation-delay: .7s; }
.poste .paye { color: #067647; } .poste .envoye { color: var(--bleu); }
.poste .change, .ligne-pe .change { display: inline-grid; } .poste .change > *, .ligne-pe .change > * { grid-area: 1 / 1; text-decoration: none; font-style: normal; }
.poste .change s, .ligne-pe .change s { color: #b54708; } .poste .change em, .ligne-pe .change em { color: #067647; opacity: 0; }
.fin-factures.actif .poste.mise { animation: monte .35s .55s ease forwards, eclat 1.2s 2.3s ease; }
.fin-factures.actif .change s { animation: efface .3s 2.3s forwards; } .fin-factures.actif .change em { animation: monte .3s 2.4s forwards; }
.encaisse { margin-top: auto; height: 8px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.encaisse i { display: block; height: 100%; width: 52%; background: #12b76a; border-radius: inherit; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.fin-factures.actif .encaisse i { animation: encaisse .9s 2.3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes encaisse { to { width: 76%; } }
.fin-action { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .8rem; background: #fff; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 26px -18px rgb(16 24 40 / .45); position: relative; }
.bouton-demo { display: block; text-align: center; font-size: .82rem; font-weight: 700; color: #fff; background: var(--bleu); padding: .7rem 1rem; border-radius: 10px; }
.bouton-demo.vert { background: #067647; } .bouton-demo.gris { background: var(--gris); color: var(--encre); }
.fin-devis.actif .bouton-demo { animation: appui .5s 1.5s ease both; }
@keyframes appui { 50% { transform: scale(.93); box-shadow: 0 0 0 8px rgb(47 111 214 / .2); } }
.tampon { display: block; font-size: .85rem; font-weight: 700; color: #067647; border: 2px solid #12b76a; background: #ecfdf3; border-radius: 12px; padding: .7rem .9rem; opacity: 0; transform: scale(1.25) rotate(-4deg); }
.tampon small { display: block; font-weight: 500; font-size: .72rem; color: #067647; }
.fin-devis.actif .tampon { animation: tampon .45s 2.1s cubic-bezier(.3,1.5,.5,1) forwards; }
.fin-contrats.actif .tampon { animation: tampon .45s 2.6s cubic-bezier(.3,1.5,.5,1) forwards; }
.fin-factures.actif .tampon { animation: tampon .45s 2.8s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes tampon { to { opacity: 1; transform: rotate(-2deg); } }
.clauses { display: grid; gap: .5rem; padding: .5rem 0; }
.clauses i { height: 7px; border-radius: 4px; background: var(--gris); }
.clauses i:nth-child(2) { width: 88%; } .clauses i:nth-child(4) { width: 72%; } .clauses i:nth-child(5) { width: 54%; }
.signatures { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.signatures div { border: 1.5px dashed var(--trait); border-radius: 10px; padding: .4rem .6rem; background: #fbfcfd; }
.signatures small { font-size: .68rem; color: var(--encre-3); }
.signatures svg { display: block; width: 100%; height: auto; }
.signatures path, .sig path { fill: none; stroke: var(--encre); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.fin-contrats.actif .signatures div:first-child path { animation: trace 1s .5s ease forwards; }
.fin-contrats.actif .signatures div:last-child path { animation: trace 1.1s 1.5s ease forwards; }

/* ── Le parcours d'un projet, au défilement ──────────────────────────── */
.parcours { position: relative; height: calc(8 * 55vh + 100vh); background: linear-gradient(180deg, #fff, var(--bleu-pale) 30%, var(--bleu-pale) 70%, #fff); }
.parcours-collant { position: sticky; top: var(--entete, 72px); height: calc(100vh - var(--entete, 72px)); display: flex; align-items: center; overflow: hidden; }
.parcours-collant > .bande { width: 100%; }
.parcours-tete { margin-bottom: clamp(1rem, 3vh, 2.2rem); }
.parcours-tete h2 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.8rem); max-width: 22ch; margin: .3rem 0 0; }
.parcours-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.parcours-etapes { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; display: grid; gap: .15rem; }
.parcours-etapes::before, .parcours-etapes::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--trait); }
.parcours-etapes::after { background: var(--bleu); bottom: auto; height: calc((100% - 44px) * var(--p, 0)); }
.parcours-etapes button { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 1rem; align-items: flex-start; padding: .45rem .6rem .45rem 0; cursor: pointer; border-radius: 12px; position: relative; z-index: 1; }
.parcours-etapes button:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.parcours-etapes .num { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--trait); font-size: .8rem; font-weight: 700; color: var(--encre-3); transition: background .35s, border-color .35s, color .35s, transform .35s; }
.parcours-etapes .txt { padding-top: .6rem; }
.parcours-etapes .txt b { display: block; font-size: 1.02rem; color: var(--encre-3); transition: color .3s; }
.parcours-etapes .txt span { display: block; max-height: 0; overflow: hidden; opacity: 0; color: var(--encre-2); font-size: .92rem; transition: max-height .45s ease, opacity .35s ease, margin .35s; }
.parcours-etapes li.passe .num { background: var(--bleu-pale); border-color: var(--bleu); color: var(--bleu); }
.parcours-etapes li.passe .txt b { color: var(--encre-2); }
.parcours-etapes li.actif .num { background: var(--bleu); border-color: var(--bleu); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 6px rgb(47 111 214 / .15); }
.parcours-etapes li.actif .txt b { color: var(--encre); font-size: 1.15rem; }
.parcours-etapes li.actif .txt span { max-height: 4em; opacity: 1; margin-top: .2rem; }
.parcours-ecran { position: relative; aspect-ratio: 5 / 4; max-height: calc(100vh - var(--entete, 72px) - 12rem); width: 100%; justify-self: center; border-radius: 26px; background: #fff; border: 1px solid var(--trait); box-shadow: 0 50px 90px -50px rgb(20 20 20 / .4); display: grid; place-items: center; overflow: hidden;
  background-image: linear-gradient(rgb(47 111 214 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(47 111 214 / .05) 1px, transparent 1px); background-size: 32px 32px; }
.parcours-actuel { display: none; }
.pe { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transform: translateY(30px) scale(.97); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility .45s; }
.pe.actif { opacity: 1; visibility: visible; transform: none; }
.pe-carte { position: relative; width: min(100%, 440px); background: #fff; border-radius: 18px; padding: 1.3rem; box-shadow: 0 30px 60px -30px rgb(16 24 40 / .45); display: grid; gap: .75rem; font-size: .88rem; }
.pe-titre { font-size: 1.4rem; }
.pe-sur { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); display: flex; align-items: center; gap: .45rem; }
.pe-ok { font-weight: 600; font-size: .82rem; color: #067647; background: #ecfdf3; padding: .55rem .8rem; border-radius: 10px; opacity: 0; transform: translateY(8px); }
.pe.actif .pe-ok { animation: monte .4s 1.2s ease forwards; }
.cote-ligne { display: flex; align-items: center; gap: .6rem; font: 600 .75rem ui-monospace, monospace; color: var(--bleu); }
.cote-ligne i { flex: 1; border-top: 1.5px dashed var(--bleu); position: relative; }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.cases span { border: 1px solid var(--trait); border-radius: 9px; padding: .45rem .55rem; font-weight: 600; font-size: .82rem; }
.cases small { display: block; font-weight: 400; font-size: .66rem; color: var(--encre-3); }
.frise { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.frise i { font-style: normal; text-align: center; font-size: .62rem; font-weight: 700; padding: .35rem 0; background: var(--gris); color: var(--encre-3); border-radius: 4px; }
.frise i.fait { background: var(--bleu); color: #fff; }
.pe.actif .frise i.fait { animation: monte .4s .3s both; }
.gens { display: flex; align-items: center; }
.gens span { width: 30px; height: 30px; border-radius: 50%; background: var(--bleu-pale); color: var(--bleu); border: 2px solid #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; margin-right: -6px; opacity: 0; transform: translateX(-8px); }
.gens small { margin-left: 1rem; color: var(--encre-3); }
.pe.actif .gens span { animation: monte .35s .6s forwards; } .pe.actif .gens span:nth-child(2) { animation-delay: .75s; } .pe.actif .gens span:nth-child(3) { animation-delay: .9s; }
.courriel { border: 1px solid var(--trait); border-radius: 12px; padding: 1rem; display: grid; gap: .55rem; }
.courriel span:not(.bouton-demo) { color: var(--encre-2); font-size: .82rem; }
.pe.actif .courriel { animation: feuille .5s .2s both; }
.pe.actif .courriel .bouton-demo { animation: appui .5s .9s ease both; }
.rec-point { width: 8px; height: 8px; border-radius: 50%; background: #d92d20; animation: clignote 1s steps(2) infinite; }
.ligne-t { margin: 0; opacity: 0; transform: translateY(6px); } .ligne-t b { color: var(--bleu); margin-right: .45rem; }
.pe.actif .ligne-t { animation: monte .4s .3s forwards; } .pe.actif .ligne-t + .ligne-t { animation-delay: .75s; }
.pe-plan svg { width: 100%; height: auto; }
.pe-plan .pin { position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; background: var(--bleu); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; transform: rotate(-45deg) scale(0); }
.pe-plan .pin.p1 { left: 70%; top: 66%; } .pe-plan .pin.p2 { left: 26%; top: 40%; }
.pe.actif .pin { animation: pose .45s .4s cubic-bezier(.3,1.6,.5,1) forwards; } .pe.actif .pin.p2 { animation-delay: .7s; }
.pe-bulle { justify-self: end; background: var(--encre); color: #fff; border-radius: 12px 12px 3px 12px; padding: .5rem .8rem; font-size: .8rem; opacity: 0; transform: translateY(6px); }
.pe-bulle b { display: block; font-size: .68rem; color: #9fc0f2; }
.pe.actif .pe-bulle { animation: monte .4s 1s forwards; }
.decision { display: grid; gap: .5rem; }
.pe.actif .decision .vert { animation: appui .5s .7s ease both; }
.pe .empreinte { font: .72rem/1.4 ui-monospace, monospace; color: var(--encre-3); opacity: 0; }
.pe.actif .empreinte { animation: monte .4s 1.7s forwards; }
.ligne-pe { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--trait); border-radius: 10px; font-size: .82rem; }
.ligne-pe b { white-space: nowrap; font-size: .76rem; color: #067647; }
.pe.actif .ligne-pe .change s { animation: efface .3s .8s forwards; } .pe.actif .ligne-pe .change em { animation: monte .3s .9s forwards; }
.pe.actif .ligne-pe .change.c2 s { animation-delay: 1.6s; } .pe.actif .ligne-pe .change.c2 em { animation-delay: 1.7s; }
.sig { width: 60%; height: auto; justify-self: end; }
.pe.actif .sig path { animation: trace 1s 1.6s ease forwards; }
.ligne-pe.res b { opacity: 0; } .ligne-pe.res b::before { content: "✓ "; }
.pe.actif .ligne-pe.res b { animation: monte .3s .4s forwards; }
.pe.actif .ligne-pe.res:nth-of-type(2) b { animation-delay: .8s; } .pe.actif .ligne-pe.res:nth-of-type(3) b { animation-delay: 1.2s; }
.jauge { height: 8px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; background: #12b76a; border-radius: inherit; }
.pe.actif .jauge i { animation: remplit-tout 1.2s .3s ease forwards; }
@keyframes remplit-tout { to { width: 100%; } }
.pe.actif .pe-ok { animation-delay: 1.5s; }

/* Sans script : le parcours devient une simple liste. */
html:not(.js) .parcours { height: auto; padding: 4rem 0; }
html:not(.js) .parcours-collant { position: static; height: auto; }
html:not(.js) .parcours-ecran { display: none; }
html:not(.js) .parcours-etapes .txt span { max-height: none; opacity: 1; }
html:not(.js) .parcours-grille { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .parcours { height: calc(8 * 45vh + 100vh); }
  .parcours-grille { grid-template-columns: 1fr; gap: 1rem; }
  .parcours-tete h2 { font-size: 1.45rem; }
  /* La liste devient une rangée de numéros, reliés par la ligne. */
  .parcours-etapes { grid-auto-flow: column; justify-content: space-between; gap: 0; }
  .parcours-etapes::before, .parcours-etapes::after { left: 17px; right: 17px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .parcours-etapes::after { right: auto; width: calc((100% - 34px) * var(--p, 0)); height: 2px; }
  .parcours-etapes button { padding: 0; }
  .parcours-etapes .num { width: 34px; height: 34px; font-size: .7rem; }
  .parcours-etapes .txt { display: none; }
  .parcours-actuel { display: block; position: absolute; left: 0; right: 0; top: 0; padding: 1rem 1.1rem 0; z-index: 2; }
  .parcours-actuel b { display: block; font-size: 1.05rem; } .parcours-actuel span { font-size: .85rem; color: var(--encre-2); }
  .parcours-ecran { aspect-ratio: auto; height: calc(100vh - var(--entete, 64px) - 13rem); max-height: none; }
  .pe { padding: 5.2rem 1rem 1rem; }
  .pe-carte { padding: 1rem; gap: .55rem; font-size: .82rem; }
  .pe-titre { font-size: 1.15rem; }
  .fin-volet { grid-template-columns: 1fr; }
  .fin-action { padding: .7rem; }
  .fin-volet .bouton-demo { display: none; }
}
@media (max-width: 620px) {
  .fin-onglets button { padding: .4rem .65rem; font-size: .75rem; }
  .fin-total { font-size: .72rem; } .fin-total b { font-size: .95rem; }
  .finance { padding: .8rem; gap: .55rem; }
  .feuille { padding: .7rem .8rem; }
  .poste { font-size: .74rem; padding: .38rem 0; }
  .clauses { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poste, .tampon, .pe-ok, .gens span, .ligne-t, .pe-bulle, .pe .empreinte, .ligne-pe.res b { opacity: 1; transform: none; }
  .poste .change s, .ligne-pe .change s { opacity: 0; } .poste .change em, .ligne-pe .change em { opacity: 1; }
  .signatures path, .sig path { stroke-dashoffset: 0; }
  .pe-plan .pin { transform: rotate(-45deg) scale(1); }
  .jauge i { width: 100%; }
  .pe { transition: none; }
}.poste .change, .ligne-pe .change { justify-items: end; }

/* ── Drive ───────────────────────────────────────────────────────────── */
.badge-europe { display: inline-flex; align-items: center; gap: .55rem; margin: .9rem 0 0; font-size: .85rem; font-weight: 600; color: var(--encre); background: #fff; border: 1px solid var(--trait); border-radius: 999px; padding: .45rem .9rem .45rem .5rem; animation: entre .8s .45s cubic-bezier(.2,.7,.2,1) both; }
.badge-europe::before, .europe::before { content: "UE"; width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .58rem; font-weight: 800; letter-spacing: .02em; color: #ffcc00; background: #003399; }
.drive { position: absolute; inset: 0; padding: 1.1rem; display: grid; grid-template-columns: .85fr 2fr; gap: .8rem; }
.drive-arbo, .drive-fichiers { background: #fff; border-radius: 14px; padding: .9rem; box-shadow: 0 10px 26px -18px rgb(16 24 40 / .45); display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.dossier { font-size: .8rem; padding: .45rem .55rem; border-radius: 8px; display: flex; align-items: center; gap: .5rem; color: var(--encre-2); }
.dossier::before { content: ""; width: 16px; height: 12px; border-radius: 2px 2px 3px 3px; background: #f5c451; box-shadow: inset 0 3px 0 #e9ae2c; flex: none; }
.dossier.ouvert { background: var(--bleu-pale); color: var(--encre); font-weight: 600; }
.dossier.nouveau { opacity: 0; transform: translateX(-8px); }
.scene-drive.active .dossier.nouveau { animation: monte .4s .3s forwards; }
.jauge-stock { margin-top: auto; font-size: .7rem; color: var(--encre-2); display: grid; gap: .3rem; }
.jauge-stock i { height: 6px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.jauge-stock b { display: block; height: 100%; width: 34%; background: var(--bleu); border-radius: inherit; }
.scene-drive.active .jauge-stock b { animation: stock 1.6s .6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes stock { to { width: 38%; } }
.europe { display: flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 600; color: #003399; background: #eef2fb; border-radius: 8px; padding: .4rem .5rem; }
.europe::before { width: 20px; height: 20px; font-size: .5rem; }
.import { font-size: .75rem; color: var(--encre-2); display: grid; gap: .35rem; padding-bottom: .5rem; border-bottom: 1px solid var(--gris); }
.import i { height: 6px; border-radius: 99px; background: var(--gris); overflow: hidden; }
.import b { display: block; height: 100%; width: 0; background: #12b76a; border-radius: inherit; }
.scene-drive.active .import b { animation: remplit-tout 1.6s .4s ease forwards; }
.fichiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.fichier { border: 1px solid var(--trait); border-radius: 10px; padding: .55rem; font-size: .72rem; display: grid; gap: .35rem; opacity: 0; transform: translateY(10px) scale(.95); transition: border-color .3s, background .3s; }
.fichier i { font-style: normal; font-size: .6rem; font-weight: 800; color: #fff; border-radius: 4px; padding: .9rem 0; text-align: center; }
.fichier .t-pdf { background: #d92d20; } .fichier .t-ifc { background: var(--bleu); } .fichier .t-img { background: #0e9384; }
.scene-drive.active .fichier { animation: monte .35s ease forwards; }
.scene-drive.active .fichier:nth-child(1) { animation-delay: .6s; } .scene-drive.active .fichier:nth-child(2) { animation-delay: .8s; } .scene-drive.active .fichier:nth-child(3) { animation-delay: 1s; }
.scene-drive.active .fichier:nth-child(4) { animation-delay: 1.2s; } .scene-drive.active .fichier:nth-child(5) { animation-delay: 1.4s; } .scene-drive.active .fichier:nth-child(6) { animation-delay: 1.6s; }
.scene-drive.active .fichier.choisi { animation: monte .35s ease forwards, choisi .01s 2.8s forwards; }
.scene-drive.active .fichier.choisi:nth-child(3) { animation-delay: 1s, 2.6s; } .scene-drive.active .fichier.choisi:nth-child(4) { animation-delay: 1.2s, 2.9s; }
@keyframes choisi { to { border-color: var(--bleu); background: var(--bleu-pale); box-shadow: inset 0 0 0 1px var(--bleu); } }
.partage { margin-top: auto; align-self: flex-start; font-size: .78rem; color: var(--encre-2); background: var(--encre); color: #fff; padding: .5rem .8rem; border-radius: 10px; opacity: 0; transform: translateY(8px); }
.partage b { color: #8fe3b8; }
.scene-drive.active .partage { animation: monte .4s 3.6s forwards; }
@media (max-width: 620px) {
  .drive { grid-template-columns: 1fr; padding: .8rem; gap: .55rem; }
  .drive-arbo .dossier, .drive-arbo .titre { display: none; }
  .drive-arbo { flex-direction: column; gap: .4rem; padding: .6rem; }
  .fichiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fichier:nth-child(n+5) { display: none; }
  .fichier i { padding: .5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dossier.nouveau, .fichier, .partage { opacity: 1; transform: none; }
  .fichier.choisi { border-color: var(--bleu); background: var(--bleu-pale); }
  .import b { width: 100%; } .jauge-stock b { width: 38%; }
}
/* Huit onglets : un peu plus serrés pour tenir sur la largeur. */
.demo-onglets button { padding: .45rem .72rem; font-size: .8rem; }
.scene-drive.active .fichier:nth-child(7) { animation-delay: 1.8s; } .scene-drive.active .fichier:nth-child(8) { animation-delay: 2s; } .scene-drive.active .fichier:nth-child(9) { animation-delay: 2.2s; }

/* ── Visualisation : 3D et 2D dans un même onglet ────────────────────── */
/* Une vue active dans une scène cachée resterait « visible » (la visibilité
   d'un enfant l'emporte sur celle du parent) et capterait les clics. */
.scene:not(.active) .scene { visibility: hidden; }
.visu-onglets { position: absolute; top: .8rem; right: .9rem; z-index: 3; display: flex; gap: .25rem; background: rgb(255 255 255 / .92); padding: .25rem; border-radius: 12px; box-shadow: 0 8px 22px -12px rgb(16 24 40 / .45); backdrop-filter: blur(6px); }
.visu-onglets button { border: 0; background: transparent; font: 600 .8rem var(--police); color: var(--encre-2); padding: .45rem .85rem; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.visu-onglets button:hover { color: var(--encre); }
.visu-onglets button:active { transform: scale(.95); }
.visu-onglets button[aria-selected="true"] { background: var(--bleu); color: #fff; }
.scene-visu .scene { transition: opacity .45s ease, visibility .45s, transform .5s cubic-bezier(.2,.7,.2,1); transform: scale(.985); }
.scene-visu .scene.active { transform: none; }
@media (max-width: 620px) {
  .visu-onglets { top: .6rem; right: .6rem; }
  .visu-onglets button { padding: .35rem .6rem; font-size: .72rem; }
  .scene-visu .legende-demo { top: 3.4rem; }
  .scene-visu .version-2d { top: 3.4rem; }
}/* Si un mot du titre est trop long pour la colonne, il passe à la ligne
   plutôt que de déborder sur la démonstration. */
.heros-demo .mot-tournant > span { white-space: normal; }

/* ── Écrans moyens et peu hauts (portable, écran zoomé à 125-150 %) ──────
   Vu chez le fondateur : 1920 pixels zoomés à 150 %, soit une page
   d'environ 1270 × 660. La démonstration gardait la proportion d'un grand
   écran — plus haute que la fenêtre, barre d'outils coupée en bas — et ses
   sept onglets débordaient des deux côtés. La hauteur suit maintenant celle
   de la fenêtre, et les onglets se serrent tant qu'il le faut. */
@media (min-width: 1081px) {
  .heros-demo { padding-top: clamp(1.25rem, 6vh - 1rem, 4.5rem); }
  .heros-demo h1 { font-size: clamp(2.2rem, min(1.2rem + 2.7vw, 7.6vh), 4rem); }
  .heros-demo .chapeau { font-size: clamp(1rem, min(.9rem + .35vw, 2.6vh), 1.2rem); }
  .heros-demo .boutons { margin-top: clamp(1rem, 3vh, 2rem); }
  .demo-corps { aspect-ratio: auto; height: clamp(380px, 100vh - 270px, 640px); }
}
@media (min-width: 1081px) and (max-width: 1600px) {
  .feux { display: none; }
  .demo-barre { padding: .55rem .6rem; }
  .demo-onglets { gap: .1rem; }
  .demo-onglets button { padding: .42rem .55rem; font-size: .74rem; }
}
/* Quand la fenêtre de démonstration est basse (écran peu haut), chaque scène
   retire ce qui est en trop au lieu de déborder : la dernière activité, les
   photos de chantier, une rangée de fichiers, les suggestions de l'assistant.
   C'est la hauteur de la fenêtre qui décide (requête de conteneur), pas celle
   de l'écran : le même réglage vaut pour le téléphone. */
.demo-corps { container-type: size; container-name: demo; }
.chat-ia > * { flex-shrink: 0; }
@container demo (max-height: 470px) {
  .activite, .crc-dictee .photos, .prochaine, .chat-ia .suggestions { display: none; }
  .fichier:nth-child(n+7) { display: none; }
  .tdb, .crc, .fact, .drive, .finance { padding: .8rem; gap: .6rem; }
  .chat-ia { padding: .9rem 1rem; gap: .5rem; }
  .chat-ia .reponse { min-height: 0; padding: .7rem .9rem; font-size: .8rem; line-height: 1.5; }
  .chat-ia .question { padding: .5rem .8rem; font-size: .82rem; }
  .chat-ia .action { padding: .45rem .8rem; }
  .chat-ia .saisie { margin-top: auto; padding: .5rem .8rem; }
  .crc-dictee, .crc-doc { gap: .5rem; }
  .reserve { padding: .4rem .5rem; }
}@container demo (max-height: 470px) { .drive-arbo > span.dossier:nth-of-type(5) { display: none; } }
/* Sur téléphone la réponse de l'assistant prend plus de lignes : les sources
   cèdent la place à la barre de saisie. */
@container demo (max-width: 460px) and (max-height: 520px) { .chat-ia .sources { display: none; } }

/* ── Le logo qui forme son lien ──────────────────────────────────────────
   Au survol, les deux cadres s'écartent, puis reviennent s'entrelacer avec
   un léger rebond : le lien entre l'architecte et son client se forme sous
   le curseur (le noir part plus loin à gauche : le bleu ne doit pas toucher
   le « A » du nom). Les coupes des masques (qui font passer un cadre devant
   l'autre) suivent l'autre cadre, d'où le double déplacement. Une seule
   fois par survol, et rien quand l'utilisateur demande moins de mouvement. */
.marque-logo:hover .lien-noir { animation: lien-noir 1.1s cubic-bezier(.3, .7, .3, 1); }
.marque-logo:hover .lien-bleu { animation: lien-bleu 1.1s cubic-bezier(.3, .7, .3, 1); }
.marque-logo:hover .coupe-bleu { animation: coupe-bleu 1.1s cubic-bezier(.3, .7, .3, 1); }
.marque-logo:hover .coupe-noir { animation: coupe-noir 1.1s cubic-bezier(.3, .7, .3, 1); }
@keyframes lien-noir { 35% { transform: translateX(-13px); } 72% { transform: translateX(1.5px); } }
@keyframes lien-bleu { 35% { transform: translateX(7px); } 72% { transform: translateX(-1px); } }
@keyframes coupe-bleu { 35% { transform: translateX(20px); } 72% { transform: translateX(-2.5px); } }
@keyframes coupe-noir { 35% { transform: translateX(-20px); } 72% { transform: translateX(2.5px); } }
@media (prefers-reduced-motion: reduce) {
  .marque-logo:hover .lien-noir, .marque-logo:hover .lien-bleu,
  .marque-logo:hover .coupe-bleu, .marque-logo:hover .coupe-noir { animation: none; }
}
/* ── Tarifs : prix à l'année, groupes du tableau, packs ───────────────── */
.prix-an { margin: .35rem 0 .9rem; font-size: .85rem; color: var(--encre-3); }
.offre.mise .prix-an { color: #b6bcc6; }
.comparatif tr.groupe td { padding-top: 1.4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); border-bottom: 1px solid var(--trait); }
.packs { margin-top: 2rem; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.4rem 1.6rem; }
.packs h3 { margin-bottom: .8rem; }
.packs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.packs li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; background: var(--gris); border-radius: 12px; padding: .75rem 1rem; margin: 0; }
.packs li b { white-space: nowrap; }

/* ── Pages par métier (architecte, intérieur, chantier) ────────────────
   Chaque page raconte un projet : un haut de page avec sa scène, jouée une
   fois à l'ouverture, puis une semaine datée, le journal, les limites.
   Les scènes se dessinent en unités de leur cadre (cqw) : elles gardent la
   même composition du téléphone au grand écran. Sans animation, tout est
   là d'emblée : chaque animation part d'un état caché vers l'état normal. */
.mt-heros { padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.mt-heros-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.mt-heros h1 { font-size: clamp(2.1rem, 1.1rem + 3.2vw, 4.2rem); }
.mt-cadre { margin: 0; background: #fff; border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; box-shadow: 0 50px 90px -50px rgb(20 20 20 / .45), 0 0 0 8px rgb(47 111 214 / .05); animation: mt-monte 1s .15s cubic-bezier(.2,.7,.2,1) both; }
.mt-barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--trait); background: #fbfcfd; font-size: .8rem; }
.mt-fil { color: var(--encre-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-fil i { font-style: normal; color: var(--encre-3); margin: 0 .3rem; }
.mt-outil { background: var(--bleu); color: #fff; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; white-space: nowrap; }
.mt-scene { position: relative; aspect-ratio: 16 / 11; background: linear-gradient(180deg, #f6f9fd, #e9f0f9); container-type: inline-size; font-size: clamp(8px, 1.85cqw, 14px); overflow: hidden; }
@keyframes mt-monte { from { opacity: 0; transform: translateY(.8em); } }
@keyframes mt-tombe { from { opacity: 0; transform: translateY(-2.2em) scale(.6) rotate(-45deg); } }
@keyframes mt-ecrit { from { clip-path: inset(0 100% 0 0); } }

/* La planche d'ambiance : un coin salon dessiné en élévation, ses
   accessoires repérés, les matières en bas comme sur une vraie planche. */
.mt-planche { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); width: 58%; background: #fbf8f3; border-radius: .6em; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .45); padding: 3% 3% 2.5%; display: flex; flex-direction: column; gap: .6em; }
.mt-planche-titre { margin: 0; font-size: .72em; font-weight: 600; color: var(--encre-2); }
.mt-salon { position: relative; aspect-ratio: 3 / 2; border-radius: .3em; overflow: visible; }
.mt-salon svg { display: block; width: 100%; height: 100%; border-radius: .3em; }
.mt-salon .mt-pastille { animation: mt-tombe .45s var(--d) cubic-bezier(.3,1.6,.5,1) both; }
.mt-salon .mt-choisie { animation: mt-tombe .45s var(--d) cubic-bezier(.3,1.6,.5,1) both, mt-anneau 1.1s 2.9s ease-out 2; }
@keyframes mt-anneau { from { box-shadow: 0 0 0 0 rgb(47 111 214 / .6), 0 .5em 1.2em -.3em rgb(47 111 214 / .7); } to { box-shadow: 0 0 0 1em rgb(47 111 214 / 0), 0 .5em 1.2em -.3em rgb(47 111 214 / .7); } }
.mt-echantillons { display: flex; flex-wrap: wrap; gap: .4em 1em; }
.mt-echantillons span { display: flex; align-items: center; gap: .4em; font-size: .66em; font-weight: 600; color: var(--encre-2); }
.mt-echantillons i { width: 1.9em; height: 1.9em; border-radius: .25em; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.lin { background: repeating-linear-gradient(0deg, rgb(70 55 35 / .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(70 55 35 / .06) 0 1px, transparent 1px 4px), #e6dccb; }
.laiton { background: linear-gradient(125deg, #8a6a2f 0%, #d9b569 38%, #f0d9a0 46%, #b68f45 62%, #e3c27c 82%, #9c7735 100%); }
.noyer { background: repeating-linear-gradient(100deg, #5e4330 0 .15em, #6f5039 .15em .45em, #58402e .45em .6em); }
.terracotta { background: #c0694b; }
/* La goutte : sa pointe désigne l'endroit, le chiffre reste droit. */
.mt-pastille, .mt-goutte { position: absolute; width: 2.2em; height: 2.2em; margin: -2.6em 0 0 -1.1em; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--bleu); box-shadow: 0 .5em 1.2em -.3em rgb(47 111 214 / .7); color: transparent; font-size: .95em; }
.mt-pastille::after, .mt-goutte::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); color: #fff; font-weight: 700; }
.mt-pose { animation: mt-tombe .5s 3.1s cubic-bezier(.3,1.6,.5,1) both; }

/* La fiche produit, lue depuis un lien */
.mt-fiche { position: absolute; right: 4%; top: 15%; width: 36%; background: #fff; border-radius: .9em; padding: .9em; box-shadow: 0 1.6em 3.2em -1.6em rgb(16 24 40 / .5); display: grid; gap: .7em; animation: mt-monte .6s .7s cubic-bezier(.2,.7,.2,1) both; }
.mt-lien { border: 1px solid var(--trait); border-radius: .55em; padding: .45em .6em; font-size: .78em; color: var(--encre-2); white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.mt-url { display: inline; animation: mt-ecrit 1s 1.1s steps(24) both; }
.mt-produit { display: grid; grid-template-columns: 4.6em 1fr; gap: .7em; align-items: center; animation: mt-monte .5s 2.3s ease both; }
.mt-produit b { display: block; font-size: .85em; line-height: 1.25; }
.mt-produit span { display: block; font-size: .72em; color: var(--encre-3); }
.mt-produit .mt-prix { color: var(--encre); font-weight: 700; font-size: .85em; margin-top: .2em; }
.mt-photo { display: block; width: 100%; aspect-ratio: 1; border-radius: .5em; background: #f1ece4; }
.mt-lu { justify-self: start; font-size: .7em; font-weight: 600; color: var(--bleu-fonce); background: var(--bleu-pale); padding: .25em .6em; border-radius: 999px; animation: mt-monte .4s 2.6s ease both; }
.mt-decision { border-top: 1px solid var(--trait); padding-top: .7em; }
.mt-valide { display: inline-block; font-size: .75em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .35em .7em; border-radius: 999px; animation: mt-monte .45s 3.9s cubic-bezier(.2,.7,.2,1) both; }

/* Chantier : le téléphone qui dicte, le compte rendu qui s'écrit */
.mt-tel { position: absolute; left: 5%; top: 7%; width: 33%; height: 86%; background: var(--encre); border-radius: 1.6em; padding: 1.1em .9em; color: #e6e9ee; display: flex; flex-direction: column; gap: .8em; box-shadow: 0 1.8em 3em -1.6em rgb(0 0 0 / .55); }
.mt-tel-tete { display: flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 600; }
.mt-rec { width: .65em; height: .65em; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 .25em rgb(240 68 56 / .25); }
.mt-onde { display: flex; align-items: center; gap: 2px; height: 3.2em; }
.mt-onde i { flex: 1; height: 70%; border-radius: 2px; background: #6c9be6; animation: onde .5s ease-in-out 8 alternate; }
.mt-onde i:nth-child(3n) { height: 100%; animation-delay: .15s; } .mt-onde i:nth-child(4n+1) { height: 40%; animation-delay: .3s; } .mt-onde i:nth-child(5n) { height: 85%; }
.mt-dit { margin: 0; font-size: .8em; line-height: 1.45; color: #cfd6e0; font-style: italic; animation: mt-monte .5s var(--d) ease both; }
.mt-photos { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; animation: mt-monte .5s var(--d) ease both; }
.mt-photos .mt-vignette { border-radius: .5em; }
.mt-photos i { grid-column: 1 / -1; font-style: normal; font-size: .72em; color: #9aa4b2; }
.mt-doc { position: absolute; right: 4%; top: 6%; width: 52%; height: 88%; background: #fff; border-radius: .6em; padding: 1.1em 1.2em; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .45); display: flex; flex-direction: column; gap: .85em; }
.mt-doc-tete { border-bottom: 2px solid var(--encre); padding-bottom: .5em; }
.mt-doc-tete b { display: block; font-size: .9em; }
.mt-doc-tete span { font-size: .72em; color: var(--encre-3); }
.mt-doc-bloc { display: grid; gap: .4em; animation: mt-monte .5s var(--d) cubic-bezier(.2,.7,.2,1) both; }
.mt-doc-titre { font-size: .68em; font-weight: 700; color: var(--encre-2); }
.mt-ligne { display: grid; grid-template-columns: 3.6em 1fr; gap: .5em; font-size: .75em; }
.mt-ligne i { font-style: normal; font-weight: 600; color: var(--bleu-fonce); }
.mt-reserve { display: grid; grid-template-columns: 2.6em 1fr; gap: .6em; align-items: center; }
.mt-reserve b { display: block; font-size: .75em; line-height: 1.3; }
.mt-reserve i { display: block; font-style: normal; font-size: .68em; color: var(--encre-3); }
.mt-vignette { aspect-ratio: 1; border-radius: .35em; }
.carrelage { background: linear-gradient(90deg, transparent 0 46%, #b4bcc6 46% 54%, transparent 54%), linear-gradient(0deg, transparent 0 46%, #b4bcc6 46% 54%, transparent 54%), #e8ecf1; background-size: 1.2em 1.2em; }
.appui { background: linear-gradient(180deg, #d9dee5 0 55%, #9aa5b3 55% 70%, #eef1f4 70%); }
.mt-envoye { margin-top: auto; align-self: flex-start; font-size: .72em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .35em .75em; border-radius: 999px; animation: mt-monte .45s 4.6s cubic-bezier(.2,.7,.2,1) both; }

/* Architecte : la maquette, avec et sans murs */
.mt-vue { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s ease; }
.mt-coupe { opacity: 0; }
.mt-scene-3d.sans-murs .mt-volume { opacity: 0; }
.mt-scene-3d.sans-murs .mt-coupe { opacity: 1; }
.mt-vue polygon { stroke: rgb(20 20 20 / .22); stroke-width: 1; stroke-linejoin: round; }
.mt-epingle { position: absolute; width: 0; height: 0; transition: opacity .3s; }
.mt-epingle .mt-goutte { left: 0; top: 0; animation: mt-tombe .5s 1.2s cubic-bezier(.3,1.6,.5,1) both; }
.mt-scene-3d.sans-murs .mt-epingle { opacity: 0; }
.mt-bulle { position: absolute; left: 1.6em; top: -6.6em; white-space: nowrap; background: #fff; border-radius: .9em .9em .9em .25em; padding: .55em .8em; font-size: .85em; box-shadow: 0 1em 2.4em -1em rgb(16 24 40 / .45); animation: mt-monte .45s 1.7s cubic-bezier(.2,.7,.2,1) both; }
.mt-bulle b { display: block; font-size: .8em; color: var(--bleu-fonce); }
.mt-outils { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); background: rgb(20 20 20 / .85); padding: .3em; border-radius: 999px; }
.mt-outils button { font: 600 .85em var(--police); color: #e6e9ee; background: transparent; border: 0; padding: .55em 1em; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.mt-outils button:hover { color: #fff; background: rgb(255 255 255 / .1); }
.mt-outils button[aria-pressed="true"] { background: var(--bleu); color: #fff; }
.mt-outils button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Architecte : sans ArchLink, avec ArchLink */
.mt-avant-apres { border-top: 1px solid var(--encre); }
.mt-avant-apres > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 4rem); padding: 1.15rem 0; border-bottom: 1px solid var(--trait); }
.mt-avant-apres > div > span:first-child { color: var(--encre-3); }
.mt-avant-apres > div > span:last-child { color: var(--encre-2); }
.mt-avant-apres b { color: var(--encre); font-weight: 600; }
.mt-aa-tete span { font-size: .85rem; font-weight: 600; color: var(--encre-2) !important; }
@media (max-width: 760px) {
  .mt-avant-apres > div { grid-template-columns: 1fr; gap: .35rem; }
  .mt-aa-tete { display: none !important; }
  .mt-avant-apres > div > span:first-child { font-size: .9rem; text-decoration: line-through; text-decoration-color: rgb(102 112 133 / .5); }
}

/* Le récit : une semaine datée */
.mt-recit { list-style: none; padding: 0; margin: 0; display: grid; }
.mt-etape { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; padding: 2.6rem 0; margin: 0; border-top: 1px solid #e3e7ec; }
.mt-etape:first-child { border-top: 0; padding-top: 0; }
.mt-quand { margin: 0; align-self: start; padding-top: .3rem; font-size: .95rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.mt-quand b { display: block; color: var(--encre); font-size: 1.05rem; }
.mt-texte h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); margin-bottom: .55em; }
.mt-texte p { color: var(--encre-2); margin: 0; max-width: 60ch; }
.mt-visuel { border-radius: 22px; background: #fff; border: 1px solid var(--trait); display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.2rem); }
.mt-visuel .mini { box-shadow: 0 18px 36px -26px rgb(16 24 40 / .35); border: 1px solid var(--trait); }
.mt-choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.mt-choix span { font-size: .8rem; font-weight: 600; padding: .45rem .8rem; border-radius: 9px; background: var(--gris); color: var(--encre); }
.mt-choix .mt-oui { background: var(--bleu); color: #fff; }
.mt-plan-mini { position: relative; width: 100%; max-width: 440px; aspect-ratio: 520 / 330; container-type: inline-size; font-size: clamp(8px, 2.4cqw, 13px); }
.mt-plan { display: block; width: 100%; height: 100%; }

/* Le journal */
.mt-trace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mt-journal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.mt-journal li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 1rem 0; margin: 0; border-bottom: 1px solid var(--trait); font-size: .95rem; }
.mt-journal time { color: var(--encre-3); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-journal span { color: var(--encre-2); }
.mt-journal b { color: var(--encre); font-weight: 600; }
.mt-journal code { background: none; padding: 0; font-size: .78rem; color: var(--encre-3); white-space: nowrap; }

/* Les limites, dites franchement */
.mt-limites ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.mt-limites li { margin: 0; color: var(--encre-2); padding-top: 1rem; border-top: 1px solid #d9dee5; }
.mt-limites li b { display: block; color: var(--encre); margin-bottom: .3rem; }

/* Les autres métiers */
.mt-autres-titre { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.mt-autres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.mt-autres a { display: grid; gap: .3rem; padding: 1.4rem 1.6rem; border: 1px solid var(--trait); border-radius: var(--rayon); text-decoration: none; color: var(--encre-2); transition: border-color .2s, background .2s; }
.mt-autres a b { color: var(--encre); font-size: 1.1rem; }
.mt-autres a b::after { content: " \2192"; color: var(--bleu); }
.mt-autres a:hover { border-color: var(--bleu); background: var(--bleu-pale); color: var(--encre-2); }

/* L'accueil : vers les pages par métier */
.metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.metiers a { display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; padding: 1.6rem; border-radius: var(--rayon); background: #fff; border: 1px solid var(--trait); text-decoration: none; color: var(--encre-2); transition: border-color .2s; }
.metiers a:hover { border-color: var(--bleu); color: var(--encre-2); }
.metiers h3 { margin: 0; }
.metiers p { margin: 0; }
.metiers .voir { margin-top: .6rem; color: var(--bleu); font-weight: 600; font-size: .92rem; }

@media (max-width: 1080px) {
  .mt-heros-grille, .mt-trace { grid-template-columns: 1fr; }
  .mt-etape { grid-template-columns: 1fr 1fr; }
  .mt-quand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mt-etape { grid-template-columns: 1fr; gap: 1rem; }
  .mt-limites ul, .mt-autres, .metiers { grid-template-columns: 1fr; }
  .mt-journal li { grid-template-columns: 1fr; gap: .2rem; }
}


/* ── Fonctionnalités : dix modules, une scène qui suit la lecture ───────
   À gauche, les modules défilent ; à droite, une scène reste en place et
   joue le module lu. Une scène se rejoue chaque fois qu'on y revient : ses
   éléments (.a) partent d'un état caché seulement si le visiteur accepte le
   mouvement et que le script tourne ; sinon tout est déjà là. */
.fx-heros { padding: clamp(3rem, 2rem + 3vw, 5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.fx-heros h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); max-width: 16ch; }
.fx-heros .chapeau { max-width: 620px; }
.fx-index { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; max-width: 980px; }
.fx-index a { padding: .5rem .95rem; border-radius: 999px; background: var(--gris); color: var(--encre); text-decoration: none; font-size: .9rem; font-weight: 600; transition: background .2s, color .2s; animation: mt-monte .5s calc(.15s + var(--i) * 55ms) cubic-bezier(.2,.7,.2,1) both; }
.fx-index a:hover { background: var(--bleu); color: #fff; }

/* Le haut de page : ArchLink au centre, les dix modules autour, reliés.
   Les fils se tracent à l'ouverture, puis des impulsions y circulent : les
   modules se parlent. Chaque module est un lien vers sa partie. */
.fx-heros-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.fx-hub { position: relative; aspect-ratio: 1.08; width: 100%; max-width: 640px; justify-self: end; }
.fx-hub-fils { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-hub-fils path, .fx-hub-fils ellipse { fill: none; vector-effect: non-scaling-stroke; }
.fx-anneau { stroke: #d5deeb; stroke-width: 1; stroke-dasharray: .4 1.2; animation: fx-tourne 60s linear infinite; }
@keyframes fx-tourne { to { stroke-dashoffset: -100; } }
.fx-fil { stroke: #cfdbec; stroke-width: 1.2; stroke-dasharray: 100; animation: fx-trace .9s calc(.2s + var(--i) * 70ms) cubic-bezier(.2,.7,.2,1) both; }
@keyframes fx-trace { from { stroke-dashoffset: 100; } }
.fx-pouls { stroke: var(--bleu); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: 100; opacity: 0; animation: fx-pouls 3.6s calc(1.4s + var(--i) * .55s) cubic-bezier(.45,0,.55,1) infinite; }
@keyframes fx-pouls { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 70% { stroke-dashoffset: 7; opacity: 1; } 78%, 100% { stroke-dashoffset: 7; opacity: 0; } }
.fx-coeur { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: 0 24px 50px -24px rgb(20 20 20 / .45), 0 0 0 10px rgb(47 111 214 / .06); animation: mt-monte .7s .1s cubic-bezier(.2,.7,.2,1) both; }
.fx-coeur::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--bleu); opacity: 0; animation: onde-pin 2.6s 1.2s ease-out infinite; }
.fx-coeur img { width: 46%; height: auto; }
.fx-noeud { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: .5rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--trait); color: var(--encre); font-size: .86rem; font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px -16px rgb(16 24 40 / .45); transition: background .2s, color .2s, border-color .2s; animation: fx-noeud .55s calc(.55s + var(--i) * 70ms) cubic-bezier(.3,1.5,.5,1) both; }
@keyframes fx-noeud { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.fx-noeud:hover, .fx-noeud:focus-visible { background: var(--bleu); color: #fff; border-color: var(--bleu); }
@media (min-width: 861px) { .fx-heros .fx-index { display: none; } }
@media (max-width: 860px) {
  .fx-heros-grille { grid-template-columns: 1fr; }
  .fx-hub { display: none; }
}

.fx-atouts { border-block: 1px solid var(--trait); }
.fx-atouts-ligne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-atouts p { margin: 0; padding: 1.6rem 1.6rem 1.6rem 0; color: var(--encre-2); font-size: .95rem; }
.fx-atouts p + p { padding-left: 1.6rem; border-left: 1px solid var(--trait); }
.fx-atouts b { display: block; color: var(--encre); font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: .25rem; }

.fx-recit { padding: clamp(2rem, 1rem + 3vw, 4rem) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.fx-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); }
.fx-module { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 90px; transition: opacity .4s ease; }
html.js .fx-module { opacity: .3; }
html.js .fx-module.actif { opacity: 1; }
.fx-module h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.fx-module ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .55rem; }
.fx-module li { margin: 0; padding-left: 1.6rem; position: relative; color: var(--encre-2); }
.fx-module li::before { content: ""; position: absolute; left: 0; top: .5em; width: .75rem; height: .45rem; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }

.fx-scene-col { position: sticky; top: 92px; align-self: start; height: calc(100vh - 110px); display: flex; align-items: center; }
.fx-cadre { width: 100%; background: #fff; border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; box-shadow: 0 50px 90px -50px rgb(20 20 20 / .45), 0 0 0 8px rgb(47 111 214 / .05); }
.fx-barre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--trait); background: #fbfcfd; font-size: .85rem; }
.fx-titre-scene { font-weight: 700; color: var(--encre); }
.fx-compte { color: var(--encre-3); font-variant-numeric: tabular-nums; }
.fx-compte b { color: var(--bleu); }
.fx-plateau { position: relative; aspect-ratio: 16 / 11; background: linear-gradient(180deg, #f6f9fd, #e9f0f9); container-type: inline-size; font-size: clamp(8px, 1.9cqw, 15px); overflow: hidden; }
.fx-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(.97); filter: blur(6px); transition: opacity .5s ease, visibility .5s, transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.fx-scene.actif { opacity: 1; visibility: visible; transform: none; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fx-scene .a { opacity: 0; transform: translateY(.7em); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
  html.js .fx-scene.actif .a { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
  html.js .fx-scene .fx-goutte.a { transform: translateY(-2em) scale(.6) rotate(-45deg); transition-timing-function: ease, cubic-bezier(.3,1.6,.5,1); }
  html.js .fx-scene.actif .fx-goutte.a { transform: rotate(-45deg); }
  html.js .fx-scene .fx-tape { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s steps(30) .3s; }
  html.js .fx-scene.actif .fx-tape { clip-path: inset(0 0 0 0); }
}
.fx-sous { font-size: .75em; color: var(--encre-3); }
.fx-ok { justify-self: start; font-size: .75em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .35em .75em; border-radius: 999px; }
.fx-goutte { position: absolute; width: 2.2em; height: 2.2em; margin: -2.6em 0 0 -1.1em; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--bleu); box-shadow: 0 .5em 1.2em -.3em rgb(47 111 214 / .7); }
.fx-goutte::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); color: #fff; font-weight: 700; font-size: .95em; }

/* 1 · Projets */
.fx-s-projets { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6%; padding: 7% 6%; align-items: center; }
.fx-liste { display: grid; gap: .8em; }
.fx-l { background: #fff; border-radius: .8em; padding: .8em 1em; display: grid; grid-template-columns: 1fr auto; gap: .35em .8em; box-shadow: 0 1em 2em -1.5em rgb(16 24 40 / .4); font-size: .85em; }
.fx-l span { color: var(--bleu-fonce); font-weight: 600; font-size: .9em; }
.fx-l i { grid-column: 1 / -1; height: .4em; border-radius: 99px; background: var(--gris); overflow: hidden; }
.fx-l u { display: block; height: 100%; width: var(--p); background: var(--bleu); border-radius: 99px; transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1) .4s; }
.fx-scene:not(.actif) .fx-l u { transform: scaleX(0); }
.fx-tel { justify-self: center; width: 78%; aspect-ratio: 9 / 17; background: var(--encre); border-radius: 1.6em; padding: .55em; display: grid; }
.fx-tel > * { position: relative; }
.fx-tel { grid-template-rows: auto 1fr auto auto auto; gap: .55em; color: #fff; padding: 1.1em .9em; }
.fx-tel-titre { font-weight: 700; font-size: .85em; }
.fx-tel-plan { width: 100%; height: 100%; background: #fff; border-radius: .5em; padding: .4em; }
.fx-tel-txt { font-size: .68em; color: #c7ccd4; }
.fx-btn { text-align: center; background: var(--bleu); border-radius: .6em; padding: .5em; font-size: .75em; font-weight: 700; }
.fx-tel .fx-ok { font-size: .62em; justify-self: stretch; text-align: center; }

/* 2 · Plans et maquettes 3D */
.fx-3d { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s ease; }
.fx-3d polygon { stroke: rgb(20 20 20 / .22); stroke-width: 1; stroke-linejoin: round; }
.fx-3d-coupe { opacity: 0; }
@keyframes fx-coupe { 0%, 45% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-volume { 0%, 45% { opacity: 1; } 55%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fx-outil { 0%, 45% { background: rgb(20 20 20 / .85); } 55%, 90% { background: var(--bleu); } 100% { background: rgb(20 20 20 / .85); } }
.fx-s-plans.actif .fx-3d-coupe { animation: fx-coupe 7s 1.8s ease-in-out infinite; }
.fx-s-plans.actif .fx-3d-volume, .fx-s-plans.actif .fx-goutte, .fx-s-plans.actif .fx-bulle { animation: fx-volume 7s 1.8s ease-in-out infinite; }
.fx-s-plans.actif .fx-outil { animation: fx-outil 7s 1.8s ease-in-out infinite; }
.fx-bulle { position: absolute; margin: -7.2em 0 0 1.4em; white-space: nowrap; background: #fff; border-radius: .9em .9em .9em .25em; padding: .5em .8em; font-size: .85em; box-shadow: 0 1em 2.4em -1em rgb(16 24 40 / .45); }
.fx-bulle b { display: block; font-size: .8em; color: var(--bleu-fonce); }
.fx-outil { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); color: #fff; font-size: .8em; font-weight: 600; padding: .55em 1.1em; border-radius: 999px; background: rgb(20 20 20 / .85); white-space: nowrap; }

/* 3 · Validations */
.fx-s-valid { display: grid; place-items: center; padding: 6%; }
.fx-carte { width: 78%; background: #fff; border-radius: 1em; padding: 1.4em; display: grid; gap: .8em; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .5); }
.fx-carte > b { font-size: 1.05em; }
.fx-choix { display: flex; gap: .45em; flex-wrap: wrap; }
.fx-choix span { font-size: .78em; font-weight: 600; padding: .5em .85em; border-radius: .6em; background: var(--gris); }
.fx-choix .fx-pris { background: var(--bleu); color: #fff; }
.fx-champ { border: 1px solid var(--trait); border-radius: .6em; padding: .7em .8em; font-size: .82em; color: var(--encre); min-height: 2.6em; }
.fx-statut { justify-self: start; font-size: .75em; font-weight: 600; color: #b54708; background: #fffaeb; padding: .35em .75em; border-radius: 999px; }

/* 4 · Visio */
.fx-s-visio { background: #141a22; padding: 5%; display: grid; grid-template-rows: 1fr auto; gap: 4%; }
.fx-tuiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3%; }
.fx-tuile { position: relative; border-radius: .9em; background: linear-gradient(160deg, #2a3442, #1c232d); display: grid; place-items: center; }
.fx-tuile i { font-style: normal; width: 3.2em; height: 3.2em; border-radius: 50%; display: grid; place-items: center; background: #3a4656; color: #fff; font-weight: 700; }
.fx-parle i { box-shadow: 0 0 0 .3em rgb(47 111 214 / .55); }
.fx-s-visio.actif .fx-parle i { animation: fx-voix 1.2s ease-in-out infinite alternate; }
@keyframes fx-voix { from { box-shadow: 0 0 0 .15em rgb(47 111 214 / .35); } to { box-shadow: 0 0 0 .55em rgb(47 111 214 / .6); } }
.fx-tuile em { position: absolute; left: .6em; bottom: .5em; font-style: normal; font-size: .7em; color: #e6e9ee; background: rgb(0 0 0 / .35); padding: .2em .5em; border-radius: .4em; }
.fx-rec { position: absolute; right: .6em; top: .6em; font-size: .65em; font-weight: 700; color: #fff; background: rgb(217 45 32 / .9); padding: .25em .6em; border-radius: 99px; }
.fx-transcription { background: #fff; border-radius: .9em; padding: .9em 1.1em; display: grid; gap: .45em; }
.fx-transcription p { margin: 0; font-size: .8em; }
.fx-transcription b { color: var(--bleu-fonce); margin-right: .5em; }
.fx-action { display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid var(--trait); padding-top: .45em; }
.fx-action u, .fx-ligne u, .fx-total u, .fx-factures u { text-decoration: none; font-weight: 600; }
.fx-action u { color: var(--bleu-fonce); }
.fx-pret { position: absolute; right: 6%; top: 6%; font-size: .72em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .4em .8em; border-radius: 99px; }

/* 5 · Chantier */
.fx-s-chantier { padding: 6%; display: grid; grid-template-rows: auto 1fr auto; gap: 5%; }
.fx-dictee { background: var(--encre); color: #fff; border-radius: 1em; padding: .9em 1.1em; display: flex; align-items: center; gap: 1.2em; }
.fx-rec-p { font-size: .75em; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: .5em; }
.fx-rec-p::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #f04438; }
.fx-onde { flex: 1; display: flex; gap: 3px; align-items: center; height: 2.4em; }
.fx-onde i { flex: 1; height: 60%; background: #6c9be6; border-radius: 2px; }
.fx-onde i:nth-child(3n) { height: 100%; } .fx-onde i:nth-child(4n+1) { height: 35%; }
.fx-s-chantier.actif .fx-onde i { animation: onde .5s ease-in-out 6 alternate; }
.fx-s-chantier.actif .fx-onde i:nth-child(odd) { animation-delay: .2s; }
.fx-reserves { display: grid; gap: .7em; align-content: center; }
.fx-r { position: relative; background: #fff; border-radius: .8em; padding: .7em .9em; display: grid; grid-template-columns: 2.6em 1fr auto; grid-template-rows: auto auto; column-gap: .8em; align-items: center; box-shadow: 0 1em 2em -1.5em rgb(16 24 40 / .4); }
.fx-vig { grid-row: 1 / 3; aspect-ratio: 1; border-radius: .4em; }
.fx-r b { font-size: .82em; }
.fx-r em { font-style: normal; font-size: .7em; color: var(--encre-3); grid-column: 2; }
.fx-etat { grid-column: 3; grid-row: 1 / 3; font-size: .7em; font-weight: 600; padding: .35em .7em; border-radius: 99px; transition: opacity .4s; }
.fx-e1 { background: var(--bleu-pale); color: var(--bleu-fonce); }
.fx-e2 { background: #ecfdf3; color: #067647; opacity: 0; }
.fx-s-chantier.actif .fx-r:first-child .fx-e1:not(.fx-reste) { opacity: 0; transition-delay: 2s; }
.fx-s-chantier.actif .fx-e2 { opacity: 1; transition-delay: 2s; }
.fx-pdf { justify-self: start; font-size: .75em; font-weight: 600; background: #fff; border: 1px solid var(--trait); padding: .45em .8em; border-radius: .6em; }

/* 6 · Achats */
.fx-s-achats { padding: 7% 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: center; }
.fx-planche { position: relative; aspect-ratio: 1; background: #fbf8f3; border-radius: .7em; padding: 9%; display: grid; grid-template-columns: 1fr 1fr; gap: 7%; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .45); }
.fx-mat { border-radius: .3em; }
.fx-fiche { background: #fff; border-radius: .9em; padding: 1em; display: grid; gap: .55em; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .5); }
.fx-fiche b { font-size: .9em; line-height: 1.3; }
.fx-lien { border: 1px solid var(--trait); border-radius: .5em; padding: .45em .6em; font-size: .72em; color: var(--encre-2); white-space: nowrap; overflow: hidden; }

/* 7 · Devis, contrats, factures */
.fx-s-finance { padding: 6%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 5%; align-items: center; }
.fx-doc { position: relative; background: #fff; border-radius: .6em; padding: 1.2em; display: grid; gap: .55em; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .5); }
.fx-doc > b { border-bottom: 2px solid var(--encre); padding-bottom: .4em; font-size: .95em; }
.fx-ligne, .fx-total { display: flex; justify-content: space-between; gap: 1em; font-size: .75em; color: var(--encre-2); }
.fx-total { color: var(--encre); font-weight: 700; border-top: 1px solid var(--trait); padding-top: .45em; }
.fx-tampon { position: absolute; right: 7%; bottom: 14%; font-size: .8em; font-weight: 700; color: #067647; border: 2px solid #067647; padding: .3em .7em; border-radius: .4em; transform: rotate(-8deg); background: rgb(255 255 255 / .85); }
html.js .fx-scene .fx-tampon.a { transform: rotate(-8deg) scale(1.6); }
html.js .fx-scene.actif .fx-tampon.a { transform: rotate(-8deg); }
.fx-signature { width: 52%; height: auto; margin-top: .4em; }
.fx-signature path { fill: none; stroke: #1d3a6b; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fx-s-finance .fx-signature path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease-in-out .9s; }
  html.js .fx-s-finance.actif .fx-signature path { stroke-dashoffset: 0; transition-delay: 1.3s; }
}
.fx-factures { display: grid; gap: .6em; }
.fx-factures span { background: #fff; border-radius: .7em; padding: .7em .9em; font-size: .75em; display: flex; justify-content: space-between; gap: .8em; box-shadow: 0 1em 2em -1.5em rgb(16 24 40 / .4); }
.fx-factures u { color: var(--bleu-fonce); }
.fx-factures .fx-paye { color: #067647; }

/* 8 · Drive */
.fx-s-drive { padding: 7% 7% 6%; display: grid; grid-template-rows: 1fr auto; gap: 6%; }
.fx-fichiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; }
.fx-fichiers span { background: #fff; border-radius: .8em; display: grid; place-items: center; align-content: center; gap: .5em; font-size: .75em; font-weight: 600; box-shadow: 0 1em 2em -1.5em rgb(16 24 40 / .4); text-align: center; padding: .6em; }
.fx-fichiers i { font-style: normal; font-size: .85em; color: #fff; background: var(--bleu); border-radius: .4em; padding: .35em .55em; }
.fx-fichiers span:nth-child(2) i { background: #475467; } .fx-fichiers span:nth-child(3) i { background: #141414; }
.fx-stockage { display: grid; gap: .45em; font-size: .75em; color: var(--encre-2); }
.fx-stockage i { height: .6em; border-radius: 99px; background: #fff; overflow: hidden; }
.fx-stockage u { display: block; height: 100%; width: 34%; background: var(--bleu); border-radius: 99px; transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .7s; }
.fx-scene:not(.actif) .fx-stockage u { transform: scaleX(0); }

/* 9 · Assistant IA */
.fx-s-ia { padding: 7%; display: grid; align-content: center; gap: 1.2em; }
.fx-question { justify-self: end; margin: 0; background: var(--bleu); color: #fff; border-radius: 1em 1em .25em 1em; padding: .7em 1em; font-size: .9em; max-width: 80%; }
.fx-reponse { background: #fff; border-radius: 1em 1em 1em .25em; padding: 1em 1.1em; max-width: 88%; box-shadow: 0 1.4em 3em -1.8em rgb(16 24 40 / .5); display: grid; gap: .55em; }
.fx-ia { font-size: .72em; font-weight: 700; color: var(--bleu-fonce); }
.fx-reponse p { margin: 0; font-size: .85em; line-height: 1.5; }
.fx-sources { display: flex; flex-wrap: wrap; gap: .4em; }
.fx-sources i { font-style: normal; font-size: .68em; font-weight: 600; background: var(--gris); padding: .3em .6em; border-radius: .4em; color: var(--encre-2); }

/* 10 · Preuve */
.fx-s-preuve { padding: 7% 9%; display: grid; align-content: center; gap: 1.2em; }
.fx-chaine { list-style: none; margin: 0; padding: 0; display: grid; gap: .9em; position: relative; }
.fx-chaine li { position: relative; margin: 0; background: #fff; border-radius: .8em; padding: .75em 1em; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; box-shadow: 0 1em 2em -1.5em rgb(16 24 40 / .4); font-size: .85em; }
.fx-chaine li + li::before { content: ""; position: absolute; left: 1.4em; top: -.9em; height: .9em; border-left: 2px dashed var(--bleu); }
.fx-chaine code { background: none; padding: 0; font-size: .82em; color: var(--encre-3); }
.fx-horo { justify-self: start; font-size: .75em; font-weight: 600; color: #fff; background: var(--encre); padding: .45em .9em; border-radius: 99px; }

/* Et aussi */
.fx-aussi-titre { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }
.fx-aussi { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 3rem; }
.fx-aussi li { margin: 0; padding-top: 1rem; border-top: 1px solid #d9dee5; color: var(--encre-2); }
.fx-aussi b { display: block; color: var(--encre); }

@media (max-width: 1080px) {
  .fx-atouts-ligne { grid-template-columns: 1fr 1fr; }
  .fx-atouts p:nth-child(3) { padding-left: 0; border-left: 0; }
  .fx-atouts p:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .fx-aussi { grid-template-columns: 1fr 1fr; }
}
/* Sur téléphone, la scène reste en haut et les modules passent dessous. */
@media (max-width: 860px) {
  .fx-grille { grid-template-columns: 1fr; gap: 0; }
  .fx-scene-col { order: -1; top: 76px; height: auto; z-index: 2; background: linear-gradient(#fff 85%, rgb(255 255 255 / 0)); padding: .6rem 0 1.4rem; }
  .fx-cadre { border-radius: 16px; }
  .fx-module { min-height: 58vh; justify-content: flex-start; padding-top: 1rem; }
  .fx-atouts-ligne, .fx-aussi { grid-template-columns: 1fr; }
  .fx-atouts p, .fx-atouts p + p { padding: 1.1rem 0; border-left: 0; }
  .fx-atouts p + p { border-top: 1px solid var(--trait); }
}

/* Écrans peu hauts (portable, ou navigateur zoomé) : le parcours doit tenir
   en entier sous l'en-tête, sinon son titre passe dessous et la dernière
   étape sort par le bas. On resserre, sans rien retirer. */
@media (min-width: 901px) and (max-height: 900px) {
  .parcours-tete { margin-bottom: clamp(.6rem, 2vh, 1.4rem); }
  .parcours-tete h2 { font-size: clamp(1.35rem, .6rem + 3.2vh, 2.4rem); }
  .parcours-etapes .num { width: 36px; height: 36px; }
  .parcours-etapes::before, .parcours-etapes::after { left: 17px; top: 18px; bottom: 18px; }
  .parcours-etapes::after { height: calc((100% - 36px) * var(--p, 0)); }
  .parcours-etapes button { padding: .2rem .6rem .2rem 0; }
  .parcours-etapes .txt { padding-top: .3rem; }
  .parcours-etapes .txt b { font-size: .95rem; }
  .parcours-etapes li.actif .txt b { font-size: 1.05rem; }
  .parcours-ecran { max-height: calc(100vh - var(--entete, 72px) - 9rem); }
}
@media (min-width: 901px) and (max-height: 700px) {
  .parcours-etapes { gap: 0; }
  .parcours-etapes .num { width: 30px; height: 30px; font-size: .7rem; }
  .parcours-etapes::before, .parcours-etapes::after { left: 14px; top: 15px; bottom: 15px; }
  .parcours-etapes::after { height: calc((100% - 30px) * var(--p, 0)); }
  .parcours-etapes button { padding: .08rem .6rem .08rem 0; gap: .8rem; }
  .parcours-etapes .txt { padding-top: .2rem; }
  .parcours-etapes .txt b { font-size: .9rem; }
  .parcours-etapes li.actif .txt b { font-size: .98rem; }
  .parcours-etapes li.actif .txt span { max-height: 2.8em; font-size: .84rem; margin-top: 0; }
  .parcours-ecran { max-height: calc(100vh - var(--entete, 72px) - 6.5rem); }
}

/* Tarifs : le bouton d'une offre tient sur une ligne. */
.offre .bouton { white-space: nowrap; padding-inline: 1rem; }
@media (max-width: 1180px) and (min-width: 921px) { .offre .bouton { font-size: .88rem; } .offre { padding-inline: 1.3rem; } }

/* Téléphone : les onglets de la démonstration défilent ; un fondu sur le
   bord droit le montre, plutôt qu'un mot coupé net. */
@media (max-width: 720px) {
  .demo-onglets { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 2.5rem; }
}

/* Fonctionnalités · Contrats : les articles se posent, le chiffre non saisi
   est signalé en tête, puis le contrat avance jusqu'à la signature. */
.fx-s-contrat { padding: 6%; display: grid; grid-template-columns: 1.35fr 1fr; gap: 6%; align-items: center; }
.fx-contrat { background: #fff; border-radius: .6em; padding: 1.2em 1.3em; display: grid; gap: .5em; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .5); }
.fx-contrat > b { font-size: .95em; }
.fx-contrat > .fx-sous { border-bottom: 2px solid var(--encre); padding-bottom: .55em; margin-bottom: .1em; }
.fx-art { display: flex; align-items: baseline; gap: .7em; font-size: .75em; color: var(--encre-2); padding: .2em .3em; border-radius: .3em; }
.fx-art i { font-style: normal; font-weight: 700; color: var(--encre-3); min-width: 1.1em; }
.fx-art u { margin-left: auto; text-decoration: none; font-weight: 600; color: var(--encre); }
.fx-suspect u { color: #b54708; background: #fffaeb; padding: 0 .3em; border-radius: .25em; box-shadow: 0 0 0 1px #fedf89; }
.fx-alerte { font-size: .7em; color: #93370d; background: #fffaeb; border: 1px solid #fedf89; border-radius: .45em; padding: .5em .7em; }
.fx-alerte b { margin-right: .35em; }
.fx-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1em; position: relative; }
.fx-etapes::before { content: ""; position: absolute; left: .7em; top: 1em; bottom: 1em; width: 2px; background: var(--trait); }
.fx-etapes li { position: relative; padding-left: 2.3em; display: grid; gap: .1em; }
.fx-etapes li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; border: 2px solid var(--bleu); box-sizing: border-box; }
.fx-etapes li::after { content: ""; position: absolute; left: .47em; top: .42em; width: .45em; height: .26em; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }
.fx-etapes b { font-size: .85em; }
.fx-etapes span { font-size: .72em; color: var(--encre-3); }
.fx-etapes .fx-signe::before { background: #067647; border-color: #067647; }
.fx-etapes .fx-signe::after { border-color: #fff; }
.fx-etapes .fx-signe b { color: #067647; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fx-scene .fx-alerte.a { transform: translateY(-.4em) scale(.97); }
  html.js .fx-s-contrat.actif .fx-suspect u { animation: fx-suspect 1s 1.1s ease-in-out 2 both; }
}
@keyframes fx-suspect { 50% { box-shadow: 0 0 0 .3em rgb(254 223 137 / .9); } }

/* En-tête : un seul bouton, qui propose de créer un compte ou de se connecter. */
.compte { position: relative; flex-shrink: 0; }
.compte > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.compte > summary::-webkit-details-marker { display: none; }
.compte > summary::after { content: ""; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.compte[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.compte-choix { position: absolute; right: 0; top: calc(100% + .6rem); width: 17rem; background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: .4rem; box-shadow: 0 24px 50px -24px rgb(16 24 40 / .45); display: grid; gap: .2rem; }
.compte[open] .compte-choix { animation: compte-choix .18s ease-out both; }
@keyframes compte-choix { from { opacity: 0; transform: translateY(-4px); } }
.navigation .compte-choix a { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: 11px; color: var(--encre); text-decoration: none; white-space: normal; }
.navigation .compte-choix a:hover, .navigation .compte-choix a:focus-visible { background: var(--gris); }
.compte-choix b { font-size: .95rem; }
.compte-choix span { font-size: .82rem; color: var(--encre-3); }
.compte-choix .compte-creer b { color: var(--bleu-fonce); }
.compte-choix a + a { border-top: 1px solid var(--trait); border-radius: 0 0 11px 11px; }
@media (max-width: 920px) {
  .compte { margin-top: 1rem; }
  .compte > summary { justify-content: center; width: 100%; box-sizing: border-box; }
  .compte-choix { position: static; width: auto; margin-top: .5rem; box-shadow: none; }
  .navigation .compte-choix a { border-bottom: 0; padding: .8rem .85rem; }
}
@media (max-width: 920px) { .navigation .compte > .bouton { margin-top: 0; } }
/* Le menu de compte est un <details> : il ne prend rien du style des questions fréquentes. */
.entete .compte, .entete .compte:first-of-type { border: 0; padding: 0; }
.entete .compte > summary { font-weight: 600; justify-content: center; }
.entete .compte > summary::after { color: inherit; font-size: 0; line-height: 0; }
.entete .compte-choix a + a { border-top: 0; border-radius: 11px; }
.entete .compte-choix a + a::before { content: ""; position: absolute; left: .85rem; right: .85rem; top: -.1rem; height: 1px; background: var(--trait); }
.entete .compte-choix a { position: relative; }
.fx-s-contrat { padding: 5% 6%; grid-template-columns: 1.6fr 1fr; gap: 5%; }
.fx-contrat { gap: .32em; padding: 1em 1.1em; }
.fx-art { padding-block: .1em; }
.fx-etapes { gap: .9em; }
@container (max-width: 560px) {
  .fx-s-contrat { padding: 4% 5%; }
  .fx-s-contrat .fx-facultatif, .fx-etapes span { display: none; }
  .fx-contrat > b { font-size: .88em; }
}
@container (max-width: 470px) {
  .fx-s-contrat { grid-template-columns: 1fr; align-content: center; gap: .9em; }
  .fx-etapes { display: flex; justify-content: center; gap: 1.6em; }
  .fx-etapes::before { display: none; }
  .fx-etapes li { padding-left: 1.9em; }
}

/* Accueil · Métiers : chaque carte joue en boucle une scène de son métier.
   L'état sans animation est l'état final : tout est visible. */
.metiers a.metier { grid-template-rows: auto auto 1fr auto; padding: .7rem .7rem 1.5rem; }
.metier > h3, .metier > p, .metier > .voir { margin-inline: .9rem; }
.metier > h3 { margin-top: .6rem; }
.mv { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #f6f8fb; border: 1px solid var(--trait); container-type: inline-size; font-size: clamp(9px, 3.6cqw, 13px); color: var(--encre); }
.mv > img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mv-archi > img { object-fit: contain; padding: 4% 3%; box-sizing: border-box; background: #fff; }
.mv-interieur > img { object-fit: cover; }
.metier:hover .mv > img { transform: scale(1.04); }
.mv-goutte { position: absolute; width: 1.9em; height: 1.9em; margin: -2.3em 0 0 -.95em; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--bleu); box-shadow: 0 .4em 1em -.3em rgb(47 111 214 / .8); font-size: .9em; }
.mv-goutte::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); color: #fff; font-weight: 700; font-size: .85em; }
.mv-bulle { position: absolute; margin: -5.4em 0 0 1.3em; white-space: nowrap; background: #fff; border-radius: .8em .8em .8em .2em; padding: .45em .7em; font-size: .85em; box-shadow: 0 .8em 2em -.8em rgb(16 24 40 / .45); }
.mv-bulle b { display: block; font-size: .8em; color: var(--bleu-fonce); }
.mv-statut { position: absolute; right: 4%; top: 6%; font-size: .78em; font-weight: 600; color: #b54708; background: #fffaeb; border: 1px solid #fedf89; padding: .3em .7em; border-radius: 99px; }
.mv-produit { position: absolute; right: 4%; bottom: 6%; width: 52%; background: #fff; border-radius: .7em; padding: .6em .75em; display: grid; gap: .15em; box-shadow: 0 1em 2em -1em rgb(16 24 40 / .5); }
.mv-produit b { font-size: .9em; }
.mv-produit span { font-size: .72em; color: var(--encre-3); }
.mv-produit i { font-style: normal; justify-self: start; margin-top: .3em; font-size: .7em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .25em .6em; border-radius: 99px; }
.mv-chantier { display: grid; grid-template-columns: .8fr 1.3fr; gap: 5%; padding: 6% 6%; align-items: center; background: linear-gradient(180deg, #f6f9fd, #e9f0f9); }
.mv-tel { aspect-ratio: 9 / 15; background: var(--encre); border-radius: 1.1em; padding: .8em .6em; display: grid; grid-template-rows: auto 1fr; gap: .5em; }
.mv-rec { font-size: .66em; color: #e6e9ee; display: flex; align-items: center; gap: .4em; }
.mv-rec::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #f04438; }
.mv-onde { display: flex; align-items: center; justify-content: center; gap: 6%; }
.mv-onde i { width: 6%; height: 40%; background: #8fb3ec; border-radius: 99px; }
.mv-onde i:nth-child(3n) { height: 65%; } .mv-onde i:nth-child(4n+1) { height: 28%; } .mv-onde i:nth-child(5n+2) { height: 52%; }
.mv-cr { background: #fff; border-radius: .6em; padding: .8em .9em; display: grid; gap: .45em; box-shadow: 0 1.2em 2.4em -1.4em rgb(16 24 40 / .5); }
.mv-cr > b { font-size: .85em; border-bottom: 2px solid var(--encre); padding-bottom: .35em; }
.mv-l { font-size: .7em; color: var(--encre-2); display: flex; gap: .5em; }
.mv-l u { text-decoration: none; font-weight: 700; color: var(--bleu-fonce); white-space: nowrap; }
.mv-envoi { font-style: normal; justify-self: start; font-size: .68em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .25em .6em; border-radius: 99px; }

@media (prefers-reduced-motion: no-preference) {
  html.js .metier.vu .mv-archi .mv-goutte { animation: mv-goutte 8s .4s cubic-bezier(.3,1.5,.5,1) infinite both; }
  html.js .metier.vu .mv-archi .mv-bulle { animation: mv-bulle 8s .4s ease infinite both; }
  html.js .metier.vu .mv-archi .mv-statut { animation: mv-statut 8s .4s ease infinite both; }
  html.js .metier.vu .mv-interieur .mv-goutte { animation: mv-goutte 8s calc(.6s + var(--n) * .35s) cubic-bezier(.3,1.5,.5,1) infinite both; }
  html.js .metier.vu .mv-interieur .mv-produit { animation: mv-carte 8s .6s ease infinite both; }
  html.js .metier.vu .mv-interieur .mv-produit i { animation: mv-statut 8s .6s ease infinite both; }
  html.js .metier.vu .mv-onde i { animation: mv-onde .9s ease-in-out infinite alternate; }
  html.js .metier.vu .mv-onde i:nth-child(2n) { animation-delay: -.45s; } html.js .metier.vu .mv-onde i:nth-child(3n) { animation-delay: -.2s; animation-duration: .7s; }
  html.js .metier.vu .mv-l { animation: mv-ligne 8s calc(.8s + var(--n) * .6s) ease infinite both; }
  html.js .metier.vu .mv-envoi { animation: mv-statut 8s .9s ease infinite both; }
  html.js .metier.vu .mv-rec::before { animation: mv-rec 1s steps(2) infinite; }
}
@keyframes mv-goutte { 0%, 4% { opacity: 0; transform: translateY(-2em) rotate(-45deg) scale(.6); } 12%, 90% { opacity: 1; transform: rotate(-45deg); } 97%, 100% { opacity: 0; transform: rotate(-45deg); } }
@keyframes mv-bulle { 0%, 18% { opacity: 0; transform: translateY(.5em) scale(.95); } 25%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mv-statut { 0%, 50% { opacity: 0; transform: translateY(.4em); } 57%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mv-carte { 0%, 30% { opacity: 0; transform: translateY(1.2em); } 38%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mv-ligne { 0%, 6% { opacity: 0; transform: translateX(-.6em); } 13%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes mv-onde { from { transform: scaleY(.35); } to { transform: scaleY(1.25); } }
@keyframes mv-rec { 50% { opacity: .25; } }

/* Pour vos clients : le téléphone du client, joué en boucle.
   L'état sans animation est l'état final. */
.mo-heros-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mo-scene { position: relative; justify-self: center; width: min(100%, 330px); padding-top: 2.4rem; container-type: inline-size; font-size: clamp(10px, 4.3cqw, 14px); }
.mo-tel { background: var(--encre); border-radius: 2.6em; padding: .7em; box-shadow: 0 50px 90px -45px rgb(16 24 40 / .6), 0 0 0 8px rgb(47 111 214 / .06); }
.mo-ecran { background: #f6f8fb; border-radius: 2em; padding: 1.4em 1.1em 1.3em; display: grid; gap: .7em; }
.mo-tete { display: grid; grid-template-columns: 1fr auto; gap: .3em .6em; align-items: baseline; }
.mo-tete b { font-size: 1.05em; }
.mo-tete span { font-size: .72em; color: var(--encre-3); }
.mo-tete i { grid-column: 1 / -1; height: .35em; border-radius: 99px; background: #e4e7ec; overflow: hidden; }
.mo-tete u { display: block; height: 100%; width: 60%; background: var(--bleu); border-radius: 99px; transform-origin: left; }
.mo-doc { position: relative; background: #fff; border-radius: .8em; border: 1px solid var(--trait); aspect-ratio: 520 / 330; overflow: hidden; }
.mo-doc img { width: 100%; height: 100%; display: block; padding: 3%; box-sizing: border-box; }
.mo-version { position: absolute; left: .6em; top: .6em; font-size: .68em; font-weight: 700; color: #fff; background: var(--encre); padding: .15em .55em; border-radius: 99px; }
.mo-titre { font-size: .95em; }
.mo-demande { font-size: .74em; color: #b54708; margin-top: -.5em; }
.mo-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.mo-boutons span { position: relative; text-align: center; font-size: .8em; font-weight: 600; padding: .65em .4em; border-radius: .7em; background: #fff; border: 1px solid var(--trait); }
.mo-boutons .mo-pris { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.mo-tap { position: absolute; left: 60%; top: 55%; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: rgb(255 255 255 / .55); opacity: 0; }
.mo-champ { background: #fff; border: 1px solid var(--bleu); border-radius: .7em; padding: .6em .7em; font-size: .8em; min-height: 1.3em; }
.mo-tape { display: inline-block; white-space: nowrap; }
.mo-envoye { justify-self: start; font-size: .7em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .35em .75em; border-radius: 99px; }
.mo-notif { position: absolute; z-index: 1; left: -6%; right: -6%; top: 0; display: flex; gap: .7em; align-items: center; background: rgb(255 255 255 / .96); border: 1px solid var(--trait); border-radius: 1.1em; padding: .7em .9em; box-shadow: 0 1.4em 2.8em -1.4em rgb(16 24 40 / .45); opacity: 0; }
.mo-notif i { font-style: normal; flex: none; width: 2.2em; height: 2.2em; border-radius: .6em; background: var(--bleu); color: #fff; font-weight: 700; display: grid; place-items: center; }
.mo-notif span { font-size: .78em; color: var(--encre-2); display: grid; }
.mo-notif b { color: var(--encre); }
@media (max-width: 860px) { .mo-heros-grille { grid-template-columns: 1fr; } .mo-scene { width: min(100%, 300px); } }
@media (prefers-reduced-motion: no-preference) {
  html.js .mo-scene.vu .mo-notif { animation: mo-notif 11s .3s ease infinite both; }
  html.js .mo-scene.vu .mo-tete u { animation: mo-barre 11s .3s cubic-bezier(.2,.7,.2,1) infinite both; }
  html.js .mo-scene.vu .mo-doc img { animation: mo-doc 11s .3s ease infinite both; }
  html.js .mo-scene.vu .mo-pris { animation: mo-pris 11s .3s ease infinite both; }
  html.js .mo-scene.vu .mo-tap { animation: mo-tap 11s .3s ease-out infinite both; }
  html.js .mo-scene.vu .mo-champ { animation: mo-champ 11s .3s ease infinite both; }
  html.js .mo-scene.vu .mo-tape { animation: mo-tape 11s .3s steps(24) infinite both; }
  html.js .mo-scene.vu .mo-envoye { animation: mo-envoye 11s .3s ease infinite both; }
}
@keyframes mo-notif { 0%, 2% { opacity: 0; transform: translateY(-1.5em); } 6%, 20% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-.8em) scale(.97); } }
@keyframes mo-barre { 0%, 18% { transform: scaleX(.15); } 30%, 100% { transform: none; } }
@keyframes mo-doc { 0%, 16% { opacity: 0; } 24%, 100% { opacity: 1; } }
@keyframes mo-pris { 0%, 37% { background: #fff; color: var(--encre); border-color: var(--trait); } 40%, 100% { background: var(--bleu); color: #fff; border-color: var(--bleu); } }
@keyframes mo-tap { 0%, 36% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; transform: scale(.6); } 44%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes mo-champ { 0%, 40% { opacity: 0; transform: translateY(-.4em); } 44%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mo-tape { 0%, 45% { clip-path: inset(0 100% 0 0); } 62%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes mo-envoye { 0%, 66% { opacity: 0; transform: translateY(.5em) scale(.9); } 70%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Pour vos clients : une petite scène par carte. */
.mo-carte { padding-top: .8rem; }
.mo-v { position: relative; aspect-ratio: 16 / 8; margin: 0 -.8rem 1.2rem; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f6f9fd, #e9f0f9); container-type: inline-size; font-size: clamp(9px, 2.9cqw, 13px); color: var(--encre); }
.mo-v-plans { background: #fff; border: 1px solid var(--trait); }
.mo-v-plans img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; }
.mo-ver { position: absolute; left: 3%; top: 6%; display: grid; font-size: .8em; font-weight: 700; }
.mo-ver s, .mo-ver b { grid-area: 1 / 1; text-decoration: none; color: #fff; background: var(--encre); padding: .2em .65em; border-radius: 99px; }
.mo-ver s { opacity: 0; }
.mo-note { position: absolute; margin: -4.6em 0 0 1.2em; white-space: nowrap; background: #fff; border-radius: .8em .8em .8em .2em; padding: .4em .7em; font-size: .85em; box-shadow: 0 .8em 2em -.8em rgb(16 24 40 / .45); }
.mo-v-valider { display: grid; place-items: center; }
.mo-choix { width: 72%; background: #fff; border-radius: .9em; padding: .9em 1em; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; box-shadow: 0 1.2em 2.4em -1.4em rgb(16 24 40 / .5); }
.mo-choix > b { grid-column: 1 / -1; font-size: .9em; }
.mo-opt { display: flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 600; padding: .5em .6em; border-radius: .6em; border: 1px solid var(--trait); }
.mo-opt i { width: 1.4em; height: 1.4em; border-radius: .35em; flex: none; }
.mo-opt .chene { background: repeating-linear-gradient(100deg, #c49a66 0 .25em, #b5895a .25em .35em); }
.mo-opt .beton { background: radial-gradient(circle at 30% 30%, #d6d3cf, #b8b4ae); }
.mo-opt-pris { border-color: var(--bleu); box-shadow: 0 0 0 2px rgb(47 111 214 / .25); }
.mo-reserve { grid-column: 1 / -1; font-size: .72em; font-weight: 600; color: #b54708; background: #fffaeb; padding: .4em .7em; border-radius: .5em; }
.mo-v-visio { background: #141a22; display: grid; grid-template-columns: 1fr 1fr; gap: 3%; padding: 4%; }
.mo-tuile { position: relative; border-radius: .8em; background: linear-gradient(160deg, #2a3442, #1c232d); display: grid; place-items: center; }
.mo-tuile i { font-style: normal; width: 2.8em; height: 2.8em; border-radius: 50%; display: grid; place-items: center; background: #3a4656; color: #fff; font-weight: 700; font-size: .9em; }
.mo-parle i { box-shadow: 0 0 0 .3em rgb(47 111 214 / .55); }
.mo-tuile em { position: absolute; left: .6em; bottom: .5em; font-style: normal; font-size: .7em; color: #e6e9ee; }
.mo-cr { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); white-space: nowrap; font-size: .75em; font-weight: 600; color: #067647; background: #ecfdf3; padding: .35em .8em; border-radius: 99px; }
.mo-v-suivi { display: grid; align-content: center; gap: .45em; padding: 4% 7%; }
.mo-ligne { display: flex; justify-content: space-between; gap: 1em; background: #fff; border-radius: .6em; padding: .5em .8em; font-size: .78em; box-shadow: 0 .8em 1.6em -1.2em rgb(16 24 40 / .4); }
.mo-ligne u { text-decoration: none; font-weight: 600; color: #067647; }
.mo-ligne u.bleu { color: var(--bleu-fonce); }
.mo-etapes::after { content: ""; position: absolute; left: 1.05rem; top: 2.2rem; bottom: 1.6rem; width: 2px; margin-left: -1px; background: var(--bleu); opacity: .35; transform-origin: top; }
.mo-etapes { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  html.js .mo-carte.vu .mo-ver s { animation: mo-ver-a 7s .5s ease infinite both; }
  html.js .mo-carte.vu .mo-ver b { animation: mo-ver-b 7s .5s ease infinite both; }
  html.js .mo-carte.vu .mv-goutte { animation: mv-goutte 7s .5s cubic-bezier(.3,1.5,.5,1) infinite both; }
  html.js .mo-carte.vu .mo-note { animation: mv-statut 7s .5s ease infinite both; }
  html.js .mo-carte.vu .mo-opt-pris { animation: mo-opt 7s .5s ease infinite both; }
  html.js .mo-carte.vu .mo-reserve { animation: mv-statut 7s .9s ease infinite both; }
  html.js .mo-carte.vu .mo-parle i { animation: fx-voix 1.2s ease-in-out infinite alternate; }
  html.js .mo-carte.vu .mo-cr { animation: mo-cr 7s .5s ease infinite both; }
  html.js .mo-carte.vu .mo-ligne { animation: mv-ligne 7s calc(.4s + var(--n) * .45s) ease infinite both; }
  html.js .mo-etapes::after { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .3s; }
  html.js .mo-etapes.vu::after { transform: none; }
  html.js .mo-etapes > li { opacity: 0; transform: translateY(.6rem); transition: opacity .5s ease, transform .5s ease; }
  html.js .mo-etapes.vu > li { opacity: 1; transform: none; }
  html.js .mo-etapes.vu > li:nth-child(2) { transition-delay: .45s; }
  html.js .mo-etapes.vu > li:nth-child(3) { transition-delay: .9s; }
}
@keyframes mo-ver-a { 0%, 25% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes mo-ver-b { 0%, 25% { opacity: 0; transform: translateY(-.4em); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes mo-opt { 0%, 30% { border-color: var(--trait); box-shadow: none; } 36%, 100% { border-color: var(--bleu); box-shadow: 0 0 0 2px rgb(47 111 214 / .25); } }
@keyframes mo-cr { 0%, 50% { opacity: 0; transform: translateX(-50%) translateY(.5em); } 57%, 90% { opacity: 1; transform: translateX(-50%); } 97%, 100% { opacity: 0; transform: translateX(-50%); } }
.mo-v { aspect-ratio: auto; height: clamp(10.5rem, 6rem + 10vw, 14rem); }
.mo-scene { width: min(100%, 285px); }
.mo-heros { padding-top: clamp(2rem, 1rem + 3vw, 4rem); }
.mv-onde i { width: 5%; }
@keyframes mv-onde { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.mo-cr { bottom: auto; top: 8%; }

/* Fonctionnalités · WhatsApp, bientôt : la conversation à gauche, ce qui
   arrive dans le projet à droite. */
.fx-bientot { display: inline-block; vertical-align: middle; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #b54708; background: #fffaeb; border: 1px solid #fedf89; padding: .25rem .7rem; border-radius: 99px; margin-left: .5rem; }
.fx-module h2 .fx-bientot { transform: translateY(-.2em); }
.fx-noeud-bientot { border-style: dashed; color: var(--encre-2); }
.fx-noeud-bientot::after { content: "bientôt"; display: block; font-size: .68rem; font-weight: 600; color: #b54708; text-align: center; margin-top: -.1rem; }
.fx-hub-fils .fx-fil-bientot { stroke-dasharray: 2 2; }
.fx-hub-fils .fx-fil-bientot { stroke-dasharray: none; }
.fx-wa-photo i { background: linear-gradient(90deg, rgb(255 255 255 / .85) 1px, transparent 1px) 0 0 / 1.25em 1.25em, linear-gradient(rgb(255 255 255 / .85) 1px, transparent 1px) 0 0 / 1.25em 1.25em, linear-gradient(135deg, #7fa597, #5d8577 45%, #87ab9d); }

/* Fonctionnalités · WhatsApp, bientôt : l'architecte répond depuis ArchLink,
   sur son ordinateur ; le client reçoit sur son téléphone. État final par
   défaut : la réponse est envoyée, le champ de saisie est vide. */
.fx-s-wa { padding: 6% 5% 5%; display: grid; grid-template-columns: 1.55fr 1fr; gap: 4%; align-items: center; }
.fx-bientot-scene { position: absolute; right: 3.5%; top: 4%; margin: 0; font-size: .72em; }
.fx-wa-app { background: #fff; border-radius: .7em; overflow: hidden; display: grid; box-shadow: 0 1.6em 3em -1.8em rgb(16 24 40 / .5); border: 1px solid var(--trait); }
.fx-wa-barre { display: flex; align-items: baseline; gap: .6em; padding: .65em .9em; border-bottom: 1px solid var(--trait); background: #fbfcfd; }
.fx-wa-barre b { font-size: .85em; }
.fx-wa-barre span { font-size: .72em; color: var(--bleu-fonce); font-weight: 600; }
.fx-wa-barre em { margin-left: auto; font-style: normal; font-size: .64em; font-weight: 700; color: #067647; background: #ecfdf3; padding: .2em .6em; border-radius: 99px; }
.fx-wa-fil { display: grid; gap: .45em; padding: .8em .9em; background: #f6f8fb; min-height: 11.5em; align-content: start; }
.fx-wa-msg { max-width: 86%; font-size: .7em; line-height: 1.4; padding: .5em .7em; border-radius: .7em; display: grid; gap: .2em; }
.fx-wa-msg b { font-size: .9em; color: var(--bleu-fonce); }
.fx-wa-msg small { font-size: .85em; color: var(--encre-3); }
.fx-wa-recu { justify-self: start; background: #fff; border: 1px solid var(--trait); border-top-left-radius: .15em; }
.fx-wa-envoye { justify-self: end; background: var(--bleu); color: #fff; border-top-right-radius: .15em; }
.fx-wa-envoye small { color: rgb(255 255 255 / .8); }
.fx-wa-photo i { display: block; width: 8.5em; height: 4.2em; border-radius: .4em; }
.fx-wa-photo small { color: #067647; font-weight: 600; }
.fx-wa-saisie { position: relative; display: flex; align-items: center; gap: .6em; padding: .55em .6em .55em .9em; border-top: 1px solid var(--trait); font-size: .72em; }
.fx-wa-ph { color: var(--encre-3); }
.fx-wa-tape { position: absolute; left: .9em; right: 6.5em; white-space: nowrap; overflow: hidden; color: var(--encre); opacity: 0; }
.fx-wa-saisie u { margin-left: auto; text-decoration: none; font-weight: 700; color: #fff; background: var(--bleu); padding: .45em .9em; border-radius: .6em; }
.fx-wa-cote { display: grid; gap: .8em; justify-items: center; }
.fx-wa-tel { width: 74%; aspect-ratio: 9 / 15; box-sizing: border-box; background: linear-gradient(160deg, #2a3442, #1c232d); border: .4em solid var(--encre); border-radius: 1.3em; padding: 1.8em .4em .4em; box-shadow: 0 1.4em 2.6em -1.6em rgb(16 24 40 / .6); }
.fx-wa-notif { display: grid; gap: .15em; background: rgb(255 255 255 / .95); border-radius: .6em; padding: .45em .55em; font-size: .58em; line-height: 1.35; color: var(--encre-2); }
.fx-wa-notif b { color: var(--encre); font-size: 1.05em; }
.fx-wa-notif b::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #25a35a; margin-right: .35em; }
.fx-wa-rappel { display: grid; gap: .1em; font-size: .64em; color: #93370d; background: #fffaeb; border: 1px solid #fedf89; border-radius: .5em; padding: .45em .65em; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fx-s-wa.actif .fx-wa-tape { animation: fx-wa-tape 2.6s .9s both; }
  html.js .fx-s-wa.actif .fx-wa-ph { animation: fx-wa-ph 2.6s .9s both; }
  html.js .fx-s-wa.actif .fx-wa-saisie u { animation: fx-wa-envoi .5s 2.2s ease both; }
}
@keyframes fx-wa-tape { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 45% { opacity: 1; clip-path: inset(0 0 0 0); } 64% { opacity: 1; clip-path: inset(0 0 0 0); } 70%, 100% { opacity: 0; } }
@keyframes fx-wa-ph { 0%, 66% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes fx-wa-envoi { 50% { transform: scale(.88); background: var(--bleu-fonce); } }
@container (max-width: 470px) {
  .fx-s-wa { grid-template-columns: 1fr; padding: 4% 5%; }
  .fx-wa-cote { display: none; }
  .fx-wa-fil { min-height: 0; }
}
.fx-wa-tel { padding-top: .8em; display: grid; align-content: start; gap: .6em; }
.fx-wa-heure { text-align: center; color: #fff; font-weight: 600; font-size: 1.05em; letter-spacing: .02em; }
@container (max-width: 470px) { .fx-bientot-scene { display: none; } }