/* ============================================================
   IA Dimension — components.css
   Header, footer, nav mobile, boutons, cartes, champs, badges, chips.
   Tout utilise les variables semantiques -> bascule papier/systeme
   automatiquement quand un ancetre porte .sys. Depend de tokens + base.
   ============================================================ */

/* ---------- HEADER ---------- */
/* Pas de backdrop-filter ni de transform ici : ca creerait un bloc conteneur
   qui ancrerait le menu mobile (position:fixed) au header au lieu du viewport. */
/* Navbar « Opacity » : transparente, sans ligne — elle se fond dans la page.
   Pas de backdrop-filter (créerait un bloc conteneur qui ancrerait le menu
   mobile fixed au header au lieu du viewport). */
/* Fond OPAQUE, pas transparent. Deux raisons :
   1. Safari 26 ne lit plus la balise theme-color : il échantillonne le fond
      des éléments sticky/fixed proches des bords du viewport pour colorer sa
      barre d'outils. Un en-tête transparent donne un résultat imprévisible.
   2. Sans fond, le logo se superposait au contenu en défilant. */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--cream);
}
.site-header .bar{
  max-width:var(--wrap-wide);margin:0 auto;padding:14px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;color:var(--ink)}
/* La tache floue « frosted » derrière le logo a été retirée : un halo coloré
   décoratif est un marqueur de mise en page générée, et il n'apportait rien. */
.brand .mark{width:32px;height:auto;flex-shrink:0}

.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:8px 12px;border-radius:var(--r-sm);font-size:.95rem;font-weight:500;color:var(--ink-2);transition:color .15s,background .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--cream-2)}
.nav .btn{margin-left:6px;color:var(--paper)} /* garde le texte blanc : sinon .nav a l'emporte sur .btn */

/* bouton hamburger (mobile) */
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px}

@media(max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--paper);border-left:1px solid var(--line);
    padding:84px 20px 28px;z-index:50;
    transform:translateX(100%);transition:transform .22s ease;
    box-shadow:var(--shadow-lg);
  }
  .nav[data-open="true"]{transform:none}
  .nav a{padding:13px 14px;font-size:1.02rem}
  .nav .btn{margin:8px 0 0}
  .nav-backdrop{position:fixed;inset:0;background:rgba(12,20,18,.4);opacity:0;visibility:hidden;transition:opacity .2s;z-index:45}
  .nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.nav,.nav-backdrop{transition:none}}

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--line);background:var(--cream-2);
  margin-top:clamp(40px,7vh,72px);padding:34px 0 38px;
  color:var(--muted);font-size:var(--fs-small);
}
.site-footer .cols{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--pad-x);display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 40px}
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--accent)}
.site-footer b{color:var(--ink)}
.site-footer .legal{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:600;font-size:.98rem;
  border-radius:var(--r);padding:14px 22px;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;background:var(--ink);color:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:transform .18s,box-shadow .18s,background .18s,opacity .18s;
}
.btn:hover{background:#1c1c1a;box-shadow:0 6px 18px -8px rgba(0,0,0,.4)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn svg{width:16px;height:16px}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn-ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.sys .btn{color:var(--paper)}
.sys .btn-ghost{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* CTA principal : pilule noire XL. Le halo bleu qui pulsait en boucle a été
   retiré (ombre colorée + animation décorative sans rôle = deux marqueurs de
   mise en page générée). La taille et le noir plein portent déjà l'attention.
   .btn-glow est conservée comme alias inoffensif pour les pages existantes. */
.btn-xl{padding:19px 40px;font-size:1.14rem;border-radius:var(--r-pill)}
.btn-xl svg{width:18px;height:18px}
.btn-glow{animation:none}

/* ---------- CARTES ---------- */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:clamp(22px,4vw,30px);
}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2)}
.card-flat{box-shadow:none;background:var(--cream-2);border-color:var(--line)}

