/* =================================================================
   THE WEB REVOLUTION — Feuille de style partagée
   Thème sombre premium · accent bleu électrique
   ================================================================= */

:root {
  /* ===== COULEURS DE MARQUE ===== */
  --color-bg:            #0B0B0F;  /* fond principal — charbon quasi noir */
  --color-bg-deep:       #000000;  /* sections les plus sombres */
  --color-surface:       #15161B;  /* cartes / panneaux */
  --color-surface-2:     #1C1D21;  /* surface alternative */
  --color-border:        #25272F;  /* bordures subtiles */

  --color-primary:       #0F6CB8;  /* BLEU ÉLECTRIQUE signature */
  --color-primary-hover: #1683D6;  /* hover plus lumineux */
  --color-primary-deep:  #0050AA;  /* bleu profond (départ du dégradé) */
  --color-accent-glow:   #21B5F0;  /* cyan d'éclat */

  --color-text:          #FFFFFF;
  --color-text-muted:    #A0A4AD;
  --color-text-subtle:   #6B6F78;

  --color-success:       #2ECC71;

  --gradient-brand: linear-gradient(135deg, #0050AA 0%, #0F6CB8 55%, #21B5F0 100%);

  /* ===== TYPOGRAPHIE ===== */
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --fs-hero:      clamp(2.6rem, 6vw, 5rem);
  --fs-h2:        clamp(2rem, 4vw, 3.25rem);
  --fs-h3:        clamp(1.35rem, 2.5vw, 1.85rem);
  --fs-body:      clamp(1rem, 1.1vw, 1.125rem);
  --lh-tight:     1.1;
  --lh-body:      1.65;

  /* ===== ESPACEMENT ===== */
  --space-xs: 0.5rem;  --space-sm: 1rem;   --space-md: 1.75rem;
  --space-lg: 3rem;    --space-xl: 5rem;   --space-2xl: 8rem;
  --container-max: 1200px;
  --section-pad-y: clamp(4rem, 9vw, 8rem);

  /* ===== RAYONS & OMBRES ===== */
  --radius-sm: 8px;   --radius-md: 16px;   --radius-lg: 24px;   --radius-pill: 999px;
  --shadow-card: 0 20px 60px -20px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 40px -8px rgba(15,108,184,0.45);
  --border-1: 1px solid var(--color-border);
}

/* ================= RESET / BASE ================= */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; }
::selection { background: var(--color-primary); color: #fff; }

:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: 3px; border-radius: 4px; }

/* ================= LAYOUT ================= */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
.section { padding-block: var(--section-pad-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.bg-deep { background: var(--color-bg-deep); }
.bg-surface { background: var(--color-surface); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-heading); font-size: .8rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent-glow);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--color-primary); display: inline-block; }
.eyebrow--center { justify-content: center; }

.section-title { font-size: var(--fs-h2); max-width: 18ch; margin-top: var(--space-sm); text-wrap: balance; }
.section-title--center { margin-inline: auto; text-align: center; }
.lead { color: var(--color-text-muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 60ch; }
.grad-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }

/* radial glow utility */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -15%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(15,108,184,0.30) 0%, rgba(33,181,240,0.10) 35%, transparent 70%);
  filter: blur(10px);
}

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.55rem; border-radius: 14px;
  font-family: 'Poppins', var(--font-heading); font-weight: 500; font-size: .95rem; letter-spacing: .01em;
  border: none; cursor: pointer; transition: .25s ease;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:focus { outline: none; }
.btn:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 50px -6px rgba(33,181,240,0.6); }
.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-primary); }
.btn-secondary:hover { background: rgba(15,108,184,0.12); border-color: var(--color-accent-glow); transform: translateY(-2px); }
.btn-ghost { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); }
.btn-ghost:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.btn-lg { padding: 1.1rem 2.1rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ===== ANNEAU ANIMÉ GÉNÉRALISÉ (boutons + cartes) ===== */
.btn-primary, .btn-secondary, .btn-light, .cards-center .card {
  position: relative; isolation: isolate; overflow: visible;
}
.btn-primary::before, .btn-secondary::before, .btn-light::before, .cards-center .card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -2;
  background: conic-gradient(from var(--spin), var(--color-border) 0%, var(--color-border) 55%, #0F6CB8 72%, #21B5F0 82%, #0F6CB8 92%, var(--color-border) 100%);
  animation: spin-border 3.2s linear infinite;
}
.btn-primary::after, .btn-light::after, .cards-center .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
}
.btn-primary::after { background: var(--gradient-brand); }
.btn-light::after { background: #fff; }
.cards-center .card::after { background: var(--color-surface); }
.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-primary); }
.btn-secondary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-bg); z-index: -1; }
.btn-light::before { background: conic-gradient(from var(--spin), rgba(255,255,255,.25) 0%, rgba(255,255,255,.25) 55%, #fff 78%, #B7E7FF 86%, rgba(255,255,255,.25) 100%); }
.cards-center .card { border-color: transparent; }
.cards-center .card::before { inset: -1.5px; border-radius: var(--radius-md); animation-duration: 4.5s; }
.cards-center .card:nth-child(2)::before { animation-delay: -1.1s; }
.cards-center .card:nth-child(3)::before { animation-delay: -2.2s; }
.cards-center .card:nth-child(4)::before { animation-delay: -3.3s; }
.cards-center .card:nth-child(5)::before { animation-delay: -4s; }
.btn-primary:hover::before, .btn-secondary:hover::before, .btn-light:hover::before { animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) { .btn-primary::before, .btn-secondary::before, .btn-light::before, .cards-center .card::before { animation: none; } }

/* ================= HEADER / NAV (CSS-only mobile) ================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,11,15,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--border-1);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; font-size: 1.02rem; }
.brand .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--gradient-brand); display: grid; place-items: center; box-shadow: var(--shadow-glow); flex: none; }
.brand .mark svg { width: 17px; height: 17px; color: #fff; }
.brand b { font-weight: 700; }
.brand-logo { height: 34px; width: auto; mix-blend-mode: screen; display: block; }
.site-footer .brand-logo { height: 44px; }
.brand span { color: var(--color-text-muted); font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { color: var(--color-text-muted); font-size: .94rem; font-weight: 500; transition: color .2s; position: relative; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gradient-brand); border-radius: 2px; }
.nav-cta { display: flex; align-items: center; gap: .75rem; }
.nav-cta .btn { padding: .58rem 1.1rem; font-size: .86rem; }

.nav-toggle, .nav-toggle-label { display: none; }
@media (max-width: 980px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle-label {
    display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer;
    border: var(--border-1); border-radius: 10px; background: var(--color-surface);
  }
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    content: ""; display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 2px; transition: .25s ease; position: relative;
  }
  .nav-toggle-label span::before { position: absolute; top: -6px; }
  .nav-toggle-label span::after { position: absolute; top: 6px; }
  .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-label span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span::after { top: 0; transform: rotate(-45deg); }

  .mobile-menu {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
    position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(11,11,15,0.97); backdrop-filter: blur(16px); border-bottom: var(--border-1);
  }
  .nav-toggle:checked ~ .mobile-menu { grid-template-rows: 1fr; }
  .mobile-menu-inner { overflow: hidden; }
  .mobile-menu nav { display: flex; flex-direction: column; padding: 1rem clamp(1.25rem,4vw,2rem) 1.75rem; gap: .25rem; }
  .mobile-menu nav a { padding: .85rem 0; border-bottom: var(--border-1); color: var(--color-text-muted); font-weight: 500; }
  .mobile-menu nav a:last-of-type { border-bottom: 0; }
  .mobile-menu .btn { margin-top: 1rem; }
}
@media (min-width: 981px) { .mobile-menu { display: none; } }

/* ===== NAV DROPDOWN ===== */
.nav-drop { position: relative; }
.nav-drop .drop-trigger { display: inline-flex; align-items: center; gap: .35rem; }
.nav-drop .drop-trigger svg { width: 14px; height: 14px; transition: transform .2s; }
.nav-drop:hover .drop-trigger svg, .nav-drop:focus-within .drop-trigger svg { transform: rotate(180deg); }
.drop-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, 8px); background: rgba(17,18,24,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: var(--border-1); border-radius: 12px; padding: .5rem; display: grid; gap: .1rem; min-width: 215px; opacity: 0; visibility: hidden; transition: .22s ease; z-index: 60; }
.drop-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-menu a { display: block; padding: .62rem .85rem; border-radius: 8px; color: var(--color-text-muted); font-size: .92rem; }
.drop-menu a:hover { background: var(--color-surface-2); color: var(--color-text); }
.drop-menu a[aria-current="page"]::after { display: none; }

/* ================= HERO ================= */
.hero { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; overflow: hidden; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .9rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: var(--border-1); font-size: .85rem; color: var(--color-text-muted);
  margin-bottom: 1.6rem;
}
.hero-badge .stars { color: #FFC23D; letter-spacing: .1em; }
.hero-badge .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-subtle); }
.hero h1 { font-size: var(--fs-hero); max-width: 16ch; text-wrap: balance; margin-bottom: 1.4rem; }
.hero .lead { margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ===== BADGE À BORDURE ANIMÉE (hero) ===== */
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hero-badge { position: relative; isolation: isolate; border: none; }
.hero-badge::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -2;
  background: conic-gradient(from var(--spin), var(--color-border) 0%, var(--color-border) 55%, #0F6CB8 72%, #21B5F0 82%, #0F6CB8 92%, var(--color-border) 100%);
  animation: spin-border 3.2s linear infinite;
}
.hero-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--color-surface); z-index: -1; }
@keyframes spin-border { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hero-badge::before { animation: none; } }

/* ================= CARDS ================= */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md);
  padding: 1.75rem; transition: .25s ease; position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-card); }
.card .icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(15,108,184,0.12); border: 1px solid rgba(15,108,184,0.3); color: var(--color-accent-glow);
  margin-bottom: 1.1rem;
}
.card .icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.card p { color: var(--color-text-muted); font-size: .98rem; }
.card-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; color: var(--color-accent-glow); font-weight: 600; font-size: .92rem; font-family: var(--font-heading); }
.card-link svg { width: 16px; height: 16px; transition: transform .2s; }
a.card:hover .card-link svg, .card:hover .card-link svg { transform: translateX(4px); }

/* ===== GRILLE 3 COLONNES + LOGO WALL ===== */
.grid-3c { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid-3c { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3c { grid-template-columns: 1fr; } }
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
.logo-wall .chip { background: #fff; border-radius: 10px; height: 72px; display: grid; place-items: center; padding: .55rem .8rem; filter: grayscale(1); opacity: .78; transition: .25s ease; }
.logo-wall .chip:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.logo-wall .chip img { max-height: 56px; max-width: 100%; width: auto; object-fit: contain; }
.logo-wall .chip-txt { background: var(--color-surface); border: var(--border-1); border-radius: 10px; height: 72px; display: grid; place-items: center; padding: .5rem 1rem; font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: var(--color-text-subtle); text-align: center; transition: .25s ease; }
.logo-wall .chip-txt:hover { color: var(--color-text); border-color: var(--color-primary); transform: translateY(-3px); }

/* ================= STATS ================= */
.stats { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { text-align: center; padding: 2rem 1.25rem; background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gradient-brand); opacity: .6; }
.stat .num { font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .label { color: var(--color-text-muted); font-size: .92rem; margin-top: .7rem; }

/* ================= TIMELINE ================= */
.timeline { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.tl-step { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); padding: 1.6rem; position: relative; }
.tl-step:hover { border-color: var(--color-primary); }
.tl-num { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--color-border); margin-bottom: .9rem; }
.tl-step:hover .tl-num { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-step h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.tl-step p { color: var(--color-text-muted); font-size: .92rem; }

/* ================= COMPARE TABLE ================= */
.table-wrap { overflow-x: auto; border: var(--border-1); border-radius: var(--radius-md); background: var(--color-surface); }
table.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
table.compare th, table.compare td { padding: 1.05rem 1.25rem; text-align: left; border-bottom: var(--border-1); font-size: .96rem; }
table.compare thead th { font-family: var(--font-heading); font-size: .95rem; background: var(--color-surface-2); }
table.compare thead th:nth-child(2) { color: var(--color-accent-glow); background: rgba(15,108,184,.16); }
table.compare tbody td:first-child { color: var(--color-text-muted); font-weight: 500; }
table.compare tbody td:nth-child(2) { color: var(--color-text); font-weight: 500; background: rgba(15,108,184,.07); }
table.compare tbody td:nth-child(2)::before { content: "✓"; color: var(--color-success); font-weight: 700; margin-right: .55rem; }
table.compare tbody td:last-child::before { content: "✕"; color: #E5484D; margin-right: .55rem; opacity: .65; font-size: .85em; }
table.compare tbody td:last-child { color: var(--color-text-subtle); }
table.compare tr:last-child td { border-bottom: 0; }
.col-highlight { position: relative; }

/* ===== RANGÉE DÉFILANTE DE CARTES ===== */
.card-scroll { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-surface); }
.card-scroll .card { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; }
.card-scroll::-webkit-scrollbar { height: 8px; }
.card-scroll::-webkit-scrollbar-track { background: var(--color-surface); border-radius: 99px; }
.card-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 99px; }

/* ================= FAQ ================= */
.faq { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; }
.faq details { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); transition: border-color .25s; }
.faq details[open] { border-color: var(--color-primary); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 22px; height: 22px; flex: none; transition: transform .25s; color: var(--color-accent-glow); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details p { padding: 0 1.5rem 1.4rem; color: var(--color-text-muted); }

/* ================= LOGOS BAR ================= */
.logos { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; justify-content: center; }
.logos span {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: var(--color-text-subtle);
  filter: grayscale(1); opacity: .65; transition: .25s ease; cursor: default;
}
.logos span:hover { opacity: 1; color: var(--color-text); }

/* ================= PRICING TIERS ================= */
.tiers { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.tier { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; transition: .25s ease; position: relative; isolation: isolate; }
.tier::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -2; background: conic-gradient(from var(--spin), var(--color-border) 0%, var(--color-border) 55%, #0F6CB8 72%, #21B5F0 82%, #0F6CB8 92%, var(--color-border) 100%); animation: spin-border 4.5s linear infinite; }
.tier::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--color-surface); }
.tier:nth-child(2)::before { animation-delay: -1.5s; }
.tier:nth-child(3)::before { animation-delay: -3s; }
.tier:hover::before { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .tier::before { animation: none; } }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tier--featured { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.tier-flag { align-self: flex-start; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .75rem; border-radius: var(--radius-pill); background: var(--gradient-brand); color: #fff; font-weight: 600; }
.tier h3 { font-size: 1.5rem; }
.tier .for { color: var(--color-text-muted); font-size: .95rem; min-height: 2.6em; }
.tier ul.feat { display: grid; gap: .65rem; margin-block: .5rem; }
.tier ul.feat li { display: flex; gap: .6rem; align-items: flex-start; color: var(--color-text-muted); font-size: .94rem; }
.tier ul.feat li svg { width: 18px; height: 18px; color: var(--color-success); flex: none; margin-top: 2px; }
.tier .result { font-family: var(--font-heading); font-weight: 600; color: var(--color-text); font-size: 1rem; }
.tier .btn { margin-top: auto; }

/* ================= CHECK LIST ================= */
.checks { display: grid; gap: .9rem; max-width: 640px; }
.checks li { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.05rem; }
.checks li svg { width: 24px; height: 24px; flex: none; color: var(--color-success); margin-top: 2px; }

/* ================= TRANSFORM (avant/après) ================= */
.transforms { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.transform { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-lg); padding: 2rem; text-align: center; position: relative; overflow: hidden; }
.transform:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card); }
.transform .client { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-muted); font-size: .95rem; margin-bottom: 1.25rem; }
.transform .ba { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.transform .from { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; color: var(--color-text-subtle); }
.transform .arrow { color: var(--color-accent-glow); }
.transform .arrow svg { width: 26px; height: 26px; }
.transform .to { font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.transform .tag { margin-top: 1.1rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }

/* ================= TESTIMONIALS ================= */
.testi-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.testi { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: .25s ease; }
.testi:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
/* carrousel d'avis défilable */
.testi-scroll { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1.25rem; scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-surface); }
.testi-scroll .testi { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; }
.testi-scroll::-webkit-scrollbar { height: 8px; }
.testi-scroll::-webkit-scrollbar-track { background: var(--color-surface); border-radius: 99px; }
.testi-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 99px; }
.testi .stars { color: #FFC23D; letter-spacing: .15em; font-size: .9rem; }
.testi blockquote { font-size: 1.08rem; line-height: 1.55; }
.testi .who { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-muted); font-size: .9rem; margin-top: auto; }

/* ================= CTA BAND ================= */
.cta-band { position: relative; overflow: hidden; background: var(--gradient-brand); }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 120%, rgba(255,255,255,.18), transparent 50%); pointer-events: none; }
.cta-band .container { text-align: center; padding-block: clamp(3.5rem, 7vw, 5.5rem); position: relative; z-index: 1; }
.cta-band h2 { font-size: var(--fs-h2); margin-inline: auto; max-width: 20ch; text-wrap: balance; }
.cta-band p { color: rgba(255,255,255,.85); margin: 1rem auto 2rem; max-width: 48ch; }
.cta-band .btn-light { background: #fff; color: var(--color-primary-deep); }
.cta-band .btn-light:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.4); }

/* ================= CASE STUDY HIGHLIGHT ================= */
.case { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) { .case { grid-template-columns: 1.1fr .9fr; } }
.case-media { border-radius: var(--radius-lg); overflow: hidden; border: var(--border-1); aspect-ratio: 4/3; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case blockquote { border-left: 3px solid var(--color-primary); padding-left: 1.25rem; margin-top: 1.5rem; color: var(--color-text); font-size: 1.1rem; font-style: italic; }
.case blockquote cite { display: block; margin-top: .6rem; color: var(--color-text-muted); font-style: normal; font-size: .9rem; }

/* ================= SPLIT / MEDIA SECTIONS ================= */
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split--media-first .split-text { order: 2; } }
.split-media { border-radius: var(--radius-lg); overflow: hidden; border: var(--border-1); box-shadow: var(--shadow-card); }
.split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mini-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.mini-grid img { border-radius: var(--radius-sm); border: var(--border-1); aspect-ratio: 4/3; object-fit: cover; }

.two-col { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature-list { display: grid; gap: .75rem; }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--color-text-muted); }
.feature-list li svg { width: 20px; height: 20px; color: var(--color-accent-glow); flex: none; margin-top: 2px; }

/* ================= PROOF STRIP ================= */
.proof { display: inline-flex; align-items: center; gap: .65rem; padding: .7rem 1.1rem; border-radius: var(--radius-pill); background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.3); color: var(--color-success); font-size: .92rem; font-weight: 500; }
.proof svg { width: 18px; height: 18px; flex: none; }

/* ================= PORTFOLIO GRID ================= */
.portfolio { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pf-card { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); overflow: hidden; transition: .25s ease; }
.pf-card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-card); }
.pf-card .thumb { aspect-ratio: 3/2; overflow: hidden; }
.pf-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pf-card:hover .thumb img { transform: scale(1.05); }
.pf-card .body { padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pf-card .name { font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; }
.pf-card .cat { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-glow); white-space: nowrap; }

/* ================= FORMS ================= */
.form-card { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--font-heading); font-weight: 600; font-size: .9rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: var(--color-bg); border: var(--border-1); color: var(--color-text);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-subtle); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(15,108,184,0.25);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #E5484D; }
.field-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A4AD' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.6rem; }

.contact-side { display: grid; gap: 1.25rem; align-content: start; }
.info-box { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); padding: 1.6rem; }
.info-box.accent { border-color: var(--color-primary); background: linear-gradient(160deg, rgba(15,108,184,0.12), rgba(21,22,27,0.6)); }
.info-row { display: flex; gap: .85rem; align-items: flex-start; padding: .65rem 0; }
.info-row svg { width: 22px; height: 22px; color: var(--color-accent-glow); flex: none; margin-top: 2px; }
.info-row a:hover { color: var(--color-accent-glow); }
.socials { display: flex; gap: .75rem; }
.socials a { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--color-surface-2); border: var(--border-1); transition: .25s ease; }
.socials a:hover { border-color: var(--color-primary); color: var(--color-accent-glow); transform: translateY(-2px); }
.socials a svg { width: 20px; height: 20px; }

/* ================= STEPS (expect on call) ================= */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.step { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); padding: 1.6rem; }
.step .n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gradient-brand); color: #fff; font-family: var(--font-heading); font-weight: 700; margin-bottom: .9rem; }
.step p { color: var(--color-text-muted); }

