@import url("tokens.css?v=2"); /* Bumper ce numéro à chaque modification de tokens.css : @import n'est pas versionné par filemtime comme site.css. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); background: var(--gray-0); color: var(--gray-900); overflow-x: hidden; }
p, h1, h2, h3 { margin: 0; }
a { color: var(--terracotta-600); text-decoration: none; }
a:hover { color: var(--terracotta-700); }
img { max-width: 100%; }

.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--terracotta-500); color: var(--gray-0); padding: 16px 30px; border-radius: 999px; font-weight: 700; font-size: 16px; border: none; white-space: nowrap; cursor: pointer; }
.btn-primary:hover { background: var(--terracotta-600); color: var(--gray-0); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--gray-0); padding: 16px 28px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 2px solid var(--gray-0); white-space: nowrap; }
.btn-ghost:hover { background: var(--gray-0); color: var(--gray-950); }
.btn-dark { display: inline-flex; align-items: center; gap: 8px; background: var(--gray-950); color: var(--gray-0); padding: 16px 30px; border-radius: 999px; font-weight: 700; font-size: 16px; border: none; white-space: nowrap; cursor: pointer; }
.btn-outline-dark { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--gray-950); padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 15.5px; border: 2px solid var(--gray-950); white-space: nowrap; }

.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta-600); }
.section { padding: 96px 64px; scroll-margin-top: 100px; }
.section-inner { max-width: 1220px; margin: 0 auto; }

.benefit-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.benefit-list li { padding-left: 26px; position: relative; font-size: 15px; line-height: 1.55; color: var(--gray-700); }
.benefit-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta-500); }

.tool-pill { padding: 10px 16px; border-radius: 999px; background: var(--gray-50); border: 1px solid var(--gray-200); font-size: 14px; font-weight: 600; color: var(--gray-700); }

/* background direct + box-decoration-break: chaque fragment de ligne (si le texte surligné passe
   à la ligne) reçoit son propre fond/coins arrondis, au lieu d'un ::before absolu qui ne suivait
   que le premier fragment. */
.hl { background: var(--hl-bg, #fff); color: var(--gray-950); padding: 0.02em 0.16em 0.05em 0.08em; border-radius: 0.22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.green { color: var(--sage-600); }

/* Nav */
.site-header { position: sticky; top: 0; z-index: 55; }
.site-nav {
  position: relative; z-index: 2; background: rgba(10,10,8,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sage-400);
  transition: transform 0.3s ease, margin-bottom 0.3s ease, visibility 0s linear 0s;
}
.site-nav-inner { max-width: 1220px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: flex-start; }
.nav-logo { height: 44px; width: auto; }
.nav-links { display: flex; gap: 32px; align-items: center; margin-left: auto; margin-right: 32px; }
.nav-link { color: var(--gray-200); font-weight: 600; font-size: 15px; }
.nav-link:hover { color: var(--gray-0); }
.nav-cta { background: var(--gray-0); color: var(--gray-950); padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.nav-cta:hover { color: var(--terracotta-600); }
.nav-burger { display: none; }

/* Sur les pages solution, le menu Tricera (haut) devient l'élément secondaire, en plus petit
   (proche de la proposition 4 de Samuel) ; le sous-menu de la solution (bas) porte l'identité
   de la page et reste le plus visible des deux. */
.site-header.has-subnav .site-nav-inner { padding: 7px 32px; }
.site-header.has-subnav .nav-logo { height: 17px; }
.site-header.has-subnav .nav-link { font-size: 12px; }
.site-header.has-subnav .nav-cta { padding: 7px 14px; font-size: 11.5px; }
.site-header.has-subnav .nav-lang-btn { font-size: 11px; padding: 6px 4px; }
.site-header.has-subnav .nav-lang-btn svg { width: 15px; height: 15px; }

/* Sous-menu de solution : logo de la solution (lien vers l'accueil Tricera), liens propres à la page, CTA. */
.site-subnav { position: relative; z-index: 1; background: var(--gray-0); border-bottom: 1px solid var(--gray-200); }
.site-subnav .site-nav-inner { padding: 16px 32px; gap: 28px; }
.subnav-brand { display: flex; align-items: center; flex: 0 0 auto; }
.subnav-brand a { display: flex; align-items: center; }
.subnav-solution-logo { height: 42px; width: auto; }
.subnav-links { display: flex; align-items: center; gap: 22px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a { color: var(--gray-700); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.subnav-links a:hover { color: var(--gray-950); }
.subnav-cta.btn-primary { flex: 0 0 auto; padding: 9px 18px; font-size: 13.5px; margin-left: auto; }

/* Couleur de chaque solution : très léger fond teinté sur son sous-menu, liseré entre les deux bandeaux. */
.site-header.subnav-gold { --solution-color: var(--gold-500); }
.site-header.subnav-sage { --solution-color: var(--sage-600); }
.site-header.subnav-terracotta { --solution-color: var(--terracotta-500); }
.site-header.subnav-forest { --solution-color: var(--forest-600); }
.site-header[class*="subnav-"] .site-subnav { background: color-mix(in srgb, var(--solution-color) 5%, var(--gray-0)); }

/* Sur les pages solution, le menu principal Tricera se replie au défilement vers le bas
   et réapparaît vers le haut ; le sous-menu de la solution, lui, reste toujours visible. */
.site-header.hide-nav .site-nav {
  transform: translateY(-100%); margin-bottom: calc(-1 * var(--nav-h, 84px));
  pointer-events: none; visibility: hidden; transition: transform 0.3s ease, margin-bottom 0.3s ease, visibility 0s linear 0.3s;
}
.site-header.hide-nav .site-subnav { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.nav-dropdown { position: relative; }
.nav-dropdown-panel {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12); padding: 10px; margin-top: 14px;
  flex-direction: column; gap: 2px; min-width: 200px; z-index: 60;
}
.nav-dropdown-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown:hover .nav-dropdown-panel { display: flex; }
.nav-dropdown-panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--gray-800); font-weight: 600; font-size: 14.5px; }
.nav-dropdown-panel a:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-dropdown-panel img { height: 15px; width: auto; }

/* Menu « Nos solutions » : matrice 2x2 des offres (logo, flèche, phrase de concept). Le panneau se cale sur
   la barre (.site-nav) et non sur le lien, d'où le lien étiré en hauteur (marges négatives) pour qu'aucun
   vide ne coupe le survol entre le lien et le panneau. */
.nav-mega { position: static; }
.nav-mega > .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 40px 0; margin: -40px 0; }
.nav-mega-chev { transition: transform 0.2s ease; }
.nav-mega:hover > .nav-link, .nav-mega:focus-within > .nav-link { color: var(--gray-0); }
.nav-mega:hover .nav-mega-chev, .nav-mega:focus-within .nav-mega-chev, .nav-mega.is-open .nav-mega-chev { transform: rotate(180deg); }
/* Le panneau reste dans le flux (visibility) pour que sa disparition soit retardée de 0,25 s : on peut descendre la souris
   lentement du lien vers les cartes sans le voir se refermer. */
.nav-mega .nav-mega-panel { display: flex; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease 0.25s, visibility 0s linear 0.4s; }
.nav-mega:hover .nav-mega-panel, .nav-mega:focus-within .nav-mega-panel { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.nav-mega-panel { width: min(1060px, calc(100vw - 48px)); padding: 12px; margin-top: 10px; background: var(--gray-900); border: 1px solid var(--gray-800); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.nav-mega-panel::before { top: -24px; height: 24px; }
.nav-mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.nav-mega-panel a.nav-mega-card { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 24px 26px; border-radius: 16px; background: var(--gray-0); color: var(--gray-800); font-weight: 400; transition: background 0.15s ease; }
.nav-mega-panel a.nav-mega-card:hover { background: color-mix(in srgb, var(--c) 13%, var(--gray-0)); color: var(--gray-900); }
.nmc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-mega-panel .nmc-head img { height: 34px; width: auto; }
.nmc-arrow { flex: 0 0 auto; color: var(--gray-900); transition: transform 0.15s ease; }
.nav-mega-card:hover .nmc-arrow { transform: translateX(4px); }
.nmc-desc { font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--gray-700); }

/* Hero */
.hero-photo { position: relative; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.hero-photo img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo .hero-fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,8,0.88) 0%, rgba(10,10,8,0.4) 55%, rgba(10,10,8,0.1) 100%); }
.hero-photo .hero-darken { position: absolute; top: 0; left: 0; width: 420px; height: 260px; background: radial-gradient(ellipse at top left, rgba(10,10,8,0.85) 0%, rgba(10,10,8,0) 75%); }
.hero-photo .hero-content { position: relative; padding: 110px 32px 64px; width: 100%; }
.hero-logo { height: 52px; margin-bottom: 20px; filter: drop-shadow(0 0 26px rgba(255,255,255,0.65)) drop-shadow(0 0 64px rgba(255,255,255,0.4)); }

/* Découvrez aussi */
.other-offer-card { display: flex; flex-direction: column; gap: 14px; background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 20px; padding: 32px; transition: border-color 0.15s, box-shadow 0.15s; }
.other-offer-card:hover { border-color: var(--gray-400); box-shadow: 0 10px 28px rgba(0,0,0,0.07); }
.ooc-head { display: flex; align-items: center; gap: 10px; }
.ooc-head img { height: 32px; width: auto; }
.ooc-desc { font-size: 15px; color: var(--gray-600); line-height: 1.6; }
.ooc-link { margin-top: auto; padding-top: 4px; font-weight: 700; font-size: 14.5px; color: var(--terracotta-600); }

/* Contact form */
.cf-input, .cf-select { padding: 14px 16px; border-radius: 12px; border: none; font-size: 14.5px; font-family: var(--font-sans); width: 100%; background: var(--gray-0); }
.cf-input::placeholder { color: var(--gray-500); }
.cf-note { font-size: 13.5px; margin-top: 14px; padding: 12px 16px; border-radius: 10px; }
.cf-note.ok { background: var(--sage-300); color: var(--gray-950); }
.cf-note.err { background: var(--terracotta-100); color: var(--terracotta-700); }

/* Footer */
.site-footer { position: relative; background: var(--gray-950); color: var(--gray-0); padding: 64px 64px 32px; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1220px, calc(100% - 128px)); border-top: 1px solid var(--gray-800); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid a { color: var(--gray-300); font-size: 14.5px; }
.footer-col-title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); }
.footer-links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.footer-links a:hover { color: var(--gray-0); }
.footer-grid a.footer-cta { align-self: flex-start; padding: 10px 22px; font-size: 14px; color: var(--gray-0); }
.footer-grid a.footer-cta:hover { color: var(--gray-0); }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-grid .footer-social a { width: 40px; height: 40px; border: 1px solid var(--gray-700); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gray-300); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.footer-grid .footer-social a:hover { color: var(--gray-0); border-color: var(--sage-400); background: rgba(255,255,255,0.06); }
.footer-bottom { max-width: 1220px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--gray-800); }
.footer-bottom p { font-size: 13px; color: var(--gray-500); }

@media (max-width: 760px) {
  .section { padding: 56px 22px; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2,1fr) !important; }
  h1.hero-h1 { font-size: 38px !important; }
  .cta-row { flex-direction: column !important; align-items: stretch !important; }
  .cta-row > * { justify-content: center !important; }
  .nav-links { display: none !important; }
  .nav-cta { margin-left: auto; }
  .nav-burger {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 30px; height: 30px; padding: 0; margin-left: 12px; border: none; background: transparent; cursor: pointer; flex: 0 0 auto;
  }
  .nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--gray-0); transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links.mobile-open {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 10px 20px 18px;
    background: var(--gray-950); border-bottom: 1px solid var(--gray-800); box-shadow: 0 14px 30px rgba(0,0,0,0.25); z-index: 70;
    max-height: calc(100vh - 64px); max-height: calc(100svh - var(--hdr-h, 64px) - 8px); overflow-y: auto;   /* svh : hauteur réellement visible sur mobile (barres du navigateur comprises) */
  }
  .nav-links.mobile-open .nav-link { padding: 14px 0; border-bottom: 1px solid var(--gray-800); font-size: 17px; color: var(--gray-0); }
  .nav-links.mobile-open .nav-dropdown-panel {
    display: flex !important; position: static; transform: none; box-shadow: none; border: none; margin: 8px 0 6px; padding: 4px 14px; min-width: 0;
    background: var(--gray-0); border-radius: 12px;
  }
  .nav-links.mobile-open .nav-dropdown-panel::before { display: none; }
  .nav-links.mobile-open .nav-dropdown-panel a { padding: 9px 0; font-size: 14.5px; }
  .nav-links.mobile-open .nav-mega > .nav-link { display: flex; justify-content: space-between; margin: 0; }
  .nav-links.mobile-open .nav-mega .nav-mega-panel { display: none !important; width: auto; background: transparent; border-radius: 0; padding: 0; margin: 10px 0 8px; }
  .nav-links.mobile-open .nav-mega.is-open .nav-mega-panel { display: block !important; }
  .nav-mega-grid { grid-template-columns: 1fr; gap: 10px; }
  .nav-links.mobile-open .nav-mega-panel a.nav-mega-card { padding: 20px 22px; }
  .site-header.has-subnav .site-nav-inner { padding: 6px 20px; }
  .site-header.has-subnav .nav-logo { height: 14px; }
  .site-header.has-subnav .nav-cta { padding: 8px 16px; font-size: 12.5px; }
  .site-subnav .site-nav-inner { padding: 12px 20px; gap: 14px; }
  .subnav-solution-logo { height: 32px; }
  .subnav-links { gap: 16px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 85%, transparent 100%); padding-right: 6px; }
  .subnav-links a { font-size: 13.5px; }
  .subnav-cta.btn-primary { padding: 8px 14px; font-size: 12.5px; }
  .segment-row { grid-template-columns: 1fr !important; }
  .segment-row.reverse > *:first-child { order: 2 !important; }
  .other-offers-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cf-row { flex-direction: column !important; }
}