/* ---------- BADGE (pastille "live") ---------- */
.badge{
  display:inline-flex;align-items:center;gap:9px;background:var(--paper);
  border:1px solid var(--line);padding:7px 15px;border-radius:var(--r-pill);
  font-size:var(--fs-small);font-weight:500;color:var(--muted);box-shadow:var(--shadow-sm);
}
.badge b{color:var(--ink);font-weight:600}
.badge .live{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.9s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(38,110,241,.5)}70%{box-shadow:0 0 0 8px rgba(38,110,241,0)}100%{box-shadow:0 0 0 0 rgba(38,110,241,0)}}
@media(prefers-reduced-motion:reduce){.badge .live{animation:none}}

/* ---------- CHIPS (services) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;font-size:.88rem;font-weight:500;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.chip svg{width:15px;height:15px;color:var(--ink);flex-shrink:0}

/* ---------- CHAMPS ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--cream);
  border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:#8a978f}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.field .err{color:#b23b3b;font-size:.82rem;min-height:0}
.sys .field input,.sys .field textarea,.sys .field select{background:var(--sys-surface)}
@media(prefers-reduced-motion:reduce){.field input,.field textarea,.field select{transition:none}}

/* honeypot anti-bot : invisible, hors flux, ignore des lecteurs d'ecran */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- OPTIONS (cases a cocher facon "puces") ---------- */
.options{display:flex;flex-wrap:wrap;gap:9px}
.option{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:9px 15px;font-size:.92rem;color:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s}
.option:hover{border-color:var(--accent)}
.option input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.option:has(input:checked){border-color:var(--accent);background:var(--accent-tint);color:var(--ink)}
.sys .option{background:var(--sys-surface)}

/* ---------- CONSENTEMENT ---------- */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);line-height:1.45}
.consent input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}
.consent a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.form-note{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.form-note svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}

@media(max-width:520px){.name-email{grid-template-columns:1fr!important}}

/* ---------- ETAT SUCCES ---------- */
.form-success{display:none;text-align:center;padding:8px 0 4px}
.form-success.show{display:block}
.form-success .check{width:56px;height:56px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px}
.form-success .check svg{width:28px;height:28px}
.form-success:focus{outline:none}

/* ---------- SECTION (rythme vertical) ---------- */
.section{padding:clamp(48px,9vh,104px) 0}
.section-tight{padding:clamp(32px,6vh,64px) 0}

/* ============================================================
   HERO « Opacity / Faces » — type-forward, monochrome noir.
   Titre géant Open Runde, sous-titre Inter, CTA pilule noire.
   Micro-accent teal : le point final du titre.
   ============================================================ */
/* Hero plein écran (réf. faces.app) : au 1er chargement, seul le hero est
   visible sur n'importe quel écran — le reste commence sous la ligne de
   flottaison. 100svh = hauteur « petite » (barre d'URL mobile prise en compte). */
/* Aligné à GAUCHE : un hero centré dans une sans générique est le marqueur de
   mise en page générée le plus courant. L'asymétrie lit « décidé ». */
.hero-lp{position:relative;text-align:left;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(40px,8vh,80px);padding-bottom:clamp(40px,8vh,80px)}
/* halo monochrome très doux derrière le titre (profondeur, aucune couleur) */
.hero-lp::before{content:"";position:absolute;left:32%;top:40%;transform:translate(-50%,-50%);
  width:min(820px,94vw);height:min(560px,70vw);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.055), rgba(0,0,0,0) 72%)}
.hero-lp .wrap{position:relative;z-index:1;max-width:var(--wrap-wide)}
.hero-title{font-family:var(--display);font-weight:700;font-size:var(--fs-display);
  letter-spacing:-.045em;line-height:1.02;color:var(--ink);max-width:17ch;margin:0;
  text-wrap:balance}
.hero-title .accent-dot{color:var(--accent)} /* micro-accent : le point final */
.hero-sub{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;
  max-width:52ch;margin:clamp(18px,3vh,26px) 0 0;text-wrap:balance}
.hero-cta{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;
  margin-top:clamp(26px,4vh,34px)}
.hero-lp .chips{justify-content:flex-start;margin-top:clamp(22px,3.5vh,30px)}