/* ================= FOOTER ================= */
.site-footer { background: var(--color-bg-deep); border-top: var(--border-1); padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { font-family: var(--font-heading); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 1.1rem; }
.footer-grid ul { display: grid; gap: .6rem; }
.footer-grid ul a { color: var(--color-text-muted); font-size: .94rem; transition: color .2s; }
.footer-grid ul a:hover { color: var(--color-text); }
.footer-brand p { color: var(--color-text-muted); font-size: .94rem; margin: 1rem 0; max-width: 32ch; }
.footer-brand .stars { color: #FFC23D; letter-spacing: .1em; font-size: .9rem; }
.footer-bottom { border-top: var(--border-1); margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: 1.75rem; }
.footer-bottom .disclaimer { color: var(--color-text-subtle); font-size: .82rem; max-width: 70ch; margin-bottom: .75rem; }
.footer-bottom .row { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; color: var(--color-text-subtle); font-size: .85rem; }
.footer-bottom .row a:hover { color: var(--color-text); }

/* ===== CARDS CENTERED (grilles de services) ===== */
.cards-center .card { text-align: center; }
.cards-center .card .icon { margin-inline: auto; }
.cards-center .card .card-link { justify-content: center; width: 100%; }

/* ===== CURSOR GLOW ===== */
#cursor-glow {
  position: fixed; left: 0; top: 0; width: 620px; height: 620px; border-radius: 50%;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle,
      rgba(28,130,255,.30) 0%,
      rgba(10,120,255,.17) 32%,
      rgba(33,181,240,.07) 58%,
      transparent 72%);
  filter: blur(4px);
  transform: translate(-50%,-50%); opacity: 0; transition: opacity .4s ease;
}
@media (hover: none) { #cursor-glow { display: none; } }

/* ================= SCROLL ANIMATIONS (CSS-only) ================= */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card, .testi, .tl-step, .transform, .pf-card, .step, .tier, .stat, .mini-grid img, .form-card, .info-box {
      animation: rise-in .8s cubic-bezier(.2,.8,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .why-aside, .split-text, .faq details:nth-child(odd) {
      animation: slide-left .8s cubic-bezier(.2,.8,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    .why-row, .split-media, .faq details:nth-child(even) {
      animation: slide-right .8s cubic-bezier(.2,.8,.2,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    .card:nth-child(even), .pf-card:nth-child(even) { animation-name: rise-in-far; }
  }
  .hero h1, .hero .lead, .hero .hero-actions, .hero .hero-badge { animation: hero-in .7s cubic-bezier(.2,.8,.2,1) both; }
  .hero .lead { animation-delay: .12s; }
  .hero .hero-actions { animation-delay: .22s; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-far { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes slide-left { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes slide-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ================= MISC ================= */
.center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }
.maxw { max-width: 760px; }
.divider { height: 1px; background: var(--color-border); border: 0; }
.flex-gap { display: flex; flex-wrap: wrap; gap: 1rem; }
.grid-2 { display: grid; gap: 2rem; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ===== WHY / POSITIONNEMENT (éditorial) ===== */
.why { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .why { grid-template-columns: 0.92fr 1.08fr; align-items: start; } .why-aside { position: sticky; top: 96px; } }
.why-list { display: grid; }
.why-row { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--color-border); transition: padding-left .25s ease; }
.why-row:last-child { border-bottom: 1px solid var(--color-border); }
.why-row:hover { padding-left: .5rem; }
.why-num { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-accent-glow); padding-top: .15rem; }
.why-row h3 { display: flex; align-items: center; gap: .65rem; font-size: 1.25rem; margin-bottom: .45rem; }
.why-row h3 svg { width: 19px; height: 19px; color: var(--color-text-subtle); flex: none; }
.why-row p { color: var(--color-text-muted); font-size: .98rem; }

/* ===== Fix WordPress/Elementor : taille du logo (surcharge ".elementor img{height:auto}") ===== */
.elementor .brand-logo, .brand-logo { height: 34px !important; width: auto !important; max-width: none !important; mix-blend-mode: normal !important; }
.elementor .site-footer .brand-logo, .site-footer .brand-logo { height: 44px !important; }

/* ===== Fond noir complet (demande Justin, 30 juillet) ===== */
:root { --color-bg: #000000; }
.site-header { background: rgba(0,0,0,0.72); }
.mobile-menu { background: rgba(0,0,0,0.97) !important; }

/* ===== Grille services accueil : 2 rangées de 3 ===== */
.card-grid.cards-center { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .card-grid.cards-center { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid.cards-center { grid-template-columns: 1fr; } }
body { background: #000000 !important; }

/* ===== Grille des preuves (réalisations) ===== */
.proof-grid { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1100px) { .proof-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 860px) { .proof-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .proof-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.proof-grid a { display: block; border-radius: var(--radius-md); overflow: hidden; border: var(--border-1); background: var(--color-surface); transition: transform .25s var(--sj-ease, ease), border-color .25s ease; }
.proof-grid a:hover { transform: translateY(-4px); border-color: rgba(56,139,253,.45); }
.proof-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =================================================================
   AJUSTEMENTS 30 JUILLET — bleu de marque, hovers, bandeau clients
   ================================================================= */
:root {
  --color-brand:        #0A78FF;  /* bleu du logo */
  --color-brand-bright: #1C82FF;  /* version lumineuse pour texte sur noir */
  --gradient-brand-hover: linear-gradient(135deg, #0A6BFF 0%, #1C82FF 50%, #4FC8FF 100%);
}

/* Le thème WordPress force "a:hover { color:#333366 }" (bleu-mauve).
   On rétablit l'héritage : chaque hover reprend la couleur voulue par le design. */
a:hover, a:active { color: inherit; }
.elementor a:hover, .elementor a:active { color: inherit; }

/* Cartes de service : le titre passe au bleu du logo */
.card h3 { transition: color .25s ease; }
.card:hover h3, a.card:hover h3 { color: var(--color-brand-bright); }
.card:hover { border-color: var(--color-brand); }
.card:hover .card-link, a.card:hover .card-link { color: var(--color-brand-bright); }

/* Boutons : hover nettement plus lumineux */
.btn-primary:hover {
  background: var(--gradient-brand-hover);
  box-shadow: 0 0 46px -6px rgba(28,130,255,.75), 0 0 0 1px rgba(120,200,255,.35) inset;
  transform: translateY(-2px);
}
.btn-secondary:hover { background: rgba(10,120,255,.14); border-color: var(--color-brand-bright); color: #fff; }
.btn-ghost:hover { border-color: var(--color-brand-bright); color: #fff; }
.btn-light:hover { box-shadow: 0 0 40px -8px rgba(255,255,255,.55); transform: translateY(-2px); }

/* Autres survols alignés sur le bleu de marque */
.testi:hover, .transform:hover, .tl-step:hover, .proof-grid a:hover { border-color: var(--color-brand); }
.socials a:hover, .info-row a:hover { color: var(--color-brand-bright); border-color: var(--color-brand); }
.footer-grid ul a:hover, .footer-bottom .row a:hover, .nav-links a:hover { color: #fff; }
.drop-menu a:hover { color: #fff; }

/* ===== BANDEAU CLIENTS (défilement infini) ===== */
.logo-marquee-label {
  margin: 3rem 0 1.75rem; font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-text-subtle);
}
.logo-marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.logo-track {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content; animation: logo-scroll 46s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: 0 0 auto; display: grid; place-items: center; height: 60px; }
.logo-item img {
  height: 38px; width: auto; max-width: 190px; object-fit: contain; display: block;
  opacity: .72; transition: opacity .3s ease, transform .3s ease;
}
.logo-item.lg-tall img { height: 52px; max-width: 120px; }   /* écussons / logos carrés */
.logo-item.lg-wide img { height: 26px; max-width: 210px; }   /* wordmarks très larges */
.logo-item img:hover { opacity: 1; transform: scale(1.06); }
@keyframes logo-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (max-width: 640px) {
  .logo-track { gap: 2.25rem; animation-duration: 34s; }
  .logo-item { height: 50px; }
  .logo-item img { height: 30px; max-width: 140px; }
  .logo-item.lg-tall img { height: 42px; max-width: 96px; }
  .logo-item.lg-wide img { height: 21px; max-width: 165px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 2rem 3rem; }
  .logo-track > .logo-item:nth-child(n+16) { display: none; }
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* =================================================================
   BANDEAU CLIENTS v2 — logos +30 %, couleurs révélées au survol
   ================================================================= */
.logo-item { height: 78px; }
.logo-shot {
  position: relative; display: grid; place-items: center;
  padding: .55rem .85rem; border-radius: 14px;
  background: transparent; transition: background .3s ease, box-shadow .3s ease;
}
.logo-shot img {
  grid-area: 1 / 1; display: block; width: auto; object-fit: contain;
  transition: opacity .35s ease, transform .35s ease;
}
/* tailles (+30 %) */
.logo-item .logo-shot img            { height: 50px; max-width: 250px; }
.logo-item.lg-tall .logo-shot img    { height: 68px; max-width: 156px; }
.logo-item.lg-wide .logo-shot img    { height: 34px; max-width: 273px; }

.lg-mono { opacity: .72; }
.lg-col  { opacity: 0; }

/* survol : le logo reprend ses vraies couleurs */
.logo-item:hover .lg-mono { opacity: 0; }
.logo-item:hover .lg-col  { opacity: 1; }
.logo-item:hover .logo-shot { transform: scale(1.05); }
.logo-item:hover .logo-shot img { transform: none; }
/* logos sans couleurs : simple montée en éclat */
.logo-item:not(.has-color):hover .lg-mono { opacity: 1; }
/* encre foncée : plaque claire pour rester lisible */
.logo-item.has-plate:hover .logo-shot {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 14px 34px -12px rgba(0,0,0,.9);
}
.logo-shot { transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }

@media (max-width: 640px) {
  .logo-item { height: 66px; }
  .logo-item .logo-shot img         { height: 39px; max-width: 182px; }
  .logo-item.lg-tall .logo-shot img { height: 55px; max-width: 125px; }
  .logo-item.lg-wide .logo-shot img { height: 27px; max-width: 215px; }
}
/* écrans tactiles : pas de survol possible, on montre les couleurs */
@media (hover: none) {
  .lg-mono { opacity: .82; }
}

/* =================================================================
   GRILLE « CE QUI EST INCLUS » — 2 rangées de 3, cartes basses
   ================================================================= */
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .feature-grid { grid-template-columns: 1fr; } }

.feature-card { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; }
.feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,120,255,.55), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.feature-card:hover::before { opacity: 1; }
.feature-head { display: flex; align-items: center; gap: .85rem; }
.feature-card .icon { width: 42px; height: 42px; border-radius: 11px; margin-bottom: 0; flex: none; }
.feature-card .icon svg { width: 21px; height: 21px; }
.feature-card h3 { font-size: 1.1rem; line-height: 1.25; margin-bottom: 0; }
.feature-card p { font-size: .94rem; margin: 0; line-height: 1.6; }
.logo-shot img { pointer-events: none; }

/* =================================================================
   CORRECTIF SPÉCIFICITÉ — révélation couleur des logos
   (l'ancienne règle « .logo-item img » l'emportait sur « .lg-col »)
   ================================================================= */
.logo-item .logo-shot img.lg-mono { opacity: .72; }
.logo-item .logo-shot img.lg-col  { opacity: 0; }
.logo-item:hover .logo-shot img.lg-mono { opacity: 0; }
.logo-item:hover .logo-shot img.lg-col  { opacity: 1; }
.logo-item:not(.has-color):hover .logo-shot img.lg-mono { opacity: 1; }
@media (hover: none) { .logo-item .logo-shot img.lg-mono { opacity: .82; } }

/* =================================================================
   ÉTUDES DE CAS
   ================================================================= */
.cas-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .cas-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .cas-grid { grid-template-columns: 1fr; } }

.cas-card {
  position: relative; display: block; border-radius: var(--radius-md); overflow: hidden;
  border: var(--border-1); background: var(--color-surface);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cas-card:hover { transform: translateY(-6px); border-color: var(--color-brand); box-shadow: 0 24px 60px -24px rgba(10,120,255,.55); }
.cas-card img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.cas-meta {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .2rem;
  padding: 2.6rem 1.15rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.92) 55%);
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.cas-card:hover .cas-meta { opacity: 1; transform: none; }
.cas-meta strong { font-family: var(--font-heading); font-size: 1rem; color: #fff; }
.cas-meta em { font-style: normal; font-size: .84rem; line-height: 1.45; color: var(--color-text-muted); }
.cas-note { margin-top: 1.5rem; font-size: .82rem; color: var(--color-text-subtle); line-height: 1.6; max-width: 70ch; }
@media (hover: none) { .cas-meta { opacity: 1; transform: none; } }


/* =================================================================
   ÉTUDES DE CAS v2 — statistiques, filtres, galerie, visionneuse
   ================================================================= */
.cas-stats {
  display: grid; gap: 1px; margin: 2rem 0 2.25rem;
  grid-template-columns: repeat(4, minmax(0,1fr));
  background: var(--color-border); border: var(--border-1);
  border-radius: var(--radius-md); overflow: hidden;
}
@media (max-width: 760px) { .cas-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cas-stat { background: var(--color-surface); padding: 1.4rem 1.25rem; text-align: center; }
.cas-stat b {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1;
  background: var(--gradient-brand-hover); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cas-stat span { display: block; margin-top: .4rem; font-size: .82rem; color: var(--color-text-muted); line-height: 1.4; }

.cas-filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.cas-chip {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .55rem 1.05rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: var(--border-1); color: var(--color-text-muted);
  font-family: var(--font-heading); font-weight: 600; font-size: .88rem;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.cas-chip span {
  font-size: .74rem; padding: .1rem .45rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07); color: var(--color-text-subtle);
}
.cas-chip:hover { color: #fff; border-color: var(--color-brand); }
.cas-chip.is-on { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.cas-chip.is-on span { background: rgba(0,0,0,.28); color: #fff; }

.cas-grid { display: grid; gap: 1.35rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) { .cas-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .cas-grid { grid-template-columns: 1fr; } }

.cas-card {
  position: relative; display: block; padding: 0; cursor: pointer; text-align: left;
  border-radius: var(--radius-md); overflow: hidden;
  border: var(--border-1); background: var(--color-surface);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cas-card[hidden] { display: none; }
.cas-card:hover, .cas-card:focus-visible {
  transform: translateY(-6px); border-color: var(--color-brand);
  box-shadow: 0 24px 60px -24px rgba(10,120,255,.55); outline: none;
}
.cas-card img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.cas-meta {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .25rem;
  padding: 3rem 1.15rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.93) 55%);
  opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease;
}
.cas-card:hover .cas-meta, .cas-card:focus-visible .cas-meta { opacity: 1; transform: none; }
.cas-meta strong { font-family: var(--font-heading); font-size: 1rem; color: #fff; }
.cas-meta em { font-style: normal; font-size: .83rem; line-height: 1.45; color: var(--color-text-muted); }
.cas-zoom {
  position: absolute; top: .8rem; right: .8rem; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); color: #fff;
  opacity: 0; transform: scale(.85); transition: opacity .28s ease, transform .28s ease;
}
.cas-zoom svg { width: 17px; height: 17px; }
.cas-card:hover .cas-zoom, .cas-card:focus-visible .cas-zoom { opacity: 1; transform: none; }
@media (hover: none) { .cas-meta { opacity: 1; transform: none; } .cas-zoom { opacity: .9; transform: none; } }
.cas-note { margin-top: 1.6rem; font-size: .82rem; color: var(--color-text-subtle); line-height: 1.6; max-width: 74ch; }

/* --- visionneuse plein écran --- */
.cas-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0,0,0,.93); backdrop-filter: blur(10px);
  animation: cas-fade .22s ease both;
}
.cas-lightbox[hidden] { display: none; }
@keyframes cas-fade { from { opacity: 0; } to { opacity: 1; } }
.cas-lb-inner { margin: 0; display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: min(92vw, 780px); }
.cas-lb-inner img {
  max-width: 100%; max-height: 76vh; width: auto; height: auto; display: block;
  border-radius: var(--radius-md); box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
}
.cas-lb-inner figcaption { text-align: center; display: flex; flex-direction: column; gap: .3rem; }
.cas-lb-inner figcaption strong { font-family: var(--font-heading); font-size: 1.06rem; color: #fff; }
.cas-lb-inner figcaption span { font-size: .9rem; color: var(--color-text-muted); line-height: 1.5; }
.cas-lb-close, .cas-lb-nav {
  position: absolute; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
  border-radius: 50%; transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cas-lb-close:hover, .cas-lb-nav:hover { background: var(--color-brand); border-color: var(--color-brand); transform: scale(1.07); }
.cas-lb-close { top: clamp(.8rem,2vw,1.5rem); right: clamp(.8rem,2vw,1.5rem); width: 44px; height: 44px; padding: 0; line-height: 0; }
.cas-lb-nav { top: 50%; margin-top: -26px; width: 52px; height: 52px; font-size: 2rem; line-height: 1; padding-bottom: 6px; }
.cas-lb-prev { left: clamp(.5rem, 2vw, 2rem); }
.cas-lb-next { right: clamp(.5rem, 2vw, 2rem); }
@media (max-width: 620px) {
  .cas-lb-nav { width: 42px; height: 42px; margin-top: -21px; font-size: 1.6rem; }
  .cas-lb-inner img { max-height: 62vh; }
}

/* =================================================================
   CORRECTIF — le thème colore les boutons en violet (#605BE5)
   sur « button:hover / button:focus ». On redonne nos couleurs.
   ================================================================= */
.elementor .btn-primary, .elementor .btn-primary:focus { background-image: var(--gradient-brand); background-color: transparent; }
.elementor .btn-primary:hover, .elementor .btn-primary:focus:hover { background-image: var(--gradient-brand-hover); background-color: transparent; }
.elementor .btn-secondary, .elementor .btn-secondary:focus { background-color: transparent; }
.elementor .btn-secondary:hover { background-color: rgba(10,120,255,.14); }
.elementor .btn-ghost, .elementor .btn-ghost:focus { background-color: var(--color-surface-2); }
.elementor .btn-light, .elementor .btn-light:focus, .elementor .btn-light:hover { background-color: #fff; }

.cas-filtres .cas-chip, .cas-filtres .cas-chip:focus, .cas-filtres .cas-chip:hover { background-color: var(--color-surface); }
.cas-filtres .cas-chip.is-on, .cas-filtres .cas-chip.is-on:focus, .cas-filtres .cas-chip.is-on:hover { background-color: var(--color-brand); }
.cas-grid .cas-card, .cas-grid .cas-card:focus, .cas-grid .cas-card:hover { background-color: var(--color-surface); }

.cas-lightbox .cas-lb-close, .cas-lightbox .cas-lb-nav,
.cas-lightbox .cas-lb-close:focus, .cas-lightbox .cas-lb-nav:focus { background-color: rgba(255,255,255,.08); }
.cas-lightbox .cas-lb-close:hover, .cas-lightbox .cas-lb-nav:hover { background-color: var(--color-brand); }

/* mise au point clavier visible et cohérente */
.cas-lb-close:focus-visible, .cas-lb-nav:focus-visible,
.cas-chip:focus-visible, .cas-card:focus-visible, .elementor .btn:focus-visible {
  outline: 2px solid var(--color-brand-bright); outline-offset: 3px;
}

/* =================================================================
   APERÇU DES ÉTUDES DE CAS (page d'accueil)
   ================================================================= */
.cas-teaser { margin-top: 3.5rem; }
.cas-teaser-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.5rem; }
.cas-teaser-titre { font-family: var(--font-heading); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; margin-top: .5rem; }
.cas-teaser-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .cas-teaser-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .cas-teaser-grid > :nth-child(3) { display: none; } }
@media (max-width: 560px) { .cas-teaser-grid { grid-template-columns: 1fr; } .cas-teaser-grid > :nth-child(3) { display: block; } }
.cas-teaser-card {
  position: relative; display: block; border-radius: var(--radius-md); overflow: hidden;
  border: var(--border-1); background: var(--color-surface);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cas-teaser-card:hover { transform: translateY(-5px); border-color: var(--color-brand); box-shadow: 0 22px 55px -24px rgba(10,120,255,.55); }
.cas-teaser-card img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.cas-teaser-meta {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .2rem;
  padding: 2.8rem 1.05rem 1rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.93) 55%);
  opacity: 0; transform: translateY(9px); transition: opacity .3s ease, transform .3s ease;
}
.cas-teaser-card:hover .cas-teaser-meta { opacity: 1; transform: none; }
.cas-teaser-meta strong { font-family: var(--font-heading); font-size: .96rem; color: #fff; }
.cas-teaser-meta em { font-style: normal; font-size: .8rem; line-height: 1.45; color: var(--color-text-muted); }
@media (hover: none) { .cas-teaser-meta { opacity: 1; transform: none; } }

/* =================================================================
   MAQUETTES ANIMÉES — page Croissance Tech
   Remplace les photos placeholder par du wireframe qui se construit.
   ================================================================= */

/* ---------- 1) Navigateur : wireframe → design → en ligne ---------- */
.wfx { display: flex; flex-direction: column; gap: 1rem; }
.wfx-frame {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  border: var(--border-1); background: #0C0D11; box-shadow: var(--shadow-card);
}
.wfx-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem; background: #14151A; border-bottom: var(--border-1);
}
.wfx-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); flex: none; }
.wfx-dot:nth-child(1) { background: rgba(255,95,86,.55); }
.wfx-dot:nth-child(2) { background: rgba(255,189,46,.55); }
.wfx-dot:nth-child(3) { background: rgba(39,201,63,.55); }
.wfx-url {
  flex: 1; margin-left: .5rem; height: 15px; border-radius: 999px;
  background: rgba(255,255,255,.05); overflow: hidden; position: relative;
}
.wfx-url-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, rgba(10,120,255,.45), rgba(33,181,240,.3));
  animation: wfx-url 12s linear infinite;
}
@keyframes wfx-url { 0%, 56% { width: 0; } 68%, 100% { width: 78%; } }

.wfx-page { padding: 1rem; display: flex; flex-direction: column; gap: .85rem; aspect-ratio: 4 / 2.32; }

/* bloc générique : apparition en cascade + colorisation */
.wfx-b {
  position: relative; display: block; border-radius: 4px;
  background: rgba(255,255,255,.13);
  animation: wfx-in 12s cubic-bezier(.2,.8,.2,1) var(--d, 0s) infinite backwards;
}
.wfx-b::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--wf-c, transparent); opacity: 0;
  animation: wfx-col 12s linear var(--d, 0s) infinite backwards;
}
@keyframes wfx-in {
  0%   { opacity: 0; transform: translateY(9px) scale(.97); }
  5%   { opacity: 1; transform: none; }
  93%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(9px) scale(.97); }
}
@keyframes wfx-col { 0%, 30% { opacity: 0; } 44%, 100% { opacity: 1; } }

.wfx-nav { display: flex; align-items: center; gap: .5rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.wfx-logo { width: 46px; height: 12px; border-radius: 3px; --wf-c: rgba(255,255,255,.8); }
.wfx-link { width: 30px; height: 7px; --wf-c: rgba(255,255,255,.42); }
.wfx-link:nth-of-type(3) { width: 38px; }
.wfx-cta { margin-left: auto; width: 62px; height: 20px; border-radius: 999px; --wf-c: var(--gradient-brand-hover); }

.wfx-hero { display: flex; flex-direction: column; gap: .5rem; padding: .6rem 0 .3rem; }
.wfx-t1 { width: 76%; height: 15px; border-radius: 4px; --wf-c: rgba(255,255,255,.86); }
.wfx-t1.is-short { width: 52%; --wf-c: var(--gradient-brand-hover); }
.wfx-t2 { width: 88%; height: 7px; --wf-c: rgba(255,255,255,.34); }
.wfx-t2.is-short { width: 64%; }
.wfx-btn {
  margin-top: .45rem; width: 116px; height: 26px; border-radius: 8px;
  --wf-c: var(--gradient-brand-hover);
  animation: wfx-in 12s cubic-bezier(.2,.8,.2,1) var(--d, 0s) infinite backwards,
             wfx-pulse 12s ease-in-out infinite;
}
@keyframes wfx-pulse {
  0%, 74% { box-shadow: 0 0 0 0 rgba(28,130,255,0); }
  80%     { box-shadow: 0 0 0 7px rgba(28,130,255,.22); }
  88%,100%{ box-shadow: 0 0 0 0 rgba(28,130,255,0); }
}

.wfx-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.wfx-card { height: 46px; border-radius: 7px; --wf-c: rgba(10,120,255,.17); }
.wfx-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: center; margin-top: auto; }
.wfx-field { height: 22px; border-radius: 6px; --wf-c: rgba(255,255,255,.09); }
.wfx-send { width: 58px; height: 22px; border-radius: 6px; --wf-c: var(--gradient-brand-hover); }

.wfx-cursor {
  position: absolute; left: 17%; top: 58%; width: 15px; height: 21px; pointer-events: none;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M1 1l13 9-6 1.3 3.2 6.4-2.6 1.3L5.4 12.6 1 16.6z' fill='%23fff' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  animation: wfx-cur 12s ease-in-out infinite backwards;
}
@keyframes wfx-cur {
  0%, 68%  { opacity: 0; transform: translate(14px, 18px); }
  73%      { opacity: 1; transform: translate(10px, 12px); }
  79%      { opacity: 1; transform: translate(0, 0); }
  82%      { opacity: 1; transform: translate(0, 0) scale(.8); }
  86%      { opacity: 1; transform: translate(0, 0) scale(1); }
  95%,100% { opacity: 0; transform: translate(0, 0); }
}

.wfx-legende { position: relative; height: 22px; }
.wfx-etape {
  position: absolute; inset: 0; display: block; text-align: center;
  font-family: var(--font-heading); font-weight: 600; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--color-brand-bright);
  animation: wfx-lab 12s linear infinite backwards;
}
.wfx-etape:nth-child(2) { animation-delay: 4s; }
.wfx-etape:nth-child(3) { animation-delay: 8s; color: #fff; }
@keyframes wfx-lab {
  0%       { opacity: 0; transform: translateY(5px); }
  3%, 28%  { opacity: 1; transform: none; }
  33%,100% { opacity: 0; transform: translateY(-5px); }
}

/* ---------- 2) Pipeline CRM animé ---------- */
.split-media--nu { border: 0; overflow: visible; box-shadow: none; border-radius: 0; }
.crm {
  background: var(--color-surface); border: var(--border-1);
  border-radius: var(--radius-md); padding: 1.15rem 1.15rem 1.05rem;
  box-shadow: var(--shadow-card);
}
.crm-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.crm-titre { font-family: var(--font-heading); font-weight: 600; font-size: .95rem; }
.crm-live {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle);
}
.crm-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); animation: crm-ping 2s ease-in-out infinite; }
@keyframes crm-ping { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 50% { opacity: .65; box-shadow: 0 0 0 5px rgba(46,204,113,0); } }

.crm-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: .5rem; }
.crm-col-h {
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-subtle); padding-right: .55rem; line-height: 1.3;
}
.crm-piste { position: relative; height: 60px; }
.crm-fant {
  position: absolute; top: 0; left: calc(var(--c) * 25%);
  width: calc(25% - .55rem); height: 58px; border-radius: 10px;
  border: 1px dashed rgba(255,255,255,.09); background: rgba(255,255,255,.02);
}
.crm-actif {
  position: absolute; top: 0; left: 0; width: calc(25% - .55rem); height: 58px;
  display: flex; align-items: center; gap: .5rem; padding: 0 .55rem; box-sizing: border-box;
  border-radius: 10px; background: var(--color-surface-2);
  border: 1px solid rgba(10,120,255,.5); box-shadow: 0 12px 28px -14px rgba(10,120,255,.85);
  animation: crm-move 10s cubic-bezier(.55,0,.2,1) infinite;
}
@keyframes crm-move {
  0%       { left: 0;   opacity: 0; transform: translateY(7px); }
  5%, 18%  { left: 0;   opacity: 1; transform: none; }
  28%, 43% { left: 25%; opacity: 1; }
  53%, 68% { left: 50%; opacity: 1; }
  78%, 94% { left: 75%; opacity: 1; }
  100%     { left: 75%; opacity: 0; }
}
.crm-av { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--gradient-brand); }
.crm-l { display: flex; flex-direction: column; gap: .28rem; flex: 1; min-width: 0; }
.crm-l b { display: block; height: 6px; width: 72%; border-radius: 3px; background: rgba(255,255,255,.62); }
.crm-l em { display: block; height: 5px; width: 46%; border-radius: 3px; background: rgba(255,255,255,.22); }
.crm-eclair {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-brand); color: #fff; box-shadow: 0 0 14px rgba(10,120,255,.75);
  animation: crm-flash 10s linear infinite;
}
.crm-eclair svg { width: 11px; height: 11px; }
@keyframes crm-flash {
  0%,19%   { opacity: 0; transform: scale(.5); }
  23%      { opacity: 1; transform: scale(1); }
  32%,44%  { opacity: 0; transform: scale(.5); }
  48%      { opacity: 1; transform: scale(1); }
  57%,69%  { opacity: 0; transform: scale(.5); }
  73%      { opacity: 1; transform: scale(1); }
  82%,100% { opacity: 0; transform: scale(.5); }
}
.crm-pied { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.15rem; padding-top: 1rem; border-top: var(--border-1); }
.crm-stat { text-align: center; }
.crm-stat b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-brand-bright); }
.crm-stat em { display: block; font-style: normal; font-size: .72rem; color: var(--color-text-subtle); margin-top: .15rem; line-height: 1.35; }

/* ---------- 3) Processus de création ---------- */
.proc-grille { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .proc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .proc-grille { grid-template-columns: 1fr; } }
.proc-etape {
  position: relative; overflow: hidden;
  padding: 1.7rem 1.5rem 1.55rem;
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.proc-etape::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,120,255,.6), transparent);
  opacity: 0; transition: opacity .28s ease;
}
.proc-etape:hover { transform: translateY(-4px); border-color: var(--color-brand); box-shadow: var(--shadow-card); }
.proc-etape:hover::before { opacity: 1; }
.proc-num {
  position: absolute; top: .9rem; right: 1.1rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 2.5rem;
  line-height: 1; color: rgba(255,255,255,.055); letter-spacing: -.02em;
}
.proc-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(10,120,255,.12); border: 1px solid rgba(10,120,255,.32);
  color: var(--color-accent-glow);
}
.proc-ico svg { width: 21px; height: 21px; }
.proc-etape h3 { font-size: 1.08rem; line-height: 1.3; margin: .95rem 0 .45rem; }
.proc-etape p { font-size: .93rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; }

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .wfx-b, .wfx-b::after, .wfx-btn, .wfx-cursor, .wfx-etape, .wfx-url-fill,
  .crm-actif, .crm-eclair, .crm-live i { animation: none !important; }
  .wfx-b { opacity: 1; }
  .wfx-b::after { opacity: 1; }
  .wfx-url-fill { width: 78%; }
  .wfx-cursor { opacity: 0; }
  .wfx-etape:nth-child(1), .wfx-etape:nth-child(2) { opacity: 0; }
  .wfx-etape:nth-child(3) { opacity: 1; }
  .crm-actif { left: 75%; opacity: 1; }
  .crm-eclair { opacity: 1; }
}

/* =================================================================
   ÉTUDE DE CAS SEO — fiche Google + grille de classement local
   ================================================================= */
.seo-cas { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .seo-cas { grid-template-columns: 1fr 1fr; align-items: center; } }
.seo-cas-titre { font-size: var(--fs-h3); line-height: 1.25; margin-top: 1rem; }
.seo-cite {
  margin: 1.5rem 0 1rem; padding: .2rem 0 .2rem 1.15rem;
  border-left: 3px solid var(--color-brand); font-size: 1.02rem;
  line-height: 1.6; color: #fff;
}
.seo-cas-visuel { display: flex; flex-direction: column; gap: 1rem; }