/* ---- Édition inline & annotations (admin uniquement) ---- */
.ed-block { outline-offset: 2px; display: block; }
.ed-block ul, .ed-block ol { margin: 0.4em 0; padding-left: 1.4em; }
.ed-block ul.usage-list, .ed-block ol.usage-list { margin: 10px 0 0; padding-left: 0; }
body.ed-editmode .ed-block { cursor: text; outline: 1px dashed transparent; }
body.ed-editmode .ed-block:hover { outline-color: var(--terracotta-400); }
body.ed-editmode .ed-block:focus { outline: 2px solid var(--terracotta-500); border-radius: 4px; }
.ed-img-wrap { position: relative; display: block; overflow: hidden; }
body.ed-editmode .ed-img-btn { display: inline-flex; }
.ed-img-btn { display: none; position: absolute; top: 12px; right: 12px; z-index: 30; background: var(--gray-950); color: var(--gray-0); border: none; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
body.ed-editmode .ed-img-pos { display: grid; }
.ed-img-pos { display: none; position: absolute; left: 12px; bottom: 12px; z-index: 30; background: rgba(0,0,0,0.55); border-radius: 12px; padding: 6px; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(4, 28px); gap: 3px; }
.ed-img-pos-btn { border: none; border-radius: 7px; background: rgba(255,255,255,0.15); color: var(--gray-0); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ed-img-pos-btn:hover { background: rgba(255,255,255,0.32); }
.ed-img-pos-spacer { visibility: hidden; }
.ed-img-pos-btn.is-on { background: var(--terracotta-500); }
.ed-video-wrap { position: relative; display: block; width: 100%; height: 100%; }
body.ed-editmode .ed-video-btn { display: inline-flex; }
.ed-video-btn { display: none; position: absolute; top: 12px; right: 12px; z-index: 30; background: var(--gray-950); color: var(--gray-0); border: none; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; }


body.ed-notemode { cursor: crosshair; }
.ed-note-pin { position: absolute; z-index: 900; width: 26px; height: 26px; border-radius: 50%; background: var(--terracotta-500); color: var(--gray-0); font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.ed-note-pin.done { background: var(--sage-500); }
.ed-note-popover { position: absolute; z-index: 950; background: var(--gray-0); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.25); padding: 14px; width: 320px; max-width: calc(100vw - 16px); box-sizing: border-box; font-family: var(--font-sans); }
.ed-note-popover textarea { width: 100%; border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px; font-family: var(--font-sans); font-size: 13.5px; resize: vertical; }
.ed-note-popover .ed-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.ed-note-popover button { border: none; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ed-note-popover button.save { background: var(--terracotta-500); color: var(--gray-0); }
.ed-note-popover button.cancel { background: var(--gray-100); color: var(--gray-700); }


.ed-format { position: absolute; z-index: 1100; max-width: 620px; background: var(--gray-950); color: var(--gray-0); border-radius: 12px; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; box-shadow: 0 12px 32px rgba(0,0,0,0.35); font-family: var(--font-sans); }
.ed-format[hidden] { display: none; }
.ed-format button, .ed-format select, .ed-format input[type="color"] { height: 30px; min-width: 30px; border: none; border-radius: 6px; background: var(--gray-800); color: var(--gray-0); font-size: 13px; font-weight: 700; cursor: pointer; padding: 0 8px; }
.ed-format button:hover, .ed-format select:hover { background: var(--gray-700); }
.ed-format input[type="color"] { padding: 2px; width: 34px; }
.ed-format .ed-sw { min-width: 20px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--gray-600); }
.ed-format .ed-hl-sw { min-width: 22px; width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 2px solid var(--gray-700); }
.ed-format .ed-hl-sw:hover { border-color: var(--gray-400); }
.ed-format .ed-sep { width: 1px; height: 20px; background: var(--gray-700); margin: 0 3px; }

@keyframes ed-pulse { 50% { opacity: 0.45; } }
.ed-banner { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 1001; background: var(--sage-500); color: var(--gray-950); border-radius: 999px; padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 700; box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.ed-banner[hidden] { display: none; }
.ed-banner button { border: none; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: 13.5px; }
.ed-banner .ed-banner-reload { background: var(--gray-950); color: var(--gray-0); padding: 9px 16px; }
.ed-banner .ed-banner-close { background: transparent; color: var(--gray-950); font-size: 20px; width: 32px; height: 32px; padding: 0; }

/* Solutions : grille 2x2 sur grand écran */
.solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.solution-card { display: flex; flex-direction: column; gap: 18px; background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 20px; padding: 32px; scroll-margin-top: 100px; }
.solution-card .sc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.solution-card .sc-num { font-size: 15px; font-weight: 800; color: var(--gray-400); }
.solution-card .sc-desc { font-size: 15.5px; color: var(--gray-600); line-height: 1.6; }
.solution-card .sc-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
@media (max-width: 1000px) { .solutions-grid { grid-template-columns: 1fr; } }

/* Ils nous font confiance */
.logo-group-title { text-align: center; font-size: 22px; font-weight: 800; margin-top: 40px; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 24px auto 0; max-width: 720px; }
.logo-card { width: 158px; height: 88px; background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 14px; padding: 14px 20px; display: flex; align-items: center; justify-content: center; }
.logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 760px) { .logo-card { width: calc(50% - 8px); } }

/* Cartes solutions entièrement cliquables (lien étiré) */
.solution-card { position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.solution-card:hover { border-color: var(--gray-400); box-shadow: 0 10px 28px rgba(0,0,0,0.07); }
.solution-card .sc-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
body.ed-editmode .solution-card .sc-link::after, body.ed-notemode .solution-card .sc-link::after { display: none; }

/* Pages solution : sous-titres répétés dans un bloc "Événements..." (type/clients/bénéfices) */
.usage-label { margin-top: 26px; }
h3 + .usage-label { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gray-200); }
.usage-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
[style*="text-align: center"] .usage-list { display: inline-flex; margin-left: auto; margin-right: auto; }
.usage-list li { padding-left: 26px; position: relative; font-size: 15.5px; line-height: 1.6; color: var(--gray-600); }
@media (min-width: 761px) { .segment-row.reverse-lg > *:first-child { order: 2; } }
.usage-list li > ul.usage-list, .ed-block .usage-list li > ul.usage-list, .wdg-text .ed-block .usage-list li > ul.usage-list { margin: 8px 0 0 -11px; }
.usage-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta-500); }

/* Réalisations : accordéon natif <details>/<summary> (pages solution) */
.real-accordion { margin-top: 32px; border-top: 1px solid var(--gray-800); }
.real-item { border-bottom: 1px solid var(--gray-800); }
.real-item summary { display: flex; align-items: center; gap: 14px; padding: 20px 4px; cursor: pointer; list-style: none; }
.real-item summary::-webkit-details-marker { display: none; }
.real-client-logo { flex: 0 0 auto; height: 30px; width: 44px; object-fit: contain; }
.real-summary-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (min-width: 900px) {
  .real-accordion { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .real-item { border-top: 1px solid var(--gray-800); margin-top: -1px; }
}
.real-summary-text { display: flex; flex-direction: column; gap: 4px; }
.real-title { font-size: 17px; font-weight: 700; }
.real-sub { font-size: 14px; color: var(--gray-400); }
.real-chevron { flex: 0 0 auto; font-size: 20px; color: var(--gray-400); transition: transform 0.2s ease; }
.real-item[open] .real-chevron { transform: rotate(45deg); }
.real-body { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 4px 4px 24px; align-items: center; }
.real-body-media { border-radius: 14px; overflow: hidden; height: 150px; }
@media (max-width: 640px) { .real-body { grid-template-columns: 1fr; } .real-body-media { height: 200px; } }

/* "Comment ça marche" : étapes 01-04 + vidéo de démo. Sur grand écran, 3 colonnes
   (1: étapes 01/03, 2: étapes 02/04, 3: vidéo) ; en dessous, tout s'empile dans l'ordre naturel. */
.how-step { margin-top: 28px; }
.how-step-1 { margin-top: 0; }
.how-video { margin-top: 48px; }
@media (min-width: 900px) {
  /* La vidéo (très haute, format téléphone) est sortie de la grille de texte : si elle partageait
     les mêmes pistes de lignes que les étapes (via grid-row: span 2), sa hauteur forçait ces lignes
     à s'étirer et créait un grand vide sous chaque étape. Elle vit donc dans sa propre colonne,
     à côté d'une sous-grille 2x2 dédiée aux 4 étapes. */
  .how-grid { display: grid; grid-template-columns: 2fr 1fr; align-items: start; gap: 0 32px; }
  .how-steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .how-step { margin-top: 0; }
  .how-video { margin-top: 0; }
}

/* Vidéo de démo en boucle (pages solution) */
.demo-video-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.demo-video-frame { width: 100%; max-width: 260px; aspect-ratio: 9 / 19.5; border-radius: 38px; overflow: hidden; box-shadow: 0 20px 44px rgba(0,0,0,0.2); background: var(--gray-950); border: 6px solid var(--gray-950); position: relative; }
.demo-video-frame::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30%; height: 16px; background: #000; border-radius: 12px; z-index: 25; }
.demo-video-overlay-link { position: absolute; left: 12px; bottom: 12px; z-index: 20; background: rgba(0,0,0,0.55); color: var(--gray-0); font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 999px; text-decoration: none; }
.demo-video { width: 100%; height: 100%; object-fit: cover; }
.demo-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-video-caption { color: var(--gray-800); font-size: 19px; font-weight: 600; max-width: 40ch; margin: 0; }
.demo-video-btn { margin: 0; }

/* Logos : niveaux de gris, couleur au survol / clic */
.logo-card img { filter: grayscale(1); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; }
.logo-card:hover img, .logo-card:focus img, .logo-card:active img, .logo-card:focus-within img { filter: none; opacity: 1; }
a.logo-card { cursor: pointer; }

/* Logo + macaron "Lauréat" (distinction) : même traitement niveaux de gris/survol que .logo-card,
   et même technique de macaron "sticker" en étoile que .price-card-offer (TriceraClub). */
.award-badge-wrap { position: relative; display: inline-block; margin-top: 10px; }
.award-logo { height: 210px; width: auto; display: block; border-radius: 6px; filter: grayscale(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.award-badge-wrap:hover .award-logo, .award-badge-wrap:focus-within .award-logo { filter: none; opacity: 1; }
.award-macaron { position: absolute; top: -18px; right: -56px; z-index: 3; width: 128px; height: 128px; box-sizing: border-box; padding: 24px 18px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gray-0); font-size: 10.5px; font-weight: 800; line-height: 1.22; text-shadow: 0 1px 2px rgba(0,0,0,0.3); transform: rotate(16deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28)); animation: award-macaron-wiggle 2.6s ease-in-out infinite alternate; pointer-events: none; }
.award-macaron::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--terracotta-600), var(--terracotta-500) 55%, var(--gold-500)); clip-path: polygon(50.0% 0.0%, 55.8% 9.4%, 64.1% 2.0%, 67.0% 12.7%, 77.0% 7.9%, 76.8% 19.0%, 87.8% 17.3%, 84.5% 27.8%, 95.5% 29.2%, 89.3% 38.4%, 99.5% 42.9%, 91.0% 50.0%, 99.5% 57.1%, 89.3% 61.6%, 95.5% 70.8%, 84.5% 72.2%, 87.8% 82.7%, 76.8% 81.0%, 77.0% 92.1%, 67.0% 87.3%, 64.1% 98.0%, 55.8% 90.6%, 50.0% 100.0%, 44.2% 90.6%, 35.9% 98.0%, 33.0% 87.3%, 23.0% 92.1%, 23.2% 81.0%, 12.2% 82.7%, 15.5% 72.2%, 4.5% 70.8%, 10.7% 61.6%, 0.5% 57.1%, 9.0% 50.0%, 0.5% 42.9%, 10.7% 38.4%, 4.5% 29.2%, 15.5% 27.8%, 12.2% 17.3%, 23.2% 19.0%, 23.0% 7.9%, 33.0% 12.7%, 35.9% 2.0%, 44.2% 9.4%); }
@keyframes award-macaron-wiggle { from { transform: rotate(13deg) scale(1); } to { transform: rotate(19deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .award-macaron { animation: none; } }
@media (max-width: 760px) { .award-logo { height: 130px; } .award-macaron { width: 96px; height: 96px; font-size: 8.5px; top: -12px; right: -36px; padding: 16px 12px; } }

.client-card { background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 20px; padding: 32px; }
.client-card .cc-text { font-size: 15.5px; color: var(--gray-600); line-height: 1.65; margin-top: 14px; }
.client-card { display: flex; flex-direction: column; }
.client-card .cc-head { display: flex; align-items: center; gap: 16px; }
.client-card .cc-head > h3 { flex: 1; min-width: 0; margin: 0; }
.client-card .cc-picto { flex: 0 0 44px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--terracotta-500); }
.client-card .cc-icon { height: 40px; width: auto; max-width: 44px; }
.client-card .cc-icon-outline { height: 30px; }
.client-card .cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
.client-card .cc-btn { padding: 6px 12px; font-size: 11.5px; border-width: 1.5px; }
.client-card .cc-btn:hover { background: var(--gray-950); color: var(--gray-0); }
@media (min-width: 900px) { .client-card .cc-actions { flex-wrap: nowrap; } }
.grid-2 > :only-child { grid-column: 1 / -1; max-width: 760px; margin: 0 auto; }

/* Modèles de titres et de textes (menu « Style » du mode édition) */
.st-title-xl { font-size: clamp(38px, 6vw, 68px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.st-title-section { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; }
.st-title-card { font-size: 22px; line-height: 1.25; font-weight: 800; }
.st-title-sub { font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--terracotta-600); }
.st-eyebrow { font-size: 12.5px; line-height: 1.4; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta-600); }
.st-text { font-size: 16px; line-height: 1.65; font-weight: 400; }
.st-text-small { font-size: 14.5px; line-height: 1.6; font-weight: 400; }
.st-note { font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--sage-600); }
.st-number { font-size: 46px; line-height: 1.1; font-weight: 900; color: var(--terracotta-500); }
.st-quote { font-size: 24px; line-height: 1.5; font-weight: 600; }
.ed-format .ed-preset { max-width: 190px; }