/* 7.4 La machine — diagramme SVG (aria-hidden ; texte équivalent dans la <ol>) */
.flow-visual{margin:8px auto 0;max-width:820px}
.flow-visual svg{width:100%;height:auto;display:block;overflow:visible}
.flow-path{fill:none;stroke:var(--sys-line);stroke-width:2}
.flow-path.on{stroke:var(--sys-accent)}
.flow-node{fill:var(--sys-surface);stroke:var(--sys-accent);stroke-width:1.5}
.flow-dot{fill:var(--sys-glow)}
.flow-label{fill:var(--sys-muted);font-family:var(--mono);font-size:11px;font-feature-settings:"liga" 0}

/* ============================================================
   NARRATION « Opacity » (accueil) — grandes déclarations plein écran,
   fenêtres « vieux monde » stylisées (pur CSS, monochrome), indice de scroll.
   Une idée par écran, beaucoup d'air. Markup statique = fallback sans JS.
   ============================================================ */

/* ---- Déclaration : un bloc de texte qui occupe presque tout l'écran ---- */
.statement{
  min-height:min(76vh,760px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
}
.statement > .wrap,.statement > .wrap-wide{width:100%}
.statement h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:1.03;
  font-size:var(--fs-display);max-width:18ch;margin:0 auto;text-wrap:balance;color:var(--ink);
}
.statement p{color:var(--muted);font-size:var(--fs-lead);max-width:46ch;
  margin:clamp(16px,3vh,24px) auto 0;text-wrap:balance}
.statement .accent-dot{color:var(--accent)}

/* ---- Scènes « longues » façon Opacity ----------------------------------
   Le contenu reste collé au centre (position:sticky, robuste iOS) pendant
   qu'on scrolle la hauteur du conteneur -> il faut scroller plusieurs fois
   pour passer la scène, le temps de lire/regarder. Activé seulement quand JS
   anime (classe .anim posée par era.js, jamais sous reduced-motion) ; sinon
   la section reste courte et normale (fallback sans JS). --- */
.scene-sticky{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:100vh}
.anim .scene-tall{min-height:var(--scene-h,220vh)}
.anim .scene-sticky{position:sticky;top:0}

/* ---- Triple punch : lignes révélées en séquence ---- */
.punch{display:grid;gap:clamp(10px,2vh,20px);justify-items:center}
.punch-line{font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(1.9rem,5.2vw,3.6rem);color:var(--ink);max-width:26ch;text-wrap:balance;margin:0}
.punch-line.dim{color:var(--muted)}

/* ---- Le « vieux monde » : fenêtres flottantes éparpillées ---- */
.era-scatter{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(28px,5vw,64px);max-width:var(--wrap-wide);
  margin:clamp(36px,7vh,72px) auto 0;padding:0 var(--pad-x);
}
.era-item{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.era-cap{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
@media(min-width:768px){
  .era-item:nth-child(1){margin-top:8px}
  .era-item:nth-child(2){margin-top:64px}
  .era-item:nth-child(3){margin-top:26px}
}

.era-window{
  width:min(340px,82vw);background:var(--paper);border:1px solid var(--line-2);
  border-radius:10px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.era-window .titlebar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;
  background:var(--cream-2);border-bottom:1px solid var(--line);
}
.era-window .titlebar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);flex:0 0 auto}
.era-window .titlebar b{margin-left:8px;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--muted)}

/* Chiffrier (type tableur) — grille + cellule sélectionnée (micro-accent teal) */
.mock-grid{position:relative;height:184px;
  background:
    repeating-linear-gradient(to right, transparent 0 55px, var(--line) 55px 56px),
    repeating-linear-gradient(to bottom, transparent 0 28px, var(--line) 28px 29px),
    var(--paper);
}
.mock-grid::before{content:"";position:absolute;inset:0 0 auto 0;height:29px;
  background:var(--cream-2);border-bottom:1px solid var(--line-2)}
.mock-grid .bar{position:absolute;height:8px;border-radius:2px;background:var(--line-2)}
.mock-grid .sel{position:absolute;width:54px;height:27px;border:2px solid var(--accent);
  border-radius:2px;background:var(--accent-tint)}

/* Feuille de papier (facture manuscrite) — lignes réglées */
.mock-paper{position:relative;height:184px;padding:18px 20px 0;
  background:repeating-linear-gradient(to bottom, transparent 0 27px, var(--line) 27px 28px), var(--paper)}
