/* Horizon Planning — site vitrine. Palette pétrole & safran : principale #0F5257, accent #F2B33D, fond #F7F5EF.
   Le safran est trop clair pour du texte : il ne sert qu'en aplat, texte sombre dessus. */
:root {
  --brand-50: #eef3f3;
  --brand-100: #dde7e7;
  --brand-200: #bccfd0;
  --brand-300: #93b1b3;
  --brand-500: #3a7175;
  --brand-600: #0f5257;
  --brand-700: #0d464a;
  --brand-800: #0a393d;
  --brand-900: #082d30;
  --accent: #f2b33d;
  --accent-600: #c28f31;
  --bg: #f7f5ef;
  --surface: #fff;
  --line: #dde3de;
  --ink: #142629;
  --muted: #526a6e;
  /* Teintes pastel des illustrations */
  --t-mint: #ecf1f2;
  --t-lime: #fcf0d8;
  --t-sand: #f6eedd;
  --t-sky: #e2eaeb;
  --t-blush: #fdf4e4;
  --t-lilac: #e2e6e1;
  --display: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--brand-600); }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.02; letter-spacing: -0.045em; margin: 0 0 0.45em; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h3 { font-size: 1.55rem; letter-spacing: -0.035em; }
.hl { color: var(--brand-600); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.section { padding: 96px 0; }
.label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 58ch; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* Boutons « pilule » en relief */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 0;
  background: var(--brand-600); color: #fff; box-shadow: 0 5px 0 var(--brand-800);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--brand-800); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--brand-800); }
.btn-soft { background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--line), inset 0 0 0 1px var(--line); }
.btn-soft:hover { box-shadow: 0 3px 0 var(--line), inset 0 0 0 1px var(--line); }
.btn-soft:active { box-shadow: 0 0 0 var(--line), inset 0 0 0 1px var(--line); }

.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }
:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; }