/* Gestion des blocs (déplacer / dupliquer / supprimer) */
.ed-unitbar { position: absolute; z-index: 1090; display: flex; align-items: center; gap: 3px; background: var(--terracotta-500); color: var(--gray-0); border-radius: 8px; padding: 3px; font-family: var(--font-sans); box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.ed-unitbar[hidden] { display: none; }
.ed-unitbar .ed-unit-label { font-size: 11.5px; font-weight: 800; padding: 0 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.ed-unitbar .ed-unit-btn { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: rgba(255,255,255,0.18); color: var(--gray-0); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.ed-unitbar .ed-unit-btn:hover { background: rgba(255,255,255,0.32); }
.ed-unitbar .ed-unit-btn[hidden] { display: none; }
.ed-unitbar .ed-unit-drag { cursor: grab; }
.ed-unitbar .ed-unit-del:hover { background: var(--gray-950); }
body.ed-editmode .ed-unit-hover { outline: 2px dashed var(--terracotta-500); outline-offset: 3px; }
.ed-dragging { opacity: 0.35; pointer-events: none; }
.ed-drop-before { box-shadow: -6px 0 0 0 var(--terracotta-500); }
.ed-drop-after { box-shadow: 6px 0 0 0 var(--terracotta-500); }
.ed-drop-above { box-shadow: 0 -6px 0 0 var(--terracotta-500); }
.ed-drop-below { box-shadow: 0 6px 0 0 var(--terracotta-500); }
.ed-unitbar::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -14px; height: 14px; }
body.ed-drag-active, body.ed-drag-active * { cursor: grabbing !important; user-select: none; }
.ed-drop-candidate { outline: 2px dashed rgba(200, 69, 31, 0.5); outline-offset: 3px; }
.ed-drag-ghost { position: fixed; z-index: 1200; pointer-events: none; transform: translate(14px, 14px); background: var(--terracotta-500); color: var(--gray-0); padding: 6px 12px; border-radius: 999px; font: 700 12.5px var(--font-sans); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }

/* Liens hypertextes insérés dans les textes */
a.rt-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a.rt-link:hover { opacity: 0.75; }
.ed-format .ed-linkpanel { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 4px 4px; border-top: 1px solid var(--gray-700); margin-top: 2px; }
.ed-format .ed-linkpanel[hidden] { display: none; }
.ed-format .ed-linkpanel input[type="text"] { flex: 1 1 260px; min-width: 200px; height: 30px; border: 1px solid var(--gray-700); border-radius: 6px; background: var(--gray-900); color: var(--gray-0); padding: 0 10px; font-size: 13px; font-family: var(--font-sans); }
.ed-format .ed-linkpanel label { font-size: 11.5px; color: var(--gray-400); flex-basis: 100%; }
.ed-format .ed-linkpanel .ed-link-apply { background: var(--terracotta-500); }
.ed-format .ed-linkpanel .ed-link-apply:hover { background: var(--terracotta-600); }
.ed-format .ed-linkpanel .ed-link-remove { background: transparent; color: #f4a08a; }
.ed-note-popover .ed-note-actions .del { background: transparent; color: #c0392b; margin-right: auto; padding-left: 0; }
.ed-note-popover .ed-note-actions .done { background: var(--gray-100); color: var(--gray-700); }
.ed-note-popover .ed-note-meta { font-size: 11.5px; color: var(--gray-500); margin-bottom: 6px; }

/* Sélecteur de langue */
.nav-lang { margin-left: 14px; }
.nav-lang-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--gray-300); font: 700 13px var(--font-sans); cursor: pointer; padding: 8px 6px; border-radius: 8px; }
.nav-lang-btn:hover { color: var(--gray-0); background: rgba(255,255,255,0.1); }
.nav-lang .nav-dropdown-panel { left: auto; right: 0; transform: none; min-width: 150px; }
.nav-lang:focus-within .nav-dropdown-panel { display: flex; }
.nav-lang .nav-dropdown-panel a.is-current { color: var(--terracotta-600); }

/* Langues : barre d'édition, traductions, messages */
body.ed-editmode [data-tr] { outline: 1px dashed rgba(200,69,31,0.55); outline-offset: 3px; cursor: text; }
body.ed-editmode [data-tr]:focus { outline: 2px solid var(--terracotta-500); background: rgba(255,255,255,0.12); }
body.ed-editmode [data-tr-missing] { outline: 1px dashed #e0a11e; background: rgba(224,161,30,0.12); }
.ed-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 1300; display: flex; align-items: center; gap: 14px; background: var(--gray-950); color: var(--gray-0); padding: 12px 16px; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.35); font: 600 13.5px var(--font-sans); max-width: calc(100vw - 24px); }
.ed-toast button { border: none; border-radius: 999px; padding: 7px 14px; font: 700 12.5px var(--font-sans); cursor: pointer; background: var(--terracotta-500); color: var(--gray-0); white-space: nowrap; }
.ed-toast .ed-toast-close { background: transparent; color: var(--gray-400); padding: 4px 8px; font-size: 18px; }
.ed-format .ed-trad { background: var(--terracotta-500); }
.ed-format .ed-trad:hover { background: var(--terracotta-600); }
.ed-format .ed-trad:disabled { opacity: 0.6; cursor: wait; }

/* Macaron sur la carte TriceraClub */
.solution-card .sc-badge { position: absolute; top: -15px; right: 28px; z-index: 3; background: var(--sage-600); color: var(--gray-0); font-size: 13px; font-weight: 800; letter-spacing: 0.01em; padding: 8px 16px; border-radius: 22px; transform: rotate(2deg); box-shadow: 0 6px 16px rgba(0,0,0,0.18); max-width: calc(100% - 56px); }

/* Bandeaux de logos défilants (voir assets/js/site.js) */
.logo-row[data-marquee] { max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); padding: 4px 0; }
.logo-row[data-marquee]::-webkit-scrollbar { display: none; }
.logo-row[data-marquee] .logo-card { flex: 0 0 auto; width: 158px; }
.logo-row[data-marquee] img { -webkit-user-drag: none; user-select: none; }
.logo-row[data-marquee].is-dragging { cursor: grabbing; user-select: none; }
body.ed-editmode .logo-row[data-marquee] { max-width: 720px; flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; cursor: default; }

/* Grille tarifaire TriceraClub */
.price-card { position: relative; background: var(--gray-0); color: var(--gray-950); border: 1px solid var(--gray-200); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.price-card.featured { border: 2px solid var(--gold-500); box-shadow: 0 12px 32px rgba(212,160,23,0.16); }
.price-card-name { font-size: 19px; font-weight: 800; }
.price-card-price { font-size: 26px; font-weight: 900; margin-top: 2px; }
.price-card.tier-basic .price-card-price { color: var(--gray-950); }
.price-card.tier-max .price-card-price { color: var(--sage-600); }
.price-card.tier-premium .price-card-price { color: var(--gold-500); }
.price-card-price-note { font-size: 12px; color: var(--gray-500); font-weight: 600; margin-top: -2px; }
.price-card-offer { position: absolute; top: -36px; right: -26px; z-index: 3; width: 136px; height: 136px; box-sizing: border-box; padding: 26px 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gray-0); font-size: 10.5px; font-weight: 800; line-height: 1.22; text-shadow: 0 1px 2px rgba(0,0,0,0.3); transform: rotate(9deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.28)); animation: offerWiggle 2.6s ease-in-out infinite alternate; pointer-events: none; }
.price-card-offer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--terracotta-600), var(--terracotta-500) 55%, var(--gold-500)); clip-path: polygon(50.0% 0.0%, 55.8% 9.4%, 64.1% 2.0%, 67.0% 12.7%, 77.0% 7.9%, 76.8% 19.0%, 87.8% 17.3%, 84.5% 27.8%, 95.5% 29.2%, 89.3% 38.4%, 99.5% 42.9%, 91.0% 50.0%, 99.5% 57.1%, 89.3% 61.6%, 95.5% 70.8%, 84.5% 72.2%, 87.8% 82.7%, 76.8% 81.0%, 77.0% 92.1%, 67.0% 87.3%, 64.1% 98.0%, 55.8% 90.6%, 50.0% 100.0%, 44.2% 90.6%, 35.9% 98.0%, 33.0% 87.3%, 23.0% 92.1%, 23.2% 81.0%, 12.2% 82.7%, 15.5% 72.2%, 4.5% 70.8%, 10.7% 61.6%, 0.5% 57.1%, 9.0% 50.0%, 0.5% 42.9%, 10.7% 38.4%, 4.5% 29.2%, 15.5% 27.8%, 12.2% 17.3%, 23.2% 19.0%, 23.0% 7.9%, 33.0% 12.7%, 35.9% 2.0%, 44.2% 9.4%); }
.price-card-offer .ed-block { pointer-events: auto; }
@keyframes offerWiggle { from { transform: rotate(6deg) scale(1); } to { transform: rotate(12deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .price-card-offer { animation: none; } }
.price-card-sub { font-size: 14px; color: var(--gray-600); line-height: 1.55; margin-top: 10px; min-height: 44px; }
.price-card-included { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px; padding: 6px 12px; margin-top: 14px; align-self: flex-start; }
.price-card-label { font-size: 12px; font-weight: 800; color: var(--gray-500); letter-spacing: 0.04em; margin-top: 18px; }
.price-card ul.usage-list { margin-top: 8px; }
.price-card-widgets { font-size: 13.5px; color: var(--gray-600); line-height: 1.7; margin-top: 8px; }
.price-card-highlight { background: rgba(212,160,23,0.08); border: 1px solid var(--gold-500); border-radius: 14px; padding: 14px 16px; margin-top: 14px; }
.price-card-highlight-label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--gold-500); }
.price-card-highlight-label img { height: 21px; width: auto; }
.price-card { min-width: 0; }
.price-card-btn { display: inline-flex; justify-content: center; margin-top: 20px; text-align: center; white-space: normal; padding: 14px 20px; line-height: 1.3; }
.price-card .btn-ghost.price-card-btn { color: var(--gray-950); border-color: var(--gray-300); }
.price-card .btn-ghost.price-card-btn:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }

/* Bloc "Tester la page club" (mockup téléphone) */
.club-demo-frame-wrap { display: none; }
@media (min-width: 900px) { .club-demo-frame-wrap { display: flex; flex-direction: column; align-items: center; } }
.club-demo-frame { width: 100%; max-width: 300px; aspect-ratio: 9 / 18.5; border-radius: 34px; overflow: hidden; box-shadow: 0 20px 44px rgba(0,0,0,0.18); border: 6px solid var(--gray-950); background: var(--gray-950); position: relative; }
.club-demo-frame::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 32%; height: 16px; background: #000; border-radius: 12px; z-index: 25; }
.club-demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Formulaire de création de club encapsulé */
.club-create-frame { margin-top: 28px; border-radius: 20px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: 0 12px 32px rgba(0,0,0,0.08); height: 720px; background: var(--gray-50); }
.club-create-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .club-create-frame { height: 580px; } }