.mock-paper h4{margin:0;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--ink-2)}
.mock-paper .ln{height:8px;border-radius:2px;background:var(--line-2);margin-top:19px}

/* Vieux site web (années 90) — mono, liens soulignés, bouton biseauté */
.mock-web{height:184px;padding:16px 18px;background:var(--cream);
  font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--ink-2)}
.mock-web .h{font-weight:700;color:var(--ink);font-size:13px;margin-bottom:6px}
.mock-web a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.mock-web .hr{height:1px;background:var(--line-2);margin:9px 0}
.mock-web .btn90{display:inline-block;margin-top:10px;padding:2px 10px;color:var(--ink);
  background:var(--cream-2);border:2px solid var(--line-2);border-top-color:#fff;border-left-color:#fff}

/* ---- Indice de scroll (souris) façon Opacity, coin bas-droite ---- */
.scroll-hint{position:fixed;right:22px;bottom:22px;z-index:30;pointer-events:none;opacity:.45;
  transition:opacity .4s}
.scroll-hint .mouse{position:relative;width:22px;height:34px;border:2px solid var(--ink);border-radius:12px}
.scroll-hint .wheel{position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;
  background:var(--ink);transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%,70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,9px)}}
@media(prefers-reduced-motion:reduce){.scroll-hint .wheel{animation:none}}
@media(max-width:520px){.scroll-hint{display:none}}

/* ============================================================
   PAGE « EN ACTION » — slides colorés façon Faces qui DÉMONTRENT
   l'automatisation (courriels triés, tâches cochées, fiches remplies).
   Fond global reste crème monochrome ; les couleurs pop vivent dans les
   cartes-slides seulement. Panneaux internes blancs = contraste garanti.
   ============================================================ */
.deck{display:grid;gap:clamp(20px,4vh,40px);max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--pad-x)}
.slide{position:relative;border-radius:24px;overflow:hidden;color:#fff;
  padding:clamp(24px,4vw,44px);min-height:min(76vh,600px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3vh,30px);
  box-shadow:var(--shadow-lg)}

/* Card stacking (réf. Swag/DashDigital) : chaque slide se colle, la suivante
   monte et la recouvre ; le `top` décalé laisse voir un liseré de la couleur
   d'en dessous. sticky natif = robuste iOS. Gated .anim : sans JS/mouvement,
   les slides restent en flux normal (empilées, lisibles). */
.anim .deck{gap:clamp(26px,5vh,64px)}
.anim .deck .slide{position:sticky;will-change:transform}
.anim .deck .slide:nth-child(1){top:86px}
.anim .deck .slide:nth-child(2){top:116px}
.anim .deck .slide:nth-child(3){top:146px}
.anim .deck .slide:nth-child(4){top:176px}
.slide-blue{background:var(--pop-blue)}
.slide-green{background:var(--pop-green)}
.slide-amber{background:var(--pop-amber);color:var(--ink)} /* ambre : texte encre (contraste a11y) */
.slide-purple{background:var(--pop-purple)}
.slide-red{background:var(--pop-red)}
.slide .kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.slide h2{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.5rem,3.2vw,2.3rem);max-width:18ch}
.slide .lead-slide{margin-top:8px;font-size:1.02rem;opacity:.9;max-width:40ch}

/* Panneau blanc interne : contient la démo animée */
.panel{background:var(--paper);color:var(--ink);border-radius:14px;
  padding:clamp(16px,2.4vw,24px);box-shadow:0 14px 34px -16px rgba(0,0,0,.4);max-width:560px}