/* fiche Google Business */
.gbp { background: #17181D; border: var(--border-1); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.gbp-tete { padding: 1.1rem 1.2rem .9rem; display: flex; flex-direction: column; gap: .45rem; }
.gbp-nom { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: #fff; }
.gbp-note { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.gbp-note b { font-weight: 600; color: #fff; }
.gbp-etoiles { font-style: normal; color: #FFC23D; letter-spacing: .06em; }
.gbp-note em { font-style: normal; color: var(--color-accent-glow); }
.gbp-cat { font-size: .84rem; color: var(--color-text-muted); }
.gbp-actions { display: flex; gap: .5rem; padding: 0 1.2rem 1.1rem; flex-wrap: wrap; }
.gbp-act {
  font-size: .78rem; padding: .38rem .85rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); color: var(--color-text-muted);
}

/* grille de classement local */
.geo { background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); padding: 1.1rem 1.2rem 1.15rem; }
.geo-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; }
.geo-titre { font-family: var(--font-heading); font-weight: 600; font-size: .9rem; }
.geo-leg { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--color-text-subtle); }
.geo-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.geo-leg i + i { margin-left: .5rem; }
.geo-p1 { background: #1F9D4B; }
.geo-p2 { background: #E08A1E; }
.geo-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.geo-pin {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: #1F9D4B; color: #fff; font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(.78rem, 1.5vw, .95rem);
  box-shadow: 0 4px 12px -4px rgba(31,157,75,.7);
  animation: geo-pop .5s cubic-bezier(.2,1.3,.4,1) both;
  animation-delay: calc(var(--i) * .035s);
}
.geo-pin.is-moyen { background: #E08A1E; box-shadow: 0 4px 12px -4px rgba(224,138,30,.7); }
@keyframes geo-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.geo-note { margin-top: .9rem; font-size: .76rem; line-height: 1.55; color: var(--color-text-subtle); }
@media (prefers-reduced-motion: reduce) { .geo-pin { animation: none; } }

/* =================================================================
   BANDE TECHNO — plateformes sur lesquelles on bâtit
   (mots-symboles typographiques ; à remplacer par les logos officiels)
   ================================================================= */
.tech { border-top: var(--border-1); padding-top: 1.75rem; }
.tech-label {
  text-align: center; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 1.25rem;
}
.tech-marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tech-track {
  display: flex; align-items: center; gap: clamp(2.25rem, 4.5vw, 4rem);
  width: max-content; animation: tech-scroll 34s linear infinite;
}
.tech-marquee:hover .tech-track { animation-play-state: paused; }
@keyframes tech-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.tech-item {
  flex: 0 0 auto; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.45rem); letter-spacing: -.01em;
  color: rgba(255,255,255,.62); white-space: nowrap;
  transition: color .28s ease, transform .28s ease;
}
.tech-item:hover { color: #fff; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .tech-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 1.5rem 2.5rem; }
  .tech-track > .tech-item:nth-child(n+6) { display: none; }
  .tech-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* =================================================================
   LOGOS DE PLATEFORMES — bande techno + bandeau partenaires
   Même traitement que les logos clients : blanc monochrome,
   vraies couleurs au survol, plaque claire si l'encre est foncée.
   ================================================================= */
.plt-item { flex: 0 0 auto; display: grid; place-items: center; text-decoration: none; }
.plt-shot {
  position: relative; display: grid; place-items: center;
  padding: .55rem .9rem; border-radius: 14px;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.plt-shot img {
  grid-area: 1 / 1; display: block; width: auto; object-fit: contain;
  pointer-events: none; transition: opacity .35s ease;
}
.plt-item .plt-shot img            { height: 40px; max-width: 210px; }
.plt-item.is-large .plt-shot img   { height: 30px; max-width: 250px; }
.plt-item.is-compact .plt-shot img { height: 50px; max-width: 150px; }

.plt-item .plt-mono { opacity: .72; }
.plt-item .plt-col  { opacity: 0; }
.plt-item:hover .plt-mono, .plt-item:focus-visible .plt-mono { opacity: 0; }
.plt-item:hover .plt-col,  .plt-item:focus-visible .plt-col  { opacity: 1; }
.plt-item:not(.has-color):hover .plt-mono { opacity: 1; }
.plt-item:hover .plt-shot, .plt-item:focus-visible .plt-shot { transform: scale(1.05); }
.plt-item.has-plate:hover .plt-shot, .plt-item.has-plate:focus-visible .plt-shot {
  background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 14px 34px -12px rgba(0,0,0,.9);
}
.plt-item:focus-visible { outline: 2px solid var(--color-brand-bright); outline-offset: 4px; border-radius: 14px; }
@media (hover: none) { .plt-item .plt-mono { opacity: .85; } }

/* --- bandeau partenaires (accueil, sous le hero) --- */
.partenaires { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: var(--border-1); }
.plt-label {
  text-align: center; font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 1.5rem;
}
.plt-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.plt-cta {
  text-align: center; margin-top: 1.75rem;
  font-size: .92rem; color: var(--color-text-muted);
}
.plt-cta a { color: var(--color-brand-bright); font-weight: 600; }
.plt-cta a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .plt-band { gap: 1.25rem 2rem; }
  .plt-item .plt-shot img            { height: 32px; max-width: 165px; }
  .plt-item.is-large .plt-shot img   { height: 24px; max-width: 195px; }
  .plt-item.is-compact .plt-shot img { height: 40px; max-width: 120px; }
}

/* =================================================================
   CORRECTIFS MOBILE — 30 juillet
   ================================================================= */

/* Badge Google du hero : tenait sur deux lignes avec le point orphelin */
@media (max-width: 620px) {
  .hero-badge {
    gap: .4rem; padding: .4rem .75rem; font-size: .74rem;
    flex-wrap: nowrap; max-width: 100%;
  }
  .hero-badge > span { white-space: nowrap; }
  .hero-badge .stars { letter-spacing: .04em; font-size: .78rem; }
  .hero-badge svg { width: 14px; height: 14px; }
}
/* très petits écrans : on empile proprement, sans point orphelin */
@media (max-width: 384px) {
  .hero-badge { flex-wrap: wrap; justify-content: center; row-gap: .1rem; border-radius: 16px; padding: .5rem .9rem; }
  .hero-badge .dot { display: none; }
}

/* Bandeau partenaires : défilement arrêtable au survol et à la tape */
.plt-marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.plt-track {
  display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content; animation: plt-scroll 40s linear infinite;
}
.plt-marquee:hover .plt-track,
.plt-marquee:focus-within .plt-track,
.plt-marquee.is-paused .plt-track { animation-play-state: paused; }
@keyframes plt-scroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Lien d'essai gratuit : toujours sur sa propre ligne */
.plt-cta a { display: block; margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .plt-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 1.5rem 2.5rem; }
  .plt-track > .plt-item:nth-child(n+5) { display: none; }
  .plt-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* =================================================================
   PAGE SERVICES — correctifs mobile
   ================================================================= */
.sur-large { display: inline; }
@media (max-width: 620px) { .sur-large { display: none; } }

/* Tableau comparatif : illisible en défilement horizontal sur mobile.
   Sous 760 px, chaque ligne devient une carte empilée. */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; }
  table.compare { min-width: 0; display: block; border-collapse: separate; }
  table.compare thead { display: none; }
  table.compare tbody { display: grid; gap: .9rem; }
  table.compare tr {
    display: block; padding: 1.05rem 1.1rem;
    background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md);
  }
  table.compare td { display: block; border: 0; padding: 0; font-size: .92rem; }

  table.compare tbody td:first-child {
    font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem;
    color: #fff; margin-bottom: .8rem;
  }
  table.compare tbody td:nth-child(2),
  table.compare tbody td:last-child {
    padding: .65rem .8rem; border-radius: 10px; line-height: 1.5;
  }
  table.compare tbody td:nth-child(2) {
    background: rgba(10,120,255,.13); border: 1px solid rgba(10,120,255,.3);
    color: #fff; margin-bottom: .55rem;
  }
  table.compare tbody td:last-child {
    background: rgba(255,255,255,.035); border: 1px solid var(--color-border);
    color: var(--color-text-muted);
  }
  /* l'étiquette de colonne remplace la simple coche */
  table.compare tbody td:nth-child(2)::before,
  table.compare tbody td:last-child::before {
    content: attr(data-th); display: block; margin: 0 0 .3rem;
    font-family: var(--font-heading); font-size: .68rem; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase; opacity: 1;
  }
  table.compare tbody td:nth-child(2)::before { color: var(--color-brand-bright); }
  table.compare tbody td:last-child::before { color: var(--color-text-subtle); font-size: .68rem; }
  table.compare tr:last-child td { border-bottom: 0; }
}

/* =================================================================
   GARDE-FOU MOBILE — aucun débordement horizontal
   ================================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
.elementor .container, .elementor section { max-width: 100%; }
img, svg, table { max-width: 100%; }

/* =================================================================
   MAQUETTE v2 — annotations qui expliquent chaque bloc
   ================================================================= */
.wfx-note {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem .3rem .5rem; border-radius: 999px;
  background: rgba(6,8,14,.9); border: 1px solid rgba(28,130,255,.45);
  backdrop-filter: blur(6px);
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(.6rem, 1.05vw, .72rem); color: #fff; white-space: nowrap;
  opacity: 0; transform: translateY(5px);
  animation: wfx-note-in 12s ease-in-out infinite backwards;
  pointer-events: none;
}
.wfx-note i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--color-brand-bright); box-shadow: 0 0 0 3px rgba(28,130,255,.22);
}
@keyframes wfx-note-in {
  0%, 34%   { opacity: 0; transform: translateY(5px); }
  40%, 92%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(5px); }
}
.wfx-note--1 { top: 27%;  right: 3%;  animation-delay: .1s; }
.wfx-note--2 { top: 51%;  left: 33%;  animation-delay: .5s; }
.wfx-note--3 { top: 66%;  right: 3%;  animation-delay: .9s; }
.wfx-note--4 { bottom: 4%; right: 3%; animation-delay: 1.3s; }
@media (max-width: 700px) {
  .wfx-note--2 { left: auto; right: 3%; top: 47%; }
  .wfx-note { font-size: .58rem; padding: .24rem .5rem .24rem .42rem; }
}

/* légende : étape + phrase d'explication */
.wfx-legende { height: auto; min-height: 76px; }
.wfx-etape {
  display: flex; flex-direction: column; gap: .35rem; align-items: center;
  text-transform: none; letter-spacing: 0;
}
.wfx-etape b {
  font-family: var(--font-heading); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-bright);
}
.wfx-etape:nth-child(3) b { color: var(--color-success); }
.wfx-etape em {
  font-style: normal; font-weight: 400; font-size: .86rem; line-height: 1.5;
  color: var(--color-text-muted); max-width: 46ch; text-align: center;
}
.wfx-etape:nth-child(3) { color: inherit; }

/* =================================================================
   CRM v2 — la 4e étape devient une conversion
   ================================================================= */
.crm-sac {
  position: absolute; top: -10px; left: -10px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-success); color: #06210F;
  box-shadow: 0 0 18px rgba(46,204,113,.8);
  opacity: 0; transform: scale(.4);
  animation: crm-sac-in 10s cubic-bezier(.2,1.4,.4,1) infinite;
}
.crm-sac svg { width: 15px; height: 15px; }
@keyframes crm-sac-in {
  0%, 74%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
  80%       { opacity: 1; transform: scale(1.15) rotate(4deg); }
  84%, 94%  { opacity: 1; transform: scale(1) rotate(0); }
  100%      { opacity: 0; transform: scale(.4); }
}
.crm-gain {
  position: absolute; top: -6px; right: -4px;
  font-family: var(--font-heading); font-weight: 700; font-size: .82rem;
  font-style: normal; color: var(--color-success); white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  opacity: 0; animation: crm-gain-up 10s ease-out infinite;
}
@keyframes crm-gain-up {
  0%, 78%  { opacity: 0; transform: translateY(6px); }
  84%      { opacity: 1; transform: translateY(-8px); }
  93%      { opacity: 1; transform: translateY(-16px); }
  100%     { opacity: 0; transform: translateY(-22px); }
}
/* la carte passe au vert une fois le client signé */
.crm-actif {
  animation: crm-move 10s cubic-bezier(.55,0,.2,1) infinite,
             crm-signe 10s linear infinite;
}
@keyframes crm-signe {
  0%, 76%  { border-color: rgba(10,120,255,.5); box-shadow: 0 12px 28px -14px rgba(10,120,255,.85); }
  82%,94%  { border-color: rgba(46,204,113,.75); box-shadow: 0 12px 32px -12px rgba(46,204,113,.9); }
  100%     { border-color: rgba(10,120,255,.5); }
}

/* =================================================================
   GRILLE GOOGLE — fond de carte stylisé de la Rive-Sud
   ================================================================= */
.geo-grille { position: relative; padding: .75rem; border-radius: var(--radius-sm); overflow: hidden; }
.geo-carte {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .85; z-index: 0; pointer-events: none;
}
.geo-grille::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.55) 100%);
}
.geo-pin { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .wfx-note { animation: none; opacity: 1; transform: none; }
  .crm-sac { animation: none; opacity: 1; transform: none; }
  .crm-gain { animation: none; opacity: 1; }
}