/* Carrousel de widgets et carrousel de sponsors (réutilisent le mécanisme marquee) */
/* Présentation des widgets TriceraClub : bandeau de macarons en boucle + fenêtre détaillée */
.wdg { margin-top: 36px; }
.wdg-strip { overflow: hidden; padding: 4px 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.wdg-track { display: flex; gap: 10px; width: max-content; will-change: transform; }
.wdg-tab { flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; border-radius: 999px; transition: transform 0.15s; }
.wdg-tab:hover { transform: translateY(-2px); }
.wdg-tab img { height: 21px; width: auto; display: block; -webkit-user-drag: none; user-select: none; }
.wdg-stage { display: flex; align-items: stretch; }
.wdg-panels { flex: 0 0 90%; min-width: 0; }
.wdg-panel { display: none; position: relative; grid-template-columns: 320px 1fr; gap: 24px; padding: 14px; background: var(--gray-0); border: 1.5px solid var(--wdg-color); border-radius: 12px; touch-action: pan-y; }
.wdg-panel.is-active { display: grid; animation: wdgIn 0.35s ease; }
.wdg-panel::before { content: ""; position: absolute; top: -8.5px; left: 50%; width: 14px; height: 14px; background: var(--gray-0); border-left: 1.5px solid var(--wdg-color); border-top: 1.5px solid var(--wdg-color); transform: translateX(-50%) rotate(45deg); }
@keyframes wdgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wdg-shot img { height: 450px; width: auto; display: block; border-radius: 8px; }
.wdg-body { display: flex; flex-direction: column; min-width: 0; min-height: 305px; padding: 4px 6px 0 0; }
.wdg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.wdg-macaron { height: 22px; width: auto; display: block; }
.wdg-tier { display: inline-block; border: 1.5px solid var(--wdg-color); border-radius: 999px; padding: 4px 20px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
.wdg-api { display: inline-block; background: var(--wdg-color); color: var(--gray-0); border-radius: 999px; padding: 5px 18px; font-size: 13.5px; font-weight: 600; }
.wdg-text { font-size: 15px; line-height: 1.5; color: var(--gray-700); margin: 0; }
.wdg-text + .wdg-text { margin-top: 8px; }
.wdg-body > .wdg-text:last-of-type { margin-bottom: 16px; }
.wdg-text > * + *, .wdg-text .ed-block > * + * { margin-top: 10px; }
.wdg-text ul.usage-list, .wdg-text .ed-block ul.usage-list { margin: 0; gap: 8px; }
.wdg-text ul.usage-list li { font-size: inherit; color: inherit; }
.wdg-panel .usage-list li::before { background: var(--wdg-color); }
.wdg-btn-row { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.wdg-btn { background: var(--sage-500); color: var(--gray-0); font-weight: 700; font-size: 14.5px; padding: 9px 24px; border-radius: 8px; white-space: nowrap; }
.wdg-btn:hover { background: var(--sage-600); color: var(--gray-0); }
.wdg-btn-ghost { background: transparent; border: 1.5px solid var(--gray-300); color: var(--gray-700); }
.wdg-btn-ghost:hover { background: var(--gray-100); color: var(--gray-950); }
@media (max-width: 480px) { .wdg-btn-row { flex-direction: column; align-items: stretch; } .wdg-btn, .wdg-btn-ghost { text-align: center; } }
.wdg-peek { position: relative; flex: 0 0 5%; min-width: 0; display: flex; align-items: center; justify-content: center; --peek-color: var(--gray-300); }
.wdg-peek::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--peek-color); pointer-events: none; }
.wdg-peek-prev::before { inset: 0 10px 0 0; border-radius: 0 12px 12px 0; -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent); mask-image: linear-gradient(270deg, #000 25%, transparent); }
.wdg-peek-next::before { inset: 0 0 0 10px; border-radius: 12px 0 0 12px; -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent); mask-image: linear-gradient(90deg, #000 25%, transparent); }
.wdg-arrow { position: relative; border: 0; background: none; color: var(--gray-300); cursor: pointer; padding: 2px; line-height: 0; transition: color 0.15s; }
.wdg-arrow:hover { color: var(--gray-600); }
@media (max-width: 760px) {
  .wdg-stage { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .wdg-panels { flex: 0 0 100%; }
  .wdg-panel { width: 100%; grid-template-columns: 1fr; gap: 14px; order: 0; }
  .wdg-shot img { height: auto; width: 100%; max-width: 320px; margin: 0 auto; }
  .wdg-body { min-height: 0; padding: 0 4px 4px; }
  .wdg-peek { flex: 0 0 auto; order: 1; min-width: 0; }
  .wdg-peek::before { display: none; }
  .wdg-arrow { background: var(--gray-100); border-radius: 50%; padding: 12px; color: var(--gray-600); }
}
body.ed-editmode .wdg-strip, body.ed-editmode .wdg-peek { display: none; }
body.ed-editmode .wdg-stage { display: block; }
body.ed-editmode .wdg-panel { display: grid; margin-bottom: 32px; animation: none; }
body.ed-editmode .wdg-panel::before { display: none; }
@media (max-width: 760px) { body.ed-editmode .wdg-panel { display: grid; } }
.logo-row[data-marquee] .sponsor-card { flex: 0 0 auto; width: 280px; }
.sponsor-card-banner { position: relative; height: 120px; border-radius: 16px; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; }
.sponsor-card-banner.tier-gold { background: linear-gradient(135deg, var(--terracotta-500), var(--gold-500)); }
.sponsor-card-banner.tier-silver { background: linear-gradient(135deg, var(--gray-600), var(--gray-400)); }
.sponsor-card-banner.tier-bronze { background: linear-gradient(135deg, var(--sage-600), var(--sage-400)); }
.sponsor-card-tag { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.92); color: var(--gray-950); font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; }
.sponsor-card-logo { background: rgba(255,255,255,0.92); color: var(--gray-950); font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.sponsor-card-cta { position: absolute; bottom: 10px; right: 10px; background: var(--gray-0); color: var(--gray-950); font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }

/* Espacement (marges) autour d'un bloc : panneau de la barre orange */
.ed-spacepanel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1091; width: 232px; background: var(--gray-950); color: var(--gray-0); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); font-size: 12.5px; }
.ed-spacepanel[hidden] { display: none; }
.ed-sp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ed-sp-row > span { flex: 1; font-weight: 700; }
.ed-sp-btn { width: 26px; height: 26px; border: none; border-radius: 6px; background: rgba(255,255,255,0.16); color: var(--gray-0); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.ed-sp-btn:hover { background: rgba(255,255,255,0.3); }
.ed-sp-val { width: 52px; height: 26px; border: none; border-radius: 6px; background: rgba(255,255,255,0.1); color: var(--gray-0); text-align: center; font: inherit; }
.ed-sp-reset { width: 100%; border: 1px solid rgba(255,255,255,0.3); background: none; color: var(--gray-0); border-radius: 6px; padding: 5px; cursor: pointer; font: inherit; }
.ed-sp-reset:hover { background: rgba(255,255,255,0.12); }

/* Image à droite d'un bloc de texte (bouton 🖼 de la barre orange) */
.has-side-img { display: flex; align-items: flex-start; gap: 20px; }
.has-side-img > .side-text { flex: 1 1 0; min-width: 0; }
.has-side-img > .side-img { flex: 0 0 38%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; position: relative; margin-top: 0; }
.has-side-img > .side-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wdg-text .side-text > * + *, .wdg-text .side-text .ed-block > * + * { margin-top: 10px; }
@media (max-width: 760px) { .has-side-img { flex-direction: column; } .has-side-img > .side-img { flex: none; width: 100%; } }
.ed-unitbar .ed-unit-btn.is-on { background: var(--gray-950); }

/* Images agrandissables au clic (option activée image par image en mode édition) */
body:not(.ed-editmode):not(.ed-notemode) img[data-lightbox] { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 3000; background: rgba(10,10,8,0.9); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; cursor: zoom-out; animation: lbIn 0.2s ease; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lb-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: var(--gray-0); font-size: 30px; line-height: 1; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,0.3); }

@media (max-width: 760px) { .price-card-offer { right: -4px; top: -32px; } }

/* Ghost button lisible sur fond clair (le style .btn-ghost de base est blanc-sur-transparent, pensé pour un hero sombre) */
.btn-ghost-dark { color: var(--gray-950); border-color: var(--gray-300); }
.btn-ghost-dark:hover { background: var(--gray-950); color: var(--gray-0); border-color: var(--gray-950); }

/* TriceraClub : Data qualifiée — "Clubs" / "Marques" en 2 colonnes sur grand écran */
.data-cols { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 8px; }
@media (min-width: 900px) { .data-cols { grid-template-columns: 1fr 1fr 1.15fr; gap: 40px; } }
.data-col { min-width: 0; }
.data-col-photo { display: flex; flex-direction: column; }
.data-col-photo .sponsor-photo { margin-top: 12px; flex: 0 0 auto; height: auto; min-height: 0; aspect-ratio: 1.36 / 1; } /* le cadre prend la proportion du visuel (capture du back office) */
.data-col h2 { margin-top: 0 !important; }
.sponsor-photo { margin-top: 32px; border-radius: 16px; overflow: hidden; height: 416px; }
.sponsor-photo-caption { font-size: 13.5px; color: var(--gray-500); margin-top: 10px; font-style: italic; }
.club-demo-caption { font-size: 13.5px; color: var(--gray-500); margin-top: 10px; text-align: center; font-style: italic; }

/* TriceraClub : "Vous êtes une marque" + mosaïque (à droite en large écran, au-dessus en mobile) */
.sponsor-marque { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) { .sponsor-marque { grid-template-columns: 1fr 1fr; gap: 56px; } }
.sponsor-marque-text { order: 2; }
.sponsor-mosaic { order: 1; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 4 / 3; }
@media (min-width: 900px) { .sponsor-marque-text { order: 1; } .sponsor-mosaic { order: 2; } }
.mosaic-a { grid-column: 1; grid-row: 1 / 3; border-radius: 16px; overflow: hidden; }
.mosaic-b { grid-column: 2; grid-row: 1; border-radius: 16px; overflow: hidden; }
.mosaic-c { grid-column: 2; grid-row: 2; border-radius: 16px; overflow: hidden; }

/* TriceraClub : macarons de widgets dans la grille tarifaire (à la place des listes de texte) */
.price-card-macarons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.price-card-macarons img { height: 21px; width: auto; display: block; }
.price-grid-cta { display: block; width: 100%; text-align: center; justify-content: center; padding: 18px; font-size: 17px; }

/* Page légale */
.legal-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.legal-toc a { font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-800); }
.legal-toc a:hover { border-color: var(--gray-400); }
.legal-section { padding-top: 44px; padding-bottom: 12px; }
.legal-section .section-inner { border-top: 1px solid var(--gray-200); padding-top: 36px; }
.legal-body { font-size: 15.5px; line-height: 1.75; color: var(--gray-700); }
.legal-body div { margin-top: 12px; }
.legal-body strong { color: var(--gray-900); }
.legal-body ul { margin-top: 10px; }
.legal-body li { margin-top: 6px; }
.legal-body > div:first-child, .legal-body > .ed-block > div:first-child { margin-top: 14px; }
.cf-privacy { font-size: 12.5px; line-height: 1.5; margin-top: 2px; text-align: center; color: rgba(255,255,255,0.78); }
.cf-privacy a { color: inherit; text-decoration: underline; }
.cf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Texte alternatif d'image (mode édition) : visible au survol de l'image ou quand on le remplit */
.ed-img-alt { display: none; position: absolute; right: 12px; bottom: 12px; z-index: 31; width: min(320px, calc(100% - 150px)); }
body.ed-editmode .ed-img-wrap:hover .ed-img-alt, body.ed-editmode .ed-img-alt:focus-within { display: block; }
.ed-img-alt-input { width: 100%; padding: 8px 10px; border-radius: 10px; border: none; background: rgba(0,0,0,0.72); color: var(--gray-0); font: 600 12.5px var(--font-sans); }
.ed-img-alt-input::placeholder { color: rgba(255,255,255,0.6); }

/* Pages cas d'usage / brochure */
.landing-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .landing-grid { grid-template-columns: 1.25fr 1fr; gap: 64px; } }
.landing-cover { max-width: 420px; justify-self: center; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 56px rgba(0,0,0,0.22); transform: rotate(1.5deg); }
.landing-form-card { margin-top: 32px; padding: 26px; border-radius: 18px; background: var(--gray-50); border: 1px solid var(--gray-200); }
.cf-input.cf-bordered { border: 1px solid var(--gray-300); }
.landing-form-card .cf-privacy { color: var(--gray-500); text-align: left; }
.landing-form-card .cf-note { margin-top: 16px; }

/* Liseré vert sous le bandeau noir des pages solution (plus marqué : il se détache d'un sous-menu clair) */
.site-header.has-subnav .site-nav { border-bottom: 2px solid var(--sage-500); }

/* Bandeau de consentement (mesure d'audience) : « Refuser » et « Accepter » ont le même poids visuel */
.cc-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000; max-width: 560px; margin: 0 auto; background: var(--gray-0); color: var(--gray-900); border: 1px solid var(--gray-300); border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); padding: 20px 22px; }
.cc-title { font-weight: 800; font-size: 15px; }
.cc-text { font-size: 13.5px; line-height: 1.55; color: var(--gray-700); margin-top: 6px; }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.cc-btn { flex: 1 1 140px; padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--gray-900); background: var(--gray-0); color: var(--gray-900); font: 700 14px var(--font-sans); cursor: pointer; }
.cc-btn:hover { background: var(--gray-900); color: var(--gray-0); }
.cc-more { font-size: 13px; text-decoration: underline; color: var(--gray-600); cursor: pointer; }
.cc-manage { margin-left: 14px; background: none; border: none; padding: 0; color: var(--gray-500); font: 400 13px var(--font-sans); text-decoration: underline; cursor: pointer; }
.cc-manage:hover { color: var(--gray-0); }

/* Cartes clients : les listes à puces reprennent le rendu des listes standard (Agences, Fédérations) */
.client-card .cc-text ul.usage-list { display: block; list-style: disc; margin: 1em 0; padding-left: 40px; text-align: justify; }
.client-card .cc-text ul.usage-list li { padding-left: 0; font-size: inherit; line-height: inherit; color: inherit; }
.client-card .cc-text ul.usage-list li::before { content: none; }

/* Pages solution — groupes d'accordéon du menu burger (en bureau : invisibles, les liens restent en ligne) */
.nav-group, .nav-group-body { display: contents; }
.nav-group-title { display: none; }
.nav-group-solution { display: none; }
.nav-home-link { display: none; }   /* lien « Accueil » du menu burger (en bureau, le logo suffit) */
@media (max-width: 760px) {
  .nav-group-solution { display: block; }
  .nav-group { display: block; }
  .nav-group-body { display: none; }
  .nav-group.is-open > .nav-group-body { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid var(--gray-800); margin: 4px 0 10px; }
  .nav-links.mobile-open .nav-group-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--gray-800); color: var(--gray-0); font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; text-align: left; }
  .nav-group.is-open > .nav-group-title .nav-mega-chev { transform: rotate(180deg); }
  .nav-group.is-open > .nav-group-title { border-bottom-color: transparent; }
  .nav-links.mobile-open .nav-group-body .nav-link, .nav-links.mobile-open .nav-group-body .nav-dropdown > .nav-link { font-size: 15.5px; }
  /* menu burger : accordéon « Démos » replié par défaut, comme « Nos solutions » */
  .nav-links.mobile-open .nav-dropdown:not(.nav-mega) > .nav-link { display: flex; justify-content: space-between; align-items: center; }
  .nav-links.mobile-open .nav-dropdown:not(.nav-mega) > .nav-link::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; margin-right: 3px; }
  .nav-links.mobile-open .nav-dropdown:not(.nav-mega).is-open > .nav-link::after { transform: rotate(-135deg) translateY(-2px); }
  .nav-links.mobile-open .nav-dropdown:not(.nav-mega) .nav-dropdown-panel { display: none !important; }
  .nav-links.mobile-open .nav-dropdown:not(.nav-mega).is-open .nav-dropdown-panel { display: flex !important; }
  .nav-links.mobile-open .nav-mega .nav-mega-panel { visibility: visible; opacity: 1; pointer-events: auto; transition: none; }
  /* matrice des solutions : textes un peu plus petits */
  .nav-links.mobile-open .nmc-desc { font-size: 13px; line-height: 1.5; }
  .nav-links.mobile-open .nav-mega-panel a.nav-mega-card { padding: 16px 18px; gap: 10px; }
  .nav-links.mobile-open .nav-mega-panel .nmc-head img { height: 28px; }
  /* menu burger : les 4 solutions toujours visibles, en 4 tuiles (logo seul) — plus de longue liste descriptive ni d'accordéon « Nos solutions » */
  .nav-links.mobile-open .nav-mega .nav-mega-panel { display: block !important; width: auto; margin: 8px 0 4px; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .nav-links.mobile-open .nav-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .nav-links.mobile-open .nav-mega-panel a.nav-mega-card { padding: 8px 5px; gap: 0; border-radius: 14px; border: 2px solid var(--c); align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--gray-0); }
  .nav-links.mobile-open .nav-mega-panel a.nav-mega-card.is-current { background: color-mix(in srgb, var(--c) 16%, var(--gray-0)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
  .nav-links.mobile-open .nav-mega .nmc-desc, .nav-links.mobile-open .nav-mega .nmc-arrow { display: none; }
  .nav-links.mobile-open .nav-mega-panel .nmc-head { justify-content: center; width: 100%; }
  .nav-links.mobile-open .nav-mega-panel .nmc-head img { height: auto; width: 100%; max-height: 46px; object-fit: contain; }
  .site-header.has-subnav .nav-links.mobile-open .nav-mega > .nav-link { display: none; }   /* le groupe « Tricera » sert déjà de titre */
  .nav-links.mobile-open .nav-mega > .nav-link .nav-mega-chev { display: none; }
  .nav-links.mobile-open .nav-home-link { display: block; }
  .nav-links.mobile-open { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overflow-y: auto; }
  /* sécurité : si l'en-tête se replie, les tuiles (forcées visibles plus haut) disparaissent avec lui */
  .site-header.hide-nav .nav-links .nav-mega-panel { visibility: hidden !important; }
  /* sous-bandeau de solution : logo à gauche, bouton à droite ; les liens passent dans le burger */
  .site-subnav .subnav-links { display: none; }
  /* le menu déroulé s'ouvre sous le sous-bandeau de la solution (qui reste visible) */
  .site-header.has-subnav .nav-links.mobile-open { top: calc(100% + 45px); max-height: calc(100vh - 110px); max-height: calc(100svh - var(--hdr-h, 90px) - 8px); }
}

/* Outil de gestion : numéro d'annotation sur le pin, bouton Rétablir, roue crantée */
.ed-note-pin { flex-direction: column; gap: 0; line-height: 1; }
.ed-note-pin .ed-pin-mark { font-size: 12px; line-height: 12px; }
.ed-note-pin .ed-pin-num { font-size: 8px; line-height: 8px; font-weight: 700; opacity: 0.9; letter-spacing: -0.02em; }

/* Apparition progressive au défilement (posée par site.js). Effets : rv-up (montée), rv-left / rv-right (arrivée par le
   côté), rv-zoom (zoom avant), rv-fade (fondu seul). Retirer .is-in rejoue l'animation à l'envers (mode replay). */
.rv { opacity: 0; transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-d, 0ms), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-d, 0ms); }
.rv-up { transform: translateY(34px); }
.rv-left { transform: translateX(-64px); }
.rv-right { transform: translateX(64px); }
.rv-zoom { transform: scale(0.9); }
.rv-fade { transform: none; }
.rv.is-in { opacity: 1; transform: none; }
.rv.rv-now { transition: none; }
/* rembobinage (on remonte) : sortie plus vive que l'entrée, sans délai */
.rv.rv-back:not(.is-in) { transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.4, 0, 0.8, 0.4); }
@media (max-width: 760px) { .rv-left, .rv-right { transform: translateY(30px); } }
@media print { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Entrée douce du bandeau d'accueil de chaque page (titre, texte, boutons) */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
.hero-content > * { animation: hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.08s; }
.hero-content > *:nth-child(3) { animation-delay: 0.16s; }
.hero-content > *:nth-child(4) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .hero-content > * { animation: none; } }