/* -- Démo 1 : boîte de réception qui se trie (tags posés tout seuls) -- */
.d-inbox{display:grid}
.d-row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.d-row:last-child{border-bottom:0}
.d-ic{width:32px;height:32px;border-radius:8px;background:var(--cream-2);flex:0 0 auto}
.d-tx{flex:1;min-width:0}
.d-tx b{display:block;font-family:var(--display);font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-tx span{display:block;color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-tag{flex:0 0 auto;font-family:var(--mono);font-size:.68rem;padding:4px 10px;border-radius:100px;
  background:color-mix(in srgb,var(--pop-blue) 13%,#fff);color:var(--pop-blue);white-space:nowrap}

/* -- Démo 2 : liste de tâches qui se cochent seules -- */
.d-tasks{list-style:none;display:grid;gap:13px}
.d-tasks li{display:flex;align-items:center;gap:12px;font-size:1.02rem;color:var(--ink)}
.d-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--line-2);flex:0 0 auto;display:grid;place-items:center;transition:background .2s,border-color .2s}
.d-check svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity .2s}
.d-tasks li.done .d-check{background:var(--pop-green);border-color:var(--pop-green)}
.d-tasks li.done .d-check svg{opacity:1}
.d-tasks li.done .d-lbl{color:var(--muted);text-decoration:line-through}

/* -- Démo 3 : fiche client qui se remplit sans saisie -- */
.d-form{display:grid}
.d-frow{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.d-frow:last-of-type{border-bottom:0}
.d-lbl2{width:96px;flex:0 0 auto;color:var(--muted);font-size:.86rem}
.d-val{font-family:var(--display);font-weight:600;min-height:1.25em}
.d-val.typing::after{content:"";display:inline-block;width:2px;height:1em;background:var(--ink);
  vertical-align:-.12em;margin-left:2px;animation:caret .8s step-end infinite}
@keyframes caret{50%{opacity:0}}
.d-saved{margin-top:15px;display:inline-flex;align-items:center;gap:8px;color:var(--pop-green);font-family:var(--mono);font-size:.8rem;opacity:0;transition:opacity .3s}
.d-saved.show{opacity:1}
.d-saved svg{width:16px;height:16px}

@media(max-width:640px){.slide{min-height:auto}.d-lbl2{width:76px}}
/* Mobile : le tag de la boîte courriel passe sous le texte (sinon il déborde). */
@media(max-width:520px){
  .d-row{flex-wrap:wrap}
  .d-tag{margin-left:44px;margin-top:4px} /* 44px = largeur icône + gap : aligne sous le texte */
}

/* ============================================================
   HERO « ChronoTask » — objets d'app skeuomorphes qui flottent autour d'un
   titre centré (gros noir + 2e ligne grise). Fond pointillé subtil, CTA bleu
   plein, ombres douces. Objets = pur CSS/SVG (aucun logo de marque). Mobile :
   objets masqués (hero épuré). Accent = bleu #266EF1.
   ============================================================ */
.chrono{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:clamp(40px,8vh,90px) var(--pad-x)}
.chrono::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,.055) 1.2px,transparent 1.2px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 46%,#000 52%,transparent 100%);
  mask-image:radial-gradient(120% 92% at 50% 46%,#000 52%,transparent 100%)}
.chrono-inner{position:relative;z-index:3;max-width:820px}
.chrono h1{font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:1.0;
  font-size:clamp(2.6rem,7.4vw,5.2rem);color:var(--ink);text-wrap:balance}
.chrono h1 .dim{display:block;color:var(--muted)} /* 2e ligne grise (façon ChronoTask) */
.chrono .sub{color:var(--muted);font-size:var(--fs-lead);margin:clamp(18px,3vh,26px) auto 0;max-width:44ch}
.chrono .cta-row{margin-top:clamp(26px,4vh,34px)}

/* CTA bleu plein (façon ChronoTask) */
.btn-blue{background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 12px 26px -10px rgba(38,110,241,.6)}
.btn-blue:hover{background:var(--accent-deep);box-shadow:0 16px 32px -10px rgba(38,110,241,.7)}

/* --- Objets flottants : .float-obj = positionné (GSAP anime la parallaxe) ;
   l'enfant porte la rotation (pas de conflit de transform). --- */
.float-obj{position:absolute;z-index:1}
.float-obj.front{z-index:4}
@media(max-width:900px){.float-obj{display:none}} /* mobile : hero épuré */
.card-soft{background:#fff;border-radius:18px;
  box-shadow:0 28px 52px -22px rgba(0,0,0,.24),0 5px 14px rgba(0,0,0,.06)}

/* Post-it épinglé */
.o-note{width:212px;padding:22px 18px;background:#FCE588;border-radius:5px;text-align:left;
  font-size:.92rem;line-height:1.5;color:#4a431f;position:relative;
  box-shadow:0 28px 48px -20px rgba(0,0,0,.32),0 3px 8px rgba(0,0,0,.08)}
.o-note .pin{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:15px;height:15px;border-radius:50%;background:var(--pop-red);
  box-shadow:0 3px 6px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.4)}

/* Tuile « app » (4 points, 1 bleu) */
.o-app{width:84px;height:84px;border-radius:20px;background:#fff;display:grid;place-items:center;
  box-shadow:0 22px 40px -14px rgba(0,0,0,.28),0 4px 10px rgba(0,0,0,.08)}
.o-app .dots{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.o-app .dots i{width:15px;height:15px;border-radius:50%;background:var(--ink)}
.o-app .dots i:first-child{background:var(--accent)}

/* Icône « tâche cochée » (carré bleu, check blanc) */
.o-check{width:62px;height:62px;border-radius:16px;background:var(--accent);display:grid;place-items:center;
  box-shadow:0 18px 34px -12px rgba(38,110,241,.6),0 3px 8px rgba(0,0,0,.14)}
.o-check svg{width:30px;height:30px;color:#fff}

/* Carte « Rappels » */
.o-remind{width:232px;padding:17px 18px;text-align:left}
.o-remind .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.o-remind h4{font-family:var(--display);font-weight:600;font-size:1rem;margin:9px 0 3px}
.o-remind p{font-size:.83rem;color:var(--muted);margin:0}
.o-remind .time{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:.74rem;
  color:var(--accent);background:var(--accent-tint);padding:5px 11px;border-radius:100px}

/* Carte « Tâches du jour » */
.o-tasks{width:290px;padding:18px 19px;text-align:left}
.o-tasks h4{font-family:var(--display);font-weight:600;font-size:1rem;margin:0 0 6px}
.o-tasks .trow{margin-top:14px}
.o-tasks .thead{display:flex;align-items:center;gap:10px}
.o-tasks .num{width:22px;height:22px;border-radius:6px;color:#fff;font-size:.72rem;font-family:var(--mono);
  display:grid;place-items:center;flex:0 0 auto;background:var(--ink)}
.o-tasks .num.b{background:var(--accent)}
.o-tasks .tt{flex:1;font-size:.86rem;color:var(--ink)}
.o-tasks .pct{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.o-tasks .bar{height:6px;border-radius:4px;background:var(--cream-2);margin-top:8px;overflow:hidden}
.o-tasks .bar i{display:block;height:100%;background:var(--accent);border-radius:4px}

/* Carte « Intégrations » (tuiles génériques, aucun logo de marque) */
.o-integ{width:214px;padding:18px 19px;text-align:left}
.o-integ h4{font-family:var(--display);font-weight:600;font-size:1rem;margin:0 0 14px}
.o-integ .tiles{display:flex;gap:10px}
.o-integ .tile{width:48px;height:48px;border-radius:13px;background:var(--cream);display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.06),inset 0 0 0 1px var(--line)}
.o-integ .tile svg{width:23px;height:23px;color:var(--ink-2)}

/* ============================================================
   SERVICES — deux grandes offres (Design web, Automatisation).
   Deux cartes larges plutôt qu'une grille de trois cartes
   identiques : la grille de trois est un marqueur de mise en
   page générée, et on n'a que deux services.
   ============================================================ */
.funnel .wrap,.funnel .wrap-wide{text-align:left}
.funnel h2{max-width:20ch}

.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,24px);margin-top:32px}
@media(max-width:760px){.svc{grid-template-columns:1fr}}
.svc-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;min-height:230px;
  transition:border-color .18s ease,transform .18s ease;
}
.svc-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.svc-card h3{font-size:clamp(1.5rem,2.8vw,2rem);margin:0}
.svc-card p{font-size:1.04rem}
@media(prefers-reduced-motion:reduce){.svc-card{transition:none}}