/* En-tête */
.header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); transition: box-shadow 0.2s; }
.header.scrolled { box-shadow: 0 1px 0 var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 900; font-size: 1.3rem; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; }
.logo img { width: 34px; height: 34px; border-radius: 10px; transition: transform 0.4s var(--ease); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }
.logo b { color: var(--brand-600); }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; position: relative; }
.nav a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--brand-500); transform: scaleX(0); transition: transform 0.25s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a.btn { color: #fff; }
.nav .btn { height: 42px; padding: 0 20px; font-size: 0.92rem; }

/* Bouton d'essai de la barre : absent tant que celui du hero est à l'écran, puis
   il s'y range en grandissant depuis la droite. */
.header > .wrap > .nav .btn {
  max-width: 240px; overflow: hidden; white-space: nowrap;
  transition: max-width 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.3s,
    transform 0.45s var(--ease), margin 0.45s var(--ease), box-shadow 0.15s var(--ease);
}
.header:not(.docked) > .wrap > .nav .btn {
  max-width: 0; padding-inline: 0; margin-left: -30px; opacity: 0;
  transform: translateY(-8px) scale(0.8); pointer-events: none;
}
/* Le bouton du hero se rétracte à mesure qu'il sort de l'écran. `scale` (et
   non `transform`) pour ne pas entrer en conflit avec l'apparition au défilement. */

.menu { display: none; }
@media (max-width: 760px) {
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: 8px 16px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu .nav { position: absolute; right: 0; top: 50px; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); animation: drop 0.25s var(--ease); }
  .menu .nav a { padding: 8px 10px; }
  .menu .nav .btn { margin-top: 6px; }
  .header > .wrap > .nav { display: none; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

/* Hero */
.hero { padding: 56px 0 40px; }

/* ---- Démo : captures de l'app, onglets au-dessus ---- */

/* ---- Démo interactive de l'app (ancienne maquette) ---- */

/* Grille planning */

/* Case qui se remplit en boucle + menu de choix */

/* Tableaux (chantiers / suivi / utilisateurs) */

/* Lettre */

/* Grille des fonctionnalités */

.t-mint { background: var(--t-mint); } .t-lime { background: var(--t-lime); } .t-sand { background: var(--t-sand); }
.t-sky { background: var(--t-sky); } .t-blush { background: var(--t-blush); } .t-lilac { background: var(--t-lilac); }

.big { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -0.03em; }

 
  

/* Captures réelles du portail (entité de démonstration, données fictives). */

/* ---- Maquettes fidèles à l'app (conservées pour la démo du haut de page) ---- */
/* Grille de planning : une ligne Matin / A-midi / Dispo par salarié. */

/* Bandeau de totaux : cellules d'un tableau, comme la feuille de suivi. */

/* Sélecteur Aucun / Lecture / Écriture de la page Utilisateurs. */

/* Feuille A4 (aperçu d'impression). */

/* Modale de case (choix du type puis du chantier). */

/* Aperçu tarifs (accueil) */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .price-cards { grid-template-columns: 1fr; } }
.pcard { border-radius: 24px; padding: 28px; display: flex; flex-direction: column; transition: transform 0.3s var(--ease); }
.pcard:hover { transform: translateY(-4px); }
.pcard h3 { font-size: 1.4rem; margin-bottom: 0.2em; }
.pcard .amount { font-family: var(--display); font-weight: 900; font-size: 3rem; letter-spacing: -0.05em; line-height: 1; margin: 14px 0 4px; }
.pcard .amount small { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pcard .sub { color: var(--muted); font-size: 0.92rem; }
.pcard ul { list-style: none; padding: 0; margin: 18px 0 26px; flex: 1; }
.pcard li { padding: 5px 0 5px 26px; position: relative; }
.pcard li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 12px; height: 7px; border-left: 2.5px solid var(--brand-600); border-bottom: 2.5px solid var(--brand-600); transform: rotate(-45deg); }
.pcard li.no { color: var(--muted); }
.pcard li.no::before { border: 0; height: 2.5px; top: 14px; background: #bdc3c3; transform: none; }
.pcard .btn { align-self: flex-start; }
.pcard.featured { box-shadow: inset 0 0 0 2px var(--brand-600); position: relative; }
.pcard .badge { position: absolute; top: 22px; right: 22px; font-size: 0.75rem; font-weight: 800; background: var(--brand-600); color: #fff; border-radius: 99px; padding: 3px 10px; }
.monthly, .yearly { display: inline; }
.yearly, #annuel:checked ~ * .monthly { display: none; }
#annuel:checked ~ * .yearly { display: inline; }

/* Bascule mensuel / annuel */
.toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.billing { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin: 6px 0 40px; }
.billing label { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.92rem; transition: color 0.25s; white-space: nowrap; text-align: center; }
.billing::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--brand-600); transition: transform 0.35s var(--ease); }
#annuel:checked ~ .billing::before { transform: translateX(100%); }
#mensuel:checked ~ .billing [for='mensuel'], #annuel:checked ~ .billing [for='annuel'] { color: #fff; }
#mensuel:focus-visible ~ .billing [for='mensuel'], #annuel:focus-visible ~ .billing [for='annuel'] { outline: 3px solid var(--brand-300); }

/* Comparatif */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.compare tr:last-child td { border-bottom: 0; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font-family: var(--display); font-weight: 900; font-size: 1.1rem; letter-spacing: -0.03em; }
.compare tbody tr:not(.group):hover td { background: #f3f5f3; }
.compare .group td { background: var(--t-mint); font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-700); }
.compare .yes { color: var(--brand-600); font-weight: 900; }
.compare .no { color: #bdc3c3; }
.table-scroll { overflow-x: auto; border-radius: 24px; }

/* FAQ */
.faq { max-width: 800px; margin: 0 auto; }
.faq h2 { font-size: 1.7rem; margin: 48px 0 14px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; margin-bottom: 10px; transition: border-color 0.2s, box-shadow 0.2s; interpolate-size: allow-keywords; }
.faq details:hover { border-color: var(--brand-200); }
.faq details[open] { box-shadow: 0 10px 30px -16px rgba(8, 45, 48, 0.25); }
.faq summary { cursor: pointer; padding: 18px 22px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); font-weight: 800; font-size: 1.1rem; transition: transform 0.3s var(--ease), background 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--brand-600); color: #fff; }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq details > div { padding: 0 22px 18px; color: var(--muted); }

/* Appel à l'action */
.cta { border-radius: 32px; padding: 72px 24px; text-align: center; position: relative; overflow: hidden; }
.cta img { width: 56px; height: 56px; margin: 0 auto 20px; display: block; animation: float 5s ease-in-out infinite; }
.cta h2 { font-size: clamp(2.3rem, 6vw, 4rem); }
.cta p { color: var(--brand-800); margin: 16px 0 0; font-size: 0.9rem; }

/* Pied de page */
.footer { padding: 48px 0 56px; color: var(--muted); font-size: 0.9rem; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; }
.footer .logo { margin-bottom: 6px; }
.footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.footer nav a:hover { color: var(--brand-600); }

/* Apparition au défilement (activée par site.js) */
.anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
.anim .reveal.in { opacity: 1; transform: none; }

@keyframes float { 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .anim .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   Logo : monogramme + nom
   ====================================================================== */
.logo img { width: 30px; height: 30px; border-radius: 0; }
.logo span { white-space: nowrap; }
.logo b { color: var(--brand-600); font-weight: 900; }

/* ======================================================================
   Démo interactive : capture de l'app + zones cliquables
   ====================================================================== */

/* Le bouton de repli attire l'œil tant qu'on n'a pas touché à la démo. */

/* ======================================================================
   Bandeau d'essai (inspiré de la section tarifs d'enjoy.dev)
   ====================================================================== */
.trial {
  display: grid; grid-template-columns: 1fr 1.15fr; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); max-width: 1000px; margin: 0 auto;
}
.trial-offer { background: var(--t-lime); padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.trial-offer .big-offer {
  font-family: var(--display); font-weight: 900; letter-spacing: -0.05em; line-height: 0.92;
  font-size: clamp(3rem, 7vw, 5rem); color: var(--brand-800); margin: 0 0 18px;
}
.trial-offer p { color: var(--brand-800); margin: 0 0 26px; font-weight: 500; }
.trial-offer .btn { align-self: flex-start; }
.trial-list { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.trial-list h3 { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; margin-bottom: 22px; }
.trial-list h3 img { width: 38px; height: 38px; }
.trial-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.trial-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.trial-list li i {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); font-style: normal; font-weight: 800;
}
.trial-list li i .ico { width: 20px; height: 20px; }

@media (max-width: 760px) { .trial { grid-template-columns: 1fr; } .trial-offer, .trial-list { padding: 32px 24px; } }

/* ======================================================================
   Page Fonctionnalités : une ligne par fonction, image et texte alternés
   ====================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.chips a {
  text-decoration: none; font-weight: 700; font-size: 0.9rem; color: var(--brand-700);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 16px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.chips a:hover { background: var(--brand-600); color: #fff; box-shadow: none; }
.fgroup { padding: 72px 0 24px; scroll-margin-top: 90px; }
.fgroup > .label { text-align: center; }
.fgroup > h2 { text-align: center; margin-bottom: 40px; }
.frow { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding: 36px 0; }
.frow.flip .fmedia { order: 2; }
.fmedia {
  border-radius: 22px; padding: 22px; overflow: hidden; display: grid; place-items: center;
}
.fmedia img {
  width: 100%; height: auto; display: block; border-radius: 12px; background: #fff;
  box-shadow: 0 20px 44px -22px rgba(8, 45, 48, 0.45); border: 1px solid rgba(0, 0, 0, 0.05);
}
.fmedia.narrow img { max-width: 380px; }
.ftext h3 { font-size: 2rem; margin-bottom: 14px; }
.ftext p { color: var(--muted); font-size: 1.05rem; }
.ftext ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ftext li { padding-left: 28px; position: relative; }
.ftext li::before {
  content: ''; position: absolute; left: 3px; top: 8px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--brand-600); border-bottom: 2.5px solid var(--brand-600); transform: rotate(-45deg);
}
@media (max-width: 860px) {
  .frow { grid-template-columns: 1fr; gap: 24px; }
  .frow.flip .fmedia { order: 0; }
}

/* ======================================================================
   Tarifs : quatre formules
   ====================================================================== */

.pcard .amount .free { color: var(--brand-600); }
/* Bouton sur toute la largeur de la carte, sur une ligne. */
.price-cards .pcard .btn { align-self: stretch; white-space: nowrap; padding: 0 14px; font-size: 0.95rem; }

/* Démo : zones d'action sur chaque écran (point pulsant + infobulle). */

/* ======================================================================
   Accueil : logo qui s’ouvre, 6 fonctions, une journée (personas), tarifs.
   Scènes pilotées par site.js ; maquettes et générateur dans atelier/ (non publié).
   ====================================================================== */
/* Cadre de navigateur autour des captures */
.frame { border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -30px rgba(8, 45, 48, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.06); overflow: hidden; }
.frame > .bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f1f3f2; border-bottom: 1px solid #e4e8e7; }
.frame > .bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbd9; }
.frame img { display: block; width: 100%; height: auto; }
.kicker { display: inline-block; font-weight: 700; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 22px; }
.kicker::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.hint { position: absolute; z-index: 2; padding: 10px 16px; border-radius: 14px; background: #fff; font-size: 0.9rem; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(8, 45, 48, 0.4); white-space: nowrap; animation: bob 5s ease-in-out infinite, popin 0.8s var(--ease) backwards; }
.hint b { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hint.f1 { left: -3%; top: 16%; font: 900 1.5rem var(--display); background: var(--accent); color: var(--brand-900); animation-delay: 0s, 0.5s; }
.hint.f1 b { color: var(--brand-800); font-family: Inter, sans-serif; }
.hint.f2 { right: -2%; top: 8%; background: #fff7e6; color: #8a5a00; animation-delay: -1.5s, 0.7s; }
.hint.f3 { right: 4%; top: 52%; animation-delay: -3s, 0.9s; }

@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes popin { from { opacity: 0; transform: translateY(20px) scale(0.9); } }
.av { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--pc); color: #fff; font: 900 1.1rem var(--display); flex: none; }
.logo img.lockup { width: auto; height: 26px; border-radius: 0; }
.footer .logo img.lockup { height: 22px; }

/* ---- Symbole du logo : 6 cases + barre safran ---- */
.sym { position: relative; aspect-ratio: 1; --ca: #0f5257; --cb: #dde7e7; --cc: #3a7175; }
.sym .cell { position: absolute; width: 29.33%; height: 29.33%; will-change: transform; }
.sym .cell i, .sym .bar i { display: block; width: 100%; height: 100%; border-radius: 30%; }
.sym .ta i { background: var(--ca); } .sym .tb i { background: var(--cb); } .sym .tc i { background: var(--cc); }
.sym .bar { position: absolute; left: 0; top: 35.33%; width: 100%; height: 29.33%; transform-origin: left center; }
.sym .bar i { border-radius: 999px; background: var(--accent); }

/* Au repos, le symbole « planifie » : les cases vides se remplissent tour à tour. */
.sym.big .cell i { animation: breathe 3.2s ease-in-out infinite; }
.sym.big .cell i, .sym.big .bar i { box-shadow: 0 14px 24px -12px rgba(8, 45, 48, 0.45), 0 3px 6px -2px rgba(8, 45, 48, 0.18); }
.sym.big .cell:nth-child(2) i { animation: plan 4.8s ease-in-out infinite; }
.sym.big .cell:nth-child(5) i { animation: plan 4.8s ease-in-out infinite 2.4s; }
.sym.big .cell:nth-child(3) i, .sym.big .cell:nth-child(4) i { animation-delay: -1.6s; }
@keyframes breathe { 50% { transform: scale(0.9); } }
@keyframes plan { 0%, 30%, 100% { background: var(--cb); } 45%, 80% { background: var(--brand-500); transform: scale(0.92); } }

/* ---- Hero : le logo s'ouvre et devient l'application ---- */
.hero3 { position: relative; padding: 64px 0 40px; overflow: hidden; }
.hero3 h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 0.98; }
.hero3 .btn-row { margin-top: 26px; }
.morph { position: relative; width: min(1100px, 92vw); margin: 44px auto 0; aspect-ratio: 1600 / 1120; }
.sym.big { position: absolute; left: 50%; top: 0; width: min(260px, 44vw); translate: -50% 0; z-index: 3; }
.mframe { position: absolute; inset: 0 0 auto 0; opacity: var(--h, 0); transform: perspective(1600px) rotateX(calc(18deg - var(--h, 0) * 18deg)) scale(calc(0.6 + var(--h, 0) * 0.4)); transform-origin: 50% 10%; }
.morph .mphone { position: absolute; right: -2%; top: 30%; width: 17%; z-index: 2; opacity: clamp(0, calc((var(--h, 0) - 0.55) * 3), 1); transform: translateY(calc((1 - var(--h, 0)) * 160px)) rotate(4deg); }
.morph .hint { opacity: clamp(0, calc((var(--h, 0) - 0.8) * 5), 1); }
.morph .hint.f1 { left: -3%; top: 14%; } .morph .hint.f2 { right: 12%; top: -4%; } .morph .hint.f3 { left: 6%; top: 60%; right: auto; }

/* ---- Téléphone : tranche titane, bordure noire, boutons, barre d'état ----
   Toutes les cotes en cqw (largeur du téléphone) : il reste juste à toute taille. */
.iphone { position: relative; container-type: inline-size; }
.iphone .body { position: relative; border-radius: 17cqw; padding: 1.2cqw; background: linear-gradient(135deg, #6a7174 0%, #2b3032 18%, #1b1f21 50%, #40464a 80%, #23282a 100%); box-shadow: 0 45px 80px -34px rgba(8, 45, 48, 0.6), 0 0 0 0.3cqw rgba(255, 255, 255, 0.08) inset; }
.iphone .bezel { border-radius: 15.8cqw; padding: 2.6cqw; background: #050607; }
.iphone .screen { position: relative; border-radius: 13.2cqw; overflow: hidden; background: #fff; }
.iphone .screen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; }
.iphone .status { position: relative; height: 12.5cqw; display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 7cqw 0 10cqw; background: #fff; color: #0b0d0e; font: 600 3.9cqw/1 -apple-system, 'SF Pro Text', Inter, sans-serif; letter-spacing: 0.01em; }
.iphone .status svg { height: 3.3cqw; width: auto; display: block; }
.iphone .island { position: absolute; left: 50%; top: 2.4cqw; width: 29cqw; height: 8.6cqw; translate: -50% 0; border-radius: 99px; background: #000; }
.iphone .screen img { display: block; width: 100%; aspect-ratio: 390 / 792; object-fit: cover; object-position: top; }
.iphone .k { position: absolute; width: 1.3cqw; border-radius: 1cqw; background: linear-gradient(90deg, #202527, #50575a); z-index: -1; }
.iphone .k1 { left: -0.7cqw; top: 17%; height: 5%; } .iphone .k2 { left: -0.7cqw; top: 25%; height: 9.5%; }
.iphone .k3 { left: -0.7cqw; top: 36.5%; height: 9.5%; } .iphone .k4 { right: -0.7cqw; top: 29%; height: 14%; background: linear-gradient(270deg, #202527, #50575a); }

/* ---- Fonctions (V3) ---- */
.story3 { position: relative; transition: color 0.5s; padding-bottom: 60px; }
.story3 .bgfill { position: absolute; inset: 0; background: var(--c, var(--bg)); transition: background 0.8s var(--ease); z-index: -1; }
.story3.dark { color: #fff; } .story3.dark .hl { color: var(--accent); }
.story3.dark .sym { --ca: #93b1b3; --cb: #134146; --cc: #3a7175; }
.scene3 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
.chap3 { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.22; transition: opacity 0.5s; }
.chap3.on { opacity: 1; }
.chap3 .n { font: 900 4.6rem/1 var(--display); letter-spacing: -0.05em; color: var(--accent); margin-bottom: 8px; }
.chap3 .n small { font-size: 0.35em; opacity: 0.5; margin-left: 4px; }
.chap3 h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.stick { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; gap: 18px; padding-top: 60px; }
.progress { display: flex; align-items: center; gap: 14px; font-weight: 700; }
.progress .count b { font: 900 1.4rem var(--display); }
.sym.mini { width: 54px; }
.sym.mini .cell i { background: transparent !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); transition: background 0.4s, transform 0.4s var(--ease); transform: scale(0.8); }
.sym.mini .cell.lit i { transform: none; box-shadow: none; }
.sym.mini .cell.lit.ta i { background: var(--ca) !important; } .sym.mini .cell.lit.tb i { background: var(--cb) !important; } .sym.mini .cell.lit.tc i { background: var(--cc) !important; }
.sym.mini .bar i { background: color-mix(in srgb, var(--accent) 22%, transparent); position: relative; overflow: hidden; }
.sym.mini .bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--fill, 0) * 100%); background: var(--accent); border-radius: inherit; }
.story3 .device { position: relative; transform: perspective(1400px) rotateY(-5deg); margin-right: 40px; }
.screens { position: relative; aspect-ratio: 1600 / 1000; }
.screens img { position: absolute; inset: 0; width: 100%; opacity: 0; transform: scale(1.04); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); }
.screens img.on { opacity: 1; transform: none; }
.phones { position: absolute; right: -40px; bottom: -80px; width: 23%; aspect-ratio: 390 / 880; }
.phones .iphone { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(50px) rotate(6deg); transition: opacity 0.5s var(--ease), transform 0.8s var(--ease); }
.phones .iphone.on { opacity: 1; transform: rotate(-3deg); transition-delay: 0.15s; }
/* Parallaxe : le téléphone dérive et pivote un peu au fil du chapitre (--local, site.js). */
.phones .iphone.on { translate: 0 calc((0.5 - var(--local, 0.5)) * 70px); rotate: calc((var(--local, 0.5) - 0.5) * 5deg); }
/* Les grands numéros défilent un peu moins vite que le texte (navigateurs récents). */
@supports (animation-timeline: view()) {
  .chap3 .n { animation: numdrift linear both; animation-timeline: view(); }
  @keyframes numdrift { from { translate: 0 60px; } to { translate: 0 -60px; } }
}

.more { display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: center; padding-top: 80px; }
.more-sub { color: var(--muted); margin: 14px 0 26px; max-width: 34ch; }
.sym.done .cell i, .sym.done .bar i { transform: scale(0); }
.sym.done.go .cell i, .sym.done.go .bar i { animation: cellpop 0.5s var(--ease) forwards; }
.sym.done.go .cell:nth-child(2) i { animation-delay: 0.08s; } .sym.done.go .cell:nth-child(3) i { animation-delay: 0.16s; }
.sym.done.go .cell:nth-child(4) i { animation-delay: 0.24s; } .sym.done.go .cell:nth-child(5) i { animation-delay: 0.32s; }
.sym.done.go .cell:nth-child(6) i { animation-delay: 0.4s; } .sym.done.go .bar i { animation-delay: 0.55s; transform-origin: left; }
@keyframes cellpop { from { transform: scale(0); } 70% { transform: scale(1.12); } to { transform: none; } }

/* « Et le reste » : le logo au centre, les petites fonctions branchées autour. */
.hub { position: relative; aspect-ratio: 5 / 4; }
.hub::before { content: ''; position: absolute; inset: 12% 18%; border-radius: 50%; background: var(--brand-100); opacity: 0.6; }
.hub .wires { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--brand-300); stroke-width: 0.45; stroke-dasharray: 1.6 1.8; stroke-linecap: round; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -3.4; } }
.hub .core { position: absolute; left: 50%; top: 50%; width: 27%; translate: -50% -50%; padding: 5%; border-radius: 26%; background: var(--surface); box-shadow: 0 30px 50px -24px rgba(8, 45, 48, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.04); }
.hub ul { list-style: none; margin: 0; padding: 0; }
.hub .node { position: absolute; width: 0; height: 0; display: flex; flex-direction: column; align-items: center; }
.hub .node i { flex: none; display: grid; place-items: center; width: 60px; height: 60px; margin-top: -30px; border-radius: 18px; background: var(--tb); color: var(--brand-600); box-shadow: 0 14px 24px -12px rgba(8, 45, 48, 0.45), 0 3px 6px -2px rgba(8, 45, 48, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04); animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--k) * -0.7s); }
.hub .node svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub .node b { flex: none; width: 12ch; margin-top: 8px; text-align: center; font-size: 0.8rem; line-height: 1.25; color: var(--ink); }
.hub .t-lime { --tb: var(--t-lime); } .hub .t-sky { --tb: var(--t-sky); } .hub .t-sand { --tb: var(--t-sand); } .hub .t-mint { --tb: #fff; }
/* Les pastilles éclosent après le logo. */
.hub .node { opacity: 0; scale: 0.6; transition: opacity 0.5s var(--ease), scale 0.5s var(--ease); transition-delay: calc(0.6s + var(--k) * 0.07s); }
.hub:has(.go) .node { opacity: 1; scale: 1; }

/* ---- Personas : commun ---- */
.pz { position: relative; }
.phead { position: relative; }
.phead h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 0.3em; }
.who { display: flex; align-items: center; gap: 12px; font-weight: 800; margin: 0 0 14px; }
.pz blockquote { margin: 0; font: 900 clamp(1.5rem, 3vw, 2.4rem)/1.12 var(--display); letter-spacing: -0.03em; color: var(--pc); }
 
.pdesc { color: var(--muted); margin: 14px 0; max-width: 52ch; }
.plinks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.plinks a { font-weight: 800; color: var(--pc); }
.pp-media .frame img { display: block; width: 100%; }

/* ---- Mobile ---- */
@media (max-width: 900px) {
  /* Scène plein écran : le téléphone est ancré en bas, seule sa moitié haute
     dépasse ; les étapes sont en haut à gauche. Le texte de chaque fonction monte
     de derrière la capture, se cale juste au-dessus (sticky), puis s'en va. */
  .scene3 { grid-template-columns: 1fr; gap: 0; }
  .scene3 > .col, .scene3 > .stick { grid-area: 1 / 1; }
  .stick { top: 0; height: 100vh; align-self: start; display: block; padding: 0; margin: 0 -16px; overflow: hidden; z-index: 2; pointer-events: none; }
  .stick .progress { position: absolute; left: 16px; top: 90px; gap: 8px; font-size: 0.8rem; }
  .progress .count b { font-size: 1.1rem; }
  .sym.mini { width: 34px; }
  .stick .device { position: absolute; left: 50%; bottom: 0; width: min(64vw, 300px); margin: 0; transform: none; translate: -50% 50%; }
  .stick .frame { display: none; }
  .phones { position: relative; right: auto; bottom: auto; width: 100%; }
  .scene3 > .col { padding-top: 140px; }
  .chap3 { min-height: 100vh; display: block; }
  .chap3 .txt { position: sticky; top: 140px; }
  .chap3 .n { font-size: 2.6rem; }
  .chap3 h2 { font-size: 1.6rem; }
  .chap3 p { font-size: 0.98rem; }
  .chap3 ul { display: none; }
  /* « Et le reste » : petit logo à côté du titre, pastilles compactes à plusieurs par ligne. */
  .more { display: block; padding-top: 32px; }
  .more h2 { font-size: 1.7rem; }
  .more-sub { margin: 10px 0 0; }
  .more .btn { margin-top: 18px; }
  .hub { aspect-ratio: 1; margin: 12px -8px 0; }
  .hub .node i { width: 44px; height: 44px; margin-top: -22px; border-radius: 13px; }
  .hub .node svg { width: 20px; height: 20px; }
  .hub .node b { width: 10ch; margin-top: 5px; font-size: 0.68rem; }
  /* Le texte à venir part presque transparent et s'affirme quand il devient actif. */
  .chap3 { opacity: 0.06; transition: opacity 0.6s var(--ease); }
  .chap3.on { opacity: 1; }
  /* Fin de section : le dernier texte se libère avant la scène, il est poussé
     vers le haut avec elle au lieu de passer sous le téléphone. */
  .scene3 > .col { padding-bottom: calc(100vh - 320px); }
  .morph .mphone { width: 26%; right: -4%; }
  .morph .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sym.big .cell i, .sym.big .bar i { animation: none; }
  .sym.done .cell i, .sym.done .bar i { transform: none; animation: none !important; }
  .hub .wires, .hub .node i { animation: none; }
  .hub .node { opacity: 1; scale: 1; }
}
/* Personas : une journée */
.p2 .pstick { position: sticky; top: 0; height: 100vh; overflow: hidden; padding-top: 96px; transition: color 0.6s; }
.p2 .night { color: #fff; } .p2 .night .phead .hl { color: var(--accent); }
.p2 .sky { position: absolute; inset: 0; background: linear-gradient(var(--sky1), var(--sky2) 70%); }
.p2 .horizon { position: absolute; left: 0; right: 0; top: 78%; height: 6px; background: var(--accent); box-shadow: 0 0 40px 6px color-mix(in srgb, var(--accent) 50%, transparent); }
.p2 .horizon::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 30vh; background: color-mix(in srgb, var(--sky2) 60%, var(--brand-900)); }
.p2 .sun { position: absolute; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle, #ffe3a3 0%, var(--accent) 60%); box-shadow: 0 0 80px 20px color-mix(in srgb, var(--accent) 45%, transparent); left: var(--sx); top: var(--sy); translate: -50% -50%; }
.p2 .phead, .p2 .clock, .p2 .moments { position: relative; }
.clock { position: absolute !important; right: max(24px, calc(50vw - 570px)); top: 110px; margin: 0; font: 900 clamp(2.4rem, 6vw, 4.6rem)/1 var(--display); letter-spacing: -0.04em; opacity: 0.9; }
.moments { height: 56vh; margin-top: 12px; }
.moment { position: absolute; inset: 0; padding: 0 max(24px, calc(50vw - 570px)); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; opacity: 0; transform: translateY(40px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); pointer-events: none; }
.moment.on { opacity: 1; transform: none; pointer-events: auto; }
.moment .pp-text { background: color-mix(in srgb, #fff 70%, transparent); backdrop-filter: blur(12px); padding: 26px; border-radius: 24px; color: var(--ink); }
.moment .iphone { width: min(230px, 55%); margin: 0 auto; }
@media (max-width: 860px) {
      .moment { grid-template-columns: 1fr; gap: 14px; align-content: start; }
      .moments { height: 64vh; }
      .moment .iphone { width: 38%; }
      .clock { top: 96px; }
}
/* ---- Tarifs dans la page ---- */
.pricing { background: linear-gradient(var(--bg), var(--brand-50)); }
.pricing h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.pricing .lead { margin-bottom: 24px; }

/* Téléphone dans les lignes de la page Fonctionnalités : pas de cadre d'image en plus. */
.fmedia .iphone { width: min(260px, 72%); }
.fmedia .iphone img { border: 0; border-radius: 0; box-shadow: none; }

/* Une journée, sur téléphone : texte plus compact pour que l'écran tienne. */
@media (max-width: 860px) {
  .moments { height: calc(100vh - 280px); }
  .moment .pp-text { padding: 18px; }
  .moment blockquote { font-size: 1.25rem; }
  .moment .pdesc { font-size: 0.9rem; margin: 8px 0; }
  .moment .iphone { width: 24%; }
  .moment .pp-media .frame { width: 72%; margin: 0 auto; }
}

/* « Grande équipe » : bandeau large sous les trois formules. */
.pcard.wide { margin-top: 20px; display: grid; grid-template-columns: minmax(170px, 0.8fr) auto minmax(0, 2.4fr) auto; gap: 12px 40px; align-items: center; }
.pcard.wide:hover { transform: none; }
.pcard.wide .amount { margin: 0; font-size: 2.4rem; }
.pcard.wide ul { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.pcard.wide li { white-space: nowrap; }
.pcard.wide .btn { align-self: center; }
@media (max-width: 960px) { .pcard.wide { grid-template-columns: 1fr; } .pcard.wide .btn { align-self: stretch; } }

/* Tarifs sur téléphone : formules en carrousel (on glisse d'une carte à l'autre,
   la suivante dépasse), cartes compactes, bandeau « Grande équipe » réduit. */
.price-dots { display: none; }
@media (max-width: 760px) {
  .price-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 6px 16px 10px; scrollbar-width: none; }
  .price-cards::-webkit-scrollbar { display: none; }
  .price-cards .pcard { flex: 0 0 84%; scroll-snap-align: center; padding: 22px; }
  .price-cards .pcard:hover { transform: none; }
  .pcard .amount { font-size: 2.4rem; margin: 10px 0 2px; }
  .pcard ul { margin: 12px 0 18px; }
  .pcard li { padding: 3px 0 3px 26px; font-size: 0.95rem; }
  .pcard li::before { top: 9px; }
  .pcard li.no { display: none; }
  .pcard .badge { top: 18px; right: 18px; }
  .price-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
  .price-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--brand-200); transition: width 0.3s var(--ease), background 0.3s; cursor: pointer; }
  .price-dots button[aria-current='true'] { width: 24px; background: var(--brand-600); }
  .pcard.wide { padding: 20px 22px; gap: 6px 16px; grid-template-columns: 1fr auto; }
  .pcard.wide .amount { font-size: 1.6rem; text-align: right; }
  .pcard.wide ul { display: none; }
  .pcard.wide .btn { grid-column: 1 / -1; margin-top: 8px; }
  .billing { display: grid; width: 100%; }
  .billing label { padding: 9px 8px; font-size: 0.82rem; }
}

/* Fonction annoncée, pas encore livrée (ex. drive chantier). */
.soon { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--accent); color: var(--brand-900); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; vertical-align: 2px; }