/* ============================================================ Recept AI — refonte site (design system Rcpt AI) Valeurs de tokens reprises telles quelles du design system. Switzer auto-hébergé. Bleu #2F67FF, cartes 16px, boutons pill, ombres douces multi-couches, sparkle + waveform, grain sur sombre. ============================================================ */ /* ---- Switzer (auto-hébergé, woff2 d'abord — même famille, format ~3x plus léger) ---- */ @font-face { font-family:"Switzer"; font-weight:400; font-style:normal; font-display:swap; src:url("assets/fonts/Switzer-Regular.woff2") format("woff2"),url("assets/fonts/Switzer-Regular.ttf") format("truetype"); } @font-face { font-family:"Switzer"; font-weight:500; font-style:normal; font-display:swap; src:url("assets/fonts/Switzer-Medium.woff2") format("woff2"),url("assets/fonts/Switzer-Medium.ttf") format("truetype"); } @font-face { font-family:"Switzer"; font-weight:600; font-style:normal; font-display:swap; src:url("assets/fonts/Switzer-Semibold.woff2") format("woff2"),url("assets/fonts/Switzer-Semibold.ttf") format("truetype"); } @font-face { font-family:"Switzer"; font-weight:700; font-style:normal; font-display:swap; src:url("assets/fonts/Switzer-Bold.woff2") format("woff2"),url("assets/fonts/Switzer-Bold.ttf") format("truetype"); } /* Coupes italiques (même famille — emphase display de la refonte Lassie) */ @font-face { font-family:"Switzer"; font-weight:400; font-style:italic; font-display:swap; src:url("assets/fonts/Switzer-Italic.woff2") format("woff2"); } @font-face { font-family:"Switzer"; font-weight:500; font-style:italic; font-display:swap; src:url("assets/fonts/Switzer-MediumItalic.woff2") format("woff2"); } /* Caveat (OFL, variable 400–700, sous-ensemble latin) — réservée aux annotations manuscrites de la photo d'équipe : exception demandée par PA (26/08/2026) à la règle « Switzer seule », à ne pas étendre au reste de l'UI. */ @font-face { font-family:"Caveat"; font-weight:400 700; font-style:normal; font-display:swap; src:url("assets/fonts/Caveat-Variable-latin.woff2") format("woff2"); } :root{ /* Brand blue */ --blue-50:#EDF3FF; --blue-100:#DCE8FF; --blue-200:#9FC6FF; --blue-300:#88A8FF; --blue-400:#6C8FF5; --blue-500:#2F67FF; --blue-600:#0067FB; --blue-700:#255DD7; --blue-800:#00347E; /* Neutrals */ --ink-900:#1B1B1B; --ink-850:#1C1C1C; --ink-700:#2E2E2E; --gray-500:#888888; --gray-400:#D1D1D1; --gray-300:#D9D9D9; --gray-200:#DEDEDE; --gray-100:#F1F1F1; --gray-50:#F9F9F9; --white:#FFFFFF; --success:#1F8A5B; --success-soft:#E4F4EC; --warning:#E8A400; --danger:#E5484D; /* Rouge doux dérivé comme --success-soft : fond des messages d'erreur (.ask-answer.is-error le référençait sans qu'il soit défini). */ --danger-soft:#FCE9EA; --text-primary:#1B1B1B; --text-secondary:#4a4a4a; --text-tertiary:#888888; --surface-page:#F9F9F9; --surface-card:#FFFFFF; --surface-brand:#2F67FF; /* Fond des vignettes produit : un cran de gris sous la page, un seul hex pour les deux (PA, 14/08/2026) — les cartes s'y détachent sans cadre. */ --surface-mock:#F5F5F5; --border-subtle:#DEDEDE; --font-sans:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --radius-sm:10px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:28px; --radius-pill:120px; --shadow-sm:0 1px 2px rgba(0,0,0,.0169),0 3px 6px rgba(0,0,0,.0275); --shadow-md:0 2px 4px rgba(0,0,0,.0169),0 6px 12px rgba(0,0,0,.035),0 12px 24px rgba(0,0,0,.0425); --shadow-lg:0 4px 8px rgba(0,0,0,.02),0 12px 24px rgba(0,0,0,.0425),0 24px 48px rgba(0,0,0,.0531); --shadow-brand:0 6px 20px rgba(47,103,255,.28); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms; /* Échelle d'espacement — reprise de la spec Figma (assets/tokens/layout.css) */ --space-1:4px; --space-2:8px; --space-3:10px; --space-4:12px; --space-5:16px; --space-6:20px; --space-7:24px; --space-8:32px; --space-9:40px; --space-10:48px; --space-12:64px; --space-14:80px; --space-16:96px; --space-20:128px; --shadow-xs:0 1px 2px rgba(0,0,0,.035); --wrap:1160px; --gutter:24px; /* Refonte « Lassie » — tokens étendus, dérivés de la palette verrouillée (valeurs croisées avec la spec Figma assets/tokens/colors.css) */ --focus-ring:rgba(47,103,255,.35); --surface-dark:var(--ink-850); --surface-tint:#F5F8FF; /* blue-50 adouci vers blanc (55/45) — lavis de section */ --surface-tint-strong:var(--blue-50); --sky-gradient:linear-gradient(180deg,var(--blue-50) 0%,var(--blue-100) 55%,var(--blue-200) 145%); --radius-3xl:36px; } /* ---- Reset / base ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;font-family:var(--font-sans);font-weight:500;color:var(--text-primary); background:var(--surface-page);font-size:16px;line-height:1.3; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4,p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:6px} /* ---- Layout ---- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} /* La pilule sticky ne colle plus au bord : les ancres atterrissent dessous */ section[id]{scroll-margin-top:92px} /* Respiration entre sections relevée (PA, 26/08/2026 : « plus d'espace de fond perdu ») : 88 → 128 px (--space-20) et 56 → 80 px (--space-14), sur l'échelle de la spec */ .section{padding:128px 0} .section-sm{padding:80px 0} @media (max-width:760px){.section{padding:80px 0}.section-sm{padding:48px 0}} /* ---- Type helpers ---- */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600; letter-spacing:.10em;text-transform:uppercase;color:var(--blue-600)} .eyebrow.muted{color:var(--text-tertiary)} .display{font-weight:500;font-size:clamp(42px,5.4vw,72px);line-height:1.04;letter-spacing:-.025em} .display em{font-style:italic;font-weight:500} /* Modificateurs home only — .h2/.h3/.lead restent partagés avec /demo, on n'y touche pas */ .h2-display{font-weight:500;font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.02em} .lead-lg{font-size:clamp(17px,1.9vw,21px)} .h1{font-weight:600;font-size:clamp(30px,4.4vw,50px);line-height:1;letter-spacing:-.02em} .h2{font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.03;letter-spacing:-.015em} .h3{font-weight:600;font-size:clamp(21px,2.4vw,29px);line-height:1.08;letter-spacing:-.01em} .display,.h1,.h2,.h3{text-wrap:balance} .tnum{font-variant-numeric:tabular-nums} .lead{font-size:clamp(16px,1.7vw,19px);line-height:1.5;color:var(--text-secondary);font-weight:500} .muted{color:var(--text-tertiary)} .blue{color:var(--blue-500)} .center{text-align:center} .section-head{max-width:640px;margin:0 auto 64px;text-align:center} .section-head .lead{margin-top:16px} .section-head.left{margin-left:0;text-align:left} /* Rythme eyebrow → titre sans styles inline (l'inline gagne s'il existe encore, même valeur) */ .eyebrow + .h2,.eyebrow + h2{margin-top:12px} /* ---- Icons ---- */ .ic{width:24px;height:24px;flex:0 0 auto;fill:currentColor;display:inline-block;vertical-align:middle} .ic-sm{width:18px;height:18px}.ic-lg{width:28px;height:28px} /* ---- Buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:15px;line-height:1;border:none;border-radius:var(--radius-pill); padding:14px 22px;transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);white-space:nowrap} .btn .ic{width:18px;height:18px} .btn:active{transform:scale(.97)} .btn-primary{background:var(--blue-500);color:#fff;box-shadow:var(--shadow-brand)} .btn-primary:hover{background:var(--blue-600);box-shadow:0 8px 26px rgba(47,103,255,.36)} .btn-ink{background:var(--ink-900);color:#fff} .btn-ink:hover{background:#000} .btn-white{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-sm)} .btn-white:hover{box-shadow:var(--shadow-md)} /* Verre : transparent, flou du fond, filet blanc à 22 % (bouton secondaire du hero sur vidéo — PA, 03/09/2026). Repli opaque léger sans backdrop-filter. */ .btn-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:none; -webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.08);backdrop-filter:blur(22px) saturate(1.6) brightness(1.08)} .btn-glass:hover{background:rgba(255,255,255,.22);box-shadow:none} @supports not (backdrop-filter:blur(1px)){.btn-glass{background:rgba(255,255,255,.24)}} .btn-ghost{background:transparent;color:var(--ink-900)} .btn-ghost:hover{background:var(--gray-100)} .btn-outline{background:transparent;color:var(--ink-900);box-shadow:inset 0 0 0 1.5px var(--gray-200)} .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--ink-900)} .btn-lg{padding:16px 28px;font-size:16px} .btn-sm{padding:11px 18px;font-size:14px} .btn-block{width:100%} /* ---- Chips / badges ---- */ .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--radius-pill); font-size:13px;font-weight:600;background:var(--blue-50);color:var(--blue-700)} .chip .ic{width:15px;height:15px} .chip-soft{background:var(--gray-100);color:var(--text-secondary)} .tag-new{background:var(--blue-500);color:#fff;font-size:11px;padding:3px 9px;border-radius:var(--radius-pill);font-weight:600;letter-spacing:.02em} .tag-urgent{background:#FBE9E9;color:var(--danger)} /* ---- Cards ---- */ .card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg); box-shadow:var(--shadow-md);padding:26px} .card-hover{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} .card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)} .card-dark{background:var(--ink-850);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg)} .card-blue{background:var(--blue-500);color:#fff;border:none} /* ========================================================= PRIMITIVES REFONTE « LASSIE » — lavis, panneaux, toasts, checkrow, tuiles de collage (additif, rien de renommé) ========================================================= */ /* Toutes les sections sur le même blanc que la page (PA, 14/08/2026) : le lavis bleu ne teinte plus rien. Le token --surface-tint reste déclaré (spec DA) mais n'a plus aucun consommateur — les panneaux picturaux posent leurs dégradés à la main. */ .section-tint{background:var(--surface-page)} .panel{position:relative;border-radius:var(--radius-3xl);overflow:hidden} .panel-tint{background:linear-gradient(160deg,var(--blue-50) 0%,#F5F8FF 45%,var(--blue-100) 100%)} .panel-tint-strong{background:linear-gradient(165deg,var(--blue-100) 0%,var(--blue-50) 60%,var(--blue-200) 135%)} .panel-sky{background:var(--sky-gradient)} .toast{background:#fff;border:1px solid rgba(27,27,27,.06);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:12px 14px} .checkrow{display:flex;flex-wrap:wrap;gap:10px 26px} .checkrow .check{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:var(--text-secondary)} .checkrow .check .ic{width:18px;height:18px;color:var(--blue-500)} .checkrow .check b{color:var(--ink-900);font-weight:600} .collage-tile{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--gray-100)} .collage-tile img{width:100%;height:100%;object-fit:cover} /* ---- Feature icon tile ---- */ .itile{width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center; background:var(--blue-50);color:var(--blue-600)} .itile.dark{background:rgba(255,255,255,.10);color:#fff} .itile .ic{width:24px;height:24px} /* ---- Waveform ---- */ .wave{display:flex;align-items:center;gap:3px;height:40px} .wave span{width:3px;border-radius:3px;background:var(--blue-500);min-height:3px;transform-origin:center} .wave.on span{animation:wave 1.1s ease-in-out infinite} .wave.white span{background:#fff} @keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.25)}} @media (prefers-reduced-motion:reduce){.wave.on span{animation:none}} /* ---- Grain ---- */ .grain{position:relative} .grain::after{content:"";position:absolute;inset:0;background-image:url("assets/textures/grain.png"); background-size:340px;opacity:.06;pointer-events:none;border-radius:inherit;mix-blend-mode:overlay} /* ---- Wordmark ---- */ .wordmark{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink-900)} .wordmark svg{display:block;width:26px;height:auto;color:var(--blue-500)} .wordmark.white{color:#fff} /* Logo lockup (image officielle Recept AI) */ .logo{display:inline-flex;align-items:center} .logo-img{height:22px;width:auto;display:block} .logo-img-footer{height:24px} @media (max-width:560px){.logo-img{height:20px}} /* ========================================================= TOP BAR (annonce) ========================================================= */ .topbar{background:var(--ink-900);color:#fff;font-size:13.5px;font-weight:500} .topbar a{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 16px;text-align:center} .topbar .k{font-weight:600;letter-spacing:.06em;color:var(--blue-300);text-transform:uppercase;font-size:12px} .topbar .ic{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)} .topbar a:hover .ic{transform:translateX(3px)} @media (max-width:600px){.topbar .k{display:none}} /* ========================================================= NAV ========================================================= */ /* Pilule flottante (langage Lassie) : le shell sticky est transparent et laisse passer les clics ; seule la pilule est interactive. */ .nav{position:sticky;top:0;z-index:50;padding:10px 0;pointer-events:none} .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px} .nav-pill{pointer-events:auto;background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:var(--shadow-md); height:62px;padding:0 12px 0 22px} .nav-links{display:flex;gap:2px} .nav-links a{padding:9px 12px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:500;color:var(--text-secondary); transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .nav-links a:hover{background:var(--gray-100);color:var(--ink-900)} .nav-cta{display:flex;align-items:center;gap:8px} .nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none; padding:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent} /* Burger : trois barres grises nues (PA, 04/09/2026), qui se croisent en X quand le panneau est ouvert — transform et opacité seuls. */ .burger{position:relative;display:block;width:20px;height:14px} .burger i{position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:var(--gray-500); transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)} .burger i:nth-child(1){top:0} .burger i:nth-child(2){top:6px} .burger i:nth-child(3){top:12px} .nav-toggle[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0;transform:scaleX(.4)} .nav-toggle[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:1080px){ .nav-links,.nav-cta .btn-ghost{display:none} .nav-toggle{display:inline-flex} } @media (max-width:560px){ .nav-cta .btn-primary{display:none} .nav-in{height:62px} .nav-pill{height:56px;padding:0 8px 0 16px} } /* Menu mobile : panneau qui descend sous la pilule (PA, 04/09/2026 : « un menu toaster, pas un tiroir qui s'ouvre à droite »). La pilule reste au-dessus du voile (.nav.menu-open) et son burger devient la croix qui referme. Entrée : le panneau arrive flou et légèrement réduit, puis se pose net (240 ms) ; sortie exactement symétrique, mêmes durées et mêmes courbes, il repart dans le flou par où il est venu (PA, 04/09/2026 : « la sortie doit être la même que l'arrivée »). Le flou couvre l'instant où le panneau se superpose au décor, l'œil ne voit qu'un seul objet au lieu de deux (PA, 04/09/2026). visibility retardée pour que le panneau ne soit focusable qu'ouvert. */ .mmenu{position:fixed;top:86px;left:24px;right:auto;width:calc(100% - 48px);z-index:60;background:#fff;border-radius:var(--radius-2xl); padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);filter:blur(10px); /* Le panneau se déplie depuis le burger, pas depuis son centre. */ transform-origin:calc(100% - 20px) 0; /* --ease-out du site monte trop vite pour que le flou se lise : opacité et flou prennent une courbe un peu plus douce, la géométrie garde la sienne. */ --ease-soft:cubic-bezier(.3,.75,.35,1); /* Sortie = l'entrée jouée à l'envers : mêmes durées, et les courbes miroir des courbes d'entrée (une ease-out lue à rebours est une ease-in). Sans ce miroir, le panneau s'évaporait dans les 60 premières millisecondes et la sortie ne ressemblait pas à l'arrivée. */ --ease-soft-rev:cubic-bezier(.65,0,.7,.25); --ease-out-rev:cubic-bezier(.7,0,.84,0); transition:opacity 240ms var(--ease-soft-rev),transform 260ms var(--ease-out-rev),filter 240ms var(--ease-soft-rev),visibility 0s linear 260ms} .mmenu.open{opacity:1;visibility:visible;transform:none;filter:blur(0px); transition:opacity 240ms var(--ease-soft),transform 260ms var(--ease-out),filter 240ms var(--ease-soft),visibility 0s} .mmenu > a{padding:12px 14px;border-radius:12px;font-weight:500;font-size:16px;color:var(--ink-900)} .mmenu > a:hover{background:var(--gray-100)} /* Pied du panneau : la même paire que la pilule desktop (ghost + principal avec flèche), aux styles .btn du site — les liens du panneau ne les écrasent plus. */ .mmenu-cta{display:flex;align-items:stretch;gap:8px;margin-top:8px;padding:12px 4px 4px;border-top:1px solid var(--gray-100)} /* Même hauteur pour les deux (seul le principal porte une icône, qui l'allongeait). */ .mmenu-cta .btn{min-height:46px} /* Le ghost du menu se pose sur un fond blanc : on lui donne un gris très léger pour qu'il se lise comme un bouton, sans concurrencer le bleu (PA, 04/09/2026). */ .mmenu-cta .btn-ghost{background:var(--gray-50)} .mmenu-cta .btn-ghost:hover{background:var(--gray-100)} .mmenu-cta .btn-primary{flex:1 1 auto} /* Le voile absorbe le geste : la page est déjà figée pendant l'ouverture, on évite en plus le rebond de Safari sur le voile lui-même. */ .mscrim{touch-action:none;position:fixed;inset:0;background:rgba(27,27,27,.28);z-index:59;opacity:0;visibility:hidden; transition:opacity 200ms var(--ease-out),visibility 0s linear 200ms} .mscrim.open{opacity:1;visibility:visible;transition:opacity 200ms var(--ease-out),visibility 0s} .nav.menu-open{z-index:61} /* top/left/width ci-dessus = repli sans script ; SiteScripts les recale sur la pilule à l'ouverture. */ /* Mouvement réduit : le panneau se contente d'apparaître, sans flou, sans échelle. */ @media (prefers-reduced-motion:reduce){.mmenu,.mscrim,.burger i{transition:none}.mmenu{transform:none;filter:none}} /* ========================================================= HERO ========================================================= */ .hero{padding:60px 0 40px} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center} .hero h1{margin:18px 0 0} .hero .lead{margin-top:20px;max-width:500px} .hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap} /* Bande de preuve : une baseline pleine largeur sous la grille, hairlines entre items */ .hero-proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 0; margin-top:44px;padding-top:26px;border-top:1px solid var(--gray-100)} .hero-proof .pf{font-size:14.5px;font-weight:500;color:var(--text-secondary);padding:0 26px;border-left:1px solid var(--gray-200);white-space:nowrap} .hero-proof .pf:first-child{padding-left:0;border-left:none} .hero-proof .pf b{color:var(--blue-600);font-weight:700;font-size:18px} @media (max-width:680px){ .hero-proof{flex-direction:column;gap:10px} .hero-proof .pf{border-left:none;padding:0;white-space:normal} } /* Hero visual */ .hero-visual{position:relative} .hero-photo{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.4; background:var(--gray-100)} .hero-photo img{width:100%;height:100%;object-fit:cover} .callcard{position:absolute;left:-18px;bottom:26px;width:min(310px,80%);background:rgba(255,255,255,.72); backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:16px} .callcard .row{display:flex;align-items:center;gap:11px} .callcard .av{width:38px;height:38px;border-radius:50%;background:var(--blue-500);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .callcard .av .ic{width:18px;height:18px;color:#fff} .callcard .nm{font-weight:600;font-size:14px} .callcard .mt{font-size:12px;color:var(--text-tertiary)} .callcard .wave{margin-top:12px;height:34px} .callcard .q{margin-top:11px;font-size:12.5px;line-height:1.4;color:var(--text-secondary);min-height:35px} /* Swap d'états : hauteurs réservées pour éviter tout saut pendant la transition */ .callcard-swap{flex:1;display:block;min-height:37px} .callcard-state{display:block} .floatchip{position:absolute;right:-10px;top:26px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg); padding:11px 15px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px} .floatchip .dot{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px var(--success-soft)} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px} .hero-visual{max-width:440px;margin:0 auto} } /* --- Hero B : plein écran immersif (refonte Lassie) --- Arrivée = pleine largeur ET pleine hauteur de viewport (full-bleed, sous la pilule). Au scroll (≥721px, motion OK), SiteScripts écrit la progression --hp (0→1 sur les 440 premiers px, cf. HERO_RANGE) : le stage, épinglé par .hero-pin (sticky), morphe en carte arrondie — maquette Figma 11363:6969 — par chute sous la pilule (108px), marges latérales (~1.15vw comme la maquette 1920) et basse (26px), radius 3xl, dézoom image 1.08→1. .hero-pin mesure 100svh + 414px (= 440 de scroll consommé − 26 de marge basse) : le désépinglage tombe pile à --hp:1 et la carte repart dans le flux sans à-coup. Géométrie en propriétés de boîte réelles (top sticky, hauteur, marges) et PAS en transform : la boîte visuelle reste la boîte de layout, rien ne déborde sur la bande de preuve après désépinglage. */ /* --hp est déclarée NON héritée : sinon chaque écriture au scroll invalide le style de tous les descendants du stage (≈0,9 ms/frame mesuré). SiteScripts la pose donc directement sur les trois éléments qui la lisent (.hero-stage, .hero-bg, .hero-grain). Sans @property (vieux navigateurs), elle hérite : rendu identique, juste moins économe. */ @property --hp{syntax:'';inherits:false;initial-value:0} .hero-b{padding:0 0 34px} .hero-pin{margin-top:-82px} .hero-stage{position:relative;border-radius:0;overflow:hidden; width:100vw;margin-left:calc(50% - 50vw); display:flex;align-items:center;justify-content:center; height:100vh;height:100svh; min-height:560px;padding:120px 28px 150px; background:var(--ink-850)} .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.08);transform-origin:center;will-change:transform} /* Canvas du grain WebGL (HeroGrain.tsx) : même boîte et même dézoom que la vidéo, invisible tant que la première frame n'est pas dessinée (is-on). Aucune transition sur l'opacité : la frame est la même image que la vidéo. */ .hero-grain{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none; opacity:0;transform:scale(1.08);transform-origin:center;will-change:transform} .hero-grain.is-on{opacity:1} /* Géométrie de la carte (valeurs de la maquette 1920) posée sur .hero-pin et héritée par le stage ; le mobile la surcharge plus bas. Depuis le 04/09/2026 le morph tourne à toutes les largeurs : PA voulait le dézoom au scroll sur mobile aussi. .hero-pin = 100svh + 440 (HERO_RANGE) − marge basse. */ .hero-pin{--hero-hx:clamp(16px,1.15vw,24px);--hero-ht:108px;--hero-hb:26px} @media (prefers-reduced-motion:no-preference){ .hero-pin{height:calc(100vh + 440px - var(--hero-hb));height:calc(100svh + 440px - var(--hero-hb))} .hero-stage{position:sticky; --hx:calc(var(--hp,0) * var(--hero-hx)); --ht:calc(var(--hp,0) * var(--hero-ht)); --hb:calc(var(--hp,0) * var(--hero-hb)); top:var(--ht); width:calc(100vw - 2*var(--hx)); margin-left:calc(50% - 50vw + var(--hx)); height:calc(100vh - var(--ht) - var(--hb)); height:calc(100svh - var(--ht) - var(--hb)); border-radius:calc(var(--hp,0) * var(--radius-3xl))} .hero-bg,.hero-grain{transform:scale(calc(1.08 - .08 * var(--hp,0)))} } /* Scrim à taille CONSTANTE (viewport, centré, rogné par overflow:hidden du stage) et promu en calque : pendant le morph, une boîte inset:0 changeait de taille à chaque frame et forçait la re-rasterisation du dégradé plein écran. */ .hero-scrim{position:absolute;left:50%;top:50%;width:100vw;height:100vh;height:100svh; transform:translate(-50%,-50%);will-change:transform; background:linear-gradient(180deg,rgba(27,27,27,.50) 0%,rgba(27,27,27,.34) 32%,rgba(27,27,27,.30) 60%,rgba(27,27,27,.62) 100%)} .hero-b .hero-copy{position:relative;max-width:940px;margin:0 auto;text-align:center; will-change:transform /* calque : le texte (ombres 28px) n'est pas repeint à chaque frame du morph */} .hero-b .hero-copy .chip{background:rgba(255,255,255,.94)} /* Signature de marque au-dessus du titre (remplace la pastille) : version blanche du logo de la nav, cotée en hauteur, le ratio venant des attributs width/height de l'image (aucun décalage de mise en page au chargement). */ .hero-logo{display:block;margin:0 auto;height:29px;width:auto} @media (max-width:720px){.hero-logo{height:22px}} .hero-b h1{color:#fff;font-size:clamp(38px,4.6vw,62px); text-shadow:0 1px 2px rgba(27,27,27,.30),0 2px 28px rgba(27,27,27,.35)} .hero-b .lead{text-shadow:0 1px 2px rgba(27,27,27,.35),0 2px 22px rgba(27,27,27,.40)} .hero-b .lead{margin:20px auto 0;max-width:660px;color:rgba(255,255,255,.9)} /* Sous-titre nettement plus petit que le lead standard (PA, 03/09/2026) : 15 px, mesure courte, blanc à 78 % — le titre porte seul la voix. */ .hero-b .hero-sub{margin:18px auto 0;max-width:520px;font-size:15px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.78)} .hero-b .hero-cta{justify-content:center} .hero-b .ticker{position:relative;margin-top:28px;display:flex;justify-content:center;min-height:38px} /* Ligne d'activité nue (plus de pilule blanche — PA, 03/09/2026) : icône à gauche, texte blanc atténué ; l'ombre portée du texte assure la lecture sur les zones claires de la vidéo. */ .ticker-line{display:inline-flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;font-weight:500; color:rgba(255,255,255,.66);white-space:nowrap;text-shadow:0 1px 2px rgba(27,27,27,.35),0 2px 14px rgba(27,27,27,.3)} .ticker-line .ic{color:rgba(255,255,255,.82);flex:none} .hero-b .callcard{left:28px;bottom:28px;will-change:transform} /* Sous la pilule nav : le stage commence désormais au ras du bandeau */ .hero-b .floatchip{right:28px;top:112px} /* Bande de preuve sous le panneau : checks centrés, hairlines abandonnées */ .hero-b .hero-proof{border-top:none;padding-top:0;margin-top:32px;justify-content:center;gap:12px 36px} .hero-b .pf{border-left:none;padding:0;display:inline-flex;align-items:baseline;gap:8px} .hero-b .pf .ic{width:17px;height:17px;color:var(--blue-500);align-self:center} @media (max-width:900px){ .hero-b .floatchip{display:none} } @media (max-width:720px){ /* Mobile (PA, 04/09/2026) : même morph qu'en desktop, aux cotes de la pilule mobile (chute 82 px sous la pilule, marges 12 px / 16 px) ; contenu descendu dans la vue, titre sur deux lignes, boutons de même largeur. */ .hero-pin{margin-top:-76px;--hero-hx:12px;--hero-ht:82px;--hero-hb:16px} /* Marges latérales qui se resserrent d'autant que la carte rentre (--hero-hx) : la largeur utile du texte reste constante pendant le morph, rien ne se recasse (PA, 04/09 : « au scroll le titre passe sur trois lignes »). */ .hero-stage{min-height:0;padding:140px calc(18px - var(--hp,0) * var(--hero-hx)) 120px} /* Titre tenu sur DEUX lignes de 320 à 720 px : sa plus longue ligne mesure 337 px à 25 px, la taille suit donc la largeur (6.4vw) et le plancher à 20 px couvre le petit iPhone (320 px). Vérifié à 320/360/375/390/414/430. */ .hero-b h1{font-size:clamp(20px,6.4vw,25px);line-height:1.14} .hero-b .hero-cta{flex-direction:column;align-items:center;gap:10px;margin-top:26px} /* Deux boutons de même boîte : largeur fixe, hauteur alignée sur celui qui porte l'icône. */ .hero-b .hero-cta .btn{width:min(100%,300px);min-height:48px;padding:14px 22px;font-size:16px} .hero-b .callcard{left:12px;right:12px;bottom:12px;width:auto} .ticker-line{white-space:normal;text-align:left;font-size:12.5px} .hero-b .hero-sub{font-size:14px;max-width:34ch} .hero-b .hero-proof{flex-direction:column;align-items:center;gap:10px} } /* ---- Client logos strip ---- */ .trust{padding:38px 0 6px} .trust p{text-align:center;font-size:13px;font-weight:500;color:var(--text-tertiary);margin-bottom:22px} /* Marquee (accueil) : pleine largeur de viewport, fondu aux bords, défilement linéaire (mouvement constant → linear, jamais d'easing). 4 copies du jeu, translateX(-50 %) = 2 copies exactement : boucle sans couture. Pause au survol souris uniquement ; reduced-motion = rangée statique centrée. */ .marquee{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee-track{display:flex;width:max-content;animation:marquee 44s linear infinite;will-change:transform} .mq-set{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none} .mq-set li{flex:none;padding:0 40px} /* Logos agrandis d'environ un quart (09/09/2026) : la bande porte une preuve chiffrée, les marques doivent se lire sans effort. */ .mq-set img{display:block;height:68px;max-width:240px;width:auto;object-fit:contain;opacity:.62;filter:grayscale(1)} @keyframes marquee{to{transform:translateX(-50%)}} @media (hover:hover) and (pointer:fine){.marquee:hover .marquee-track{animation-play-state:paused}} @media (max-width:720px){.mq-set li{padding:0 22px}.mq-set img{height:52px;max-width:180px}} @media (prefers-reduced-motion:reduce){ .marquee{-webkit-mask-image:none;mask-image:none;width:100%;margin-left:0} .marquee-track{animation:none;width:100%;justify-content:center} .mq-set{flex-wrap:wrap;justify-content:center;row-gap:18px} .mq-set[aria-hidden]{display:none} } .logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 44px} .logos img{height:34px;max-width:118px;width:auto;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity var(--dur-base),filter var(--dur-base)} .logos img:hover{opacity:1;filter:grayscale(0)} /* ========================================================= AUDIENCE (soignants + secrétaires) — « le standard, absorbé » (TriageBoard.tsx, proposition B arbitrée le 01/09/2026, ajustée en séance : scène posée à même le fond du site, cartes personas façon témoignages). --------------------------------------------------------- Schéma central : les demandes entrantes tombent dans la pilule Recept (journal en dessous) ; les personas — cartes photo pleine carte, dégradé bas, identité centrée en blanc — restent intouchés, sauf les transmissions : urgence → praticien, devis/réclamation → secrétariat (fil allumé + carte cerclée + badge posé en tête de carte). L'état de repos (rendu serveur, no-JS, reduced-motion) est complet. Transform/opacity seulement. ========================================================= */ /* --tri-arrive : délai entre l'allumage d'un fil et la réaction de sa cible (le temps que le paquet parcoure le fil) ; 0 sur mobile où les fils latéraux sont masqués. */ .tri-stage{--tri-arrive:460ms;position:relative;display:grid;grid-template-columns:264px 1fr 264px;gap:32px;align-items:center;min-height:520px} /* Fils pointillés (PA, 07/09/2026 : ancrés sur les éléments — plus de SVG étiré qui laissait un trou sous la pilule) : motif de points (dégradé radial) sur ::before, décalé d'une période de 8 px en transform pour « couler » vers la cible quand le fil est allumé (.lit) ; sur les fils .pk, un paquet plein sur ::after — barre plus longue que le fil, clip-path qui voyage — part de la source et meurt à la cible. Sens de flux : .l vers la gauche, .r vers la droite, .d vers le bas. Les latéraux vont du bord de la carte au centre de la scène et passent SOUS la pilule (z-index de la colonne), quelle que soit la largeur de son libellé. */ .tri-wire{position:absolute;overflow:hidden;pointer-events:none;color:var(--gray-300); transition:color var(--dur-slow) var(--ease-out)} .tri-wire.lit{color:var(--blue-500)} .tri-wire::before{content:"";position:absolute;inset:0; background-image:radial-gradient(circle,currentColor 1px,transparent 1.6px);background-size:8px 8px} .tri-wire.h{height:8px;top:50%;margin-top:-4px} .tri-wire.h::before{left:-8px;right:-8px;background-repeat:repeat-x;background-position:0 50%} .tri-wire.v{width:8px;left:50%;margin-left:-4px} .tri-wire.v::before{top:-8px;bottom:-8px;background-repeat:repeat-y;background-position:50% 0} .tri-wire.h.l{left:264px;right:50%} .tri-wire.h.r{left:50%;right:264px} .tri-wire.l.lit::before{animation:tri-flow-l .42s linear infinite} .tri-wire.r.lit::before{animation:tri-flow-r .42s linear infinite} .tri-wire.d.lit::before{animation:tri-flow-d .42s linear infinite} @keyframes tri-flow-l{to{transform:translateX(-8px)}} @keyframes tri-flow-r{to{transform:translateX(8px)}} @keyframes tri-flow-d{to{transform:translateY(8px)}} .tri-wire.pk::after{content:"";position:absolute;background:currentColor;opacity:0} .tri-wire.h.pk::after{left:-20%;right:-20%;top:50%;height:2.5px;margin-top:-1.25px} .tri-wire.v.pk::after{top:-20%;bottom:-20%;left:50%;width:2.5px;margin-left:-1.25px} .tri-wire.l.pk.lit::after{animation:tri-pk-l .52s var(--ease-in-out) forwards} .tri-wire.r.pk.lit::after{animation:tri-pk-r .52s var(--ease-in-out) forwards} .tri-wire.d.pk.lit::after{animation:tri-pk-d .52s var(--ease-in-out) forwards} @keyframes tri-pk-l{0%{opacity:1;clip-path:inset(0 0 0 86% round 2px)}100%{opacity:1;clip-path:inset(0 86% 0 0 round 2px)}} @keyframes tri-pk-r{0%{opacity:1;clip-path:inset(0 86% 0 0 round 2px)}100%{opacity:1;clip-path:inset(0 0 0 86% round 2px)}} @keyframes tri-pk-d{0%{opacity:1;clip-path:inset(0 0 86% 0 round 2px)}100%{opacity:1;clip-path:inset(86% 0 0 0 round 2px)}} /* Colonne centrale : trois rangées (1fr auto 1fr) — la pilule tombe au milieu exact de la scène, à la hauteur des fils latéraux. Zone d'entrée : la puce est posée au sommet du fil qui descend dans la pilule ; zone de sortie : fil, identité de Recept AI (même grammaire que les cartes personas), puis le journal (PA, 07/09 : au-dessus). */ .tri-col{position:relative;z-index:1;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-self:stretch;width:100%} .tri-inzone{position:relative;width:100%;display:flex;justify-content:center} .tri-inzone .tri-wire{bottom:0;height:110px} .tri-chip{position:absolute;bottom:110px;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-pill); background:var(--surface-card);color:var(--text-secondary);font-size:13px;font-weight:500;white-space:nowrap; box-shadow:inset 0 0 0 1px var(--gray-200),0 1px 2px rgba(0,0,0,.04)} .tri-chip .ic{width:14px;height:14px;color:var(--text-tertiary)} .tri-chip.urg{color:var(--blue-800);box-shadow:inset 0 0 0 1.5px var(--blue-200),0 1px 2px rgba(0,0,0,.04)} .tri-chip.urg .ic{color:var(--blue-700)} .tri-pill{display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:var(--radius-pill); background:var(--blue-500);color:#fff;box-shadow:var(--shadow-brand); transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .tri-pill.busy{transform:scale(1.04)} .tri-pill.relay{background:var(--blue-700)} .tri-pill .mk{width:17px;height:16px;flex:none} .tri-pill .lbl{font-size:13.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap} .tri-pill .lbl-s{display:none} .tri-bars{display:flex;align-items:center;gap:2.5px;height:14px} .tri-bars i{width:2.5px;height:4px;border-radius:2px;background:rgba(255,255,255,.85)} .tri-pill.busy .tri-bars i{animation:tri-eq .9s ease-in-out infinite} .tri-pill.busy .tri-bars i:nth-child(2){animation-delay:.12s} .tri-pill.busy .tri-bars i:nth-child(3){animation-delay:.24s} .tri-pill.busy .tri-bars i:nth-child(4){animation-delay:.36s} @keyframes tri-eq{0%,100%{height:4px}50%{height:13px}} .tri-outzone{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding-top:48px} .tri-outzone .tri-wire{top:0;height:40px} .tri-journal{width:100%;max-width:330px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .tri-journal li{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:var(--radius-md);background:var(--surface-card); box-shadow:inset 0 0 0 1px var(--gray-200),0 1px 2px rgba(0,0,0,.03);font-size:12.5px;font-weight:500;color:var(--text-secondary)} .tri-journal li .ic{width:14px;height:14px;color:var(--blue-500);flex:none} .tri-journal li b{font-weight:600;color:var(--text-primary)} .tri-journal li:nth-child(2){opacity:.66} .tri-journal li:nth-child(3){opacity:.38} /* Cartes personas : mêmes codes que .tc-card (photo pleine carte, dégradé de lisibilité, identité centrée en blanc, statut atténué dessous). */ .tri-side{position:relative;aspect-ratio:3/4;border-radius:var(--radius-xl);background:var(--blue-50); transition:box-shadow var(--dur-slow) var(--ease-out),transform 480ms var(--ease-out)} /* Pas d'overflow:hidden sur la carte (l'onde en déborde) : photo et dégradé portent le rayon. */ .tri-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit} .tri-grad{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;border-radius:inherit; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.66) 100%)} .tri-who{position:absolute;z-index:1;left:14px;right:14px;bottom:18px;text-align:center;color:#fff;pointer-events:none} .tri-who .nm{display:block;font-size:16.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em} .tri-who .rl{display:block;font-size:12.5px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.72);margin-top:3px} /* Identité de Recept AI au-dessus du journal (PA, 07/09/2026) : même bloc que les cartes, en encre sur le fond de la page. Vraie copy : hors des zones aria-hidden. */ .tri-who-ai{position:static;margin:0 0 14px;color:var(--text-primary);pointer-events:auto} .tri-who-ai .rl{color:var(--text-tertiary)} .tri-side.ping{box-shadow:0 0 0 2px var(--blue-500),0 0 0 6px var(--blue-100);transition-delay:var(--tri-arrive)} /* Onde bleue à l'arrivée d'une notification (PA, 07/09/2026) : deux anneaux partent du bord de la carte, s'élargissent et s'effacent (transform/opacity, une fois par arrivée). */ .tri-side::before,.tri-side::after{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit; border:2px solid var(--blue-500);opacity:0;pointer-events:none} .tri-side.ping::before{animation:tri-wave 1.1s var(--ease-out) var(--tri-arrive) forwards} .tri-side.ping::after{animation:tri-wave 1.1s var(--ease-out) calc(var(--tri-arrive) + 240ms) forwards} @keyframes tri-wave{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(var(--wv,1.14))}} .tri-flag{position:absolute;z-index:1;top:12px;left:50%;display:inline-flex;align-items:center;gap:6px; padding:5px 11px;border-radius:var(--radius-pill);background:var(--surface-card);color:var(--blue-700); font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18); opacity:0;transform:translate(-50%,-6px); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)} .tri-flag .ic{width:12px;height:12px} .tri-flag.on{opacity:1;transform:translate(-50%,0);transition-delay:var(--tri-arrive)} .tri-legend{margin:26px auto 0;text-align:center;font-size:12.5px;color:var(--text-tertiary);line-height:1.7} @media (max-width:860px){ /* Mobile = piste B « Le hub » arbitrée par PA le 07/09/2026 (artifact « Duel Pour qui mobile ») : la géométrie desktop miniaturisée. Grille 80 | 1fr | 80 sur trois rangées — zone d'entrée (puce + fil), rangée du hub (avatar rond 60 px à gauche, pilule au centre, avatar à droite, fils latéraux sous la pilule), zone de sortie pleine largeur (fil, identité Recept AI AU-DESSUS du journal, journal). Les cartes photo deviennent des avatars ronds (même DOM, CSS seul) ; les badges de transmission disparaissent (PA), l'anneau + l'onde restent sur l'avatar. Tous les fils verticaux partent du CENTRE de la pilule (cachés dessous) pour toucher leurs cibles quelle que soit la hauteur de la pilule. */ .tri-stage{--tri-arrive:400ms;--wv:1.34;display:grid;grid-template-columns:80px minmax(0,1fr) 80px;grid-template-rows:120px 60px auto; align-items:start;gap:0;min-height:0} .tri-col{display:contents} .tri-inzone{grid-column:2;grid-row:1} .tri-inzone .tri-wire{top:36px;bottom:auto;height:114px} .tri-chip{bottom:auto;top:2px} .tri-pill{grid-column:2;grid-row:2;align-self:center;justify-self:center;position:relative;z-index:1;padding:11px 16px} .tri-pill .lbl{font-size:12px} /* Libellé court et pas de barres : la pilule laisse leur longueur aux fils latéraux */ .tri-pill .lbl-l,.tri-pill .tri-bars{display:none} .tri-pill .lbl-s{display:inline} .tri-wire.h{top:146px} .tri-wire.h.l{left:70px;right:50%} .tri-wire.h.r{left:50%;right:70px} .tri-outzone{grid-column:1 / -1;grid-row:3;padding-top:64px} .tri-outzone .tri-wire{top:-30px;height:88px} .tri-who-ai{margin:0 0 12px} .tri-journal{max-width:100%} /* Personas : avatar rond, identité en encre dessous (hors flux pour ne pas grandir la rangée du hub), plus de dégradé, de badge ni de glissement. */ .tri-side{grid-row:2;width:80px;height:60px;aspect-ratio:auto;border-radius:0;background:none;transition:none} .tri-side:first-of-type{grid-column:1} .tri-side:last-of-type{grid-column:3} .tri-side img{position:static;display:block;width:60px;height:60px;margin:0 auto;border-radius:50%;object-fit:cover;object-position:center top; transition:box-shadow var(--dur-slow) var(--ease-out)} .tri-grad,.tri-flag{display:none} .tri-who{position:absolute;left:-10px;right:-10px;top:66px;bottom:auto;color:var(--text-primary)} .tri-who .nm{font-size:12px;white-space:nowrap} .tri-who .rl{font-size:10.5px;color:var(--text-tertiary);margin-top:1px} .tri-who-ai{position:static;color:var(--text-primary)} .tri-who-ai .nm{font-size:15px} .tri-who-ai .rl{font-size:12px} .tri-side.ping{box-shadow:none} .tri-side.ping img{box-shadow:0 0 0 2px var(--blue-500),0 0 0 6px var(--blue-100);transition-delay:var(--tri-arrive)} .tri-side::before,.tri-side::after{inset:auto;top:0;left:50%;width:60px;height:60px;margin-left:-30px;border-radius:50%} .tri-legend{margin-top:18px} } @media (prefers-reduced-motion:reduce){ .tri-pill,.tri-side,.tri-flag,.tri-wire{transition:none} .tri-pill.busy .tri-bars i,.tri-wire::before,.tri-wire::after,.tri-side::before,.tri-side::after{animation:none} } /* ========================================================= FEATURE ROWS (produit) ========================================================= */ .frow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:26px 0} .frow.flip .ftext{order:2} .frow h3,.fband h3,.fband .h3{margin:14px 0 0} .frow .lead,.fband .lead{margin-top:14px;font-size:16px} /* Zones visuelles des alternances : format quasi carré de la maquette Figma (frame 753×641) et coins 16px, au lieu du panneau libre min-height. */ .frow .fmock{min-height:0;aspect-ratio:753/641;border-radius:var(--radius-lg); display:flex;flex-direction:column;justify-content:center} @media (max-width:860px){ .frow{grid-template-columns:1fr;gap:28px;padding:14px 0} .frow.flip .ftext{order:0} } /* Panneaux teintés picturaux : le mock devient transparent, ses rangées deviennent des toasts blancs posés sur le lavis (refonte Lassie) */ .fmock{border-radius:var(--radius-3xl);padding:26px; background:radial-gradient(120% 100% at 14% 0%,rgba(220,232,255,.95) 0%,rgba(245,248,255,.6) 46%,rgba(159,198,255,.38) 100%), linear-gradient(160deg,var(--blue-50),var(--blue-100))} .fmock .mock{background:transparent;border:none;box-shadow:none;padding:0} .fmock .mrow{background:#fff;border:1px solid rgba(27,27,27,.05);box-shadow:var(--shadow-lg)} .fmock .mrow .meta.acc{color:var(--blue-600)} .fmock .mrow .meta.warn{color:var(--danger)} .fmock .mrow .ico.tint-blue{background:var(--blue-50);color:var(--blue-600)} .fmock .mini-agenda span{border-color:transparent;box-shadow:var(--shadow-xs)} .fmock .chip{box-shadow:var(--shadow-xs)} /* Étiquette de feature (pas une eyebrow de section : encre, pas bleu) */ .flabel{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary)} /* Chips de bénéfices (remplacent les listes à checkmarks) */ .fchips{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px} .fchips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--gray-200); border-radius:var(--radius-pill);font-size:13.5px;font-weight:500;color:var(--text-secondary);background:var(--white)} .fchips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-500);flex:0 0 auto} /* Bande pleine largeur (3e feature) — panneau neutre de la maquette Figma (Product 11363:6867, 1630×641) : le texte occupe la gauche, la fenêtre « Boîte de réception » fuit vers le bord bas-droit et la bande la rogne. */ .fband{position:relative;overflow:hidden;border:none;border-radius:var(--radius-lg); background:var(--surface-mock); padding:44px;display:grid;grid-template-columns:1.54fr 1fr;gap:48px;align-items:center;margin-top:30px} .fband .fmock{background:none;padding:0;border-radius:0} @media (max-width:860px){.fband{grid-template-columns:1fr;padding:26px;gap:26px}} /* --------------------------------------------------------- Vignette « Boîte de réception » (maquette Figma Product 11363:6867) Zone mock de référence : 650 px maquette de large (fenêtre 699 px dont 49 rognés à droite), 641 px de haut. --u = 1 px maquette. La cellule échappe au padding de la bande pour que la fenêtre touche ses bords. --------------------------------------------------------- */ .fband .fmock-inbox{margin:-44px -44px -44px 0;aspect-ratio:650/641; container-type:inline-size;position:relative} .ibx{position:absolute;inset:0;--u:calc(100cqw / 650)} .ibx-window{position:absolute;z-index:1;left:0;top:calc(82 * var(--u)); width:calc(699 * var(--u));height:calc(589 * var(--u)); padding:calc(30.702 * var(--u));display:flex;flex-direction:column; gap:calc(19.612 * var(--u));border-radius:calc(23.573 * var(--u)); background:linear-gradient(90deg,rgba(0,0,0,.01),rgba(0,0,0,.01)), linear-gradient(158.4deg,rgba(252,252,252,.94) 5.44%,rgba(252,252,252,.846) 103.53%); -webkit-backdrop-filter:blur(calc(6.435 * var(--u))); backdrop-filter:blur(calc(6.435 * var(--u))); box-shadow:0 calc(2.74 * var(--u)) calc(4.48 * var(--u)) rgba(0,0,0,.02), 0 calc(12.06 * var(--u)) calc(9.28 * var(--u)) rgba(0,0,0,.03), 0 calc(29.6 * var(--u)) calc(18.52 * var(--u)) rgba(0,0,0,.04), 0 calc(57 * var(--u)) calc(36.29 * var(--u)) rgba(0,0,0,.04), 0 calc(95.91 * var(--u)) calc(66.73 * var(--u)) rgba(0,0,0,.05), 0 calc(147.98 * var(--u)) calc(113.94 * var(--u)) rgba(0,0,0,.07)} .ibx-head{display:flex;align-items:center;gap:calc(9.806 * var(--u))} .ibx-head p{font-size:calc(19.612 * var(--u));font-weight:500;color:#000;line-height:normal} .ibx-ic-head{width:calc(29.596 * var(--u));height:calc(29.596 * var(--u));color:#000;display:block;flex:none} .ibx-div{height:0;border-top:1px solid rgba(0,0,0,.08);width:100%} .ibx-tabs{display:flex;align-items:center;gap:calc(8 * var(--u));width:max-content} .ibx-tab{position:relative;display:flex;align-items:center;justify-content:center; padding:calc(7.76 * var(--u)) calc(13.72 * var(--u));border-radius:var(--radius-pill); font-size:calc(16 * var(--u));font-weight:500;line-height:1;white-space:nowrap; background:#DBE5FF;color:var(--blue-500); transition:background .18s ease,color .18s ease} .ibx-tab.on{background:var(--blue-500);color:#F3F3F3} .ibx-badge{position:absolute;top:calc(-8.52 * var(--u));right:calc(-5.9 * var(--u)); display:flex;align-items:center;justify-content:center; padding:calc(3 * var(--u)) calc(6 * var(--u));border-radius:var(--radius-pill); border:calc(2 * var(--u)) solid #F6F6F6; font-size:calc(12 * var(--u));font-weight:500;line-height:1; background:#DBE5FF;color:var(--blue-500); transition:background .18s ease,color .18s ease} .ibx-tab.on .ibx-badge{background:var(--blue-500);color:#fff} .ibx-sep{width:1px;height:calc(19 * var(--u));background:rgba(0,0,0,.12);flex:none} .ibx-sort{position:relative;display:flex;align-items:center;gap:calc(6.88 * var(--u)); padding:calc(7.76 * var(--u)) calc(13.72 * var(--u));border-radius:var(--radius-pill); font-size:calc(16 * var(--u));font-weight:400;line-height:1;color:#000;white-space:nowrap} .ibx-ic-sort{width:calc(16 * var(--u));height:calc(16 * var(--u));color:#000;display:block;flex:none} .ibx-pop{position:absolute;z-index:20;top:calc(100% + 8 * var(--u));right:0; width:calc(176 * var(--u));padding:calc(6 * var(--u)); display:flex;flex-direction:column;gap:calc(2 * var(--u)); background:#fff;border-radius:calc(12 * var(--u)); box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.08), 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.10); transform-origin:top right} .ibx-opt{display:flex;align-items:center;padding:calc(9 * var(--u)) calc(12 * var(--u)); border-radius:calc(8 * var(--u));font-size:calc(14 * var(--u));font-weight:500; line-height:1.2;color:#000;transition:background .15s ease} .ibx-opt.on{color:var(--blue-500)} .ibx-opt.hov{background:rgba(0,0,0,.05)} .ibx-list{display:flex;flex-direction:column;gap:calc(8 * var(--u)); flex:1 1 0;min-height:0;overflow:hidden} .ibx-msg{display:flex;flex-direction:column;gap:calc(10 * var(--u));flex:none; padding:calc(16 * var(--u));border-radius:calc(14 * var(--u));width:100%; background:linear-gradient(176.07deg,rgba(252,252,252,.94) 5.44%,rgba(252,252,252,.846) 103.53%)} .ibx-mhead{display:flex;align-items:center;justify-content:space-between; height:calc(21 * var(--u))} .ibx-mwho{display:flex;align-items:center;gap:calc(8 * var(--u))} .ibx-ic-user{width:calc(16 * var(--u));height:calc(16 * var(--u));color:#000;display:block;flex:none} .ibx-mname{font-size:calc(16 * var(--u));font-weight:500;color:#000;line-height:normal;white-space:nowrap} .ibx-urgent{display:flex;align-items:center;justify-content:center; padding:calc(4 * var(--u)) calc(8 * var(--u));border-radius:var(--radius-pill); font-size:calc(12 * var(--u));font-weight:500;line-height:1; background:#FFDBDB;color:#FF2F2F;white-space:nowrap} .ibx-mtime{font-size:calc(12 * var(--u));font-weight:400;color:#979797;line-height:normal;white-space:nowrap} .ibx-mtext{height:calc(20.314 * var(--u));display:flex;align-items:center; font-size:calc(14 * var(--u));font-weight:500;color:#000;line-height:normal; white-space:nowrap;overflow:hidden} .ibx-mtext .dim{color:rgba(0,0,0,.4);margin-left:.3em} .ibx-cursor{position:absolute;left:0;top:0;z-index:30;pointer-events:none; width:calc(45.702 * var(--u));height:calc(39.313 * var(--u)); display:flex;align-items:center;justify-content:center; transform:translate(calc(var(--cx) * var(--u)),calc(var(--cy) * var(--u))) scale(var(--cs))} .ibx-cursor-rot{transform:rotate(73.59deg);width:calc(29.511 * var(--u)); height:calc(38.952 * var(--u));position:relative;flex:none;display:block} /* Le canvas du SVG (339.2×341.8) déborde de la boîte du curseur (ombre intégrée) : une image remplacée ne s'étire pas via les insets, on la dimensionne donc explicitement en % de la boîte. */ .ibx-cursor-rot img{position:absolute;left:-522.48%;top:-4.63%; width:1149.43%;height:877.53%;display:block;max-width:none} /* Sans backdrop-filter, le verre laisse transparaître le fond : on rend la fenêtre quasi opaque pour garder la lisibilité de la maquette. */ @supports not (backdrop-filter:blur(1px)){ .ibx-window{background:linear-gradient(158.4deg,rgba(252,252,252,.99) 5.44%,rgba(250,250,250,.97) 103.53%)} } @media (max-width:860px){ /* Mobile : on rogne plus large (480 px maquette visibles) pour rester lisible, et moins haut — les onglets tiennent entiers dans la fenêtre. */ .fband .fmock-inbox{margin:0 -26px -26px 0;aspect-ratio:480/560} .ibx{--u:calc(100cqw / 480)} } /* --------------------------------------------------------- Vignette « Intégrations » (maquette Figma Product 11363:6867) Zone mock : 1207 px maquette (x 423→1630 de la bande). La fenêtre (777.4 px) est posée devant le logo 3D que son verre diffuse ; toutes les cotes internes sont locales à la fenêtre. --------------------------------------------------------- */ /* Texte élargi à la demande de PA (titre 2 lignes, lead 3 lignes) : la zone visuelle est renormalisée à 1080 px maquette pour que la fenêtre garde sa taille rendue, et le titre a sa taille propre, calibrée sur la colonne. */ /* Sous une tête de section centrée (PA, 26/08/2026) : plus de marge haute ni de titre dans la bande, la colonne texte porte le lead et les chips */ .fband.fband-integ{grid-template-columns:440fr 1000fr;margin-top:0} /* Pilules « logiciels connectés » (PA, 03/09/2026), sous le lead et plus grandes depuis le 07/09/2026 — elles remplacent les trois chips de catégories : blanc, filet gris, logo 22 px. Cascade d'entrée 35 ms/pilule quand la bande se révèle (une fois, lecture guidée de la liste), désactivée en reduced. */ .ipills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none} .ipills li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 9px;border-radius:var(--radius-pill); background:#fff;box-shadow:inset 0 0 0 1px var(--gray-200);font-size:14px;font-weight:500;line-height:1.2;color:var(--text-secondary)} .ipills img{width:22px;height:22px;object-fit:contain;border-radius:6px;flex:none} .reveal .ipills li{opacity:0;transform:translateY(6px);transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out); transition-delay:calc(120ms + var(--i,0) * 35ms)} .reveal.in .ipills li{opacity:1;transform:none} .fband .fmock-integ{margin:-44px -44px -44px 0;aspect-ratio:1080/641; container-type:inline-size;position:relative;align-self:end} .ibg{position:absolute;inset:0;--u:calc(100cqw / 1080)} /* Logo 3D entier (jamais rogné à gauche — retour PA) : l'astérisque est calé sur la zone de la maquette (contenu ≈ x 440→1000, sortie par le bas de la bande, moitié droite diffusée par le verre de la fenêtre). L'ombre suit le tracé (drop-shadow), pas la boîte de l'image. */ .ibg-logo{position:absolute;left:calc(-280 * var(--u));top:calc(169 * var(--u)); width:calc(950 * var(--u));height:auto;max-width:none;display:block; filter:drop-shadow(0 calc(28 * var(--u)) calc(26 * var(--u)) rgba(19,57,109,.12)) drop-shadow(0 calc(90 * var(--u)) calc(70 * var(--u)) rgba(19,57,109,.08))} .ibg-window{position:absolute;left:calc(247 * var(--u));top:calc(82 * var(--u)); width:calc(777.4 * var(--u));height:calc(589 * var(--u)); padding:calc(19.7 * var(--u)) calc(30.702 * var(--u)) calc(30.702 * var(--u)); display:flex;flex-direction:column;gap:calc(19.612 * var(--u)); border-radius:calc(23.573 * var(--u)); background:linear-gradient(90deg,rgba(0,0,0,.01),rgba(0,0,0,.01)), linear-gradient(160.4deg,rgba(252,252,252,.94) 5.44%,rgba(252,252,252,.846) 103.53%); -webkit-backdrop-filter:blur(calc(6.435 * var(--u))); backdrop-filter:blur(calc(6.435 * var(--u))); box-shadow:0 calc(2.74 * var(--u)) calc(4.48 * var(--u)) rgba(0,0,0,.02), 0 calc(12.06 * var(--u)) calc(9.28 * var(--u)) rgba(0,0,0,.03), 0 calc(29.6 * var(--u)) calc(18.52 * var(--u)) rgba(0,0,0,.04), 0 calc(57 * var(--u)) calc(36.29 * var(--u)) rgba(0,0,0,.04), 0 calc(95.91 * var(--u)) calc(66.73 * var(--u)) rgba(0,0,0,.05), 0 calc(147.98 * var(--u)) calc(113.94 * var(--u)) rgba(0,0,0,.07)} .ibg-head{display:flex;align-items:center;justify-content:space-between} .ibg-title{display:flex;align-items:center;gap:calc(8 * var(--u))} .ibg-title p{font-size:calc(19.612 * var(--u));font-weight:500;color:#000;line-height:normal} .ibg-ic-head{width:calc(29.596 * var(--u));height:calc(29.596 * var(--u));color:#000;display:block;flex:none} .ibg-div{height:0;border-top:1px solid rgba(0,0,0,.08);width:100%} /* Contour Figma tracé à l'intérieur : la bordure est déduite du padding. */ .ibg-add{display:flex;align-items:center;gap:calc(8.879 * var(--u)); padding:calc(8.8 * var(--u)) calc(13.76 * var(--u)); border:calc(2.96 * var(--u)) solid rgba(255,255,255,.05); border-radius:var(--radius-pill);background:var(--blue-500); font-size:calc(14 * var(--u));font-weight:500;line-height:1.001;color:#fff;white-space:nowrap} .ibg-ic-add{width:calc(14 * var(--u));height:calc(14 * var(--u));display:block;flex:none} /* Deux colonnes strictes (retour PA) : la grille reste alignée quel que soit le logo, et la 8e intégration prend le slot bas-droit sans wrap. */ .ibg-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(32 * var(--u)); width:100%;align-content:flex-start} .ibg-item{display:flex;align-items:center;gap:calc(20 * var(--u));min-width:0} /* Slot logo fixe : les textes de toutes les lignes partent du même x. */ .ibg-ilogo{width:calc(47 * var(--u));height:calc(43 * var(--u));object-fit:contain;flex:none} .ibg-itxt{display:flex;flex-direction:column;align-items:flex-start} .ibg-status{display:flex;align-items:center;gap:calc(3 * var(--u)); font-size:calc(12 * var(--u));font-weight:400;color:#48BD4E;line-height:normal} .ibg-status svg{width:calc(12 * var(--u));height:calc(12 * var(--u));fill:currentColor;flex:none} .ibg-iname{margin-top:calc(8 * var(--u));font-size:calc(14 * var(--u));font-weight:500;color:#000;line-height:normal} .ibg-idesc{margin-top:calc(3 * var(--u));max-width:calc(277 * var(--u)); font-size:calc(12 * var(--u));font-weight:400;color:rgba(0,0,0,.4);line-height:normal} .ibg-veil{position:absolute;inset:0;z-index:15;border-radius:calc(23.573 * var(--u)); background:rgba(252,252,252,.55); -webkit-backdrop-filter:blur(calc(3 * var(--u)));backdrop-filter:blur(calc(3 * var(--u)))} .ibg-modal{position:absolute;z-index:20;left:calc(50% - 180 * var(--u));top:calc(120 * var(--u)); width:calc(360 * var(--u));padding:calc(18 * var(--u)); background:#fff;border-radius:calc(18 * var(--u)); box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.10), 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.12); transform-origin:top center} .ibg-mtitle{font-size:calc(15 * var(--u));font-weight:500;color:#000;line-height:normal; margin-bottom:calc(12 * var(--u))} .ibg-mrow{display:flex;align-items:center;gap:calc(12 * var(--u)); height:calc(48 * var(--u));padding:0 calc(10 * var(--u));border-radius:calc(12 * var(--u)); transition:background .15s ease} .ibg-mrow + .ibg-mrow{margin-top:calc(4 * var(--u))} .ibg-mrow.hov{background:rgba(0,0,0,.05)} .ibg-mrow.off .ibg-mname{color:rgba(0,0,0,.45)} .ibg-mlogo{width:calc(28 * var(--u));height:calc(28 * var(--u));object-fit:contain;flex:none} .ibg-mname{font-size:calc(14 * var(--u));font-weight:500;color:#000;flex:1 1 auto;line-height:normal} .ibg-mact{font-size:calc(12.5 * var(--u));font-weight:500;color:var(--blue-500);line-height:normal} .ibg-mok{display:flex;align-items:center;gap:calc(3 * var(--u)); font-size:calc(12 * var(--u));font-weight:400;color:#48BD4E;line-height:normal} .ibg-mok svg{width:calc(12 * var(--u));height:calc(12 * var(--u));fill:currentColor;flex:none} .ibg-connect{display:flex;flex-direction:column;align-items:center; padding:calc(14 * var(--u)) 0 calc(10 * var(--u))} .ibg-mark{position:relative;width:calc(64 * var(--u));height:calc(61 * var(--u));display:block} .ibg-mark img{position:absolute;inset:0;width:100%;height:100%;display:block} .ibg-mark > img{opacity:.18} .ibg-mark-fill{position:absolute;inset:0;display:block} .ibg-ctext{margin-top:calc(14 * var(--u));display:flex;align-items:center; font-size:calc(13 * var(--u));font-weight:500;color:var(--blue-500);line-height:normal} .ibg-dots{display:inline-flex;gap:calc(4 * var(--u));margin-left:calc(7 * var(--u))} .ibg-dots span{width:calc(4.6 * var(--u));height:calc(4.6 * var(--u));border-radius:50%; background:var(--blue-500);animation:ibgdot 1.4s ease-in-out infinite} .ibg-dots span:nth-child(2){animation-delay:.2s} .ibg-dots span:nth-child(3){animation-delay:.4s} @keyframes ibgdot{0%,60%,100%{opacity:.25}30%{opacity:1}} .ibg-cursor{position:absolute;left:0;top:0;z-index:30;pointer-events:none; width:calc(45.702 * var(--u));height:calc(39.313 * var(--u)); display:flex;align-items:center;justify-content:center; transform:translate(calc(var(--cx) * var(--u)),calc(var(--cy) * var(--u))) scale(var(--cs))} .ibg-cursor-rot{transform:rotate(73.59deg);width:calc(29.511 * var(--u)); height:calc(38.952 * var(--u));position:relative;flex:none;display:block} .ibg-cursor-rot img{position:absolute;left:-522.48%;top:-4.63%; width:1149.43%;height:877.53%;display:block;max-width:none} @supports not (backdrop-filter:blur(1px)){ .ibg-window{background:linear-gradient(160.4deg,rgba(252,252,252,.99) 5.44%,rgba(250,250,250,.97) 103.53%)} } @media (max-width:860px){ /* Mobile (PA, 03/09/2026) : la fenêtre est re-mise en page pour tenir entière — base 480 px maquette, fenêtre 440 px calée à 20 px des bords, descriptions masquées, logo 3D retiré (invisible derrière) — et le scénario se joue avec le jeu de cibles COMPACT (IntegBoard.tsx). La règle desktop .fband.fband-integ est plus spécifique que .fband : on ré-impose l'empilement une colonne ici. */ .fband.fband-integ{grid-template-columns:1fr} .fband .fmock-integ{margin:0 -26px -26px -26px;aspect-ratio:480/430} .ibg{--u:calc(100cqw / 480)} .ibg-logo{display:none} .ibg-window{left:calc(20 * var(--u));top:calc(28 * var(--u));width:calc(440 * var(--u)); padding:calc(18 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u));gap:calc(16 * var(--u))} .ibg-title p{font-size:calc(17 * var(--u))} .ibg-ic-head{width:calc(24 * var(--u));height:calc(24 * var(--u))} .ibg-add{font-size:calc(13 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u))} .ibg-grid{gap:calc(22 * var(--u)) calc(16 * var(--u))} .ibg-item{gap:calc(12 * var(--u))} .ibg-ilogo{width:calc(38 * var(--u));height:calc(36 * var(--u))} .ibg-iname{margin-top:calc(5 * var(--u))} .ibg-idesc{display:none} .ibg-modal{left:calc(50% - 170 * var(--u));top:calc(96 * var(--u));width:calc(340 * var(--u))} } @media (prefers-reduced-motion:reduce){ .ibg-dots span{animation:none} } /* --------------------------------------------------------- Vignette « Appel en cours » (maquette Figma Product 11359:3860) Frame de référence 753×641 : toutes les cotes sont des px de maquette exprimés via --u (1 px maquette). --uc ne grossit que la pile de cartes sur petit écran, pour rester lisible. --------------------------------------------------------- */ .fmock.fmock-call{padding:0;background:var(--surface-mock);overflow:hidden;position:relative; container-type:inline-size;isolation:isolate;display:block} .csum{position:absolute;inset:0;--u:calc(100cqw / 753);--uc:var(--u)} .csum-head{position:absolute;left:calc(41.07 * var(--u));top:calc(28.91 * var(--u)); width:calc(670.86 * var(--u));display:flex;align-items:center;justify-content:space-between} .csum-title{font-size:calc(34.241 * var(--u));font-weight:500;letter-spacing:0; color:var(--blue-500);line-height:normal} .csum-sub{font-size:calc(23.083 * var(--u));font-weight:500;color:rgba(47,103,255,.5); line-height:normal;margin-top:calc(4.184 * var(--u));display:flex;align-items:center} .csum-dots{display:inline-flex;gap:calc(4.5 * var(--u));margin-left:calc(9 * var(--u))} .csum-dots span{width:calc(5.2 * var(--u));height:calc(5.2 * var(--u));border-radius:50%; background:rgba(47,103,255,.5);animation:csumdot 1.4s ease-in-out infinite} .csum-dots span:nth-child(2){animation-delay:.2s} .csum-dots span:nth-child(3){animation-delay:.4s} @keyframes csumdot{0%,60%,100%{opacity:.25}30%{opacity:1}} .csum-mark{width:calc(59.973 * var(--u));height:calc(56.688 * var(--u));display:block} .csum-wave{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:calc(12 * var(--u))} .csum-wave span{flex:0 0 auto;width:calc(6.312 * var(--u));border-radius:var(--radius-pill); background:var(--blue-500);transform-origin:center} /* Houle lente : phase continue d'une barre à l'autre (délais négatifs posés par le composant), sinusoïde douce plutôt que l'à-coup du wave générique. */ .csum-wave.on span{animation:csumwave 2s cubic-bezier(.37,0,.63,1) infinite} @keyframes csumwave{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.18)}} .csum-stack{position:absolute;left:50%;top:calc(50% + 32.97 * var(--u));width:0;height:0} /* Le wrapper Motion pilote transform : le centrage passe par des marges. */ .csum-cardw{position:absolute;left:0;top:0;width:calc(470.574 * var(--uc)); margin-left:calc(-235.287 * var(--uc));margin-top:calc(-195.47 * var(--uc))} .csum-card{display:flex;flex-direction:column;gap:calc(19.612 * var(--uc)); padding:calc(30.702 * var(--uc));border-radius:calc(23.573 * var(--uc)); background:linear-gradient(90deg,rgba(0,0,0,.01),rgba(0,0,0,.01)), linear-gradient(158.7deg,rgba(252,252,252,.94) 5.4%,rgba(252,252,252,.85) 103.5%); -webkit-backdrop-filter:blur(calc(6.435 * var(--uc))); backdrop-filter:blur(calc(6.435 * var(--uc))); box-shadow:0 calc(2.74 * var(--uc)) calc(4.48 * var(--uc)) rgba(0,0,0,.02), 0 calc(12.06 * var(--uc)) calc(9.28 * var(--uc)) rgba(0,0,0,.03), 0 calc(29.6 * var(--uc)) calc(18.52 * var(--uc)) rgba(0,0,0,.04), 0 calc(57 * var(--uc)) calc(36.29 * var(--uc)) rgba(0,0,0,.04), 0 calc(95.91 * var(--uc)) calc(66.73 * var(--uc)) rgba(0,0,0,.05), 0 calc(147.98 * var(--uc)) calc(113.94 * var(--uc)) rgba(0,0,0,.07)} .csum-chead{display:flex;align-items:center;gap:calc(9.806 * var(--uc))} .csum-chead p{font-size:calc(19.612 * var(--uc));font-weight:500;color:#000;line-height:normal} .csum-ic-head{width:calc(29.596 * var(--uc));height:calc(29.596 * var(--uc));color:#000;display:block} .csum-div{height:0;border-top:1px solid rgba(0,0,0,.08)} .csum-line{height:calc(47.563 * var(--uc));display:flex;align-items:center} .csum-line p{font-size:calc(17.757 * var(--uc));font-weight:500;line-height:normal;color:#000;width:100%} .csum-line .dim{color:rgba(0,0,0,.4)} .csum-foot{display:flex;align-items:stretch;gap:calc(5.919 * var(--uc))} /* Le contour Figma est tracé à l'intérieur : la bordure CSS s'ajoutant au padding, on l'en déduit pour retomber sur la hauteur maquette (59.19 px). */ .csum-btn{display:flex;align-items:center;justify-content:center;gap:calc(8.879 * var(--uc)); padding:calc(14.797 * var(--uc)) calc(17.757 * var(--uc));border-radius:var(--radius-pill); border:calc(2.96 * var(--uc)) solid rgba(255,255,255,.05); font-size:calc(17.757 * var(--uc));font-weight:500;line-height:1;color:#fff} .csum-btn .csum-ic-btn{width:calc(23.677 * var(--uc));height:calc(23.677 * var(--uc));display:block} .csum-btn-blue{flex:1 1 0;background:var(--blue-500)} .csum-btn-dark{flex:0 0 auto;background:#373737} @media (max-width:640px){.csum{--uc:calc(var(--u) * 1.25)}} /* Sans backdrop-filter, le verre laisse lire la carte arrière : on rend le fond quasi opaque pour retrouver la superposition douce de la maquette. */ @supports not (backdrop-filter:blur(1px)){ .csum-card{background:linear-gradient(158.7deg,rgba(252,252,252,.99) 5.4%,rgba(250,250,250,.97) 103.5%)} } @media (prefers-reduced-motion:reduce){ .csum-wave.on span{animation:none} .csum-dots span{animation:none} } /* Mock surfaces */ .mock{border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-lg)} .mock-light{background:var(--blue-50);border:1px solid #e4eaf7} .mock-white{background:#fff;border:1px solid var(--blue-100)} .mock-dark{background:var(--ink-850);color:#fff} .mhead{display:flex;align-items:center;gap:11px;margin-bottom:14px} .mhead.between{justify-content:space-between} .mhead .mname{font-weight:600;font-size:14px} .mhead .msub{font-size:12px;color:var(--text-tertiary)} .mock-dark .mhead{margin-bottom:16px} .mock-dark .mhead .msub{color:rgba(255,255,255,.55)} .mock-light .chip.on-white{background:#fff} .mwave{height:52px;margin:8px 0 16px} .push{margin-left:auto} .mrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border-subtle); border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-sm);margin-bottom:10px} .mrow:last-child{margin-bottom:0} .mock-white .mrow{border-color:var(--gray-100);box-shadow:none;background:var(--gray-50)} .mock-dark .mrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);box-shadow:none} .mock-dark .mrow .t{color:#fff} .mock-dark .mrow .s{color:rgba(255,255,255,.5)} .mrow .ico{width:34px;height:34px;border-radius:9px;background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .mrow .ico .ic{width:18px;height:18px} .mrow .ico.tint-blue{background:rgba(47,103,255,.2);color:var(--blue-200)} .mrow .ico.tint-red{background:#FBE9E9;color:var(--danger)} .mock-dark .mrow .ico.tint-red{background:rgba(229,72,77,.2);color:#f2a3a5} .mrow .t{font-weight:600;font-size:13.5px} .mrow .s{font-size:12px;color:var(--text-tertiary)} .mrow .meta{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-tertiary)} .mrow .meta.acc{color:var(--blue-200)} .mrow .meta.warn{color:#f2a3a5} .mrow .meta.warn-strong{color:var(--danger)} .mini-agenda{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:4px 0 14px} .mini-agenda span{aspect-ratio:1;border-radius:7px;background:#fff;border:1px solid var(--border-subtle); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-tertiary)} .mini-agenda span.on{background:var(--blue-500);color:#fff;border-color:var(--blue-500)} .mini-agenda span.soft{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-100)} /* ========================================================= STATS — bande asymétrique, le « 0 » en vedette ========================================================= */ .stats{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end} .stat-hero .n{margin-top:26px;font-size:clamp(96px,11vw,148px);font-weight:700;letter-spacing:-.04em;line-height:.85;color:var(--blue-600)} .stat-hero .l{margin-top:12px;font-size:16px;font-weight:500;color:var(--text-secondary)} .stat-rest{display:flex;flex-direction:column} .srow{display:flex;align-items:baseline;gap:20px;padding:19px 0;border-top:1px solid var(--gray-200)} .srow:first-child{border-top:none;padding-top:0} .srow .n{font-size:clamp(28px,3vw,36px);font-weight:700;letter-spacing:-.02em;color:var(--blue-600);min-width:88px;text-align:right} .srow .l{font-size:15px;font-weight:500;color:var(--text-secondary);line-height:1.4} .sfoot{margin-top:4px;padding-top:18px;border-top:1px solid var(--gray-200);font-size:13px;color:var(--text-tertiary)} @media (max-width:820px){ .stats{grid-template-columns:1fr;gap:36px} .stat-hero .n{font-size:clamp(80px,18vw,120px)} .srow .n{min-width:70px} } /* Stats B — « 0 » géant centré, 3 stats calmes en rangée, collage flottant (refonte Lassie) */ .stats-b{display:block;position:relative;text-align:center;padding:12px 0 4px} .stats-b .stat-hero{max-width:720px;margin:0 auto;position:relative} .stats-b .stat-hero .n{margin-top:16px;font-size:clamp(120px,15vw,200px);line-height:.8} .stats-b .stat-hero .l{margin-top:14px} .stats-b .stat-rest{margin:46px auto 0;max-width:880px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .stats-b .srow{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border-top:none} .stats-b .srow .n{min-width:0;text-align:center} .stats-b .srow .l{text-align:center;max-width:240px} .stats-b .sfoot{border-top:none;margin-top:32px;padding-top:0;text-align:center} .stats-collage{position:absolute;inset:0;pointer-events:none} .stats-collage .collage-tile{position:absolute;margin:0} .stats-collage .collage-tile img{width:100%;height:100%} .stats-collage .ct1{left:1%;top:6%;width:150px;aspect-ratio:4/5} .stats-collage .ct2{right:1%;top:12%;width:138px;aspect-ratio:1} .stats-collage .toast{position:absolute;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600} .stats-collage .toast .ic{color:var(--blue-500)} .stats-collage .tct1{left:5%;top:56%} .stats-collage .tct2{right:4%;top:40%} @media (max-width:1020px){.stats-collage{display:none}} @media (max-width:820px){.stats-b .stat-rest{grid-template-columns:1fr;gap:20px}} /* ========================================================= INTEGRATIONS — rangées par catégorie ========================================================= */ /* Rangées posées dans un panneau blanc sur la section teintée (langage carte Lassie) */ /* ========================================================= COMPARISON TABLE ========================================================= */ /* Posé à même la page (PA, 26/08/2026) : plus de panneau blanc, de cadre ni d'ombre, le tableau partage le fond du site et se structure par filets. Seule la colonne Recept garde un fond blanc, en colonne-carte à coins arrondis (d'où border-collapse:separate : collapse ignore les rayons de cellule). */ .cmp{overflow-x:auto;-webkit-overflow-scrolling:touch} table.compare{width:100%;min-width:680px;border-collapse:separate;border-spacing:0;background:transparent} table.compare th,table.compare td{padding:16px 18px;text-align:left;font-size:14px;border-bottom:1px solid var(--gray-200)} table.compare thead th{font-weight:600;font-size:13px;color:var(--text-secondary);background:transparent;vertical-align:bottom} /* Colonne Recept : surélevée par le fond blanc et le cadre bleu clair — sans barre bleue en tête (PA, 07/09/2026) ni checks épars */ table.compare thead th.rc{background:#fff;color:var(--blue-700);border:1px solid var(--blue-100);border-bottom-color:var(--gray-200);border-radius:var(--radius-lg) var(--radius-lg) 0 0} table.compare td.rc{background:#fff;font-weight:600;color:var(--blue-800);border-left:1px solid var(--blue-100);border-right:1px solid var(--blue-100)} table.compare td.feat{font-weight:600;color:var(--text-primary)} table.compare tbody tr:last-child td{border-bottom:none} table.compare tbody tr:last-child td.rc{border-bottom:1px solid var(--blue-100);border-radius:0 0 var(--radius-lg) var(--radius-lg)} .cell-no{color:var(--text-tertiary)} .rc-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--blue-700);font-size:15px} .rc-head svg{width:20px;height:auto;color:var(--blue-500)} /* Mobile : la table pivote en cartes par critère */ /* Sélecteur segmenté « comparer avec » : n'existe que sous 640 px. La pastille glisse en transform (220 ms ease-out), les libellés changent d'encre — motif Bird/Notion (Mobbin). Les deux colonnes concurrentes restent dans le DOM, data-vs masque celle qui n'est pas choisie. */ .cmp-switch{display:none} @media (max-width:640px){ .cmp{overflow:visible} .cmp-switch{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin:0 0 14px; border-radius:var(--radius-pill);background:var(--gray-100)} .cmp-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--radius-pill); background:#fff;box-shadow:var(--shadow-sm);transform:translateX(calc(var(--i,0) * 100%));transition:transform 220ms var(--ease-out)} .cmp-switch label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px; border-radius:var(--radius-pill);font-size:13px;font-weight:600;color:var(--text-tertiary);cursor:pointer; transition:color 160ms ease;-webkit-tap-highlight-color:transparent} .cmp-switch label::before{content:"vs";font-weight:500;color:var(--gray-400)} .cmp-switch label:has(input:checked){color:var(--ink-900)} .cmp-switch label:has(input:checked)::before{color:var(--text-tertiary)} .cmp-switch label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px} .cmp-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .cmp[data-vs="ext"] .col-solo,.cmp[data-vs="solo"] .col-ext{display:none} table.compare{min-width:0;table-layout:fixed} table.compare th,table.compare td{padding:12px 10px;font-size:13px;line-height:1.35} table.compare thead th{font-size:12px} table.compare thead th:first-child{width:36%;color:var(--text-tertiary);font-weight:500} table.compare td.feat{font-size:13px;color:var(--text-secondary)} table.compare td.rc{font-size:13px} .rc-head svg{width:12px;height:12px} } @media (prefers-reduced-motion:reduce){.cmp-thumb{transition:none}} /* ========================================================= SECURITY — bande de réassurance compacte ========================================================= */ /* Tête centrée (PA, 26/08/2026), puis les trois points ; le lien Centre de confiance et sa ligne d'engagement viennent SOUS les trois points, desktop comme mobile (PA, 07/09/2026) */ .sec-trust{margin-top:44px;text-align:center} .sec-trust p{margin-top:8px;font-size:13px;color:var(--text-tertiary)} .sec-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--blue-600); transition:color var(--dur-fast) var(--ease-out)} .sec-link:hover{color:var(--blue-800)} .sec-link .ic{width:20px;height:20px} /* Contenu posé à même la page (PA, 26/08/2026) : plus de panneau blanc ni d'ombre, seuls les filets entre colonnes structurent la rangée */ /* Quatre points depuis l'ajout de la certification ISO 27001 (09/09/2026) : les colonnes se resserrent, passent à deux sous 1100 px, puis s'empilent. */ .sec-band{display:grid;grid-template-columns:repeat(4,1fr)} .sitem{padding:4px 24px;text-align:center} .sitem:first-child{padding-left:0} .sitem:last-child{padding-right:0} .sitem + .sitem{border-left:1px solid var(--gray-200)} .sitem .ic{width:22px;height:22px;color:var(--blue-500)} .sitem h3{font-size:16px;font-weight:600;margin:12px 0 7px} .sitem p{font-size:13.5px;color:var(--text-secondary);line-height:1.45} @media (max-width:1100px) and (min-width:821px){ .sec-band{grid-template-columns:1fr 1fr;row-gap:26px} .sitem:nth-child(odd){padding-left:0;border-left:none} .sitem:nth-child(even){padding-right:0} .sitem:nth-child(n+3){border-top:1px solid var(--gray-200);padding-top:26px} } @media (max-width:820px){ .sec-band{grid-template-columns:1fr;gap:22px} .sitem{padding:0} .sitem + .sitem{border-left:none;border-top:1px solid var(--gray-200);padding-top:22px} } /* ========================================================= TEAM (équipe Recept) ========================================================= */ .team-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch} .team-photo{border-radius:var(--radius-3xl);overflow:hidden;box-shadow:var(--shadow-lg);min-height:320px} .team-photo img{width:100%;height:100%;object-fit:cover} .team-people{display:flex;flex-direction:column;gap:14px} .leaders{display:flex;gap:12px} .leader{flex:1;text-align:center} .leader img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)} .leader .nm{font-weight:600;font-size:14px;margin-top:9px} .leader .rl{font-size:12px;color:var(--text-tertiary);line-height:1.25} /* Services : lignes à hairline, plus de tuiles grises (un seul langage dans la colonne) */ .svc{display:flex;gap:12px;align-items:flex-start;padding:16px 2px 2px;border-top:1px solid var(--gray-100)} .svc .ic{width:20px;height:20px;color:var(--blue-500);flex:0 0 auto;margin-top:1px} .svc b{font-size:14.5px;font-weight:600} .svc p{font-size:13px;color:var(--text-secondary);margin-top:3px;line-height:1.4} @media (max-width:860px){.team-grid{grid-template-columns:1fr}} /* Home (13/09/2026, PA) : photo resserrée à 880 px, engagements de service posés dessus en verre translucide (citation client retirée). .team-grid/.team-photo/ .leaders restent tels quels pour /demo, d'où .team-shot. - Deux blocs côte à côte en bas de la photo, sur les jambes et le parquet : leur haut reste loin des visages (têtes entre 19 et 49 % de la hauteur). Coins concentriques : rayon 36 moins marge 18 = 18. - Verre clair à 55 % : la photo se devine au travers, le texte sombre reste très lisible (contraste mesuré sur capture). - Jusqu'à 720 px, les blocs côte à côte n'ont plus la largeur de leurs titres et la photo est trop basse pour les empiler dessus sans masquer de visages. Le cadre se prolonge alors vers le bas dans une teinte accordée à l'image (#a38a70, brun taupe un peu plus clair que le parquet et que la moyenne de la photo #967f65, choisi sur capture le 14/09/2026), la photo s'y fond et les blocs chevauchent le bas de l'image et ce prolongement. - La photo apparaît d'abord, les blocs un temps après. */ .team-figure{position:relative;max-width:880px;margin:0 auto} .team-shot{position:relative;border-radius:var(--radius-3xl);overflow:hidden;background:#a38a70} .team-shot>img{width:100%;height:auto;display:block} .team-svcs{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;margin:0;padding:0;list-style:none; display:grid;grid-template-columns:1fr 1fr;gap:12px} .team-svcs .svc{border-top:0;padding:14px 18px 15px;gap:11px;border-radius:18px; background:rgba(255,255,255,.55);-webkit-backdrop-filter:saturate(170%) blur(22px);backdrop-filter:saturate(170%) blur(22px); border:1px solid rgba(255,255,255,.5);box-shadow:0 6px 24px rgba(0,0,0,.08)} .team-svcs .svc .ic{width:18px;height:18px} .team-svcs .svc b{display:block;font-size:14px;line-height:1.3;text-wrap:balance} .team-svcs .svc p{font-size:13px;margin-top:3px;line-height:1.4;color:#333;text-wrap:pretty} @supports not (backdrop-filter:blur(1px)){.team-svcs .svc{background:rgba(255,255,255,.88)}} /* Base de retard pour que les blocs se posent après la photo, même quand les deux entrent ensemble dans l'écran (spécificité au-dessus de la cascade générique). */ .team-figure .team-svcs.reveal.stagger.in>:first-child{transition-delay:200ms} .team-figure .team-svcs.reveal.stagger.in>:nth-child(2){transition-delay:290ms} .team-legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (max-width:720px){ .team-shot{border-radius:var(--radius-2xl);background:linear-gradient(#a38a70,#9d846a)} .team-shot>img{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)} .team-svcs{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;gap:8px;margin:-58px 10px 10px} .team-svcs .svc{padding:12px 14px 13px} } /* Annotations manuscrites (TeamAnnotations) : calque SVG sur la photo, unités = viewBox 1500×1000 donc tout suit la largeur de la photo. Encre bleue à halo blanc (paint-order) pour rester lisible sur le mur clair comme sur les vêtements sombres. Les tracés sont normalisés par pathLength=1 : un seul jeu de keyframes dessine les flèches ; l'opacité part de 0 pour éviter le point rond du cap au dashoffset initial. */ .tnotes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} .tnotes path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0} .tnotes .tn-halo{stroke:#fff;stroke-width:11} .tnotes .tn-ink{stroke:var(--blue-500);stroke-width:4.5} .tnotes text{font-family:"Caveat",cursive;fill:var(--blue-500);paint-order:stroke;stroke:#fff;stroke-width:7;stroke-linejoin:round;opacity:0;transform-box:fill-box} .tnotes .tn-name{font-size:46px;font-weight:700;letter-spacing:.01em} .tnotes .tn-role{font-size:30px;font-weight:500} @keyframes ta-draw{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}100%{stroke-dashoffset:0;opacity:1}} @keyframes ta-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tnotes.on path{animation:ta-draw .6s var(--ease-out) var(--d) forwards} .tnotes.on .tn-head{animation-duration:.22s;animation-delay:calc(var(--d) + .5s)} .tnotes.on text{animation:ta-pop .4s var(--ease-out) calc(var(--d) + .55s) forwards} @media (prefers-reduced-motion:reduce){ .tnotes path,.tnotes text{animation:none!important;opacity:1;stroke-dashoffset:0;transform:none} } /* Mobile (PA, 07/09/2026 : « il faut que cela fonctionne sur mobile ») : la photo fait ~340 px de large, la géométrie desktop y serait illisible (Caveat 46 unités = 10 px). Le composant rend deux jeux d'annotations, .tn-d et .tn-m ; sous 640 px on affiche le jeu mobile — plus grand, plus épais, libellés reposés dans les coins de la photo. La légende reste sr-only : le SVG est décoratif, la source des noms ne change pas. */ .tnotes .tn-m{display:none} @media (max-width:640px){ .tnotes .tn-d{display:none} .tnotes .tn-m{display:inline} .tnotes .tn-m .tn-halo{stroke-width:24} .tnotes .tn-m .tn-ink{stroke-width:10} .tnotes .tn-m text{stroke-width:14} .tnotes .tn-m .tn-name{font-size:96px} .tnotes .tn-m .tn-role{font-size:60px} } /* ========================================================= TESTIMONIALS — 3 citations éditoriales, sans cartes ni étoiles ========================================================= */ /* Citations en cartes blanches sur la section teintée (langage carte Lassie) */ .tlist{display:flex;flex-direction:column;gap:14px} .trow{display:grid;grid-template-columns:1fr 250px;gap:48px;align-items:center;padding:26px 30px; background:#fff;border:1px solid rgba(27,27,27,.04);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)} .trow:first-child{padding-top:26px} .trow .qt{font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.55;font-weight:500;color:var(--text-primary);max-width:680px} .trow .who{display:flex;align-items:center;gap:13px} .trow .who .pic{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--gray-100);flex:0 0 auto} .trow .who .pic-high{object-position:center 20%} .trow .who .nm{font-weight:600;font-size:14.5px} .trow .who .rl{font-size:12.5px;color:var(--text-tertiary);line-height:1.3} @media (max-width:760px){ .trow{grid-template-columns:1fr;gap:16px;padding:24px 0} } /* ---- Video testimonial spotlight ---- */ .vspot{display:grid;grid-template-columns:328px 1fr;gap:40px;align-items:center; background:var(--sky-gradient);border:none;border-radius:var(--radius-3xl); padding:34px;margin-bottom:34px} .vspot-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg); aspect-ratio:4/5;background:var(--ink-850)} .vspot-media video{width:100%;height:100%;object-fit:cover;display:block} .vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.34));border:none;cursor:pointer; transition:opacity var(--dur-base) var(--ease-out)} .vplay .pbtn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg); transition:transform var(--dur-base) var(--ease-out)} .vplay:hover .pbtn{transform:scale(1.06)} .vplay .pbtn .ic{width:26px;height:26px;color:var(--blue-500);margin-left:3px} .vplay .vtag{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px); color:#fff;font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--radius-pill)} .vplay.hide{opacity:0;pointer-events:none} .vspot-body{min-width:0} .vstat{display:flex;align-items:center;gap:15px;margin:14px 0 18px} .vstat .n{font-size:clamp(46px,6vw,66px);font-weight:700;letter-spacing:-.03em;line-height:.85;color:var(--blue-600);font-variant-numeric:tabular-nums} .vstat .lb{font-size:15px;font-weight:600;line-height:1.2;color:var(--text-secondary)} .vquote{font-size:clamp(17px,1.9vw,21px);line-height:1.5;font-weight:500;color:var(--text-primary);letter-spacing:-.01em} .vwho{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px} .vwho .nm{font-weight:600;font-size:16px} .vwho .rl{font-size:13.5px;color:var(--text-tertiary)} .igbadge{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--radius-pill); background:#fff;box-shadow:var(--shadow-sm);font-weight:600;font-size:14px;color:var(--ink-900); transition:box-shadow var(--dur-base) var(--ease-out)} .igbadge:hover{box-shadow:var(--shadow-md)} .igbadge svg{width:18px;height:18px;color:var(--ink-900);flex:0 0 auto} .igbadge .foll{color:var(--text-tertiary);font-weight:500} @media (max-width:760px){ .vspot{grid-template-columns:1fr;gap:22px;padding:20px} .vspot-media{max-width:290px;margin:0 auto} } /* ---- Témoignages : carrousel de cartes portrait (vidéo / photo / audio) ---- Référence Headspace « Designed by experts » (Mobbin). Piste pleine largeur, première carte alignée sur le wrap, dérive continue (JS, pointeur fin seulement), survol = citation sur portrait flouté, clic = lightbox (morph). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .tc{position:relative;width:100%;--tc-w:clamp(260px,21vw,320px);--tc-gap:16px;--tc-r:20px; --tc-edge:calc(max((100% - var(--wrap)) / 2, 0px) + var(--gutter))} .tc-track{display:flex;width:100%;scroll-behavior:auto;scroll-snap-type:none;padding-block:12px 10px; padding-inline:var(--tc-edge);scroll-padding-inline:var(--tc-edge)} .tc-slide{flex:0 0 var(--tc-w);width:var(--tc-w);margin-right:var(--tc-gap);scroll-snap-align:start} /* Les doublons n'existent que pour la boucle du core : cachés tant qu'il n'a pas posé has-repeat. */ .tc-track:not([has-repeat="true"]) .tc-slide[data-dup]{display:none} .tc-card{position:relative;aspect-ratio:3/4;border-radius:var(--tc-r);overflow:hidden;background:var(--blue-50); isolation:isolate;transition:scale var(--dur-fast) var(--ease-out)} .tc-card:active{scale:.985} .tc-media{position:absolute;inset:0} .tc-media img,.tc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tc-media img{transition:filter 320ms var(--ease-out),scale 320ms var(--ease-out)} /* Survol souris, ou focus CLAVIER (focus-visible) : le focus rendu à la carte après fermeture de la lightbox à la souris n'est pas « visible » et ne fige donc pas la carte en état survolé. */ .tc-card:hover .tc-media img.blur,.tc-card:has(.tc-hit:focus-visible) .tc-media img.blur{filter:blur(16px) saturate(.85);scale:1.06} /* Scrim de lisibilité vers le bas + identité centrée : nom en blanc, statut plus petit et grisé. */ .tc-grad{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.66) 100%)} .tc-who{position:absolute;z-index:2;left:14px;right:14px;bottom:18px;text-align:center;color:#fff;pointer-events:none} .tc-who .nm{display:block;font-size:16.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-who .rl{display:block;font-size:12.5px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.72);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-over{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:16px 16px 78px;color:#fff; background:rgba(27,27,27,.4);opacity:0;transition:opacity var(--dur-base) var(--ease-out);pointer-events:none} .tc-card:hover .tc-over,.tc-card:has(.tc-hit:focus-visible) .tc-over{opacity:1} .tc-over .qt{margin:0;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:-.005em;text-wrap:pretty} .tc-over .row{display:flex;flex-direction:column;gap:4px} .tc-over .org{font-size:12px;font-weight:500;color:rgba(255,255,255,.78)} .tc-over .hint{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600} .tc-over .hint .dur{font-weight:500;color:rgba(255,255,255,.78)} .tc-over .hint .ic{width:14px;height:14px} .tc-over.v{justify-content:center;align-items:center;gap:10px;padding:16px;background:rgba(27,27,27,.3)} .tc-over.v .pb{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--blue-500); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)} .tc-over.v .pb .ic{width:24px;height:24px} .tc-hit{position:absolute;inset:0;z-index:3;appearance:none;background:none;border:0;margin:0;padding:0;cursor:pointer;border-radius:inherit;color:transparent} .tc-hit:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;border-radius:var(--tc-r)} /* Pas de flèches (arbitrage PA) : dérive continue, drag/molette au pointeur, swipe au tactile. */ @media (hover:none){.tc-track{scroll-snap-type:x mandatory}} /* Mobile : ~1,6 carte à l'écran (PA, 03/09/2026 : plus de cartes visibles) */ @media (max-width:720px){.tc{--tc-w:58vw;--tc-gap:12px;--tc-r:16px}.tc-who{left:10px;right:10px;bottom:14px}.tc-who .nm{font-size:15px}.tc-who .rl{font-size:12px}} /* Lightbox : la carte grandit (morph transform) dans une boîte blanche, panneau texte à côté. */ html.tc-lock{overflow:hidden} .tc-lb{position:fixed;inset:0;z-index:1200} .tc-lb-bg{position:absolute;inset:0;background:rgba(27,27,27,.56);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .tc-lb-box{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;max-width:calc(100vw - 32px);max-height:calc(100vh - 24px); display:flex;gap:22px;padding:14px;border-radius:28px;--lb-h:min(74vh,700px)} .tc-lb-paper{position:absolute;inset:0;z-index:0;background:#fff;border-radius:inherit;box-shadow:var(--shadow-lg)} .tc-lb-media{position:relative;z-index:1;flex:0 0 auto;width:calc(var(--lb-h) * 3 / 4);height:var(--lb-h);border-radius:20px;overflow:hidden; background:var(--blue-50);transform-origin:0 0;will-change:transform} .tc-lb-media img,.tc-lb-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .tc-lb-media video{background:var(--blue-50)} /* Film tourné en 16:9 (Henri Faucher-Looten, Clinique Noémie de Rothschild) : la carte reste un recadrage portrait, la lightbox passe en paysage. Largeur bornée par le viewport moins le panneau (340) et les marges/gouttières de la boîte (32 + 28 + 22), par la hauteur de référence, et à 1120. */ .tc-lb-box.wide{--lb-w:min(calc(100vw - 422px),calc(var(--lb-h) * 16 / 9),1120px)} .tc-lb-box.wide .tc-lb-media{width:var(--lb-w);height:calc(var(--lb-w) * 9 / 16)} .tc-lb-panel{position:relative;z-index:1;width:340px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:12px 44px 12px 4px} .tc-lb-panel .nm{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.15} .tc-lb-panel .rl{font-size:13.5px;color:var(--text-tertiary);margin-top:4px} .tc-lb-panel .qt{margin:0;font-size:16.5px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--text-primary);text-wrap:pretty} .tc-lb-panel .igbadge{align-self:flex-start;background:var(--surface-page);box-shadow:none} .tc-lb-panel .igbadge:hover{background:var(--blue-50)} .tc-lb-close{position:absolute;z-index:2;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-page);color:var(--ink-900); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-base) var(--ease-out),scale var(--dur-fast) var(--ease-out)} .tc-lb-close:hover{background:var(--blue-50)} .tc-lb-close:active{scale:.94} .tc-lb-close svg{width:18px;height:18px} .tc-stat{display:flex;align-items:center;gap:12px} .tc-stat .n{font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--blue-600);font-variant-numeric:tabular-nums} .tc-stat .lb{font-size:13px;font-weight:600;line-height:1.25;color:var(--text-secondary);max-width:180px} .tc-audio{display:flex;flex-direction:column;gap:10px} .tc-play{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:42px;padding:0 18px 0 14px;border:0;border-radius:var(--radius-pill); background:var(--blue-500);color:#fff;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-brand); transition:background var(--dur-base) var(--ease-out),scale var(--dur-fast) var(--ease-out)} .tc-play:hover{background:var(--blue-600)} .tc-play:active{scale:.97} .tc-play .ic{width:16px;height:16px} .tc-bar{height:4px;border-radius:2px;background:var(--blue-100);overflow:hidden} .tc-bar i{display:block;height:100%;width:100%;background:var(--blue-500);transform-origin:0 50%;transform:scaleX(0)} .tc-time{font-size:12.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums} @media (max-width:760px){ .tc-lb-box{flex-direction:column;gap:12px;padding:10px;border-radius:22px;overflow:auto;--lb-h:min(52vh,440px)} .tc-lb-media{width:min(calc(100vw - 52px),calc(var(--lb-h) * 3 / 4));height:auto;aspect-ratio:3/4} .tc-lb-panel{width:min(calc(100vw - 52px),calc(var(--lb-h) * 3 / 4));padding:6px 6px 10px;gap:12px} .tc-lb-box.wide .tc-lb-media{width:calc(100vw - 52px);height:auto;aspect-ratio:16/9} .tc-lb-box.wide .tc-lb-panel{width:calc(100vw - 52px)} .tc-lb-panel .qt{font-size:15px} .tc-lb-close{top:18px;right:18px} } @media (prefers-reduced-motion:reduce){ .tc-card,.tc-media img,.tc-over,.tc-lb-close,.tc-play{transition:none} .tc-card:hover .tc-media img.blur,.tc-card:has(.tc-hit:focus-visible) .tc-media img.blur{scale:1} } /* ========================================================= PLATFORM JOURNEY — timeline claire reliée ========================================================= */ /* « How it works » Lassie : 3 panneaux teintés à vignette blanche, la séquence est portée par les capsules Avant/Pendant/Après (connecteur abandonné) */ .tst{display:inline-flex;padding:4px 11px;border-radius:var(--radius-pill);background:var(--blue-50); color:var(--blue-700);font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase} /* ========================================================= PRICING (sur devis) ========================================================= */ .price-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center} .price-value ul{margin-top:22px;display:flex;flex-direction:column;gap:14px} .price-value li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:500} .price-value li .ic{width:21px;height:21px;color:var(--blue-500);flex:0 0 auto;margin-top:1px} /* Carte devis alignée à gauche, comme la colonne d'en face — panneau blanc sur teinte */ .price-card{text-align:left;padding:38px 36px;border:none;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg)} .price-card .chip{margin-bottom:18px} .price-card .big{font-size:30px;font-weight:600;letter-spacing:-.01em} .price-card p{margin:12px 0 26px;max-width:340px;font-size:14.5px;color:var(--text-secondary);line-height:1.45} .price-card .rea{margin-top:14px;font-size:12.5px;color:var(--text-tertiary)} @media (max-width:820px){.price-wrap{grid-template-columns:1fr;gap:26px}} /* ========================================================= FAQ ========================================================= */ /* Accordéons en cartes blanches sur la section teintée (langage Lassie) */ .faq{max-width:780px;margin:0 auto} .faq details{background:#fff;border:1px solid rgba(27,27,27,.05);border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);margin-bottom:12px} .faq details:last-child{margin-bottom:0} .faq summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px; font-weight:600;font-size:17px;color:var(--ink-900);transition:color var(--dur-fast) var(--ease-out)} .faq summary:hover{color:var(--blue-600)} .faq summary::-webkit-details-marker{display:none} .faq summary .ic{width:22px;height:22px;color:var(--blue-500);transition:transform var(--dur-base) var(--ease-out);flex:0 0 auto} .faq details[open] summary .ic{transform:rotate(180deg)} .faq .ans{padding:0 22px 22px;font-size:15px;line-height:1.55;color:var(--text-secondary);max-width:660px} /* ========================================================= FINAL CTA (dark stage) ========================================================= */ /* Panneau noir bleuté, nappes de lumière bleues animées en WebGL dans la moitié gauche (StageGradient, 03/09) ; le fond CSS en reprend le principe (halo statique à gauche) et sert de secours sans WebGL — et avant la première frame : le canvas ne s'allume qu'une fois dessiné, aucun flash. Conteneur de requête pour le logo 3D (cqw). */ .stage{background:radial-gradient(70% 90% at 14% 70%,#0E2470 0%,rgba(14,36,112,0) 70%),#0A0C14; color:#fff;border-radius:var(--radius-3xl);padding:64px 40px;text-align:center;position:relative;overflow:hidden; container-type:inline-size} .stage .mark-bg{position:absolute;right:-60px;bottom:-80px;width:340px;color:rgba(47,103,255,.16);pointer-events:none} .stage-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none; opacity:0;transition:opacity 600ms ease-out} .stage-gl.is-on{opacity:1} /* Le logo 3D reprend l'ancrage de l'astérisque bleu (coin bas-droit, qui déborde) : sous le bout fondu de la waveform, jamais sous le titre ni les boutons */ .stage-logo{position:absolute;right:-3cqw;bottom:-7cqw;width:clamp(220px,30cqw,340px);height:auto;pointer-events:none; filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))} @media (max-width:720px){ /* Mobile : le logo passe dans le flux, au-dessus du titre (plus de place à droite) */ .stage-logo{position:static;display:block;width:112px;margin:0 auto 20px;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5))} } .stage h2{color:#fff;position:relative} .stage .lead{color:rgba(255,255,255,.72);margin:18px auto 0;max-width:520px;position:relative} .stage .hero-cta{justify-content:center;position:relative} /* La waveform du CTA répond à celle du hero : large (120 barres, 720 px), sous les deux boutons, et se perd dans le noir aux deux bouts : le masque monte de 0 au centre sur toute la demi-largeur, seul le milieu est à pleine opacité. Les barres ne rétrécissent pas : quand le panneau est plus étroit (mobile), la wave déborde centrée et le masque, calé sur la boîte, fond ce qui reste visible. */ .stage .wave{justify-content:center;margin:34px auto 0;max-width:720px;position:relative;opacity:.9;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent); mask-image:linear-gradient(90deg,transparent,#000 50%,transparent)} .stage .wave span{flex:0 0 3px} /* Même boucle que les autres waves, un peu plus ample (.35 → 1.45 au lieu de .5 → 1.25) ; avec data-chaos, chaque barre apporte ses bornes --lo/--hi, sa durée et son départ */ .stage .wave.on span{animation-name:wave-stage} @keyframes wave-stage{0%,100%{transform:scaleY(var(--lo,.35))}50%{transform:scaleY(var(--hi,1.45))}} /* Sur fond sombre, l'emphase vient du contraste : pas de halo bleu sous le CTA (craft R2) */ .stage .btn-primary{box-shadow:none} .stage .btn-primary:hover{box-shadow:none;background:var(--blue-600)} /* ========================================================= FOOTER — bande ciel à coins supérieurs arrondis, texte encre, wordmark géant tronqué (refonte Lassie) ========================================================= */ .footer{--wrap:960px;background:linear-gradient(180deg,var(--surface-page) 0%,var(--blue-50) 35%,var(--blue-100) 75%,var(--blue-200) 100%); color:var(--ink-900);padding:64px 0 180px;margin-top:0;position:relative;overflow:hidden} /* Hauteur de la scène sous le contenu : 180 px en dessous du repli de la grille (validé par PA le 04/09 depuis la page d'essai, vue « Mobile 390 »), 430 px sur desktop (validé le 03/09). */ @media (min-width:821px){.footer{padding-bottom:430px}} /* Contenu recondensé au centre (--wrap 960 au lieu de 1160) : la scène remonte de part et d'autre, en dégradé (SIDE_RISE_PX dans le composant) — demande PA du 03/09. */ /* Plus de bande à coins arrondis ni de marge : le footer part de la couleur de page et descend en dégradé vers le bleu — aucune coupure page/footer (retour PA, 03/09). */ /* Scène en fond (FooterScene, WebGL) : l'accueil parisien passé dans la rampe bleue et une trame pointillée. La bande ciel CSS reste le premier rendu et le secours. Le padding-bottom réserve la zone où la scène est pleinement visible ; au-dessus, elle fond dans la bande ciel sur ses premiers pixels (FADE_PX dans le composant). Essai du 03/09, wordmark masqué. */ .footer > .wrap{position:relative} .foot-scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none; opacity:0;transition:opacity 600ms ease-out} .foot-scene.is-on{opacity:1} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} .footer .wordmark{color:var(--ink-900)} .footer .tagline{margin-top:16px;font-size:14px;color:var(--text-secondary);max-width:280px;line-height:1.5} .foot-social{display:flex;gap:10px;margin-top:20px} .foot-social a{width:38px;height:38px;border-radius:10px;background:#fff;box-shadow:var(--shadow-xs); display:flex;align-items:center;justify-content:center;transition:background var(--dur-base)} .foot-social a:hover{background:var(--blue-500)} .foot-social .ic{width:19px;height:19px;color:var(--blue-600)} .foot-social a:hover .ic{color:#fff} .fcol h5{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:16px} .fcol a{display:block;padding:6px 0;font-size:14px;color:var(--text-secondary);transition:color var(--dur-fast)} .fcol a:hover{color:var(--ink-900)} .foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(27,27,27,.12); display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between} .foot-bottom p{font-size:12.5px;color:var(--text-tertiary);letter-spacing:.01em} .foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px} .foot-legal a{font-size:12.5px;color:var(--text-secondary)} .foot-legal a:hover{color:var(--ink-900)} /* Le SVG fait 449×100, ligne de pied des capitales à 75 : la bande montre les 80 premières unités (aspect-ratio) — coupe « un peu en dessous du A » (PA, 26/08), seule la descendante du « p » est tronquée. Largeur = contenu du wrap (1112 px), alignée sur le reste du site. */ .foot-wordmark{margin:40px auto 0;width:calc(100% - 2 * var(--gutter));max-width:calc(var(--wrap) - 2 * var(--gutter)); aspect-ratio:449/80;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none} .foot-wordmark img{width:100%;height:auto;display:block} @media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot-grid{grid-template-columns:1fr}} /* ========================================================= MOTION — entrée du hero, reveals, cascades ========================================================= */ /* Hero : entrée orchestrée en 3 temps, une fois au chargement (CSS = hors main thread) */ @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* `backwards` et non `both` : l'état final de `rise` est l'état naturel, et un remplissage `forwards` laisserait une animation d'opacité active sur .hero-cta, que Chrome traite comme racine de backdrop — le bouton verre ne verrait plus la vidéo derrière lui (constaté le 03/09/2026). */ .hero-copy>*{animation:rise 450ms var(--ease-out) backwards} .hero-copy h1{animation-delay:40ms} .hero-copy .lead{animation-delay:110ms} .hero-copy .hero-cta{animation-delay:180ms} .hero-visual{animation:rise 500ms var(--ease-out) 240ms both} .hero-proof{animation:rise 450ms var(--ease-out) 340ms both} .trust{animation:rise 450ms var(--ease-out) 400ms both} /* Hero B : les cartes flottantes héritent du temps 3 de l'entrée (l'image, LCP, ne s'anime jamais) */ .hero-b .callcard,.hero-b .floatchip{animation:rise 500ms var(--ease-out) 320ms both} /* Reveal : entrée au défilement, une seule fois (observateur dans SiteScripts). Course portée de 12 à 16px et durée de 400 à 460ms (PA, 14/08/2026) : sur une courbe aussi expo, 12px se consomment en ~150ms — l'entrée existait dans le code mais ne se lisait pas à vitesse de scroll normale. */ .reveal{opacity:0;transform:translateY(16px);transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-out)} .reveal.in{opacity:1;transform:none} /* Cascade des items de vignette quand elle entre dans le viewport (une fois) */ .reveal .mock .mrow{opacity:0;transform:translateY(8px)} .reveal.in .mock .mrow{opacity:1;transform:none; transition:opacity 300ms var(--ease-out) 140ms,transform 300ms var(--ease-out) 140ms} .reveal.in .mock .mrow+.mrow{transition-delay:210ms} .reveal.in .mock .mrow+.mrow+.mrow{transition-delay:280ms} /* Cascade générique (PA, 14/08/2026) — jusqu'ici seuls les blocs d'illustration entraient au défilement, les textes de section arrivaient d'un bloc. `.stagger` fait monter les enfants directs l'un après l'autre. Le retard est porté par l'ENFANT, en CSS : le même observateur `.reveal:not(.in)` continue de tout ramasser, aucun JS n'est ajouté et aucun composant client n'est créé (contrat d'hydratation intact). Le parent, lui, est neutralisé : sinon son propre déplacement s'ajouterait à celui de ses enfants et la cascade se lirait comme un flou. La règle est en (0,2,0), elle passe devant `.reveal` quel que soit l'ordre du fichier. Le pas se règle d'un seul endroit, par --stg hérité du parent. */ .reveal.stagger{--stg:70ms;opacity:1;transform:none;transition:none} .reveal.stagger>*{opacity:0;transform:translateY(16px); transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-out)} .reveal.stagger.in>*{opacity:1;transform:none} .reveal.stagger.in>*:nth-child(2){transition-delay:calc(1 * var(--stg))} .reveal.stagger.in>*:nth-child(3){transition-delay:calc(2 * var(--stg))} .reveal.stagger.in>*:nth-child(4){transition-delay:calc(3 * var(--stg))} .reveal.stagger.in>*:nth-child(5){transition-delay:calc(4 * var(--stg))} /* Au-delà de 5, on plafonne : une file de 9 items mettrait 630ms à démarrer, le lecteur aurait déjà scrollé. */ .reveal.stagger.in>*:nth-child(n+6){transition-delay:calc(5 * var(--stg))} /* Parcours patient : ici la cascade EST le propos — avant, pendant, après. Le pas est plus large parce qu'il porte du sens, pas de la décoration. */ /* Équipe : la photo d'abord, la colonne humaine ensuite. */ .team-grid.reveal.stagger{--stg:90ms} /* Bloc isolé décalé d'un temps sur la cascade de sa colonne voisine : la carte « Sur devis » ne se pose pas en même temps que le titre. 150ms la place au milieu de la cascade des arguments, pas après — volontaire, faire attendre le lecteur devant un CTA serait le pire endroit où gagner de l'élégance. */ .reveal.late.in{transition-delay:150ms} /* Waveform de la carte d'appel du hero : idle calme par défaut, pleine amplitude en conversation */ @keyframes wave-idle{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(.8)}} .callcard .wave.on span{animation-name:wave-idle;animation-duration:1.6s} .callcard .wave.on.live span{animation-name:wave;animation-duration:1.1s} .callcard .av{transition:background-color var(--dur-base) var(--ease-out)} .callcard .av.ok{background:var(--success)} /* Nav : section courante à l'encre */ .nav-links a[aria-current="true"]{color:var(--ink-900)} /* Sans JavaScript, la classe `.in` n'arrive jamais. Tant que seules des vignettes étaient masquées c'était tolérable ; depuis que des TITRES passent derrière opacity:0, il faut une sortie de secours purement CSS. Placé ici, après toutes les déclarations de reveal, pour gagner à spécificité égale. */ @media (scripting:none){ .reveal,.reveal.stagger>*{opacity:1;transform:none;transition:none} .tnotes path,.tnotes text{opacity:1;stroke-dashoffset:0;transform:none} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .reveal .mock .mrow{opacity:1;transform:none;transition:none} /* Cascades : tout est visible d'emblée. `transition:none` coupe la propriété, les transition-delay posés plus haut deviennent sans objet. */ .reveal.stagger>*{opacity:1;transform:none;transition:none} .hero-copy>*,.hero-visual,.hero-proof,.trust,.hero-b .callcard,.hero-b .floatchip{animation:none} } /* ========================================================= LEGACY /demo — grilles de l'ancienne home encore utilisées par la page démo ; à retraiter lors de sa propre passe. ========================================================= */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat{padding:26px 24px} .stat .n{font-size:clamp(30px,3.6vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--blue-600);font-variant-numeric:tabular-nums} .stat .l{margin-top:10px;font-size:14px;font-weight:500;color:var(--text-secondary);line-height:1.35} .stat .ic{width:22px;height:22px;color:var(--blue-500);margin-bottom:14px} @media (max-width:860px){.stat-grid{grid-template-columns:1fr 1fr}} @media (max-width:460px){.stat-grid{grid-template-columns:1fr}} .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tcard{display:flex;flex-direction:column;height:100%} .tcard .qt{font-size:15px;line-height:1.5;font-weight:500;color:var(--text-primary);flex:1} .tcard .who{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--gray-100)} .tcard .who .pic{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--gray-100);flex:0 0 auto} .tcard .who .nm{font-weight:600;font-size:14px} .tcard .who .rl{font-size:12.5px;color:var(--text-tertiary);line-height:1.25} @media (max-width:900px){.tgrid{grid-template-columns:1fr 1fr}} @media (max-width:600px){.tgrid{grid-template-columns:1fr}} /* ========================================================= DEMO PAGE ========================================================= */ .demo-hero{padding:40px 0 60px;background:linear-gradient(180deg,#fff, #F6F8FE)} .demo-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start} .demo-left .lead{margin-top:16px;max-width:520px} .see-list{margin:26px 0 0;display:flex;flex-direction:column;gap:13px} .see-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:500} .see-list li .ic{width:22px;height:22px;color:var(--blue-500);flex:0 0 auto;margin-top:1px} .reassure{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:24px} .reassure span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-secondary)} .reassure .ic{width:16px;height:16px;color:var(--blue-500)} .avatars{display:flex;align-items:center} .avatars img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid #fff;margin-left:-12px;box-shadow:var(--shadow-sm);background:var(--gray-100)} .avatars img:first-child{margin-left:0} .sp-row{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap} .sp-row .stars{height:16px;width:auto} .sp-row .txt{font-size:13.5px;font-weight:600;color:var(--text-secondary);line-height:1.3} .sp-row .txt b{color:var(--ink-900);font-weight:700} .meet-team{display:flex;align-items:center;gap:14px;margin-top:24px;padding:14px 18px;background:var(--blue-50);border-radius:16px} .meet-team .avatars img{border-color:#fff;width:44px;height:44px} .meet-team p{font-size:14px;font-weight:600;color:var(--blue-800)} .meet-team p span{display:block;font-weight:500;color:var(--text-secondary);font-size:12.5px;margin-top:2px} .booking-card{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;position:sticky;top:88px} .booking-head{display:flex;align-items:center;gap:13px;padding:18px 22px;border-bottom:1px solid var(--gray-100)} .booking-head .itile{width:42px;height:42px} .booking-head h2{font-size:17px;font-weight:600;line-height:1.1} .booking-head p{font-size:12.5px;color:var(--text-tertiary);margin-top:2px} .booking-body{padding:8px 10px 12px} .meetings-iframe-container{min-height:640px} .meetings-iframe-container iframe{width:100%!important;min-height:640px;border:0} .demo-nav-cta{display:flex;align-items:center;gap:10px} @media (max-width:560px){.demo-nav-cta .btn-ghost{display:none}} @media (max-width:920px){ .demo-grid{grid-template-columns:1fr;gap:30px} .demo-left{max-width:640px} .booking-card{position:static} } /* Divider label */ .kicker{display:block;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:12px} /* --------------------------------------------------------- Vignette « Agenda » (maquette Figma Product 11361:6739) Même système que .csum : frame 753×641, cotes en px maquette exprimées via --u. Les trois colonnes-jours font 1027 px maquette : centrées, elles débordent du cadre qui les rogne des deux côtés, comme dans le Figma. --------------------------------------------------------- */ .fmock.fmock-agenda{padding:0;background:var(--surface-mock);overflow:hidden;position:relative; container-type:inline-size;isolation:isolate;display:block} /* Cadre virtuel élargi (860 au lieu des 753 de la maquette) : le contenu est dézoomé d'autant, les colonnes latérales sont moins rognées. */ .agd{position:absolute;inset:0;--u:calc(100cqw / 860); display:flex;justify-content:center} .agd-col{flex:0 0 auto;width:calc(341 * var(--u)); padding:calc(24 * var(--u)) calc(16 * var(--u)); display:flex;flex-direction:column;gap:calc(48 * var(--u))} /* Séparateur de la maquette : deux filets accolés clair/foncé. Recalés sur le nouveau fond #F5F5F5 pour garder le même poids optique qu'auparavant (le filet clair se confondait avec l'ancien #EAEAEA, plus maintenant). */ .agd-sep{flex:0 0 auto;width:calc(2 * var(--u)); background:linear-gradient(90deg,#FCFCFC 0 50%,#DEDEDE 50% 100%)} .agd-day{display:flex;align-items:center;gap:calc(10 * var(--u))} .agd-day-name{flex:1 1 0;min-width:1px;font-size:calc(24 * var(--u));font-weight:500; color:var(--blue-500);line-height:normal} .agd-day-pill{flex:0 0 auto;background:var(--blue-100);color:var(--blue-500); font-size:calc(12 * var(--u));font-weight:500;line-height:1; padding:calc(7.76 * var(--u)) calc(13.72 * var(--u));border-radius:var(--radius-pill)} .agd-list{position:relative;display:flex;flex-direction:column;gap:calc(10 * var(--u))} /* Verre de la maquette sans backdrop-filter : sur le fond uni #EAEAEA le flou est invisible à l'œil, autant épargner le compositing (11 cartes). */ .agd-card{width:calc(309 * var(--u));display:flex;flex-direction:column;gap:calc(10 * var(--u)); padding:calc(16 * var(--u));border-radius:calc(14 * var(--u)); background:linear-gradient(90deg,rgba(0,0,0,.01),rgba(0,0,0,.01)), linear-gradient(170.5deg,rgba(252,252,252,.94) 5.4%,rgba(252,252,252,.85) 103.5%); box-shadow:0 calc(2.74 * var(--u)) calc(4.48 * var(--u)) rgba(0,0,0,.02), 0 calc(12.06 * var(--u)) calc(9.28 * var(--u)) rgba(0,0,0,.03), 0 calc(29.6 * var(--u)) calc(18.52 * var(--u)) rgba(0,0,0,.04), 0 calc(57 * var(--u)) calc(36.29 * var(--u)) rgba(0,0,0,.04), 0 calc(95.91 * var(--u)) calc(66.73 * var(--u)) rgba(0,0,0,.05), 0 calc(147.98 * var(--u)) calc(113.94 * var(--u)) rgba(0,0,0,.07)} .agd-chead{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--u))} .agd-who{display:flex;align-items:center;gap:calc(8 * var(--u));min-width:0} .agd-ic-user{flex:0 0 auto;width:calc(16 * var(--u));height:calc(16 * var(--u));color:#000;display:block} .agd-name{font-size:calc(16 * var(--u));font-weight:500;color:#000;line-height:normal;white-space:nowrap} .agd-status{display:inline-flex;align-items:center;gap:calc(3 * var(--u)); font-size:calc(12 * var(--u));font-weight:400;line-height:normal;white-space:nowrap} .agd-status .agd-ic-st{flex:0 0 auto;width:calc(12 * var(--u));height:calc(12 * var(--u));fill:currentColor} .agd-status.ok{color:#48BD4E} .agd-status.wait{color:#BDAB48} /* Filet de carte : trait à 3 % de la maquette, arrondi à 1 px lisible */ .agd-div{height:0;border-top:1px solid rgba(0,0,0,.04)} .agd-body{height:calc(37.058 * var(--u));display:flex;align-items:center;overflow:hidden} .agd-body-text{font-size:calc(14 * var(--u));font-weight:500;line-height:1.32;color:#000; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .agd-body-text .dim{color:rgba(0,0,0,.4)} /* Pilule totale : ancrée au bas du cadre (29,8 px maquette sous la pilule) pour rester visible quand --u grossit sur mobile. */ .agd-total{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(29.8 * var(--u)); z-index:5;display:flex;align-items:center;justify-content:center;white-space:nowrap; padding:calc(17.76 * var(--u)) calc(20.72 * var(--u));border-radius:var(--radius-pill); background:var(--blue-500);border:calc(2.96 * var(--u)) solid rgba(255,255,255,.05); color:#fff;font-size:calc(17.76 * var(--u));font-weight:500;line-height:1; box-shadow:0 calc(12.06 * var(--u)) calc(9.28 * var(--u)) rgba(0,0,0,.03), 0 calc(29.6 * var(--u)) calc(18.52 * var(--u)) rgba(0,0,0,.04), 0 calc(57 * var(--u)) calc(36.29 * var(--u)) rgba(0,0,0,.04)} .agd-total-roll{display:inline-flex;overflow:hidden;position:relative} .agd-total-n{display:inline-block} /* Sur mobile la frame virtuelle rétrécit : la colonne centrale occupe ~61 % de la largeur, les colonnes latérales se rognent davantage. */ @media (max-width:640px){.agd{--u:calc(100cqw / 640)}} /* ---- Parcours patient : carrousel photo (maquette Figma Product 11411:4051) ---- Base @layer recopiée de @blossom-carousel/core (dist/blossom-carousel-core.css) : styles.css est hors bundler, la feuille du paquet ne peut pas être importée. À resynchroniser si le paquet change. */ @layer blossom-carousel{[blossom-carousel]{white-space:nowrap;scroll-behavior:smooth;overscroll-behavior-x:contain;box-sizing:border-box;inline-size:100%;max-inline-size:100vw;list-style-type:none;display:inline-block;overflow:auto clip}[blossom-carousel]:is(ul){padding-inline-start:0}[blossom-carousel]{scrollbar-width:none}[blossom-carousel]::-webkit-scrollbar{display:none}[blossom-carousel][has-repeat=true]{padding-inline:50%!important;scroll-padding-inline:50%!important}[blossom-carousel][has-snap=true]{scroll-snap-type:var(--snap-type)!important}[blossom-carousel][has-overflow=true]{cursor:grab}[blossom-carousel][has-overflow=true]:active{cursor:grabbing}@media (pointer:fine){[blossom-carousel][has-overflow=true]:active{scroll-snap-type:none!important}}[blossom-carousel]>*{white-space:initial;vertical-align:top;display:inline-block}[blossom-carousel] *{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}} .jc{position:relative;container-type:inline-size} /* Le scroller sort du .wrap mais la carte centrée en épouse exactement les bords (largeur de contenu du wrap, unités container pour ignorer la barre de défilement) ; la suivante dépasse à droite dans le fond perdu. */ .jc-track{--jc-w:calc(min(100cqw,var(--wrap)) - 2 * var(--gutter));--jc-gap:56px;position:relative;display:flex;gap:var(--jc-gap); padding-inline:calc((100cqw - var(--jc-w)) / 2); overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;overscroll-behavior-x:contain; padding-block:12px 34px} .jc-slide{flex:0 0 var(--jc-w);width:var(--jc-w);scroll-snap-align:center;scroll-snap-stop:always} /* Relief : la carte centrée est à sa taille, ses voisines un peu plus petites. L'échelle suit le défilement (timeline de vue, sur le compositeur, sans JS) ; repli par transition sur la classe .on quand le navigateur ne sait pas. Les points de snap ne bougent pas : scale ne touche pas la boîte de layout et Blossom aligne sur le centre, invariant sous une échelle centrée. */ @keyframes jc-focus{0%,100%{scale:.94}50%{scale:1}} @supports (animation-timeline:view()){ .jc-slide{animation:jc-focus linear both;animation-timeline:view(inline)} } @supports not (animation-timeline:view()){ .jc-slide{scale:.94;transition:scale .5s var(--ease-out)} .jc-slide.on{scale:1} } .jc-card{position:relative;aspect-ratio:1234/645;border-radius:var(--radius-2xl);overflow:hidden; background:var(--surface-mock);isolation:isolate;box-shadow:var(--shadow-md)} .jc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Voile de lisibilité : le coin bas-gauche s'assombrit sous la copy, le reste de la photo garde sa lumière (encre du projet, jamais de noir pur). */ .jc-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(130% 95% at 0% 100%,rgba(27,27,27,.68) 0%,rgba(27,27,27,.38) 36%,rgba(27,27,27,0) 66%)} /* Copy de l'étape, posée à même la photo, en blanc */ .jc-plate{position:absolute;z-index:2;left:32px;bottom:30px;width:min(480px,54%);color:#fff} .jc-plate .tst{align-items:center;gap:6px} .jc-plate .tst .ic{width:13px;height:13px} .jc-plate h3{margin:14px 0 6px;font-size:22px;font-weight:600;line-height:1.1;letter-spacing:-.01em} .jc-plate p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)} /* Composant DS : entre une fois quand la slide devient active (Gate : explication) */ .jc-widget{position:absolute;z-index:2;right:28px;top:28px;width:300px;transform-origin:top right; opacity:0;transform:translateY(12px) scale(var(--jw-s,1)); transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)} .jc-slide.on .jc-widget{opacity:1;transform:scale(var(--jw-s,1))} /* Pilule de points (fidèle au wireframe : pas de flèches) */ .jc-nav{display:flex;justify-content:center;margin-top:-12px} .jc-dots{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 9px;border-radius:var(--radius-pill); background:#fff} .jc-dot{appearance:none;border:0;background:none;padding:8px;margin:0;cursor:pointer;display:inline-flex;border-radius:50%; color:inherit;font:inherit;touch-action:manipulation} .jc-dot::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--blue-100); transition:background var(--dur-base) var(--ease-out)} .jc-dot:hover::before{background:var(--blue-200)} .jc-dot[aria-current="true"]::before, .jc-dots:not(:has([aria-current="true"])) .jc-dot:first-child::before{background:var(--blue-500)} .jc-dot:focus-visible{outline:2px solid var(--focus-ring);outline-offset:0} /* ---- Composants DS posés sur les photos ---- */ .jw{color:var(--ink-900);letter-spacing:-.01em;text-align:left} .jw-card{background:#fff;border:1px solid rgba(27,27,27,.06);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:14px 16px} .jw-glass{background:rgba(255,255,255,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:16px} @supports not (backdrop-filter:blur(1px)){.jw-glass{background:rgba(255,255,255,.94)}} .jw-row{display:flex;align-items:center;gap:10px} .jw-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} .jw-name{font-size:14px;font-weight:600;line-height:1.25} .jw-sub{font-size:12px;color:var(--text-tertiary);line-height:1.3} .jw-text{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--text-secondary)} .jw-text b{color:var(--ink-900);font-weight:600} .jw-meta{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:var(--text-tertiary)} .jw-ic-user{width:16px;height:16px;flex:0 0 auto;color:var(--ink-900)} .jw-ic-clock{width:12px;height:12px;flex:0 0 auto} .jw-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-pill); font-size:11.5px;font-weight:600;background:var(--success-soft);color:var(--success);white-space:nowrap} .jw-row .jw-pill{margin-left:auto} .jw-col .jw-pill{margin-top:6px} .jw-pill .ic{width:13px;height:13px} .jw-av{width:36px;height:36px;border-radius:50%;background:var(--blue-500);color:#fff;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center} .jw-av .ic{width:17px;height:17px} .jw-av.soft{background:var(--blue-50);color:var(--blue-600)} .jw-wave{display:flex;align-items:center;gap:3px;height:30px;margin-top:12px} .jw-wave i{display:block;width:3px;border-radius:3px;background:var(--blue-500)} .jw-quote{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--text-secondary)} .jw-flag{margin-top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--radius-pill); background:rgba(232,164,0,.16);color:#7A5200;font-size:12px;font-weight:600} .jw-flag .ic{width:14px;height:14px;flex:0 0 auto} .jw-notif{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .jw-toast{display:flex;align-items:flex-start;gap:10px;width:100%;background:#fff;border:1px solid rgba(27,27,27,.06); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:12px 14px} .jw-toast.small{width:86%;padding:10px 12px;align-items:center} .jw-toast.small .jw-av{width:32px;height:32px} .jw-toast.small .jw-av .ic{width:15px;height:15px} @media (max-width:720px){ .jc-track{--jc-w:86cqw;--jc-gap:16px} .jc-card{aspect-ratio:4/5;border-radius:var(--radius-xl)} .jc-plate{left:18px;right:18px;bottom:18px;width:auto} .jc-plate h3{font-size:19px;margin-top:10px} .jc-plate p{font-size:14px} .jc-widget{--jw-s:.86;right:14px;top:14px;width:250px} } /* Sous reduced-motion et sans JavaScript, les composants sont visibles sur toutes les slides : la copy et le récit ne dépendent pas d'un effet. */ @media (prefers-reduced-motion:reduce){.jc-widget{opacity:1;transform:scale(var(--jw-s,1));transition:none}.jc-track{scroll-behavior:auto}.jc-slide{animation:none;scale:1;transition:none}} @media (scripting:none){.jc-widget{opacity:1;transform:scale(var(--jw-s,1))}} /* ========================================================= ASK — barre de recherche conversationnelle (AskRecept.tsx) Placée sous la FAQ : même largeur de colonne (780 px) et même blanc de carte, pour que les deux se lisent d'un bloc. ========================================================= */ .ask{max-width:780px;margin:0 auto} /* La barre. Le contour vit sur le conteneur et non sur l'input : c'est lui qui doit réagir au focus, quelle que soit la cible réelle. */ .ask-bar{display:flex;align-items:center;gap:10px;background:#fff; border:1px solid rgba(27,27,27,.08);border-radius:var(--radius-pill); padding:8px 8px 8px 20px;box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} .ask-bar:focus-within{border-color:var(--blue-500);box-shadow:var(--shadow-md),0 0 0 4px var(--focus-ring)} .ask-ic{width:20px;height:20px;flex:0 0 auto;color:var(--text-tertiary)} .ask-input{flex:1 1 auto;min-width:0;border:none;background:none;outline:none;padding:12px 0; font:inherit;font-size:16px;color:var(--ink-900)} /* 16 px : en dessous, iOS zoome au focus */ .ask-input::placeholder{color:var(--text-tertiary)} .ask-input:disabled{color:var(--text-secondary)} .ask-send{flex:0 0 auto;width:46px;height:46px;padding:0} .ask-send:disabled{background:var(--gray-300);box-shadow:none;cursor:default} .ask-send:disabled:hover{background:var(--gray-300);box-shadow:none} /* Attente : trois barres qui respirent, écho de la waveform du site. Le mouvement est porté par `scale-y` seul — jamais la hauteur, qui ferait relayouter le bouton à chaque image. */ .ask-wave{display:flex;align-items:center;gap:3px;height:16px} .ask-wave i{display:block;width:3px;height:100%;border-radius:3px;background:currentColor; transform-origin:center;animation:ask-breathe 900ms var(--ease-in-out) infinite} .ask-wave i:nth-child(2){animation-delay:150ms} .ask-wave i:nth-child(3){animation-delay:300ms} @keyframes ask-breathe{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} /* Amorces de question */ .ask-sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center} .ask-chip{border:none;cursor:pointer;font-family:inherit; transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .ask-chip:hover{background:var(--blue-50);color:var(--blue-700)} .ask-chip:active{transform:scale(.97)} .ask-chip:disabled{opacity:.5;cursor:default} /* Sortie. Pas de hauteur réservée : une zone vide de la taille d'une réponse laisserait un trou dans la page tant que rien n'a été demandé. */ .ask-out{margin-top:16px} .ask-pending{margin:0;text-align:center;font-size:14px;color:var(--text-tertiary)} .ask-answer{background:#fff;border:1px solid rgba(27,27,27,.05);border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);padding:20px 22px} .ask-answer.is-error{background:var(--danger-soft);border-color:rgba(229,72,77,.18);box-shadow:none} .ask-q{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--text-tertiary)} .ask-a{margin:0;font-size:16px;line-height:1.55;color:var(--text-primary);white-space:pre-wrap} .ask-answer.is-error .ask-a{color:#8A2A2E} /* Divulgation IA */ .ask-note{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap; margin:14px 0 0;font-size:13px;color:var(--text-tertiary);text-align:center} .ask-note .ic{color:var(--blue-500);flex:0 0 auto} .ask-note a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px} @media (max-width:560px){ .ask-bar{padding-left:16px;gap:8px} .ask-ic{display:none} /* la place manque : le placeholder porte déjà l'intention */ .ask-sugg{justify-content:flex-start} .ask-answer{padding:18px} } @media (prefers-reduced-motion:reduce){ .ask-wave i{animation:none;transform:scaleY(.7)} .ask-chip:active{transform:none} } /* --------------------------------------------------------- ASK — variante épinglée en bas du viewport (AskDock.tsx) z-index 55 : au-dessus de la nav collante (50), en dessous du menu mobile et de son voile (60/59), qui doivent la recouvrir quand ils s'ouvrent. --------------------------------------------------------- */ .ask-dock{position:fixed;left:0;right:0;z-index:55; bottom:max(18px,env(safe-area-inset-bottom)); width:min(620px,calc(100vw - 32px));margin-inline:auto; /* Pas de translate ici : Motion pilote `transform` sur cet élément, un centrage par translateX serait écrasé à la première image. */ pointer-events:none} .ask-dock .ask{pointer-events:auto;max-width:none} .ask-in-dock{display:flex;flex-direction:column;gap:10px} .ask-in-dock .ask-bar{box-shadow:var(--shadow-lg);border-color:rgba(27,27,27,.10)} .ask-in-dock .ask-out{margin-top:0} /* La réponse peut être longue et le viewport court : elle défile dans sa carte plutôt que de repousser la barre hors de l'écran. */ .ask-in-dock .ask-answer{box-shadow:var(--shadow-lg);max-height:44vh;overflow-y:auto} .ask-in-dock .ask-pending{background:#fff;border-radius:var(--radius-pill); box-shadow:var(--shadow-md);padding:9px 16px;width:fit-content;margin-inline:auto} .ask-in-dock .ask-sugg{margin-top:0} .ask-in-dock .ask-chip{background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); box-shadow:var(--shadow-sm);color:var(--text-secondary)} .ask-in-dock .ask-chip:hover{background:#fff;color:var(--blue-700)} .ask-clear{display:block;margin:14px 0 0;padding:0;border:none;background:none;cursor:pointer; font:inherit;font-size:13px;font-weight:600;color:var(--text-tertiary); transition:color var(--dur-fast) var(--ease-out)} .ask-clear:hover{color:var(--ink-900)} @media (max-width:560px){ .ask-dock{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px)} .ask-in-dock .ask-bar{padding:6px 6px 6px 16px} .ask-in-dock .ask-send{width:42px;height:42px} .ask-in-dock .ask-input{padding:10px 0} .ask-in-dock .ask-answer{max-height:38vh} /* Une seule ligne d'amorces qui défile : empilées, elles couvriraient la moitié de l'écran au-dessus du clavier. */ .ask-in-dock .ask-sugg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:2px} .ask-in-dock .ask-sugg::-webkit-scrollbar{display:none} .ask-in-dock .ask-chip{white-space:nowrap;flex:0 0 auto} } /* À l'impression, une barre flottante ne veut rien dire. */ @media print{.ask-dock{display:none}} /* ============================================================ Réservation de démo : parcours en modal (components/BookDemo.tsx) Rail ciel à gauche (le rendez-vous se construit), étapes à droite. z-index 1300 : au-dessus du lightbox témoignages (1200) et du dock (55). ============================================================ */ .bd{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px} .bd-scrim{position:fixed;inset:0;background:rgba(27,27,27,.45); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .bd-panel{position:relative;display:grid;grid-template-columns:300px minmax(0,1fr); width:min(920px,100%);height:min(660px,calc(100dvh - 40px)); background:#fff;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-lg)} /* ---- Rail gauche : anthracite du bandeau haut, logo 3D du panneau CTA ---- */ .bd-rail{position:relative;display:flex;flex-direction:column;gap:22px; padding:28px 26px 24px;background:var(--ink-900);overflow:hidden} /* Le logo est premier dans le DOM ; les blocs suivants, positionnés, passent devant. */ .bd-rail>*{position:relative} .bd-rail .bd-rail-logo{position:absolute;right:-34px;bottom:-52px;width:170px;height:auto; pointer-events:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))} .bd-rail-head{display:flex;align-items:center;gap:12px} .bd-rail-head h2{font-size:17px;font-weight:600;letter-spacing:-.1px;line-height:1.15;color:#fff} .bd-rail-head p{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:3px} .bd-voir{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .bd-voir li{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.78)} .bd-voir .ic{width:16px;height:16px;flex:0 0 auto;color:var(--blue-300);margin-top:2px} .bd-recap{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:14px 16px} .bd-recap-titre{font-size:12.5px;font-weight:600;color:var(--blue-200);margin:0 0 9px} .bd-recap-ligne{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13px;line-height:1.4; color:rgba(255,255,255,.92);overflow-wrap:anywhere} .bd-recap-ligne+.bd-recap-ligne{margin-top:8px} .bd-recap-ligne .ic{width:15px;height:15px;flex:0 0 auto;color:var(--blue-300);margin-top:1px} .bd-rail-pied{display:flex;align-items:center;gap:10px} .bd-rail-pied .avatars{display:flex;flex:0 0 auto} .bd-rail-pied .avatars img{width:28px;height:28px;border-radius:50%;object-fit:cover; border:2px solid rgba(255,255,255,.25);display:block} .bd-rail-pied .avatars img+img{margin-left:-9px} .bd-rail-pied p{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.75)} .bd-rail-pied p span{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:3px} /* ---- Colonne principale ---- */ .bd-main{display:flex;flex-direction:column;min-width:0} .bd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px; padding:20px 20px 0 36px} .bd-progress{display:flex;flex-direction:column;gap:8px;padding-top:4px} .bd-progress-txt{font-size:12.5px;font-weight:600;color:var(--text-tertiary)} .bd-bar{display:block;width:160px;height:4px;border-radius:var(--radius-pill);background:var(--gray-100);overflow:hidden} .bd-bar-fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--blue-500); transform-origin:left center} .bd-close{flex:0 0 auto;margin-left:auto;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--ink-900); transition:background var(--dur-fast) ease,transform 160ms var(--ease-out)} .bd-close svg{width:18px;height:18px} .bd-close:hover{background:var(--gray-100)} .bd-close:active{transform:scale(.94)} .bd-corps{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 36px 0} .bd-ecran{padding-bottom:26px} .bd-titre{font-size:22px;font-weight:600;letter-spacing:-.2px;line-height:1.15;margin:14px 0 0} .bd-sous{font-size:14.5px;color:var(--text-secondary);margin:7px 0 0} /* Questions à puces */ .bd-q{margin-top:22px} .bd-label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; font-size:13px;font-weight:600;color:var(--text-primary);margin:0 0 10px} .bd-label-hint{font-size:12px;font-weight:400;color:var(--text-tertiary)} .bd-chips{display:flex;flex-wrap:wrap;gap:8px} .bd-chip{appearance:none;font-family:inherit;cursor:pointer;border:0; padding:10px 16px;border-radius:var(--radius-pill);font-size:14px;font-weight:500;line-height:1; background:#fff;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--gray-200); transition:background var(--dur-fast) ease,color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,transform 160ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .bd-chip:hover{box-shadow:inset 0 0 0 1.5px var(--gray-400)} } .bd-chip:active{transform:scale(.97)} .bd-chip.on{background:var(--blue-500);color:#fff;box-shadow:none} .bd-err{font-size:13px;color:var(--danger);margin:8px 0 0} /* Champs texte */ .bd-grille2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .bd-champ{margin-top:18px} .bd-champ .bd-label{margin-bottom:8px} .bd-input{width:100%;font-family:inherit;font-size:16px;color:var(--text-primary); background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md); padding:12px 14px;transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease} .bd-input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--focus-ring)} .bd-input.ko{border-color:var(--danger)} .bd-input.ko:focus{box-shadow:0 0 0 4px rgba(229,72,77,.18)} .bd-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* Nombre de praticiens : champ numérique entre deux boutons, au doigt comme au clavier */ .bd-nombre{display:flex;align-items:center;gap:8px} .bd-nombre .bd-input{width:96px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums} .bd-nombre-btn{appearance:none;font-family:inherit;cursor:pointer;border:0;flex:0 0 auto; width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:#fff;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--gray-200); transition:box-shadow var(--dur-fast) ease,transform 160ms var(--ease-out)} .bd-nombre-btn svg{width:16px;height:16px} @media (hover:hover) and (pointer:fine){ .bd-nombre-btn:hover{box-shadow:inset 0 0 0 1.5px var(--gray-400)} } .bd-nombre-btn:active{transform:scale(.94)} /* Créneau : bande de jours + grille d'heures (le sélecteur familier Doctolib) */ .bd-jours{display:flex;gap:8px;overflow-x:auto;margin:22px -4px 0;padding:2px 4px 8px; scrollbar-width:thin} .bd-jour{appearance:none;font-family:inherit;cursor:pointer;border:0;flex:0 0 auto; display:flex;flex-direction:column;align-items:center;gap:3px;min-width:78px; padding:10px 12px;border-radius:var(--radius-md); background:#fff;box-shadow:inset 0 0 0 1.5px var(--gray-200); transition:background var(--dur-fast) ease,box-shadow var(--dur-fast) ease,transform 160ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .bd-jour:hover{box-shadow:inset 0 0 0 1.5px var(--gray-400)} } .bd-jour:active{transform:scale(.97)} .bd-jour-sem{font-size:12px;color:var(--text-tertiary);text-transform:capitalize} .bd-jour-num{font-size:13.5px;font-weight:600;color:var(--text-primary);white-space:nowrap} .bd-jour.on{background:var(--blue-50);box-shadow:inset 0 0 0 1.5px var(--blue-500)} .bd-jour.on .bd-jour-sem,.bd-jour.on .bd-jour-num{color:var(--blue-700)} .bd-heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:14px} .bd-slot{appearance:none;font-family:inherit;cursor:pointer;border:0; padding:11px 0;border-radius:var(--radius-pill);font-size:14px;font-weight:500;text-align:center; background:#fff;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--gray-200); transition:background var(--dur-fast) ease,color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,transform 160ms var(--ease-out)} @media (hover:hover) and (pointer:fine){ .bd-slot:hover{box-shadow:inset 0 0 0 1.5px var(--gray-400)} } .bd-slot:active{transform:scale(.97)} .bd-slot.on{background:var(--blue-500);color:#fff;box-shadow:none} /* Heures rangées en matin et après-midi : une journée ouverte compte une quarantaine de créneaux. */ .bd-heures-titre{font-size:12.5px;font-weight:600;color:var(--text-tertiary);margin:18px 0 0} .bd-heures-titre+.bd-heures{margin-top:10px} /* Créneaux : chargement, avis, repli sur le calendrier HubSpot */ .bd-attente{display:flex;align-items:center;gap:12px;margin:26px 0 0;font-size:14px;color:var(--text-secondary)} .bd-attente .ask-wave{color:var(--blue-500)} .bd-avis{background:var(--blue-50);color:var(--blue-700);border-radius:var(--radius-md); padding:10px 14px;font-size:13.5px;line-height:1.45;margin:20px 0 0} .bd-lien{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer; text-decoration:underline;text-underline-offset:2px} .bd-hubspot{margin-top:14px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:inset 0 0 0 1px var(--gray-100)} .bd-hubspot iframe{display:block;width:100%;min-height:640px;border:0} /* Confirmation (révélée au choix de l'heure) */ .bd-confirm{margin-top:22px;padding-top:18px;border-top:1px solid var(--gray-100)} .bd-choix{display:flex;align-items:center;gap:8px;margin:0 0 12px; font-size:14.5px;font-weight:600;color:var(--blue-700)} .bd-choix .ic{width:16px;height:16px;flex:0 0 auto} .bd-choix span{display:inline-block} .bd-choix span::first-letter{text-transform:uppercase} .bd-consent{font-size:12px;line-height:1.5;color:var(--text-tertiary);margin:12px 0 0} .bd-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px} .bd-envoi-ko{background:var(--danger-soft);color:#8A2A2E;border-radius:var(--radius-md); padding:10px 14px;font-size:13.5px;line-height:1.45;margin:0 0 12px} .bd-envoi-ko a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* Pied : Retour / Continuer */ .bd-pied{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 36px 22px;border-top:1px solid var(--gray-100)} /* ---- Mobile : feuille plein écran, rail réduit à un bandeau titre ---- */ @media (max-width:840px){ .bd{padding:0} .bd-panel{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto; width:100%;height:100dvh;border-radius:0} .bd-rail{flex-direction:row;align-items:center;gap:14px;padding:16px 68px 14px 20px} .bd-rail-logo,.bd-voir,.bd-recap,.bd-rail-pied{display:none} .bd-close{color:#fff} .bd-close:hover{background:rgba(255,255,255,.12)} .bd-main{display:contents} .bd-head{padding:14px 20px 0} .bd-close{position:absolute;top:12px;right:12px;z-index:5} .bd-corps{padding:4px 20px 0} .bd-pied{padding:14px 20px calc(16px + env(safe-area-inset-bottom))} .bd-grille2{grid-template-columns:1fr} } @media print{.bd{display:none}} /* ---- Page /merci : confirmation après réservation (app/merci/page.tsx) ---- */ .merci{max-width:660px;margin-inline:auto;text-align:center;padding-block:30px 10px} .merci .itile{width:60px;height:60px;border-radius:18px} .merci .itile .ic{width:30px;height:30px} .merci .h1{margin-top:22px} .merci .lead{margin-top:16px} .merci-suite{display:grid;gap:12px;margin-top:36px;text-align:left} .merci .hero-cta{justify-content:center;margin-top:34px} /* ========================================================= BLOG : listing, pages de catégorie et articles Servi par Next (app/blog*), contenu Sanity ou NDJSON de recette. ========================================================= */ /* ---- En-tête du listing ---- */ .blog-hero{padding-bottom:0} .blog-hero .h1{margin-top:14px} .blog-hero .lead{margin-top:14px;max-width:600px} .blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .blog-filters .chip{transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .blog-filters .chip-soft:hover{background:var(--gray-200)} .chip.is-active{background:var(--ink-900);color:#fff} /* ---- Cartes d'articles ---- */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .blog-featured{margin-bottom:24px} .bcard{padding:0;overflow:hidden} .bcard-link{display:flex;flex-direction:column;height:100%} .bcard-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--gray-100)} .bcard-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)} .bcard:hover .bcard-cover img{transform:scale(1.04)} .bcard-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1} .bcard-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-tertiary)} .bcard-title{font-size:18px;font-weight:600;line-height:1.28;letter-spacing:-.01em;color:var(--text-primary)} .bcard-desc{font-size:14px;line-height:1.5;color:var(--text-secondary); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bcard-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px; font-size:14px;font-weight:600;color:var(--blue-600)} /* L'article le plus récent, en carte horizontale au-dessus de la grille. */ .blog-featured .bcard-link{flex-direction:row} .blog-featured .bcard-cover{flex:1.15;aspect-ratio:auto;min-height:320px} .blog-featured .bcard-body{flex:1;justify-content:center;padding:34px 36px;gap:14px} .blog-featured .bcard-title{font-size:clamp(22px,2.4vw,29px);line-height:1.15;letter-spacing:-.015em} .blog-featured .bcard-desc{font-size:15.5px;-webkit-line-clamp:4} @media (max-width:1020px){.blog-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:760px){ .blog-grid{grid-template-columns:1fr} .blog-featured .bcard-link{flex-direction:column} .blog-featured .bcard-cover{aspect-ratio:16/10;min-height:0} .blog-featured .bcard-body{padding:20px 22px 22px} } /* ---- Page article ---- */ .art-wrap{max-width:820px} .art-crumbs{margin-bottom:22px;font-size:14px;font-weight:600} .art-crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--text-tertiary); transition:color var(--dur-fast) var(--ease-out)} .art-crumbs a:hover{color:var(--blue-600)} .art-crumbs .ic{transform:rotate(180deg)} .art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px; color:var(--text-secondary);margin-bottom:18px} .art-author{margin-top:12px;font-size:14px;color:var(--text-secondary)} .art-cover{margin:30px 0 0;border-radius:var(--radius-xl);overflow:hidden;background:var(--gray-100)} .art-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} /* Le corps de l'article : la typo « longue lecture ». Les balises viennent du rendu Portable Text (src/lib/portable-text.ts), pas de classes utilitaires. */ .art-body{margin-top:32px;font-size:17px;line-height:1.65;color:var(--ink-700)} .art-body p{margin:0 0 18px} .art-body h2{font-weight:600;font-size:clamp(23px,2.6vw,29px);line-height:1.15;letter-spacing:-.015em; color:var(--text-primary);margin:42px 0 14px;scroll-margin-top:96px} .art-body h3{font-weight:600;font-size:clamp(19px,2vw,22px);line-height:1.2;letter-spacing:-.01em; color:var(--text-primary);margin:30px 0 10px;scroll-margin-top:96px} .art-body h4{font-weight:600;font-size:17px;color:var(--text-primary);margin:24px 0 8px} .art-body a{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--blue-200);transition:text-decoration-color var(--dur-fast) var(--ease-out)} .art-body a:hover{text-decoration-color:var(--blue-600)} .art-body ul,.art-body ol{margin:0 0 18px;padding-left:24px} .art-body ul{list-style:disc} .art-body ol{list-style:decimal} .art-body li{margin:7px 0;padding-left:2px} .art-body li::marker{color:var(--blue-500)} .art-body blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--blue-500); color:var(--text-secondary)} .art-body figure{margin:28px 0} .art-body figure img{width:100%;height:auto;border-radius:var(--radius-lg)} /* Tableaux comparatifs : défilement horizontal plutôt que débordement. */ .art-scroll{overflow-x:auto;margin:28px 0;border:1px solid var(--border-subtle); border-radius:var(--radius-md)} .art-scroll table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;line-height:1.45} .art-scroll th{background:var(--gray-50);font-weight:600;text-align:left;color:var(--text-primary)} .art-scroll th,.art-scroll td{padding:12px 14px;border-bottom:1px solid var(--border-subtle);vertical-align:top} .art-scroll tr:last-child td{border-bottom:none} /* Bandeau démo en fin d'article. */ .art-cta{display:flex;align-items:center;justify-content:space-between;gap:24px; border-radius:var(--radius-xl);padding:30px 32px;margin:46px 0 0;box-shadow:var(--shadow-brand)} .art-cta-title{font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:6px} .art-cta p:not(.art-cta-title){font-size:15px;line-height:1.5;color:rgba(255,255,255,.85)} .art-cta .btn{flex:0 0 auto} @media (max-width:700px){.art-cta{flex-direction:column;align-items:flex-start}} .art-related{margin-top:72px} .art-related .h3{margin-bottom:22px} @media (max-width:760px){.art-related{margin-top:48px}} /* ========================================================= PAGES REPRISES DE FRAMER (13/09/2026) Pages légales, landing pages /lp/*, ressources contre coordonnées, simulateur, parrainage, webinaire, ADF, carrières. ========================================================= */ /* ---- Pages légales (app/privacy-policy, app/terms-and-conditions) ---- */ .legal-head .h1{margin-top:12px} .legal-meta{margin-top:12px;font-size:14px;color:var(--text-tertiary)} /* ---- Introductions de page ---- */ .page-intro .h1{margin-top:14px} .page-intro .lead{margin:16px auto 0;max-width:620px} .page-intro .hero-cta{justify-content:center} .page-intro-left .h1{margin-top:14px;max-width:760px} /* ---- Gabarit ressource contre coordonnées (components/LeadMagnet.tsx) ---- */ .lm-title{margin-top:14px} .lm-intro{margin-top:16px;max-width:540px} .lm-intro p + p{margin-top:10px} .lm-kicker{margin-top:26px;font-size:15px;font-weight:600;color:var(--text-primary)} .lm-kicker + .see-list{margin-top:14px} .lm-logos{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:18px;color:var(--text-tertiary)} .lm-logos img{height:24px;width:auto} .lm-form{padding:18px 20px 22px} #formulaire{scroll-margin-top:96px} /* Le bouton qui descend au formulaire ne sert que lorsque celui-ci passe sous le texte. */ .lm-jump{display:none} @media (max-width:920px){.lm-jump{display:flex}} .hs-form-host{min-height:320px} .hs-form-repli{margin-top:12px;font-size:14px;color:var(--text-secondary)} .hs-form-repli a{color:var(--blue-600);text-decoration:underline} /* ---- Landing pages produit (components/LandingProduit.tsx) ---- */ .lp-grid{align-items:center} .lp-video{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg); background:#F4F4F4;aspect-ratio:16/9} .lp-video video{width:100%;height:100%;object-fit:cover;display:block} /* Vidéo claire : le voile sombre du témoignage vidéo l'éteindrait. */ .lp-video .vplay{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.14))} .lp-note{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;font-weight:600;color:var(--text-secondary)} .lp-note img{height:15px;width:auto} .lp-partenaire{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px; padding:7px 16px 7px 7px;border-radius:var(--radius-pill);background:#fff; box-shadow:inset 0 0 0 1px var(--gray-200);font-size:14px;font-weight:600;color:var(--text-secondary)} .lp-partenaire img{height:17px;width:auto} .lp-rangee-titre{margin-bottom:4px} .lp-points{margin-top:22px;display:flex;flex-direction:column;gap:16px} .lp-points li{display:flex;gap:12px;align-items:flex-start} .lp-points .ic{width:22px;height:22px;color:var(--blue-500);flex:0 0 auto;margin-top:2px} .lp-points b{font-size:16px;font-weight:600} .lp-points p{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--text-secondary)} .sec-band.sec-band-3{grid-template-columns:repeat(3,1fr)} @media (max-width:820px){.sec-band.sec-band-3{grid-template-columns:1fr}} .lp-ipills{justify-content:center;margin-top:40px} .lp-centre{justify-content:center} /* ---- Parrainage (app/parrainage) ---- */ .paliers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto} .palier{border-radius:var(--radius-2xl);padding:34px 24px;text-align:center;background:#fff;box-shadow:var(--shadow-md)} .palier:last-child{background:linear-gradient(160deg,var(--blue-500),var(--blue-700))} .palier-qui{font-size:18px;font-weight:600;color:var(--blue-600)} .palier-montant{font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-.02em;line-height:1;margin:10px 0 8px;color:var(--blue-500)} .palier-detail{font-size:15px;font-weight:600;color:var(--blue-700)} .palier:last-child .palier-qui,.palier:last-child .palier-montant,.palier:last-child .palier-detail{color:#fff} .club{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px} .club-bloc p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--text-secondary)} .club-bloc .see-list{margin-top:14px;gap:9px} .club-bloc .see-list li{font-size:14.5px} .etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0} .etape-n{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600)} .etape p{margin-top:10px;font-size:15.5px;line-height:1.5;font-weight:500} @media (max-width:860px){.paliers,.club,.etapes{grid-template-columns:1fr}} /* ---- Webinaire (app/webinar-weclever) ---- */ .deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:980px;margin:0 auto} .deux-colonnes p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--text-secondary)} .intervenants{display:grid;grid-template-columns:1fr 1fr;gap:20px} .intervenant{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start} .intervenant-photo{width:100%;height:auto;aspect-ratio:618/877;object-fit:cover;border-radius:var(--radius-lg)} .intervenant-logo{height:22px;width:auto;margin-bottom:14px} .intervenant-role{margin-top:4px;font-size:14px;font-weight:600;color:var(--blue-600)} .intervenant p:not(.intervenant-role){margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--text-secondary)} @media (max-width:860px){.deux-colonnes,.intervenants{grid-template-columns:1fr}} @media (max-width:520px){.intervenant{grid-template-columns:1fr}.intervenant-photo{max-width:180px}} /* ---- ADF (app/adf) ---- */ .evenements{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .evenement{display:flex;flex-direction:column;gap:12px} .evenement-visuel{display:block;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md); transition:transform var(--dur-base) var(--ease-out)} .evenement-visuel:hover{transform:translateY(-3px)} .evenement-visuel img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} @media (max-width:1020px){.evenements{grid-template-columns:1fr 1fr}} @media (max-width:520px){.evenements{grid-template-columns:1fr}} .infos-pratiques{max-width:780px;margin:0 auto;padding:32px} .infos-pratiques .see-list{margin-top:0} /* ---- Simulateur de manque à gagner (components/SimulateurAppels.tsx) ---- */ .sim{max-width:960px;margin:0 auto} .sim .section-head{margin-bottom:40px;max-width:760px} .sim-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sim-critere{display:flex;flex-direction:column;gap:6px} .sim-titre{font-size:17px;font-weight:600} .sim-indice{font-size:14px;color:var(--text-tertiary)} .sim-indice a{text-decoration:underline;text-underline-offset:3px} .sim-astuce{margin-top:8px;font-size:13px;color:var(--text-tertiary)} .sim-compteur{display:flex;align-items:center;gap:18px;margin-top:14px} .sim-compteur button{width:44px;height:44px;border-radius:50%;border:none;background:var(--ink-900);color:#fff; font-size:22px;line-height:1;cursor:pointer;transition:background var(--dur-fast) var(--ease-out)} .sim-compteur button:hover{background:#333} .sim-valeur{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;min-width:90px;text-align:center} .sim-valeur span{font-size:20px;font-weight:500;color:var(--text-tertiary)} .sim-curseur{margin-top:14px;display:flex;flex-direction:column;gap:14px} .sim-curseur .sim-valeur{text-align:left} .sim-curseur input[type=range]{width:100%;accent-color:var(--blue-500)} .sim-go{justify-content:center;margin-top:32px} .sim-resultats{margin-top:48px;display:flex;flex-direction:column;gap:12px} .sim-resultats .h2{margin-bottom:12px} .sim-etiquette{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75} .sim-roi{border-radius:var(--radius-lg);padding:24px;text-align:center;background:var(--blue-50);color:var(--blue-600)} .sim-roi-n{font-size:48px;font-weight:600;letter-spacing:-.04em;line-height:1;margin:6px 0} .sim-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .sim-case{border-radius:var(--radius-lg);padding:26px 20px;text-align:center;background:#fff;box-shadow:inset 0 0 0 1px var(--gray-100);color:var(--text-secondary)} .sim-n{font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:4px 0 6px;color:var(--text-primary)} .sim-perte{background:#FFF4F4;box-shadow:none} .sim-perte .sim-n{color:#E53535} .sim-annuel{border-radius:var(--radius-lg);padding:36px 24px;text-align:center;background:#EEFBF5;color:#0C8A5F} .sim-annuel-n{font-size:clamp(44px,6vw,68px);font-weight:600;letter-spacing:-.04em;line-height:1;margin:10px 0 12px;color:#10B981} .sim-duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center} .sim-vs{font-size:14px;font-weight:600;color:var(--text-tertiary)} .sim-detail{border-radius:var(--radius-lg);padding:26px 24px;background:#fff;box-shadow:inset 0 0 0 1px var(--gray-100);font-size:14.5px;line-height:1.6;color:var(--text-secondary)} .sim-ligne-titre{margin-top:14px;font-weight:600;color:var(--text-primary)} .sim-egal{font-weight:600;color:#E53535} @media (max-width:760px){.sim-grille,.sim-trio,.sim-duel{grid-template-columns:1fr}.sim-vs{text-align:center}} /* ---- Recherche du blog (components/RechercheBlog.tsx) ---- */ .blog-search{position:relative;max-width:560px;margin-top:26px} .blog-search .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px; color:var(--text-tertiary);pointer-events:none} .blog-search input{width:100%;height:52px;padding:0 48px 0 46px;border-radius:var(--radius-pill); border:1px solid var(--gray-200);background:#fff;font:inherit;font-size:16px;color:var(--text-primary); box-shadow:var(--shadow-xs);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} .blog-search input::placeholder{color:var(--text-tertiary)} .blog-search input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-100)} .blog-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .blog-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px; border:none;border-radius:50%;background:var(--gray-100);color:var(--text-secondary);font-size:20px;line-height:1;cursor:pointer} .blog-search-clear:hover{background:var(--gray-200)} .blog-search + .blog-filters{margin-top:16px} .blog-resultats-compte{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:20px} .blog-resultats-vide{max-width:560px} .blog-resultats-vide p:not(.blog-resultats-compte){margin:-8px 0 18px;color:var(--text-secondary)} .blog-resultats mark{background:var(--blue-100);color:inherit;border-radius:3px;padding:0 1px} @media (max-width:560px){.blog-search input{font-size:15px}}