/* ============================================================
   PANNEAUX DU DECK — le panneau blanc occupe toute la largeur de
   la carte colorée, et son contenu est dimensionné pour la
   remplir (sinon un grand vide s'ouvre entre le titre et lui).
   ============================================================ */
#demos .slide{min-height:min(66vh,560px)}
#demos .slide h2{font-size:clamp(1.7rem,3.8vw,2.7rem)}
#demos .slide .lead-slide{font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:46ch}
#demos .panel{max-width:none}

/* Maquette de site (Design web) */
.site-mock{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.site-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--cream-2);border-bottom:1px solid var(--line)}
.site-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.site-bar b{margin-left:8px;font-family:var(--mono);font-weight:500;font-size:11px;color:var(--muted)}
.site-body{padding:32px 28px 36px;display:flex;flex-direction:column;gap:17px;align-items:flex-start}
.site-body .l{height:19px;border-radius:4px;background:var(--ink);width:78%}
.site-body .l.s{height:13px;background:var(--line-2);width:58%}
.site-cta{margin-top:10px;background:var(--pop-blue);color:#fff;font-weight:600;
  font-size:1.02rem;padding:13px 26px;border-radius:var(--r-pill)}

/* Avant / après (refonte) */
.ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,2vw,16px)}
.ba-arrow{font-family:var(--display);font-weight:700;color:var(--ink);opacity:.45;font-size:1.5rem}
.ba .mini{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);height:232px}
.ba .mbar{height:20px;background:var(--cream-2);border-bottom:1px solid var(--line)}
.ba .old{font-family:var(--mono);font-size:12px;color:var(--muted)}
.ba .old .mbody{padding:14px;line-height:1.6}
.ba .old u{color:var(--ink)}
.ba .new .mbody{padding:16px;display:flex;flex-direction:column;gap:11px}
.ba .new .l{height:13px;border-radius:3px;background:var(--ink);width:70%}
.ba .new .l.s{height:9px;background:var(--line-2);width:50%}
.ba .new .b{margin-top:4px;width:66px;height:22px;border-radius:var(--r-pill);background:var(--pop-blue)}

