/* Polices hébergées sur oufty.be : aucun appel à Google avant consentement,
   et une requête bloquante de moins au chargement. */
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+A720-A7FF; }

:root { --bg:#FAF8F4; --ink:#1C1A17; --muted:#6B655C; --line:#D8CDBA; --hair:#E4DCCC; --card-line:#E1D8C8; --accent:#B4472A; --accent-soft:#E0876A; --sand:#F3EEE4; --on-accent:#FCEFEA; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --sans:Manrope,"Helvetica Neue",Arial,sans-serif; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; position:relative; }
  /* grain — donne le grain « papier » de la direction éditoriale */
  body::before { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
  a { color:inherit; text-decoration:none; }
  img { max-width:100%; display:block; }
  h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; margin:0; line-height:1.02; text-wrap:pretty; }
  h1 { font-size:clamp(46px,6.6vw,92px); }
  h2 { font-size:clamp(34px,4.4vw,60px); }
  h3 { font-size:clamp(26px,2.7vw,38px); line-height:1.08; }
  p { margin:0; }
  em { font-style:italic; }
  .wrap { width:min(1296px,100% - 48px); margin-inline:auto; position:relative; z-index:2; }
  @media (max-width:640px){ .wrap { width:calc(100% - 36px); } }
  .eyebrow { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
  .eyebrow::before { content:attr(data-n); font-family:var(--serif); font-size:15px; letter-spacing:0; opacity:.75; }
  .eyebrow.plain::before { content:none; }
  .muted { color:var(--muted); }
  .rule { height:1px; background:var(--line); }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 26px; border-radius:999px; font-weight:600; font-size:16px; white-space:nowrap; transition:background .2s,color .2s,border-color .2s,transform .2s; }
  .btn:hover { transform:translateY(-1px); }
  .btn:active { transform:translateY(1px); }
  a:focus-visible, button:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }
  @media (hover:none){ .btn:hover { transform:none; } .story:hover { transform:none; } }
  .btn-primary { background:var(--ink); color:#F7F2E9; } .btn-primary:hover { background:var(--accent); }
  .btn-ghost { border:1.5px solid var(--ink); } .btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
  .btn svg { flex-shrink:0; transition:transform .2s; }
  .btn:hover svg.arr { transform:translateX(4px); }
  .ph { background:repeating-linear-gradient(135deg,#E9E1D2 0 12px,#E2D9C8 12px 24px); display:flex; align-items:center; justify-content:center; text-align:center; color:#8A8175; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:16px; border-radius:4px; }

  .js-reveal .reveal { opacity:0; transform:translateY(18px); transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); }
  .js-reveal .reveal.in { opacity:1; transform:none; }

  @media (prefers-reduced-motion:reduce){
    .reveal, .js-reveal .reveal { opacity:1 !important; transform:none !important; }
    *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
    html { scroll-behavior:auto; }
  }

  /* nav */
  header { position:sticky; top:0; z-index:20; background:rgba(250,248,244,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); }
  .nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 0; }
  .logo { display:inline-flex; align-items:center; gap:.42em; font-family:var(--serif); font-size:30px; letter-spacing:-.03em; line-height:1; }
  .logo .dot { color:var(--accent); }
  /* pastille Y — monogramme Oufty, charte v1.0 */
  .seal { display:inline-grid; place-items:center; width:1.12em; height:1.12em; border-radius:50%;
          background:var(--accent); flex:0 0 auto; }
  .seal .ymark { width:64%; height:64%; color:var(--bg); display:block; }
  .seal.ink { background:var(--ink); }
  .seal.on-dark { background:transparent; } .seal.on-dark .ymark { color:var(--accent-soft); width:100%; height:100%; }
  .nav nav { display:flex; gap:30px; font-size:15px; font-weight:600; }
  .nav nav a { position:relative; padding-bottom:2px; }
  .nav nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--accent); transition:right .25s; }
  .nav nav a:hover { color:var(--accent); } .nav nav a:hover::after { right:0; }
  .nav .btn { min-height:46px; padding:0 20px; font-size:15px; }
  .burger { display:none; background:none; border:0; padding:8px; cursor:pointer; }
  @media (max-width:880px){
    .nav nav { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 24px 16px; }
    .nav nav a { padding:14px 0; border-top:1px solid var(--hair); }
    .nav.open nav { display:flex; }
    .nav .btn { display:none; }
    .burger { display:block; }
  }

  /* hero */
  .hero { position:relative; isolation:isolate; overflow:hidden;
    padding:clamp(68px,9vw,132px) 0 clamp(64px,8vw,120px); }
  .hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:64% 30%; z-index:-2; }
  /* voile : crème opaque à gauche pour le texte, photo visible à droite */
  .hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(100deg, var(--bg) 0%, var(--bg) 40%, rgba(250,248,244,.97) 52%, rgba(250,248,244,.62) 66%, rgba(250,248,244,.24) 80%, rgba(250,248,244,.12) 100%),
      linear-gradient(180deg, rgba(250,248,244,.55) 0%, rgba(250,248,244,0) 22%, rgba(250,248,244,0) 72%, rgba(250,248,244,.5) 100%); }
  .hero .grid { display:grid; grid-template-columns:minmax(0,1fr); }
  .hero-copy { display:flex; flex-direction:column; gap:24px; max-width:640px; }
  .hero-copy .lead { font-size:clamp(17px,1.5vw,21px); max-width:560px; line-height:1.55; }
  .hero-sub { font-family:var(--serif); font-size:clamp(21px,2.1vw,28px); line-height:1.25; letter-spacing:-.01em; color:var(--muted); margin-top:-10px; }
  .hero-ctas { display:flex; flex-wrap:wrap; gap:14px; }
  .hero-proof { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; font-size:14.5px; font-weight:600;
    max-width:660px; color:var(--ink); background:rgba(250,248,244,.82); backdrop-filter:blur(3px);
    border-radius:4px; padding:11px 15px; margin-left:-15px; width:fit-content; }
  .hero-proof i { width:4px; height:4px; border-radius:50%; background:var(--accent); display:inline-block; }
  .card-float { position:absolute; right:clamp(24px,4vw,64px); bottom:clamp(24px,4vw,52px); z-index:2;
    background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border:1px solid var(--card-line);
    box-shadow:0 24px 48px -28px rgba(28,26,23,.4); border-radius:5px; padding:14px 20px;
    display:flex; flex-direction:column; gap:2px; }
  .card-float strong { font-size:16px; }
  .card-float span { font-size:14px; color:var(--muted); }
  @media (max-width:900px){
    .hero { padding:clamp(44px,7vw,72px) 0 clamp(56px,9vw,84px); }
    .hero-img { object-position:62% 32%; }
    .hero-bg { background:
      linear-gradient(180deg, rgba(250,248,244,.97) 0%, rgba(250,248,244,.95) 56%, rgba(250,248,244,.6) 76%, rgba(250,248,244,.3) 100%); }
    .hero-ctas .btn { flex:1 1 220px; }
    .card-float { right:18px; left:18px; bottom:22px; }
  }

  /* logos */
  .logos { padding:clamp(28px,4vw,44px) 0 clamp(44px,6vw,72px); }
  .logos-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 40px; padding:24px 0; }
  .logos-row .lbl { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .marquee { position:relative; overflow:hidden; flex:1 1 620px; min-width:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
  .marquee-track { display:flex; width:max-content; animation:slide 38s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state:paused; }
.marquee-set { display:flex; align-items:center; gap:14px 34px; padding-right:34px; flex-shrink:0; }
  .ref-logo { display:inline-flex; align-items:center; flex-shrink:0; opacity:.92; transition:opacity .2s, transform .2s; }
  .ref-logo img { height:40px; width:auto; max-width:none; display:block; }
  .ref-logo.tall img { height:54px; }
  .ref-logo.plain img { border-radius:5px; }
  .ref-logo:hover { opacity:1; transform:translateY(-1px); }
  .ref-name { font-family:var(--serif); font-size:23px; color:#8A8175; white-space:nowrap; letter-spacing:-.01em;
              flex-shrink:0; transition:color .2s; padding:4px 0; }
  .ref-name:hover { color:var(--accent); }
  @keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){
    .marquee { -webkit-mask-image:none; mask-image:none; overflow:visible; }
    .marquee-track { animation:none; width:auto; flex-wrap:wrap; }
    .marquee-set.dup { display:none; }
  }

  /* sections */
  section.block { padding:clamp(52px,7vw,104px) 0; }
  .sec-head { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:clamp(32px,4vw,52px); }
  .sec-head > div { display:flex; flex-direction:column; gap:16px; max-width:780px; }
  .link-u { font-weight:600; font-size:15px; border-bottom:1.5px solid var(--ink); padding-bottom:2px; white-space:nowrap; transition:color .2s,border-color .2s; }
  .link-u:hover { color:var(--accent); border-color:var(--accent); }
  @media (max-width:720px){ .sec-head { flex-direction:column; align-items:flex-start; gap:18px; } }

  .cards3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .cards2 { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px; align-items:start; }
  @media (max-width:900px){ .cards2 { grid-template-columns:minmax(0,1fr); } }
  /* grille éditoriale : une histoire en vedette, deux en second rang */
  .stories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .stories .feat { grid-column:1 / -1; display:grid; grid-template-columns:7fr 5fr; gap:0; padding:0; align-items:stretch; }
  .stories .feat .media { margin:0; grid-column:1; }
  .stories .feat .media .ph { height:100%; min-height:340px; border-radius:6px 0 0 6px; }
  .stories .feat .body { grid-column:2; display:flex; flex-direction:column; gap:18px; padding:36px 36px 34px; }
  .stories .feat .stat { position:static; align-self:flex-start; box-shadow:none; border-color:var(--line); font-size:56px; min-height:0; padding:2px 18px 6px; }
  .stories .feat .head { margin-top:0; }
  .stories .feat p { font-size:17px; }
  .feat-tag { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
  @media (max-width:1120px){ .stories { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:980px){
    .stories { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stories .feat { grid-template-columns:1fr; }
    .stories .feat .media, .stories .feat .body { grid-column:1; }
    .stories .feat .media .ph { min-height:220px; border-radius:6px 6px 0 0; }
    .stories .feat .body { padding:28px; }
    .stories .feat .stat { font-size:44px; }
  }
  @media (max-width:980px){ .cards3 { grid-template-columns:1fr; } }
  @media (max-width:900px){ .plan p, .plan li, .fine-row { font-size:16px; } }
  .story { display:flex; flex-direction:column; gap:18px; padding:0 28px 30px; background:#fff; border:1px solid var(--card-line); border-radius:6px;
    box-shadow:0 1px 0 rgba(28,26,23,.03),0 14px 34px -26px rgba(28,26,23,.22); transition:transform .25s,box-shadow .25s; overflow:hidden; }
  .story:hover { transform:translateY(-4px); box-shadow:0 1px 0 rgba(28,26,23,.03),0 30px 54px -30px rgba(28,26,23,.34); }
  .story:active { transform:translateY(-1px); }
  .story .media { margin:0 -28px; position:relative; }
  .story .media .ph { height:210px; border-radius:0; }
  .story .media img { width:100%; height:210px; object-fit:cover; display:block; }
  .stories .feat .media { display:flex; }
  .stories .feat .media img { width:100%; height:auto; min-height:340px; object-fit:cover; border-radius:6px 0 0 6px; }
  @media (max-width:980px){ .stories .feat .media img { min-height:0; height:230px; border-radius:6px 6px 0 0; } }
  @media (max-width:760px){ .stories { grid-template-columns:1fr; } }
  /* emplacement photo assumé — à remplacer par les vraies photos */
  .ph-todo { position:relative; background:#F1EADF; border:1px dashed var(--line); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px; border-radius:6px; color:var(--muted); }
  .ph-todo { text-transform:none; letter-spacing:0; }
  .ph-todo b { font-family:var(--serif); font-weight:400; font-size:26px; color:var(--ink); letter-spacing:-.01em; text-transform:none; }
  .ph-todo span { font-size:14.5px; max-width:32ch; line-height:1.55; text-transform:none; letter-spacing:0; }
  .ph-todo svg { color:var(--accent); }
  .story .stat { position:absolute; left:20px; bottom:-22px; display:flex; align-items:center; min-height:58px; background:#fff;
    border:1px solid var(--card-line); border-radius:4px; padding:0 16px; font-family:var(--serif); font-size:40px; line-height:1;
    letter-spacing:-.01em; color:var(--accent); box-shadow:0 10px 24px -18px rgba(28,26,23,.4); }
  .story .stat.txt { font-size:26px; }
  .story .head { margin-top:20px; }
  .story strong.t { font-size:18px; display:block; }
  .story .sub { font-size:14px; }
  .story p { font-size:16px; line-height:1.6; }

  /* avis Google */
  .avis { padding:0 0 clamp(52px,7vw,96px); }
  .avis-head { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:28px; }
  .avis-head .l { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .stars { display:inline-flex; gap:3px; }
  .score { font-family:var(--serif); font-size:26px; letter-spacing:-.01em; }
  .avis-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); }
  .avis-c { display:flex; flex-direction:column; gap:16px; padding:32px 32px 8px 0; border-right:1px solid var(--hair); }
  .avis-c:last-child { border-right:0; }
  .avis-c:not(:first-child) { padding-left:32px; }
  .avis-c q { font-family:var(--serif); font-size:23px; line-height:1.32; letter-spacing:-.01em; quotes:"\201C" "\201D"; }
  .avis-c .who { display:flex; flex-direction:column; gap:2px; margin-top:auto; }
  .avis-c .who b { font-size:15px; }
  .avis-c .who span { font-size:14px; color:var(--muted); }
  @media (max-width:900px){ .avis-grid { grid-template-columns:1fr; } .avis-c { border-right:0; border-bottom:1px solid var(--hair); padding:26px 0 !important; } .avis-c:last-child { border-bottom:0; } }

  .dark { background:var(--ink); color:#F7F2E9; position:relative; overflow:hidden; }
  .dark::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(680px 420px at 84% 12%,rgba(224,135,106,.16),rgba(224,135,106,0) 62%); }
  .dark .eyebrow { color:var(--accent-soft); }
  .dark .grid2 { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; }
  .dark .intro { display:flex; flex-direction:column; gap:18px; }
  .dark .intro p { color:#B8AF9F; font-size:17px; line-height:1.6; max-width:42ch; }
  .step { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0; border-top:1px solid #3A362F; }
  .step:last-child { border-bottom:1px solid #3A362F; }
  .step .n { font-family:var(--serif); font-size:40px; color:var(--accent-soft); line-height:1; }
  .step strong { font-size:21px; display:block; margin-bottom:6px; }
  .step span { color:#B8AF9F; line-height:1.6; display:block; max-width:64ch; }
  @media (max-width:900px){ .dark .grid2 { grid-template-columns:minmax(0,1fr); gap:32px; } }

  .plan { display:flex; flex-direction:column; gap:20px; padding:32px; border:1px solid var(--card-line); border-radius:6px; background:#fff; transition:box-shadow .25s; }
  .plan:hover { box-shadow:0 20px 44px -32px rgba(28,26,23,.35); }
  .plan.hl { border:1.5px solid var(--ink); box-shadow:0 20px 44px -34px rgba(28,26,23,.4); }
  .price { font-family:var(--serif); font-size:46px; line-height:1; letter-spacing:-.02em; }
  .price small { font-family:var(--sans); font-size:17px; letter-spacing:0; color:var(--muted); }
  .plan ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:15px; }
  .plan li { display:flex; gap:10px; align-items:flex-start; }
  .plan li svg { flex-shrink:0; margin-top:4px; }
  .opt { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:4px; background:var(--sand); font-size:14px; line-height:1.5; }
  .subline { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px dashed var(--line); border-radius:4px; font-size:15px; }
  .subline b { font-weight:700; }
  .subline .alt { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .subline .alt span { color:var(--muted); font-size:14.5px; }
  .note { margin-top:22px; font-size:14.5px; line-height:1.6; color:var(--muted); }

  /* aperçu fiche Google — illustration, pas une capture */
  .gmb { position:relative; flex:0 0 auto; align-self:center; }
  .gmb-card { width:236px; background:#fff; border:1px solid var(--card-line); border-radius:8px; padding:14px 15px 13px;
              display:flex; flex-direction:column; gap:11px; box-shadow:0 18px 36px -26px rgba(28,26,23,.42); }
  .gmb-top { display:flex; align-items:center; gap:10px; }
  .gmb-av { width:34px; height:34px; border-radius:8px; background:var(--sand); color:var(--accent);
            font-family:var(--serif); font-size:19px; display:grid; place-items:center; flex:0 0 auto; }
  .gmb-top div { display:flex; flex-direction:column; line-height:1.3; }
  .gmb-top b { font-size:14px; }
  .gmb-top span { font-size:12.5px; color:var(--muted); }
  .gmb-rate { display:flex; align-items:center; gap:7px; }
  .gmb-note { font-family:var(--serif); font-size:22px; line-height:1; }
  .gmb-stars { display:inline-flex; gap:1px; }
  .gmb-cnt { font-size:12.5px; color:var(--muted); }
  .gmb-bars { display:flex; flex-direction:column; gap:5px; }
  .gmb-bars i { height:5px; border-radius:3px; background:var(--hair); position:relative; }
  .gmb-bars i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:3px; background:var(--accent-soft); }
  .gmb-acts { display:flex; gap:5px; }
  .gmb-acts span { flex:1; text-align:center; font-size:11.5px; font-weight:600; color:var(--muted);
                   border:1px solid var(--hair); border-radius:999px; padding:5px 2px; }
  .gmb-badge { position:absolute; right:-14px; top:-13px; display:inline-flex; align-items:center; gap:5px;
               background:var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700;
               letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:6px 11px 6px 9px;
               box-shadow:0 10px 22px -14px rgba(180,71,42,.85); }
  @media (max-width:1080px){ .gmb { display:none; } }

  .xsell { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:clamp(36px,4vw,52px);
    padding:30px 34px; border:1px solid var(--card-line); border-radius:6px; background:#fff; }
  .xsell .l { display:flex; flex-direction:column; gap:8px; max-width:520px; }
  .xsell .l strong { font-family:var(--serif); font-weight:400; font-size:27px; letter-spacing:-.01em; }
  .xsell .l span { font-size:15.5px; line-height:1.6; color:var(--muted); }
  .xsell .r { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0; }
  .xsell .r .p { font-family:var(--serif); font-size:38px; line-height:1; letter-spacing:-.02em; }
  .xsell .r .p small { font-family:var(--sans); font-size:15px; color:var(--muted); letter-spacing:0; }
  @media (max-width:860px){ .xsell { flex-direction:column; align-items:stretch; } .xsell .r { align-items:stretch; } .xsell .r .btn { width:100%; } }
  .fine { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; padding:clamp(36px,4vw,52px) 0 8px; margin-top:clamp(36px,4vw,52px); border-top:1px solid var(--line); }
  .fine > div:first-child { display:flex; flex-direction:column; gap:14px; }
  .fine-row { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--hair); font-size:17px; line-height:1.5; }
  .fine-row:last-child { border-bottom:0; }
  .fine-row svg { flex-shrink:0; margin-top:3px; }
  @media (max-width:900px){ .fine { grid-template-columns:minmax(0,1fr); gap:18px; } }
  .guarantee { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 32px; border-radius:6px; background:var(--sand); margin-top:36px; }
  .guarantee .l { display:flex; align-items:center; gap:16px; font-size:17px; line-height:1.5; }
  @media (max-width:820px){ .guarantee { flex-direction:column; align-items:stretch; } .guarantee .btn { width:100%; } }


  /* vitrine des sites réalisés — onglets + image qui change */
  .showwork { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .sw-tabs { display:flex; flex-wrap:wrap; gap:6px; }
  .sw-tab { font:600 13.5px/1 var(--sans); color:var(--muted); background:none; border:1px solid transparent;
            border-radius:999px; padding:9px 14px; min-height:34px; cursor:pointer; transition:color .2s,background .2s,border-color .2s; }
  .sw-tab:hover { color:var(--ink); border-color:var(--hair); }
  .sw-tab.on { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
  .sw-stage { position:relative; border:1px solid var(--card-line); border-radius:6px; background:#fff; overflow:hidden;
              box-shadow:0 1px 0 rgba(28,26,23,.03),0 20px 44px -32px rgba(28,26,23,.3); }
  .sw-pane { margin:0; display:flex; flex-direction:column; }
  .sw-pane[hidden] { display:none !important; }
  .sw-pane img { width:100%; height:auto; aspect-ratio:1100/688; object-fit:cover; object-position:top center;
                 border-bottom:1px solid var(--hair); }
  .sw-pane figcaption { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; padding:14px 18px 15px; }
  .sw-pane figcaption b { font-size:15.5px; }
  .sw-pane figcaption span { font-size:14px; color:var(--muted); }
  .sw-pane figcaption a { display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:14px; font-weight:600; color:var(--accent); padding:4px 0; }
  .sw-pane figcaption a:hover { text-decoration:underline; }
  .js-sw .sw-pane { animation:swin .34s cubic-bezier(.22,.61,.36,1); }
  @keyframes swin { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .js-sw .sw-pane { animation:none; } }
  @media (max-width:900px){ .sw-pane figcaption a { margin-left:0; } }


  /* FAQ */
  .faq { border-top:1px solid var(--line); max-width:920px; }
  .faq-i { border-bottom:1px solid var(--hair); }
  .faq-i summary { display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
    padding:22px 0; cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(20px,2.1vw,26px);
    line-height:1.24; letter-spacing:-.01em; transition:color .2s; }
  .faq-i summary::-webkit-details-marker { display:none; }
  .faq-i summary:hover { color:var(--accent); }
  .faq-i summary svg { flex:0 0 auto; margin-top:6px; color:var(--accent); transition:transform .25s; }
  .faq-i[open] summary svg { transform:rotate(180deg); }
  .faq-i summary:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }
  .faq-a { padding:0 0 24px; max-width:66ch; }
  .faq-a p { font-size:16.5px; line-height:1.68; color:var(--muted); }
  .faq-a strong { color:var(--ink); }
  @media (max-width:640px){ .faq-i summary { gap:16px; padding:19px 0; } }

  .about { display:grid; grid-template-columns:6fr 6fr; gap:clamp(32px,5vw,72px); align-items:center; }
  .about .ph { aspect-ratio:4/5; border-radius:6px; }
  .about .txt { display:flex; flex-direction:column; gap:22px; }
  .about .txt p { font-size:17px; line-height:1.68; max-width:62ch; }
  .about .txt p:first-of-type::first-letter { float:left; font-family:var(--serif); font-size:76px; line-height:.78;
    padding:6px 12px 0 0; color:var(--accent); }

  .me { display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--card-line);
        border-radius:6px; background:#fff; box-shadow:0 14px 32px -28px rgba(28,26,23,.4); align-self:flex-start; }
  .me img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
  .me > div { display:flex; flex-direction:column; gap:1px; }
  .me b { font-size:16px; }
  .me span { font-size:14px; color:var(--muted); }
  .me a { display:inline-flex; align-items:center; gap:6px; margin-top:5px; font-size:14px; font-weight:600;
          color:var(--accent); padding:3px 0; }
  .me a:hover { text-decoration:underline; }

  .about .tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:14px; font-weight:600; }
  .about .tags i { width:4px; height:4px; border-radius:50%; background:var(--accent); display:inline-block; }
  @media (max-width:900px){ .about { grid-template-columns:1fr; gap:32px; } .about .ph { aspect-ratio:16/11; } }

  .zones { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-left:-28px; }
  .zone { display:flex; flex-direction:column; gap:8px; padding:32px 28px; border-right:1px solid var(--hair); }
  .zone:last-child { border-right:0; }
  .zone:first-child { border-left:0; }
  .zone .k { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .zone .z { font-family:var(--serif); font-size:25px; line-height:1.22; letter-spacing:-.01em; }
  @media (max-width:900px){ .zones { grid-template-columns:repeat(2,minmax(0,1fr)); margin-left:0; } .zone { padding-inline:0 28px; } .zone:nth-child(2n+1){ padding-left:0; } .zone:nth-child(2n){ padding-left:28px; } .zone:nth-child(2n){ border-right:0; } .zone:nth-child(n+3){ border-top:1px solid var(--hair); } }
  @media (max-width:540px){ .zones { grid-template-columns:1fr; margin-left:0; }
    .zone, .zone:nth-child(2n), .zone:nth-child(2n+1) { border-right:0; padding-inline:0; border-top:1px solid var(--hair); }
    .zone:first-child { border-top:0; } }

  .contact { margin:0 auto clamp(48px,6vw,72px); padding:clamp(40px,6vw,84px); border-radius:6px; color:#F7F2E9;
    background:radial-gradient(760px 480px at 88% 8%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),var(--accent);
    display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(32px,4vw,56px); align-items:center; }
  .contact h2 { font-size:clamp(36px,4.8vw,66px); }
  .contact p { color:var(--on-accent); font-size:18px; line-height:1.6; max-width:560px; margin-top:18px; }
  .contact .ctas { display:flex; flex-direction:column; gap:12px; }
  .contact .btn-light { background:#F7F2E9; color:var(--ink); } .contact .btn-light:hover { background:#fff; }
  .contact .btn-out { border:1.5px solid rgba(247,242,233,.7); color:#F7F2E9; } .contact .btn-out:hover { background:rgba(255,255,255,.14); border-color:#F7F2E9; }
  .contact .meta { display:flex; flex-direction:column; gap:4px; color:var(--on-accent); font-size:15px; padding-top:10px; }
  .contact .meta a { display:inline-block; padding:4px 0; }
  .contact .meta a:hover { color:#fff; }
  @media (max-width:900px){ .contact { grid-template-columns:minmax(0,1fr); } }

  footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 32px; padding:24px 0 52px; font-size:14px; color:var(--muted); border-top:1px solid var(--hair); }
  footer .links { display:flex; flex-wrap:wrap; gap:8px 24px; }
  footer .links a { display:inline-block; padding:4px 0; }
  footer .links a:hover { color:var(--accent); }

  /* ── page /fiche-google ─────────────────────────────────────── */
  .hero.split .grid { grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,5vw,72px); align-items:center; }
  /* fond de carte © OpenStreetMap — jamais une capture Google */
  .hero.carte .hero-img { object-position:56% 46%; }
  .hero.carte .hero-bg { background:
      linear-gradient(100deg, var(--bg) 0%, var(--bg) 34%, rgba(250,248,244,.96) 48%, rgba(250,248,244,.74) 64%, rgba(250,248,244,.42) 82%, rgba(250,248,244,.3) 100%),
      linear-gradient(180deg, rgba(250,248,244,.5) 0%, rgba(250,248,244,0) 24%, rgba(250,248,244,0) 70%, rgba(250,248,244,.55) 100%); }
  .pins { position:absolute; inset:0; z-index:0; pointer-events:none; }
  .pin { position:absolute; border-radius:50%; }
  .pin:not(.moi) { width:9px; height:9px; background:var(--muted); opacity:.5;
    box-shadow:0 0 0 5px rgba(138,131,117,.13); }
  .pin.p1 { right:34%; top:26%; } .pin.p2 { right:16%; top:64%; } .pin.p3 { right:41%; top:72%; }
  .pin.moi { right:29%; top:44%; width:34px; height:34px; display:grid; place-items:center;
    background:var(--accent); color:var(--on-accent);
    box-shadow:0 0 0 8px rgba(180,71,42,.16), 0 12px 24px -12px rgba(180,71,42,.75); }
  @media (max-width:1080px){ .pins { display:none; } }
  .hero.split .gmb { display:block; }
  .hero.split .gmb-card { width:300px; padding:17px 18px 16px; }
  .hero.split .gmb-note { font-size:26px; }
  .hero.split .gmb-top b { font-size:15px; }
  @media (max-width:900px){
    .hero.split .grid { grid-template-columns:minmax(0,1fr); }
    .hero.split .gmb { display:none; }
  }
  .duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  @media (max-width:820px){ .duo { grid-template-columns:minmax(0,1fr); } }
  .duo .plan h3 { font-size:23px; letter-spacing:-.01em; }
  .duo .plan ul { font-size:15.5px; }
  .duo .plan.no { background:var(--sand); border-style:dashed; }
  .duo .plan.no:hover { box-shadow:none; }
  .inc { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 32px; margin-top:6px; }
  @media (max-width:820px){ .inc { grid-template-columns:minmax(0,1fr); } }
  .inc > div { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--hair); }
  .inc svg { flex:0 0 auto; margin-top:3px; }
  .inc b { display:block; font-size:16.5px; margin-bottom:3px; }
  .inc span { font-size:14.5px; line-height:1.55; color:var(--muted); }
  .price-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px;
    padding:28px 32px; border:1.5px solid var(--ink); border-radius:6px; background:#fff; margin-bottom:clamp(28px,3vw,40px); }
  .price-box .pl { display:flex; flex-direction:column; gap:6px; }
  .price-box .pl span { font-size:15px; color:var(--muted); max-width:46ch; line-height:1.55; }
  @media (max-width:620px){ .price-box { padding:24px; } .price-box .btn { width:100%; } }

  /* ── page /contact ──────────────────────────────────────────── */
  .ct-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,3.5vw,48px); align-items:start; }
  @media (max-width:940px){ .ct-grid { grid-template-columns:minmax(0,1fr); } }
  .ct-form { padding:clamp(26px,3vw,38px); border:1px solid var(--card-line); border-radius:6px; background:#fff; }
  .form { display:flex; flex-direction:column; gap:16px; margin-top:26px; }
  .f-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
  @media (max-width:560px){ .f-row { grid-template-columns:minmax(0,1fr); } }
  .f { display:flex; flex-direction:column; gap:7px; }
  .f > span { font-size:14.5px; font-weight:600; }
  .f > span i { color:var(--accent); font-style:normal; }
  .f input, .f textarea, .f select { font-family:inherit; font-size:16px; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:13px 14px; width:100%; }
  .f textarea { resize:vertical; min-height:110px; line-height:1.5; }
  .f input::placeholder, .f textarea::placeholder { color:var(--muted); opacity:1; }
  .f input:focus, .f textarea:focus { outline:2.5px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .f-set { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .f-set legend { font-size:14.5px; font-weight:600; padding:0; margin-bottom:2px; }
  .f-choices { display:flex; flex-wrap:wrap; gap:9px; }
  .ch { display:inline-flex; align-items:flex-start; gap:9px; cursor:pointer; }
  .f-choices .ch { border:1px solid var(--line); border-radius:999px; padding:9px 15px 9px 13px; font-size:14.5px; transition:border-color .2s,background .2s; }
  .f-choices .ch:hover { border-color:var(--accent); }
  .f-choices .ch:has(input:checked) { border-color:var(--ink); background:var(--sand); font-weight:600; }
  .ch input { accent-color:var(--accent); width:17px; height:17px; flex:0 0 auto; margin:0; }
  .f-choices .ch input { margin-top:1px; }
  .ch:focus-within { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; }
  .rgpd { font-size:14.5px; line-height:1.5; color:var(--muted); align-items:flex-start; margin-top:2px; }
  .rgpd input { margin-top:2px; }
  .hp { position:absolute; left:-9999px; opacity:0; height:0; width:0; }
  .form .btn { align-self:flex-start; border:0; cursor:pointer; font-family:inherit; }
  @media (max-width:560px){ .form .btn { align-self:stretch; width:100%; } }
  .ct-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:96px; }
  @media (max-width:940px){ .ct-side { position:static; } }
  .ct-card { display:flex; flex-direction:column; gap:10px; padding:26px 28px; border-radius:6px; background:var(--sand); }
  .ct-card strong { font-family:var(--serif); font-weight:400; font-size:25px; letter-spacing:-.01em; }
  .ct-card p { font-size:15px; line-height:1.6; color:var(--muted); }
  .ct-card .btn { margin-top:6px; }
  .ct-line { display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--hair); }
  .ct-card .ct-line:first-of-type { border-top:0; padding-top:4px; }
  .ct-line svg { flex:0 0 auto; margin-top:2px; }
  .ct-line span { display:flex; flex-direction:column; gap:2px; }
  .ct-line b { font-size:16px; }
  .ct-line small { font-size:13.5px; color:var(--muted); line-height:1.45; }
  a.ct-line:hover b { color:var(--accent); }
  /* hero compact — pages de conversion, le contenu doit arriver vite */
  .hero.compact { padding:clamp(40px,5vw,68px) 0 clamp(30px,3.5vw,44px); }
  .hero.compact h1 { font-size:clamp(40px,5vw,68px); max-width:16ch; }
  .hero.compact .hero-copy { max-width:720px; gap:20px; }

  /* frise du délai — hero de /creation-site-internet */
  .frise { width:334px; background:#fff; border:1px solid var(--card-line); border-radius:8px;
    padding:18px 20px 16px; box-shadow:0 18px 36px -26px rgba(28,26,23,.42); }
  .fr-h { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-bottom:12px; }
  .fr-h b { flex:1 1 auto; }
  .fr-h b { font-size:14.5px; }
  .fr-h span { font-family:var(--serif); font-size:26px; line-height:1; color:var(--accent); white-space:nowrap; flex:0 0 auto; }
  .fr-l { display:flex; align-items:baseline; gap:12px; padding:9px 0 9px 20px; position:relative;
    border-top:1px solid var(--hair); }
  .fr-l::before { content:""; position:absolute; left:2px; top:16px; width:8px; height:8px;
    border-radius:50%; background:var(--line); }
  .fr-l::after { content:""; position:absolute; left:5.5px; top:24px; bottom:-9px; width:1px; background:var(--hair); }
  .fr-l:last-child::after { display:none; }
  .fr-l.on::before { background:var(--accent); box-shadow:0 0 0 4px rgba(180,71,42,.15); }
  .fr-j { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); flex:0 0 58px; white-space:nowrap; }
  .fr-l.on .fr-j { color:var(--accent); }
  .fr-t { font-size:14.5px; }
  .fr-l.on .fr-t { font-weight:700; }

  /* ── bibliothèque de cas ────────────────────────────────────── */
  .cas-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:14px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .cas-meta b { color:var(--accent); font-weight:700; }
  .cas-meta i { width:4px; height:4px; border-radius:50%; background:var(--line); display:inline-block; }
  .kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:6px; overflow:hidden; margin:clamp(28px,3.5vw,44px) 0; }
  @media (max-width:720px){ .kpis { grid-template-columns:minmax(0,1fr); } }
  .kpi { background:#fff; padding:24px 26px; display:flex; flex-direction:column; gap:5px; }
  .kpi b { font-family:var(--serif); font-size:clamp(38px,4.4vw,54px); line-height:1; letter-spacing:-.02em; color:var(--accent); }
  .kpi span { font-size:15px; line-height:1.45; }
  .kpi small { font-size:13.5px; color:var(--muted); line-height:1.45; }
  .cas { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,3vw,48px); align-items:start;
    padding:clamp(30px,3.5vw,46px) 0; border-top:1px solid var(--hair); }
  @media (max-width:880px){ .cas { grid-template-columns:minmax(0,1fr); gap:14px; } }
  .cas h2 { font-size:clamp(28px,3.2vw,42px); }
  .cas .c { display:flex; flex-direction:column; gap:16px; }
  .cas p { font-size:17px; line-height:1.68; color:var(--muted); max-width:66ch; }
  .cas p strong { color:var(--ink); }
  .cas ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; font-size:16.5px; }
  .cas li { display:flex; gap:11px; align-items:flex-start; line-height:1.55; }
  .cas li svg { flex-shrink:0; margin-top:4px; }
  .verbatim { display:flex; flex-direction:column; gap:10px; padding:26px 30px; border-radius:6px;
    background:var(--sand); margin:clamp(24px,3vw,36px) 0; }
  .verbatim q { font-family:var(--serif); font-size:clamp(21px,2.2vw,28px); line-height:1.32; letter-spacing:-.01em; quotes:"«\00a0" "\00a0»"; }
  .verbatim .who { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:14.5px; color:var(--muted); }
  .verbatim .who b { color:var(--ink); font-size:15px; }
  /* index des cas */
  .cas-list { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  @media (max-width:880px){ .cas-list { grid-template-columns:minmax(0,1fr); } }
  .cas-card { display:flex; flex-direction:column; border:1px solid var(--card-line); border-radius:6px;
    background:#fff; overflow:hidden; transition:box-shadow .25s, transform .25s; }
  .cas-card:hover { box-shadow:0 22px 46px -32px rgba(28,26,23,.38); transform:translateY(-2px); }
  .cas-card img { width:100%; height:224px; object-fit:cover; }
  .cas-card .b { display:flex; flex-direction:column; gap:10px; padding:24px 26px 26px; flex:1; }
  .cas-card .ch { font-family:var(--serif); font-size:44px; line-height:1; color:var(--accent); }
  .cas-card strong { font-size:21px; }
  .cas-card .s { font-size:14.5px; color:var(--muted); }
  .cas-card p { font-size:15.5px; line-height:1.6; color:var(--muted); }
  .cas-card .go { margin-top:auto; padding-top:8px; font-weight:600; font-size:15px; color:var(--accent);
    display:inline-flex; align-items:center; gap:7px; }
  .cas-card:hover .go svg { transform:translateX(4px); }
  .cas-card .go svg { transition:transform .2s; }
  .autres { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .autres a { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px;
    padding:9px 16px; font-size:14.5px; font-weight:600; transition:border-color .2s,color .2s; }
  .autres a:hover { border-color:var(--accent); color:var(--accent); }
  .suivant { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
    padding:24px 28px; border:1px solid var(--card-line); border-radius:6px; margin-top:clamp(28px,3.5vw,44px); }
  .suivant .l { display:flex; flex-direction:column; gap:3px; }
  .suivant .l span { font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .suivant .l b { font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:-.01em; }

  /* hero des pages de cas — photo du client en arrière-plan */
  .hero.cas-hero { position:relative; isolation:isolate; overflow:hidden; }
  .hero.cas-hero .hero-img { object-position:50% 42%; }
  .hero.cas-hero .hero-bg { background:
      linear-gradient(100deg, var(--bg) 0%, var(--bg) 40%, rgba(250,248,244,.96) 52%, rgba(250,248,244,.7) 68%, rgba(250,248,244,.42) 86%, rgba(250,248,244,.32) 100%),
      linear-gradient(180deg, rgba(250,248,244,.52) 0%, rgba(250,248,244,0) 26%, rgba(250,248,244,0) 68%, rgba(250,248,244,.6) 100%); }
  @media (max-width:900px){
    .hero.cas-hero .hero-bg { background:
      linear-gradient(180deg, rgba(250,248,244,.96) 0%, rgba(250,248,244,.94) 54%, rgba(250,248,244,.66) 78%, rgba(250,248,244,.4) 100%); }
  }

  /* ── bandeau de consentement ────────────────────────────────── */
  .cookie { position:fixed; left:0; right:0; bottom:0; z-index:60; padding:0 0 clamp(12px,2vw,20px); pointer-events:none; }
  .ck-in { width:min(1080px,100% - 32px); margin-inline:auto; pointer-events:auto;
    display:flex; align-items:center; justify-content:space-between; gap:22px 28px; flex-wrap:wrap;
    background:#fff; border:1px solid var(--card-line); border-radius:8px; padding:20px 24px;
    box-shadow:0 26px 54px -26px rgba(28,26,23,.42); }
  .ck-txt { display:flex; flex-direction:column; gap:5px; flex:1 1 440px; min-width:0; }
  .ck-txt strong { font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:-.01em; }
  .ck-txt span { font-size:14.5px; line-height:1.55; color:var(--muted); }
  .ck-txt a { border-bottom:1.5px solid var(--line); color:var(--ink); font-weight:600; }
  .ck-txt a:hover { color:var(--accent); border-color:var(--accent); }
  /* Refuser et Accepter doivent peser pareil : même taille, même place */
  .ck-btn { display:flex; gap:12px; flex:0 0 auto; }
  .ck-btn .btn { min-height:48px; padding:0 26px; font-size:15px; flex:1 1 auto; }
  @media (max-width:620px){
    .ck-in { padding:18px 20px; }
    .ck-btn { width:100%; }
    .ck-btn .btn { flex:1 1 0; padding:0 12px; }
  }

  /* garde-fou : rien ne doit élargir la page au-delà de l'écran */
  .price, .kpi b, .cas-card .ch { overflow-wrap:anywhere; }

  /* confirmation d'envoi, à la place du formulaire */
  .envoi-ok { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:26px;
    padding:clamp(26px,3vw,36px); border:1.5px solid var(--ink); border-radius:6px; background:var(--sand); }
  .ok-rond { width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--on-accent);
    display:grid; place-items:center; margin-bottom:4px; }
  .envoi-ok strong { font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.8vw,34px); letter-spacing:-.01em; }
  .envoi-ok p { font-size:16px; line-height:1.6; color:var(--muted); max-width:52ch; }
  .envoi-ok p a { font-weight:700; color:var(--ink); border-bottom:1.5px solid var(--line); }
  .envoi-ok p a:hover { color:var(--accent); border-color:var(--accent); }
  .envoi-ok .ok-plus { padding-top:12px; border-top:1px solid var(--line); width:100%; }
  .envoi-ok .btn { margin-top:2px; }
  .envoi-ko { font-size:15px; line-height:1.55; color:var(--accent); font-weight:600;
    padding:13px 15px; border:1px solid var(--accent); border-radius:4px; background:rgba(180,71,42,.06); }
  .envoi-ko a { text-decoration:underline; }
  @media (max-width:560px){ .envoi-ok .btn { width:100%; } }
  /* Les <li> sont des conteneurs flex : tout le texte doit tenir dans UN seul
     élément, sinon chaque <strong> devient un élément à part, écarté par le gap.
     D'où le <span> qui enveloppe le contenu dès qu'il y a du balisage inline. */
  .plan li > span, .cas li > span { min-width:0; flex:1 1 auto; }