/* Barre d'outils : une rangée de boutons + la ligne « connecté avec le login … » en dessous */

/* Page de désinscription : cases à cocher des applications */
.cf-checks { border: 1px solid var(--gray-300); border-radius: 12px; padding: 12px 16px 14px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.cf-checks legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--gray-700); }
.cf-checks label, .cf-confirm { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--gray-800, var(--gray-700)); cursor: pointer; }
.cf-confirm { align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.cf-checks input, .cf-confirm input { width: 18px; height: 18px; flex: none; accent-color: var(--terracotta-500); margin-top: 0; }
.cf-confirm input { margin-top: 1px; }
@media (max-width: 560px) { .cf-checks { grid-template-columns: 1fr; } }

/* Aperçu mobile (iPhone) : dans le cadre, la barre d'édition est remplacée par les commandes situées à côté du téléphone. */
.ed-embed .ed-toolbar { display: none !important; }


/* ===== Barre d'outils d'édition : verticale, à droite de l'écran, déplaçable (ed-toolbar.js) ===== */
.ed-toolbar { position: fixed; z-index: 1000; right: 16px; top: 50%; transform: translateY(-50%); width: 76px; background: var(--gray-950); color: var(--gray-0); border-radius: 22px; padding: 4px 6px 10px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; box-shadow: 0 14px 36px rgba(0,0,0,0.32); font-family: var(--font-sans); user-select: none; -webkit-user-select: none; }
.ed-toolbar.is-dragging { opacity: 0.92; box-shadow: 0 20px 48px rgba(0,0,0,0.42); }
.ed-toolbar .ed-grip { height: 18px; display: flex; align-items: center; justify-content: center; color: var(--gray-500); cursor: grab; touch-action: none; border-radius: 12px; }
.ed-toolbar .ed-grip svg { transform: rotate(90deg); }
.ed-toolbar .ed-grip:hover { color: var(--gray-300); }
.ed-toolbar.is-dragging .ed-grip { cursor: grabbing; }
.ed-toolbar .ed-tbtn { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; color: var(--gray-300); padding: 9px 2px 7px; border-radius: 14px; font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.1; cursor: pointer; white-space: nowrap; }
.ed-toolbar .ed-tbtn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--gray-0); }
.ed-toolbar .ed-tbtn.active { background: var(--terracotta-500); color: var(--gray-0); }
.ed-toolbar .ed-tbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.ed-toolbar .ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 1px 0; }
.ed-toolbar .ed-pair .ed-tbtn { padding: 9px 0; }
.ed-toolbar .ed-switch { align-self: center; width: 46px; margin: 3px 0; padding: 3px; border: 0; border-radius: 22px; background: var(--gray-800); display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.ed-toolbar .ed-switch span { display: grid; place-items: center; height: 36px; border-radius: 19px; color: var(--gray-500); transition: background .15s, color .15s; }
.ed-toolbar[data-viewport="desktop"] .ed-switch .sw-desk, .ed-toolbar[data-viewport="mobile"] .ed-switch .sw-mob { background: var(--terracotta-500); color: var(--gray-0); }
.ed-toolbar .ed-switch:hover span:not(:first-child):not(:last-child) { background: transparent; }
.ed-toolbar .ed-apply { background: var(--sage-500); color: var(--gray-950); margin-top: 3px; }
.ed-toolbar .ed-apply:hover:not(:disabled) { background: var(--sage-400); color: var(--gray-950); }
.ed-toolbar .ed-apply:disabled { opacity: 0.6; }
.ed-toolbar .ed-pending { color: var(--gold-400); font-size: 10px; font-weight: 700; text-align: center; line-height: 1.25; animation: ed-pulse 1.6s ease-in-out infinite; }
.ed-toolbar .ed-savestate { color: var(--sage-400); font-size: 10px; font-weight: 700; text-align: center; line-height: 1.25; }
.ed-toolbar [hidden] { display: none !important; }
.ed-toolbar .ed-langwrap { position: relative; display: block; }
.ed-toolbar .ed-langmenu { position: absolute; right: calc(100% + 14px); top: 0; background: var(--gray-950); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 140px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.ed-toolbar.is-left .ed-langmenu { right: auto; left: calc(100% + 14px); }
.ed-toolbar .ed-langmenu button { text-align: left; background: transparent; border: 0; color: var(--gray-300); padding: 9px 14px; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ed-toolbar .ed-langmenu button:hover { background: rgba(255,255,255,0.1); color: var(--gray-0); }
.ed-toolbar .ed-langmenu button.active { color: var(--terracotta-300, #f1a27f); }
/* Dans le cadre d'iPhone (aperçu mobile), la barre est hors du téléphone : on masque celle de la page affichée dans le cadre */
.ed-embed .ed-toolbar { display: none !important; }
@media (max-width: 600px) { .ed-toolbar { right: 8px; width: 68px; } .ed-toolbar .ed-tbtn { font-size: 10px; } }


/* ===== Chat « Claude » et pastille d'état du bouton Appliquer ===== */
.ed-toolbar .ed-chatbtn { position: relative; }
.ed-toolbar .ed-badge { position: absolute; top: 3px; right: 7px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--gray-500); color: var(--gray-0); font: 800 10px/17px var(--font-sans); font-style: normal; text-align: center; }
.ed-toolbar .ed-badge.is-new { background: var(--terracotta-500); animation: ed-pulse 1.6s ease-in-out infinite; }
.ed-chat { position: fixed; z-index: 1010; width: 372px; max-width: calc(100vw - 16px); max-height: min(600px, calc(100vh - 72px)); display: flex; flex-direction: column; background: var(--gray-0); color: var(--gray-900); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,0.32); font-family: var(--font-sans); overflow: hidden; }
.ed-chat[hidden] { display: none; }
.ed-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; background: var(--gray-950); color: var(--gray-0); }
.ed-chat-head strong { display: block; font-size: 15px; }
.ed-chat-head small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gray-400); line-height: 1.35; }
.ed-chat-x { border: 0; background: rgba(255,255,255,0.12); color: var(--gray-0); width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
.ed-chat-x:hover { background: rgba(255,255,255,0.22); }
.ed-chat-list { flex: 1; min-height: 160px; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 12px; background: var(--gray-50); }
.ed-msg { display: flex; flex-direction: column; gap: 3px; max-width: 92%; }
.ed-msg.user { align-self: flex-end; align-items: flex-end; }
.ed-msg.agent { align-self: flex-start; }
.ed-msg.sys { align-self: center; max-width: 100%; }
.ed-bubble { padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ed-msg.user .ed-bubble { background: var(--terracotta-500); color: var(--gray-0); border-bottom-right-radius: 5px; }
.ed-msg.agent .ed-bubble { background: var(--gray-0); border: 1px solid var(--gray-200); border-bottom-left-radius: 5px; }
.ed-msg.sys .ed-bubble { background: var(--gold-100, #fbf1d3); color: #6b5410; font-size: 12.5px; text-align: center; }
.ed-meta { font-size: 11px; color: var(--gray-500); }
.ed-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.ed-acts button { border: 0; border-radius: 999px; padding: 6px 12px; font: 700 12px var(--font-sans); cursor: pointer; background: var(--sage-500); color: var(--gray-950); }
.ed-acts button.ghost { background: var(--gray-0); border: 1px solid var(--gray-300); color: var(--gray-700); }
.ed-acts button:disabled { opacity: 0.5; }
.ed-empty { text-align: center; color: var(--gray-600); font-size: 13px; line-height: 1.55; padding: 14px 8px; }
.ed-empty strong { display: block; color: var(--gray-900); font-size: 14.5px; margin-bottom: 6px; }
.ed-chat-run { padding: 10px 14px; background: #f1f6ec; border-top: 1px solid var(--gray-200); font-size: 12.5px; }
.ed-chat-run[hidden] { display: none; }
.ed-run-head { display: flex; align-items: center; gap: 9px; }
.ed-run-head button { margin-left: auto; border: 1px solid var(--gray-300); background: var(--gray-0); border-radius: 999px; padding: 4px 11px; font: 700 11.5px var(--font-sans); cursor: pointer; color: var(--gray-700); }
.ed-chat-run ul { list-style: none; margin: 8px 0 0; padding: 0; color: var(--gray-600); display: flex; flex-direction: column; gap: 3px; }
.ed-chat-run li::before { content: "› "; color: var(--sage-600); font-weight: 800; }
.ed-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sage-500); border-right-color: transparent; animation: ed-rot .8s linear infinite; flex: none; }
@keyframes ed-rot { to { transform: rotate(360deg); } }
.ed-chat-form { padding: 10px 12px 12px; border-top: 1px solid var(--gray-200); background: var(--gray-0); display: flex; flex-direction: column; gap: 8px; }
.ed-chat-form textarea { width: 100%; resize: none; border: 1px solid var(--gray-300); border-radius: 12px; padding: 9px 11px; font: 13.5px/1.45 var(--font-sans); box-sizing: border-box; }
.ed-chat-form textarea:focus { outline: 2px solid var(--terracotta-300, #f1a27f); outline-offset: 0; border-color: var(--terracotta-500); }
.ed-chat-btns { display: flex; gap: 8px; justify-content: flex-end; }
.ed-chat-btns button { border: 0; border-radius: 999px; padding: 8px 15px; font: 700 12.5px var(--font-sans); cursor: pointer; }
.ed-chat-add { background: var(--gray-100); color: var(--gray-900); }
.ed-chat-add:hover { background: var(--gray-200); }
.ed-chat-addrun { background: var(--sage-500); color: var(--gray-950); }
.ed-chat-addrun:hover { background: var(--sage-400); }
.ed-note-pin.ed-flag { background: var(--gold-500, #d9a21b); color: var(--gray-950); }

/* ── Version mobile : retours d'annotations du 09/10/2026 ─────────────────────────────── */
@media (max-width: 760px) {
  /* Hero : occupe toute la hauteur d'écran sous l'en-tête, image légèrement assombrie (10 %) pour mieux lire les titres */
  .hero-photo { min-height: calc(100vh - var(--hdr-h, 89px)) !important; min-height: calc(100svh - var(--hdr-h, 89px)) !important; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10,10,8,0.10); pointer-events: none; }
  .hero-photo .hero-content { z-index: 2; }

  /* Logos clients et partenaires : 30 % plus petits pour en voir davantage à la fois */
  .logo-card, .logo-row[data-marquee] .logo-card { width: 110px; height: 62px; padding: 10px 14px; border-radius: 10px; }
  .logo-row { gap: 12px; }

  /* Les cards ne dépassent jamais la largeur de l'écran */
  .grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .grid-3 > *, .client-card { min-width: 0; max-width: 100%; }
  .client-card { padding: 26px 22px; overflow-wrap: anywhere; }

  /* Cartes en défilement horizontal piloté par le défilement vertical (voir site.js, « cc-hs »). « cc-stage » = titre + cartes collés ensemble.
     html.cc-static (mouvement réduit) : on garde l'empilement vertical habituel. */
  html:not(.cc-static) body:not(.ed-editmode) .cc-hs { display: flex !important; flex-wrap: nowrap; gap: 16px !important; overflow: hidden; position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px) + 14px); align-items: stretch; touch-action: pan-y pinch-zoom; }
  html:not(.cc-static) body:not(.ed-editmode) .cc-stage { position: sticky; top: calc(var(--hdr-min, 89px) + 8px); z-index: 2; }
  html:not(.cc-static) body:not(.ed-editmode) .cc-stage > .cc-hs { position: static; margin-top: 10px; }
  html:not(.cc-static) body:not(.ed-editmode) .cc-hs > * { flex: 0 0 100%; width: 100%; box-sizing: border-box; will-change: transform; touch-action: pan-y pinch-zoom; max-height: calc(100svh - var(--hdr-min, 89px) - var(--cc-title-h, 0px) - 56px); max-height: calc(100dvh - var(--hdr-min, 89px) - var(--cc-title-h, 0px) - 44px); }
  .cc-track { display: flow-root; }
  html:not(.cc-static) body:not(.ed-editmode) .cc-track.cc-hs-wrap::after { content: ""; display: block; height: var(--cc-extra, 0px); }
  /* Titres collés : le titre s'aimante sous l'en-tête (10 px de marge au-dessus), le texte d'introduction passe dessous en défilant, puis cartes / formulaire se collent juste sous lui */
  html:not(.cc-static) body:not(.ed-editmode) .cc-title { position: sticky; top: var(--hdr-min, 89px); z-index: 4; margin: 0; padding: 10px 0 8px; background: var(--cc-bg, var(--gray-0)); }
  #solutions .cc-title { --cc-bg: var(--gray-50); }
  #offre .cc-title { --cc-bg: var(--gray-950); }
  #clients .cc-title { --cc-bg: var(--gray-0); }
  html:not(.cc-static) body:not(.ed-editmode) #offre .cc-hs { padding-top: 30px; margin-top: -22px; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px)); }
  html:not(.cc-static) body:not(.ed-editmode) #offre .price-card-offer { right: 8px; top: -26px; width: 118px; height: 118px; padding: 22px 16px; font-size: 8.5px; }

  /* Titre de hero TriceraClub : réduit de 15 % en mobile (zoom proportionnel, donc les tailles choisies dans l'éditeur restent prises en compte) */
  h1.hero-h1.hero-h1-2l { zoom: 0.85; max-width: none !important; }
}

/* TriceraClub, mobile : le carrousel des widgets tient tout entier dans l'écran et se colle en haut pendant qu'on le fait défiler
   (annotations 238 à 243). L'espace après le carrousel (::after) est la « zone de retenue » : tant qu'on défile dans cette zone,
   le carrousel reste en place ; un défilement plus franc le décolle. */
.wdg-btn-short { display: none; }
/* Fond de chaque fiche de widget : 5 % de la couleur du widget (l'encoche en haut suit) ; cartouches et boutons restent sur fond blanc */
.wdg-panel { --wdg-tint: color-mix(in srgb, var(--wdg-color) 5%, var(--gray-0)); background: var(--wdg-tint); }
.wdg-panel::before { background: var(--wdg-tint); }
.wdg-tier, .wdg-btn-ghost { background: #fff; }
@media (max-width: 760px) {
  body:not(.ed-editmode) .wdg-pin { display: flow-root; margin-inline: -16px; }
  body:not(.ed-editmode) .wdg-pin::after { content: ""; display: block; height: 45svh; }
  body:not(.ed-editmode) .wdg { position: sticky; top: var(--hdr-min, 45px); z-index: 5; margin-top: 0; background: var(--wdg-strip-bg, var(--gray-0)); }
  body:not(.ed-editmode) .wdg-strip { padding: 6px 0 14px; margin: 0 44px; }
  body:not(.ed-editmode) .wdg-stage { display: block; padding: 0; }
  body:not(.ed-editmode) .wdg-panel { height: calc(100svh - var(--hdr-min, 45px) - 52px); padding: 14px 8px 8px; gap: 8px; box-sizing: border-box; }
  body:not(.ed-editmode) .wdg-panel.is-active { display: flex; flex-direction: column; }
  body:not(.ed-editmode) .wdg-shot { flex: none; text-align: center; }
  body:not(.ed-editmode) .wdg-shot img { height: 45svh; width: auto; max-width: 100%; margin: 0 auto; }
  body:not(.ed-editmode) .wdg-body { flex: 1 1 0; min-height: 0; padding: 0; }
  body:not(.ed-editmode) .wdg-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  body:not(.ed-editmode) .wdg-head { display: contents; }
  body:not(.ed-editmode) .wdg-macaron, body:not(.ed-editmode) .wdg-api, .wdg-text img, .wdg-text .side-img { display: none !important; }
  /* « Gratuit » : cartouche d'une ligne de haut, le texte l'habille puis reprend à gauche dès la 2e ligne */
  body:not(.ed-editmode) .wdg-tier { float: left; box-sizing: border-box; height: 18px; margin: 0 8px 0 0; padding: 0 10px; font-size: 12px; line-height: 15px; }
  body:not(.ed-editmode) .wdg-text { font-size: 14px; line-height: 18px; }
  body:not(.ed-editmode) .wdg-text.has-side-img { display: block; } /* (l'image est masquée : le texte doit pouvoir habiller « Gratuit ») */
  body:not(.ed-editmode) .wdg-text > *, body:not(.ed-editmode) .wdg-text .ed-block > * { margin-top: 0; }
  body:not(.ed-editmode) .wdg-text > * + *, body:not(.ed-editmode) .wdg-text .ed-block > * + * { margin-top: 6px; }
  body:not(.ed-editmode) .wdg-text ul.usage-list { gap: 4px; }
  body:not(.ed-editmode) .wdg-body > .wdg-text:last-of-type { margin-bottom: 0; }
  body:not(.ed-editmode) .wdg-btn-row { flex: none; flex-direction: row; flex-wrap: nowrap; gap: 8px; padding-top: 8px; }
  body:not(.ed-editmode) .wdg-btn-row .wdg-btn { flex: 1 1 0; min-width: 0; padding: 9px 8px; font-size: 14px; text-align: center; }
  body:not(.ed-editmode) .wdg-btn-long { display: none; }
  body:not(.ed-editmode) .wdg-btn-short { display: block; }
  /* petites flèches aux deux extrémités du bandeau des macarons */
  body:not(.ed-editmode) .wdg-peek { position: absolute; top: 6px; width: 26px; height: 26px; flex: none; z-index: 3; }
  body:not(.ed-editmode) .wdg-peek-prev { left: 10px; }
  body:not(.ed-editmode) .wdg-peek-next { right: 10px; }
  body:not(.ed-editmode) .wdg-arrow { width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 50%; color: var(--gray-600); }
  body:not(.ed-editmode) .wdg-arrow svg { width: 14px; height: 14px; }

  /* « Clubs / Marques / Back office » : trois cards en défilement horizontal ; on commence par le visuel Back office, puis Clubs, puis Marques */
  #data .data-cols.cc-hs > .data-col { background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 20px; padding: 22px 20px; box-sizing: border-box; overflow-y: auto; }
  #data .data-cols.cc-hs .data-col h2 { font-size: 24px !important; max-width: none; }
  #data .data-cols.cc-hs .data-col h2 span[style*="font-size"] { font-size: 21px !important; }
  #data .data-cols.cc-hs .data-col > div { font-size: 14px !important; }
  #data .data-cols.cc-hs .usage-list { gap: 6px; }
  #data .data-cols.cc-hs > .data-col-photo { order: -1; padding: 12px; }
  /* visuel Back Office : « adapté à la hauteur » sur mobile (il occupe toute la hauteur de la card, rogné sur les côtés ; un toucher l'ouvre en grand) */
  body:not(.ed-editmode) #data .data-col-photo .sponsor-photo { margin-top: 0; flex: 1 1 auto; aspect-ratio: auto; min-height: 0; border-radius: 12px; }
  body:not(.ed-editmode) #data .data-col-photo .sponsor-photo .img-fit img { height: 100% !important; width: auto !important; left: 0 !important; top: 0 !important; transform: none !important; } /* pleine hauteur, calée à gauche */
  #data .data-col-photo > :not(.sponsor-photo) { display: none; } /* légende « Back office Club - Statistiques » : masquée sur mobile (le navigateur la sort du <p>, d'où ce sélecteur) */

  /* le formulaire n'est actif au doigt que lorsqu'il occupe l'essentiel de l'écran (.is-live, site.js) ; sinon le doigt fait défiler la page */

  /* ───────── Accueil (mobile) : chaque rubrique tient dans l'écran ───────── */
  /* Hero : contenu resserré pour que tout (titre, texte, boutons) soit visible sans coupure */
  body[data-page="accueil"] .hero-photo .hero-content { padding: 26px 22px 28px !important; }
  body[data-page="accueil"] .hero-photo .hero-content .eyebrow { font-size: 11px; }
  body[data-page="accueil"] h1.hero-h1 { font-size: 34px !important; margin-top: 10px !important; }
  body[data-page="accueil"] .hero-photo .hero-content > div:not(.eyebrow):not(.cta-row) { font-size: 15.5px !important; line-height: 1.5 !important; margin-top: 14px !important; }
  body[data-page="accueil"] .hero-photo .cta-row { gap: 10px !important; margin-top: 20px !important; }
  body[data-page="accueil"] .hero-photo .cta-row > * { padding-top: 12px; padding-bottom: 12px; }

  /* « Nos solutions » : les cartes s'empilent les unes sur les autres au défilement (chacune se colle, la suivante glisse par-dessus) */
  body:not(.ed-editmode) #solutions { padding-top: 40px; padding-bottom: 40px; }
  body:not(.ed-editmode) #solutions .solutions-grid { margin-top: 18px; gap: 18px; }
  body:not(.ed-editmode) #solutions .solution-card { position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px) + 10px + var(--i, 0) * 14px); z-index: calc(var(--i, 0) + 1);
    min-height: max(210px, calc(100svh - var(--hdr-min, 89px) - var(--cc-title-h, 0px) - 90px)); justify-content: space-between; box-shadow: 0 -6px 18px rgba(0,0,0,0.06); }
  body:not(.ed-editmode) #solutions .solution-card:hover, body:not(.ed-editmode) #solutions .solution-card:active, body:not(.ed-editmode) #solutions .solution-card:focus-within { border-color: var(--gray-200); box-shadow: 0 -6px 18px rgba(0,0,0,0.06); outline: none; }
  body:not(.ed-editmode) #solutions .solution-card, body:not(.ed-editmode) #solutions .solution-card a { -webkit-tap-highlight-color: transparent; outline: none; }
  body:not(.ed-editmode) #solutions .solutions-grid::after { content: ""; display: block; height: 36svh; } /* espace après la 4e carte : elle se bloque dans la pile avant que l'ensemble ne parte */
  body:not(.ed-editmode) #solutions .solution-card:nth-child(1) { --i: 0; }
  body:not(.ed-editmode) #solutions .solution-card:nth-child(2) { --i: 1; }
  body:not(.ed-editmode) #solutions .solution-card:nth-child(3) { --i: 2; }
  body:not(.ed-editmode) #solutions .solution-card:nth-child(4) { --i: 3; }
  body:not(.ed-editmode) #solutions .solution-card .sc-badge { position: relative; top: auto; right: auto; align-self: flex-start; transform: none; margin: 0 0 -4px; } /* le macaron prend sa place dans la carte (il dépassait au-dessus de la pile) */
  body:not(.ed-editmode) #solutions .solution-card .sc-head img { height: 54px !important; }
  body:not(.ed-editmode) #solutions .solution-card .sc-desc { font-size: 17px; }

  /* « Qui sont nos clients » : titre collé (règle générale ci-dessus) ; en bas de chaque carte, les boutons restent TOUJOURS visibles (le texte défile dans la carte s'il est long) */
  body:not(.ed-editmode) #clients .client-card { padding: 20px 18px; overflow: hidden; }
  body:not(.ed-editmode) #clients .client-card .cc-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: 14.5px; line-height: 1.55; margin-top: 10px; touch-action: pan-y pinch-zoom; }
  body:not(.ed-editmode) #clients .client-card .cc-actions { flex: none; padding-top: 14px; }
  body:not(.ed-editmode) #clients .client-card h3 { font-size: 20px !important; }
  .cc-contact-btn { display: none; }
  body:not(.ed-editmode) #clients { padding-top: 40px; }

  /* « Ils nous font confiance » : la rubrique occupe toute la hauteur de l'écran, logos agrandis de 20 % */
  body:not(.ed-editmode) #confiance { min-height: calc(100svh - var(--hdr-min, 89px)); min-height: calc(100lvh - var(--hdr-min, 89px)); display: flex; flex-direction: column; justify-content: center; padding-top: 36px !important; padding-bottom: 36px !important; box-sizing: border-box; }
  #confiance .logo-card, #confiance .logo-row[data-marquee] .logo-card { width: 132px; height: 74px; padding: 12px 17px; border-radius: 12px; }
  body:not(.ed-editmode) #confiance .section-inner { width: 100%; min-width: 0; } /* (élément d'une colonne flex : sans cela il prend la largeur des bandeaux défilants) */
  #confiance .logo-row { gap: 14px; margin-top: 30px; }
  #confiance .logo-group-title { margin-top: 56px; font-size: 24px; }

  /* « Écosystème », « La presse parle de nous » : l'image prend la hauteur qui reste pour que toute la rubrique tienne dans l'écran (calculée par site.js, --fit-h) */
  body:not(.ed-editmode) [data-fit-img] { height: var(--fit-h, 220px) !important; min-height: 120px; }
  body:not(.ed-editmode) #ecosysteme, body:not(.ed-editmode) #presse { padding-top: 32px; padding-bottom: 32px; gap: 20px !important; }
  body:not(.ed-editmode) #presse .grid-2 { gap: 18px !important; }
  body:not(.ed-editmode) #presse .eyebrow { margin-bottom: 18px !important; }
  body:not(.ed-editmode) #presse [style*="font-size: 24px"] { font-size: 19px !important; line-height: 1.4 !important; }

  /* « Des questions » (formulaire de contact) : champs plus compacts, le message prend la hauteur qui reste */
  body:not(.ed-editmode) #contact { padding-top: 32px; padding-bottom: 28px; }
  body:not(.ed-editmode) #contact h2 { font-size: 26px !important; }
  body:not(.ed-editmode) #contact .contact-form { margin-top: 18px !important; gap: 10px !important; }
  body:not(.ed-editmode) #contact .cf-input, body:not(.ed-editmode) #contact .cf-select { padding: 11px 14px; font-size: 14px; }
  body:not(.ed-editmode) #contact textarea.cf-input { min-height: 64px; resize: none; }

  /* Rubriques « retenues » : une fois qu'elles occupent l'écran, elles restent en place le temps d'un petit effort de défilement avant de laisser passer la suivante
     (site.js enveloppe la rubrique dans .hold ; l'espace ::after est la distance à « forcer ») */
  body:not(.ed-editmode) .section[data-fit-steps][data-hold], body:not(.ed-editmode) .section[data-fit-screen][data-hold] { min-height: calc(100svh - var(--hdr-min, 89px)); min-height: calc(100lvh - var(--hdr-min, 89px)); box-sizing: border-box; }
  body:not(.ed-editmode) #contact[data-hold] { display: flex; flex-direction: column; justify-content: center; }
  body:not(.ed-editmode) #contact[data-hold] > .section-inner { width: 100%; }
  body:not(.ed-editmode) .hold::after { content: ""; display: block; height: var(--hold-h, 24svh); }
  body:not(.ed-editmode) .hold:not(:has(> .section))::after { display: none; }
  body:not(.ed-editmode) .hold > .section[data-hold] { position: sticky; top: var(--hdr-min, 89px); z-index: 2; }

  /* ───────── TriceraClub (mobile) ───────── */
  /* « Une appli de club sur-mesure » : le titre reste affiché, le carrousel des widgets se colle juste dessous */
  #concept .cc-title { --cc-bg: var(--gray-0); }
  body:not(.ed-editmode) .wdg { top: calc(var(--hdr-min, 45px) + var(--cc-title-h, 0px)); }
  body:not(.ed-editmode) .wdg-panel { height: calc(100svh - var(--hdr-min, 45px) - var(--cc-title-h, 0px) - 52px); }

  /* « Le Hub de toutes vos solutions » : titre collé ; la phrase d'accroche passe dessous ; la suite du texte et l'image restent juste sous le titre (site.js les regroupe dans .cc-pin) */
  #hub .cc-title { --cc-bg: var(--gray-950); }
  body:not(.ed-editmode) #hub .hub-left::after { content: ""; display: block; height: var(--hold-h, 24svh); }
  body:not(.ed-editmode) #hub .cc-pin { position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px)); z-index: 2; background: var(--gray-950); padding: 8px 0 4px; }
  body:not(.ed-editmode) #hub .cc-pin-text { color: var(--gray-400); font-size: 14px; line-height: 1.5; }
  body:not(.ed-editmode) #hub .cc-pin-text .hl { font-size: 17px !important; }
  body:not(.ed-editmode) #hub [data-hub-img] { height: var(--fit-h, 240px) !important; margin-top: 12px; }

  /* « Voir TriceraClub en situation » : visuel iPhone 16 (40 % de la hauteur d'écran) avec le bouton dedans ; la démo en direct est remplacée par ce visuel */
  body:not(.ed-editmode) .club-demo-frame-wrap { display: none !important; }
  body:not(.ed-editmode) .club-phone-wrap { display: flex; justify-content: center; height: var(--fit-h, 40svh); min-height: 90px; margin-top: 14px; text-decoration: none; }
  .club-phone { position: relative; display: block; height: 100%; aspect-ratio: 540 / 1170; border: 5px solid #1c1c1e; border-radius: 30px; background: #000; overflow: hidden; box-shadow: 0 0 0 1.5px #5b5b60, 0 14px 30px rgba(0,0,0,0.28); }
  .club-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .club-phone-island { position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%); width: 30%; height: 2.7%; background: #000; border-radius: 999px; }
  .club-phone-btn { position: absolute; left: 7%; right: 7%; bottom: 4.5%; white-space: normal !important; padding: 8px 6px !important; font-size: 11px !important; line-height: 1.2; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
  body:not(.ed-editmode) .demo-test-btn { display: none; }
  body:not(.ed-editmode) #demo .section-inner { gap: 0 !important; }

  /* « Vous êtes une marque ? » : titre collé ; ordre mobile = titre, mosaïque, accroche, texte, bouton */
  body:not(.ed-editmode) #marques { padding-top: 0 !important; }
  body:not(.ed-editmode) #marques .sponsor-marque { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  body:not(.ed-editmode) #marques .sponsor-marque-text { display: contents; }
  body:not(.ed-editmode) #marques .sponsor-marque-text > :nth-child(1) { order: 0; }
  body:not(.ed-editmode) #marques .sponsor-mosaic { order: 1; width: 100%; flex: none; height: var(--fit-h, auto); }
  body:not(.ed-editmode) #marques .sponsor-marque-text > :nth-child(2) { order: 2; margin-top: 0 !important; }
  body:not(.ed-editmode) #marques .sponsor-marque-text > :nth-child(3) { order: 3; margin-top: 0 !important; }
  body:not(.ed-editmode) #marques .sponsor-marque-text > :nth-child(4) { order: 4; margin-top: 4px !important; }
  /* étapes d'ajustement quand tout ne tient pas : titre réduit à la taille du texte, puis titre masqué, puis visuel réduit (site.js) */
  body:not(.ed-editmode) .fit-s1 .fit-h2 { font-size: 15px !important; font-weight: 700 !important; line-height: 1.5 !important; max-width: none !important; }
  body:not(.ed-editmode) .fit-s2 .fit-h2 { display: none !important; }

  /* « Des data qualifiées » : les boutons sortent des cartes, juste dessous, sur toute la largeur de la carte */
  #data .data-cols.cc-hs > .data-col { background: transparent !important; border: 0 !important; padding: 0 !important; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  #data .data-cols.cc-hs > .data-col > .data-card { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 20px; padding: 22px 20px; touch-action: pan-y pinch-zoom; }
  #data .data-cols.cc-hs > .data-col > .cta-row { margin-top: 0 !important; flex: none; }
  #data .data-cols.cc-hs > .data-col > .cta-row .btn-primary { display: block; width: 100%; text-align: center; box-sizing: border-box; }
  #data .data-cols.cc-hs > .data-col-photo { padding: 0 !important; }
  body:not(.ed-editmode) #data .data-col-photo .sponsor-photo { background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 20px; padding: 12px; box-sizing: border-box; }

  /* Tarification : le bouton sous chaque carte */
  html:not(.cc-static) body:not(.ed-editmode) .price-slide { gap: 12px; }
  html:not(.cc-static) body:not(.ed-editmode) .price-slide > .price-card { min-height: 0; overflow: visible; }
  html:not(.cc-static) body:not(.ed-editmode) .price-slide > .price-card > .price-card-body { overflow-y: auto; min-height: 0; touch-action: pan-y pinch-zoom; overscroll-behavior: auto; }
  /* la diapo occupe toute la hauteur disponible (carte qui s'étire, bouton en bas) */
  html:not(.cc-static) body:not(.ed-editmode) #offre .price-slide { height: calc(100svh - var(--hdr-min, 89px) - var(--cc-title-h, 0px) - 50px); height: calc(100dvh - var(--hdr-min, 89px) - var(--cc-title-h, 0px) - 50px); }
  html:not(.cc-static) body:not(.ed-editmode) .price-slide-cta { display: block; flex: none; text-align: center; width: 100%; box-sizing: border-box; }
  html:not(.cc-static) body:not(.ed-editmode) #offre .cta-row { display: none; }

  /* « Découvrez toutes les solutions Tricera » : cartes empilées, comme « Nos solutions » */
  #autres .cc-title { --cc-bg: color-mix(in srgb, rgb(122,154,91) 10%, white); }
  body:not(.ed-editmode) #autres { padding-top: 40px !important; padding-bottom: 40px !important; }
  body:not(.ed-editmode) #autres .other-offers-grid { grid-template-columns: 1fr !important; margin-top: 16px !important; gap: 18px !important; }
  body:not(.ed-editmode) #autres .other-offers-grid::after { content: ""; display: block; height: 30svh; }
  body:not(.ed-editmode) #autres .other-offer-card { position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px) + 10px + var(--i, 0) * 14px); z-index: calc(var(--i, 0) + 1);
    min-height: max(210px, calc(100svh - var(--hdr-min, 89px) - var(--cc-title-h, 0px) - 100px)); justify-content: space-between; box-shadow: 0 -6px 18px rgba(0,0,0,0.06); -webkit-tap-highlight-color: transparent; outline: none; }
  body:not(.ed-editmode) #autres .other-offer-card:hover, body:not(.ed-editmode) #autres .other-offer-card:active, body:not(.ed-editmode) #autres .other-offer-card:focus-within { border-color: var(--gray-200); box-shadow: 0 -6px 18px rgba(0,0,0,0.06); }
  body:not(.ed-editmode) #autres .other-offer-card:nth-child(1) { --i: 0; }
  body:not(.ed-editmode) #autres .other-offer-card:nth-child(2) { --i: 1; }
  body:not(.ed-editmode) #autres .other-offer-card:nth-child(3) { --i: 2; }
  body:not(.ed-editmode) #autres .ooc-head img { height: 44px; }


  /* « Essayer TriceraClub en action » : mise en page finale = titre, accroche, visuel iPhone (40 % de la hauteur d'écran), texte, puis le bouton centré dans l'espace restant.
     Effet d'entrée : le visuel apparaît à 90 % de la largeur d'écran, on le parcourt, puis il « dézoome » jusqu'à sa place (site.js, #demo) */
  body:not(.ed-editmode) #demo { display: flex; flex-direction: column; overflow: hidden; }
  body:not(.ed-editmode) #demo > .section-inner { display: flex !important; flex-direction: column; flex: 1 1 auto; width: 100%; }
  body:not(.ed-editmode) #demo .demo-left { display: flex; flex-direction: column; flex: 1 1 auto; }
  body:not(.ed-editmode) #demo .demo-left > .cta-row { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding-top: 12px; }
  body:not(.ed-editmode) #demo .club-phone-wrap { transform-origin: 50% 0; will-change: transform; position: relative; z-index: 3; }


}

/* TriceraClub : éléments propres au mobile (masqués en desktop) et diapos « carte + bouton » */
.club-phone-wrap { display: none; }
.price-slide { display: flex; flex-direction: column; }
.price-slide > .price-card { flex: 1 1 auto; }
.price-slide-cta { display: none; }
.price-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.data-card { display: block; }

/* Formulaire de création de club : aperçu (mobile) + fenêtre qui contient le vrai formulaire */
.club-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; background: rgba(10,10,8,0.74); }
.club-modal[hidden] { display: none; }
.club-modal-box { position: relative; display: flex; flex-direction: column; width: min(100%, 520px); height: min(100%, 880px); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.club-modal-bar { flex: none; display: flex; justify-content: flex-end; align-items: center; height: 48px; padding: 0 8px; background: #1b1a3a; }
.club-modal-clip { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* le formulaire est recadré : on masque l'en-tête bleu dégradé de l'application (79 px) ; ses marges (12 px de côté, 4 % en haut et en bas) sont rognées */
.club-modal-clip iframe { position: absolute; left: -12px; width: calc(100% + 24px); top: calc(-1 * (100% + 79px) * 0.0434783 - 79px); height: calc((100% + 79px) / 0.92); border: 0; background: #fff; }
.club-modal-close { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font: 400 26px/1 var(--font-sans); cursor: pointer; }
.club-modal-close:focus-visible { outline: 3px solid var(--gold-400, #f2c14e); outline-offset: 2px; }

/* « Passez à l'action » — version mobile (voir triceraclub/index.php) : masquée sur ordinateur ; sur mobile elle remplace la version à iframe */
.club-act { display: none; }
@media (max-width: 760px) {
  body:not(.ed-editmode) #creer-club { display: none; }
  body:not(.ed-editmode) #passez-action.club-act { display: flex; flex-direction: column; justify-content: center; background: #fff; text-align: center; padding: 14px 15px 12px; box-sizing: border-box; position: sticky; top: var(--hdr-min, 89px); z-index: 2; min-height: var(--act-min, calc(100dvh - var(--hdr-min, 89px))); }
  .club-act .section-inner { width: 100%; padding: 0; }
  .club-act-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; }
  .club-act-title { margin: 12px 0 0; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--gray-950); text-wrap: balance; }
  .club-act-text { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--gray-600); }
  /* tout est affiché en grand au début ; au fil du défilement (une fois le titre collé en haut), site.js réduit puis masque le sous-titre, puis réduit l'image (--fit-h) jusqu'à ce que tout tienne */
  .club-act-shot { display: block; margin: 15px auto; width: min(100%, calc(var(--fit-h, 9999px) * 342 / 516)); height: auto; aspect-ratio: 342 / 516; padding: 0; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; background: #f1f2f9; cursor: pointer; box-shadow: 0 10px 28px rgba(20,28,60,0.14); -webkit-tap-highlight-color: transparent; }
  .club-act-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .club-act-btn { display: block; width: 100%; margin: 0; box-sizing: border-box; }
}

/* Petits téléphones (écran haut de 680 px ou moins) : rubriques d'accueil un peu plus compactes pour tenir dans l'écran */
@media (max-width: 760px) and (max-height: 680px) {
  body[data-page="accueil"] h1.hero-h1 { font-size: 30px !important; }
  body[data-page="accueil"] .hero-photo .hero-content > div:not(.eyebrow):not(.cta-row) { font-size: 14.5px !important; margin-top: 10px !important; }
  body:not(.ed-editmode) #ecosysteme h2 { font-size: 24px !important; margin-top: 8px !important; }
  body:not(.ed-editmode) #ecosysteme [style*="font-size: 16px"] { font-size: 14px !important; margin-top: 10px !important; line-height: 1.5 !important; }
  body:not(.ed-editmode) #ecosysteme, body:not(.ed-editmode) #presse { padding-top: 22px; padding-bottom: 22px; gap: 14px !important; }
  body:not(.ed-editmode) #presse [style*="font-size: 24px"] { font-size: 17px !important; }
  body:not(.ed-editmode) #contact { padding-top: 20px; padding-bottom: 16px; }
  body:not(.ed-editmode) #contact h2 { font-size: 22px !important; }
  body:not(.ed-editmode) #contact .contact-form { margin-top: 12px !important; gap: 7px !important; }
  body:not(.ed-editmode) #contact .cf-input, body:not(.ed-editmode) #contact .cf-select { padding: 8px 12px; font-size: 13.5px; }
  body:not(.ed-editmode) #contact textarea.cf-input { min-height: 44px; }
}

/* ───────── TriceraSport (mobile) : retours du 12/10/2026 ───────── */
/* « Essayer TriceraSport » : rubrique propre à la version mobile ; en mode édition elle s'affiche (à toute largeur) pour que ses textes restent modifiables */
.sp-try { display: none; }
body.ed-editmode .sp-try { display: block; }
.sp-try .club-phone-wrap { display: none; }

@media (max-width: 760px) {
  /* Hero : titre, texte et boutons tiennent entièrement dans l'écran (les tailles à 48 px posées dans l'éditeur sont ramenées à celle du titre) */
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .hero-content { padding: 26px 22px 28px !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) h1.hero-h1 { font-size: 32px !important; line-height: 1.12 !important; max-width: none !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) h1.hero-h1 [style*="font-size"] { font-size: inherit !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .hero-content > div:not(.cta-row):not(.eyebrow) { font-size: 15.5px !important; line-height: 1.5 !important; margin-top: 14px !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .hero-content > .eyebrow { font-size: 11px; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .cta-row { gap: 10px !important; margin-top: 20px !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .cta-row > * { padding-top: 12px; padding-bottom: 12px; }

  /* « Comment ça marche » : les 4 étapes forment un « paquet » de cards. La rubrique reste collée ; les cards à venir sont derrière, en bas ; au défilement la card
     active passe derrière, vers le haut, et la suivante remonte au premier plan (positions pilotées par site.js). Aspect des cards : voir plus bas (règles hors média).
     La démo en direct est remplacée par la rubrique « Essayer TriceraSport ». */
  #comment .cc-title { --cc-bg: var(--gray-0); font-size: 11.5px; letter-spacing: 0.1em; line-height: 1.45; }
  body:not(.ed-editmode) #comment .how-video { display: none; }
  html:not(.cc-static) body:not(.ed-editmode) #comment { padding-bottom: 24px !important; }
  html:not(.cc-static) body:not(.ed-editmode) #comment .how-grid { display: block; margin-top: 0 !important; }
  html:not(.cc-static) body:not(.ed-editmode) #comment .how-steps-col { display: block; }
  html:not(.cc-static) body:not(.ed-editmode) #comment .how-steps-col > div:not(.how-steps-grid) { display: none; }
  html:not(.cc-static) body:not(.ed-editmode) #comment .deck-wrap::after { content: ""; display: block; height: var(--deck-extra, 0px); }
  html:not(.cc-static) body:not(.ed-editmode) #comment .how-steps-grid { display: block; position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px)); z-index: 2; height: var(--deck-h, 440px); overflow: hidden; background: var(--gray-0); }
  #comment .deck-wrap .how-step { position: absolute; left: 0; right: 0; top: var(--deck-pt, 44px); bottom: var(--deck-pb, 50px); margin: 0 !important; will-change: transform, filter; }

  /* « Les usages » : le titre reste collé en haut (marge de 10 px, voir .cc-title) ; chaque partie a son titre collé juste dessous pendant tout son défilement
     (le texte devient enfant direct de la ligne pour que le titre reste collé jusqu'à la fin de la partie, image comprise) ; l'image passe sous le texte */
  #segments .cc-title { --cc-bg: var(--gray-50); }
  body:not(.ed-editmode) #segments .segment-row { display: flex !important; flex-direction: column; gap: 0 !important; margin-top: 24px !important; }
  body:not(.ed-editmode) #segments .segment-row > :last-child { display: contents; }
  body:not(.ed-editmode) #segments .segment-row > :last-child > * { order: 2; }
  body:not(.ed-editmode) #segments .segment-row > :first-child { order: 1; flex: none; position: relative; height: 230px; margin: 14px 0 8px; }
  /* l'image garde le haut collé sous le sous-titre ; sa hauteur (--seg-h, posée par site.js) diminue au fil du défilement jusqu'à disparaître */
  body:not(.ed-editmode) #segments .segment-row > :first-child > * { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--seg-h, 100%) !important; }
  body:not(.ed-editmode) #segments .segment-row > :last-child > h3 { order: 0; position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px)); z-index: 3; margin: 0 !important; padding: 8px 0 10px; background: var(--gray-50); border-bottom: 1px solid var(--gray-300); }
  body:not(.ed-editmode) #segments .segment-row > :last-child > h3 + .usage-label { margin-top: 0; padding-top: 0; border-top: 0; order: 2; }
  body:not(.ed-editmode) #segments .segment-row .btn-outline-dark { align-self: flex-start; }

  /* « Vous êtes une marque ? » : titre → mosaïque → accroche → texte → bouton ; tout doit tenir dans l'écran : au défilement le titre rétrécit, disparaît, puis la mosaïque
     rétrécit jusqu'à disparaître (réduction progressive, site.js [data-progressive]) ; puces resserrées */
  body:not(.ed-editmode) #marque[data-progressive] { position: sticky; top: var(--hdr-min, 89px); z-index: 2; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: var(--act-min, 0); padding: 14px 22px 12px; background: var(--gray-0); }
  body:not(.ed-editmode) #marque .section-inner { width: 100%; padding: 0; }
  body:not(.ed-editmode) #marque .sponsor-marque { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
  body:not(.ed-editmode) #marque .sponsor-marque-text { display: contents; }
  body:not(.ed-editmode) #marque .sponsor-marque-text > * { order: 2; margin-top: 0 !important; }
  body:not(.ed-editmode) #marque .sponsor-marque-text > .eyebrow { order: 0; }
  body:not(.ed-editmode) #marque .sponsor-mosaic { order: 1; width: 100%; flex: none; height: var(--fit-h, auto); }
  body:not(.ed-editmode) #marque .sponsor-marque-text > .cta-row { order: 9; margin-top: 6px !important; }
  body:not(.ed-editmode) #marque .sponsor-marque-text > div:not(.eyebrow):not(.cta-row) { font-size: 14.5px !important; line-height: 1.45 !important; }
  body:not(.ed-editmode) #marque .usage-list { gap: 4px; margin-top: 0; }
  body:not(.ed-editmode) #marque .usage-list li { font-size: 14px; line-height: 1.35; padding-left: 20px; }
  body:not(.ed-editmode) #marque .usage-list li::before { top: 6px; width: 6px; height: 6px; }

  /* « Tarification » : le contenu occupe toute la hauteur de l'écran (rubrique retenue, comme les autres) */
  body:not(.ed-editmode) #tarifs { display: flex; flex-direction: column; justify-content: center; padding-top: 28px; padding-bottom: 28px; }
  body:not(.ed-editmode) #tarifs > .section-inner { width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; flex: 1 1 auto; max-height: 560px; }
  body:not(.ed-editmode) #tarifs .eyebrow { font-size: 14px; }
  body:not(.ed-editmode) #tarifs h2 { font-size: 36px !important; line-height: 1.15; margin-top: 0 !important; }
  body:not(.ed-editmode) #tarifs .usage-list { gap: 14px; margin-top: 0; }
  body:not(.ed-editmode) #tarifs .usage-list li { font-size: 19px; line-height: 1.45; padding-left: 28px; }
  body:not(.ed-editmode) #tarifs .usage-list li::before { top: 10px; width: 9px; height: 9px; }
  body:not(.ed-editmode) #tarifs > .section-inner > div:not(.eyebrow) { font-size: 19px !important; line-height: 1.5 !important; margin-top: 0 !important; }
  body:not(.ed-editmode) #tarifs .btn-outline-dark { margin-top: 0 !important; font-size: 18px; padding: 18px 32px; }

  /* « Réalisations » : le titre, l'accroche et le bandeau de logos restent collés en haut ; les accordéons défilent dessous jusqu'au bouton « Tester la démo » ;
     une fois ce bouton en bas de l'écran, la rubrique est retenue (site.js [data-hold-end]) */
  #realisations .cc-title { --cc-bg: var(--gray-950); }
  body:not(.ed-editmode) #realisations { padding-top: 40px; padding-bottom: 28px; }
  body:not(.ed-editmode) #realisations .rl-h2 { position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px)); z-index: 4; margin: 0 !important; padding: 0 0 8px; max-width: none !important; font-size: 24px !important; line-height: 1.2; background: var(--gray-950); }
  body:not(.ed-editmode) #realisations .logo-row { position: sticky; top: calc(var(--hdr-min, 89px) + var(--cc-title-h, 0px) + var(--rl-h2-h, 0px)); z-index: 4; margin: 0 auto !important; padding: 6px 0 12px; background: var(--gray-950); }
  body:not(.ed-editmode) #realisations .rl-head, body:not(.ed-editmode) #realisations .rl-head-text { display: contents; }   /* TriceraShow : titre, accroche et badge deviennent enfants directs (donc collables) */
  body:not(.ed-editmode) #realisations .award-badge-wrap { margin: 18px 0 14px; }
  /* un accordéon qui arrive au niveau du bandeau de logos disparaît en entier (site.js .rl-gone) : on n'en aperçoit jamais une tranche sous le bandeau */
  body:not(.ed-editmode) #realisations .real-item { transition: opacity 0.12s ease; }
  body:not(.ed-editmode) #realisations .real-item.rl-gone { opacity: 0; pointer-events: none; }
  body:not(.ed-editmode) #realisations .real-accordion { margin-top: 0; }
  body:not(.ed-editmode) .he-wrap::after { content: ""; display: block; height: var(--he-h, 22svh); }
  body:not(.ed-editmode) .he-wrap > [data-hold-end] { position: sticky; z-index: 2; }

  /* « Les solutions Tricera » : cartes empilées (règles #autres plus haut) ; fond blanc sur cette page */
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) #autres .cc-title { --cc-bg: var(--gray-0); }
}

/* petits écrans (hauteur ≤ 680 px) : hero et rubriques un peu plus compacts */
@media (max-width: 760px) and (max-height: 680px) {
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) h1.hero-h1 { font-size: 28px !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .hero-content > div:not(.cta-row):not(.eyebrow) { font-size: 14.5px !important; margin-top: 10px !important; }
  body:is([data-page="tricerasport"], [data-page="tricerashow"], [data-page="tricera-live"]) .hero-photo .hero-content { padding-top: 18px !important; padding-bottom: 20px !important; }
  body:not(.ed-editmode) #tarifs h2 { font-size: 30px !important; }
  body:not(.ed-editmode) #tarifs .usage-list li, body:not(.ed-editmode) #tarifs > .section-inner > div:not(.eyebrow) { font-size: 17px !important; }
}

/* TriceraSport : « Comment ça marche » — cards colorées. Même aspect partout : ordinateur (grille 2×2 dont la hauteur suit celle de la colonne « mockup + bouton »),
   mobile (paquet défilant, voir plus haut) et mode édition (le rendu se voit pendant la saisie). Couleurs inspirées du modèle ;
   --k = coefficient de taille du texte, posé par site.js pour que le texte remplisse la card. */
#comment .how-step-1 { --deck-bg: #ede1b6; --deck-ink: #9a7b14; }
#comment .how-step-2 { --deck-bg: #ffd6cc; --deck-ink: #c8451f; }
#comment .how-step-3 { --deck-bg: #dbe5d4; --deck-ink: #5f8f4c; }
#comment .how-step-4 { --deck-bg: #fdd3b3; --deck-ink: #cf6a1a; }
#comment .how-step { position: relative; margin: 0; padding: 20px 22px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;
  border-radius: 22px; background: var(--deck-bg); box-shadow: 0 8px 22px rgba(30,40,20,0.2); }
#comment .how-step::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 34%; aspect-ratio: 1; background: var(--picto) center / contain no-repeat; pointer-events: none; }
#comment .how-step > * { position: relative; z-index: 1; opacity: var(--ct, 1); }
#comment .how-step > p { font-size: calc(var(--k, 1) * 42px) !important; line-height: 1 !important; font-weight: 900 !important; color: var(--deck-ink) !important; margin: 0; }
#comment .how-step > p.lbl-long { font-size: calc(var(--k, 1) * 16px) !important; line-height: 1.2 !important; letter-spacing: 0.04em; text-transform: uppercase; }
#comment .how-step > div { font-size: calc(var(--k, 1) * 20px) !important; line-height: 1.22; font-weight: 800 !important; margin-top: calc(var(--k, 1) * 10px) !important; color: var(--gray-950); }
/* tout ce qui est sous le titre (descriptions, puces, retours à la ligne saisis dans le back-office) prend la taille « texte » ; l'enveloppe d'édition, elle, hérite */
#comment .how-step > div *:not(.ed-block) { font-size: calc(var(--k, 1) * 15.5px) !important; line-height: 1.4; font-weight: 500 !important; color: var(--gray-800, var(--gray-700)); }
#comment .how-step .ed-block { font: inherit !important; color: inherit !important; line-height: inherit !important; }
#comment .how-step .usage-list { gap: calc(var(--k, 1) * 5px); margin-top: calc(var(--k, 1) * 6px); }
#comment .how-step .usage-list li { padding-left: calc(var(--k, 1) * 20px); }
#comment .how-step .usage-list li::before { background: var(--deck-ink); top: 0.55em; width: calc(var(--k, 1) * 7px); height: calc(var(--k, 1) * 7px); }
body.ed-editmode #comment .how-step { cursor: text; }
body.ed-editmode #comment .how-step:hover { outline: 2px dashed var(--terracotta-500); outline-offset: 3px; }
/* ordinateur : 4 cards en grille 2×2 ; au-dessus de 900 px la grille a la hauteur de la colonne « mockup + bouton Essayer la démo » (elle ne la fait pas grandir : contain size) */
@media (min-width: 761px) {
  #comment .how-steps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 20px; }
}
@media (min-width: 900px) {
  #comment .how-steps-col { display: flex; flex-direction: column; min-height: 0; }
  #comment .how-steps-col > .how-steps-grid { flex: 1 1 0; min-height: 0; }
  #comment .how-steps-col .award-logo { height: 120px; }
  #comment .how-steps-col > div:not(.how-steps-grid) { margin-top: 20px !important; }
  #comment .how-grid { align-items: stretch; }
  #comment .how-steps-grid { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); contain: size; }
}
/* mode édition à largeur mobile : les 4 cards à la taille réelle d'une card de téléphone, l'une sous l'autre */
@media (max-width: 760px) {
  #comment .how-steps-grid { display: flex; flex-direction: column; gap: 16px; }   /* repli sans paquet défilant : cards l'une sous l'autre */
  body.ed-editmode #comment .how-steps-grid { flex-direction: row; flex-wrap: wrap; gap: 24px; }
  body.ed-editmode #comment .how-step { width: 346px; max-width: 100%; height: 470px; }
}

@media (max-width: 760px) {
  body:not(.ed-editmode) #concept > .section-inner > :first-child { margin-top: 28px !important; }
  body:not(.ed-editmode) #concept { padding-bottom: 28px; }
}