/* Liste de tâches (automatisation) */
#demos .slide-amber .panel{padding-top:28px;padding-bottom:28px}
#demos .d-tasks{gap:30px}
#demos .d-tasks li{font-size:1.24rem}
#demos .d-check{width:32px;height:32px}
#demos .d-check svg{width:17px;height:17px}

/* Vocabulaire de rayon resserré : une seule valeur par famille. */
.era-window,.panel{border-radius:var(--r)}
.slide{border-radius:var(--r-lg)}

/* ============================================================
   MOBILE — corrections constatées sur iOS Safari
   ============================================================ */
@media(max-width:760px){

  /* 1. Cartes empilées : l'empilement est CONSERVÉ sur mobile, mais la carte
     ne remplit plus la hauteur de l'écran.
     Safari 26 ne lit plus theme-color : il échantillonne le fond des éléments
     sticky/fixed proches des bords du viewport pour colorer sa barre d'outils.
     Une carte colorée qui touchait le bas de l'écran teintait donc la barre en
     jaune, et la teinte restait. En limitant la hauteur, une bande de fond
     crème reste toujours visible sous la carte : plus rien de coloré n'atteint
     le bord, et l'effet d'empilement demeure. */
  #demos .slide{min-height:54svh}
  .anim .deck{gap:clamp(18px,3.5vh,28px)}
  .anim .deck .slide:nth-child(1){top:76px}
  .anim .deck .slide:nth-child(2){top:94px}
  .anim .deck .slide:nth-child(3){top:112px}
  .anim .deck .slide:nth-child(4){top:130px}

  /* 2. Avant / après : en trois colonnes sur un écran étroit, chaque maquette
     devenait un rectangle très haut et très mince (effet « étiré »). On passe
     en deux rangées, la flèche pivote d'un quart de tour entre les deux. */
  .ba{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:stretch}
  .ba .mini{height:auto;min-height:150px}
  .ba-arrow{transform:rotate(90deg);justify-self:center;padding:2px 0}

  /* 3. Cases à cocher : en flex-wrap, les pastilles de largeurs différentes
     formaient des rangées irrégulières (« Soumissions » et « Factures » côte à
     côte, les autres seules). Une colonne = alignement net et lecture facile. */
  .options{display:grid;grid-template-columns:1fr;gap:10px}
  .option{width:100%;justify-content:flex-start;padding:13px 16px}
}