/* ============================================================
   Votre Enseigne — feuille de style des pages intérieures
   (realisations, tarifs, la-difference, qui-je-suis, questions)

   Source de vérité du DESIGN : le <style> inline de index.html.
   Cette feuille en est la copie du 02/08/2026, plus une section
   « composants des pages intérieures » ajoutée en fin de fichier.
   Si le design de l'accueil évolue, reporter ici les blocs communs
   (nav, footer, boutons, cartes) — voir README.
   ============================================================ */

  /* Coche et flèche en SVG. Vérifié dans les cmap : ✓ (U+2713) manque à
     Bricolage Grotesque, et les deux Enseigne Sans le dessinent autrement
     qu'Apple Symbols ou Segoe UI Symbol. Poppins n'avait ni l'un ni l'autre.
     Le SVG garantit un seul dessin sur les neuf pages, quelle que soit la
     machine du prospect. À refaire vérifier à chaque changement de police. */
  /* Les icônes du menu sont en SVG et non en emoji : un emoji est dessiné par
     la police système, donc beige chez Apple, noir chez Microsoft, autre
     encore chez Google. En SVG le dessin est le même partout et il prend la
     couleur du texte. */
  .ic-menu { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em;
    margin-right: .5em; color: var(--brand-soft); }
  .ic-coche, .ic-fleche { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }
  .ic-fleche { width: 1.05em; }


  /* Deux familles, trois fichiers, aucune requête externe : le site doit
     s'afficher en rendez-vous client même sans réseau.
     Fabriqués par outils/construire-polices.py, qui explique chaque choix.
     « Enseigne Sans » EST Source Sans 3. Le renommage est imposé par la licence
     OFL : elle interdit à une version modifiée, et un sous-ensemble en est une,
     de porter le nom réservé « Source ». Les deux licences sont dans fonts/. */
  @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bricolage-800.woff2') format('woff2'); }
  @font-face { font-family: 'Enseigne Sans'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/enseigne-var.woff2') format('woff2'); }
  /* Vrai italique. Avant le lot 0, .rea-quote demandait font-style:italic sans
     qu'aucune fonte italique existe : le navigateur penchait la romaine par
     cisaillement, une contrefaçon, et pile sur le témoignage client, le texte
     le plus scruté par un prospect. */
  @font-face { font-family: 'Enseigne Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/enseigne-italique.woff2') format('woff2'); }

  :root {
    --bg: #0A0B14;
    --bg-soft: #10111C;
    --glass: rgba(255,255,255,.035);
    --glass-2: rgba(255,255,255,.06);
    --line: rgba(255,255,255,.09);
    --line-strong: rgba(139,141,255,.35);
    --ink: #F2F3FB;
    --ink-soft: #A7ABC4;
    --brand: #6B6BF7;
    --brand-soft: #9D9DFF;
    --brand-deep: #4B4BE0;
    --glow: rgba(107,107,247,.45);
    /* Couleur du filet sous les deux phrases mises en valeur.
       CHOIX ARRÊTÉ PAR ANTOINE LE 08/08/2026, après avoir comparé quatre
       variantes : l'ocre. C'est la seule couleur chaude du site et elle ne
       sert QUE là, deux fois sur neuf pages, ce qui en fait un signe et non
       une décoration. Le violet avait été écarté parce qu'il répétait un
       accent déjà présent partout. Ne pas rouvrir la question sans lui. */
    --souligne: #D9A441;
    --radius: 20px;
    /* Le repli abandonne Avenir Next et Century Gothic : ce sont des
       géométriques, or c'est précisément la géométrie de Poppins qu'on quitte.
       Si le woff2 n'arrive pas, mieux vaut tomber sur un grotesque système. */
    --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Enseigne Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }

  /* angle animable du liseré des réalisations (enregistré pour interpoler) */
  @property --wa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

  * { box-sizing: border-box; }
  /* Les éléments de formulaire n'héritent PAS de la police du document : sans
     cette ligne un <button class="btn"> retombe sur Arial pendant qu'un
     <a class="btn"> affiche Enseigne Sans, dans le même bouton du même écran.
     Le défaut est passé inaperçu tant que .btn déclarait lui-même sa police. */
  button, input, select, textarea { font-family: inherit; }

  html { scroll-padding-top: 5.4rem; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.153rem; line-height: 1.55; font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  .wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.4rem); position: relative; }

  /* Le fond : UNE lumière, qui tombe du haut.
     Avant, c'était un ciel étoilé animé sur deux calques plus trois halos
     violets. C'est le décor des pages de projets crypto, ça ne disait rien du
     métier, et ça tournait en boucle sur le téléphone du prospect.
     Une enseigne est éclairée par le dessus : le fond dit maintenant quelque
     chose du sujet. La lumière est NEUTRE, pas violette, pour ne pas
     réintroduire le dégradé de marque qui signait la page. */
  .fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .fx .lueur { position: absolute; inset: 0;
    background: radial-gradient(150% 44% at 50% -16%, rgba(228,228,244,.14), transparent 62%); }

  header.site, main, .hero, footer.site { position: relative; z-index: 1; }

  /* h1 et h2 en Bricolage 800 ; h3 reste en Enseigne Sans : à cette taille une
     ExtraBold d'affiche devient un pavé d'encre, et h3 sert surtout d'étiquette.
     letter-spacing repasse à 0 : le -.015em compensait la rondeur de Poppins,
     alors que Bricolage est déjà nettement plus serrée. La resserrer encore
     ferait coller les lettres.
     font-optical-sizing: auto laisse Bricolage adapter ses chasses à la taille
     réelle du texte, de 19 px à 73 px : c'est le seul axe conservé du fichier. */
  h1, h2, h3 { line-height: 1.14; letter-spacing: 0; text-wrap: balance; margin: 0; }
  h1, h2 { font-family: var(--font-display); font-weight: 800; font-optical-sizing: auto; }
  h3 { font-weight: 650; line-height: 1.3; }
  h2 { font-size: clamp(2.014rem, 4.24vw, 2.968rem); }
  h3 { font-size: 1.356rem; }
  p { margin: 0; }
  a { color: inherit; }
  .eyebrow { font-size: 0.859rem; font-weight: 625; text-transform: uppercase; letter-spacing: .18em; color: var(--brand-soft); }

  /* utilitaires accessibilité */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip { position: absolute; top: -100px; left: 1rem; z-index: 100; background: var(--brand-deep); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 12px 12px; font-weight: 600; text-decoration: none; transition: top .15s ease; }
  .skip:focus { top: 0; }

  .btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 625; font-size: 1.073rem; padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
  .btn-primary { background: linear-gradient(180deg, #5B5BF0, var(--brand-deep)); color: #fff;
    box-shadow: 0 0 0 1px rgba(157,157,255,.55) inset, 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 28px -6px var(--glow), 0 0 40px -8px var(--glow); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(157,157,255,.7) inset, 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 34px -6px var(--glow), 0 0 60px -6px var(--glow); }
  .btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .btn-ghost:hover { border-color: var(--line-strong); box-shadow: 0 0 24px -8px var(--glow); }
  .btn:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }

  /* navigation flottante en pilule */
  header.site { position: sticky; top: .8rem; z-index: 30; }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .6rem .5rem 1.2rem; margin-top: .8rem;
    background: rgba(13,14,24,.72); border: 1px solid var(--line); border-radius: 999px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 40px -18px rgba(0,0,0,.9); }
  .brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 800; font-size: 1.166rem; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
  .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #B9B9FF, var(--brand) 60%); box-shadow: 0 0 12px var(--glow); flex: none; }
  .nav-links { display: flex; gap: 1.5rem; align-items: center; }
  .nav-links a { text-decoration: none; color: var(--ink-soft); font-size: 1.051rem; font-weight: 500; transition: color .12s ease; }
  .nav-links a:hover { color: #fff; }
  .nav .btn { padding: .55rem 1.15rem; }
  .nav-tel { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.051rem; white-space: nowrap; }
  .nav-tel:hover { color: var(--brand-soft); }
  .nav-tel svg { width: 16px; height: 16px; color: var(--brand-soft); }

  /* menu burger mobile */
  .burger { display: none; background: var(--glass-2); border: 1px solid var(--line); border-radius: 999px; width: 42px; height: 42px; cursor: pointer; padding: 0; place-items: center; color: var(--ink); }
  .burger svg { width: 20px; height: 20px; }
  .burger .ic-close { display: none; }
  .burger[aria-expanded="true"] .ic-open { display: none; }
  .burger[aria-expanded="true"] .ic-close { display: block; }
  .mobile-menu { display: none; }
  @media (max-width: 860px) {
    .nav-links, .nav .nav-tel { display: none; }
    .burger { display: grid; }
    .mobile-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + .5rem); background: #101120; border: 1px solid var(--line-strong); border-radius: 20px; padding: .8rem; flex-direction: column; gap: .2rem; box-shadow: 0 24px 60px -20px rgba(0,0,0,.95), 0 0 40px -16px var(--glow); }
    .mobile-menu.open { display: flex; }
    .mobile-menu a { text-decoration: none; color: var(--ink); font-weight: 600; padding: .75rem 1rem; border-radius: 12px; }
    .mobile-menu a:hover, .mobile-menu a:focus-visible { background: var(--glass-2); color: var(--brand-soft); }
  }

  /* hero */
  .hero { position: relative; overflow: clip; }
  .hero .wrap { padding-top: clamp(3.6rem, 8vw, 6.4rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
  .hero-inner { max-width: 850px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .pill { display: inline-flex; align-items: center; gap: .55rem; background: var(--glass-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .95rem; font-size: 0.927rem; font-weight: 600; color: var(--ink); box-shadow: 0 0 26px -10px var(--glow); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,.8); }
  .hero h1 { font-size: clamp(2.65rem, 6.784vw, 4.558rem); margin: 1.3rem 0 0; font-weight: 800; }
  /* Mise en valeur : un trait tiré SOUS les mots, plus un dégradé DANS les mots.
     Le dégradé violet sur un titre est le marqueur numéro un des pages sorties
     d'un modèle : c'est le seul effet typographique qui s'obtient en une ligne
     de CSS sans rien savoir de la police employée. Il avait en plus un défaut
     mesurable : il descendait jusqu'à #6B6BF7, soit 4,7:1 sur le fond, si bien
     que la phrase qui porte l'argument commercial était la MOINS lisible du
     titre. En blanc pur elle passe à 19,6:1.
     L'emphase se fabrique désormais en retirant de la lumière au reste de la
     phrase, et en posant un filet plein sous le fragment : une enseigne peinte
     se lit comme ça depuis un siècle, lettre pleine et filet dessous.
     Le filet est continu (skip-ink: none) et posé à .2em, c'est-à-dire sous les
     jambages du g de « Google » et du q de « qu'on », qu'il ne coupe jamais. */
  .hero h1 { color: #C9CDE4; }
  .hero h1 .hl,
  .vs-punch .hl2 { color: #fff;
    text-decoration-line: underline; text-decoration-color: var(--souligne);
    text-decoration-thickness: .07em; text-underline-offset: .2em;
    text-decoration-skip-ink: none; }
  .hero .lede { color: var(--ink-soft); font-size: 1.277rem; margin-top: 1.4rem; max-width: 36em; }
  .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
  .assure { margin-top: 1.1rem; font-size: 0.994rem; color: var(--ink-soft); }

  /* bouton d'appel du hero : un halo qui respire et un reflet qui balaie,
     pour inviter au clic sans crier. La flèche glisse au survol. Le tout est
     inerte si l'utilisateur préfère réduire les animations. */
  .btn-appel { position: relative; overflow: hidden; }
  .btn-appel .fl { display: inline-block; margin-left: .1rem; transition: transform .18s ease; }
  .btn-appel:hover .fl { transform: translateX(4px); }
  @media (prefers-reduced-motion: no-preference) {
    .btn-appel { animation: appel-halo 2.6s ease-in-out infinite alternate; }
    .btn-appel::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%; pointer-events: none;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
      transform: skewX(-18deg); animation: appel-reflet 4.6s ease-in-out 1.2s infinite; }
  }
  @keyframes appel-halo {
    from { box-shadow: 0 0 0 1px rgba(157,157,255,.55) inset, 0 1px 0 rgba(255,255,255,.35) inset, 0 8px 28px -6px var(--glow), 0 0 40px -8px var(--glow); }
    to   { box-shadow: 0 0 0 1px rgba(157,157,255,.85) inset, 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 34px -6px var(--glow), 0 0 70px -4px var(--glow), 0 0 0 7px rgba(107,107,247,.13); }
  }
  @keyframes appel-reflet {
    0% { left: -45%; }
    38% { left: 115%; }
    100% { left: 115%; }
  }

  /* --- ajustements petits écrans (mobile) --- */
  @media (max-width: 620px) {
    .hero h1 { font-size: clamp(2.014rem, 8.48vw, 2.385rem); }
    .hero .lede { font-size: 1.186rem; margin-top: 1.15rem; }
    .pill { font-size: 0.847rem; padding: .38rem .78rem; }
    .sec-head h2, .hero h1 { letter-spacing: 0; }
  }
  @media (max-width: 440px) {
    .hero h1 { font-size: clamp(1.802rem, 9.01vw, 2.226rem); }
    .hero .wrap { padding-top: clamp(2.4rem, 7vw, 3.6rem); }
    .nav { padding: .45rem .5rem .45rem .9rem; }
    .nav .btn { padding: .5rem .85rem; font-size: 0.949rem; }
    .brand { font-size: 1.06rem; }
    /* « Trouvez le site fait pour vous » doit tenir sur UNE ligne même à
       320px : police et marges internes des boutons du hero réduites */
    .hero-cta .btn { font-size: 0.994rem; padding-left: .9rem; padding-right: .9rem; }
  }


  section { padding: clamp(3.4rem, 6vw, 5.6rem) 0; }
  .sec-head { max-width: 44em; margin: 0 auto 2.6rem; text-align: center; }
  .sec-head h2 { margin-top: .6rem; }
  /* Largeurs de lecture rebasées après le changement de police. Enseigne Sans
     est plus étroite que Poppins : à largeur de bloc identique, il entre plus
     de caractères par ligne, et l'œil décroche au-delà de 75. Mesuré ligne à
     ligne dans le navigateur, pas estimé. */
  .sec-head p { color: var(--ink-soft); margin-top: .8rem; max-width: 41em; margin-left: auto; margin-right: auto; }

  .grid { display: grid; gap: 1.1rem; }
  .cards-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .cards-3 { grid-template-columns: 1fr; } }
  /* réalisations */
  .work { position: relative; display: block; text-decoration: none; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .work:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 22px 60px -24px var(--glow); }
  /* liseré lumineux (demande d'Antoine 02/08) : une pointe de lumière violette
     parcourt lentement le cadre de chaque réalisation, comme une comète.
     Les trois cartes sont décalées d'un tiers de tour pour ne pas tourner en
     chœur. Masque en anneau : seul le contour s'éclaire, jamais le contenu.
     Sans animations (reduced-motion) ou sans @property : simple bordure. */
  .work::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 2; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--wa, 0deg), transparent 0 72%, rgba(157,157,255,.7) 84%, #EDEDFF 89%, rgba(157,157,255,.7) 93%, transparent 99%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude; }
  @media (prefers-reduced-motion: no-preference) {
    .work::before { opacity: 1; animation: cadre-lum 7s linear infinite; }
    .cards-3 .work:nth-child(2)::before { animation-delay: -2.33s; }
    .cards-3 .work:nth-child(3)::before { animation-delay: -4.66s; }
  }
  @keyframes cadre-lum { to { --wa: 360deg; } }
  .work .thumb { aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.431rem; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
  .thumb.t1 { background: linear-gradient(150deg, #1E4A36, #C57C15); }
  .thumb.t3 { background: linear-gradient(150deg, #0284C7, #0D9488); }
  .thumb.t4 { background: linear-gradient(150deg, #2E5220, #C8901B); }
  .thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 0, rgba(255,255,255,.18), transparent 60%); }
  .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; }
  .work .meta { padding: 1.1rem 1.3rem; }
  .work .meta b { font-weight: 625; font-size: 1.153rem; color: #fff; display: block; }
  .work .meta span { color: var(--ink-soft); font-size: 1.006rem; }
  .work .tagr { position: absolute; top: .8rem; left: .8rem; z-index: 2; background: rgba(5,5,12,.55); color: #fff; font-size: 0.814rem; font-weight: 600; padding: .27rem .65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .tagr.concept { background: rgba(5,5,12,.45); color: var(--ink-soft); }

  /* comparateur « La différence » : site généré en 1 prompt vs version travaillée */
  #difference[hidden] { display: none; } /* masqué provisoirement : l'attribut hidden doit gagner même en flex mobile */
  .vs-term { max-width: 760px; margin: 0 auto 1.5rem; background: rgba(10,11,22,.85); border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 0 50px -22px var(--glow), 0 24px 60px -34px rgba(0,0,0,.9); }
  .vs-term-bar { display: flex; align-items: center; gap: .45rem; padding: .6rem .95rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
  .vs-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--line); }
  .vs-term-bar span { margin-left: .5rem; font-size: 0.814rem; font-weight: 625; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
  .vs-term-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.7; color: var(--ink); padding: 1rem 1.2rem 1.15rem; min-height: 5.2em; margin: 0; }
  .vs-term-text .vs-dollar { color: var(--brand-soft); margin-right: .5em; }
  .vs-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--brand-soft); box-shadow: 0 0 10px var(--glow); }
  @media (prefers-reduced-motion: no-preference) { .vs-caret { animation: vs-blink 1s steps(1) infinite; } }
  @keyframes vs-blink { 50% { opacity: 0; } }

  /* barre avant/après : les deux sites superposés, la poignée révèle l'un ou l'autre.
     pointer-events actifs -> on scrolle librement chaque côté (gauche = 1 prompt, droite = ma version) */
  /* fenêtre volontairement plus basse depuis le rangement du 01/08 : la démo
     reste parlante mais n'écrase plus la page (lot 3) */
  .vs-stage { --vs-x: 100%; position: relative; height: clamp(380px, 56vh, 540px); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: #07070D; box-shadow: 0 0 70px -26px var(--glow), 0 34px 90px -44px rgba(0,0,0,.95); }
  .vs-pane { position: absolute; inset: 0; }
  /* Viewport haut donné aux cadres (desktop) : le hero cinématique de STREET est pensé pour la
     pleine hauteur d'un écran et s'écrasait (titre superposé au mot « STREET ») dans la fenêtre
     courte du comparateur. 1000px = rendu propre en largeur bureau ; la fenêtre reste une lucarne
     qui défile. (Sur mobile/tactile, la règle du media-query descend à 820px.) */
  .vs-pane iframe { width: 100%; height: 1000px; border: 0; display: block; background: #0b0b0f; pointer-events: auto; }
  .vs-pane-a { z-index: 2; -webkit-clip-path: inset(0 calc(100% - var(--vs-x)) 0 0); clip-path: inset(0 calc(100% - var(--vs-x)) 0 0); } /* 1 prompt au-dessus, découpé selon la barre (préfixe -webkit pour Safari/iOS) */
  @media (prefers-reduced-motion: no-preference) {
    .vs-stage.vs-anim .vs-pane-a { transition: -webkit-clip-path 1.1s cubic-bezier(.3,.8,.25,1), clip-path 1.1s cubic-bezier(.3,.8,.25,1); }
    .vs-stage.vs-anim .vs-handle { transition: left 1.1s cubic-bezier(.3,.8,.25,1); }
  }
  .vs-handle { position: absolute; top: 0; bottom: 0; left: var(--vs-x); width: 0; z-index: 5; opacity: 0; pointer-events: none; } /* inerte tant que l'intro n'est pas finie */
  .vs-stage.vs-ready .vs-handle { opacity: 1; pointer-events: auto; }
  .vs-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: linear-gradient(180deg, var(--brand-soft), var(--brand) 55%, var(--brand-deep)); box-shadow: 0 0 18px var(--glow); }
  .vs-grip { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: ew-resize; touch-action: none; padding: 0;
    background: linear-gradient(180deg, #5B5BF0, var(--brand-deep)); border: 1px solid rgba(180,180,255,.75); color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 0 34px -4px var(--glow), 0 14px 30px -12px rgba(0,0,0,.8); }
  .vs-grip svg { width: 26px; height: 26px; }
  .vs-grip:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
  .vs-tag { position: absolute; top: .9rem; z-index: 6; font-size: 0.881rem; font-weight: 625; padding: .38rem .85rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(5,5,12,.72); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; opacity: 0; transition: opacity .4s ease .15s; }
  .vs-stage.vs-ready .vs-tag { opacity: 1; }
  .vs-tag-a { left: .9rem; }
  .vs-tag-b { right: .9rem; background: linear-gradient(180deg, #5B5BF0, var(--brand-deep)); border-color: rgba(180,180,255,.7); color: #fff; box-shadow: 0 0 20px -6px var(--glow); }
  /* repère de défilement, s'efface dès qu'on scrolle un des deux côtés */
  .vs-cue { position: absolute; right: .9rem; bottom: .9rem; z-index: 6; display: inline-flex; align-items: center; gap: .4rem; font-weight: 625; font-size: 0.814rem; padding: .4rem .8rem; border-radius: 999px; color: var(--ink); background: rgba(5,5,12,.78); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; opacity: 0; transition: opacity .35s ease; }
  .vs-stage.vs-ready .vs-cue { opacity: 1; }
  .vs-stage.vs-scrolled .vs-cue { opacity: 0; }
  @media (prefers-reduced-motion: no-preference) { .vs-cue svg { animation: vs-bob 1.5s ease-in-out infinite; } }
  @keyframes vs-bob { 50% { transform: translateY(3px); } }

  .vs-toggle { display: none; }
  .vs-legend { max-width: 760px; margin: 1.7rem auto 0; text-align: center; }
  .vs-punch { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.325rem, 2.756vw, 1.696rem); color: #C9CDE4; }

  .vs-notes { color: var(--ink-soft); font-size: 1.073rem; margin-top: .8rem; }
  .vs-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.3rem; }
  .vs-proof { font-size: 0.927rem; color: var(--ink-soft); margin-top: 1.1rem; }
  .vs-proof a { color: var(--brand-soft); }

  /* écrans étroits ET écrans tactiles (iPad/tablette) : bascule fiable au lieu du scroll qui « traverse »
     la barre, dont le pass-through tactile est fragile hors Chrome (repli de robustesse) */
  @media (max-width: 720px), (pointer: coarse) {
    .vs-stage { height: clamp(430px, 64vh, 580px); height: clamp(430px, 64svh, 580px); } /* fenêtre un peu plus haute sur mobile, mais compacte depuis le lot 3 */
    /* Le hero cinématique de STREET est pensé pour la pleine hauteur d'un téléphone : dans la
       fenêtre courte du comparateur il s'écrasait (le grand titre et le mot « STREET » en
       filigrane se chevauchaient). On donne aux cadres un viewport haut (820px) pour un rendu
       propre ; la fenêtre reste une lucarne qui défile sur ce rendu. */
    .vs-pane iframe { height: 820px; }
    .vs-handle, .vs-tag, .vs-cue { display: none; }
    /* Bascule mobile : un SEUL site affiché et interactif à la fois. On ne se fie plus au
       clip-path pour cacher l'autre (sur iOS le site du dessus, découpé mais présent,
       interceptait le toucher et empêchait de faire défiler le site du dessous) : le côté
       inactif est réellement masqué, donc seul le site affiché reçoit le doigt. */
    .vs-stage[data-active] .vs-pane { visibility: hidden; }
    .vs-stage[data-active="a"] .vs-pane-a,
    .vs-stage[data-active="b"] .vs-pane-b { visibility: visible; }
    .vs-toggle { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
    .vs-toggle button { font-weight: 625; font-size: 1.017rem; padding: .65rem 1.15rem; border-radius: 999px; cursor: pointer; background: var(--glass); border: 1px solid var(--line); color: var(--ink-soft); transition: background .15s ease, color .15s ease, border-color .15s ease; }
    .vs-toggle button.on { background: linear-gradient(180deg, #5B5BF0, var(--brand-deep)); border-color: rgba(180,180,255,.75); color: #fff; box-shadow: 0 0 24px -8px var(--glow); }
    .vs-toggle button:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; }
  }

  /* étapes */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  @media (max-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .steps { grid-template-columns: 1fr; } }
  .step { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
  .step .n { font-family: var(--font-display); font-weight: 800; font-size: 1.039rem; color: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1rem;
    background: linear-gradient(160deg, #5B5BF0, #3B3BC8);
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px -8px var(--glow); }
  .step b { font-weight: 625; font-size: 1.186rem; display: block; margin-bottom: .3rem; color: #fff; }
  .step p { color: var(--ink-soft); font-size: 1.04rem; }

  /* tarifs */
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; max-width: none; margin: 0 auto; }
  @media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 460px; } }
  .plan { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem; display: flex; flex-direction: column; position: relative; }
  .plan.feature { border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(107,107,247,.16), rgba(107,107,247,.05) 55%, rgba(255,255,255,.02)); box-shadow: 0 0 60px -18px var(--glow), 0 30px 70px -40px rgba(0,0,0,.9); }
  .plan .tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.814rem; font-weight: 625; text-transform: uppercase; letter-spacing: .1em; padding: .32rem .9rem; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(180deg, #5B5BF0, var(--brand-deep)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 20px -6px var(--glow); }
  .plan h3 { color: #fff; }
  .plan .who { color: var(--ink-soft); font-size: 1.017rem; margin-top: .35rem; min-height: 2.4em; }
  .plan .price { font-family: var(--font-display); font-weight: 800; font-size: 2.544rem; margin: 1rem 0 .1rem; color: #fff; font-variant-numeric: tabular-nums; }
  .plan .price small { font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; }
  /* « à partir de » passe sur sa propre ligne, sur ordinateur seulement.
     Sans ça la 3e formule déborde : « à partir de 1 590 € une fois » demande
     293 px dans une colonne de 280, et la carte se désaligne des deux autres.
     Rétrécir ne suffit pas : les chiffres de Bricolage ExtraBold sont plus
     larges que ceux de Poppins Bold À TAILLE ÉGALE, il faudrait descendre à
     2,3rem, c'est-à-dire SOUS la taille d'avant le changement de police, sur
     le chiffre le plus commercial du site.
     Borné à 621 px : en dessous, la formule est repliée et le prix tient sur
     une seule ligne à droite du titre, disposition validée le 6 août. */
  @media (min-width: 621px) {
    .plan .price small:first-child { display: block; margin-bottom: -.1em; }
  }
  .plan .rec { display: inline-block; font-size: 0.96rem; color: var(--brand-soft); font-weight: 600; background: rgba(107,107,247,.14); border: 1px solid rgba(139,141,255,.3); padding: .22rem .7rem; border-radius: 999px; margin-bottom: 1rem; align-self: flex-start; }
  .plan ul { list-style: none; padding: 0; margin: .4rem 0 1.7rem; display: flex; flex-direction: column; gap: .62rem; }
  .plan li { font-size: 1.062rem; padding-left: 1.7rem; position: relative; color: var(--ink-soft); }
  .plan li::before { content: ""; position: absolute; left: 0; top: .35em; width: .82em; height: .82em;
    background: var(--brand-soft); filter: drop-shadow(0 0 6px var(--glow));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3.4 10.7 4.3 4.3 8.9-9.9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3.4 10.7 4.3 4.3 8.9-9.9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  .plan .btn { margin-top: auto; justify-content: center; }

  .plans-note { text-align: center; color: var(--ink-soft); font-size: 1.051rem; margin-top: 1.4rem;
    /* Sans largeur maximale, cette note faisait 114 caractères par ligne sur un
       écran large, là où l'œil décroche au-delà de 75. Le défaut existait déjà
       avec Poppins (119 caractères), il n'est pas né du changement de police. */
    max-width: 42em; margin-left: auto; margin-right: auto; }

  /* offres : apparition en cascade avec un léger flou, sans gêner l'inclinaison au survol (garde :not(.revealed)) */
  .js .plans .plan.reveal:not(.revealed) { filter: blur(7px); transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
  .js .plans .plan.reveal.in { filter: blur(0); }
  .js .plans .plan.reveal:nth-child(2):not(.revealed) { transition-delay: .14s; }
  .js .plans .plan.reveal:nth-child(3):not(.revealed) { transition-delay: .28s; }
  @media (prefers-reduced-motion: reduce) { .js .plans .plan.reveal:not(.revealed) { filter: none; transition: none; } }

  /* bloc "qui je suis" (fusionné avec les 4 étapes depuis le lot 3) : la photo
     s'aligne en haut et accompagne la lecture en restant collante */
  .about { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
  .about-photo { position: sticky; top: 5.2rem; }
  .about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8), 0 0 55px -20px var(--glow); }
  .about-text h2 { margin: .55rem 0 1rem; }
  .about-text p { color: var(--ink-soft); margin-bottom: 1.6rem; max-width: 42em; }
  /* les 4 étapes intégrées à la section « Qui je suis » : fil vertical compact
     (numéro à gauche, texte à droite), même à l'écran large */
  .fil-t { font-size: 1.13rem; color: #fff; margin: 1.6rem 0 .9rem; }
  .steps.fil { grid-template-columns: 1fr; gap: .6rem; margin-bottom: 1.6rem; }
  .steps.fil .step { display: grid; grid-template-columns: 38px 1fr; column-gap: .85rem; padding: .9rem 1.1rem; align-items: start; }
  .steps.fil .step .n { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 0.975rem; margin-bottom: 0; }
  .steps.fil .step b { font-size: 1.13rem; margin-bottom: .15rem; align-self: center; }
  .steps.fil .step p { font-size: 1.017rem; line-height: 1.45; }
  @media (max-width: 720px) { .about { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 440px; margin: 0 auto; } .about-photo { position: static; max-width: 290px; } /* en colonne unique, la photo collante suivait le défilement par-dessus le texte : elle reste à sa place */ .about-text p { margin-left: auto; margin-right: auto; } .steps.fil, .steps.fil .step { text-align: left; } .steps.fil { width: 100%; } }

  /* faq */
  .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.4rem; }
  @media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
  details { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: 15px; padding: 1.1rem 1.3rem; transition: border-color .14s ease; }
  details[open] { border-color: var(--line-strong); }
  details summary { font-weight: 625; font-size: 1.13rem; color: #fff; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
  details summary::-webkit-details-marker { display: none; }
  details summary::after { content: "+"; color: var(--brand-soft); font-size: 1.582rem; font-weight: 600; text-shadow: 0 0 12px var(--glow); }
  details[open] summary::after { content: "–"; }
  details p { color: var(--ink-soft); font-size: 1.062rem; margin-top: .7rem; }

  /* devis : faisceau de lumière façon "Book your demo" */
  #devis { position: relative; overflow: clip; }

  /* poussières d'étoiles qui montent doucement dans le final */
  #devis .dust, #devis .dust2 { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
  #devis .dust {
    background-image:
      radial-gradient(2.6px 2.6px at 24% 78%, rgba(255,255,255,.85), transparent 60%),
      radial-gradient(1.6px 1.6px at 38% 58%, rgba(230,230,255,.7), transparent 60%),
      radial-gradient(3.2px 3.2px at 55% 84%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(1.8px 1.8px at 68% 62%, rgba(230,230,255,.75), transparent 60%),
      radial-gradient(2.2px 2.2px at 82% 76%, rgba(255,255,255,.7), transparent 60%);
  }
  #devis .dust2 {
    background-image:
      radial-gradient(4px 4px at 30% 70%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(3.4px 3.4px at 62% 52%, rgba(220,220,255,.45), transparent 60%),
      radial-gradient(4.6px 4.6px at 76% 82%, rgba(255,255,255,.4), transparent 60%);
    filter: blur(2px);
  }
  @media (prefers-reduced-motion: no-preference) {
    #devis .dust { animation: monter 9s linear infinite; }
    #devis .dust2 { animation: monter 14s linear 3s infinite; }
  }
  @keyframes monter {
    0% { transform: translateY(46px); opacity: 0; }
    25% { opacity: .5; }
    75% { opacity: .28; }
    100% { transform: translateY(-70px); opacity: 0; }
  }

  /* bouton final façon "Book a demo" : cerclage, reflet et paillettes */
  .btn-glossy { position: relative; overflow: hidden; padding: 1.05rem 2.2rem; font-size: 1.164rem;
    box-shadow: 0 0 0 1px rgba(157,157,255,.6) inset, 0 1px 0 rgba(255,255,255,.45) inset,
      0 0 0 6px rgba(200,200,255,.10), 0 0 0 7.5px rgba(157,157,255,.22),
      0 14px 40px -8px var(--glow), 0 0 70px -10px var(--glow); }
  .btn-glossy:hover { box-shadow: 0 0 0 1px rgba(180,180,255,.75) inset, 0 1px 0 rgba(255,255,255,.5) inset,
      0 0 0 6px rgba(200,200,255,.14), 0 0 0 7.5px rgba(157,157,255,.3),
      0 18px 48px -8px var(--glow), 0 0 90px -8px var(--glow); }
  .btn-glossy::before { content: ""; position: absolute; left: 7%; right: 7%; top: 6%; height: 46%; border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)); pointer-events: none; }
  .btn-glossy::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(1.7px 1.7px at 21% 66%, rgba(255,255,255,.95), transparent 60%),
      radial-gradient(1.2px 1.2px at 36% 40%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(2px 2px at 58% 72%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1.3px 1.3px at 74% 36%, rgba(255,255,255,.85), transparent 60%),
      radial-gradient(1.1px 1.1px at 88% 62%, rgba(255,255,255,.7), transparent 60%); }
  .devis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: start; }
  @media (max-width: 800px) { .devis-grid { grid-template-columns: 1fr; } }
  .contact-side h2 { margin-top: .5rem; }
  .contact-side p { color: var(--ink-soft); margin-top: .9rem; max-width: 26em; }
  .contact-lines { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: 1.6rem; }
  .contact-line { display: inline-flex; align-items: center; gap: .7rem; font-weight: 625; font-size: 1.266rem; color: var(--brand-soft); text-decoration: none; }
  .contact-line:hover { color: #fff; }
  .contact-line svg { width: 22px; height: 22px; }
  .contact-line.wa svg, .contact-line.wa:hover svg { color: #25D366; } /* vert WhatsApp pour la reconnaissance, texte dans la charte */
  form.devis { background: rgba(13,14,24,.82); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.8rem; display: flex; flex-direction: column; gap: .9rem; box-shadow: 0 0 70px -24px var(--glow), 0 30px 80px -40px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .field { display: flex; flex-direction: column; gap: .35rem; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  @media (max-width: 460px) { .row2 { grid-template-columns: 1fr; } }
  label { font-size: 0.859rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
  input, textarea, select { font-family: var(--font-body); font-size: 1.13rem; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 11px; padding: .74rem .9rem; }
  input::placeholder, textarea::placeholder { color: rgba(167,171,196,.55); }
  input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(107,107,247,.28), 0 0 24px -8px var(--glow); }
  select option { background: #12131F; color: var(--ink); }
  .note { font-size: 0.927rem; color: var(--ink-soft); }

  footer.site { border-top: 1px solid var(--line); background: rgba(255,255,255,.015); margin-top: 1rem; }
  footer.site .wrap { padding-top: 2.8rem; padding-bottom: 2.4rem; display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; justify-content: space-between; align-items: flex-start; }
  footer p { color: var(--ink-soft); font-size: 1.04rem; max-width: 24em; margin-top: .7rem; }
  footer .cols { display: flex; gap: 3rem; flex-wrap: wrap; }
  footer h4 { margin: 0 0 .6rem; font-size: 0.836rem; font-weight: 625; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); }
  footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; font-size: 1.051rem; }
  footer ul a { text-decoration: none; color: var(--ink); }
  footer ul a:hover { color: var(--brand-soft); }
  .legal { width: 100%; border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: .4rem; font-size: 0.904rem; color: var(--ink-soft); }

  /* inclinaison 3D des cartes sous la souris (activée par JS sur pointeur fin uniquement) */
  .tilt-on .plan, .tilt-on .work { will-change: transform; }
  .tilt-on .plan { transition: transform .25s ease; }
  .tilt-on .plan::after, .tilt-on .work::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.09), transparent 62%);
    opacity: 0; transition: opacity .25s ease;
  }
  .tilt-on .plan:hover::after, .tilt-on .work:hover::after { opacity: 1; }

  /* apparition au défilement : inerte sans JavaScript (tout reste visible) */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  /* une fois l'apparition finie, on rend aux cartes des transitions vives (sinon l'inclinaison serait molle) */
  .js .reveal.revealed { transition: transform .16s ease, opacity .3s ease, border-color .16s ease, box-shadow .16s ease; }
  @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

  /* ==========================================================================
     ADAPTATION MOBILE (≤ 620 px)
     Bloc volontairement placé en FIN de feuille : une règle média écrite plus
     haut se fait écraser par les règles générales qui la suivent (leçon Milvo).
     Objectif : page plus courte ET mieux respirée, sans retirer de contenu.
     Le rendu bureau n'est jamais touché (rien hors de ces media queries).
     ========================================================================== */
  /* Textes repliables : sur mobile, les mentions de détail (preuve du
     comparateur, RGPD, communes desservies) se résument à une amorce et se
     déplient au clic. Tout reste dans le HTML, donc rien n'est perdu pour le
     référencement, et sans JavaScript le texte s'affiche en entier (le
     masquage est conditionné à la classe .js). En bureau, rien ne change :
     le texte complet est affiché et le bouton n'existe pas. */
  .repli-btn { display: none; background: none; border: 0; padding: 0; margin-left: .5rem; white-space: nowrap; font-weight: 625; font-size: inherit; color: var(--brand-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .repli-btn:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 3px; border-radius: 4px; }
  /* Variante « partout » : ces blocs-là se replient AUSSI sur ordinateur, pas
     seulement sur téléphone. Même principe : le texte reste entier dans le
     HTML, et sans JavaScript il s'affiche en totalité. */
  .js .repli-partout .repli-suite { display: none; }
  .js .repli-partout.ouvert .repli-suite { display: inline; }
  .js .repli-partout .repli-btn { display: inline; }
  /* quand TOUT le paragraphe est replié (classe .repli-total), le bouton se
     retrouve seul : pas de décalage résiduel qui casserait le centrage.
     Attention : ne pas cibler ce cas avec .repli-suite:first-child, car un
     texte d'amorce n'est pas un élément et le span reste « premier enfant ». */
  .repli-total .repli-btn { margin-left: 0; }

  @media (max-width: 620px) {
    /* Textes gris légèrement éclaircis : la même hiérarchie visuelle, mais
       lisible sur un petit écran en plein jour. */
    :root { --ink-soft: #BFC3D8; }

    .js .repli-suite { display: none; }
    .js .repli.ouvert .repli-suite { display: inline; }
    .js .repli-btn { display: inline; }

    /* Respiration générale, recalibrée le 01/08 (retour d'Antoine : la page
       était devenue TROP compacte). On garde les formats courts, on redonne
       de l'air entre les blocs : c'est l'espace qui fait le premium. */
    section { padding-top: 3.3rem; padding-bottom: 3.3rem; }
    .sec-head { margin-bottom: 2.1rem; }
    .sec-head h2 { font-size: clamp(1.696rem, 6.996vw, 2.067rem); }
    .sec-head p { font-size: 1.096rem; margin-top: .65rem; }
    .eyebrow { font-size: 0.791rem; letter-spacing: .15em; }
    .grid { gap: 1rem; }
    /* demande d'Antoine (01/08) : la phrase sous le titre Réalisations
       disparaît sur mobile ; les badges « Client · En ligne » / « Maquette »
       portent la distinction à sa place */
    #realisations .sec-head p { display: none; }

    /* Ordre mobile (demande d'Antoine 01/08) : les tarifs descendent JUSTE
       avant la FAQ. Fil mobile : preuve → démo → confiance → prix → questions
       → devis. Le desktop garde l'ordre validé la veille (tarifs en 2e). */
    main { display: flex; flex-direction: column; }
    main > .hero { order: 1; }
    main > #realisations { order: 2; }
    main > #difference { order: 3; }
    main > #apropos { order: 4; }
    main > #tarifs { order: 5; }
    main > #faq { order: 6; }
    main > #devis { order: 7; }

    /* pied de page : même logique, il n'a pas besoin d'autant d'air en mobile */
    footer.site .wrap { padding-top: 2.4rem; padding-bottom: 2.2rem; gap: 1.4rem 2rem; }
    footer .cols { gap: 2rem; }
    footer p { margin-top: .5rem; }

    /* Lot 2 — haut de page. Le hero mangeait un écran entier avant le premier
       contenu utile. On resserre les écarts verticaux (pas les tailles de
       texte, le titre doit rester la promesse la plus visible du site). */
    .hero .wrap { padding-top: 2.7rem; padding-bottom: 1.2rem; }
    .hero h1 { margin-top: .9rem; }
    /* demande d'Antoine (01/08) : sur téléphone, le sous-titre gris disparaît
       pour laisser respirer le slogan. Ses infos vivent ailleurs : « sans
       abonnement » dans la pastille, le reste dans les tarifs et la FAQ. */
    .hero .lede { display: none; }
    /* premier écran recomposé (demande d'Antoine 01/08) : le slogan en haut,
       les deux boutons ancrés vers le bas de l'écran (margin-top:auto répartit
       l'espace). Le hero occupe presque toute la hauteur du téléphone.
       02/08 : la ligne de réassurance disparaît sur téléphone (le numéro vit
       dans le pied de page et sur la page devis) et les boutons descendent au
       ras du pli : soustraction recalibrée sans la ligne. */
    .hero-inner { min-height: calc(100vh - 160px); min-height: calc(100svh - 160px); }
    .hero-cta { margin-top: auto; padding-top: 1.6rem; gap: .7rem; width: 100%; }
    /* boutons pleine largeur : ils s'alignaient en deux lignes de largeurs
       différentes (effet bancal) et offraient une cible tactile étroite. */
    .hero-cta .btn { width: 100%; justify-content: center; padding-top: .9rem; padding-bottom: .9rem; }
    .hero .assure { display: none; }

    /* Lot 3a — réalisations en fiches horizontales.
       En pleine largeur chaque carte faisait 329 px (vignette 16/10 + texte),
       soit une carte par écran. Vignette à gauche, texte à droite : ~106 px,
       les trois réalisations tiennent donc dans un seul écran. */
    .cards-3 { gap: .95rem; }
    .work { display: grid; grid-template-columns: 134px 1fr; align-items: stretch; }
    .work .thumb { aspect-ratio: auto; height: 100%; min-height: 112px; font-size: 0.848rem; }
    .work .meta { padding: .85rem 1rem; display: flex; flex-direction: column; justify-content: center; }
    .work .meta b { font-size: 1.096rem; line-height: 1.25; }
    .work .meta span { font-size: 0.938rem; line-height: 1.4; display: block; margin-top: .15rem; }
    /* l'étiquette passe en bas de la vignette : en haut elle mordait sur l'image
       et dépassait de la colonne étroite */
    .work .tagr { top: auto; bottom: .35rem; left: .35rem; font-size: 0.689rem; padding: .15rem .48rem; }

    /* Formules EMPILÉES ET REPLIÉES (retour d'Antoine du 07/08). La rangée
       glissante obligeait à balayer pour découvrir les deux autres prix, et
       chaque carte ouverte mangeait l'écran. Désormais les trois prix se
       lisent d'un coup et le détail s'ouvre à la demande.
       Le <details> est fabriqué en JS sous garde matchMedia : écrit en dur
       dans le HTML, il changerait aussi le rendu ordinateur, qui doit rester
       intact. Sans JavaScript, tout reste affiché, simplement plus long. */
    .plans { display: grid; grid-template-columns: 1fr; gap: .6rem; max-width: none;
      margin: 0; padding: 14px 0 0; overflow: visible; }
    .plan { display: grid; grid-template-columns: minmax(0, 1fr) auto;
      align-items: baseline; column-gap: .6rem; }
    .plan h3 { grid-column: 1; }
    .plan .price { grid-column: 2; text-align: right; white-space: nowrap; margin: 0; }
    .plan .price small { font-size: 0.657rem; }
    /* la pastille « Recommandé » quitte le survol du bord : en pile, elle
       chevaucherait la carte du dessus */
    .plan .tag { position: static; transform: none; grid-column: 1 / -1;
      justify-self: start; margin: 0 0 .5rem; }
    .plan .replie, .plan .btn { grid-column: 1 / -1; }
    /* « Sans abonnement » répété sur les trois cartes, juste sous une intro qui
       dit déjà « sans abonnement » : c'est du bruit sur un petit écran. */
    .plan .rec { display: none; }
    .plan .btn { margin-top: .7rem; }
    /* Dépliants : le titre reste lu, le contenu s'ouvre à la demande.
       Deux tailles : dans une carte de prix, et autour d'une section entière. */
    /* details.replie et non .replie : une règle générique « details » (la FAQ)
       pose une bordure, un fond et un padding, et gagnait sur une simple classe.
       Ici le dépliant doit être un simple trait, pas une carte dans la carte. */
    details.replie { grid-column: 1 / -1; background: none; border: 0;
      border-top: 1px solid var(--line); border-radius: 0; padding: 0; margin-top: .55rem; }
    .replie > summary { cursor: pointer; list-style: none; padding: .55rem 0; font-weight: 625; font-size: 0.949rem;
      color: var(--brand-soft); display: flex; align-items: center;
      justify-content: space-between; gap: .5rem; }
    .replie > summary::-webkit-details-marker { display: none; }
    .replie > summary::after { content: "\25BE"; font-size: 1.15em; line-height: 1; opacity: .85; transition: transform .18s ease; }
    .replie[open] > summary::after { transform: rotate(180deg); }
    .replie > summary:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 3px; border-radius: 6px; }

    details.bloc-replie { border: 1px solid var(--line); border-radius: 16px;
      background: rgba(255,255,255,.03); border-top: 1px solid var(--line);
      padding: 0; margin-top: .2rem; }
    .bloc-replie > summary { padding: .95rem 1.1rem; font-size: 1.04rem; color: #fff; border-top: 0; }
    .bloc-replie > .grid-3, .bloc-replie > .steps, .bloc-replie > .comp-scroll,
    .bloc-replie > p { padding: 0 1.1rem 1.1rem; }
    .bloc-replie > p { margin: 0; text-align: left; }
    /* l'intro de section répète le titre du dépliant juste en dessous :
       même parti pris que #realisations, déjà en place */
    #inclus .sec-head p { display: none; }
    .bloc-replie > .grid-3, .bloc-replie > .steps { display: grid; grid-template-columns: 1fr; gap: .8rem; }

    /* Le comparatif se relit en cartes : une par ligne, les trois solutions
       l'une sous l'autre. Plus de défilement latéral dans un tableau de 660 px. */
    .bloc-replie > .comp-scroll { overflow-x: visible; border: 0; background: none; }
    .bloc-replie table.comp { min-width: 0; display: block; font-size: 0.972rem; }
    .bloc-replie .comp thead { display: none; }
    .bloc-replie .comp tbody { display: block; }
    .bloc-replie .comp tr { display: block; border: 1px solid var(--line);
      border-radius: 13px; padding: .8rem .95rem; margin-bottom: .6rem; }
    .bloc-replie .comp tbody th { display: block; border: 0; padding: 0 0 .45rem;
      font-size: 1.017rem; }
    .bloc-replie .comp td { display: block; border: 0; padding: .42rem 0 0; }
    .bloc-replie .comp td::before { font-weight: 625; content: attr(data-sol); display: block; font-size: 0.746rem; text-transform: uppercase;
      letter-spacing: .1em; color: var(--ink-soft); margin-bottom: .1rem; }
    .bloc-replie .comp td.moi { color: #fff; }

    /* Les cartes 2 et 3 sont hors écran horizontalement : l'observateur ne les
       verrait jamais entrer et elles resteraient floues. On les affiche d'office. */
    .js .plans .plan.reveal, .js .plans .plan.reveal:not(.revealed) { opacity: 1; transform: none; filter: none; transition: none; }
    .plan { padding: 1.2rem .85rem 1.05rem; }
    .plan h3 { font-size: 1.107rem; }
    .plan .who { font-size: 0.859rem; min-height: 0; margin-top: .25rem; line-height: 1.4; }
    .plan .price { font-size: 1.484rem; margin: .55rem 0 .1rem; }
    .plan .price small { font-size: 0.721rem; }
    .plan .rec { font-size: 0.746rem; padding: .16rem .5rem; margin-bottom: .6rem; }
    .plan .tag { font-size: 0.701rem; top: -11px; padding: .24rem .6rem; }
    .plan ul { gap: .5rem; margin: .3rem 0 1.05rem; }
    .plan li { font-size: 0.859rem; padding-left: 1.1rem; line-height: 1.4; }
    .plan .btn { font-size: 0.881rem; padding: .55rem .4rem; }
    .plans-note { font-size: 0.994rem; margin-top: 1.4rem; }

    /* Les 4 étapes en frise verticale animée (demande d'Antoine 01/08) : une
       ligne relie les numéros, les cartes disparaissent (plus d'empilement de
       boîtes) et chaque étape entre en scène en cascade au défilement. */
    .steps { gap: .7rem; }
    .step { display: grid; grid-template-columns: 38px 1fr; column-gap: .85rem; padding: 1rem 1.15rem; align-items: start; }
    .step .n { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 0.975rem; margin-bottom: 0; }
    .step b { font-size: 1.13rem; margin-bottom: .2rem; align-self: center; }
    .step p { font-size: 0.994rem; line-height: 1.45; }
    .steps.fil { position: relative; gap: 1.5rem; }
    .steps.fil::before { content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
      background: linear-gradient(180deg, var(--brand-soft), var(--brand) 55%, transparent 96%); opacity: .55; }
    .steps.fil .step { grid-template-columns: 34px 1fr; column-gap: 1rem; padding: 0; background: none; border: 0; border-radius: 0; }
    .steps.fil .step .n { position: relative; z-index: 1; } /* le numéro passe devant la ligne */
    /* entrée en cascade : chaque étape glisse depuis la droite, l'une après
       l'autre. 16px maximum : au-delà, l'étape en attente dépasse de la marge
       du conteneur (17,6px) et crée un défilement horizontal. */
    .js .steps.fil .step.reveal { transform: translateX(16px); }
    .js .steps.fil .step.reveal.in { transform: none; }
    .js .steps.fil .step.reveal:nth-child(2) { transition-delay: .12s; }
    .js .steps.fil .step.reveal:nth-child(3) { transition-delay: .24s; }
    .js .steps.fil .step.reveal:nth-child(4) { transition-delay: .36s; }
    .js .steps.fil .step.reveal.revealed { transition-delay: 0s; }

    /* Lot 4b — FAQ resserrée. Toutes les questions fermées par défaut
       (demande d'Antoine du 01/08 : une question toujours ouverte troublait
       plus qu'elle n'aidait, le « + » suffit à montrer que ça se déplie). */
    .faq-grid { gap: .8rem; }
    details { padding: 1.05rem 1.15rem; border-radius: 14px; }
    details summary { font-size: 1.073rem; gap: .7rem; }
    details summary::after { font-size: 1.412rem; }
    details p { font-size: 1.006rem; margin-top: .5rem; }
  }

  /* frise des étapes : les numéros éclosent quand leur étape apparaît
     (uniquement mobile, et uniquement si les animations sont acceptées) */
  @media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
    .js .steps.fil .step.reveal.in .n { animation: fil-pop .45s ease backwards; }
    .js .steps.fil .step.reveal.in:nth-child(2) .n { animation-delay: .12s; }
    .js .steps.fil .step.reveal.in:nth-child(3) .n { animation-delay: .24s; }
    .js .steps.fil .step.reveal.in:nth-child(4) .n { animation-delay: .36s; }
  }
  @keyframes fil-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
  /* ============================================================
     Composants des pages intérieures (ajout du 02/08/2026)
     ============================================================ */

  /* entête de page intérieure : même ciel que le hero, en plus court */
  .page-hero { position: relative; overflow: clip; }
  .page-hero .wrap { padding-top: clamp(2.6rem, 6vw, 4.6rem); padding-bottom: clamp(.4rem, 1.6vw, 1rem); text-align: center; }
  .page-hero h1 { font-size: clamp(2.12rem, 4.876vw, 3.286rem); font-weight: 800; margin-top: .6rem; }
  .page-hero .lede { color: var(--ink-soft); margin: 1rem auto 0; max-width: 40em; }

  /* lien du menu vers la page où l'on se trouve */
  .nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: #fff; }

  /* fiches réalisations : capture bureau + vignette téléphone, texte en vis-à-vis */
  .rea { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
  .rea + .rea { margin-top: clamp(3rem, 7vw, 5.4rem); }
  .rea--flip .rea-media { order: 2; }
  .rea-media { position: relative; padding-bottom: 2.2rem; }
  .rea-shot { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line-strong);
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.85), 0 0 55px -18px var(--glow); }
  .rea-phone { position: absolute; right: -3%; bottom: 0; width: 26%; height: auto; border-radius: 14px; border: 1px solid var(--line-strong);
    box-shadow: 0 18px 44px -14px rgba(0,0,0,.92), 0 0 40px -14px var(--glow); }
  .rea--flip .rea-phone { right: auto; left: -3%; }
  .rea-badges { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: .9rem; }
  .rea-badges .tagr { position: static; }
  .rea-badges .ou { color: var(--ink-soft); font-size: 0.994rem; }
  .rea h2 { font-size: clamp(1.696rem, 3.18vw, 2.332rem); }
  .rea-desc { color: var(--ink-soft); margin-top: .8rem; }
  .rea h3 { font-size: 0.881rem; text-transform: uppercase; letter-spacing: .16em; color: var(--brand-soft); font-weight: 600; margin-top: 1.5rem; }
  .rea-list { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
  .rea-list li { font-size: 1.062rem; color: var(--ink-soft); padding-left: 1.6rem; position: relative; }
  .rea-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: .82em; height: .82em;
    background: var(--brand-soft); filter: drop-shadow(0 0 6px var(--glow));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3.4 10.7 4.3 4.3 8.9-9.9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3.4 10.7 4.3 4.3 8.9-9.9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  .rea-list li b { color: #fff; font-weight: 600; }
  .rea-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
  .rea-chips span { font-size: 0.96rem; font-weight: 600; color: var(--ink); background: rgba(107,107,247,.13); border: 1px solid rgba(139,141,255,.32); border-radius: 999px; padding: .34rem .85rem; }
  .rea-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: 1.7rem; }
  .rea-actions .note-net { font-size: 0.904rem; color: var(--ink-soft); }
  @media (max-width: 860px) {
    .rea, .rea--flip { grid-template-columns: 1fr; }
    .rea--flip .rea-media { order: 0; }
    .rea-phone { right: 2%; }
    .rea--flip .rea-phone { left: 2%; }
  }

  /* bandeau final commun aux pages intérieures */
  .cta-fin { text-align: center; }
  .cta-fin .btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }

  /* ---- page Tarifs (lot du 03/08) : engagement, inclus, comparatif, options ---- */
  .engage { max-width: 720px; margin: 0 auto; text-align: center; background: linear-gradient(180deg, rgba(107,107,247,.16), rgba(107,107,247,.05)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.5rem 1.7rem; box-shadow: 0 0 50px -20px var(--glow); }
  .engage b { font-family: var(--font-display); font-size: 1.378rem; color: #fff; display: block; }
  .engage p { color: var(--ink-soft); margin-top: .45rem; font-size: 1.085rem; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  @media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .grid-3 { grid-template-columns: 1fr; } }
  .inclus { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
  .inclus b { font-weight: 625; color: #fff; display: block; margin-bottom: .3rem; }
  .inclus b::before { content: ""; display: inline-block; width: .82em; height: .82em; margin-right: .4em;
    vertical-align: -.06em; background: var(--brand-soft); filter: drop-shadow(0 0 6px var(--glow));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3.4 10.7 4.3 4.3 8.9-9.9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m3.4 10.7 4.3 4.3 8.9-9.9' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
  .inclus p { color: var(--ink-soft); font-size: 1.04rem; }
  .sans-note { text-align: center; color: var(--ink-soft); font-size: 1.073rem; max-width: 41em; margin: 1.8rem auto 0; }
  .sans-note b { color: #fff; }
  .comp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); }
  table.comp { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 1.051rem; }
  .comp th, .comp td { padding: .9rem 1.05rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  .comp thead th { font-weight: 700; font-size: 0.881rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); background: rgba(255,255,255,.03); }
  .comp tbody th { font-weight: 625; color: #fff; font-size: 1.017rem; }
  .comp td { color: var(--ink-soft); }
  .comp tbody tr:last-child th, .comp tbody tr:last-child td { border-bottom: 0; }
  .comp .moi { background: rgba(107,107,247,.10); color: var(--ink); }
  .comp thead th.moi { color: var(--brand-soft); }
  .comp-note { text-align: center; color: var(--ink-soft); font-size: 0.96rem; margin: .9rem auto 0; max-width: 46em; }
  .opt { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.4rem; }
  .opt b { font-weight: 625; color: #fff; }
  .opt .prix { color: var(--brand-soft); font-weight: 600; font-size: 1.017rem; margin: .3rem 0 .5rem; }
  .opt p { color: var(--ink-soft); font-size: 1.04rem; }

  /* ---- page Qui je suis (lot du 03/08) : frise de repères ---- */
  .frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; max-width: 580px; }
  .frise li { position: relative; padding-left: 2rem; }
  .frise li::before { content: ""; position: absolute; left: 0; top: .4em; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #B9B9FF, var(--brand) 60%); box-shadow: 0 0 12px var(--glow); }
  .frise li::after { content: ""; position: absolute; left: 5px; top: 1.55em; bottom: -1.25rem; width: 1px; background: var(--line-strong); }
  .frise li:last-child::after { display: none; }
  .frise .date { color: var(--brand-soft); font-size: 0.881rem; font-weight: 625; text-transform: uppercase; letter-spacing: .14em; }
  .frise b { color: #fff; font-weight: 625; display: block; margin: .15rem 0 .2rem; }
  .frise p { color: var(--ink-soft); font-size: 1.04rem; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  @media (max-width: 460px) { .grid-2 { grid-template-columns: 1fr; } }

  /* ---- page Questions (lot du 03/08) : catégories titrées ---- */
  .faq-bloc { margin-bottom: clamp(2rem, 4vw, 3rem); }
  .faq-bloc:last-of-type { margin-bottom: 0; }
  .faq-titre { display: flex; align-items: center; gap: .6rem; font-weight: 625; font-size: 1.266rem; color: #fff; margin: 0 0 1rem; }
  .faq-titre::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #B9B9FF, var(--brand) 60%); box-shadow: 0 0 10px var(--glow); }

  /* ---- témoignage client dans une fiche réalisation (03/08) ---- */
  .rea-quote { margin: 1.4rem 0 0; padding: 1.1rem 1.3rem 1.05rem; background: rgba(107,107,247,.10); border-left: 3px solid var(--brand); border-radius: 0 14px 14px 0; }
  .rea-quote p { margin: 0; color: var(--ink); font-style: italic; font-weight: 400; line-height: 1.7; font-size: 1.096rem; text-wrap: pretty; }
  .rea-quote footer { margin-top: .55rem; font-size: 0.927rem; font-weight: 625; color: var(--brand-soft); }