/* Charte site-v3 · styles partagés (extraits de l'accueil puis enrichis) */
    :root {
      --paper:#fffbf4; --card:#f4f1ed; --card-2:#ffffff; --ink:#0b0b0b;
      --soft:rgba(11,11,11,.7); --dim:rgba(11,11,11,.62); --line:rgba(11,11,11,.14);
      --navy:#263069; --navy-hover:#34418c; --navy-soft:#c5cde9; --on-acc:#fffbf4; --acc-soft:#ffffff; --on-acc-soft:var(--navy); --acc-line:rgba(38,48,105,.2);
      --acc:var(--navy); --acc-press:var(--navy-hover); --acc-fg:var(--navy);
      --night:#0b0b0b; --night-card:#161615; --cream:#fffbf4; --cream-soft:rgba(255,251,244,.84);
      --display:'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
      --text:'Inter', 'Helvetica Neue', Arial, sans-serif;
      --radius:22px; --pad:clamp(18px, 4vw, 40px);
      --side:0px; --edge:max(var(--pad), calc((100vw - 1240px) / 2 + var(--pad)));
    }
    *, *::before, *::after { box-sizing:border-box; }
    html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
    img { display:block; max-width:100%; height:auto; }
    a { color:inherit; }
    button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
    h1, h2, h3 { font-family:var(--display); margin:0; letter-spacing:-.035em; line-height:1; }
    p { margin:0; }
    .container { width:100%; max-width:1240px; margin:0 auto; padding-inline:var(--pad); }
    .skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--acc); color:var(--on-acc); padding:10px 16px; border-radius:12px; font-weight:600; }
    .skip:focus { left:12px; top:12px; }
    :focus-visible { outline:2.5px solid var(--ink); outline-offset:3px; border-radius:6px; }
    .ic { width:1.1em; height:1.1em; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

    /* ---- Éléments communs ---- */
    .label { display:inline-flex; align-items:center; border:1.5px solid currentColor; border-radius:14px; padding:3.5px 12px; font:700 .72rem/1.3 var(--text); letter-spacing:.08em; text-transform:uppercase; }
    .h2 { font-size:clamp(2.3rem, 5.4vw, 4.6rem); font-weight:700; margin-top:18px; }
    .lead { font-size:clamp(1rem, 1.3vw, 1.12rem); color:var(--soft); max-width:560px; margin-top:20px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 22px; border-radius:15px; background:var(--acc); color:var(--on-acc); font:600 1.02rem/1 var(--display); letter-spacing:-.01em; text-decoration:none; transition:transform .2s ease, background .2s ease; }
    .btn:hover { background:var(--acc-press); transform:translateY(-2px); color:var(--on-acc); }
    .btn-line { background:transparent; border:1.5px solid var(--ink); color:var(--ink); }
    .btn-line:hover { background:var(--card-2); color:var(--ink); }
    .section { padding-block:clamp(84px, 11vw, 150px); }

    /* ---- En-tête ---- */
    .top { position:fixed; top:14px; left:14px; right:14px; z-index:80; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
    .top > * { pointer-events:auto; }
    .brand { display:inline-flex; align-items:center; gap:11px; height:50px; padding:0 18px 0 15px; border-radius:15px; background:#ffffff; color:var(--navy); text-decoration:none; box-shadow:inset 0 0 0 1px var(--acc-line); }
    .brand-icon { width:36px; height:26px; flex:none; }
    .brand-word { width:139px; height:11px; flex:none; }
    .top-right { display:flex; gap:8px; }
    .top .btn { min-height:50px; padding:0 20px; }
    .top .btn .short { display:none; }
    .menu-btn { width:50px; height:50px; border-radius:15px; background:var(--card-2); display:grid; place-items:center; transition:background .2s; }
    .menu-btn:hover { background:#ffffff; }
    .menu-btn svg { width:20px; height:20px; }
    .copy { display:inline-flex; align-items:center; gap:8px; font-weight:600; text-align:left; }
    .copy .tag { font:700 .66rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; background:var(--acc-soft); color:var(--on-acc-soft); padding:5px 8px; border-radius:7px; box-shadow:inset 0 0 0 1px var(--acc-line); }
    .copy.copied .tag { background:var(--acc-soft); color:var(--on-acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }

    /* ---- Menu façon heynesh : colonne sur PC, panneau sur mobile ---- */
    .side { position:fixed; z-index:70; display:flex; flex-direction:column; gap:10px; }
    .side-brand { display:inline-flex; align-self:flex-start; align-items:center; gap:11px; height:50px; padding:0 18px 0 15px; border-radius:15px; background:#ffffff; color:var(--navy); text-decoration:none; box-shadow:inset 0 0 0 1px var(--acc-line); }
    .side-card { background:rgba(245,241,238,.82); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); border:1px solid rgba(255,255,255,.28); border-radius:12px; box-shadow:0 18px 40px -26px rgba(11,11,11,.4); }
    .side-nav { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:12px; }
    .nav-chip { --chip:#f5f1ee; display:inline-flex; align-items:center; gap:10px; height:34px; padding:0 13px 0 11px; border-radius:9px; background:var(--chip); border:1px solid rgba(11,11,11,.1); color:var(--ink); font:600 .88rem/1 var(--display); letter-spacing:.02em; text-transform:uppercase; text-decoration:none; transition:background .25s ease, transform .2s ease; }
    .nav-chip:hover { --chip:#ffffff; transform:translateX(3px); }
    .nav-chip.on { --chip:var(--acc-soft); color:var(--on-acc-soft); border-color:var(--navy); }
    .ni { width:15px; height:15px; flex:none; fill:currentColor; }
    .side-mail { padding:8px; }
    .mail-field { position:relative; width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; height:42px; padding:0 7px 0 14px; border-radius:9px; background:#f5f1ee; border:1px solid rgba(11,11,11,.06); font:500 .9rem/1 var(--text); color:var(--ink); }
    .mail-ic { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; background:rgba(11,11,11,.06); transition:background .2s; }
    .mail-field:hover .mail-ic, .mail-field.copied .mail-ic { background:var(--acc-soft); color:var(--on-acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
    .mail-ic .i-ok, .mail-field.copied .mail-ic .i-copy { display:none; }
    .mail-field.copied .mail-ic .i-ok { display:block; }
    .mail-tip { position:absolute; right:0; top:-34px; background:var(--acc-soft); color:var(--on-acc-soft); font:700 .7rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; padding:7px 9px; border-radius:7px; opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; pointer-events:none; box-shadow:inset 0 0 0 1px var(--acc-line); }
    .mail-field.copied .mail-tip { opacity:1; transform:none; }
    .side-clients { padding:13px 0; overflow:hidden; }
    .marquee { overflow:hidden; padding-block:3px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
    .marquee-in { display:flex; width:max-content; animation:marq 28s linear infinite; }
    .marquee-in span { display:inline-flex; align-items:center; font:800 .8rem/1 var(--display); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
    .marquee-in span::after { content:""; width:6px; height:6px; margin:0 16px; border-radius:50%; background:var(--ink); opacity:.3; }
    .side-clients:hover .marquee-in { animation-play-state:paused; }
    @keyframes marq { to { transform:translateX(-50%); } }
    .side-actions { display:grid; grid-template-columns:1.3fr 1fr; gap:8px; }
    .act { display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 12px; border-radius:11px; color:var(--ink); font:600 .92rem/1 var(--display); letter-spacing:-.01em; text-decoration:none; white-space:nowrap; transition:background .2s ease, transform .2s ease; }
    .act-main { background:var(--acc); color:var(--on-acc); }
    .act-main:hover { background:var(--acc-press); transform:translateY(-2px); color:var(--on-acc); }
    .act-alt { background:#f5f1ee; border:1px solid rgba(11,11,11,.1); }
    .act-alt:hover { background:#ffffff; transform:translateY(-2px); }
    .btn-soft { background:#f5f1ee; border:1.5px solid rgba(11,11,11,.12); color:var(--ink); }
    .btn-soft:hover { background:#ffffff; color:var(--ink); }
    .side-backdrop { position:fixed; inset:0; z-index:65; background:rgba(255,251,244,.55); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
    .mb-dots { display:grid; grid-template-columns:repeat(2, 7px); gap:4px; }
    .mb-dots i { width:7px; height:7px; border-radius:2.5px; background:var(--ink); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
    .menu-btn[aria-expanded="true"] .mb-dots i:nth-child(-n+2) { transform:translateY(5.5px); }
    .menu-btn[aria-expanded="true"] .mb-dots i:nth-child(n+3) { transform:translateY(-5.5px); }
    @media (min-width:1200px) {
      :root { --side:300px; --edge:calc(max(0px, (100vw - var(--side) - 1180px) / 2) + var(--side) + var(--pad)); }
      .top, .side-backdrop { display:none; }
      /* la colonne ne capte pas les clics elle-même (seules ses cartes le font) : sur l'accueil, masquée au chargement,
         elle bloquait « Accueil » et « Sites internet » du menu posé dessous */
      .side { top:18px; left:18px; width:264px; pointer-events:none; }
      .side > * { pointer-events:auto; }
      .container { max-width:calc(var(--side) + 1180px); padding-left:calc(var(--side) + var(--pad)); }
      .hero .stage { left:var(--side); }
    }
    @media (max-width:1199px) {
      .side { top:76px; left:14px; right:14px; max-height:calc(100svh - 92px); overflow:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; }
      .side.open { opacity:1; visibility:visible; transform:none; }
      .side-backdrop.open { opacity:1; visibility:visible; }
      .side-brand, .side-actions { display:none; }
      .nav-chip { height:46px; padding:0 17px 0 14px; font-size:1.12rem; gap:12px; }
      .nav-chip .ni { width:18px; height:18px; }
    }

    /* ---- Hero ---- */
    .hero { position:relative; min-height:100svh; overflow:hidden; }
    .stage { position:absolute; inset:0; }
    .hero-word { position:absolute; top:88px; left:0; right:0; margin-inline:auto; width:min(44vw, calc(60svh * 1.3796)); color:#fff; line-height:0; user-select:none; }
    .hero-word svg { display:block; width:100%; height:auto; overflow:visible; }
    .hero-photo img { position:absolute; bottom:0; left:50%; height:min(92svh, 1100px); width:auto; max-width:none; transform:translateX(-36%); z-index:2; }
    .glass { position:absolute; z-index:3; background:rgba(11,11,11,.8); color:#fffbf4; border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:18px 20px; -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 20px 40px -18px rgba(0,0,0,.45); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
    @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) { .glass { background:rgba(11,11,11,.86); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); } }
    .glass ul { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
    .glass li { display:flex; align-items:center; gap:12px; font:600 1.02rem/1.1 var(--display); letter-spacing:-.01em; }
    .glass li .ic { color:var(--acc-fg); width:20px; height:20px; }
    .glass-list { right:6vw; top:30%; }
    .glass-stat { right:6vw; top:calc(30% + 250px); text-align:center; padding:18px 26px 20px; }
    .glass-stat strong { display:block; font:800 clamp(3.6rem, 6vw, 5.4rem)/.9 var(--display); letter-spacing:-.05em; word-spacing:.14em; color:var(--acc-fg); }
    .glass-stat span { display:block; margin-top:10px; font:600 .95rem/1.25 var(--display); }
    .hero-copy { position:absolute; z-index:4; left:var(--edge); bottom:7vh; width:min(560px, 44vw); }
    .hero h1 { font-size:clamp(2.6rem, 5vw, 5.2rem); font-weight:800; line-height:.98; letter-spacing:-.045em; }
    .hero-sub { margin-top:20px; font-size:1.08rem; color:var(--soft); max-width:460px; }
    .hero-sub b { color:var(--ink); font-weight:600; }
    .hero-ctas { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
    @media (max-width:1023px) {
      .hero { min-height:0; padding-top:76px; }
      .stage { position:relative; height:clamp(430px, 118vw, 780px); }
      .hero-word { top:12px; width:min(76vw, 440px); }
      .hero-photo img { height:100%; transform:translateX(-50%); }
      .glass { padding:12px 14px; border-radius:16px; }
      .glass ul { gap:8px; }
      .glass li { font-size:.84rem; gap:9px; }
      .glass li .ic { width:16px; height:16px; }
      .glass-list { left:3.5%; right:auto; top:auto; bottom:7%; }
      .glass-stat { right:3.5%; top:auto; bottom:36%; padding:12px 16px 14px; }
      .glass-stat strong { font-size:clamp(2.6rem, 10vw, 3.8rem); }
      .glass-stat span { font-size:.78rem; margin-top:6px; }
      .hero-copy { position:static; width:auto; padding:34px var(--pad) 12px; }
    }
    @media (max-width:520px) { .brand { width:50px; padding:0; justify-content:center; } .brand-word { display:none; } .hero-ctas .btn { flex:1 1 100%; } .top .btn .long { display:none; } .top .btn .short { display:inline; } }

    /* ---- Réalisations (sombre) ---- */
    .dark { background:var(--night); color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
    .dark .label { color:var(--cream); }
    .dark .lead { color:var(--cream-soft); }
    :where(.dark) :focus-visible { outline-color:var(--cream); }
    .work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
    .arrows { display:flex; gap:8px; }
    .arrow { width:52px; height:52px; border-radius:15px; border:1.5px solid rgba(255,251,244,.35); display:grid; place-items:center; transition:background .2s, color .2s, border-color .2s; }
    .arrow:hover { background:var(--acc); color:var(--on-acc); border-color:var(--acc); }
    .track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge); padding:48px var(--pad) 8px var(--edge); scrollbar-width:none; }
    .track::-webkit-scrollbar { display:none; }
    .wcard { flex:0 0 min(560px, 84vw); scroll-snap-align:start; background:var(--night-card); border:1px solid rgba(255,251,244,.08); border-radius:var(--radius); padding:16px 16px 24px; display:flex; flex-direction:column; --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
    .wcard-top { display:flex; flex-wrap:wrap; gap:6px; }
    .chip-n, .chip-t { display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; font:600 .8rem/1 var(--text); }
    .chip-n { border:1.5px solid rgba(255,251,244,.4); }
    .chip-t { background:rgba(255,251,244,.08); color:var(--cream-soft); }
    .wcard-img { display:block; margin-top:14px; border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#161615; }
    .wcard-img img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
    .wcard:hover .wcard-img img { transform:scale(1.035); }
    .wcard h3 { font-size:clamp(1.45rem, 2.2vw, 1.85rem); font-weight:700; margin:22px 6px 0; }
    .wcard p { color:var(--cream-soft); font-size:.98rem; margin:10px 6px 0; }
    .wlink { margin:18px 6px 0; display:inline-flex; align-items:center; gap:8px; color:var(--acc-fg); font:600 1rem/1 var(--display); text-decoration:none; }
    .wlink .ic { transition:transform .2s; }
    .wlink:hover .ic { transform:translateX(4px); }

    /* ---- Ce que vous obtenez ---- */
    .get { text-align:center; }
    .get-title { font-size:clamp(3.2rem, 9.5vw, 8.6rem); font-weight:800; letter-spacing:-.055em; line-height:.9; }
    .get .label { margin-top:34px; }
    .get-text { max-width:980px; margin:30px auto 0; font:700 clamp(1.6rem, 3.6vw, 3.1rem)/1.28 var(--display); letter-spacing:-.035em; }
    .chip { display:inline-grid; place-items:center; vertical-align:middle; width:1.7em; height:1.12em; margin:0 .08em; border-radius:.3em; background:var(--acc-soft); position:relative; top:-.08em; color:var(--on-acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
    .chip .ic { width:.62em; height:.62em; stroke-width:2.4; }

    /* ---- Offres ---- */
    .offers { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:54px; }
    .offer { background:var(--card); border-radius:var(--radius); padding:clamp(22px, 3vw, 34px); display:flex; flex-direction:column; }
    .offer-head { display:flex; align-items:center; gap:14px; }
    .sq { width:48px; height:48px; border-radius:14px; background:var(--acc-soft); display:grid; place-items:center; flex:none; color:var(--on-acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
    .sq .ic { width:22px; height:22px; }
    .offer h3 { font-size:1.55rem; font-weight:700; }
    .price { margin-top:26px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .price strong { font:800 clamp(2.6rem, 4.4vw, 3.6rem)/1 var(--display); letter-spacing:-.05em; word-spacing:.14em; }
    .price span { color:var(--soft); font-size:.95rem; }
    .offer > p { margin-top:14px; color:var(--soft); }
    .checks { list-style:none; margin:22px 0 0; padding:22px 0 0; border-top:1px solid var(--line); display:grid; gap:11px; }
    .checks li { display:flex; gap:12px; align-items:flex-start; }
    .checks li::before { content:""; width:16px; height:16px; flex:none; margin-top:4px; border-radius:50%; border:3px solid var(--acc); box-shadow:0 0 0 1px rgba(11,11,11,.18); }
    .note { margin-top:20px; display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--soft); }
    .note .ic { margin-top:3px; }
    .offer .btn { margin-top:auto; align-self:flex-start; }
    .offer .note + .btn { margin-top:26px; }
    .fine { margin-top:22px; font-size:.92rem; color:var(--soft); max-width:760px; }
    @media (max-width:860px) { .offers { grid-template-columns:1fr; } }

    /* ---- Méthode : frise ---- */
    .method { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(34px, 6vw, 90px); }
    .method-intro { position:sticky; top:110px; align-self:start; }
    .method-intro .lead + .lead { margin-top:14px; }
    .tl { list-style:none; margin:0; padding:0 0 0 46px; position:relative; display:grid; gap:18px; }
    .tl::before { content:""; position:absolute; left:14px; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--ink); }
    .tl-item { position:relative; }
    .tl-dot { position:absolute; left:-41px; top:38px; width:22px; height:22px; border-radius:50%; background:var(--acc); border:3px solid var(--ink); color:var(--on-acc); }
    .tl-card { background:var(--card); border-radius:var(--radius); padding:clamp(22px, 3vw, 30px); }
    .tl-num { font:800 clamp(3.6rem, 6vw, 5rem)/.85 var(--display); letter-spacing:-.06em; color:var(--acc-fg); -webkit-text-stroke:1px rgba(11,11,11,.08); }
    .tl-card h3 { font-size:clamp(1.5rem, 2.4vw, 1.9rem); font-weight:700; margin-top:16px; }
    .tl-card p { margin-top:10px; color:var(--soft); }
    .tl-meta { margin-top:20px; display:inline-flex; align-items:center; gap:8px; background:var(--card-2); border-radius:12px; padding:9px 13px; font:600 .9rem/1 var(--display); }
    @media (max-width:900px) { .method { grid-template-columns:1fr; } .method-intro { position:static; } }

    /* ---- Avis ---- */
    .reviews { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; margin-top:54px; }
    .review { background:var(--card); border-radius:var(--radius); padding:clamp(22px, 3vw, 30px); display:flex; flex-direction:column; }
    .review-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
    .review h3 { font-size:1.45rem; font-weight:700; line-height:1.08; }
    .review .sq { width:42px; height:42px; border-radius:12px; font:800 1.6rem/1 var(--display); }
    .review blockquote { margin:22px 0 0; font-size:1.08rem; color:var(--soft); }
    .review p { margin-top:14px; color:var(--soft); }
    .who { margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:12px; }
    .avatar { width:46px; height:46px; border-radius:50%; background:var(--acc-soft); color:var(--on-acc-soft); display:grid; place-items:center; font:800 .95rem/1 var(--display); flex:none; box-shadow:inset 0 0 0 1px var(--acc-line); }
    .who b { display:block; font:600 1rem/1.2 var(--display); }
    .who span { font-size:.88rem; color:var(--soft); }
    .clients { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:14px; }
    .clients li { display:grid; gap:2px; padding-left:26px; position:relative; }
    .clients li::before { content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; border:3px solid var(--acc); box-shadow:0 0 0 1px rgba(11,11,11,.18); }
    .clients b { font:600 1.02rem/1.2 var(--display); }
    .clients span { font-size:.88rem; color:var(--soft); }
    @media (max-width:980px) { .reviews { grid-template-columns:1fr; } }

    /* ---- Blog ---- */
    .blog-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
    .filters { display:flex; gap:8px; flex-wrap:wrap; }
    .filter { height:42px; padding:0 17px; border-radius:11px; background:#f5f1ee; border:1px solid rgba(11,11,11,.1); font:600 .92rem/1 var(--display); transition:background .2s ease; }
    .filter:hover { background:#ffffff; }
    .filter.on { background:var(--acc-soft); color:var(--on-acc-soft); border-color:var(--navy); }
    .posts { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:44px; }
    .post { background:var(--card); border-radius:var(--radius); padding:24px; min-height:270px; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:transform .25s ease, background .25s ease; }
    .post:hover { transform:translateY(-4px); background:#faf8f4; }
    .post-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .post-cat { height:28px; padding:0 11px; display:inline-flex; align-items:center; border-radius:8px; background:var(--card-2); border:1px solid rgba(11,11,11,.08); font:600 .76rem/1 var(--display); letter-spacing:.03em; text-transform:uppercase; }
    .post[data-cat="app"] .post-cat { background:var(--acc-soft); color:var(--on-acc-soft); border-color:var(--acc-line); }
    .post-date { font-size:.85rem; color:var(--soft); }
    .post h3 { margin-top:22px; font-size:1.3rem; font-weight:700; line-height:1.15; letter-spacing:-.025em; }
    .post p { margin-top:10px; color:var(--soft); font-size:.95rem; }
    .post-more { margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:8px; font:600 .95rem/1 var(--display); }
    .post-more .ic { transition:transform .2s ease; }
    .post:hover .post-more .ic { transform:translateX(4px); }
    .post.is-hidden { display:none; }
    .blog-all { margin-top:30px; }
    @media (max-width:980px) { .posts { grid-template-columns:1fr 1fr; } }
    @media (max-width:640px) { .posts { grid-template-columns:1fr; } .post { min-height:0; } }

    /* ---- Contact : conversation ---- */
    .cta-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(34px, 6vw, 90px); align-items:center; }
    .cta-title { font-size:clamp(2.6rem, 6vw, 5.2rem); font-weight:800; letter-spacing:-.05em; line-height:.95; }
    .cta-title .tone { color:var(--acc-fg); }
    .cta-alt { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-weight:600; }
    .cta-alt a { text-decoration:none; }
    .cta-alt a:hover { text-decoration:underline; }
    .chat { display:grid; gap:10px; justify-items:start; }
    .chat-row { display:flex; align-items:flex-end; gap:12px; }
    .chat-av { width:52px; height:52px; border-radius:50%; object-fit:cover; background:var(--card); }
    .bubble { background:var(--card-2); border-radius:18px 18px 18px 6px; padding:14px 18px; font:600 1.08rem/1.2 var(--display); }
    .bubble-cta { margin-left:64px; background:var(--acc); text-decoration:none; font-size:1.15rem; padding:18px 24px; border-radius:18px; transition:transform .2s, background .2s; color:var(--on-acc); }
    .bubble-cta:hover { background:var(--acc-press); transform:translateY(-2px); color:var(--on-acc); }
    .typing { margin-left:64px; display:inline-flex; gap:5px; padding:14px 16px; background:var(--card-2); border-radius:18px; }
    .typing i { width:7px; height:7px; border-radius:50%; background:var(--acc); animation:dot 1.3s infinite ease-in-out; }
    .typing i:nth-child(2) { animation-delay:.18s; } .typing i:nth-child(3) { animation-delay:.36s; }
    @keyframes dot { 0%, 60%, 100% { transform:translateY(0); opacity:.45; } 30% { transform:translateY(-5px); opacity:1; } }
    @media (max-width:860px) { .cta-grid { grid-template-columns:1fr; } }

    /* ---- FAQ ---- */
    .faq-grid { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(34px, 6vw, 90px); }
    .qa-list { display:grid; gap:10px; }
    .qa { background:var(--card); border-radius:18px; }
    .qa summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 22px; font:600 1.12rem/1.25 var(--display); letter-spacing:-.015em; }
    .qa summary::-webkit-details-marker { display:none; }
    .qa summary .ic { width:22px; height:22px; transition:transform .25s ease; }
    .qa[open] summary .ic { transform:rotate(45deg); }
    .qa-a { padding:0 22px 22px; color:var(--soft); max-width:640px; }
    @media (max-width:900px) { .faq-grid { grid-template-columns:1fr; } }
    @media (min-width:901px) { .faq-grid .h2 { font-size:clamp(2.3rem, 3.6vw, 3.6rem); -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:12 5 5; } }

    /* ---- Pied de page ---- */
    .foot { overflow:hidden; }
    .foot-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; padding-block:clamp(44px, 6vw, 70px); border-bottom:1px solid var(--line); }
    .foot-grid h3 { font:700 .72rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
    .foot-grid ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
    .foot-grid a { text-decoration:none; font-weight:500; }
    .foot-grid a:hover { text-decoration:underline; }
    .foot-pitch { font:700 clamp(1.4rem, 2.4vw, 1.9rem)/1.15 var(--display); letter-spacing:-.03em; max-width:420px; }
    .foot-pitch + .btn, .foot-pitch + .cta-main { margin-top:22px; }
    .legal { padding-block:22px 30px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; font-size:.84rem; color:var(--soft); }
    .legal a { text-decoration:none; } .legal a:hover { text-decoration:underline; }
    @media (max-width:860px) { .foot-grid { grid-template-columns:1fr; } }

    /* ---- Animations ---- */
    html.js [data-rv] { opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
    html.js [data-rv].in { opacity:1; transform:none; }
    .fill-on .w { color:rgba(11,11,11,.2); transition:color .35s ease; }
    .fill-on .w.on { color:var(--ink); }
    .dark .fill-on .w { color:rgba(255,251,244,.22); }
    .dark .fill-on .w.on { color:var(--cream); }
    .fill-on mark .w { color:rgba(38,48,105,.32); } .dark .fill-on mark .w { color:rgba(197,205,233,.32); }
    .fill-on mark .w.on, .dark .fill-on mark .w.on { color:var(--acc-fg); }
    @keyframes rise { from { opacity:0; transform:translateY(60px); } to { opacity:1; transform:none; } }
    @keyframes riseImg { from { opacity:0; transform:translate(-36%, 50px); } to { opacity:1; transform:translate(-36%, 0); } }
    @keyframes riseImgM { from { opacity:0; transform:translate(-50%, 40px); } to { opacity:1; transform:translate(-50%, 0); } }
    @keyframes pop { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } }
    .hero-word { animation:rise 1s cubic-bezier(.2,.7,.2,1) both; }
    .hero-photo img { animation:riseImg 1.1s .12s cubic-bezier(.2,.7,.2,1) both; }
    .glass-list { animation:pop .7s .55s cubic-bezier(.2,.7,.2,1) both; }
    .glass-stat { animation:pop .7s .7s cubic-bezier(.2,.7,.2,1) both; }
    .hero-copy > * { animation:rise .8s cubic-bezier(.2,.7,.2,1) both; }
    .hero-copy > :nth-child(2) { animation-delay:.1s; } .hero-copy > :nth-child(3) { animation-delay:.2s; }
    @media (max-width:1023px) { .hero-photo img { animation-name:riseImgM; } }
    /* ---- Effets (GSAP + Lenis) ---- */
    html.lenis, html.lenis body { height:auto; }
    html.lenis { scroll-behavior:auto; }
    .lenis.lenis-stopped { overflow:clip; }
    .hero-word, .hero-photo img { translate:0 var(--py, 0px); }
    @keyframes float { 0%, 100% { translate:0 0; } 50% { translate:0 -8px; } }
    .glass-list { animation:pop .7s .55s cubic-bezier(.2,.7,.2,1) both, float 6s 1.6s ease-in-out infinite; }
    .glass-stat { animation:pop .7s .7s cubic-bezier(.2,.7,.2,1) both, float 7s 2s ease-in-out infinite; }
    @media (min-width:1024px) {
      .pin-wrap .hero { position:sticky; top:0; height:100svh; min-height:0; }
      .pin-wrap #realisations { position:relative; z-index:5; border-radius:36px 36px 0 0; box-shadow:0 -24px 50px -30px rgba(0,0,0,.28); }
    }
    .tl { --p:0; }
    .tl::after { content:""; display:none; position:absolute; left:14px; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--acc); transform-origin:top; transform:scaleY(var(--p)); color:var(--on-acc); }
    html.fx .tl::after { display:block; }
    .tl-dot { z-index:2; transition:background .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
    html.fx .tl-dot { background:var(--card-2); }
    html.fx .tl-item.on .tl-dot { background:var(--acc); transform:scale(1.2); color:var(--on-acc); }
    @media (pointer:fine) { .track { cursor:grab; } }
    .track.dragging { cursor:grabbing; scroll-snap-type:none; }
    .track.dragging a { pointer-events:none; }
    html.fx .mag { transition:background .2s ease; }

    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { animation:none !important; transition:none !important; }
      html.js [data-rv] { opacity:1; transform:none; }
    }

/* ====================================================================
   Pages intérieures (multi-pages)
   ==================================================================== */
.page-hero { padding:clamp(108px, 13vw, 150px) 0 clamp(56px, 7vw, 90px); }
@media (min-width:1200px) { .page-hero { padding-top:clamp(56px, 6vw, 84px); } }
.ph-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px, 5vw, 70px); align-items:center; }
.page-hero h1 { font-size:clamp(2.6rem, 5.2vw, 4.7rem); font-weight:800; line-height:.98; letter-spacing:-.045em; margin-top:18px; }
/* Mots mis en avant dans les titres : simplement en bleu (marine sur fond clair, bleu clair sur fond noir), sans surlignage */
mark { background:none; color:var(--acc-fg); }
.page-hero h1 mark, .h2 mark { background:none; color:var(--acc-fg); padding:0; }
.page-hero .lead { font-size:1.1rem; margin-top:20px; }
.page-hero .lead b { color:var(--ink); font-weight:600; }
.ph-ctas { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ph-visual { position:relative; }
@media (max-width:980px) { .ph-grid { grid-template-columns:1fr; } .ph-visual { margin:10px 12px 30px; } }
@media (max-width:520px) { .ph-ctas .btn { flex:1 1 100%; } }

/* Cadre navigateur et cartes flottantes */
.browser { border-radius:18px; overflow:hidden; background:var(--night-card); border:1px solid rgba(11,11,11,.2); box-shadow:0 40px 80px -40px rgba(11,11,11,.55); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.browser-bar { display:flex; align-items:center; gap:6px; padding:11px 14px; background:#1d1d1b; --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.browser-bar i { width:10px; height:10px; border-radius:50%; background:#3a3a36; flex:none; }
.browser-bar span { margin-left:10px; font-size:.78rem; color:var(--cream-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.browser img { width:100%; aspect-ratio:1200/825; object-fit:cover; object-position:top; }
.stack { position:relative; padding-top:8%; }
.stack .back { position:absolute; top:0; right:-3%; width:74%; transform:rotate(3deg); opacity:.96; }
.stack .front { position:relative; width:88%; transform:rotate(-1.2deg); }
.fc-1 { right:-12px; top:-20px; } .fc-2 { left:-20px; bottom:-26px; }
.glass.fc-1, .glass.fc-2 { animation:float 6.5s 1s ease-in-out infinite; }
.glass.fc-2 { animation-duration:7.5s; }
.stat-sm { text-align:center; padding:14px 22px 16px; }
.stat-sm strong { display:block; font:800 2.4rem/.95 var(--display); letter-spacing:-.05em; word-spacing:.14em; color:var(--acc-fg); }
.stat-sm span { display:block; margin-top:6px; font:600 .82rem/1.25 var(--display); }
@media (max-width:520px) { .fc-1 { right:-6px; top:-26px; } .fc-2 { left:-6px; bottom:-34px; } .stat-sm strong { font-size:1.9rem; } }

/* Tableau de bord illustratif (applications) */
.dash { background:var(--night); color:var(--cream); border-radius:24px; padding:20px; box-shadow:0 40px 80px -40px rgba(11,11,11,.6); transform:rotate(1deg); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.dash-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.dash-title { display:flex; align-items:center; gap:10px; font:700 1rem var(--display); }
.dash-title .sq { width:34px; height:34px; border-radius:10px; } .dash-title .sq .ic { width:17px; height:17px; }
.dash-tag { font:600 .72rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--acc-fg); border:1px solid rgba(166,179,210,.35); padding:6px 9px; border-radius:7px; }
.kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px; }
.kpi { background:var(--night-card); border:1px solid rgba(255,251,244,.08); border-radius:14px; padding:14px; --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.kpi strong { display:block; font:800 1.8rem/1 var(--display); letter-spacing:-.04em; color:var(--acc-fg); }
.kpi span { display:block; margin-top:6px; font-size:.78rem; line-height:1.3; color:var(--cream-soft); }
.dash-rows { display:grid; gap:8px; margin-top:12px; }
.drow { display:flex; align-items:center; gap:12px; background:var(--night-card); border:1px solid rgba(255,251,244,.06); border-radius:12px; padding:11px 13px; font-size:.86rem; color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.drow .ic { color:var(--acc-fg); width:17px; height:17px; }
.drow em { margin-left:auto; font-style:normal; font-size:.74rem; color:var(--cream-soft); }
.bar { flex:1; max-width:120px; height:6px; border-radius:6px; background:rgba(255,251,244,.1); overflow:hidden; margin-left:auto; }
.bar i { display:block; height:100%; border-radius:6px; background:var(--acc); color:var(--on-acc); }
@media (max-width:520px) { .kpis { grid-template-columns:1fr 1fr; } .kpi:last-child { grid-column:1 / -1; } .bar { display:none; } }

/* Portes Sites / Applications (accueil) */
.doors { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:46px; }
.door { display:flex; flex-direction:column; min-height:380px; padding:clamp(24px, 3vw, 34px); border-radius:26px; background:var(--card); color:var(--ink); text-decoration:none; transition:transform .3s ease; }
.door:hover { transform:translateY(-5px); }
.door-app { background:var(--night); color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.door .sq { width:52px; height:52px; border-radius:15px; } .door .sq .ic { width:24px; height:24px; }
.door h3 { font-size:clamp(1.8rem, 3vw, 2.5rem); font-weight:800; letter-spacing:-.04em; margin-top:22px; }
.door p { margin-top:12px; color:var(--soft); max-width:460px; } .door-app p { color:var(--cream-soft); }
.door .price-line { margin-top:18px; font:700 1.02rem var(--display); } .door-app .price-line { color:var(--acc-fg); }
.door .who { margin-top:14px; display:flex; gap:6px; flex-wrap:wrap; }
.door .who span { height:28px; padding:0 11px; display:inline-flex; align-items:center; border-radius:8px; background:var(--card-2); border:1px solid rgba(11,11,11,.08); font:600 .78rem/1 var(--display); }
.door-app .who span { background:rgba(255,251,244,.08); border-color:rgba(255,251,244,.14); color:var(--cream); }
.door .go { margin-top:auto; padding-top:26px; display:inline-flex; align-items:center; gap:10px; font:700 1.05rem var(--display); }
.door .go .ic { transition:transform .2s ease; } .door:hover .go .ic { transform:translateX(5px); }
.second-door { margin-top:16px; font-size:.95rem; color:var(--soft); }
.second-door a { color:var(--ink); font-weight:600; }
@media (max-width:860px) { .doors { grid-template-columns:1fr; } .door { min-height:0; } }

/* Signaux (applications) */
.signals { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:44px; }
.signal { background:var(--card); border-radius:20px; padding:22px; }
.signal .sq { width:40px; height:40px; border-radius:11px; } .signal .sq .ic { width:19px; height:19px; }
.signal h3 { margin-top:16px; font-size:1.18rem; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.signal p { margin-top:10px; color:var(--soft); font-size:.95rem; }
@media (max-width:980px) { .signals { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .signals { grid-template-columns:1fr; } }

/* Avant / après */
.ba-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:44px; }
.ba { background:var(--card); border-radius:22px; padding:24px; }
.ba h3 { font-size:1.2rem; font-weight:700; }
.ba-cols { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.ba-col { border-radius:14px; padding:14px 15px; font-size:.92rem; line-height:1.55; }
.ba-col b { display:block; margin-bottom:8px; font:700 .72rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; }
.ba-before { background:rgba(11,11,11,.05); color:var(--soft); } .ba-before b { color:var(--dim); }
.ba-after { background:var(--night); color:var(--cream-soft); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); } .ba-after b { color:var(--acc-fg); }
@media (max-width:860px) { .ba-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .ba-cols { grid-template-columns:1fr; } }

/* Cas réel (section sombre) */
.case { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px, 4vw, 56px); margin-top:44px; align-items:start; }
.case h3 { font-size:clamp(1.6rem, 2.8vw, 2.3rem); font-weight:700; letter-spacing:-.035em; color:var(--cream); }
.case > div > p { margin-top:14px; color:var(--cream-soft); }
.case-lists { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.case-list { border-radius:18px; padding:18px; }
.case-list b { display:block; font:700 .72rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; }
.case-list ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; font-size:.93rem; line-height:1.45; }
.case-list.before { background:rgba(255,251,244,.06); color:var(--cream-soft); } .case-list.before b { color:var(--cream-soft); }
.case-list.after { background:var(--acc); color:var(--on-acc); }
.case .wlink { margin:22px 0 0; }
.mini-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:40px; }
.mini { background:var(--night-card); border:1px solid rgba(255,251,244,.08); border-radius:18px; padding:20px; --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.mini .sq { width:38px; height:38px; border-radius:11px; } .mini .sq .ic { width:18px; height:18px; }
.mini h3 { margin-top:14px; font-size:1.12rem; font-weight:700; color:var(--cream); }
.mini p { margin-top:8px; font-size:.92rem; color:var(--cream-soft); }
.mini a { display:inline-flex; margin-top:12px; color:var(--acc-fg); font:600 .92rem var(--display); text-decoration:none; }
@media (max-width:980px) { .case { grid-template-columns:1fr; } .mini-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .case-lists { grid-template-columns:1fr; } }

/* Niveaux d'investissement */
.tiers { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:44px; }
.tier { position:relative; background:var(--card); border-radius:22px; padding:26px; }
.tier.hot { background:var(--night); color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.tier .badge { position:absolute; top:20px; right:20px; background:var(--acc-soft); color:var(--on-acc-soft); font:700 .7rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; padding:7px 9px; border-radius:7px; box-shadow:inset 0 0 0 1px var(--acc-line); }
.tier h3 { font-size:1.35rem; font-weight:700; padding-right:110px; }
.tier .ask { margin-top:8px; font:700 .92rem var(--display); color:var(--soft); } .tier.hot .ask { color:var(--acc-fg); }
.tier .checks { margin-top:16px; padding-top:16px; }
.tier.hot .checks { border-top-color:rgba(255,251,244,.14); } .tier.hot .checks li { color:var(--cream-soft); }
.tier .gain { margin-top:16px; font-size:.93rem; color:var(--soft); } .tier.hot .gain { color:var(--cream-soft); }
.tier .gain b { color:var(--ink); } .tier.hot .gain b { color:var(--cream); }
@media (max-width:860px) { .tiers { grid-template-columns:1fr; } }

/* Métiers (sites) */
.metiers { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:44px; }
.metier { background:var(--card); border-radius:22px; padding:24px; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:transform .25s ease, background .25s ease; }
a.metier:hover { transform:translateY(-4px); background:#faf8f4; }
.metier h3 { margin-top:16px; font-size:1.3rem; font-weight:700; }
.metier p { margin-top:8px; color:var(--soft); font-size:.95rem; }
.metier .refs { margin-top:auto; padding-top:16px; font-size:.85rem; color:var(--dim); }
.metier .go { margin-top:12px; display:inline-flex; align-items:center; gap:8px; font:600 .95rem var(--display); }
@media (max-width:980px) { .metiers { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .metiers { grid-template-columns:1fr; } }

/* Réalisations : grille filtrable */
.proj-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:34px; }
.proj { background:var(--card); border-radius:22px; padding:14px 14px 22px; display:flex; flex-direction:column; }
.proj.is-hidden { display:none; }
.proj-img { display:block; border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#161615; }
.proj-img img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.proj:hover .proj-img img { transform:scale(1.035); }
.proj-vis { aspect-ratio:16/10; border-radius:14px; background:var(--night); color:var(--cream); display:flex; flex-direction:column; justify-content:space-between; padding:18px; --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.proj-vis .sq { width:44px; height:44px; border-radius:12px; }
.proj-vis strong { display:block; font:800 clamp(1.5rem, 2.4vw, 2.1rem)/1.02 var(--display); letter-spacing:-.04em; color:var(--acc-fg); }
.proj-vis span { display:block; margin-top:6px; font-size:.82rem; color:var(--cream-soft); }
.proj .tags { display:flex; gap:6px; flex-wrap:wrap; margin:16px 6px 0; }
.proj .tags span { height:26px; padding:0 10px; display:inline-flex; align-items:center; border-radius:8px; background:var(--card-2); border:1px solid rgba(11,11,11,.08); font:600 .72rem/1 var(--display); letter-spacing:.02em; text-transform:uppercase; }
.proj .tags span.app { background:var(--acc-soft); color:var(--on-acc-soft); border-color:var(--acc-line); }
.proj h3 { margin:12px 6px 0; font-size:1.22rem; font-weight:700; }
.proj p { margin:8px 6px 0; color:var(--soft); font-size:.93rem; }
.proj .links { margin:auto 6px 0; padding-top:16px; display:flex; gap:16px; flex-wrap:wrap; }
.proj .links a { display:inline-flex; align-items:center; gap:6px; font:600 .92rem var(--display); text-decoration:none; }
.proj .links a .ic { transition:transform .2s ease; } .proj .links a:hover .ic { transform:translateX(3px); }
.proj .conf { margin:auto 6px 0; padding-top:16px; display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--dim); }
.proj .conf .ic { width:15px; height:15px; }
@media (max-width:1100px) { .proj-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .proj-grid { grid-template-columns:1fr; } }

/* À propos */
.about { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px, 4vw, 56px); align-items:stretch; }
.portrait { position:relative; min-height:560px; border-radius:28px; background:linear-gradient(180deg, #f7f3ec 0%, #e9e3d8 100%); overflow:hidden; }
.portrait .halo { position:absolute; left:50%; top:7%; width:86%; transform:translateX(-50%); color:#a6b3d2; }
.portrait .halo svg { display:block; width:100%; height:auto; }
.portrait img { position:absolute; bottom:0; left:50%; height:90%; width:auto; max-width:none; transform:translateX(-50%); }
.p-stat { left:16px; bottom:18px; text-align:center; padding:14px 20px 16px; animation:float 6s 1s ease-in-out infinite; }
.p-stat strong { display:block; font:800 2.6rem/.95 var(--display); letter-spacing:-.05em; color:var(--acc-fg); }
.p-stat span { display:block; margin-top:6px; font:600 .82rem/1.25 var(--display); }
.p-pin { right:16px; top:18px; display:flex; align-items:center; gap:9px; font:600 .92rem/1 var(--display); animation:float 7s 1.4s ease-in-out infinite; }
.p-pin .ic { color:var(--acc-fg); width:18px; height:18px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:44px; }
.hat { border-radius:22px; padding:26px; background:var(--card); }
.hat.night { background:var(--night); color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.hat h3 { margin-top:16px; font-size:1.4rem; font-weight:700; }
.hat p { margin-top:10px; color:var(--soft); } .hat.night p { color:var(--cream-soft); }
.hat p b { color:var(--ink); } .hat.night p b { color:var(--cream); }
.skills { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.skills span { height:42px; padding:0 16px; display:inline-flex; align-items:center; border-radius:11px; background:var(--card-2); border:1px solid rgba(11,11,11,.1); font:600 .95rem var(--display); }
.beliefs { display:grid; gap:10px; margin-top:40px; }
.belief { display:grid; grid-template-columns:260px 1fr; gap:22px; background:var(--card); border-radius:18px; padding:20px 24px; }
.belief h3 { font-size:1.15rem; font-weight:700; line-height:1.25; }
.belief p { color:var(--soft); }
.quote-big { margin-top:40px; font:700 clamp(1.5rem, 3vw, 2.4rem)/1.2 var(--display); letter-spacing:-.03em; max-width:900px; }
.quote-big cite { display:block; margin-top:14px; font:500 1rem var(--text); font-style:normal; color:var(--soft); }
@media (max-width:900px) { .about { grid-template-columns:1fr; } .portrait { min-height:480px; } }
@media (max-width:760px) { .two { grid-template-columns:1fr; } .belief { grid-template-columns:1fr; gap:6px; } }
@media (max-width:520px) { .portrait { min-height:420px; } }

/* Contact */
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px, 4vw, 56px); align-items:start; }
.infos { display:grid; gap:10px; margin-top:28px; }
.info { display:flex; gap:14px; align-items:center; background:var(--card); border-radius:16px; padding:14px 16px; color:var(--ink); text-decoration:none; text-align:left; width:100%; }
.info .sq { width:42px; height:42px; border-radius:12px; }
.info b { display:block; font:700 1rem var(--display); }
.info span { font-size:.88rem; color:var(--soft); }
a.info:hover, button.info:hover { background:#faf8f4; }
.cform { position:relative; background:var(--card); border-radius:24px; padding:clamp(22px, 3vw, 32px); display:grid; gap:14px; }
.cform label { display:grid; gap:7px; font:600 .9rem var(--display); }
.cform input[type=text], .cform input[type=email], .cform select, .cform textarea { width:100%; font:400 1rem var(--text); color:var(--ink); background:var(--card-2); border:1.5px solid rgba(11,11,11,.12); border-radius:12px; padding:13px 14px; transition:border-color .2s, background .2s; }
.cform textarea { resize:vertical; min-height:140px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline:none; border-color:var(--ink); background:#ffffff; }
.cform .consent { display:flex; gap:10px; align-items:flex-start; font:400 .88rem/1.45 var(--text); color:var(--soft); }
.cform .consent input { margin-top:2px; width:18px; height:18px; accent-color:#263069; flex:none; }
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.cform .btn { width:100%; }
.form-note { font-size:.92rem; min-height:1.2em; }
.form-note--ok { color:#2f6f1f; font-weight:600; } .form-note--err { color:#a01818; font-weight:600; }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; } }

/* Utilitaires */
.pt0 { padding-top:0; }
.hero-copy > :nth-child(4) { animation-delay:.3s; }
.hero-copy .second-door { margin-top:18px; }
.cta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.more-link { display:inline-flex; align-items:center; gap:8px; margin-top:28px; font:600 1rem/1 var(--display); text-decoration:none; }
.more-link .ic { transition:transform .2s ease; } .more-link:hover .ic { transform:translateX(4px); }
.dark .more-link { color:var(--acc-fg); }

/* Carte typographique dans le carrousel (projets confidentiels) */
.wcard-vis { margin-top:14px; aspect-ratio:16/10; border-radius:14px; background:var(--acc); color:var(--on-acc); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(18px, 2.6vw, 28px); text-decoration:none; }
.wcard-vis .sq { background:var(--ink); color:var(--acc-fg); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.wcard-vis strong { display:block; font:800 clamp(2.6rem, 5vw, 4.4rem)/.88 var(--display); letter-spacing:-.055em; }
.wcard-vis span { display:block; margin-top:10px; font:600 .95rem/1.3 var(--display); max-width:26ch; }
.work-foot { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }

/* Engagements numérotés (sites) */
.pledges { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:44px; }
.pledge { background:var(--card); border-radius:22px; padding:clamp(22px, 3vw, 30px); }
.pledge .num { font:800 clamp(3rem, 5vw, 4.2rem)/.85 var(--display); letter-spacing:-.06em; color:var(--acc-fg); -webkit-text-stroke:1px rgba(11,11,11,.08); }
.pledge h3 { margin-top:14px; font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:700; }
.pledge p { margin-top:10px; color:var(--soft); }
@media (max-width:760px) { .pledges { grid-template-columns:1fr; } }

/* Carte d'offre sombre */
.offer.night { background:var(--night); color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.offer.night > p, .offer.night .note { color:var(--cream-soft); }
.offer.night .checks { border-top-color:rgba(255,251,244,.14); }
.offer.night .checks li { color:var(--cream-soft); }
.offer.night .btn-line { border-color:rgba(255,251,244,.5); color:var(--cream); }
.offer.night .btn-line:hover { background:rgba(255,251,244,.08); color:var(--cream); }
.offer .intro { margin-top:22px; font:700 .72rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.offer.night .intro { color:var(--cream-soft); }
.offer .intro + .checks { margin-top:12px; }

/* Métier mis en avant */
.metier .sq { width:44px; height:44px; border-radius:12px; } .metier .sq .ic { width:20px; height:20px; }
.metier.hot { background:var(--night); color:var(--cream); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
a.metier.hot:hover { background:#1d1d1b; }
.metier.hot p { color:var(--cream-soft); } .metier.hot .refs { color:var(--cream-soft); } .metier.hot .go { color:var(--acc-fg); }
.metier .pill { align-self:flex-start; margin-top:14px; font:700 .68rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; background:var(--acc-soft); color:var(--on-acc-soft); padding:6px 8px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--acc-line); }

/* Atouts (applications) */
.usps { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:clamp(40px, 5vw, 64px); }
.usp { background:var(--card-2); border:1px solid rgba(11,11,11,.08); border-radius:16px; padding:16px 18px; }
.usp b { display:flex; align-items:center; gap:10px; font:700 1.02rem/1.2 var(--display); letter-spacing:-.01em; }
.usp b::before { content:""; width:14px; height:14px; flex:none; border-radius:50%; border:3px solid var(--acc); box-shadow:0 0 0 1px rgba(11,11,11,.18); }
.usp span { display:block; margin-top:7px; font-size:.9rem; line-height:1.45; color:var(--soft); }
@media (max-width:1100px) { .usps { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .usps { grid-template-columns:1fr; } }

/* Texte courant (à propos) */
.prose-grid { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(34px, 6vw, 90px); }
.prose p { color:var(--soft); font-size:1.06rem; }
.prose p + p { margin-top:16px; }
.prose p b { color:var(--ink); font-weight:600; }
.pains { display:grid; gap:10px; margin:22px 0; }
.pains q { display:block; background:var(--card); border-radius:16px 16px 16px 6px; padding:14px 18px; font:600 1.08rem/1.35 var(--display); letter-spacing:-.01em; quotes:"«\00a0" "\00a0»"; }
@media (max-width:900px) { .prose-grid { grid-template-columns:1fr; } }
.about-copy .lead { max-width:none; }
.about-copy .lead + .lead { margin-top:14px; }

/* Contact : rappel du contexte (?from=) */
.contact-context { display:flex; align-items:center; gap:8px; background:var(--card-2); border-radius:12px; padding:10px 14px; font-size:.92rem; }
.contact-context[hidden] { display:none; }
.ctx-dot { width:9px; height:9px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 1.5px rgba(11,11,11,.35); flex:none; color:var(--on-acc); }
.cform .fine-print { font-size:.84rem; color:var(--dim); }
.page-hero .filters { margin-top:30px; }
.door .who { padding-top:0; align-items:center; }
.proj-vis .sq, .wcard-vis .sq { display:grid; margin-top:0; max-width:none; }
.case-tag { display:inline-flex; font:600 .72rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--acc-fg); border:1px solid rgba(166,179,210,.35); padding:7px 10px; border-radius:7px; }
.case .case-tag + h3 { margin-top:16px; }
.dark .lead.sub { margin-top:56px; }
.info .t { display:grid; gap:2px; color:var(--ink); font-size:1rem; }
.info .t > span { font-size:.88rem; color:var(--soft); }
.info .sq { color:var(--on-acc-soft); }
button.info { font:inherit; cursor:pointer; }
a.proj-vis, a.wcard-vis { text-decoration:none; }
.sq { color:var(--on-acc-soft); }
.door .price-line { color:var(--ink); } .door-app .price-line { color:var(--acc-fg); }
.pledge .num { color:var(--soft); -webkit-text-stroke:0; }
.tier .badge { position:static; display:inline-block; margin-bottom:14px; }
.tier h3, .tier.hot h3 { padding-right:0; }
.page-hero h1.long { font-size:clamp(2.4rem, 4.3vw, 3.9rem); }
.proj-vis .sq { color:var(--on-acc-soft); }
/* Grilles : autoriser les colonnes à rétrécir (évite le débordement mobile) */
.ph-grid > *, .contact-grid > *, .about > *, .case > *, .cta-grid > *, .faq-grid > *, .method > *, .prose-grid > * { min-width:0; }
@media (max-width:980px) { .stack .back { right:0; } .fc-1 { right:-4px; } }

/* Pages légales */
.legal-hero .updated { display:inline-flex; margin-top:22px; font:600 .85rem/1 var(--display); background:var(--card-2); border:1px solid rgba(11,11,11,.08); border-radius:9px; padding:9px 12px; color:var(--soft); }
.legal-grid { display:grid; grid-template-columns:250px minmax(0, 1fr); gap:clamp(24px, 4vw, 56px); align-items:start; }
.legal-grid > * { min-width:0; }
.legal-toc { position:sticky; top:24px; background:var(--card); border-radius:18px; padding:18px 14px; }
.toc-title { padding:0 9px; font:700 .72rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.legal-toc ol { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; counter-reset:toc; }
.legal-toc li { counter-increment:toc; }
.legal-toc a { display:flex; gap:10px; padding:7px 9px; border-radius:9px; font:600 .9rem/1.25 var(--display); letter-spacing:-.005em; text-decoration:none; color:var(--soft); transition:background .2s, color .2s; }
.legal-toc a::before { content:counter(toc, decimal-leading-zero); min-width:1.4em; color:var(--dim); font-weight:700; }
.legal-toc a:hover { background:var(--card-2); color:var(--ink); }
.legal-toc a.on { background:var(--acc-soft); color:var(--on-acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
.legal-toc a.on::before { color:var(--ink); }
.legal-body { display:grid; gap:12px; }
.legal-sec { background:var(--card); border-radius:22px; padding:clamp(22px, 3vw, 34px); scroll-margin-top:24px; }
.legal-sec h2 { display:flex; align-items:center; gap:12px; font-size:clamp(1.35rem, 2.2vw, 1.75rem); font-weight:700; letter-spacing:-.03em; line-height:1.15; }
.legal-sec h2 .n { flex:none; font:800 .78rem/1 var(--text); letter-spacing:.04em; background:var(--acc-soft); color:var(--on-acc-soft); border-radius:7px; padding:7px 8px; box-shadow:inset 0 0 0 1px var(--acc-line); }
.legal-sec p, .legal-sec li { color:var(--soft); }
.legal-sec p { margin-top:14px; }
.legal-sec h2 + p, .legal-sec h2 + ul { margin-top:18px; }
.legal-sec strong { color:var(--ink); font-weight:600; }
.legal-sec a { color:var(--ink); font-weight:600; text-decoration-thickness:1.5px; text-underline-offset:3px; overflow-wrap:anywhere; }
.legal-sec ul { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; }
.legal-sec ul li { position:relative; padding-left:26px; }
.legal-sec ul li::before { content:""; position:absolute; left:0; top:.42em; width:14px; height:14px; border-radius:50%; border:3px solid var(--acc); box-shadow:0 0 0 1px rgba(11,11,11,.18); }
.legal-dl { margin:18px 0 0; border-top:1px solid var(--line); }
.legal-dl > div { display:grid; grid-template-columns:210px minmax(0, 1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.legal-dl dt { font:600 .92rem/1.5 var(--display); color:var(--ink); }
.legal-dl dd { margin:0; color:var(--soft); }
.legal-note { margin-top:6px; font-size:.95rem; color:var(--soft); }
.legal-note a { color:var(--ink); font-weight:600; }
@media (max-width:1199px) { .legal-toc { top:90px; } .legal-sec { scroll-margin-top:90px; } }
@media (max-width:900px) { .legal-grid { grid-template-columns:1fr; } .legal-toc { display:none; } }
@media (max-width:560px) { .legal-dl > div { grid-template-columns:1fr; gap:2px; } }

/* Pied de page sans grand logo : badge de marque + filet de séparation */
.foot-grid { border-top:1px solid var(--line); }
.foot .foot-brand { width:auto; padding:0 18px 0 15px; margin-bottom:24px; }
.foot .foot-brand .brand-word { display:block; }

/* Blog : articles à la une */
.feat-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; }
.feat { display:flex; flex-direction:column; min-height:330px; padding:clamp(24px, 3vw, 36px); border-radius:26px; background:var(--night); color:var(--cream); text-decoration:none; transition:transform .3s ease; --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.feat:hover { transform:translateY(-5px); }
.feat .post-top { justify-content:flex-start; gap:12px; }
.feat .post-cat { background:var(--acc-soft); color:var(--on-acc-soft); border-color:var(--acc-line); }
.feat .post-date { color:var(--cream-soft); }
.feat .kicker { margin-left:auto; font:700 .7rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--acc-fg); }
.feat h3 { margin-top:26px; font-size:clamp(1.7rem, 2.8vw, 2.4rem); font-weight:800; line-height:1.04; letter-spacing:-.04em; }
.feat p { margin-top:14px; color:var(--cream-soft); max-width:520px; }
.feat .post-more { color:var(--acc-fg); }
.feat:hover .post-more .ic { transform:translateX(4px); }
.post[data-cat="crm"] .post-cat { background:var(--acc-soft); border-color:var(--acc-line); color:var(--on-acc-soft); }
.blog-list-head { margin-top:clamp(56px, 7vw, 90px); }
@media (max-width:860px) { .feat-grid { grid-template-columns:1fr; } .feat { min-height:0; } }

/* Texte courant justifié, avec césure automatique pour éviter les trous entre les mots */
.lead, .hero-sub, .prose p, .wcard p, .door p, .tl-card p, .review p, .review blockquote, .offer > p, .qa-a p,
.signal p, .ba-col, .case > div > p, .mini p, .tier .gain, .metier p, .proj p, .pledge p, .hat p, .belief p,
.legal-sec p, .legal-dl dd, .post p, .feat p, .fine, .usp span, .note, .legal-note {
  text-align:justify; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:7 3 3;
}

/* Icône du logo : masque SVG, remplie à l'encre ; au survol, le dégradé d'origine
   (bleu ciel, bleu roi, violet) défile et l'icône bascule comme une flèche de synchronisation. */
.brand-icon { display:block; width:36px; height:26px; flex:none; background-color:currentColor;
  -webkit-mask:url(/assets/logo-icon.svg?v=c9d9bbec) center / contain no-repeat; mask:url(/assets/logo-icon.svg?v=c9d9bbec) center / contain no-repeat;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1); animation:logo-in 1s .25s cubic-bezier(.34,1.56,.64,1) backwards; }
.brand:hover .brand-icon, .side-brand:hover .brand-icon, .brand:focus-visible .brand-icon, .side-brand:focus-visible .brand-icon {
  background-image:linear-gradient(90deg, #32ccff 0%, #1b18dc 33%, #8c22f6 66%, #32ccff 100%); background-size:72px 100%; background-repeat:repeat-x;
  animation:logo-flow 1.4s linear infinite; transform:rotate(-14deg) scale(1.14); }
@keyframes logo-flow { to { background-position:-72px 0; } }
@keyframes logo-in { 0% { opacity:0; transform:rotate(-160deg) scale(.4); } 70% { opacity:1; } 100% { opacity:1; transform:none; } }

/* Études de cas */
.cs-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; font:600 .95rem/1 var(--display); text-decoration:none; color:var(--soft); }
.cs-back:hover { color:var(--ink); }
.cs-meta { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:28px 0 0; }
.cs-meta div { background:var(--card); border-radius:14px; padding:12px 14px; }
.cs-meta dt { font:700 .7rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.cs-meta dd { margin:7px 0 0; font:600 .95rem/1.3 var(--display); }
.cs-shot, .cs-figure { margin:0; }
.cs-shot figcaption, .cs-figure figcaption { margin-top:14px; font-size:.88rem; color:var(--soft); text-align:center; }
.cs-figure { margin-top:34px; }
.cs-figure .browser img { aspect-ratio:auto; }
.cs-vis { aspect-ratio:4/3; border-radius:24px; background:var(--acc); color:var(--on-acc); display:flex; flex-direction:column; justify-content:space-between; padding:clamp(22px, 3vw, 34px); box-shadow:0 40px 80px -40px rgba(11,11,11,.45); }
.cs-vis .sq { background:var(--on-acc); color:var(--acc); width:56px; height:56px; border-radius:16px; }
.cs-vis .sq .ic { width:26px; height:26px; }
.cs-vis strong { display:block; font:800 clamp(3rem, 6vw, 5.2rem)/.88 var(--display); letter-spacing:-.055em; }
.cs-vis span.t { display:block; margin-top:12px; font:600 1.02rem/1.35 var(--display); }
.h2.sm { font-size:clamp(1.9rem, 3.6vw, 3rem); }
.cs-sec .prose h3 { margin-top:26px; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.cs-list { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.cs-list li { position:relative; padding-left:28px; color:var(--soft); text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.cs-list li::before { content:""; position:absolute; left:0; top:.42em; width:14px; height:14px; border-radius:50%; border:3px solid var(--acc); box-shadow:0 0 0 1px rgba(11,11,11,.18); }
.cs-list li strong, .cs-list li b, .prose strong { color:var(--ink); font-weight:600; }
.results { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:40px; }
.result { background:var(--night); color:var(--cream); border-radius:22px; padding:clamp(22px, 3vw, 30px); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.result > strong { display:block; font:800 clamp(1.7rem, 2.8vw, 2.3rem)/1 var(--display); letter-spacing:-.045em; color:var(--acc-fg); }
.result p { margin-top:12px; color:var(--cream-soft); text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.result p strong, .result p b { color:var(--cream); font-weight:600; }
.cs-insight { position:relative; margin-top:36px; background:var(--card); border-radius:26px; padding:clamp(26px, 4vw, 48px) clamp(26px, 4vw, 48px) clamp(26px, 4vw, 48px) clamp(34px, 5vw, 60px); }
.cs-insight::before { content:""; position:absolute; left:0; top:30px; bottom:30px; width:6px; border-radius:0 6px 6px 0; background:var(--acc); color:var(--on-acc); }
.cs-insight p { font:600 clamp(1.1rem, 1.7vw, 1.4rem)/1.55 var(--display); letter-spacing:-.015em; color:var(--ink); text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.cs-insight p + p { margin-top:14px; }
.uc-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:22px; }
.uc { background:var(--card); border-radius:16px; padding:18px 20px; }
.uc h3 { font-size:1.08rem; font-weight:700; letter-spacing:-.02em; }
.uc p { margin-top:8px; font-size:.93rem; color:var(--soft); text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.cs-ba { margin-top:22px; }
.cs-ba ul { margin:0; padding-left:18px; display:grid; gap:8px; }
.cs-ba .ba-after li strong { color:var(--cream); font-weight:600; }
.cs-ba .ba-before li strong { color:var(--ink); font-weight:600; }
.cs-tech .signal h3 { margin-top:0; }
.cs-others { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:34px; }
.cs-other { display:block; background:var(--card); border-radius:18px; padding:18px 20px; text-decoration:none; color:var(--ink); transition:transform .25s ease, background .25s ease; }
.cs-other:hover { transform:translateY(-3px); background:#faf8f4; }
.cs-other span { display:block; font:700 .7rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.cs-other b { display:block; margin-top:8px; font:700 1.05rem/1.25 var(--display); letter-spacing:-.02em; }
@media (max-width:980px) { .results, .cs-others { grid-template-columns:1fr; } }
@media (max-width:760px) { .cs-meta, .uc-grid { grid-template-columns:1fr; } }
.cs-quote { margin:30px 0 0; background:var(--night); color:var(--cream); border-radius:24px; padding:clamp(24px, 3.4vw, 40px); --acc:#fffbf4; --acc-press:#ffffff; --on-acc:var(--navy); --acc-fg:var(--navy-soft); --acc-soft:rgba(255,251,244,.14); --on-acc-soft:var(--cream); --acc-line:rgba(255,251,244,.16); }
.cs-quote blockquote { margin:0; font:600 clamp(1.1rem, 1.7vw, 1.4rem)/1.55 var(--display); letter-spacing:-.015em; text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.cs-quote figcaption { margin-top:22px; display:flex; align-items:center; gap:12px; }
.cs-quote .avatar { background:var(--acc-soft); color:var(--on-acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
.cs-quote b { display:block; font:600 1rem/1.2 var(--display); }
.cs-quote .r { display:block; font-size:.88rem; color:var(--cream-soft); }
.cs-quote .r a { color:var(--cream); }
/* Témoignage long (plusieurs paragraphes) ; sur l'accueil, il ouvre la grille des avis */
.cs-quote blockquote p + p { margin-top:.7em; }
.cs-quote + .reviews { margin-top:18px; }
.cs-back { display:flex; width:max-content; }
.page-hero h1.cs-h1 { font-size:clamp(2.3rem, 4vw, 3.6rem); }

/* Changement de page : la nouvelle page monte par-dessus l'ancienne (View Transitions natives,
   entre pages qui chargent ce fichier ; sans effet sur les navigateurs qui ne les gèrent pas). */
@view-transition { navigation: auto; }
.side { view-transition-name: menu; }
.top { view-transition-name: entete; }
::view-transition-group(root) { animation-duration: .6s; }
::view-transition-old(root) { animation: vt-sortie .6s cubic-bezier(.7, 0, .3, 1) both; }
::view-transition-new(root) { animation: vt-entree .6s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes vt-sortie { to { transform: scale(.94) translateY(-2%); opacity: .35; filter: brightness(.8); } }
@keyframes vt-entree { from { clip-path: inset(100% 0 0 0 round 40px 40px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Blog : article */
.art-hero { padding-bottom:clamp(36px, 5vw, 60px); }
.art-crumb { font-size:.9rem; color:var(--soft); }
.art-crumb a { color:var(--ink); font-weight:600; text-decoration:none; }
.art-crumb a:hover { text-decoration:underline; }
.art-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; }
.art-tags span { height:28px; padding:0 11px; display:inline-flex; align-items:center; border-radius:8px; background:var(--card-2); border:1px solid rgba(11,11,11,.08); font:600 .76rem/1 var(--display); letter-spacing:.03em; text-transform:uppercase; }
.art-tags span.main { background:var(--acc-soft); color:var(--on-acc-soft); border-color:var(--acc-line); }
.page-hero h1.art-h1 { font-size:clamp(2.2rem, 4.2vw, 3.7rem); max-width:980px; }
.art-lead { font-size:clamp(1.05rem, 1.4vw, 1.2rem); max-width:820px; }
.art-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.art-meta span { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px; border-radius:10px; background:var(--card); font:600 .88rem/1 var(--display); }
.art-meta .ic { width:16px; height:16px; }
.art-grid { display:grid; grid-template-columns:minmax(0, 760px) minmax(0, 300px); gap:clamp(30px, 5vw, 64px); align-items:start; }
.art-body { font-size:1.07rem; line-height:1.75; color:rgba(11,11,11,.84); }
.art-body > :first-child { margin-top:0; }
.art-body h2 { margin-top:48px; font-size:clamp(1.55rem, 2.5vw, 2.05rem); font-weight:700; line-height:1.15; letter-spacing:-.03em; color:var(--ink); }
.art-body h3 { margin-top:32px; font-size:1.3rem; font-weight:700; line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.art-body h4 { margin-top:24px; font:700 1.08rem/1.3 var(--display); color:var(--ink); }
.art-body p { margin-top:16px; text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.art-body ul, .art-body ol { margin:16px 0 0; padding-left:24px; }
.art-body li { margin-top:8px; }
.art-body li::marker { color:var(--ink); }
.art-body strong, .art-body b { color:var(--ink); font-weight:600; }
.art-body a { color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--acc); text-decoration-thickness:3px; text-underline-offset:3px; }
.art-body a:hover { background:var(--acc); text-decoration-color:var(--ink); color:var(--on-acc); }
.art-body blockquote { margin:26px 0 0; padding:18px 22px; background:var(--card); border-left:5px solid var(--acc); border-radius:0 16px 16px 0; }
.art-body blockquote p:first-child { margin-top:0; }
.art-body img { border-radius:16px; margin-top:20px; }
.art-body hr { border:0; border-top:1px solid var(--line); margin:40px 0; }
.art-body code { background:var(--card-2); padding:2px 6px; border-radius:6px; font-size:.9em; }
.art-body table { width:100%; border-collapse:collapse; margin-top:22px; font-size:.95rem; line-height:1.5; }
.art-body th, .art-body td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.art-body th { background:var(--card); font:700 .9rem/1.3 var(--display); color:var(--ink); }
.art-body .compare-table-wrap, .art-body .table-wrap { overflow-x:auto; }
.art-aside { position:sticky; top:24px; }
.art-card { background:var(--card); border-radius:22px; padding:22px; }
.art-card .who { margin:0; padding:0; }
.art-card .chat-av { width:48px; height:48px; }
.art-card p { margin-top:14px; font-size:.95rem; color:var(--soft); }
.art-card .btn { width:100%; margin-top:16px; }
.art-card .more-link { margin-top:14px; font-size:.95rem; }
@media (max-width:1199px) { .art-aside { top:90px; } }
@media (max-width:1060px) { .art-grid { grid-template-columns:1fr; } .art-aside { position:static; max-width:520px; } }
.blog-cat-link { margin-top:18px; }
.who .avatar { color:var(--acc-fg); font-size:.95rem; }

/* En-tête des pages intérieures : animé en CSS, sans attendre le JavaScript
   (affichage plus rapide, et la transition de page montre déjà le contenu). */
@keyframes hero-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
html.js .page-hero > .container > [data-rv],
html.js .page-hero .ph-grid > [data-rv],
html.js .page-hero .ph-grid > div > [data-rv],
html.js .page-hero .about-copy > [data-rv],
html.js .page-hero .contact-grid > div > [data-rv],
html.js .page-hero .about > .portrait {
  opacity:1; transform:none; transition:none; animation:hero-in .75s cubic-bezier(.2,.7,.2,1) both;
}
html.js .page-hero [data-rv]:nth-child(2) { animation-delay:.06s; }
html.js .page-hero [data-rv]:nth-child(3) { animation-delay:.12s; }
html.js .page-hero [data-rv]:nth-child(4) { animation-delay:.18s; }
html.js .page-hero [data-rv]:nth-child(5) { animation-delay:.24s; }
html.js .page-hero [data-rv]:nth-child(n+6) { animation-delay:.3s; }
.qa-list { align-content:start; }
/* Pied de page : plan du site en 4 colonnes (maillage interne) */
.foot-grid { grid-template-columns:1.6fr 1fr; }
.foot-links { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px; padding-block:clamp(34px, 5vw, 54px); border-bottom:1px solid var(--line); }
.foot-links h3 { font:700 .72rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.foot-links ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-links a { text-decoration:none; font-weight:500; font-size:.95rem; }
.foot-links a:hover { text-decoration:underline; }
@media (max-width:980px) { .foot-links { grid-template-columns:1fr 1fr; } }
@media (max-width:860px) { .foot-grid { grid-template-columns:1fr; } }
/* Petites cartes : texte aligné à gauche (la justification y crée des trous) */
.usp span { text-align:left; }

/* Cartes étroites et sous-titres courts : alignés à gauche (la justification y crée des trous entre les mots).
   La justification reste sur les paragraphes et textes longs (introductions, articles, pages légales, FAQ). */
.hero-sub, .signal p, .mini p, .uc p, .tier .gain, .proj p, .wcard p, .post p, .feat p, .review p, .review blockquote,
.pledge p, .metier p, .door p, .ba-col, .result p, .usp span, .legal-dl dd { text-align:left; }

/* Arrivée sur l'accueil (façon heynesh) : « PARENT » arrive par la droite au centre de l'écran,
   ses lettres montent une à une, il remonte à sa place, puis le reste du haut de page apparaît. */
html.intro .hero-word, html.intro .hero-photo img, html.intro .glass, html.intro .hero-copy > * { animation:none; }
html.intro .hero-word svg { overflow:hidden; }
html.intro .hero-photo img, html.intro .glass, html.intro .hero-copy > *, html.intro .side > *, html.intro .top > * { opacity:0; }
html.intro-done .hero-word, html.intro-done .hero-photo img, html.intro-done .hero-copy > * { animation:none; }
html.intro-done .glass-list { animation:float 6s ease-in-out infinite; }
html.intro-done .glass-stat { animation:float 7s .4s ease-in-out infinite; }

/* Police du site : Geist (Vercel, licence libre SIL OFL, voir /assets/fonts/Geist-OFL.txt), pour le texte comme pour
   les titres, le menu et les boutons (25 sept. 2026, à la place de tr3a et de PP Neue Montreal). Fichiers variables
   (graisses 100 à 900) hébergés sur le site ; repli sur Inter / Inter Tight pour les rares caractères absents (ʳ ᵉ ★). */
@font-face { font-family:'Geist'; font-weight:100 900; font-style:normal; font-display:swap; src:url(/assets/fonts/Geist-Variable.woff2) format('woff2'); }
@font-face { font-family:'Geist'; font-weight:100 900; font-style:italic; font-display:swap; src:url(/assets/fonts/Geist-Italic-Variable.woff2) format('woff2'); }
:root { --text:'Geist', 'Inter', 'Helvetica Neue', Arial, sans-serif; }

/* Éléments fixes en marine (logo, bouton de réservation) : un liseré crème les garde visibles
   quand ils passent au-dessus des sections marine ; invisible sur le fond crème. */
.act-main, .top .btn { box-shadow:0 0 0 1px rgba(255,251,244,.55); }

/* ==== Accueil façon heynesh (grand écran) : à l'arrivée, « KEVIN [icône] PARENT » sur toute la largeur et le
   menu intégré juste dessous ; au défilement, les liens glissent dans la colonne de menu (v3.js).
   Fond crème : la promesse est posée à gauche, sur le fond dégagé (plus sur la chemise) ; les badges à droite,
   en cartes blanches plates (sans verre dépoli ni ombre). ==== */
.hero-nav, .hero-name { display:none; }
@media (min-width:1200px) {
  html.kp-hn .side > * { opacity:0; visibility:hidden; }
  html.kp-hn.kp-hn-on .side > * { opacity:1; visibility:visible; transition:opacity .35s ease, visibility .35s; }
  html.kp-hn.kp-hn-on .hero-nav, html.kp-hn.kp-hn-on .hero-name { opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
  html.kp-hn.fx .pin-wrap #realisations { margin-top:55svh; }
  html.intro .hero-nav ul { opacity:0; }
  /* grande icône du logo : assez large pour entourer la tête, sans dépasser 58 % de la hauteur */
  .hero-hn { --iw:min(26vw, calc(58svh * 1.3796)); --ih:calc(var(--iw) / 1.3796); --gap:.9vw;
    /* KEVIN + écart + icône + écart + PARENT = toute la largeur ; les mots sont centrés à 57 % de la hauteur de l'icône,
       là où ses deux boucles atteignent leurs bords : KEVIN touche la grande boucle, PARENT la petite */
    --nh:calc((100vw - 80px - 2 * var(--gap) - var(--iw)) / 9.041); --ny:calc(var(--top) + var(--ih) * .57 - var(--nh) / 2);
    /* portrait : au plus 92 % de la hauteur d'écran, pas plus grand qu'il ne faut pour que la tête tienne dans l'anneau
       de l'icône, puis réduit de 5 % pour aérer les trois colonnes (centre de la tête à 13,5 % du haut de la photo) */
    --ph:calc(min(92svh, 1100px, calc((100svh - 28px - var(--iw) * .3624) / .865)) * .95);
    /* la ligne « KEVIN [icône] PARENT » descend d'autant : le centre de l'anneau (36,24 % de la largeur de l'icône)
       reste sur le centre de la tête */
    --top:clamp(28px, calc(100svh - var(--ph) * .865 - var(--iw) * .3624), 4.7vw);
    /* largeur du portrait, zones dégagées de part et d'autre du buste */
    --pw:calc(var(--ph) * .6746);
    --zg:calc(50vw - var(--pw) * .472 - 68px); --zd:calc(50vw - var(--pw) * .422 - 68px);
    /* menu : le plus grand possible sans toucher l'anneau de l'icône ni la tête. Le groupe de gauche mesure
       22,5 fois la taille du texte en Geist (24,4 en tr3a, 21,75 en Inter Tight) ; le bord de l'anneau à hauteur du menu
       est à ~33,3 % de la largeur d'écran, celui de la tête à 50vw moins 0,41 fois la largeur du portrait. */
    --mf:clamp(.9rem, min(calc(1.36vw - 2px), calc((50vw - var(--pw) * .41 - 56px) / 22.5)), 1.75rem);
    --zt:calc(var(--ny) + var(--nh) + 18px + var(--mf) + 26px); }
  .hero-hn .stage { left:0; }
  .hero-hn .hero-word { top:var(--top); width:var(--iw); left:calc(40px + var(--nh) * 3.869 + var(--gap)); right:auto; margin:0; }
  .hero-hn .hero-word svg { transform-origin:0 0; }
  .hero-hn .hero-name { display:block; position:absolute; top:var(--ny); left:40px; right:40px; height:var(--nh); color:#a6b3d2; pointer-events:none; }
  .hero-name svg { position:absolute; top:0; height:100%; width:auto; overflow:hidden; fill:currentColor; }
  .hn-kevin { left:0; transform-origin:0 0; }
  .hn-parent { right:0; transform-origin:100% 0; }
  .hero-hn .hero-photo img { height:var(--ph); transform:translateX(-50%); }
  .hero-nav { display:flex; justify-content:space-between; align-items:center; position:absolute; z-index:4; left:40px; right:40px;
    top:calc(var(--ny) + var(--nh) + 18px); pointer-events:none; --sep:1; }
  .hero-nav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; pointer-events:auto; font-size:var(--mf); }
  .hero-nav li { display:flex; align-items:center; }
  .hero-nav li + li::before { content:""; width:1.5px; height:.8em; margin:0 .85em; background:var(--ink); opacity:calc(var(--sep) * .4); }
  .hero-nav a { display:inline-block; font:600 1em/1 var(--display); letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap; transform-origin:0 50%; }
  .hero-nav a:hover { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
  /* promesse, accroche, boutons et seconde porte : un seul bloc à gauche, centré dans la hauteur libre */
  .hero-hn .hero-copy { position:absolute; inset:auto; left:40px; top:var(--zt); bottom:max(2.6vh, 18px); width:var(--zg);
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start; pointer-events:none; }
  .hero-hn .hero-copy > * { pointer-events:auto; }
  .hero-hn .hero-kicker { margin-bottom:12px; }
  .hero-hn h1 { font-size:clamp(2.3rem, min(3.2vw, 6.4svh), 4.2rem); line-height:1.02; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
  .hero-hn .hero-sub { margin-top:14px; max-width:38ch; font-size:clamp(1rem, 1.05vw, 1.12rem); }
  .hero-hn .hero-ctas { margin-top:20px; gap:8px; }
  .hero-hn .hero-ctas .btn { padding-inline:clamp(16px, 1.4vw, 22px); }
  .hero-hn .second-door { margin-top:16px; font-size:.86rem; }
  .hero-hn .hero-note { margin-top:8px; }
  /* badges : « 0 € » et « 10+ » côte à côte, les engagements dessous, calés à droite */
  .hero-hn .hero-badges { position:absolute; z-index:3; right:40px; top:var(--zt); bottom:max(2.6vh, 18px); width:var(--zd);
    display:grid; grid-template-columns:repeat(2, max-content); justify-content:end; align-content:center; gap:12px; }
  .hero-hn .hero-badges .glass { position:static; }
  .hero-hn .glass-list { grid-column:1 / -1; }
  .hero-hn .glass-exp { display:block; }
  .hero-hn .glass-exp strong { font-size:clamp(2.6rem, 3.5vw, 3.8rem); }
  .hero-hn .glass-stat strong { font-size:clamp(1.45rem, 1.8vw, 2rem); }
  .hero-hn :is(.glass-stat, .glass-exp) { display:flex; flex-direction:column; justify-content:center; }
  .hero-hn .glass li { font-size:clamp(1rem, 1.05vw, 1.15rem); }
  /* les cinq engagements posés directement sur le crème (plus de boîte), icônes marine, lignes plus aérées */
  .hero-hn .hero-badges .glass-list { background:none; border-color:transparent; padding:10px 0 0 2px; }
  .hero-hn .hero-badges .glass-list ul { gap:17px; }
  /* sans animation (mouvement réduit) : la promesse se décale pour laisser la place à la colonne de menu */
  html.kp-hn .hero-hn h1 { transition:translate .45s cubic-bezier(.2,.7,.2,1); }
  html.kp-hn.kp-hn-on .hero-hn h1 { translate:calc(var(--edge) - 40px) 0; }
  html.kp-hn.kp-hn-on .hero-hn :is(.hero-kicker, .hero-sub, .hero-ctas, .hero-note, .second-door, .glass) { opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
}
@media (min-width:1024px) and (max-width:1199px) { .hero-badges { display:contents; } }
/* Tablette à l'horizontale (1024 à 1199 px) : même règle, la promesse reste sur le fond dégagé à gauche du buste */
@media (min-width:1024px) and (max-width:1199px) {
  .hero-hn { --pw:calc(min(92svh, 1100px) * .6746); }
  .hero-hn .hero-copy { width:calc(50vw - var(--pw) * .33 - 64px); bottom:6vh; }
  .hero-hn h1 { font-size:clamp(2.2rem, 3.8vw, 2.9rem); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
  .hero-hn .hero-sub { font-size:1rem; }
  .hero-hn .hero-ctas { gap:8px; }
  .hero-hn .hero-ctas .btn { padding-inline:18px; }
}

/* Badges du hero : cartes blanches plates à fin liseré, chiffres et icônes en bleu marine, texte foncé ;
   plus de verre dépoli, d'ombre ni de flottement (un seul style, relié aux autres cartes du site) */
.glass-exp { display:none; }
.hero-hn .glass { background:#ffffff; color:var(--ink); border:1px solid var(--acc-line); border-radius:16px; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; padding:16px 20px;
  --acc:var(--navy); --acc-press:var(--navy-hover); --on-acc:#fffbf4; --acc-fg:var(--navy); --acc-soft:#ffffff; --on-acc-soft:var(--navy); }
.hero-hn .glass-stat, .hero-hn .glass-exp { text-align:center; padding:16px 22px 18px; }
.hero-hn .glass-stat span, .hero-hn .glass-exp span { margin-top:8px; font:500 .92rem/1.25 var(--text); color:var(--ink); }
/* les deux chiffres sur un lavande très pâle (rappel discret du grand logo), chiffre marine, texte noir, sans ombre ni liseré */
.hero-hn .glass-stat, .hero-hn .glass-exp { background:#eaecf6; border-color:#eaecf6; }
.glass-exp strong { display:block; font:800 clamp(3.2rem, 5vw, 4.6rem)/.9 var(--display); letter-spacing:-.05em; color:var(--acc-fg); }
.glass-exp span { display:block; }
.glass .gi { width:20px; height:20px; flex:none; fill:currentColor; color:var(--acc-fg); }
.hero-hn .glass ul { gap:11px; }
.hero-hn .glass li { font-weight:600; gap:12px; }
.hero-hn .glass-list { animation:pop .7s .55s cubic-bezier(.2,.7,.2,1) both; }
.hero-hn .glass-stat { animation:pop .7s .65s cubic-bezier(.2,.7,.2,1) both; }
.hero-hn .glass-exp { animation:pop .7s .75s cubic-bezier(.2,.7,.2,1) both; }
html.intro .hero-hn .glass, html.intro-done .hero-hn .glass { animation:none; }
@media (max-width:1023px) {
  .glass .gi { width:15px; height:15px; }
  .hero-hn .glass { padding:11px 13px; border-radius:14px; }
  .hero-hn .glass li { font-size:.8rem; gap:8px; }
  .hero-hn .glass ul { gap:7px; }
}
/* Hero : phrase d'accroche et boutons en PP Neue Montreal Book (demande de Kevin) */
.hero-sub, .hero-sub b { font-family:var(--text); font-weight:400; }
.hero-hn .hero-sub { hyphens:manual; }
/* sous le bouton principal, rattachée à lui : ce que l'on obtient, sans risque */
.hero-ctas { align-items:flex-start; }
.cta-main { display:flex; flex-direction:column; align-items:stretch; }
.cta-main .btn { flex:none; }
.hero-note { margin-top:8px; font-size:.84rem; line-height:1.3; color:var(--soft); text-align:center; }
@media (max-width:520px) { .hero-ctas .cta-main { flex:1 1 100%; } }
/* le métier, dit tout de suite au-dessus de la promesse */
.hero-kicker { margin-bottom:12px; font:500 clamp(.92rem, .95vw, 1rem)/1.3 var(--text); color:var(--acc-fg); }
/* Références juste après le premier écran : une ligne discrète de vrais clients, chacun relié à son étude de cas */
.refs-bar { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px; margin:0 0 clamp(44px, 6vw, 72px); padding-bottom:clamp(20px, 2.4vw, 28px);
  border-bottom:1px solid rgba(255,251,244,.12); font:600 .78rem/1.3 var(--display); letter-spacing:.07em; text-transform:uppercase; }
.refs-bar .refs-t { color:var(--acc-fg); }
.refs-bar a { color:var(--cream); text-decoration:none; opacity:.88; transition:opacity .2s ease; }
.refs-bar a:hover { opacity:1; text-decoration:underline; text-underline-offset:4px; }
/* point entre les noms ; celui qui tombe en début de ligne est masqué (liste décalée à gauche, débord caché) */
.refs-l { overflow:hidden; }
.refs-l > span { display:flex; flex-wrap:wrap; row-gap:10px; margin-left:-30px; }
.refs-l a::before { content:""; display:inline-block; width:4px; height:4px; margin:0 13px 2px; border-radius:50%; background:currentColor; opacity:.45; vertical-align:middle; }
/* « Sans abonnement » : le mot clé en grand, « Vous payez une fois » en complément */
.hero-hn .glass-stat strong { line-height:1.02; letter-spacing:-.02em; word-spacing:normal; }
@media (max-width:1199px) { .hero-hn .glass-stat strong { font-size:clamp(1.25rem, 5vw, 1.6rem); } }
.hero-ctas .btn { font-family:var(--text); font-weight:400; letter-spacing:0; }
.hero-word { color:#a6b3d2; }

/* Titres, menu et boutons en Geist (déclarée plus haut, avec le texte courant) */
:root { --display:'Geist', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; }
/* Titres en Geist 600 (choix de Kevin, 25 sept. 2026 : en 500 ils paraissaient trop légers) */
h1, h2, h3, .h2 { font-weight:600; letter-spacing:-.03em; }
.cta-title { font-weight:600; letter-spacing:-.04em; }
.hero h1, .page-hero h1 { font-weight:600; letter-spacing:-.035em; }

/* Sous les boutons de rendez-vous : « Échange offert · sans engagement », rattaché au bouton */
.ph-ctas, .cta-row { align-items:flex-start; }
.rdv-note { display:block; margin-top:8px; font-size:.84rem; line-height:1.3; color:var(--soft); text-align:center; }
.dark .rdv-note { color:var(--cream-soft); }
.foot-grid .cta-main { display:inline-flex; }
.bubble-rdv { margin-left:64px; display:grid; justify-items:center; }
.bubble-rdv .bubble-cta { margin-left:0; }
@media (max-width:520px) { .ph-ctas .cta-main, .cta-row .cta-main { flex:1 1 100%; } }

/* ---- Audit visuel du 25 sept. 2026 ---- */
/* Nom du prospect (pages de prospection) : un nom long ou sans espace ne fait plus déborder la page */
.js-nom { overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto; }
/* Grands titres équilibrés : plus de mot seul sur la dernière ligne */
h1, h2, .h2, .cta-title, .art-body h3 { text-wrap:balance; }
/* Zones tactiles : les petits liens et boutons gardent leur aspect mais se touchent plus facilement au doigt */
@media (pointer:coarse) {
  .more-link, .wlink, .cs-back, .legal a, .cta-alt a, .copy, .as-note a, .hb-link, .hb-brief, .qr-link { position:relative; }
  .more-link::after, .wlink::after, .cs-back::after, .legal a::after, .cta-alt a::after, .copy::after, .as-note a::after, .hb-link::after, .hb-brief::after, .qr-link::after { content:""; position:absolute; inset:-12px -6px; }
  .cta-alt { gap:14px 22px; }
}
/* Pastilles de texte (études de cas) : hauteur libre, une phrase longue passe sur deux lignes sans déborder */
.skills span { height:auto; min-height:42px; padding:9px 16px; line-height:1.35; }
/* Visuel sans capture (étude intranet) : sur tablette, un bloc à la taille de son contenu */
@media (max-width:1023px) { .cs-vis { aspect-ratio:auto; min-height:200px; max-width:520px; } }
/* Bulle de rendez-vous placée dans la rangée de l'avatar (automatisation, IA métier) */
.chat-row .bubble-rdv { margin-left:0; }
/* Garder un mot composé sur une ligne dans les titres (« sur-mesure », « e-commerce ») */
.nw { white-space:nowrap; }
/* Chiffres des tuiles (artisans) quand le menu latéral réduit la place */
@media (min-width:1100px) and (max-width:1366px) { .kpi strong { font-size:1.45rem; } }
/* Très petits téléphones (moins de 350 px) */
@media (max-width:350px) { .h2 { font-size:2rem; } .h2 .nw { white-space:normal; } }
/* Étude Made in Moldavie : bloc « Investissement & livraison » (ses règles n'existaient que dans l'ancienne feuille) */
.case-invest { margin-top:36px; background:var(--card); border-radius:22px; padding:clamp(22px, 3vw, 34px); }
.case-invest h3 { margin:0 0 16px; font:700 .7rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.case-invest-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.case-invest-grid > div { display:flex; flex-direction:column; gap:7px; background:var(--paper); border-radius:14px; padding:12px 14px; }
.case-invest-grid span { font:700 .7rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.case-invest-grid strong { font:600 .95rem/1.3 var(--display); }
.case-invest-note { margin-top:16px; color:var(--soft); text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
/* Études de cas : le lien vers le site en ligne tient dans sa case */
.cs-meta dd a { overflow-wrap:anywhere; }
@media (min-width:761px) { .cs-meta > div:has(a) { grid-column:span 2; } }
/* Études de cas : titre d'appel final sur toute la largeur quand le menu latéral réduit la place */
@media (min-width:1200px) and (max-width:1599px) { #rdv .cta-grid { grid-template-columns:1fr; } }
/* Pages légales : les cartes de la grille peuvent rétrécir (le tableau des cookies élargissait sa colonne entre 1200 et 1340 px) */
.legal-body > * { min-width:0; }
/* Pages légales : pas de trait d'union ajouté dans une adresse web, un e-mail ou une adresse postale */
.legal-sec a, .legal-dl dd { -webkit-hyphens:manual; hyphens:manual; }
/* Carrousel des réalisations (grand écran) : les cartes s'effacent en passant sous la colonne de menu */
@media (min-width:1200px) { .track { -webkit-mask-image:linear-gradient(90deg, transparent calc(var(--side) - 16px), #000 calc(var(--side) + 24px)); mask-image:linear-gradient(90deg, transparent calc(var(--side) - 16px), #000 calc(var(--side) + 24px)); } }
/* Carte d'offre : le bouton de rendez-vous et sa mention (bloc .cta-main) restent en bas, espacés de la liste */
.offer > .cta-main { margin-top:auto; padding-top:26px; align-self:flex-start; }
.offer > .cta-main .btn { margin-top:0; align-self:stretch; }
/* Blog : catégorie, date et « À la une » ne se coupent plus en deux lignes */
.post-top { flex-wrap:wrap; row-gap:8px; }
.post-cat, .post-date, .feat .kicker { white-space:nowrap; }
/* Contour de focus clavier crème sur les blocs sombres qui ne portent pas la classe .dark */
:where(.offer.night, .cs-quote, .pm-night) :focus-visible { outline-color:var(--cream); }
.cform .consent input:focus-visible { outline:2.5px solid var(--ink); outline-offset:2px; }
/* Atouts (applications) : la pastille reste sur la première ligne d'un titre sur deux lignes */
.usp b { align-items:flex-start; } .usp b::before { margin-top:3px; }
/* Petites étiquettes qui ne doivent pas se couper */
.drow em, .dash-tag { white-space:nowrap; }
/* Articles : lignes de lecture confortables quand la colonne s'élargit */
.art-body { max-width:760px; }
/* Grande citation (à propos) : sans les marges par défaut du navigateur */
.quote-big { margin:40px 0 0; }
/* Pied de page sur mobile : liens plus faciles à toucher */
@media (max-width:860px) { .foot-links ul { gap:0; } .foot-links a { display:inline-block; padding:12px 0; } }
/* Accueil sur téléphone et tablette : photo réduite d'un tiers (demande de Kevin, 25 sept. 2026), pour que le titre et
   le bouton « Parlons de votre projet » apparaissent dès le premier écran. L'anneau du logo suit la même échelle (× 0,68). */
@media (max-width:1023px) {
  .stage { height:clamp(292px, 80vw, 530px); }
  .hero-word { top:8px; width:min(51.5vw, 300px); }
  /* les pastilles (sans abonnement, engagements) passent sous les boutons au lieu de recouvrir la photo */
  .hero-badges { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; padding:6px var(--pad) 32px; }
  .hero-badges .glass { position:static; animation:none; }
}

/* Étude de cas Au Bout du Monde : ce qui se passe après une commande (bloc .dash dans le texte) */
.cs-chain { margin:28px 0 30px; transform:rotate(-.8deg); }
.cs-chain .drow { font-size:.95rem; line-height:1.35; }
.cs-chain .drow em { padding-left:10px; }
@media (max-width:520px) { .cs-chain { padding:16px; transform:none; } .cs-chain .drow { font-size:.9rem; gap:10px; padding:10px 11px; } }

/* Étude de cas Au Bout du Monde : ticket de préparation (même mise en page que le ticket imprimé par le drive) */
.cs-ticket { margin:0; justify-self:center; filter:drop-shadow(0 22px 26px rgba(11,11,11,.16)) drop-shadow(0 2px 3px rgba(11,11,11,.08)); }
.tk { --z:6px; width:calc(36ch + 36px); max-width:100%; padding:calc(var(--z) + 16px) 18px calc(var(--z) + 20px); background:linear-gradient(180deg, #ffffff, #f7f5f0); color:#1c1c1c; font:500 12.5px/1.45 ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; transform:rotate(-1.6deg);
  -webkit-mask:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(2 * var(--z)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(2 * var(--z)) 51% repeat-x;
  mask:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/calc(2 * var(--z)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/calc(2 * var(--z)) 51% repeat-x; }
.tk > span, .tk-c > span { display:block; }
.tk-p { white-space:pre; overflow:hidden; }
.tk-v { height:1.45em; }
.tk-l { font-size:1.5em; line-height:1.18; font-weight:600; letter-spacing:-.01em; margin:2px 0; }
.tk-b { font-weight:800; }
.tk-c { text-align:center; }
.cs-ticket figcaption { margin-top:18px; max-width:calc(36ch + 36px); font-size:.84rem; line-height:1.4; color:var(--soft); text-align:center; }
@media (max-width:400px) { .tk { font-size:11px; padding-left:14px; padding-right:14px; } }
/* Sur ordinateur, le ticket se place sous le titre, dans la colonne de gauche ; sur mobile, après le texte */
@media (min-width:901px) {
  .cs-tk-grid { grid-template-rows:auto 1fr; row-gap:36px; }
  .cs-tk-head { grid-column:1; grid-row:1; }
  .cs-tk-grid > .prose { grid-column:2; grid-row:1 / span 2; }
  .cs-tk-grid > .cs-ticket { grid-column:1; grid-row:2; justify-self:start; align-self:start; }
}
@media (min-width:901px) and (max-width:960px), (min-width:1200px) and (max-width:1300px) { .tk { font-size:11.5px; } }
.tk-nw { white-space:nowrap; }
.cs-reprise { margin-top:clamp(44px, 6vw, 72px); }
.cs-reprise + .results { margin-top:22px; }
.cs-extras .signals { margin-top:36px; }
@media (min-width:641px) and (max-width:980px) { .cs-extras .signal:last-child:nth-child(odd) { grid-column:1 / -1; } }

/* Pages restaurant : le drive vu de la cuisine (points clés + ticket) */
.rs-drive { display:grid; gap:clamp(34px, 5vw, 70px); align-items:start; }
@media (min-width:901px) { .rs-drive { grid-template-columns:minmax(0, 1fr) auto; } }
.rs-drive .cs-list { margin-top:26px; }
.rs-stats { display:flex; flex-wrap:wrap; gap:14px 40px; margin:32px 0 0; padding:0; list-style:none; }
.rs-stats strong { display:block; font:800 clamp(1.9rem, 3vw, 2.5rem)/1 var(--display); letter-spacing:-.045em; color:var(--navy); }
.rs-stats span { display:block; margin-top:7px; font-size:.92rem; color:var(--soft); }