/* espacement resserré entre sections (demande Justin) */
.section--serre { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--serre + .section--serre { padding-top: clamp(2rem, 4vw, 3.5rem); }
.hero + .section--serre { padding-top: clamp(1.5rem, 3.5vw, 3rem); }

/* =================================================================
   PAGES LÉGALES
   ================================================================= */
.hero--legal { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); text-align: left; }
.legal-h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.15; margin: 1rem 0 0; max-width: 20ch; }
.legal-maj { margin-top: 1.25rem; font-size: .84rem; color: var(--color-text-subtle); }
.legal-corps { max-width: 820px; }
.legal-corps > h2:first-of-type { margin-top: 0; }
.legal-h2 {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.3;
  margin: 2.5rem 0 .9rem; color: #fff;
  padding-top: 1.6rem; border-top: var(--border-1);
}
.legal-corps > h2.legal-h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-corps p { color: var(--color-text-muted); line-height: 1.75; margin-bottom: 1rem; font-size: .98rem; }
.legal-corps p strong, .legal-corps li strong { color: #fff; font-weight: 600; }
.legal-corps a { color: var(--color-brand-bright); }
.legal-corps a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal-liste { display: grid; gap: .55rem; margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: none; }
.legal-liste li {
  position: relative; color: var(--color-text-muted); line-height: 1.7; font-size: .96rem;
}
.legal-liste li::before {
  content: ""; position: absolute; left: -1.25rem; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand);
}
.legal-contact {
  margin-top: 2.75rem; padding: 1.6rem 1.7rem;
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md);
}
.legal-contact .legal-h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-liens {
  margin-top: 2rem; padding-top: 1.5rem; border-top: var(--border-1);
  font-size: .9rem; color: var(--color-text-subtle);
}
.footer-bottom .row a { color: var(--color-text-subtle); }
.footer-bottom .row a:hover { color: #fff; }

/* ===== Retouches finales : lisibilité de la carte, badge de gain, annotations ===== */
.wfx-note--2 { top: 43%; }
@media (max-width: 700px) { .wfx-note--2 { top: 40%; } }

/* badge de gain centré au-dessus de la carte (ne dépasse plus du panneau) */
.crm-gain { top: -22px; left: 50%; right: auto; transform: translate(-50%, 6px); text-align: center; }
@keyframes crm-gain-up {
  0%, 78%  { opacity: 0; transform: translate(-50%, 6px); }
  84%      { opacity: 1; transform: translate(-50%, -6px); }
  93%      { opacity: 1; transform: translate(-50%, -13px); }
  100%     { opacity: 0; transform: translate(-50%, -19px); }
}
/* le sac d'argent prend la place de l'éclair, qui a disparu à ce moment-là */
.crm-sac { top: -9px; right: -9px; left: auto; }

/* pastilles plus petites : on voit la carte derrière */
.geo-grille { gap: .45rem; padding: .85rem; }
.geo-pin {
  width: 70%; margin-inline: auto; aspect-ratio: 1;
  font-size: clamp(.72rem, 1.4vw, .88rem);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.9), 0 0 0 2px rgba(0,0,0,.35);
}
.geo-pin.is-moyen { box-shadow: 0 4px 14px -4px rgba(0,0,0,.9), 0 0 0 2px rgba(0,0,0,.35); }
.geo-carte { opacity: 1; }
.geo-grille::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.42) 100%); }
.geo-tete { flex-direction: column; align-items: flex-start; gap: .45rem; }
.geo-villes { font-size: .78rem; color: var(--color-text-subtle); line-height: 1.5; }
@media (min-width: 620px) { .geo-tete { flex-direction: row; align-items: center; flex-wrap: wrap; } .geo-villes { flex-basis: 100%; } }
/* bouton de fermeture : SVG parfaitement centré, plus de décalage de police */
.cas-lb-close { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
.cas-lb-close svg { width: 19px; height: 19px; display: block; }

/* =================================================================
   BANDE TECHNO v2 — deux groupes distincts (plateformes / paiements)
   ================================================================= */
.tech { border-top: var(--border-1); padding-top: 2rem; display: grid; gap: 2rem; }
.tech-groupe { display: grid; gap: 1.1rem; }
.tech-groupe .tech-label { margin: 0; }
.tech-rangee {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.tech-note {
  margin: 0; padding-top: 1.5rem; border-top: var(--border-1);
  font-size: .88rem; line-height: 1.6; color: var(--color-text-subtle);
  text-align: center; max-width: 68ch; margin-inline: auto;
}
@media (max-width: 640px) { .tech { gap: 1.75rem; } .tech-rangee { gap: 1.25rem 2rem; } }

/* =================================================================
   PIPELINE CRM v3 — une icône par étape, en haut à droite de la carte
   ================================================================= */
.crm-etape {
  position: absolute; top: -9px; right: -9px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-brand); color: #fff;
  box-shadow: 0 0 14px rgba(10,120,255,.8);
  opacity: 0; transform: scale(.5);
  animation: crm-etape-in 10s cubic-bezier(.2,1.3,.4,1) infinite;
}
.crm-etape svg { width: 13px; height: 13px; }
@keyframes crm-etape-in {
  0%      { opacity: 0; transform: scale(.5); }
  4%      { opacity: 1; transform: scale(1.1); }
  7%, 20% { opacity: 1; transform: scale(1); }
  24%,100%{ opacity: 0; transform: scale(.5); }
}
.crm-etape--1 { animation-delay: 0s; }     /* nouveau lead   → bonhomme */
.crm-etape--2 { animation-delay: 2.5s; }   /* contacté       → téléphone */
.crm-etape--3 { animation-delay: 5s; }     /* rendez-vous    → agenda */
/* le sac d'argent (déjà en place) prend le relais à l'étape « client » */
@media (prefers-reduced-motion: reduce) { .crm-etape { animation: none; opacity: 0; } }

/* =================================================================
   CONSENTEMENT AUX TÉMOINS — Loi 25
   Refuser est aussi simple qu'accepter, et le choix se change
   à tout moment par la pastille en bas à gauche.
   ================================================================= */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  padding: clamp(.75rem, 2vw, 1.5rem);
  display: flex; justify-content: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.ck.is-on { opacity: 1; transform: none; }
.ck[hidden] { display: none; }
.ck-boite {
  pointer-events: auto; width: min(760px, 100%);
  background: rgba(12,13,18,.97); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-md);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(10,120,255,.14) inset;
  overflow: hidden;
}
.ck-principal { padding: 1.25rem 1.35rem 1.1rem; }
.ck-tete { display: flex; gap: .95rem; align-items: flex-start; }
.ck-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(10,120,255,.14); border: 1px solid rgba(10,120,255,.32); color: var(--color-accent-glow);
}
.ck-ico svg { width: 20px; height: 20px; }
.ck-titre { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: #fff; margin: 0 0 .3rem; }
.ck-texte { font-size: .88rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; }
.ck-texte strong { color: #fff; font-weight: 600; }

.ck-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.ck-actions--detail { margin-top: 1.25rem; }
.ck-btn {
  flex: 1 1 auto; min-width: 130px; cursor: pointer;
  padding: .68rem 1.1rem; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: .88rem;
  border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--color-text-muted);
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.ck-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.ck-btn--ok {
  background-image: var(--gradient-brand-hover); background-color: transparent;
  border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px -12px rgba(28,130,255,.9);
}
.ck-btn--ok:hover { color: #fff; border-color: transparent; }
.ck-btn:focus-visible { outline: 2px solid var(--color-brand-bright); outline-offset: 3px; }
.ck-liens { margin: .85rem 0 0; font-size: .8rem; }
.ck-liens a { color: var(--color-text-subtle); text-decoration: underline; text-underline-offset: 3px; }
.ck-liens a:hover { color: #fff; }

.ck-detail { padding: 0 1.35rem 1.3rem; border-top: 1px solid rgba(255,255,255,.09); }
.ck-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.ck-cat:first-child { padding-top: 1.1rem; }
.ck-cat-txt { display: grid; gap: .18rem; cursor: pointer; }
.ck-cat-nom { font-family: var(--font-heading); font-weight: 600; font-size: .92rem; color: #fff; }
.ck-cat-desc { font-size: .8rem; line-height: 1.5; color: var(--color-text-subtle); }
.ck-toujours {
  flex: none; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.32); color: var(--color-success);
}
.ck-switch { flex: none; position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.ck-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-piste {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.16);
  transition: background .25s ease, border-color .25s ease;
}
.ck-piste::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.2,.9,.3,1);
}
.ck-switch input:checked + .ck-piste { background: var(--color-brand); border-color: var(--color-brand); }
.ck-switch input:checked + .ck-piste::after { transform: translateX(20px); }
.ck-switch input:focus-visible + .ck-piste { outline: 2px solid var(--color-brand-bright); outline-offset: 3px; }

.ck-rappel {
  position: fixed; left: 16px; bottom: 16px; z-index: 9997;
  width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; background: rgba(12,13,18,.9); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15); color: var(--color-text-muted);
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.ck-rappel[hidden] { display: none; }
.ck-rappel:hover { color: #fff; border-color: var(--color-brand); transform: scale(1.07); }
.ck-rappel svg { width: 19px; height: 19px; }
.ck-rappel:focus-visible { outline: 2px solid var(--color-brand-bright); outline-offset: 3px; }

@media (max-width: 560px) {
  .ck-btn { flex: 1 1 100%; }
  .ck-tete { gap: .75rem; }
  .ck-rappel { left: 12px; bottom: 12px; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } .ck-piste::after { transition: none; } }

/* =================================================================
   LOGOS EN COULEURS — 1er août
   Les logos s'affichent directement dans leurs vraies couleurs
   (déclinaison « fond sombre » : encre neutre en blanc, couleurs de
   marque remontées). Plus de silhouette monochrome, plus de plaque.
   ================================================================= */
.logo-item .logo-shot img.lg-col,
.logo-item .logo-shot img,
.logo-item img            { opacity: 1; }
.plt-item .plt-col,
.plt-item .plt-shot img   { opacity: 1; }

/* le survol ne change plus la couleur : il éclaire et rapproche */
.logo-item .logo-shot,
.plt-item  .plt-shot      { background: transparent; box-shadow: none; }
.logo-item:hover .logo-shot,
.plt-item:hover .plt-shot,
.plt-item:focus-visible .plt-shot {
  background: transparent; box-shadow: none; transform: scale(1.08);
}
.logo-item .logo-shot img,
.plt-item  .plt-shot img  { transition: filter .3s ease, transform .3s ease, opacity .3s ease; }
.logo-item:hover .logo-shot img,
.plt-item:hover  .plt-shot img,
.plt-item:focus-visible .plt-shot img {
  filter: brightness(1.14) drop-shadow(0 0 18px rgba(28,130,255,.42));
}
.logo-item:hover .logo-shot img.lg-col,
.plt-item:hover  .plt-shot img.plt-col { opacity: 1; }
@media (hover: none) {
  .logo-item .logo-shot img.lg-col, .plt-item .plt-mono, .plt-item .plt-col { opacity: 1; }
}

/* =================================================================
   DÉFILEMENT DE GAUCHE À DROITE — tous les bandeaux
   ================================================================= */
@keyframes logo-scroll { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes plt-scroll  { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@keyframes tech-scroll { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* bandeaux de plateformes de la page Croissance Tech */
.plt-marquee--tech { padding-block: .25rem; }
.plt-marquee--tech .plt-track {
  gap: clamp(2.25rem, 5vw, 4.25rem);
  animation-duration: 32s;
}
.tech-groupe + .tech-groupe { margin-top: 2.25rem; }
@media (prefers-reduced-motion: reduce) {
  .plt-marquee--tech .plt-track > .plt-item:nth-child(n+7) { display: none; }
}

/* =================================================================
   CURSEUR — halo resserré + traînée de points qui suivent
   ================================================================= */
#cursor-glow {
  position: fixed; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50%;
  pointer-events: none; z-index: 1; will-change: transform, opacity;
  background: radial-gradient(circle,
      rgba(28,130,255,.24) 0%,
      rgba(10,120,255,.13) 36%,
      rgba(33,181,240,.05) 64%,
      transparent 78%);
  filter: blur(6px);
  transform: translate3d(-50%,-50%,0); opacity: 0;
  transition: opacity .45s ease;
}
.cg-pt {
  position: fixed; left: 0; top: 0; border-radius: 50%;
  pointer-events: none; z-index: 60; opacity: 0;
  mix-blend-mode: screen; will-change: transform, opacity;
  transition: opacity .3s ease;
}
.cg-pt--tete {
  box-shadow: 0 0 10px rgba(76,180,255,.95), 0 0 24px rgba(10,120,255,.55);
}
#cursor-glow.est-clic { animation: cg-pulse .5s cubic-bezier(.22,.9,.3,1); }
@keyframes cg-pulse {
  0%   { filter: blur(5px) brightness(1); }
  35%  { filter: blur(3px) brightness(1.7); }
  100% { filter: blur(5px) brightness(1); }
}
@media (hover: none), (pointer: coarse) {
  #cursor-glow, .cg-pt { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .cg-pt { display: none !important; } }

/* =================================================================
   BLOGUE — archive, article, sommaire, appels à l'action
   ================================================================= */
.twr-blogue { background: #000; }
.bl-large { max-width: 1120px; }

/* --- fil d'Ariane --- */
.bl-fil { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .84rem; color: var(--color-text-subtle); margin-bottom: 1.75rem; }
.bl-fil a { color: var(--color-text-subtle); }
.bl-fil a:hover { color: var(--color-brand-bright, #1C82FF); }

/* --- en-tête d'article --- */
.bl-tete { max-width: 46rem; }
.bl-titre { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08;
  margin: .6rem 0 1.1rem; text-wrap: balance; }
.bl-chapeau { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--color-text-muted);
  line-height: 1.6; max-width: 42rem; }
.bl-infos { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center;
  margin-top: 1.5rem; font-size: .86rem; color: var(--color-text-subtle); }
.bl-vedette { margin: 2.5rem 0 0; border-radius: var(--radius-md); overflow: hidden;
  border: var(--border-1); }
.bl-vedette img { display: block; width: 100%; height: auto; }

/* --- corps : sommaire collant + texte --- */
.bl-corps { display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start; }
.bl-sommaire { position: sticky; top: 96px; border-left: 2px solid var(--color-border);
  padding-left: 1.15rem; }
.bl-sommaire-titre { font-family: var(--font-heading); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-subtle);
  margin-bottom: .9rem; }
.bl-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bl-sommaire li.n3 { padding-left: .9rem; }
.bl-sommaire a { color: var(--color-text-muted); font-size: .87rem; line-height: 1.45;
  transition: color .2s; }
.bl-sommaire a:hover { color: #fff; }
.bl-sommaire li.n3 a { font-size: .82rem; color: var(--color-text-subtle); }

/* --- typographie de l'article --- */
.bl-texte { font-size: 1.075rem; line-height: 1.78; color: #D6D9DF; max-width: 46rem; }
.bl-texte > * + * { margin-top: 1.35rem; }
.bl-texte h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.2; color: #fff;
  margin-top: 3.2rem; scroll-margin-top: 96px; text-wrap: balance; }
.bl-texte h3 { font-size: clamp(1.22rem, 2vw, 1.45rem); line-height: 1.3; color: #fff;
  margin-top: 2.3rem; scroll-margin-top: 96px; }
.bl-texte h4 { font-size: 1.08rem; color: #fff; margin-top: 1.9rem; }
.bl-texte p { margin-bottom: 0; }
.bl-texte strong { color: #fff; font-weight: 600; }
.bl-texte a { color: var(--color-brand-bright, #1C82FF); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(28,130,255,.4); }
.bl-texte a:hover { color: #fff; text-decoration-color: #fff; }
.bl-texte ul, .bl-texte ol { padding-left: 1.35rem; display: grid; gap: .6rem; }
.bl-texte li { line-height: 1.7; }
.bl-texte li::marker { color: var(--color-primary); }
.bl-texte blockquote { border-left: 3px solid var(--color-primary);
  padding: .3rem 0 .3rem 1.4rem; margin-left: 0; color: #fff;
  font-size: 1.12rem; line-height: 1.6; font-style: normal; }
.bl-texte blockquote cite { display: block; margin-top: .7rem; font-size: .88rem;
  font-style: normal; color: var(--color-text-subtle); }
.bl-texte figure { margin: 2rem 0; }
.bl-texte figure img { width: 100%; height: auto; border-radius: var(--radius-md);
  border: var(--border-1); display: block; }
.bl-texte figcaption { margin-top: .6rem; font-size: .84rem; color: var(--color-text-subtle); }
.bl-texte code { background: rgba(255,255,255,.07); border-radius: 5px;
  padding: .12em .38em; font-size: .9em; }
.bl-texte hr { border: 0; border-top: var(--border-1); margin: 2.75rem 0; }

/* tableaux : lisibles, et défilables sur mobile */
.bl-texte table { width: 100%; border-collapse: collapse; font-size: .95rem;
  display: block; overflow-x: auto; }
.bl-texte th, .bl-texte td { padding: .7rem .9rem; text-align: left;
  border-bottom: 1px solid var(--color-border); vertical-align: top; }
.bl-texte th { color: #fff; font-family: var(--font-heading); font-weight: 600;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; }

/* encadré : la donnée clé qu'on veut voir citée */
.bl-texte .encadre { background: var(--color-surface); border: var(--border-1);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm);
  padding: 1.15rem 1.35rem; }
.bl-texte .encadre p:first-child { margin-top: 0; }
.bl-texte .encadre > * + * { margin-top: .75rem; }

/* --- appel à l'action --- */
.bl-cta { margin-top: 3.5rem; padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--radius-md); border: var(--border-1);
  background: linear-gradient(150deg, rgba(15,108,184,.16) 0%, rgba(10,10,15,.4) 62%); }
.bl-cta h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: 0 0 .7rem;
  color: #fff; line-height: 1.2; }
.bl-cta p { color: var(--color-text-muted); margin: 0 0 1.4rem; max-width: 46ch;
  line-height: 1.65; }
.bl-cta-btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.bl-cta--archive { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.bl-cta--archive p { margin-inline: auto; }
.bl-cta--archive .bl-cta-btns { justify-content: center; }

/* --- archive --- */
.bl-archive-tete { max-width: 44rem; margin-bottom: 2.5rem; }
.bl-archive-tete .section-title { max-width: none; }
.bl-archive-tete .bl-chapeau { margin-top: 1rem; }
.bl-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.bl-filtres a { border: var(--border-1); border-radius: var(--radius-pill);
  padding: .42rem .95rem; font-size: .86rem; color: var(--color-text-muted);
  transition: .22s ease; }
.bl-filtres a:hover { border-color: var(--color-primary); color: #fff; }
.bl-filtres a.actif { background: var(--gradient-brand); border-color: transparent; color: #fff; }

.bl-grille { display: grid; gap: 1.35rem;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.bl-carte { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.bl-carte h3 { font-size: 1.18rem; line-height: 1.32; margin: .55rem 0 .6rem;
  color: #fff; text-wrap: balance; }
.bl-carte p { color: var(--color-text-muted); font-size: .93rem; line-height: 1.6;
  margin-bottom: 1.1rem; }
.bl-carte-pied { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--color-text-subtle); }
.bl-carte:hover h3 { color: var(--color-brand-bright, #1C82FF); }

.bl-lies { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.bl-lies .section-title { max-width: none; margin-bottom: 1.75rem; }

.bl-pagination { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
  margin-top: 3rem; }
.bl-pagination .page-numbers { border: var(--border-1); border-radius: var(--radius-sm);
  padding: .45rem .85rem; font-size: .9rem; color: var(--color-text-muted); }
.bl-pagination .page-numbers:hover { border-color: var(--color-primary); color: #fff; }
.bl-pagination .page-numbers.current { background: var(--gradient-brand);
  border-color: transparent; color: #fff; }
.bl-vide-archive { color: var(--color-text-muted); padding: 3rem 0; }

@media (max-width: 980px) {
  .bl-corps { grid-template-columns: 1fr; }
  .bl-sommaire { position: static; border-left: 0; border-top: var(--border-1);
    border-bottom: var(--border-1); padding: 1.1rem 0; }
  .bl-sommaire ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 560px) {
  .bl-texte { font-size: 1.02rem; }
  .bl-grille { grid-template-columns: 1fr; }
}

/* =================================================================
   SÉLECTEUR DE LANGUE
   ================================================================= */
.lang-select { position: relative; display: flex; align-items: center; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: var(--border-1); border-radius: var(--radius-pill);
  color: var(--color-text-muted); padding: .34rem .7rem; cursor: pointer;
  font-size: .82rem; font-weight: 500; letter-spacing: .02em;
  transition: border-color .2s ease, color .2s ease;
}
.lang-btn svg { width: 15px; height: 15px; flex: none; }
.lang-btn:hover, .lang-select:focus-within .lang-btn {
  border-color: var(--color-primary); color: #fff;
}
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: rgba(17,18,24,.97); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--border-1); border-radius: 12px; padding: .4rem;
  display: grid; gap: .1rem; min-width: 152px; z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s ease;
}
.lang-select:hover .lang-menu,
.lang-select:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  padding: .45rem .7rem; border-radius: 8px; font-size: .88rem;
  color: var(--color-text-muted); transition: background .18s ease, color .18s ease;
}
.lang-menu a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lang-menu a[aria-current="true"] { color: #fff; background: rgba(10,120,255,.18); }
@media (max-width: 1080px) {
  .lang-select { order: -1; margin-right: .4rem; }
  .lang-btn { padding: .3rem .55rem; font-size: .78rem; }
  .lang-btn .lang-code { display: none; }
  .lang-menu { right: auto; left: 0; }
}

/* =================================================================
   ENTÊTE v2 — menu centré sur la page, sélecteur collé au bouton
   ================================================================= */
.nav { position: relative; }

/* Le menu est centré sur la page, pas entre le logo et le bouton :
   sinon la largeur du groupe de droite le décale vers la gauche. */
@media (min-width: 1181px) {
  .nav-links {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
}
/* entre 981 et 1180 px, le centrage absolu risquerait le chevauchement */
@media (max-width: 1180px) and (min-width: 981px) {
  .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: .9rem; }
}

/* le sélecteur de langue vit maintenant dans le groupe de droite */
.nav-cta { gap: .6rem; }
.nav-cta .lang-select { order: -1; margin: 0; }
@media (max-width: 980px) {
  /* on garde le sélecteur visible à côté du menu hamburger */
  .nav-cta { display: flex; }
  .nav-cta .btn { display: none; }
  .nav-cta .lang-select { order: 0; margin-right: .1rem; }
}
@media (max-width: 1080px) {
  .lang-select { order: 0; margin-right: 0; }
}

/* le sous-menu de Réalisations s'aligne à droite pour ne pas déborder */
.nav-drop:last-of-type .drop-menu { min-width: 200px; }

/* =================================================================
   PAGE QUESTIONS FRÉQUENTES
   ================================================================= */
.hero--court { padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem); min-height: 0; }
.hero--court h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }

.faq-page { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.faq-groupe { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.faq-groupe-tete { position: sticky; top: 100px; }
.faq-groupe-titre { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.15;
  color: #fff; margin: 0; text-wrap: balance; }
.faq-groupe-chapeau { color: var(--color-text-subtle); font-size: .92rem;
  margin-top: .6rem; line-height: 1.55; }

.faq-liste { display: grid; gap: .7rem; }
.faq-item { border: var(--border-1); border-radius: var(--radius-md);
  background: var(--color-surface); overflow: hidden;
  transition: border-color .25s ease, background .25s ease; }
.faq-item:hover { border-color: rgba(15,108,184,.55); }
.faq-item[open] { border-color: rgba(15,108,184,.7);
  background: linear-gradient(150deg, rgba(15,108,184,.10) 0%, var(--color-surface) 58%); }

.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem 1.35rem; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.4; color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: -2px; }

/* le chevron : deux traits qui pivotent, aucun script */
.faq-item summary i { position: relative; flex: none; width: 20px; height: 20px; }
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; top: 9px; width: 11px; height: 2px;
  background: var(--color-primary); border-radius: 2px; transition: transform .28s ease;
}
.faq-item summary i::before { left: 0; transform: rotate(45deg); }
.faq-item summary i::after  { right: 0; transform: rotate(-45deg); }
.faq-item[open] summary i::before { transform: rotate(-45deg); }
.faq-item[open] summary i::after  { transform: rotate(45deg); }

.faq-reponse { padding: 0 1.35rem 1.35rem; color: var(--color-text-muted);
  font-size: 1rem; line-height: 1.7; }
.faq-reponse > * + * { margin-top: .85rem; }
.faq-reponse strong { color: #fff; }
.faq-reponse a { color: var(--color-brand-bright, #1C82FF); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(28,130,255,.4); }
.faq-reponse a:hover { color: #fff; text-decoration-color: #fff; }

@media (max-width: 900px) {
  .faq-groupe { grid-template-columns: 1fr; gap: 1.25rem; }
  .faq-groupe-tete { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary i::before, .faq-item summary i::after { transition: none; }
}

/* =================================================================
   VERRE LIQUIDE — entête, menus déroulants, pastilles
   Blur profond + saturation, hairline plus claire en haut, reflet
   spéculaire interne. C'est le rendu que fait Apple sur ses menus.
   ================================================================= */
:root {
  --verre-fond:   linear-gradient(168deg, rgba(255,255,255,.11) 0%,
                                          rgba(255,255,255,.045) 34%,
                                          rgba(255,255,255,.02) 100%);
  --verre-teinte: rgba(14,15,20,.58);
  --verre-bord:   rgba(255,255,255,.13);
  --verre-reflet: inset 0 1px 0 rgba(255,255,255,.20),
                  inset 0 -1px 0 rgba(255,255,255,.045);
  --verre-ombre:  0 24px 60px -24px rgba(0,0,0,.92), 0 2px 10px -4px rgba(0,0,0,.6);
  --verre-flou:   blur(26px) saturate(185%);
}

/* --- l'entête devient une barre de verre --- */
.site-header {
  background: var(--verre-teinte);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.035);
}

/* --- les menus déroulants : verre épais et bord lumineux --- */
.drop-menu, .lang-menu {
  position: absolute;
  background: var(--verre-teinte);
  background-image: var(--verre-fond);
  backdrop-filter: var(--verre-flou);
  -webkit-backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord);
  border-radius: 16px;
  box-shadow: var(--verre-reflet), var(--verre-ombre);
  padding: .45rem;
  overflow: hidden;
}
/* le reflet qui court sur l'arête haute */
.drop-menu::after, .lang-menu::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 44%;
  background: linear-gradient(180deg, rgba(255,255,255,.075), transparent);
  pointer-events: none; border-radius: inherit;
}
.drop-menu > a, .lang-menu > a {
  position: relative; z-index: 1;
  border-radius: 11px; padding: .5rem .78rem;
  transition: background .2s ease, color .2s ease;
}
.drop-menu > a:hover, .lang-menu > a:hover {
  background: rgba(255,255,255,.10); color: #fff;
}
.lang-menu a[aria-current="true"] {
  background: linear-gradient(135deg, rgba(15,108,184,.42), rgba(33,181,240,.26));
  color: #fff;
}

/* --- les pastilles (langue, filtres) --- */
.lang-btn, .bl-filtres a {
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}

/* Le thème WordPress repeint les <button> en mauve (#605BE5) au survol
   et au focus. On garde notre bleu, avec une spécificité suffisante. */
.lang-select .lang-btn,
.lang-select .lang-btn:hover,
.lang-select .lang-btn:focus,
.lang-select .lang-btn:focus-visible,
.lang-select .lang-btn:active,
.elementor .lang-select .lang-btn:hover,
.elementor .lang-select .lang-btn:focus {
  background-color: rgba(255,255,255,.055);
  background-image: none;
  color: var(--color-text-muted);
}
.lang-select .lang-btn:hover,
.lang-select .lang-btn:focus-visible,
.elementor .lang-select .lang-btn:hover,
.lang-select:focus-within .lang-btn {
  background-color: rgba(15,108,184,.22);
  border-color: rgba(33,181,240,.55);
  color: #fff;
}
.lang-select .lang-btn:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: 2px; }

/* --- le menu mobile, même matière --- */
@media (max-width: 980px) {
  .mobile-menu {
    background: var(--verre-teinte);
    backdrop-filter: var(--verre-flou);
    -webkit-backdrop-filter: var(--verre-flou);
    border-bottom: 1px solid var(--verre-bord);
    box-shadow: var(--verre-ombre);
  }
  .nav-toggle-label {
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
  }
}

/* --- les questions fréquentes : mêmes panneaux de verre --- */
.faq-item {
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.faq-item[open] {
  background: linear-gradient(155deg, rgba(15,108,184,.20) 0%, rgba(255,255,255,.035) 62%);
  border-color: rgba(33,181,240,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 40px -22px rgba(0,0,0,.9);
}

/* Repli propre là où le flou d'arrière-plan n'existe pas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .drop-menu, .lang-menu, .mobile-menu { background: rgba(14,15,20,.97); }
  .lang-btn, .bl-filtres a, .faq-item { background: var(--color-surface); }
}

/* =================================================================
   CORRECTIF — l'entête collante ne collait pas
   « overflow-x: hidden » sur body en fait un conteneur de défilement,
   ce qui annule « position: sticky ». « clip » coupe le débordement
   sans créer ce conteneur : l'entête suit de nouveau le défilement.
   ================================================================= */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
.site-header { position: sticky; top: 0; z-index: 100; }

/* =================================================================
   VERRE LIQUIDE v2 — bordure en dégradé animé, matière plus épaisse
   On réutilise le même conic-gradient que les cartes et les boutons,
   pour que les menus appartiennent visiblement à la même famille.
   ================================================================= */
:root {
  --verre-flou-2: blur(30px) saturate(200%) brightness(1.06);
  --verre-teinte-2: rgba(12,13,18,.60);
  --bordure-vive: conic-gradient(from var(--spin),
      rgba(255,255,255,.10) 0%, rgba(255,255,255,.10) 48%,
      #0F6CB8 66%, #21B5F0 78%, #4FC8FF 84%, #0F6CB8 90%,
      rgba(255,255,255,.10) 100%);
}

/* --- menus déroulants et sélecteur de langue --- */
.drop-menu, .lang-menu {
  border: 1.5px solid transparent;
  border-radius: 18px;
  background:
    /* la teinte et le reflet restent à l'intérieur… */
    linear-gradient(var(--verre-teinte-2), var(--verre-teinte-2)) padding-box,
    linear-gradient(165deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 38%,
                            rgba(255,255,255,.015) 100%) padding-box,
    /* …et le dégradé ne se voit que dans le liseré */
    var(--bordure-vive) border-box;
  backdrop-filter: var(--verre-flou-2);
  -webkit-backdrop-filter: var(--verre-flou-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 22px rgba(33,181,240,.07),
    0 28px 70px -28px rgba(0,0,0,.95),
    0 0 34px -14px rgba(15,108,184,.55);
  padding: .5rem;
}
/* le liseré ne tourne que lorsque le menu est ouvert */
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu,
.lang-select:hover .lang-menu, .lang-select:focus-within .lang-menu {
  animation: spin-border 5.5s linear infinite;
}

/* reflet spéculaire dans le coin haut-gauche, comme sur du vrai verre */
.drop-menu::after, .lang-menu::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(255,255,255,.11), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
  pointer-events: none;
}

.drop-menu > a, .lang-menu > a {
  position: relative; z-index: 1; border-radius: 12px; padding: .55rem .8rem;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.drop-menu > a:hover, .lang-menu > a:hover {
  background: linear-gradient(135deg, rgba(15,108,184,.34), rgba(33,181,240,.18));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.lang-menu a[aria-current="true"] {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}

/* --- le bouton de langue prend le dégradé de la marque au survol --- */
.lang-select .lang-btn {
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) border-box;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: color .22s ease, box-shadow .22s ease, background .22s ease;
}
/* Le thème WordPress repeint les <button> en mauve (#605BE5) au survol et
   au focus. On impose le bleu de la marque, avec la même spécificité. */
.lang-select .lang-btn:hover,
.lang-select .lang-btn:focus,
.lang-select .lang-btn:focus-visible,
.lang-select .lang-btn:active,
.lang-select:hover .lang-btn,
.lang-select:focus-within .lang-btn,
.elementor .lang-select .lang-btn:hover,
.elementor .lang-select .lang-btn:focus {
  background:
    var(--gradient-brand) padding-box,
    var(--bordure-vive) border-box;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              0 0 22px -6px rgba(15,108,184,.75);
}
.lang-select:hover .lang-btn, .lang-select:focus-within .lang-btn {
  animation: spin-border 3.6s linear infinite;
}
.lang-select .lang-btn:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: 3px; }

/* --- le menu mobile hérite de la même matière --- */
@media (max-width: 980px) {
  .mobile-menu {
    background:
      linear-gradient(var(--verre-teinte-2), var(--verre-teinte-2)) padding-box,
      linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)) padding-box;
    backdrop-filter: var(--verre-flou-2);
    -webkit-backdrop-filter: var(--verre-flou-2);
    border-bottom: 1.5px solid transparent;
    border-image: var(--bordure-vive) 1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 28px 70px -28px rgba(0,0,0,.95);
  }
}

/* --- l'entête : verre un peu plus épais --- */
.site-header {
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  background: rgba(12,13,18,.55);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu,
  .lang-select:hover .lang-menu, .lang-select:focus-within .lang-menu,
  .lang-select:hover .lang-btn, .lang-select:focus-within .lang-btn { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drop-menu, .lang-menu, .mobile-menu, .site-header { background-color: rgba(12,13,18,.97); }
}

/* =================================================================
   VERRE LIQUIDE v3 — matière uniforme
   Le panneau était trop transparent : le halo du curseur et le badge
   Google passaient au travers et dessinaient une arête en diagonale.
   Un vrai verre dépoli est assez opaque; le flou donne la profondeur,
   pas la transparence.
   ================================================================= */
:root {
  --verre-teinte-3: rgba(13,14,19,.86);
  --verre-flou-3: blur(22px) saturate(175%);
}

.drop-menu, .lang-menu {
  background:
    linear-gradient(var(--verre-teinte-3), var(--verre-teinte-3)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.075) 0%,
                            rgba(255,255,255,.028) 45%,
                            rgba(255,255,255,.012) 100%) padding-box,
    var(--bordure-vive) border-box;
  backdrop-filter: var(--verre-flou-3);
  -webkit-backdrop-filter: var(--verre-flou-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 26px 64px -26px rgba(0,0,0,.95),
    0 0 30px -14px rgba(15,108,184,.45);
}

/* le reflet devient une simple lueur haute, sans arête possible */
.drop-menu::after, .lang-menu::after {
  background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 42%);
}

/* le halo du curseur ne doit jamais passer sous un menu ouvert */
.nav-drop:hover ~ * #cursor-glow, .site-header:hover ~ * #cursor-glow { opacity: .35; }
#cursor-glow { z-index: 0; }

.mobile-menu {
  background:
    linear-gradient(var(--verre-teinte-3), var(--verre-teinte-3)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)) padding-box;
  backdrop-filter: var(--verre-flou-3);
  -webkit-backdrop-filter: var(--verre-flou-3);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drop-menu, .lang-menu, .mobile-menu { background-color: rgba(13,14,19,.98); }
}

/* Le badge Google restait lisible au travers : on ferme la matière.
   Un menu doit d'abord être lisible; le flou apporte la profondeur,
   pas la transparence. Et « Questions fréquentes » tient sur une ligne. */
:root { --verre-teinte-4: rgba(13,14,19,.94); }
.drop-menu, .lang-menu {
  min-width: 244px;
  background:
    linear-gradient(var(--verre-teinte-4), var(--verre-teinte-4)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.07) 0%,
                            rgba(255,255,255,.025) 46%,
                            rgba(255,255,255,.01) 100%) padding-box,
    var(--bordure-vive) border-box;
}
.lang-menu { min-width: 176px; }
.drop-menu > a, .lang-menu > a { white-space: nowrap; }
.mobile-menu { background-color: rgba(13,14,19,.96); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drop-menu, .lang-menu, .mobile-menu { background-color: rgba(13,14,19,.99); }
}

/* =================================================================
   VERRE v5 — LA MATIÈRE EST FERMÉE
   ------------------------------------------------------------------
   La vraie cause de l'arête en biais : deux dégradés blancs posés en
   diagonale sur le panneau,
       --verre-fond : linear-gradient(168deg, .11 → .045 à 34% → .02)
       et le calque v2 : linear-gradient(165deg, .14 → .05 à 38% → .015)
   Sur un panneau large et bas, les lignes d'un dégradé à 165° courent
   en biais : la chute d'opacité entre 0 % et 38 % trace un coin clair
   qui traverse la première ligne de texte. Ce n'était pas le halo du
   curseur qui passait au travers, c'était la feuille elle-même.

   Donc : plus aucun dégradé sur le fond. Une seule couleur pleine,
   sans transparence. Le flou d'arrière-plan est retiré aussi — il ne
   sert plus à rien derrière une surface opaque, et c'est lui qui
   invite les arêtes de composition. Le liseré bleu animé reste : c'est
   la seule chose qui bouge encore, et c'est celle qu'on voulait.
   ================================================================= */
:root { --verre-plein: #0E0F14; }

.drop-menu,
.lang-menu {
  background:
    linear-gradient(var(--verre-plein), var(--verre-plein)) padding-box,
    var(--bordure-vive) border-box;
  background-color: var(--verre-plein);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid transparent;
  border-radius: 18px;
  overflow: visible;            /* le pont de survol au-dessus du menu reste franchissable */
  padding: .5rem;
  min-width: 244px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),   /* filet droit sur l'arête haute, jamais en biais */
    0 26px 64px -26px rgba(0,0,0,.95),
    0 0 30px -14px rgba(15,108,184,.45);
}
.lang-menu { min-width: 176px; }

/* aucun calque par-dessus le fond : rien qui puisse redessiner une arête */
.drop-menu::after,
.lang-menu::after { display: none; }

.drop-menu > a,
.lang-menu > a { white-space: nowrap; }

/* le menu mobile suit la même règle */
.mobile-menu {
  background: var(--verre-plein) !important;
  background-image: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* et si le navigateur ne sait pas flouter, rien ne change : c'est déjà plein */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .drop-menu, .lang-menu { background-color: var(--verre-plein); }
}

/* ==================================================================
   COMPARATIF - correctif du 2 aout 2026
   Le theme Royal Elementor zebre toutes les <table> :
     table tbody > tr:nth-child(odd) > td { background-color: #f7f7f7; }
   Specificite (0,1,4). Les anciennes regles ne posaient un fond que
   sur td:nth-child(2), do une rangee sur deux en blanc dans les
   colonnes 1 et 3. Ici chaque cellule recoit un fond opaque explicite.
   ================================================================== */
:root { --twr-comparatif-ok: 1; }

.table-wrap {
  overflow-x: auto;
  border: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.table-wrap table.compare > thead > tr > th,
.table-wrap table.compare > tbody > tr > td {
  background-color: var(--color-surface);
  border-bottom: var(--border-1);
}

.table-wrap table.compare > thead > tr > th {
  background-color: var(--color-surface-2);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
}
.table-wrap table.compare > thead > tr > th:nth-child(2) {
  background-color: #14263A;
  color: var(--color-accent-glow);
  box-shadow: inset 0 2px 0 var(--color-primary);
}

.table-wrap table.compare > tbody > tr > td:first-child {
  background-color: #101116;
  color: #C7CBD3;
  font-family: var(--font-heading);
  font-weight: 600;
}

.table-wrap table.compare > tbody > tr > td:nth-child(2) {
  background-color: #14202E;
  color: var(--color-text);
  font-weight: 500;
  box-shadow: inset 1px 0 0 rgba(33,181,240,.20), inset -1px 0 0 rgba(33,181,240,.20);
}

.table-wrap table.compare > tbody > tr > td:last-child {
  background-color: var(--color-surface);
  color: #8A8F99;
}
.table-wrap table.compare > tbody > tr > td:last-child::before { opacity: .85; }

.table-wrap table.compare > tbody > tr:last-child > td { border-bottom: 0; }

@media (max-width: 760px) {
  .table-wrap table.compare > tbody > tr > td { border-bottom: 0; }
  .table-wrap table.compare > tbody > tr > td:first-child {
    background-color: transparent;
    color: #fff;
  }
  .table-wrap table.compare > tbody > tr > td:nth-child(2) {
    background-color: #14202E;
    box-shadow: none;
    border: 1px solid rgba(33,181,240,.30);
  }
  .table-wrap table.compare > tbody > tr > td:last-child {
    background-color: #101116;
    border: 1px solid var(--color-border);
    color: #8A8F99;
  }
}

/* ==================================================================
   HERO CENTRE - correctif du 3 aout 2026
   .hero h1 a un max-width de 16ch mais aucun margin-inline : la boite
   du titre restait collee a gauche meme dans un conteneur .center.
   Le paragraphe .lead avait un margin-inline:auto en style en dur,
   d ou le desalignement visible entre le titre et le reste du hero.
   ================================================================== */
:root { --twr-hero-centre-ok: 1; }
.hero .center > h1,
.hero .center > h2,
.hero .center > .lead { margin-inline: auto; }

/* ============ BLOC VIDEOS - colonne Contact - 3 aout 2026 ============ */
:root { --twr-videos-ok: 1; }
.video-liste { display: grid; gap: .85rem; }
.video-ligne { display: grid; grid-template-columns: 104px 1fr; gap: .8rem; align-items: center; padding: .5rem; margin: -.5rem; border-radius: 12px; transition: background .25s ease; }
.video-ligne:hover { background: rgba(255,255,255,.05); }
.video-vignette { position: relative; display: block; border-radius: 9px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.video-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-play i { width: 30px; height: 21px; border-radius: 6px; background: #FF0000; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .25s ease; }
.video-ligne:hover .video-play i { transform: scale(1.14); }
.video-titre { font-size: .88rem; line-height: 1.4; color: var(--color-text); font-weight: 500; }
@media (max-width: 760px) { .video-ligne { grid-template-columns: 96px 1fr; } }

/* ============ BLOC REASSURANCE - colonne Contact - 3 aout 2026 ============ */
:root { --twr-rassure-ok: 1; }
.rassure-note { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.05rem; font-size: .92rem; }
.rassure-note .etoiles { color: #FFC23D; letter-spacing: .08em; }
.rassure-note strong { font-family: var(--font-heading); }
.rassure-liste { display: grid; gap: .7rem; margin: 0 0 1.15rem; padding: 0; list-style: none; }
.rassure-liste li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: start; font-size: .9rem; line-height: 1.45; color: var(--color-text-muted); }
.rassure-liste svg { width: 16px; height: 16px; margin-top: .16rem; color: var(--color-success); }

/* ============ GRILLE 4 COLONNES - 14 aout 2026 ============
   Modificateur .cards-4 : force 4 cartes par rangee sur ordinateur,
   2 sur tablette, 1 sur telephone. Utilise sur la page Mentorat
   (section "Ce que tu apprends", 8 cartes -> 4 + 4). */
.card-grid.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .card-grid.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid.cards-4 { grid-template-columns: 1fr; } }


/* =================================================================
   RETOUCHES DU 18 AOÛT 2026
   1. Pourquoi nous : pastille de verre à la place des chiffres
   2. Avis Google : le carrousel avance tout seul
   3. Études de cas : les compteurs montent de zéro
   4. Études de cas : les filtres changent de catégorie tout seuls
   ================================================================= */

/* ---------- 1. POURQUOI NOUS : la pastille ---------- */
.why-num { display: none !important; }

.why-row {
  grid-template-columns: clamp(2.85rem, 3.6vw, 3.35rem) 1fr;
  gap: clamp(1rem, 1.7vw, 1.35rem);
  align-items: start;
}

.why-icon {
  position: relative;
  width: clamp(2.85rem, 3.6vw, 3.35rem);
  height: clamp(2.85rem, 3.6vw, 3.35rem);
  margin-top: .15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-accent-glow);
  border: 1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(125% 125% at 30% 18%,
      rgba(33,181,240,.17) 0%,
      rgba(15,108,184,.07) 46%,
      rgba(255,255,255,.022) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -10px 20px -14px rgba(33,181,240,.60),
    0 12px 26px -20px rgba(0,0,0,.95);
  -webkit-backdrop-filter: blur(13px) saturate(150%);
  backdrop-filter: blur(13px) saturate(150%);
  transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    box-shadow .5s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    color .3s ease;
}
.why-icon svg { width: 44%; height: 44%; stroke-width: 1.7; }

.why-row:hover .why-icon,
.why-row:focus-within .why-icon {
  transform: translateY(-3px) scale(1.05);
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(125% 125% at 30% 18%,
      rgba(33,181,240,.30) 0%,
      rgba(15,108,184,.13) 55%,
      rgba(255,255,255,.03) 100%) padding-box,
    var(--gradient-brand) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 5px rgba(15,108,184,.10),
    0 18px 36px -22px rgba(33,181,240,.90);
}

/* le titre reprend toute la largeur : l'icône a quitté le h3 */
.why-icon + div h3 { display: block; }
.why-icon + div h3 > svg { display: none; }

@media (max-width: 560px) {
  .why-row { grid-template-columns: 2.55rem 1fr; gap: .9rem; padding: 1.35rem 0; }
  .why-icon { width: 2.55rem; height: 2.55rem; margin-top: .1rem; }
  .why-row h3 { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .why-icon { transition: none; }
  .why-row:hover .why-icon,
  .why-row:focus-within .why-icon { transform: none; }
}

/* ---------- 2. AVIS GOOGLE : carrousel automatique ---------- */
.testi-scroll { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .testi-scroll { scroll-behavior: auto; } }

/* la piste de défilement devient une jauge de marque */
.testi-scroll::-webkit-scrollbar-thumb {
  background: var(--gradient-brand, linear-gradient(135deg,#0050AA,#0F6CB8 55%,#21B5F0));
}

/* ---------- 3. COMPTEURS ---------- */
.cas-stat b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 4. FILTRES : rotation automatique ---------- */
.cas-chip { position: relative; overflow: hidden; }
.cas-chip.is-on::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.25));
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.cas-filtres.twr-auto .cas-chip.is-on::after {
  opacity: 1;
  animation: twr-chip-minuteur 15s linear forwards;
}
@keyframes twr-chip-minuteur { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* fondu doux quand la catégorie change */
.cas-grid { transition: opacity .22s ease; }
.cas-grid.twr-swap { opacity: 0; }
.cas-card.twr-entree { animation: twr-cas-entree .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes twr-cas-entree {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cas-filtres.twr-auto .cas-chip.is-on::after { animation: none; opacity: 0; }
  .cas-grid { transition: none; }
  .cas-card.twr-entree { animation: none; }
}


/* =================================================================
   RETOUCHES 18 AOÛT 2026 (suite)
   5. Les filtres deviennent un rail qui glisse sur téléphone
   6. Plus de mauve : le thème Royal repeint tous les <button>
      en #605BE5 au survol et au focus. Chaque composant qui ne
      redéclarait pas son fond héritait donc du mauve. On redonne
      le bleu de la marque, un composant à la fois.
   ================================================================= */

/* ---------- 5. Rail de filtres sur téléphone ---------- */
@media (max-width: 700px) {
  .cas-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
  }
  .cas-filtres::-webkit-scrollbar { display: none; }
  .cas-chip { flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- 6. Plus de mauve ---------- */

/* bandeau de témoins : boutons « Tout refuser » et « Personnaliser » */
.ck-btn:hover,
.ck-btn:focus,
.ck-btn:focus-visible,
.ck-btn:active {
  background-color: rgba(15,108,184,.18);
  background-image: none;
  border-color: rgba(33,181,240,.55);
  color: #fff;
}

/* bandeau de témoins : « Tout accepter » garde son dégradé bleu */
.ck-btn--ok,
.ck-btn--ok:hover,
.ck-btn--ok:focus,
.ck-btn--ok:focus-visible,
.ck-btn--ok:active {
  background-color: transparent;
  background-image: var(--gradient-brand-hover, linear-gradient(135deg,#0050AA 0%,#0F6CB8 55%,#21B5F0 100%));
  border-color: transparent;
  color: #fff;
}
.ck-btn--ok:hover {
  box-shadow: 0 14px 32px -12px rgba(28,130,255,1);
  transform: translateY(-1px);
}

/* pastille de rappel des témoins, en bas à gauche */
.ck-rappel:hover,
.ck-rappel:focus,
.ck-rappel:focus-visible,
.ck-rappel:active {
  background-color: rgba(15,108,184,.32);
  background-image: none;
  border-color: var(--color-brand, #0F6CB8);
  color: #fff;
}

/* cartes d'études de cas */
.cas-card:hover,
.cas-card:focus,
.cas-card:focus-visible,
.cas-card:active {
  background-color: var(--color-surface);
  background-image: none;
}

/* visionneuse : fermer, précédent, suivant */
.cas-lb-close:hover, .cas-lb-close:focus, .cas-lb-close:focus-visible, .cas-lb-close:active,
.cas-lb-nav:hover,   .cas-lb-nav:focus,   .cas-lb-nav:focus-visible,   .cas-lb-nav:active {
  background-color: var(--color-brand, #0F6CB8);
  background-image: none;
  border-color: var(--color-brand, #0F6CB8);
  color: #fff;
}

/* filtres : le fond reste stable au clic et au clavier */
.cas-filtres .cas-chip:active,
.cas-filtres .cas-chip:focus-visible { background-color: var(--color-surface); }
.cas-filtres .cas-chip.is-on:active,
.cas-filtres .cas-chip.is-on:focus-visible { background-color: var(--color-brand); }

/* boutons de marque quand ce sont de vrais <button> (formulaires) */
button.btn-primary,
button.btn-primary:hover,
button.btn-primary:focus,
button.btn-primary:focus-visible,
button.btn-primary:active {
  background-color: transparent;
  background-image: var(--gradient-brand, linear-gradient(135deg,#0050AA 0%,#0F6CB8 55%,#21B5F0 100%));
  color: #fff;
}
button.btn-secondary:hover,
button.btn-secondary:focus,
button.btn-secondary:focus-visible,
button.btn-secondary:active {
  background-color: rgba(15,108,184,.14);
  background-image: none;
  border-color: var(--color-accent-glow, #21B5F0);
  color: #fff;
}

/* le sélecteur de langue, même traitement au clic */
.lang-select .lang-btn:active,
.elementor .lang-select .lang-btn:active {
  background:
    var(--gradient-brand, linear-gradient(135deg,#0050AA 0%,#0F6CB8 55%,#21B5F0 100%)) padding-box,
    var(--bordure-vive, linear-gradient(135deg,#0F6CB8,#4FC8FF)) border-box;
  color: #fff;
}


/* =================================================================
   RETOUCHES 18 AOÛT 2026 · LOT 2
   7.  Les eyebrows perdent leur tiret
   8.  Le bleu des titres passe sur sa propre ligne
   9.  Les numéros d'étapes deviennent un parcours fléché
   10. Les crochets verts deviennent des flèches animées
   11. Les FAQ passent en grille
   12. Les études de cas du mentorat tournent 3 par 3
   13. Le bandeau « pas prêt à investir » respire
   14. Simulation de construction de site en 3 étapes
   ================================================================= */

/* ---------- 7. Eyebrow sans tiret ---------- */
.eyebrow::before { display: none !important; }
.eyebrow { gap: 0; }
.eyebrow--center { justify-content: center; }

/* ---------- 8. Blanc en haut, bleu en dessous ---------- */
h1 .grad-text,
.section-title .grad-text,
.cta-band h2 .grad-text {
  display: block;
}
.seo-cas-titre .grad-text { display: inline; }
.section-title { max-width: 22ch; }
.section-title--center { max-width: 24ch; }

/* ---------- 9. PARCOURS FLÉCHÉ ---------- */
.tl-noeud, .proc-noeud {
  position: relative;
  z-index: 2;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  color: var(--color-text-subtle);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 120% at 30% 20%,
      rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 100%);
  transition:
    color .45s ease,
    border-color .45s ease,
    background .45s ease,
    box-shadow .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}
.tl-noeud svg, .proc-noeud svg { width: 19px; height: 19px; }
.tl-noeud { margin-bottom: .9rem; }
.proc-noeud { position: absolute; top: 1.5rem; right: 1.4rem; width: 38px; height: 38px; }
.proc-noeud svg { width: 17px; height: 17px; }

.timeline--parcours .tl-step,
.proc-grille--parcours .proc-etape { position: relative; overflow: visible; }

/* le fil qui relie les étapes */
.timeline--parcours .tl-step::after,
.proc-grille--parcours .proc-etape::after {
  content: "";
  position: absolute;
  z-index: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-brand, #0F6CB8), rgba(33,181,240,.22));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  transition-delay: calc(var(--n, 0) * .38s + .25s);
  pointer-events: none;
}
.timeline--parcours .tl-step::after {
  top: calc(1.6rem + 20px);
  left: calc(1.6rem + 48px);
  right: -1.3rem;
}
.proc-grille--parcours .proc-etape::after {
  top: calc(1.5rem + 18px);
  left: auto;
  right: -1.3rem;
  width: 1.3rem;
}
.timeline--parcours.est-lance .tl-step::after,
.proc-grille--parcours.est-lance .proc-etape::after { transform: scaleX(1); }
.timeline--parcours .tl-step:last-child::after,
.proc-grille--parcours .proc-etape:last-child::after { display: none; }

/* le nœud s'allume dans l'ordre */
.timeline--parcours.est-lance .tl-noeud,
.proc-grille--parcours.est-lance .proc-noeud {
  color: #fff;
  border-color: transparent;
  background:
    radial-gradient(130% 130% at 30% 18%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%) padding-box,
    var(--gradient-brand) border-box;
  background-color: var(--color-brand, #0F6CB8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 5px rgba(15,108,184,.12),
    0 14px 30px -18px rgba(33,181,240,.95);
  transition-delay: calc(var(--n, 0) * .38s);
}
.timeline--parcours.est-lance .tl-noeud--fin,
.proc-grille--parcours.est-lance .proc-noeud--fin {
  background-color: var(--color-success, #2ECC71);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 5px rgba(46,204,113,.14),
    0 14px 30px -18px rgba(46,204,113,.95);
}
/* le petit coup d'éclat de fin de parcours */
.timeline--parcours.est-fini .tl-step:last-child,
.proc-grille--parcours.est-fini .proc-etape:last-child {
  border-color: var(--color-success, #2ECC71);
  box-shadow: 0 0 0 1px rgba(46,204,113,.35), 0 24px 60px -30px rgba(46,204,113,.75);
}
.timeline--parcours.est-fini .tl-noeud--fin,
.proc-grille--parcours.est-fini .proc-noeud--fin { animation: twr-drapeau 1.1s ease 2; }
@keyframes twr-drapeau {
  0%, 100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-9deg) scale(1.10); }
  60%      { transform: rotate(7deg) scale(1.06); }
}

/* mobile : le fil devient vertical */
@media (max-width: 759px) {
  .timeline--parcours .tl-step::after {
    top: calc(1.6rem + 46px);
    left: calc(1.6rem + 20px);
    right: auto;
    width: 2px;
    height: calc(100% - 1.6rem - 46px + 1.25rem);
    background: linear-gradient(180deg, var(--color-brand, #0F6CB8), rgba(33,181,240,.22));
    transform: scaleY(0);
    transform-origin: top center;
  }
  .timeline--parcours.est-lance .tl-step::after { transform: scaleY(1); }
}
@media (max-width: 1000px) {
  .proc-grille--parcours .proc-etape::after { display: none; }
}
@media (min-width: 1001px) {
  /* fin de rangée : pas de fil qui part dans le vide */
  .proc-grille--parcours .proc-etape:nth-child(3n)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-noeud, .proc-noeud { transition: none; }
  .timeline--parcours .tl-step::after,
  .proc-grille--parcours .proc-etape::after { transition: none; transform: scaleX(1); }
  .timeline--parcours.est-fini .tl-noeud--fin,
  .proc-grille--parcours.est-fini .proc-noeud--fin { animation: none; }
}

/* ---------- 10. FLÈCHES ANIMÉES « C'EST POUR TOI SI » ---------- */
.si-titre .si-mot {
  display: inline-block;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-size: 1.15em;
  letter-spacing: .02em;
}
.checks--si {
  position: relative;
  padding-left: 2.7rem;
  gap: 1.15rem;
}
.checks--si::before {
  content: "";
  position: absolute;
  left: 13px; top: .55rem; bottom: .55rem;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--color-brand, #0F6CB8), rgba(33,181,240,.12));
  transform: scaleY(0); transform-origin: top center;
  transition: transform .8s cubic-bezier(.4,0,.2,1);
}
.checks--si.est-lance::before { transform: scaleY(1); }
.checks--si li { position: relative; display: block; }
.si-fleche {
  position: absolute;
  left: -2.7rem; top: .05rem;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--color-accent-glow, #21B5F0);
  border: 1px solid rgba(33,181,240,.30);
  background: rgba(15,108,184,.10);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .3s ease;
  transition-delay: calc(var(--n, 0) * .16s + .2s);
}
.si-fleche svg { width: 15px; height: 15px; }
.si-fleche i {
  position: absolute;
  right: 100%; top: 50%; margin-top: -1px;
  width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-glow, #21B5F0));
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s ease;
  transition-delay: calc(var(--n, 0) * .16s + .32s);
}
.checks--si.est-lance .si-fleche { opacity: 1; transform: translateX(0); }
.checks--si.est-lance .si-fleche i { transform: scaleX(1); }
.checks--si.est-lance .si-fleche { animation: twr-si-pousse 4.5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * .16s + 1.2s); }
@keyframes twr-si-pousse {
  0%, 72%, 100% { transform: translateX(0); }
  80%           { transform: translateX(5px); }
  88%           { transform: translateX(0); }
}
.checks--si li:hover .si-fleche { border-color: var(--color-brand, #0F6CB8); background: rgba(15,108,184,.24); color: #fff; }
@media (max-width: 560px) {
  .checks--si { padding-left: 2.35rem; }
  .si-fleche { left: -2.35rem; width: 25px; height: 25px; }
  .checks--si::before { left: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .checks--si::before { transform: scaleY(1); }
  .si-fleche { opacity: 1; transform: none; animation: none; }
  .si-fleche i { transform: scaleX(1); }
}

/* ---------- 11. FAQ EN GRILLE ---------- */
.faq--grille { max-width: 1120px; }
@media (min-width: 900px) {
  .faq--grille { gap: 1rem; align-items: start; }
  .faq--grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq--grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq--grille details { height: 100%; }
  .faq--grille summary { align-items: flex-start; }
}
.faq--grille details p { padding-bottom: 1.25rem; }

/* ---------- 12. ÉTUDES DE CAS EN ROTATION ---------- */
.cas-teaser-grid--rotation { position: relative; }
.cas-teaser-grid--rotation .cas-teaser-card {
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.cas-teaser-grid--rotation .cas-teaser-card[hidden] { display: none; }
.cas-teaser-grid--rotation .cas-teaser-card.twr-sort { opacity: 0; transform: translateY(10px) scale(.985); }
.cas-teaser-grid--rotation .cas-teaser-card.twr-entre { animation: twr-cas-entree .55s cubic-bezier(.22,1,.36,1) both; }
.cas-lots {
  display: flex; justify-content: center; gap: .5rem; margin-top: 1.4rem;
}
.cas-lot-pt {
  width: 26px; height: 3px; border-radius: 99px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.16);
  transition: background .3s ease, width .3s ease;
}
.cas-lot-pt:hover { background: rgba(255,255,255,.34); }
.cas-lot-pt.is-on { width: 42px; background: var(--gradient-brand, #0F6CB8); background-color: var(--color-brand, #0F6CB8); }

/* ---------- 13. BANDEAU « PAS PRÊT À INVESTIR » ---------- */
.cta-band-eyebrow {
  font-family: var(--font-heading); font-weight: 600;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: .9rem;
}
.cta-band .cta-band-titre {
  max-width: 20ch;
  line-height: 1.12;
}
.cta-band .cta-band-titre span {
  display: block;
  margin-top: .35rem;
  color: rgba(255,255,255,.82);
  font-size: .62em;
  font-weight: 600;
}
@media (min-width: 760px) {
  .cta-band .cta-band-titre { max-width: 26ch; }
}

/* ---------- 14. SIMULATION DE SITE EN 3 ÉTAPES ---------- */
.dmo { display: flex; flex-direction: column; gap: 1rem; }
.dmo-cadre {
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #0C0D12;
  box-shadow: 0 40px 90px -46px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
}
.dmo-barre {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  background: rgba(255,255,255,.035);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.dmo-pt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: rgba(255,255,255,.16); }
.dmo-pt:nth-child(1) { background: rgba(255,95,86,.55); }
.dmo-pt:nth-child(2) { background: rgba(255,189,46,.55); }
.dmo-pt:nth-child(3) { background: rgba(39,201,63,.55); }
.dmo-url {
  position: relative; overflow: hidden;
  flex: 1 1 auto; margin-left: .35rem;
  display: flex; align-items: center; gap: .4rem;
  height: 24px; padding: 0 .6rem; border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-size: .7rem; color: var(--color-text-subtle);
}
.dmo-url svg { width: 11px; height: 11px; flex: none; opacity: 0; transition: opacity .4s ease; }
.dmo-url-txt { opacity: 0; transition: opacity .4s ease; }
.dmo-url-jauge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(90deg, rgba(15,108,184,.55), rgba(33,181,240,.30));
  transform: scaleX(0); transform-origin: left center;
}
.dmo-etiquette {
  flex: none; font-family: var(--font-heading); font-weight: 700;
  font-size: .58rem; letter-spacing: .18em;
  padding: .2rem .5rem; border-radius: 999px;
  color: #FFC23D; border: 1px solid rgba(255,194,61,.42); background: rgba(255,194,61,.10);
}
.dmo-ecran {
  position: relative;
  aspect-ratio: 4 / 2.75;
  background: #0A0B0F;
  overflow: hidden;
}
.dmo-site {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: .85rem .95rem;
  gap: .55rem;
  font-size: clamp(.52rem, 1.15vw, .74rem);
  overflow: hidden;
}

/* --- éléments du faux site --- */
.dmo-nav {
  display: flex; align-items: center; gap: .55rem;
  padding-bottom: .55rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
.dmo-logo {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: .06em;
  font-size: 1.05em; color: #fff;
}
.dmo-logo b { color: var(--color-accent-glow, #21B5F0); font-weight: 700; }
.dmo-menu { display: flex; gap: .55rem; margin-left: .3rem; }
.dmo-lien { color: rgba(255,255,255,.48); }
.dmo-navcta {
  margin-left: auto; padding: .28em .7em; border-radius: 999px;
  color: #fff; font-weight: 600;
  background: var(--gradient-brand, #0F6CB8);
}
.dmo-hero { display: flex; flex-direction: column; gap: .38em; padding: .45rem 0 .2rem; }
.dmo-sur { color: var(--color-accent-glow, #21B5F0); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .82em; }
.dmo-h1 { font-family: var(--font-heading); font-weight: 700; font-size: 2.15em; line-height: 1.1; color: #fff; }
.dmo-h1 b { display: block; font-weight: 700; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dmo-p { color: rgba(255,255,255,.55); }
.dmo-bouton {
  align-self: flex-start; margin-top: .25em;
  padding: .5em 1.1em; border-radius: 999px;
  color: #fff; font-weight: 600;
  background: var(--gradient-brand, #0F6CB8);
  box-shadow: 0 10px 24px -12px rgba(33,181,240,.9);
}
.dmo-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.dmo-carte {
  display: flex; flex-direction: column; gap: .35em;
  padding: .5em; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
}
.dmo-carte-img {
  display: block; height: 1.9em; border-radius: 5px;
  background: linear-gradient(135deg, rgba(15,108,184,.42), rgba(33,181,240,.16));
}
.dmo-carte em { font-style: normal; font-weight: 600; }
.dmo-form {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; align-items: center;
}
.dmo-champ {
  min-height: 2.1em; padding: .4em .6em; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.85);
  display: flex; align-items: center;
  white-space: nowrap; overflow: hidden;
}
.dmo-champ.est-vide::before { content: attr(data-ph); color: rgba(255,255,255,.28); }
.dmo-champ.est-actif { border-color: var(--color-accent-glow, #21B5F0); box-shadow: 0 0 0 3px rgba(33,181,240,.12); }
.dmo-envoi {
  padding: .55em 1em; border-radius: 7px; color: #fff; font-weight: 600;
  background: var(--gradient-brand, #0F6CB8);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dmo-envoi.est-presse { transform: scale(.93); box-shadow: 0 0 0 6px rgba(33,181,240,.14); }

/* --- phase 1 : wireframe --- */
.dmo[data-phase="1"] .dmo-site * {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.dmo[data-phase="1"] .dmo-logo,
.dmo[data-phase="1"] .dmo-lien,
.dmo[data-phase="1"] .dmo-sur,
.dmo[data-phase="1"] .dmo-p,
.dmo[data-phase="1"] .dmo-carte em,
.dmo[data-phase="1"] .dmo-champ {
  background: rgba(255,255,255,.13); border-radius: 4px;
}
.dmo[data-phase="1"] .dmo-h1,
.dmo[data-phase="1"] .dmo-h1 b { background: rgba(255,255,255,.20); border-radius: 5px; }
.dmo[data-phase="1"] .dmo-navcta,
.dmo[data-phase="1"] .dmo-bouton,
.dmo[data-phase="1"] .dmo-envoi {
  background: rgba(255,255,255,.16); box-shadow: none;
}
.dmo[data-phase="1"] .dmo-carte-img { background: rgba(255,255,255,.09); }
.dmo[data-phase="1"] .dmo-champ.est-vide::before { color: transparent; }

/* apparition en cascade des blocs du wireframe */
.dmo[data-phase="1"] .dmo-nav,
.dmo[data-phase="1"] .dmo-hero,
.dmo[data-phase="1"] .dmo-cartes,
.dmo[data-phase="1"] .dmo-form { animation: twr-dmo-bloc .5s ease both; }
.dmo[data-phase="1"] .dmo-hero  { animation-delay: .18s; }
.dmo[data-phase="1"] .dmo-cartes{ animation-delay: .36s; }
.dmo[data-phase="1"] .dmo-form  { animation-delay: .54s; }
@keyframes twr-dmo-bloc { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- transition douce entre les phases --- */
.dmo-site,
.dmo-site .dmo-logo, .dmo-site .dmo-lien, .dmo-site .dmo-sur, .dmo-site .dmo-p,
.dmo-site .dmo-h1, .dmo-site .dmo-h1 b, .dmo-site .dmo-carte em,
.dmo-site .dmo-navcta, .dmo-site .dmo-bouton, .dmo-site .dmo-envoi,
.dmo-site .dmo-carte-img, .dmo-site .dmo-champ {
  transition: background .6s ease, color .6s ease, box-shadow .6s ease, border-radius .6s ease;
}

/* --- phase 3 : en ligne --- */
.dmo[data-phase="3"] .dmo-url svg,
.dmo[data-phase="3"] .dmo-url-txt { opacity: 1; }
.dmo[data-phase="3"] .dmo-url-jauge { animation: twr-dmo-charge 1.1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes twr-dmo-charge {
  0%   { transform: scaleX(0); opacity: 1; }
  75%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* --- notes flottantes (phase 2) --- */
.dmo-note {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: 999px;
  font-size: clamp(.5rem, .72vw, .68rem); font-weight: 600;
  color: #fff;
  background: rgba(10,12,18,.86);
  border: 1px solid rgba(33,181,240,.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px -16px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.dmo-note i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-glow, #21B5F0); flex: none; }
.dmo-note--1 { top: 30%; right: 3%; }
.dmo-note--2 { top: 55%; left: 4%; }
.dmo-note--3 { bottom: 15%; right: 3%; }
.dmo[data-phase="2"] .dmo-note { opacity: 1; transform: none; }
.dmo[data-phase="2"] .dmo-note--1 { transition-delay: .45s; }
.dmo[data-phase="2"] .dmo-note--2 { transition-delay: .95s; }
.dmo[data-phase="2"] .dmo-note--3 { transition-delay: 1.45s; }

/* --- curseur --- */
.dmo-curseur {
  position: absolute; z-index: 4;
  width: 15px; height: 15px;
  left: 50%; top: 60%;
  opacity: 0;
  transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  pointer-events: none;
}
.dmo-curseur::before {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 62% 90%, 44% 52%, 78% 46%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.75));
}
.dmo[data-phase="3"] .dmo-curseur { opacity: 1; }

/* --- notification CRM --- */
.dmo-toast {
  position: absolute; z-index: 5;
  right: 3%; bottom: 6%;
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: auto;
  column-gap: .5rem; row-gap: .1rem; align-items: center;
  padding: .5rem .75rem; border-radius: 11px;
  background: rgba(10,12,18,.94);
  border: 1px solid rgba(46,204,113,.42);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.dmo-toast i {
  grid-row: 1 / span 2;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success, #2ECC71);
  box-shadow: 0 0 0 4px rgba(46,204,113,.18);
}
.dmo-toast b { font-family: var(--font-heading); font-size: clamp(.55rem,.8vw,.72rem); color: #fff; }
.dmo-toast em { font-style: normal; font-size: clamp(.5rem,.72vw,.66rem); color: var(--color-text-muted); }
.dmo.est-envoye .dmo-toast { opacity: 1; transform: none; }

/* --- légende des 3 étapes --- */
.dmo-etapes {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem; margin: 0; padding: 0; list-style: none;
}
.dmo-etape {
  padding: .7rem .8rem; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.022);
  transition: border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.dmo-etape b {
  display: block; font-family: var(--font-heading); font-size: .78rem;
  color: var(--color-text-subtle); letter-spacing: .04em; margin-bottom: .3rem;
  transition: color .4s ease;
}
.dmo-etape em {
  font-style: normal; display: block;
  font-size: .76rem; line-height: 1.5; color: var(--color-text-subtle);
  transition: color .4s ease;
}
.dmo[data-phase="1"] .dmo-etape:nth-child(1),
.dmo[data-phase="2"] .dmo-etape:nth-child(2),
.dmo[data-phase="3"] .dmo-etape:nth-child(3) {
  border-color: rgba(33,181,240,.45);
  background: rgba(15,108,184,.10);
  transform: translateY(-2px);
}
.dmo[data-phase="1"] .dmo-etape:nth-child(1) b,
.dmo[data-phase="2"] .dmo-etape:nth-child(2) b { color: var(--color-accent-glow, #21B5F0); }
.dmo[data-phase="3"] .dmo-etape:nth-child(3) b { color: var(--color-success, #2ECC71); }
.dmo[data-phase="3"] .dmo-etape:nth-child(3) { border-color: rgba(46,204,113,.45); background: rgba(46,204,113,.08); }
.dmo[data-phase="1"] .dmo-etape:nth-child(1) em,
.dmo[data-phase="2"] .dmo-etape:nth-child(2) em,
.dmo[data-phase="3"] .dmo-etape:nth-child(3) em { color: var(--color-text-muted); }

.dmo-avis {
  font-size: .74rem; line-height: 1.5; color: var(--color-text-subtle);
  margin: 0; text-align: center;
}

@media (max-width: 620px) {
  .dmo-ecran { aspect-ratio: 4 / 3.35; }
  .dmo-etapes { grid-template-columns: 1fr; gap: .5rem; }
  .dmo-etape { display: flex; align-items: baseline; gap: .6rem; padding: .55rem .7rem; }
  .dmo-etape b { margin-bottom: 0; flex: none; }
  .dmo-note--2 { left: 3%; top: 52%; }
  .dmo-form { grid-template-columns: 1fr 1fr; }
  .dmo-envoi { grid-column: 1 / -1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dmo-note, .dmo-toast, .dmo-curseur, .dmo-etape,
  .dmo[data-phase="1"] .dmo-nav, .dmo[data-phase="1"] .dmo-hero,
  .dmo[data-phase="1"] .dmo-cartes, .dmo[data-phase="1"] .dmo-form { animation: none; transition: none; }
  .dmo-curseur { display: none; }
}


/* =================================================================
   RETOUCHES 18 AOÛT 2026 · LOT 2b — finitions
   ================================================================= */

/* le nœud de fin est franchement vert, pas bleu */
.timeline--parcours.est-lance .tl-noeud--fin,
.proc-grille--parcours.est-lance .proc-noeud--fin {
  background:
    radial-gradient(130% 130% at 30% 18%, rgba(255,255,255,.26), rgba(255,255,255,0) 62%) padding-box,
    linear-gradient(135deg, #1E9E57, #2ECC71 55%, #6BE59B) border-box;
  background-color: #2ECC71;
  border-color: transparent;
  color: #062313;
}

/* la liste « pour toi SI » se rapproche de son titre */
@media (min-width: 820px) {
  .grid-2:has(.checks--si) { grid-template-columns: 0.86fr 1.14fr; gap: 1.5rem; }
  .checks--si { max-width: 44ch; }
  .si-fleche i { width: 26px; }
  .si-fleche { left: -3.2rem; }
  .checks--si { padding-left: 3.2rem; }
  .checks--si::before { left: 15px; }
}

/* la simulation respire mieux et la notification ne cache plus le bouton */
.dmo-ecran { aspect-ratio: 4 / 2.45; }
.dmo-toast { bottom: 26%; right: 3.5%; }
@media (max-width: 620px) {
  .dmo-ecran { aspect-ratio: 4 / 3.5; }
  .dmo-toast { bottom: 30%; right: 3%; left: 3%; }
}


/* =================================================================
   RETOUCHES 18 AOÛT 2026 · LOT 3
   15. Entête allégée de la section avis
   16. Parcours : icône de départ et fil qui coule
   17. « Pour toi SI » : un point de départ et quatre branches
   18. Six étapes : un vrai chemin qui serpente
   19. Bloc « séparés / ensemble » réécrit
   ================================================================= */

/* ---------- 15. Entête de la section avis ---------- */
.avis-tete {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
}

/* ---------- 16. PARCOURS : départ et fil animé ---------- */
.tl-noeud--depart, .proc-noeud--depart {
  color: var(--color-accent-glow, #21B5F0);
  border-color: rgba(33,181,240,.45);
}
.timeline--parcours.est-lance .tl-noeud--depart,
.proc-grille--parcours.est-lance .proc-noeud--depart {
  background:
    radial-gradient(130% 130% at 30% 18%, rgba(255,255,255,.24), rgba(255,255,255,0) 62%) padding-box,
    linear-gradient(135deg, #4FC8FF, #0F6CB8) border-box;
  background-color: #0B4E86;
  color: #EAF7FF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 5px rgba(33,181,240,.14),
    0 14px 30px -18px rgba(79,200,255,.95);
}
.timeline--parcours.est-lance .tl-noeud--depart { animation: twr-depart 2.8s ease-in-out infinite; }
@keyframes twr-depart {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 0 0 5px rgba(33,181,240,.14), 0 14px 30px -18px rgba(79,200,255,.95); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 0 0 9px rgba(33,181,240,.07), 0 14px 30px -18px rgba(79,200,255,.95); }
}

/* le fil des quatre étapes se met à couler */
.timeline--parcours.est-lance .tl-step::after {
  background-image:
    linear-gradient(90deg, transparent 0%, #8FE1FF 48%, transparent 100%),
    linear-gradient(90deg, var(--color-brand, #0F6CB8), rgba(33,181,240,.24));
  background-size: 55% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -280% 0, 0 0;
  animation: twr-flux 3s linear infinite;
  animation-delay: calc(var(--n, 0) * .38s + .8s);
}
@keyframes twr-flux { to { background-position: 280% 0, 0 0; } }
@media (max-width: 759px) {
  .timeline--parcours.est-lance .tl-step::after {
    background-image:
      linear-gradient(180deg, transparent 0%, #8FE1FF 48%, transparent 100%),
      linear-gradient(180deg, var(--color-brand, #0F6CB8), rgba(33,181,240,.24));
    background-size: 100% 55%, 100% 100%;
    background-position: 0 -280%, 0 0;
    animation: twr-flux-v 3s linear infinite;
  }
  @keyframes twr-flux-v { to { background-position: 0 280%, 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .timeline--parcours.est-lance .tl-step::after,
  .timeline--parcours.est-lance .tl-noeud--depart { animation: none; }
}

/* ---------- 17. « POUR TOI SI » : un départ, quatre branches ---------- */
.checks--si::before { display: none !important; }
.checks--si {
  position: relative;
  padding-left: 5.8rem;
  gap: 1.35rem;
}
.si-toile {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.si-toile path {
  fill: none;
  stroke: url(#twr-grad-si);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .85;
}
.si-toile .si-hub {
  fill: var(--color-brand, #0F6CB8);
  stroke: rgba(143,225,255,.75);
  stroke-width: 2;
}
.si-toile .si-hub-halo {
  fill: rgba(33,181,240,.16);
  animation: twr-hub 2.6s ease-in-out infinite;
}
@keyframes twr-hub { 0%,100% { r: 12; opacity: .55; } 50% { r: 17; opacity: .18; } }
.si-fleche {
  left: -2.25rem;
  z-index: 1;
}
@media (min-width: 820px) {
  .grid-2:has(.checks--si) { grid-template-columns: 0.86fr 1.14fr; gap: 1.5rem; }
  .checks--si { max-width: 46ch; padding-left: 6.2rem; }
  .si-fleche { left: -2.35rem; }
}
@media (max-width: 560px) {
  .checks--si { padding-left: 4.6rem; gap: 1.2rem; }
  .si-fleche { left: -2.05rem; width: 25px; height: 25px; }
}
.si-fleche i { display: none; }
@media (prefers-reduced-motion: reduce) { .si-toile .si-hub-halo { animation: none; } }

/* ---------- 18. SIX ÉTAPES : le chemin qui serpente ---------- */
.proc-grille--parcours { position: relative; }
.proc-grille--parcours .proc-etape::after { display: none !important; }
.proc-labyrinthe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.proc-labyrinthe .lab-fond {
  fill: none;
  stroke: rgba(255,255,255,.055);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proc-labyrinthe .lab-trace {
  fill: none;
  stroke: url(#twr-grad-lab);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.proc-labyrinthe .lab-bille {
  fill: #8FE1FF;
  filter: drop-shadow(0 0 5px rgba(143,225,255,.95));
}
.proc-grille--parcours .proc-etape { z-index: 1; }

/* ---------- 19. BLOC « SÉPARÉS / ENSEMBLE » ---------- */
.combo-tete { text-align: center; max-width: 60ch; margin-inline: auto; }
.combo-tete .lead { margin: 1.1rem auto 0; max-width: 54ch; }
.combo-chaine {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: maillon;
}
.combo-maillon {
  position: relative;
  padding: 1.25rem 1.15rem;
  border-radius: var(--radius-md, 14px);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  text-align: left;
  transition: border-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.combo-maillon:hover {
  border-color: rgba(33,181,240,.45);
  background: rgba(15,108,184,.09);
  transform: translateY(-3px);
}
.combo-maillon b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.02rem; color: #fff; margin-bottom: .4rem;
}
.combo-maillon em {
  font-style: normal; display: block;
  font-size: .88rem; line-height: 1.55; color: var(--color-text-muted);
}
/* le chevron qui relie les maillons */
.combo-maillon:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: -1rem;
  width: 1rem; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(33,181,240,.65), rgba(33,181,240,.15));
}
.combo-maillon:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%; right: -.72rem;
  width: 7px; height: 7px;
  border-top: 2px solid rgba(33,181,240,.65);
  border-right: 2px solid rgba(33,181,240,.65);
  transform: translateY(-50%) rotate(45deg);
}
.combo-pied {
  margin: 1.75rem auto 0;
  text-align: center;
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #fff;
  max-width: 52ch;
}
@media (max-width: 1000px) {
  .combo-chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.6rem; }
  .combo-maillon:nth-child(2)::after,
  .combo-maillon:nth-child(2)::before { display: none; }
}
@media (max-width: 620px) {
  .combo-chaine { grid-template-columns: 1fr; gap: 1.9rem; }
  .combo-maillon:not(:last-child)::after {
    top: auto; bottom: -1.2rem; right: auto; left: 50%;
    width: 2px; height: 1.2rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(33,181,240,.65), rgba(33,181,240,.15));
  }
  .combo-maillon:not(:last-child)::before {
    top: auto; bottom: -1rem; right: auto; left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .combo-maillon:nth-child(2)::after,
  .combo-maillon:nth-child(2)::before { display: block; }
}

/* le bandeau des plateformes vit maintenant dans le bloc SEO */
.tech { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- LOT 3b · finitions ---------- */
/* la pastille de fleche ne doit pas heriter du vert de .checks li svg */
.checks--si li .si-fleche svg,
.checks li .si-fleche svg { color: currentColor; margin-top: 0; width: 15px; height: 15px; }
/* le titre du bloc combiner respire davantage */
.combo-tete .section-title { max-width: 30ch; }


/* =================================================================
   RETOUCHES 18 AOÛT 2026 · LOT 4
   20. Le badge de gain ne chevauche plus l'entête « Client »
   21. Le titre du bloc combiner tient sur une ligne
   22. Le bandeau des partenaires ne saccade plus sur téléphone
   ================================================================= */

/* ---------- 20. Badge de gain du pipeline CRM ---------- */
.crm-cols { margin-bottom: 1.85rem; }
.crm-gain { top: -26px; }
@keyframes crm-gain-up {
  0%, 78%  { opacity: 0; transform: translate(-50%, 8px); }
  84%      { opacity: 1; transform: translate(-50%, -2px); }
  93%      { opacity: 1; transform: translate(-50%, -8px); }
  100%     { opacity: 0; transform: translate(-50%, -14px); }
}
.crm-sac { top: -13px; right: -11px; }

/* ---------- 21. Le titre du bloc combiner respire ---------- */
.combo-tete { max-width: 58rem; }
.combo-tete .section-title,
.combo-tete .section-title--center { max-width: 100%; text-wrap: balance; }
.combo-tete .lead { max-width: 56ch; }

/* ---------- 22. Bandeau des partenaires : fluide sur téléphone ---------- */
.plt-marquee { contain: paint; }
.plt-track {
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.plt-item .plt-shot img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

@media (max-width: 760px) {
  /* le masque en dégradé coûte cher à composer sur mobile : on l'enlève
     et on garde un fondu peint par-dessus, beaucoup plus léger */
  .plt-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .plt-marquee::before,
  .plt-marquee::after {
    content: "";
    position: absolute; top: 0; bottom: 0; width: 28px;
    z-index: 2; pointer-events: none;
  }
  .plt-marquee::before { left: 0;  background: linear-gradient(90deg, var(--color-bg, #000), transparent); }
  .plt-marquee::after  { right: 0; background: linear-gradient(270deg, var(--color-bg, #000), transparent); }
  .plt-marquee--tech::before,
  .plt-marquee--tech::after { display: none; }

  /* un cran plus lent : moins de saccades et on a le temps de lire */
  .plt-track { animation-duration: 58s; }
  .plt-marquee--tech .plt-track { animation-duration: 46s; }

  /* logos plus lisibles */
  .plt-item .plt-shot img            { height: 38px; max-width: 190px; }
  .plt-item.is-large .plt-shot img   { height: 29px; max-width: 220px; }
  .plt-item.is-compact .plt-shot img { height: 46px; max-width: 140px; }
  .plt-track { gap: 2.75rem; }
  .partenaires { padding-block: 2.25rem; }
  .plt-label { margin-bottom: 1.1rem; }
}
@media (max-width: 640px) {
  .plt-item .plt-shot img            { height: 36px; max-width: 175px; }
  .plt-item.is-large .plt-shot img   { height: 27px; max-width: 205px; }
  .plt-item.is-compact .plt-shot img { height: 44px; max-width: 132px; }
}


/* ==============================================================
   RETOUCHES 18 AOÛT 2026 · LOT 4b
   Le fondu des bords vaut aussi pour le ruban des outils tech :
   le fond derrière est le noir du body, la même teinte que l'autre
   ruban, donc le dégradé peint fonctionne pareil et évite la coupe
   nette des logos aux deux bouts.
   ============================================================ */
@media (max-width: 760px) {
  .plt-marquee--tech::before,
  .plt-marquee--tech::after { display: block; }
}


/* =================================================================
   RETOUCHES 18 AOÛT 2026 · LOT 5
   23. Plus de trait bleu entre les cartes du parcours
   24. La toile des branches « SI » n'est plus rognée
   25. Un gros titre = une ligne blanche + une ligne bleue
   26. Les pointes du labyrinthe
   27. La lueur du héros se fond dans la section suivante
   28. On resserre les espaces vides
   ================================================================= */

/* ---------- 23. Parcours en quatre étapes : plus de trait ---------- */
.timeline--parcours .tl-step::after { content: none !important; }

/* ---------- 24. La toile des branches « SI » ----------
   la remise à zéro « img, svg, table { max-width: 100% } » rognait la
   toile élargie : tout l'axe des x était comprimé de 15 % et les
   courbes s'arrêtaient avant les pastilles. */
.si-toile { max-width: none; }

/* ---------- 25. Un titre = une ligne blanche, une ligne bleue ----------
   le bloc garantit la coupure ; le corps du texte est ensuite ajusté
   par animations.js pour que chaque moitié tienne sur sa ligne. */
.section-title .grad-text,
.section-title .titre-blanc,
.hero h1 .grad-text,
.hero h1 .titre-blanc { display: block; }
.titre-blanc { color: inherit; }

.section-title,
.section-title--center { max-width: 100%; }
.hero h1 { max-width: 100%; }
.hero h1[style] { max-width: 100% !important; }

/* le titre resserré garde un interligne juste */
.section-title[data-serre],
.hero h1[data-serre] { line-height: 1.08; }

/* le <br> des héros ferait doublon avec le bloc */
.hero h1 br { display: none; }

/* ---------- 26. Le labyrinthe : la toile ne rogne plus le demi-tour ---------- */
.proc-labyrinthe {
  max-width: none;
  overflow: visible;
}

/* ---------- 26b. Les pointes du labyrinthe ---------- */
.proc-labyrinthe .lab-fleche {
  fill: #8FE1FF;
  stroke: none;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(143,225,255,.7));
  transition: opacity .5s ease 1.5s;
}
.proc-grille--parcours.est-lance .lab-fleche { opacity: .95; }
@media (prefers-reduced-motion: reduce) {
  .proc-labyrinthe .lab-fleche { opacity: .95; transition: none; }
}

/* ---------- 27. La lueur du héros déborde au lieu d'être coupée ---------- */
.hero {
  overflow: clip;
  overflow-clip-margin: 340px;
}

/* ---------- 28. On resserre ----------
   les sections respiraient sur 128 px en haut ET en bas, soit 256 px
   de vide entre deux blocs sur grand écran. On garde de l'air, mais
   un tiers de moins. */
:root {
  --section-pad-y: clamp(2.5rem, 4.4vw, 4rem);
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
}
.section--serre { padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.hero { padding-block: clamp(2.5rem, 5vw, 4.25rem); }
.hero + .section--serre { padding-top: clamp(1.25rem, 2.6vw, 2.25rem); }
.hero .lead { margin-bottom: 1.7rem; }

@media (max-width: 760px) {
  :root { --section-pad-y: clamp(2.4rem, 7vw, 3.25rem); }
  .section--serre { padding-block: clamp(1.75rem, 5vw, 2.5rem); }
  .hero { padding-block: clamp(2.25rem, 7vw, 3.25rem); }
}

/* TWR-PAGES-DEDIEES-19AOUT2026 */

/* =====================================================================
   THE WEB REVOLUTION - Pages dédiées : Sites web, SEO et IA, CRM
   Déploiement du 19 août 2026
   ===================================================================== */

/* ---------- Bandeau d'ancres sous le hero ---------- */
.anc { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .anc { grid-template-columns: 1fr; } }
.anc a {
  display: flex; gap: .95rem; align-items: flex-start;
  padding: 1.15rem 1.25rem; background: var(--color-surface);
  border: var(--border-1); border-radius: var(--radius-md);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.anc a:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.anc .anc-ico {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: rgba(15,108,184,.12); border: 1px solid rgba(15,108,184,.3); color: var(--color-accent-glow);
}
.anc .anc-ico svg { width: 20px; height: 20px; }
.anc b { display: block; font-family: var(--font-heading); font-size: 1.02rem; margin-bottom: .15rem; }
.anc em { font-style: normal; color: var(--color-text-muted); font-size: .89rem; line-height: 1.5; }

/* ---------- Maquette filaire : anatomie d'une page ---------- */
.wire {
  background: var(--color-surface); border: var(--border-1);
  border-radius: var(--radius-lg); padding: 1.1rem; display: grid; gap: .6rem;
}
.wire-bloc {
  position: relative; border: 1px dashed #333844; border-radius: var(--radius-sm);
  background: #101218; padding: .9rem 1.05rem; display: grid; gap: .4rem;
}
.wire-bloc > b { font-family: var(--font-heading); font-size: .96rem; letter-spacing: -.01em; }
.wire-bloc > em { font-style: normal; color: var(--color-text-muted); font-size: .86rem; line-height: 1.55; }
.wire-bloc.est-cle {
  border-style: solid; border-color: var(--color-primary);
  background: linear-gradient(160deg, rgba(15,108,184,.14), rgba(16,18,24,.92));
}
.wire-tag {
  position: absolute; top: -10px; right: 12px; font-family: var(--font-heading);
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gradient-brand); color: #fff; padding: .2rem .55rem; border-radius: var(--radius-pill);
}
.wire-lignes { display: grid; gap: .3rem; margin-top: .15rem; }
.wire-lignes i { display: block; height: 6px; border-radius: 3px; background: #232733; }
.wire-lignes i:nth-child(2) { width: 82%; }
.wire-lignes i:nth-child(3) { width: 56%; }
.wire-btn {
  display: inline-block; width: max-content; font-size: .74rem; font-weight: 600;
  font-family: var(--font-heading); padding: .3rem .85rem; border-radius: var(--radius-pill);
  background: var(--gradient-brand); color: #fff; margin-top: .2rem;
}
.wire-legende { color: var(--color-text-subtle); font-size: .86rem; margin-top: .9rem; }

/* ---------- Schéma de flux ---------- */
.flux { display: grid; gap: .9rem; }
.flux-rangee { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.flux-boite {
  background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md);
  padding: 1.05rem 1.15rem; display: grid; gap: .4rem; align-content: start;
}
.flux-boite .ico {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(15,108,184,.13); border: 1px solid rgba(33,181,240,.28); color: var(--color-accent-glow);
}
.flux-boite .ico svg { width: 18px; height: 18px; }
.flux-boite b { font-family: var(--font-heading); font-size: .97rem; }
.flux-boite em { font-style: normal; font-size: .85rem; color: var(--color-text-muted); line-height: 1.55; }
.flux-boite--noyau {
  border-color: var(--color-primary);
  background: linear-gradient(160deg, rgba(15,108,184,.2), rgba(21,22,27,.75));
  box-shadow: var(--shadow-glow);
}
.flux-boite--noyau em { color: #C7CCD5; }
.flux-fleche { display: grid; place-items: center; color: var(--color-primary); padding: .1rem 0; }
.flux-fleche svg { width: 28px; height: 28px; }
.flux-etiquette {
  font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-subtle);
}
.flux-note { color: var(--color-text-subtle); font-size: .87rem; }

/* ---------- Moyeu et rayons (connecteurs) ---------- */
.hub { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 940px) { .hub { grid-template-columns: 1fr minmax(210px, .8fr) 1fr; } }
.hub-col { display: grid; gap: .65rem; align-content: center; }
.hub-item {
  display: flex; align-items: center; gap: .7rem; background: var(--color-surface);
  border: var(--border-1); border-radius: var(--radius-pill); padding: .62rem 1.05rem;
  font-size: .9rem; color: var(--color-text-muted); transition: border-color .25s ease, color .25s ease;
}
.hub-item:hover { border-color: var(--color-primary); color: var(--color-text); }
.hub-item svg { width: 18px; height: 18px; color: var(--color-accent-glow); flex: none; }
.hub-noyau {
  text-align: center; padding: 1.7rem 1.35rem; border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary); box-shadow: var(--shadow-glow);
  background: linear-gradient(160deg, rgba(15,108,184,.22), rgba(11,11,15,.92));
}
.hub-noyau .ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin: 0 auto .7rem;
  background: rgba(33,181,240,.14); border: 1px solid rgba(33,181,240,.35); color: var(--color-accent-glow);
}
.hub-noyau .ico svg { width: 24px; height: 24px; }
.hub-noyau b { display: block; font-family: var(--font-heading); font-size: 1.12rem; }
.hub-noyau em { font-style: normal; display: block; margin-top: .3rem; font-size: .84rem; color: var(--color-text-muted); line-height: 1.5; }
.hub-titre {
  font-family: var(--font-heading); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: .2rem;
}

/* ---------- Pile d'outils : avant / après ---------- */
.pile { display: grid; gap: 1.4rem; align-items: center; }
@media (min-width: 940px) { .pile { grid-template-columns: 1fr auto 1fr; } }
.pile h3 { font-size: 1.08rem; margin-bottom: .85rem; }
.pile-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.pile-liste span {
  font-size: .85rem; padding: .42rem .85rem; border-radius: var(--radius-pill);
  border: 1px dashed #333844; background: var(--color-surface); color: var(--color-text-subtle);
}
.pile-fleche { display: grid; place-items: center; color: var(--color-primary); }
.pile-fleche svg { width: 34px; height: 34px; }
@media (max-width: 939px) { .pile-fleche svg { transform: rotate(90deg); } }
.pile-un {
  border: 1px solid var(--color-primary); border-radius: var(--radius-lg); padding: 1.5rem;
  background: linear-gradient(160deg, rgba(15,108,184,.17), rgba(21,22,27,.75));
}
.pile-un .pile-liste span { border-style: solid; border-color: rgba(33,181,240,.35); color: var(--color-text); background: rgba(15,108,184,.12); }
.pile-note { color: var(--color-text-subtle); font-size: .87rem; margin-top: 1rem; }

/* ---------- Prompt : faible / solide ---------- */
.pmt { display: grid; gap: 1rem; }
@media (min-width: 860px) { .pmt { grid-template-columns: 1fr 1fr; } }
.pmt-carte {
  border: var(--border-1); border-radius: var(--radius-md); background: #0E1016;
  padding: 1.15rem 1.25rem; display: grid; gap: .65rem; align-content: start;
}
.pmt-carte.est-bon { border-color: var(--color-primary); }
.pmt-tete {
  display: flex; align-items: center; gap: .5rem; font-family: var(--font-heading);
  font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.pmt-tete svg { width: 16px; height: 16px; }
.pmt-carte.est-faible .pmt-tete { color: var(--color-text-subtle); }
.pmt-carte.est-bon .pmt-tete { color: var(--color-accent-glow); }
.pmt-texte {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.7; color: var(--color-text-muted); white-space: pre-wrap;
}
.pmt-carte.est-bon .pmt-texte { color: #D8DCE3; }

/* ---------- Tableau neutre (comparaison de plateformes) ---------- */
.tab-neutre { width: 100%; border-collapse: collapse; min-width: 640px; }
.tab-neutre th, .tab-neutre td { padding: 1rem 1.2rem; text-align: left; border-bottom: var(--border-1); font-size: .94rem; vertical-align: top; }
.tab-neutre thead th { font-family: var(--font-heading); font-size: .95rem; background: var(--color-surface-2); color: var(--color-text); }
.tab-neutre tbody td:first-child { color: var(--color-text-muted); font-weight: 500; white-space: nowrap; }
.tab-neutre tbody td { color: var(--color-text-muted); }
.tab-neutre tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) { .tab-neutre th, .tab-neutre td { padding: .8rem .9rem; font-size: .88rem; } }

/* ---------- Grille d'usages (IA au quotidien) ---------- */
.usg { display: grid; gap: 1px; background: var(--color-border); border: var(--border-1); border-radius: var(--radius-md); overflow: hidden; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 940px) { .usg { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .usg { grid-template-columns: 1fr; } }
.usg-item { background: var(--color-surface); padding: 1.3rem 1.35rem; display: grid; gap: .45rem; align-content: start; transition: background .25s ease; }
.usg-item:hover { background: var(--color-surface-2); }
.usg-item .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(15,108,184,.13); border: 1px solid rgba(33,181,240,.28); color: var(--color-accent-glow); }
.usg-item .ico svg { width: 18px; height: 18px; }
.usg-item b { font-family: var(--font-heading); font-size: .98rem; }
.usg-item em { font-style: normal; font-size: .87rem; color: var(--color-text-muted); line-height: 1.55; }

/* ---------- Ruban d'étapes numérotées à pastilles ---------- */
.rub { display: grid; gap: .8rem; }
.rub-item { display: flex; gap: .95rem; align-items: flex-start; background: var(--color-surface); border: var(--border-1); border-radius: var(--radius-md); padding: 1.05rem 1.2rem; transition: border-color .25s ease; }
.rub-item:hover { border-color: var(--color-primary); }
.rub-item .ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(15,108,184,.13); border: 1px solid rgba(33,181,240,.28); color: var(--color-accent-glow); }
.rub-item .ico svg { width: 19px; height: 19px; }
.rub-item b { display: block; font-family: var(--font-heading); font-size: 1rem; margin-bottom: .2rem; }
.rub-item em { font-style: normal; color: var(--color-text-muted); font-size: .9rem; line-height: 1.6; }

/* ---------- Colonne de texte qui suit la maquette ---------- */
.wire-colonne { align-self: start; }
@media (min-width: 900px) { .wire-colonne { position: sticky; top: 6.5rem; } }


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 6
   29. Le thème peignait une ligne de tableau sur deux en blanc
   30. Le tableau de choix : colonnes égales et couleurs cohérentes
   31. La pastille « Nouveau » sur la dernière vidéo
   ================================================================= */

/* ---------- 29. La rayure du thème ----------
   le thème pose « table tbody > tr:nth-child(2n+1) > td { background: #f7f7f7 } ».
   Sur fond noir, une ligne sur deux ressortait en blanc avec du texte gris
   pâle par-dessus : illisible. On neutralise la rayure claire partout,
   les tableaux du site posent eux-mêmes leurs fonds. */
.table-wrap table > tbody > tr > td,
.table-wrap table > tbody > tr > th,
.table-wrap table > thead > tr > th { background-color: transparent; }

/* ---------- 30. Le tableau de choix ----------
   le thème pose « table { margin-bottom: 15px } » : ces 15 px tombaient
   DANS l'encadré, sous la dernière ligne. La boîte avait 1 px en haut et
   16 px en bas, d'où l'impression de travers. */
.table-wrap > table { margin: 0; }

.tab-neutre {
  table-layout: fixed;          /* les trois colonnes de contenu font la même largeur */
  border-collapse: separate;
  border-spacing: 0;
}
.tab-neutre th:first-child,
.tab-neutre td:first-child { width: 14.5rem; }

.tab-neutre > thead > tr > th {
  background-color: var(--color-surface-2);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.tab-neutre > tbody > tr > td {
  background-color: transparent;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
/* la colonne des intitulés se rattache visuellement à l'entête */
.tab-neutre > tbody > tr > td:first-child {
  background-color: rgba(255, 255, 255, .028);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  white-space: normal;
}
/* un liseré discret entre les colonnes, à la place de la rayure */
.tab-neutre > thead > tr > th + th,
.tab-neutre > tbody > tr > td + td { border-left: 1px solid rgba(255, 255, 255, .05); }
.tab-neutre > tbody > tr:last-child > td { border-bottom: 0; }

/* les coins suivent l'arrondi de l'encadré */
.table-wrap { border-radius: var(--radius-md); }
.tab-neutre > thead > tr > th:first-child { border-top-left-radius: var(--radius-md); }
.tab-neutre > thead > tr > th:last-child  { border-top-right-radius: var(--radius-md); }
.tab-neutre > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius-md); }
.tab-neutre > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--radius-md); }

/* sur grand écran le tableau tient toujours (colonnes fixes, largeur 100 %) :
   pas besoin de conteneur défilant, et c'est lui qui réservait 16 px de
   barre de défilement sous la dernière ligne — d'où la boîte de travers. */
@media (min-width: 761px) {
  .table-wrap { overflow-x: visible; }
}
@media (max-width: 760px) {
  .table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .table-wrap::-webkit-scrollbar { height: 6px; }
  .table-wrap::-webkit-scrollbar-track { background: transparent; }
  .table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
  .tab-neutre th:first-child,
  .tab-neutre td:first-child { width: 10.5rem; }
  .tab-neutre th, .tab-neutre td { padding: .85rem .9rem; font-size: .88rem; }
}

/* ---------- 31. La pastille « Nouveau » ---------- */
.pf-card .thumb { position: relative; }
.pf-neuf {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  padding: .2rem .55rem; border-radius: var(--radius-pill);
  background: var(--color-brand, #0F6CB8);
  color: #fff; font-family: var(--font-heading);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .9);
}

/* ---------- 32. L'encadré YouTube de l'accueil ----------
   son enveloppe de 56ch bridait le titre : « Attire des clients et deviens
   profitable » retombait sur trois lignes au lieu des deux du reste du site.
   Le titre respire, le paragraphe garde sa largeur de lecture. */
[style*="max-width:56ch"] { max-width: 74ch !important; }
[style*="max-width:56ch"] > .lead,
[style*="max-width:56ch"] > .subtle { max-width: 58ch; margin-inline: auto; }


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 7
   33. Les grilles d'usages : de vraies cartes, plus une grille de tableur
   34. Le bandeau « et par-dessus tout ça »
   35. Les six leviers en deux colonnes
   36. Le bandeau d'ancres se centre, quel que soit le nombre
   37. Les tableaux s'animent à l'arrivée
   38. Le tableau comparatif : la colonne gagnante propre
   ================================================================= */

/* ---------- 33. Les cartes d'usages ----------
   c'était une grille de cellules collées avec 1 px de fond entre elles :
   ça faisait tableur. Ce sont des cartes maintenant. */
.usg {
  display: grid;
  gap: 1rem;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  grid-template-columns: 1fr;
}
/* trois colonnes : cinq cartes se posent en 3 + 2, six en 3 + 3.
   En auto-fit on obtenait quatre colonnes et une carte toute seule. */
@media (min-width: 660px)  { .usg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .usg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usg-item {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.35rem 1.4rem;
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.usg-item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 100% at 12% 0%, rgba(33,181,240,.09), transparent 58%);
  opacity: 0;
  transition: opacity .3s ease;
}
.usg-item:hover {
  border-color: rgba(33,181,240,.42);
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.95);
}
.usg-item:hover::after { opacity: 1; }

.usg-item .ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  margin-bottom: .9rem;
  border-radius: 11px;
  background: rgba(15,108,184,.14);
  border: 1px solid rgba(33,181,240,.26);
  color: var(--color-accent-glow, #21B5F0);
  transition: background-color .25s ease, border-color .25s ease;
}
.usg-item:hover .ico { background: rgba(15,108,184,.26); border-color: rgba(33,181,240,.5); }
.usg-item .ico svg { width: 19px; height: 19px; }
.usg-item b {
  font-family: var(--font-heading); font-size: 1.02rem;
  line-height: 1.3; margin-bottom: .45rem;
}
.usg-item em {
  font-style: normal; color: var(--color-text-muted);
  font-size: .9rem; line-height: 1.55;
}

/* ---------- 34. « Et par-dessus tout ça » ----------
   les avis ne sont pas un sixième endroit : c'est ce qui joue sur les cinq.
   Le bandeau le dit visuellement. */
.usg-plus {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(15,108,184,.16), rgba(15,108,184,.05) 62%, transparent),
    var(--color-surface);
  border: 1px solid rgba(33,181,240,.28);
  box-shadow: inset 3px 0 0 var(--color-accent-glow, #21B5F0);
}
.usg-plus .ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 11px;
  background: rgba(33,181,240,.18);
  border: 1px solid rgba(33,181,240,.38);
  color: var(--color-accent-glow, #21B5F0);
}
.usg-plus .ico svg { width: 19px; height: 19px; }
.usg-plus b { display: block; font-family: var(--font-heading); font-size: 1.02rem; margin-bottom: .2rem; }
.usg-plus em { font-style: normal; color: var(--color-text-muted); font-size: .9rem; line-height: 1.55; }

/* ---------- 35. Les six leviers : trois et trois ---------- */
.rub { gap: 1rem; align-items: stretch; }
@media (min-width: 900px) {
  .rub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rub-item { height: 100%; align-items: flex-start; }

/* ---------- 36. Le bandeau d'ancres se centre ----------
   en grille à trois colonnes, deux ancres restaient collées à gauche. */
.anc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.anc a { flex: 1 1 19rem; max-width: 27rem; }

/* ---------- 37. Les tableaux s'animent à l'arrivée ---------- */
.table-wrap .lig-anim {
  opacity: 0;
  transform: translateY(10px);
}
.table-wrap.est-lance .lig-anim {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    transform .5s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--n, 0) * 90ms);
}
/* le survol d'une ligne */
.tab-neutre > tbody > tr,
table.compare > tbody > tr { transition: background-color .2s ease; }
.tab-neutre > tbody > tr:hover > td { background-color: rgba(255,255,255,.035); }
.tab-neutre > tbody > tr:hover > td:first-child { background-color: rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce) {
  .table-wrap .lig-anim { opacity: 1; transform: none; }
  .table-wrap.est-lance .lig-anim { transition: none; }
}

/* ---------- 38. Le tableau comparatif ----------
   la colonne gagnante était cernée d'un filet bleu posé en ombre interne,
   qui flottait au lieu de suivre la colonne. */
.table-wrap table.compare > thead > tr > th:nth-child(2),
.table-wrap table.compare > tbody > tr > td:nth-child(2) {
  box-shadow: none;
  background-color: rgba(15,108,184,.13);
}
.table-wrap table.compare > thead > tr > th:nth-child(2) {
  background-color: rgba(15,108,184,.22);
  color: var(--color-accent-glow, #21B5F0);
  border-top: 2px solid var(--color-accent-glow, #21B5F0);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.table-wrap table.compare > tbody > tr:last-child > td:nth-child(2) {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.table-wrap table.compare > tbody > tr > td:first-child {
  background-color: rgba(255,255,255,.028);
}
.table-wrap table.compare > tbody > tr:hover > td:nth-child(2) { background-color: rgba(15,108,184,.2); }
.table-wrap table.compare > tbody > tr:hover > td:first-child,
.table-wrap table.compare > tbody > tr:hover > td:last-child { background-color: rgba(255,255,255,.05); }

@media (max-width: 760px) {
  .usg-plus { flex-direction: column; gap: .75rem; }
}


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 8
   39. « Lequel te faut-il » : trois cartes au lieu d'un tableau
   40. Les endroits : deux colonnes, trois de chaque côté
   41. Les six leviers : un petit tableau qui se lit d'un coup
   42. Le bloc CRM : la pile d'outils resserrée
   ================================================================= */

/* ---------- 39. Les trois cartes de choix ----------
   un tableau à quatre colonnes ne ressemblait à rien d'autre sur le site.
   Ce sont des cartes, comme partout ailleurs. */
.choix {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .choix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* les trois cartes disent la même chose dans le même ordre : leurs lignes
   doivent s'aligner d'une carte à l'autre, sinon « ce qui le fait échouer »
   ne tombe pas à la même hauteur selon la longueur du texte au-dessus. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .choix { grid-template-rows: auto repeat(6, auto); }
    .choix > .choix-carte { display: grid; grid-row: span 7; grid-template-rows: subgrid; gap: 0; }
    .choix > .choix-carte > dl { display: contents; }
    .choix > .choix-carte dd { margin-bottom: .95rem; }
    .choix > .choix-carte dl > *:last-child { margin-bottom: 0; }
  }
}

.choix-carte {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--color-surface);
  border: var(--border-1);
  border-radius: var(--radius-md);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.choix-carte::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 2px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--color-brand, #0F6CB8), rgba(33,181,240,.25));
  opacity: .55;
  transition: opacity .25s ease;
}
.choix-carte:hover {
  border-color: rgba(33,181,240,.42);
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.95);
}
.choix-carte:hover::before { opacity: 1; }

.choix-carte h3 {
  font-size: 1.12rem;
  margin: 0 0 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--color-border);
}
.choix-carte dl { margin: 0; display: grid; gap: .95rem; }
.choix-carte dt {
  font-family: var(--font-heading);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--color-accent-glow, #21B5F0);
  opacity: .85;
  margin-bottom: .25rem;
}
.choix-carte dd {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem; line-height: 1.55;
}

/* ---------- 40. Les endroits : trois d'un côté, trois de l'autre ---------- */
@media (min-width: 660px)  { .usg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .usg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* la case des avis garde son accent : ce n'est pas un sixième endroit,
   c'est ce qui joue sur les cinq */
.usg-item--plus {
  background:
    linear-gradient(120deg, rgba(15,108,184,.16), rgba(15,108,184,.04) 60%, transparent),
    var(--color-surface);
  border-color: rgba(33,181,240,.3);
  box-shadow: inset 3px 0 0 var(--color-accent-glow, #21B5F0);
}
.usg-item--plus .ico {
  background: rgba(33,181,240,.2);
  border-color: rgba(33,181,240,.4);
}
.usg-item--plus:hover { box-shadow: inset 3px 0 0 var(--color-accent-glow, #21B5F0), 0 22px 46px -28px rgba(0,0,0,.95); }

/* ---------- 41. Le petit tableau des six leviers ---------- */
.tab-leviers {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
.tab-leviers td {
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  background-color: transparent;
}
.tab-leviers tr:last-child td { border-bottom: 0; }
.tab-leviers tr { transition: background-color .2s ease; }
.tab-leviers tr:hover td { background-color: rgba(255,255,255,.035); }

/* le numéro */
.tab-leviers td:first-child {
  width: 3.4rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: .95rem; font-weight: 700;
  color: var(--color-accent-glow, #21B5F0);
  font-variant-numeric: tabular-nums;
}
/* le nom du levier */
.tab-leviers td:nth-child(2) { width: 15rem; }
.tab-leviers td:nth-child(2) b {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  font-size: .96rem;
}
.tab-leviers tr:first-child td:first-child { border-top-left-radius: var(--radius-md); }
.tab-leviers tr:first-child td:last-child  { border-top-right-radius: var(--radius-md); }
.tab-leviers tr:last-child td:first-child  { border-bottom-left-radius: var(--radius-md); }
.tab-leviers tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-md); }

@media (max-width: 760px) {
  .tab-leviers { min-width: 0; }
  .tab-leviers td { display: block; padding: .2rem 1rem; border-bottom: 0; }
  .tab-leviers tr { display: block; padding: .95rem 0 1.05rem; border-bottom: 1px solid var(--color-border); }
  .tab-leviers tr:last-child { border-bottom: 0; }
  .tab-leviers td:first-child {
    width: auto; text-align: left; font-size: .68rem;
    letter-spacing: .11em; padding-bottom: .3rem;
  }
  .tab-leviers td:nth-child(2) { width: auto; padding-bottom: .35rem; }
}

/* ---------- 42. La pile d'outils resserrée ---------- */
.pile-liste span {
  font-size: .82rem;
  padding-block: .38rem;
}
.pile-note { font-size: .86rem; }


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 8b — finitions
   43. Le tableau des leviers : plus de filets verticaux du thème
   44. Le comparatif : les deux colonnes de comparaison à égalité
   ================================================================= */

/* ---------- 43. Les leviers ----------
   le thème pose une bordure sur les quatre côtés de chaque cellule :
   ça faisait un quadrillage de tableur, et sur téléphone ça découpait
   chaque ligne empilée en trois boîtes. On ne garde que le trait
   horizontal qui sépare deux leviers. */
.table-wrap .tab-leviers > tbody > tr > td {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
}
.table-wrap .tab-leviers > tbody > tr:last-child > td { border-bottom: 0; }

@media (max-width: 760px) {
  .table-wrap .tab-leviers > tbody > tr > td { border: 0; }
  .table-wrap .tab-leviers > tbody > tr {
    border-bottom: 1px solid var(--color-border);
  }
  .table-wrap .tab-leviers > tbody > tr:last-child { border-bottom: 0; }
  /* le numéro devient une étiquette au-dessus du nom */
  .tab-leviers td:first-child { opacity: .8; }
}

/* ---------- 44. Le comparatif ----------
   « Avec un CRM » prenait presque le double de « Sans CRM » :
   deux colonnes qu'on compare doivent avoir la même largeur. */
@media (min-width: 900px) {
  .table-wrap table.compare { table-layout: fixed; }
  .table-wrap table.compare > thead > tr > th:first-child,
  .table-wrap table.compare > tbody > tr > td:first-child { width: 13rem; }
}


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 9
   45. Les entêtes de section se centrent partout pareil
   46. Les trois offres deviennent vivantes
   47. Le duel : « nous » contre « une agence généraliste »
   48. La lueur du hero ne se fait plus couper
   49. Les notes de la démo ne chevauchent plus rien
   50. Le filet bleu au-dessus des cartes de choix s'en va
   51. Les bandeaux de logos démarrent en plein milieu
   52. La case des avis perd sa surbrillance
   53. Les tableaux arrondissent leurs coins
   ================================================================= */

/* ---------- 45. Les entêtes de section, centrées ----------
   la moitié des sections avaient un titre à gauche et l'autre au centre :
   ça donnait l'impression que rien n'était aligné. Tout ce qui est en
   pleine largeur se centre. Les blocs à deux colonnes (texte à côté d'un
   visuel) gardent leur texte à gauche : là, le centrer serait pire. */
.section > .container > .eyebrow,
.section > .container > .section-title,
.section > .container > h2,
.cta-band > .container > .eyebrow,
.cta-band > .container > .section-title {
  text-align: center;
}
.section > .container > .section-title,
.section > .container > h2 {
  margin-inline: auto;
}
/* le paragraphe d'intro qui suit tout de suite le titre */
.section > .container > .section-title + .lead,
.section > .container > h2 + .lead,
.section > .container > .section-title + p.muted,
.section > .container > .eyebrow + .lead {
  text-align: center;
  margin-inline: auto;
}
/* l'œil du titre (le petit intitulé bleu) se centre avec son trait */
.eyebrow.eyebrow--center,
.section > .container > .eyebrow { justify-content: center; }

/* ---------- 46. Les trois offres deviennent vivantes ----------
   la carte suit le curseur : une lueur douce se déplace sous la souris,
   et les points de la liste s'allument l'un après l'autre au survol. */
.tier {
  --sx: 50%; --sy: 0%;
  cursor: pointer;
}
.tier .halo {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--sx) var(--sy), rgba(33,181,240,.16), transparent 68%);
  opacity: 0; transition: opacity .3s ease;
}
.tier:hover .halo, .tier:focus-within .halo { opacity: 1; }

.tier ul.feat li {
  transition: color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.tier ul.feat li svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.tier:hover ul.feat li { color: var(--color-text); transform: translateX(3px); }
.tier:hover ul.feat li svg { transform: scale(1.18); }
.tier:hover ul.feat li:nth-child(1) { transition-delay: .02s; }
.tier:hover ul.feat li:nth-child(2) { transition-delay: .07s; }
.tier:hover ul.feat li:nth-child(3) { transition-delay: .12s; }
.tier:hover ul.feat li:nth-child(4) { transition-delay: .17s; }
.tier:hover ul.feat li:nth-child(1) svg { transition-delay: .02s; }
.tier:hover ul.feat li:nth-child(2) svg { transition-delay: .07s; }
.tier:hover ul.feat li:nth-child(3) svg { transition-delay: .12s; }
.tier:hover ul.feat li:nth-child(4) svg { transition-delay: .17s; }

.tier:hover { transform: translateY(-6px); }
.tier .result { transition: color .3s ease; }
.tier:hover .result { color: var(--color-accent-glow, #21B5F0); }
.tier--featured { animation: twr-flotte 5.5s ease-in-out infinite; }
@keyframes twr-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.tier--featured:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tier--featured { animation: none; }
  .tier:hover ul.feat li, .tier:hover ul.feat li svg { transform: none; transition: none; }
}

/* ---------- 47. Le duel ----------
   un tableau à six lignes, c'est un tableau. Deux camps qui s'affrontent
   manche par manche, avec le pointage qui monte, ça se lit et ça se
   retient. */
.duel { position: relative; }

.duel-tete {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
.duel-camp {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .9rem 1rem;
  border-radius: var(--radius-md);
  border: var(--border-1);
  background: var(--color-surface);
  text-align: center;
}
.duel-camp b {
  font-family: var(--font-heading); font-size: .98rem; line-height: 1.25;
}
.duel-camp--nous {
  border-color: rgba(33,181,240,.42);
  background: linear-gradient(140deg, rgba(15,108,184,.2), rgba(15,108,184,.05) 62%), var(--color-surface);
}
.duel-camp--nous b { color: var(--color-accent-glow, #21B5F0); }
.duel-camp--eux { opacity: .78; }
.duel-score {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.75rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.duel-camp--nous .duel-score { color: var(--color-accent-glow, #21B5F0); }
.duel-camp--eux .duel-score { color: var(--color-text-subtle); }
.duel-vs {
  font-family: var(--font-heading); font-weight: 700;
  font-size: .72rem; letter-spacing: .16em;
  color: var(--color-text-subtle);
  padding: .4rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.duel-manches { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.duel-manche {
  display: grid;
  grid-template-columns: 1fr 9.5rem 1fr;
  align-items: stretch;
  gap: .55rem;
  opacity: 0;
  transform: translateY(12px);
}
.duel.est-lance .duel-manche {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--n, 0) * 130ms);
}
.duel-sujet {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-heading); font-weight: 600;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: .5rem;
  transition: color .25s ease;
}
.duel-nous, .duel-eux {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius-md);
  border: var(--border-1);
  font-size: .93rem; line-height: 1.45;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease, opacity .25s ease;
}
.duel-nous {
  background: linear-gradient(100deg, rgba(15,108,184,.15), rgba(15,108,184,.04) 70%), var(--color-surface);
  border-color: rgba(33,181,240,.26);
  color: var(--color-text);
  font-weight: 500;
}
.duel-eux {
  background: var(--color-surface);
  color: var(--color-text-muted);
  opacity: .72;
}
.duel-nous i, .duel-eux i {
  flex: none; width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-style: normal; font-size: .78rem; font-weight: 700;
}
.duel-nous i { background: rgba(52,199,123,.16); color: var(--color-success, #34C77B); }
.duel-eux i  { background: rgba(255,90,90,.13); color: #FF6B6B; }

.duel-manche:hover .duel-nous {
  border-color: rgba(33,181,240,.6);
  transform: translateX(4px);
  box-shadow: 0 18px 40px -26px rgba(33,181,240,.75);
}
.duel-manche:hover .duel-eux { opacity: .42; transform: translateX(-4px); }
.duel-manche:hover .duel-sujet { color: var(--color-accent-glow, #21B5F0); }

.duel-bilan {
  margin-top: 1.15rem;
  text-align: center;
  font-family: var(--font-heading); font-weight: 600;
  color: var(--color-text-muted); font-size: .95rem;
}
.duel-bilan b { color: var(--color-accent-glow, #21B5F0); }

@media (max-width: 820px) {
  .duel-manche { grid-template-columns: 1fr; gap: .3rem; }
  .duel-sujet {
    justify-content: flex-start; text-align: left;
    padding: .55rem .2rem .15rem;
  }
  .duel-tete { grid-template-columns: 1fr auto 1fr; gap: .5rem; }
  .duel-camp { padding: .7rem .55rem; }
  .duel-camp b { font-size: .85rem; }
  .duel-score { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .duel-manche { opacity: 1; transform: none; }
  .duel.est-lance .duel-manche { transition: none; }
}

/* ---------- 48. La lueur ne se fait plus couper ----------
   le halo du hero descendait jusque sous la section suivante, qui peint
   son fond par-dessus : ça faisait un trait horizontal net. On le fait
   s'éteindre bien avant d'y arriver. */
.glow::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.35) 68%, transparent 86%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.35) 68%, transparent 86%);
}
/* et la section qui suit le hero ouvre sur un fondu au lieu d'un bord franc */
.hero + .section,
.hero + .cta-band {
  position: relative;
}
.hero + .section::before,
.hero + .cta-band::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 120px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, rgba(15,108,184,.07), transparent);
}
.hero + .section > *,
.hero + .cta-band > * { position: relative; z-index: 1; }

/* ---------- 49. Les notes de la démo ----------
   « La promesse se lit en 5 secondes » retombait sur la carte
   « Réparation » dès que l'écran de démo se resserrait. Les trois notes
   se calent maintenant dans les zones vides, en pourcentage de hauteur
   plutôt qu'au jugé. */
.dmo-note--1 { top: 15%; right: 3%; }
.dmo-note--2 { top: 60%; left: 3.5%; }
.dmo-note--3 { bottom: 8%;  right: 3%; }
/* si l'écran se resserre, la note 1 remonte encore */
@media (max-width: 1100px) {
  .dmo-note--1 { top: 13%; }
  .dmo-note--3 { bottom: 6%; }
}
@media (max-width: 900px) {
  .dmo-note--1 { top: 11%; right: 2.5%; }
  .dmo-note--2 { top: 62%; left: 2.5%; }
}

/* ---------- 50. Plus de filet bleu au-dessus des cartes de choix ---------- */
.choix-carte::before { display: none; }
.choix-carte { padding-top: 1.5rem; }

/* ---------- 51. Les bandeaux de logos démarrent en plein milieu ----------
   au chargement, la piste partait de zéro : on voyait le premier logo
   arriver au bord gauche et un blanc derrière. Un décalage négatif la
   fait commencer là où elle est déjà pleine. */
.plt-track            { animation-delay: -13s; }
.plt-marquee--tech .plt-track { animation-delay: -21s; }
.logo-track           { animation-delay: -9s; }

/* ---------- 52. La case des avis rentre dans le rang ----------
   Justin : « six endroits », pas cinq plus un. */
.usg-item--plus {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
}
.usg-item--plus .ico {
  background: rgba(15,108,184,.14);
  border-color: rgba(33,181,240,.26);
}
.usg-item--plus:hover {
  border-color: rgba(33,181,240,.42);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,.95);
}

/* ---------- 53. Les tableaux arrondissent leurs coins ----------
   c'était une boîte à angles droits posée sur un site tout en coins
   arrondis. */
.table-wrap {
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: var(--border-1);
}
.table-wrap > table { border-radius: inherit; overflow: hidden; }
.table-wrap table.compare > thead > tr > th:first-child { border-top-left-radius: var(--radius-lg, 18px); }
.table-wrap table.compare > thead > tr > th:last-child  { border-top-right-radius: var(--radius-lg, 18px); }
.table-wrap table.compare > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius-lg, 18px); }
.table-wrap table.compare > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--radius-lg, 18px); }
.table-wrap .tab-leviers > tbody > tr:last-child > td { border-bottom: 0; }
@media (max-width: 760px) {
  .table-wrap { border: 0; border-radius: 0; overflow: visible; }
}


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 9b
   49 bis. Les notes de la démo, ancrées pour de bon
   ================================================================= */

/* En pourcentage de la hauteur de l'écran, les notes retombaient sur les
   cartes de service dès que la fenêtre se resserrait : l'écran de démo a
   un rapport de forme fixe, mais son contenu, lui, ne rétrécit presque
   pas. Chaque note est maintenant l'enfant du bloc qu'elle commente et se
   pose dans un coin libre de ce bloc. Plus de collision possible, quelle
   que soit la largeur. */
.dmo-hero, .dmo-form { position: relative; }

.dmo-note--1 { top: 0;    right: 0; left: auto; bottom: auto; }
.dmo-note--2 { bottom: 0; right: 0; left: auto; top: auto; }
.dmo-note--3 { bottom: calc(100% + .5rem); right: 0; left: auto; top: auto; }

/* le texte du hero de la démo garde sa place à gauche des notes */
.dmo-hero .dmo-sur,
.dmo-hero .dmo-h1,
.dmo-hero .dmo-p { max-width: 60%; }

/* l'écran ne descend plus sous la hauteur de son propre contenu */
.dmo-ecran { min-height: 20rem; }

@media (max-width: 900px) {
  .dmo-hero .dmo-sur,
  .dmo-hero .dmo-h1,
  .dmo-hero .dmo-p { max-width: 100%; }
  .dmo-note--1 { top: auto; bottom: calc(100% + .4rem); }
  .dmo-note--2 { bottom: calc(100% + .4rem); }
  .dmo-ecran { min-height: 0; }
}

/* le couloir entre les cartes de service et le formulaire doit rester
   assez haut pour accueillir la note 3, meme sur un ecran de portable */
@media (min-width: 901px) and (max-width: 1200px) {
  .dmo-ecran { min-height: 26rem; }
}


/* =====================================================================
   CARROUSEL GENERIQUE - 19 aout 2026
   Defilement natif avec accrochage, fleches, pastilles, avance auto.
   Le glissement tactile marche tout seul : c'est du scroll natif.
   ===================================================================== */
.carr { position: relative; --vue: 3; --carr-gap: 1.25rem; }
.carr[data-vue="4"] { --vue: 4; }
.carr[data-vue="2"] { --vue: 2; }
@media (max-width: 1180px) { .carr, .carr[data-vue="4"] { --vue: 3; } }
@media (max-width: 900px)  { .carr, .carr[data-vue="4"], .carr[data-vue="3"] { --vue: 2; } }
@media (max-width: 620px)  { .carr, .carr[data-vue="4"], .carr[data-vue="3"], .carr[data-vue="2"] { --vue: 1; } }

.carr-piste {
  display: flex; gap: var(--carr-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .4rem .3rem 1.4rem;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.carr-piste::-webkit-scrollbar { display: none; }
.carr-piste > * {
  flex: 0 0 calc((100% - (var(--vue) - 1) * var(--carr-gap)) / var(--vue));
  scroll-snap-align: start;
  min-width: 0;
}

.carr-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,11,15,.82); border: 1px solid var(--color-border);
  color: #fff; cursor: pointer; z-index: 3;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .22s ease, border-color .22s ease, opacity .22s ease, transform .22s ease;
}
.carr-fleche:hover { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-50%) scale(1.06); }
.carr-fleche:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: 3px; }
.carr-fleche svg { width: 20px; height: 20px; }
.carr-fleche--prec { left: -14px; }
.carr-fleche--suiv { right: -14px; }
.carr-fleche[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .carr-fleche { display: none; } }

.carr-pts { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: .1rem; }
.carr-pt {
  width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; cursor: pointer;
  background: var(--color-border); transition: background .28s ease, width .28s ease;
}
.carr-pt:hover { background: var(--color-text-subtle); }
.carr-pt.is-on { width: 28px; background: var(--gradient-brand); }
.carr-pt:focus-visible { outline: 2px solid var(--color-accent-glow); outline-offset: 3px; }

/* une carte de vidéo dans le carrousel garde sa hauteur pleine */
.carr-piste .pf-card { display: flex; flex-direction: column; height: 100%; }
.carr-piste .pf-card .body { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .carr-piste { scroll-behavior: auto; }
  .carr-fleche:hover { transform: translateY(-50%); }
}

/* carr-fleche-interieur : sous 1290 px le conteneur touche les bords, les fleches passent par-dessus */
@media (max-width: 1290px) { .carr-fleche--prec { left: 8px; } .carr-fleche--suiv { right: 8px; } }


/* =================================================================
   RETOUCHES 19 AOÛT 2026 · LOT 10
   54. Le contenu se resserre partout, comme sur le blogue
   55. Le mauve du thème disparaît de tous les boutons
   56. Les boutons clairs restent lisibles au survol
   57. Le bouton d'appel prend l'anneau animé du badge Google
   58. Les flèches des carrousels tournent en rond, sans bout de course
   59. Le comparatif s'entoure d'un filet de lumière
   ================================================================= */

/* ---------- 54. La largeur du blogue, partout ----------
   Le blogue plafonnait son contenu à 1200 px, les pages Elementor le
   laissaient s'étaler sur toute la fenêtre. Justin préfère la première :
   sur un grand écran, une ligne de texte de 1700 px ne se lit pas.
   Les fonds restent pleine largeur, c'est le contenu qui se resserre. */
.elementor .container { max-width: var(--container-max); margin-inline: auto; }
.elementor section { max-width: 100%; }

/* ---------- 55. Le mauve du thème ----------
   royal-elementor-kit peint TOUS les <button> en #605be5 au survol ET au
   focus. C'est ce qui rendait la flèche du carrousel mauve après un clic.
   On coupe la règle à la racine, puis chaque bouton maison reprend sa
   propre couleur. */
button:hover, button:focus,
[type="submit"]:hover, [type="submit"]:focus,
[type="button"]:hover, [type="button"]:focus {
  background-color: transparent;
}
.carr-fleche:hover, .carr-fleche:focus,
.carr-fleche:focus-visible {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.carr-pt:hover, .carr-pt:focus { background-color: var(--color-accent-glow, #21B5F0); }
.cas-chip:hover, .cas-chip:focus,
.cas-filtres .cas-chip:hover, .cas-filtres .cas-chip:focus { background-color: var(--color-surface); }
.cas-chip.is-on, .cas-chip[aria-pressed="true"] { background-color: var(--color-primary); }
.lang-btn:hover, .lang-btn:focus { background-color: var(--color-surface-2); }
.ck button:hover, .ck button:focus { background-color: var(--color-surface-2); }
.ck .ck-oui:hover, .ck .ck-oui:focus { background-color: var(--color-primary); }
.nav-toggle-label:hover, .nav-toggle-label:focus { background-color: transparent; }

/* ---------- 56. Les boutons clairs restent lisibles ----------
   « .elementor a:hover { color: inherit } » passait devant la couleur du
   bouton : sur la bande bleue, le texte héritait du blanc de la bande et
   se retrouvait blanc sur blanc. Le bouton disparaissait. */
.cta-band .btn-light,
.cta-band .btn-light:hover,
.cta-band .btn-light:focus,
.cta-band .btn-light:active,
.elementor .cta-band .btn-light:hover,
.elementor .cta-band .btn-light:focus {
  color: var(--color-primary-deep);
}
.btn-light, .btn-light:hover, .btn-light:focus,
.elementor .btn-light:hover, .elementor .btn-light:focus {
  color: var(--color-primary-deep);
}
/* même précaution pour les autres boutons : la couleur ne s'hérite plus */
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.elementor .btn-primary:hover, .elementor .btn-primary:focus { color: #fff; }
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus,
.elementor .btn-secondary:hover, .elementor .btn-secondary:focus { color: var(--color-text); }
.btn-ghost, .btn-ghost:hover, .btn-ghost:focus,
.elementor .btn-ghost:hover, .elementor .btn-ghost:focus { color: var(--color-text); }

/* ---------- 57. L'anneau animé du badge ----------
   Justin voulait le traitement du badge « 5.0 sur Google » sur le bouton
   d'appel : un filet qui tourne autour, pas un simple survol. */
.cta-band .btn-light::before {
  inset: -2px;
  background: conic-gradient(from var(--spin),
    rgba(255,255,255,.32) 0%, rgba(255,255,255,.32) 52%,
    #fff 70%, #B7E7FF 80%, #7FD4FF 88%, rgba(255,255,255,.32) 100%);
  animation-duration: 4.2s;
}
.cta-band .btn-light:hover::before { animation-duration: 1.5s; }
.cta-band .btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -14px rgba(0,0,0,.45), 0 0 44px -10px rgba(255,255,255,.6);
}
/* la petite pastille bleue devant le texte, comme le point du badge */
.cta-band .btn-light::after { background: #fff; }

/* ---------- 58. Les flèches ne restent plus coincées ----------
   Arrivé au bout, « suivant » se désactivait : impossible de continuer.
   Le carrousel boucle maintenant. La flèche ne s'efface que s'il n'y a
   vraiment qu'une seule page. */
.carr-fleche[disabled] { opacity: 0; pointer-events: none; }
.carr-fleche[data-boucle] { opacity: 1; pointer-events: auto; }
.carr-fleche:active { transform: translateY(-50%) scale(.94); }

/* ---------- 59. Le filet de lumière autour du comparatif ----------
   Un point lumineux fait le tour de l'encadré, comme une LED sur un
   rail. Le tableau reste sobre, c'est le contour qui vit. */
.table-wrap {
  position: relative;
  isolation: isolate;
  border-color: transparent;
}
.table-wrap::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  z-index: -2;
  background: conic-gradient(from var(--spin),
    var(--color-border) 0%, var(--color-border) 58%,
    rgba(15,108,184,.55) 70%, #21B5F0 80%, #7FD4FF 85%, rgba(15,108,184,.55) 90%,
    var(--color-border) 100%);
  animation: spin-border 5.5s linear infinite;
}
.table-wrap::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--color-bg);
}
.table-wrap:hover::before { animation-duration: 2.2s; }

@media (prefers-reduced-motion: reduce) {
  .table-wrap::before { animation: none; }
}
@media (max-width: 760px) {
  /* en cartes empilées, l'encadré disparaît : le filet aussi */
  .table-wrap::before, .table-wrap::after { display: none; }
  .table-wrap { isolation: auto; }
}

/* ---------- 54 bis. L'echelle typographique suit la nouvelle largeur ----------
   Le contenu passe de toute la fenetre a 1200 px : une taille calibree
   pour 1740 px de large ne tient plus sur une ligne dans une colonne de
   1136 px. On resserre le titrage d'autant. */
:root {
  --fs-hero: clamp(2.5rem, 5vw, 4.4rem);
  --fs-h2:   clamp(1.9rem, 3.4vw, 3rem);
}


/* =================================================================
   RETOUCHES 20 AOÛT 2026 · LOT 11
   60. Le bandeau des logos arrête de sauter
   61. La démo respire à nouveau dans la colonne resserrée
   62. Le comparatif prend les bords du tableau des leviers
   63. Le filet des tableaux : plus bleu, plus visible
   64. La légende de la VSL passe au-dessus, centrée
   65. Les avis sans commentaire ont leur carte
   ================================================================= */

/* ---------- 60. Le bandeau des logos ----------
   Trois causes au saut, dans l'ordre d'importance :

   1. `.logo-item` n'avait aucune largeur. Tant qu'une image n'était pas
      chargée, sa case mesurait zéro ; à l'arrivée de l'image, toute la
      piste se réorganisait — et comme elle défile, ça se voit comme un
      saut. On réserve la place d'avance.
   2. La piste n'avait aucune indication de composition (`will-change`),
      contrairement à celle des plateformes. Le navigateur repeignait
      5 700 px de logos à chaque image.
   3. Le fondu des bords était un `mask-image` : coûteux à composer sur
      une couche qui bouge. Deux dégradés peints par-dessus font le même
      effet pour presque rien. */
.logo-item {
  flex: 0 0 auto;
  width: 190px;
  height: 60px;
}
.logo-item.lg-tall { width: 120px; }
.logo-item.lg-wide { width: 210px; }

.logo-track {
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.logo-marquee {
  contain: paint;
  -webkit-mask-image: none;
          mask-image: none;
}
.logo-marquee::before,
.logo-marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 9%;
  z-index: 2; pointer-events: none;
}
.logo-marquee::before { left: 0;  background: linear-gradient(90deg,  var(--color-bg, #000), transparent); }
.logo-marquee::after  { right: 0; background: linear-gradient(270deg, var(--color-bg, #000), transparent); }
.bg-deep .logo-marquee::before { background: linear-gradient(90deg,  var(--color-bg-deep, #08080c), transparent); }
.bg-deep .logo-marquee::after  { background: linear-gradient(270deg, var(--color-bg-deep, #08080c), transparent); }

/* le survol ne déforme plus l'image : agrandir un enfant d'une couche
   qui défile force un repaint de toute la piste */
.logo-item img { transition: opacity .3s ease; }
.logo-item img:hover { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .logo-item { width: 140px; height: 50px; }
  .logo-item.lg-tall { width: 96px; }
  .logo-item.lg-wide { width: 165px; }
}

/* ---------- 61. La démo dans la colonne resserrée ----------
   Le contenu passé à 1200 px, la colonne de la démo est tombée de 660 à
   546 px, et l'écran avec elle : 334 px de haut pour 338 px de contenu.
   Tout se chevauchait, à commencer par la notification « Nouveau lead »
   qui retombait sur les cartes de service. */
@media (min-width: 901px) {
  .dmo-ecran { min-height: 25rem; }
}
/* la notification annonce le lead qui vient d'être envoyé : sa place est
   juste au-dessus du formulaire. Elle ne coexiste jamais avec la note 3
   (l'une est en phase 2, l'autre en phase 3) : elles peuvent partager
   le même coin. */
.dmo-form .dmo-toast {
  right: 0; left: auto;
  bottom: calc(100% + .5rem); top: auto;
}

/* ---------- 62. Le comparatif prend les bords du tableau des leviers ----------
   Le thème pose une bordure grise (#ccc) sur les quatre côtés de chaque
   cellule. Sur le tableau des leviers on l'avait déjà retirée ; le
   comparatif, lui, la gardait — d'où le quadrillage clair qui venait
   buter contre les coins arrondis. */
.table-wrap table.compare { border-collapse: separate; border-spacing: 0; }
.table-wrap table.compare > thead > tr > th,
.table-wrap table.compare > tbody > tr > td {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
}
.table-wrap table.compare > tbody > tr:last-child > td { border-bottom: 0; }
/* un seul trait vertical : celui qui sépare les deux colonnes comparées */
.table-wrap table.compare > thead > tr > th:nth-child(2),
.table-wrap table.compare > tbody > tr > td:nth-child(2) {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
/* et la colonne gagnante suit l'arrondi du cadre */
.table-wrap table.compare > thead > tr > th:first-child { border-top-left-radius: var(--radius-lg, 18px); }
.table-wrap table.compare > thead > tr > th:last-child  { border-top-right-radius: var(--radius-lg, 18px); }
.table-wrap table.compare > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius-lg, 18px); }
.table-wrap table.compare > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--radius-lg, 18px); }

/* ---------- 63. Le filet : plus bleu, plus visible ----------
   Le point lumineux se voyait à peine sur fond noir. Le segment clair
   est plus large, plus haut en luminosité, et le reste du contour passe
   d'un gris neutre à un bleu sourd : on voit tout de suite qu'il y a
   un cadre. */
.table-wrap::before {
  background: conic-gradient(from var(--spin),
    rgba(15,108,184,.34) 0%,
    rgba(15,108,184,.34) 46%,
    rgba(33,181,240,.75) 62%,
    #4FC8FF 72%,
    #A8E4FF 78%,
    #4FC8FF 84%,
    rgba(33,181,240,.75) 92%,
    rgba(15,108,184,.34) 100%);
  animation-duration: 6s;
  filter: saturate(1.15);
}
.table-wrap::after { background: var(--color-bg); }
.bg-deep .table-wrap::after { background: var(--color-bg-deep, #08080c); }
.table-wrap:hover::before { animation-duration: 2.4s; }

/* ---------- 64. La légende de la VSL ----------
   Justin la voulait au-dessus de tout et centrée, pas coincée en haut
   de la colonne de droite. */
.wire-legende--haut {
  margin: 0 auto 1.6rem;
  max-width: 62ch;
  text-align: center;
}

/* ---------- 65. Les avis sans commentaire ----------
   Une note cinq étoiles sans texte, c'est quand même un avis. On l'affiche
   pour ce qu'il est : la note et le nom, dans une carte plus compacte. */
.testi--note blockquote {
  display: flex; align-items: center; justify-content: center;
  flex: 1;
  margin: 0;
  text-align: center;
}
.testi--note .note-seule {
  font-family: var(--font-heading);
  font-size: .92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.testi--note .note-seule b {
  display: block;
  font-size: 1.6rem;
  color: var(--color-accent-glow, #21B5F0);
  margin-bottom: .2rem;
  font-variant-numeric: tabular-nums;
}

/* Le carrousel gere ses positions lui-meme : l aimantation obligatoire du
   navigateur defaisait les sauts de boucle 200 ms plus tard. En mode
   'proximity', le glisse au doigt garde son confort sans empecher le
   repositionnement. */
.carr-piste { scroll-snap-type: x proximity; }


/* =================================================================
   RETOUCHES 20 AOÛT 2026 · LOT 11b
   60 bis. Le bandeau des logos : densité et vitesse
   ================================================================= */

/* Réserver 190 px par logo était généreux : la piste s'est étirée et les
   logos se sont retrouvés très espacés. On resserre la réservation et
   l'écart. La vitesse, elle, est réglée par le script : la piste fait
   maintenant sa vraie largeur (avant, la moitié des images n'étaient pas
   encore chargées au moment où le navigateur mesurait), donc une durée
   fixe en secondes ne veut plus rien dire. */
.logo-item          { width: 155px; }
.logo-item.lg-tall  { width: 108px; }
.logo-item.lg-wide  { width: 180px; }
.logo-track         { gap: clamp(2rem, 3.5vw, 3rem); }

@media (max-width: 640px) {
  .logo-item         { width: 128px; }
  .logo-item.lg-tall { width: 90px; }
  .logo-item.lg-wide { width: 150px; }
  .logo-track        { gap: 1.75rem; }
}

/* ---------- 66. Les titres des colonnes etroites ----------
   Dans une section a deux colonnes, la colonne de texte est passee de
   660 a 441 px avec le resserrement du contenu. Un titre de 48 px y
   tombait sur trois lignes. On le calibre sur la largeur reelle de la
   colonne : deux lignes, comme les autres blocs a deux colonnes. */
.split-text .section-title,
.wire-colonne .section-title {
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
}


/* =================================================================
   RETOUCHES 20 AOÛT 2026 · LOT 12
   67. Le carrousel : plus de pastilles, des flèches au bord
   68. Les tableaux respirent sur tout leur contour
   ================================================================= */

/* ---------- 67. Les flèches, sans les pastilles ----------
   Les points sous le carrousel doublaient une information que les
   flèches donnent déjà. Et les flèches, posées à 14 px à l'intérieur
   du cadre, mordaient sur la première et la dernière vignette.
   Elles se posent maintenant dans la marge, au bord du contenu. */
.carr-pts { display: none; }

.carr { position: relative; }
.carr-fleche--prec { left: -22px; }
.carr-fleche--suiv { right: -22px; }

/* sous 1290 px il n'y a plus de marge : les flèches reviennent à
   l'intérieur, mais collées au bord, pas par-dessus les vignettes */
@media (max-width: 1290px) {
  .carr { padding-inline: 30px; }
  .carr-fleche--prec { left: -6px; }
  .carr-fleche--suiv { right: -6px; }
}
@media (max-width: 900px) {
  .carr { padding-inline: 0; }
}

/* ---------- 68. La lueur fait tout le tour ----------
   Jusqu'ici seul un point clair tournait le long du cadre : on le
   voyait surtout dans les coins. Le contour au complet respire
   maintenant — il s'éclaircit et s'assombrit doucement — et le point
   continue de tourner par-dessus. Les deux ensemble donnent un cadre
   qu'on voit tout de suite, sans clignoter. */
@keyframes twr-respire {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.table-wrap::before {
  animation: spin-border 6s linear infinite;
}
.table-wrap::after {
  /* le fond du cadre reste opaque : c'est lui qui laisse voir le filet */
  background: var(--color-bg);
}
/* le halo qui respire, posé par-dessus le filet tournant */
.table-wrap {
  --twr-filet: rgba(33,181,240,.55);
}
.table-wrap > .filet-respire {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  z-index: -3;
  pointer-events: none;
  border: 1.5px solid var(--twr-filet);
  box-shadow: 0 0 18px -2px rgba(33,181,240,.4), inset 0 0 14px -6px rgba(33,181,240,.35);
  animation: twr-respire 3.6s ease-in-out infinite;
}
.table-wrap:hover > .filet-respire { animation-duration: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .table-wrap > .filet-respire { animation: none; opacity: .8; }
}
@media (max-width: 760px) {
  .table-wrap > .filet-respire { display: none; }
}

/* ---------- 67 bis. Les fleches sortent pour de bon ----------
   A -22 px elles mordaient encore de 24 px sur la premiere et la
   derniere vignette (le bouton fait 46 px de large). Elles se posent
   maintenant entierement dans la marge, a 22 px du contenu. Sous
   1290 px la marge n existe plus : on la fabrique avec du rembourrage. */
@media (min-width: 1291px) {
  .carr-fleche--prec { left: -68px; }
  .carr-fleche--suiv { right: -68px; }
}
@media (max-width: 1290px) {
  .carr { padding-inline: 56px; }
  .carr-fleche--prec { left: 2px; }
  .carr-fleche--suiv { right: 2px; }
}
@media (max-width: 900px) {
  .carr { padding-inline: 0; }
}


/* =================================================================
   RETOUCHES 21 AOÛT 2026 · LOT 13
   69. La carte mise en avant occupe toute la largeur
   70. Les bandeaux ne s'arrêtent plus jamais
   71. Deux paragraphes d'intro, un seul bloc
   72. Le cadre des tableaux : une vraie lueur bleue
   73. La colonne gagnante est une colonne, pas une étiquette
   ================================================================= */

/* ---------- 69. La carte en tête prend toute la largeur ----------
   Cinq cartes dans une grille à deux colonnes, ça laisse toujours une
   case vide au bas. La première s'étend maintenant sur les deux
   colonnes : plus de trou, et la carte qui compte est en haut. */
.rub-item--large { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .rub-item--large { padding-block: 1.15rem; }
  .rub-item--large em { max-width: 62ch; }
}

/* ---------- 70. Les bandeaux roulent, point ----------
   Le défilement s'arrêtait dès que la souris passait dessus — et comme
   les logos occupent toute la largeur, ça arrivait sans le vouloir.
   Il ne s'arrête plus, ni au survol, ni au clavier, ni au toucher. */
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track,
.tech-marquee:hover .tech-track,
.tech-marquee:focus-within .tech-track,
.plt-marquee:hover .plt-track,
.plt-marquee:focus-within .plt-track,
.plt-marquee.is-paused .plt-track { animation-play-state: running; }

/* la piste vit sur sa propre couche : le compositeur la fait glisser
   sans repasser par la mise en page à chaque image */
.logo-track, .plt-track, .tech-track {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---------- 71. Le paragraphe d'intro qui en compte deux ----------
   Seul le premier suivait le titre et se centrait ; le second restait
   collé à gauche. Les deux se lisaient comme deux blocs sans rapport.
   Ils se centrent maintenant à la même largeur, resserrés. */
.section > .container > .section-title + .lead + .lead,
.section > .container > h2 + .lead + .lead,
.section > .container > .eyebrow + .lead + .lead,
.section > .container > .section-title + .lead + .lead + .lead,
.section > .container > h2 + .lead + .lead + .lead,
.section > .container > .eyebrow + .lead + .lead + .lead {
  text-align: center;
  margin-inline: auto;
  margin-block-start: .85rem;
}

/* ---------- 72. Le cadre : une lueur bleue qu'on voit ----------
   Trois couches se marchaient dessus sur le même filet de 1,5 px : le
   dégradé conique tournant (::before, plan -2) recouvrait exactement le
   halo qui devait respirer (plan -3). Résultat : un liseré gris qui
   tourne, et pas de bleu.

   Une seule couche maintenant, portée par le cadre lui-même : sa bordure
   et son ombre extérieure. L'ombre d'un élément n'est jamais rognée par
   son propre débordement caché — c'est ce qui garantit qu'on la voit. */
@keyframes twr-cadre {
  0%, 100% {
    border-color: rgba(33,181,240,.34);
    box-shadow: 0 0 0 1px rgba(33,181,240,.06),
                0 0 18px -6px rgba(33,181,240,.28);
  }
  50% {
    border-color: rgba(33,181,240,.90);
    box-shadow: 0 0 0 1px rgba(33,181,240,.24),
                0 0 32px -4px rgba(33,181,240,.62);
  }
}
.table-wrap {
  border: 1px solid rgba(33,181,240,.5);
  animation: twr-cadre 3.6s ease-in-out infinite;
}
.table-wrap:hover { animation-duration: 1.9s; }

/* les deux anciennes couches sortent de scène */
.table-wrap::before { display: none; }
.table-wrap > .filet-respire { display: none; }

@media (prefers-reduced-motion: reduce) {
  .table-wrap {
    animation: none;
    border-color: rgba(33,181,240,.62);
    box-shadow: 0 0 22px -8px rgba(33,181,240,.45);
  }
}
@media (max-width: 760px) {
  /* en cartes empilées il n'y a plus d'encadré : plus de lueur non plus */
  .table-wrap { animation: none; border-color: transparent; box-shadow: none; }
}

/* ---------- 73. La colonne gagnante ----------
   Elle avait des coins arrondis en haut, au milieu d'une ligne d'entête
   qui, elle, est droite : ça donnait une étiquette collée par-dessus le
   tableau, avec deux encoches de chaque côté. C'est une colonne : elle
   descend droit du haut au bas, tenue par deux filets bleus, coiffée
   d'un trait plus clair. */
.table-wrap table.compare > thead > tr > th:nth-child(2),
.table-wrap table.compare > tbody > tr > td:nth-child(2),
.table-wrap table.compare > tbody > tr:last-child > td:nth-child(2) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* le trait du haut était plus large et plus clair que celui du bas :
   les deux extrémités de la colonne sont maintenant identiques */
.table-wrap table.compare > thead > tr > th:nth-child(2) {
  border-top: 0;
  box-shadow: inset  0 2px 0 0 rgba(33,181,240,.45),
              inset  1px 0 0 rgba(33,181,240,.30),
              inset -1px 0 0 rgba(33,181,240,.30);
}
.table-wrap table.compare > tbody > tr > td:nth-child(2) {
  box-shadow: inset  1px 0 0 rgba(33,181,240,.30),
              inset -1px 0 0 rgba(33,181,240,.30);
}
.table-wrap table.compare > tbody > tr:last-child > td:nth-child(2) {
  box-shadow: inset  1px 0 0 rgba(33,181,240,.30),
              inset -1px 0 0 rgba(33,181,240,.30),
              inset  0 -2px 0 0 rgba(33,181,240,.45);
}
@media (max-width: 760px) {
  /* en cartes empilées, les filets de colonne n'ont plus de sens */
  .table-wrap table.compare > thead > tr > th:nth-child(2),
  .table-wrap table.compare > tbody > tr > td:nth-child(2),
  .table-wrap table.compare > tbody > tr:last-child > td:nth-child(2) {
    box-shadow: none;
  }
}

/* ---------- 74. Les logos partenaires réservent leur place ----------
   C'est la même cause qu'au lot 11 pour le bandeau clients, restée en
   place ici : une case de `.plt-item` n'avait aucune largeur propre.
   Tant que l'image n'était pas chargée — et elles le sont en différé —
   la case mesurait presque rien ; à l'arrivée du logo, toute la piste
   se réorganisait. Sur une piste qui défile, ça se voit comme un saut.

   Chaque case prend maintenant, dès le départ, la largeur maximale que
   son logo pourra occuper. Le chargement ne change plus rien à la mise
   en page — et la piste mesure sa vraie longueur du premier coup, donc
   la vitesse est juste dès la première seconde. */
.plt-item             { min-width: 210px; }
.plt-item.is-large    { min-width: 250px; }
.plt-item.is-compact  { min-width: 150px; }

/* les cases étant maintenant larges, l'écart entre elles peut respirer
   moins fort sans que ça se serre */
.plt-track            { gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.plt-marquee--tech .plt-track { gap: clamp(1rem, 2vw, 2rem); }

@media (max-width: 760px) {
  .plt-item            { min-width: 190px; }
  .plt-item.is-large   { min-width: 220px; }
  .plt-item.is-compact { min-width: 140px; }
  .plt-track           { gap: 1.5rem; }
}
@media (max-width: 640px) {
  .plt-item            { min-width: 175px; }
  .plt-item.is-large   { min-width: 205px; }
  .plt-item.is-compact { min-width: 132px; }
}
/* en mode « animations réduites » la piste passe en grille repliée :
   une largeur plancher n'aurait plus de sens */
@media (prefers-reduced-motion: reduce) {
  .plt-item, .plt-item.is-large, .plt-item.is-compact { min-width: 0; }
}