html, body { margin: 0; padding: 0; background: #FFFFFF; scroll-behavior: smooth; }
  :root { --acc: #C8FF00; --acc-hover: hsl(73 100% 45%); --acc-border: hsl(73 100% 41%); --acc-strong: hsl(73 100% 36%); --acc-deep: hsl(73 100% 25%); --acc-text: hsl(73 100% 18%); --acc-text2: hsl(73 40% 22%); --acc-tint: hsl(73 65% 93%); --acc-tint2: hsl(73 70% 97%); --acc-tint-border: hsl(73 55% 86%); --acc-contrast: #1A1A1A; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--acc-deep); }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
  @keyframes paneIn { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
  @keyframes aiUser { 0%,1% { opacity: 0; transform: translateY(6px); } 4%,92% { opacity: 1; transform: none; } 97%,100% { opacity: 0; transform: translateY(-4px); } }
  @keyframes aiThink { 0%,5% { opacity: 0; } 8%,26% { opacity: 1; } 29%,100% { opacity: 0; } }
  @keyframes aiTrace { 0%,10% { opacity: 0; } 13%,92% { opacity: 1; } 97%,100% { opacity: 0; } }
  @keyframes aiS1 { 0%,10% { opacity: 0; transform: translateY(5px); } 13%,92% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
  @keyframes aiS2 { 0%,16% { opacity: 0; transform: translateY(5px); } 19%,92% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
  @keyframes aiS3 { 0%,22% { opacity: 0; transform: translateY(5px); } 25%,92% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
  @keyframes aiD1 { 0%,15% { opacity: 1; } 16%,100% { opacity: 0; } }
  @keyframes aiC1 { 0%,15% { opacity: 0; } 16%,100% { opacity: 1; } }
  @keyframes aiD2 { 0%,21% { opacity: 1; } 22%,100% { opacity: 0; } }
  @keyframes aiC2 { 0%,21% { opacity: 0; } 22%,100% { opacity: 1; } }
  @keyframes aiD3 { 0%,27% { opacity: 1; } 28%,100% { opacity: 0; } }
  @keyframes aiC3 { 0%,27% { opacity: 0; } 28%,100% { opacity: 1; } }
  @keyframes aiA1 { 0%,30% { opacity: 0; } 33%,92% { opacity: 1; } 97%,100% { opacity: 0; } }
  @keyframes aiA2 { 0%,38% { opacity: 0; } 41%,92% { opacity: 1; } 97%,100% { opacity: 0; } }
  @keyframes aiA3 { 0%,46% { opacity: 0; } 49%,92% { opacity: 1; } 97%,100% { opacity: 0; } }
  @keyframes aiCur { 0%,30% { opacity: 0; } 31%,54% { opacity: 1; } 56%,100% { opacity: 0; } }
  @keyframes aiAct { 0%,56% { opacity: 0; transform: translateY(5px); } 59%,92% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
  @keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes donutIn { from { opacity: 0; transform: rotate(-24deg) scale(0.9); } to { opacity: 1; transform: none; } }
  @keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes mockIn { from { opacity: 0; transform: translateY(38px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
  @keyframes dotB { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
  @keyframes offreA { 0%, 6% { opacity: 0; transform: translateY(7px); } 13%, 86% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(-4px); } }
  @keyframes offreB { 0%, 16% { opacity: 0; transform: translateY(7px); } 23%, 86% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(-4px); } }
  @keyframes offreC { 0%, 26% { opacity: 0; transform: translateY(7px); } 33%, 86% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(-4px); } }
  @media (min-width: 861px) and (max-width: 1050px) {
    [data-m-narrow-hide] { display: none !important; }
    [data-m-grid3] { grid-template-columns: 1.5fr 0.62fr 0.78fr 0.78fr 1.15fr 0.92fr !important; }
  }
  @media (max-width: 860px) {
    [data-m-grid3] { grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) minmax(0, 1fr) !important; }
    [data-m-mid-hide] { display: none !important; }
  }
  @media (max-width: 780px) {
    [data-m-hide] { display: none !important; }
    [data-m-pad] { padding-left: 18px !important; padding-right: 18px !important; }
    [data-m-sec] { padding: 52px 18px !important; }
    [data-m-stack] { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
    [data-m-2col] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    [data-m-h1] { font-size: 36px !important; letter-spacing: -1.4px !important; }
    [data-m-h2] { font-size: 25px !important; letter-spacing: -0.9px !important; }
    [data-m-wrap] { white-space: normal !important; flex-wrap: wrap !important; }
    [data-m-full] { width: 100% !important; }
    [data-m-row] { flex-direction: row !important; overflow-x: auto !important; border-right: none !important; border-bottom: 1px solid #EEEFF1 !important; padding: 14px 18px !important; gap: 16px !important; }
    [data-m-scale] { transform: translate(-50%, -50%) scale(0.5) !important; }
    [data-m-grid3] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1fr) !important; }
    [data-m-nav] { gap: 12px !important; padding: 0 18px !important; }
    [data-m-quote] { font-size: 19px !important; }
    [data-m-canvaspad] { padding: 22px 0 0 22px !important; }
    [data-m-sticky] { position: static !important; }
    [data-m-sticky] { position: static !important; padding: 20px 0 !important; }
  }
  @media (max-width: 560px) {
    [data-m-sec] { padding: 44px 16px !important; }
    [data-m-pad] { padding-left: 16px !important; padding-right: 16px !important; }
    [data-m-h1] { font-size: 30px !important; letter-spacing: -1.1px !important; }
    [data-m-h2] { font-size: 22px !important; letter-spacing: -0.7px !important; }
    [data-m-h2] br { display: none !important; }
    [data-m-quote] { font-size: 17px !important; letter-spacing: -0.3px !important; line-height: 1.55 !important; }
    [data-m-cta] { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    [data-m-cta] > a { justify-content: center !important; width: 100% !important; box-sizing: border-box !important; }
    [data-m-cta] > span { text-align: center !important; }
    [data-m-wrap] { gap: 14px !important; row-gap: 8px !important; }
    [data-m-price] { font-size: 30px !important; letter-spacing: -1.1px !important; }
    [data-m-card] { padding: 20px 18px 18px !important; box-shadow: 0 0 0 4px #F4F5F6, 0 0 0 5px #E9EAEC !important; }
    [data-m-nav] { height: 56px !important; padding: 0 16px !important; }
  }
  @keyframes cellPulse { 0%, 18% { box-shadow: 0 0 0 0 rgba(108,75,200,0); } 34%, 68% { box-shadow: 0 0 0 3px rgba(108,75,200,0.16); } 100% { box-shadow: 0 0 0 0 rgba(108,75,200,0); } }
  @keyframes tagIn { 0%, 12% { opacity: 0; transform: translateY(3px); } 24%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px); } }
  @keyframes rowGlow { 0%, 46% { background: transparent; } 58%, 78% { background: var(--acc-tint2); } 100% { background: transparent; } }
  @keyframes floatCenter { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(calc(-50% + 2px), calc(-50% - 5px)); } }
  @keyframes typeB { 0% { clip-path: inset(0 100% 0 0); } 30%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
  @keyframes pressB { 0%, 32%, 39%, 100% { transform: none; } 34%, 37% { transform: scale(0.9); } }
  @keyframes st1 { 0%, 36% { opacity: 0; transform: translateY(3px); } 42%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px); } }
  @keyframes st2 { 0%, 48% { opacity: 0; transform: translateY(3px); } 54%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px); } }
  @keyframes st3 { 0%, 58% { opacity: 0; transform: translateY(3px); } 64%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px); } }
  @keyframes st4 { 0%, 70% { opacity: 0; transform: translateY(3px); } 76%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(3px); } }
  @keyframes thinkOut { 0%, 36% { opacity: 0; } 42%, 68% { opacity: 1; } 74%, 100% { opacity: 0; } }
  @keyframes spinA { to { transform: rotate(360deg); } }
  @keyframes typeA { 0% { clip-path: inset(0 100% 0 0); } 42%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
  @keyframes revealA { 0%, 40% { opacity: 0; transform: translateY(4px); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
  @keyframes pressA { 0%, 43%, 55%, 100% { transform: none; } 47%, 51% { transform: scale(0.9); } }
  @keyframes floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -5px); } }
  @keyframes floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 4px); } }
  @keyframes ring { 0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.55; } 70%, 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } }
  @keyframes grainA { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 3%); } 40% { transform: translate(4%, -5%); } 60% { transform: translate(-3%, -3%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); } }
  @keyframes grainB { 0% { transform: translate(0, 0); } 25% { transform: translate(5%, -4%); } 50% { transform: translate(-5%, 5%); } 75% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
  /* Section Plateforme : une boucle de 12 s par fenêtre, comme la carte Assistant du héros. */
  @keyframes tdDraft { 0%, 6% { opacity: 0; transform: translateY(6px); } 11%, 46% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; transform: translateY(-4px); } }
  @keyframes tdPress { 0%, 43%, 47%, 100% { transform: none; } 44.5% { transform: scale(0.94); } }
  @keyframes tdSlot { 0%, 50% { height: 104px; } 56%, 96% { height: 40px; } 100% { height: 104px; } }
  @keyframes tdSent { 0%, 52% { opacity: 0; transform: translateY(6px); } 56%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
  @keyframes tdOn { 0%, 53% { opacity: 0; } 54%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes tdStrike { 0%, 54% { width: 0; } 58%, 96% { width: 100%; } 97%, 100% { width: 0; } }
  @keyframes tdGrey { 0%, 55% { color: inherit; } 56%, 96% { color: #A0A2A6; } 97%, 100% { color: inherit; } }
  @keyframes exD1 { 0%, 5% { opacity: 1; } 6%, 100% { opacity: 0; } }
  @keyframes exC1 { 0%, 5% { opacity: 0; } 6%, 100% { opacity: 1; } }
  @keyframes exD2 { 0%, 8% { opacity: 1; } 9%, 100% { opacity: 0; } }
  @keyframes exC2 { 0%, 8% { opacity: 0; } 9%, 100% { opacity: 1; } }
  @keyframes exD3 { 0%, 11% { opacity: 1; } 12%, 100% { opacity: 0; } }
  @keyframes exC3 { 0%, 11% { opacity: 0; } 12%, 100% { opacity: 1; } }
  @keyframes exD4 { 0%, 14% { opacity: 1; } 15%, 100% { opacity: 0; } }
  @keyframes exC4 { 0%, 14% { opacity: 0; } 15%, 100% { opacity: 1; } }
  @keyframes carteA { 0%, 16% { opacity: 0; transform: translateY(8px); } 22%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes carteB { 0%, 20% { opacity: 0; transform: translateY(8px); } 26%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes carteC { 0%, 24% { opacity: 0; transform: translateY(8px); } 30%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes recoIn { 0%, 34% { opacity: 0; transform: translateY(4px) scale(0.96); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes ctaIn { 0%, 40% { opacity: 0; transform: translateY(5px); } 45%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  @keyframes tkRow { 0%, 8% { max-height: 0; opacity: 0; border-bottom-width: 0; } 14%, 40% { max-height: 46px; opacity: 1; border-bottom-width: 1px; background: var(--acc-tint2); } 52%, 96% { max-height: 46px; opacity: 1; border-bottom-width: 1px; background: #FFFFFF; } 100% { max-height: 46px; opacity: 0; } }
  @keyframes tkShim { 0%, 14% { opacity: 0; } 15%, 31% { opacity: 1; } 32%, 100% { opacity: 0; } }
  @keyframes tkTag { 0%, 32% { opacity: 0; transform: translateY(3px); } 36%, 100% { opacity: 1; transform: none; } }
  @keyframes tkEch { 0%, 36% { opacity: 0; } 40%, 100% { opacity: 1; } }
  @keyframes repA { 0%, 18% { clip-path: inset(0 100% 0 0); } 58%, 94% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
  @keyframes fillX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ── La section Plateforme sur petit écran ─────────────────────────────────────────────
     Les fenêtres de produit portent des tables de cinq ou six colonnes : sous 780 px elles
     ne rétrécissent pas, elles se coupent. On retire donc les colonnes secondaires plutôt
     que de tout comprimer — la ligne reste lisible, et c'est ce que fait le produit. */
  @media (max-width: 560px) {
    [data-m-cta] > [data-m-ctabtn] { white-space: normal !important; line-height: 1.3; }
    [data-m-bottom] { flex-wrap: wrap !important; row-gap: 10px !important; }
    [data-m-bottom] > span:nth-child(2) { display: none !important; }
  }
  @media (max-width: 700px) {
    [data-m-tk] { grid-template-columns: 28px minmax(0, 1fr) 104px !important; }
    [data-m-tk] > *:nth-child(3), [data-m-tk] > *:nth-child(4), [data-m-tk] > *:nth-child(6) { display: none !important; }
    [data-m-cl] { grid-template-columns: minmax(0, 1fr) 104px !important; }
    [data-m-cl] > *:nth-child(2), [data-m-cl] > *:nth-child(3) { display: none !important; }
    [data-m-offres] { grid-template-columns: minmax(0, 1fr) !important; }
    [data-m-offres] > *:nth-child(n+2) { display: none !important; }
    [data-m-frise] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 0 !important; }
    [data-m-trait] { display: none !important; }
  }


/* ── Ajouts de la transposition ──────────────────────────────────────────────────────── */

/* Les 12 `style-hover` de la maquette, en règles réelles. */
.sv-0:hover { background: #F3F4F5; color: #1B1C1E; }
.sv-1:hover { background: #F3F4F5; color: #1B1C1E; }
.sv-2:hover { background: #F3F4F5; color: #1B1C1E; }
.sv-3:hover { background: #F3F4F5; color: #1B1C1E; }
.sv-4:hover { background: #F7F7F8; color: #1B1C1E; }
.sv-5:hover { background: #2C2D30; color: #FFFFFF; }
.sv-6:hover { background: #2C2D30; color: #FFFFFF; }
.sv-7:hover { background: #F7F7F8; }
.sv-8:hover { background: #303135; color: #FFFFFF; }
.sv-9:hover { border-color: rgba(23,24,26,0.5); color: #17181A; }
.sv-10:hover { border-color: #C6C8CC; color: #1B1C1E; }

/* ── Les variants rendus par le transposeur, pilotés par site.js ──────────────────────
   Chaque enveloppe doit être TRANSPARENTE à la mise en page : le `sc-if` de la maquette
   n'existait pas dans le flux, et un div de plus au milieu d'un conteneur flex déplace
   tout ce qu'il contient. D'où `display: contents` partout où l'enveloppe n'a rien à
   dire, et la reprise explicite du contexte flex là où l'enfant s'appuie dessus. */

/* Le parent des panneaux est `flex-direction: column` et l'enfant porte `flex: 1` :
   l'enveloppe doit reprendre les deux, sans quoi le panneau ne remplit plus la fenêtre. */
.vue-hero { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vue-hero[hidden] { display: none; }
/* L'animation d'entrée du panneau ne rejoue pas toute seule quand on retire `hidden` —
   une animation CSS ne se relance qu'au changement de valeur. site.js pose cette classe
   après un reflow ; sans elle la rotation serait une coupure sèche. */
.vue-hero.entre { animation: paneIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* La réponse enveloppe un `<span>` dont la marge basse ne pousse rien s'il reste inline. */
.faq-reponse { display: flex; flex-direction: column; }
.faq-reponse[hidden] { display: none; }

[data-onglet] .onglet-actif, [data-onglet] .onglet-inactif { display: contents; }
[data-onglet] .onglet-inactif { display: none; }
[data-onglet].est-inactif .onglet-actif { display: none; }
[data-onglet].est-inactif .onglet-inactif { display: contents; }

.pastille-annuel { display: contents; }
body.tarif-mensuel .pastille-annuel { display: none; }

/* ── LE REFLET SUR « agentique » ───────────────────────────────────────────────────────
 *
 * Esprit « thinking » : un éclat clair qui traverse le mot, en gris, sans couleur.
 *
 * ⚠ PAS DE `::before` EN SURIMPRESSION, ET C'EST LA CORRECTION D'UN DÉFAUT VU À L'ÉCRAN.
 * La recette d'origine peint le reflet dans un pseudo-élément posé PAR-DESSUS le vrai mot.
 * Sa boîte s'arrête à la ligne de base : les jambages du « g » et du « q » descendent
 * dessous, n'y reçoivent aucun dégradé, et le mot du dessous réapparaît — le bas des lettres
 * gardait sa couleur d'origine pendant que le haut changeait. Un seul élément peint supprime
 * la superposition, donc le désaccord.
 *
 * ⚠ `padding-bottom` + `margin-bottom` NÉGATIF : la boîte doit descendre sous la ligne de
 * base pour que le dégradé atteigne les jambages, sans quoi ils deviendraient invisibles
 * (le texte est transparent, seul le fond le dessine). La marge négative annule la place
 * prise, donc la mise en page ne bouge pas d'un pixel.
 *
 * Le dégradé ne passe JAMAIS par du transparent : il va du noir du titre au gris clair puis
 * revient. Le mot est donc peint en permanence, et l'animation ne peut pas le faire
 * disparaître si elle est interrompue.
 */
.mot-agentique {
  display: inline-block;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  background-image: linear-gradient(100deg,
    #17181A 0%, #17181A 42%,
    #9AA0A6 50%,
    #17181A 58%, #17181A 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: mot-shimmer 3200ms linear infinite;
}
@keyframes mot-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
/* Au repos réduit, le mot redevient un mot noir ordinaire. Couper la seule animation
   laisserait un dégradé figé, donc un mot à moitié gris. */
@media (prefers-reduced-motion: reduce) {
  .mot-agentique {
    animation: none;
    background-image: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
}

/* Le second bouton du héros (03/09) : le survol du bouton blanc de la maquette. Sous 560 px,
   c'est `[data-m-cta]` (feuille de la maquette) qui empile les deux boutons. */
.cta-secondaire:hover { background: #F7F7F8; }
.cta-secondaire:focus-visible { outline: 2px solid var(--acc-strong); outline-offset: 3px; }

/* ── LA BARRE SUR PETIT ÉCRAN ───────────────────────────────────────────────────────────
 *
 * 04/09, « le bouton du header pas à droite » : les liens du milieu portent `flex: 1` et
 * poussent le bouton à droite ; sous 780 px ils sortent du flux et le ressort part avec eux.
 * C'est le logo qui le remplace (`margin-right: auto`).
 *
 * 07/09, « la page pricing n'est pas dispo en mobile » : les cinq entrées ne disparaissent
 * plus, elles passent dans un panneau que le bouton de menu ouvre (`menuMobile` dans
 * noyau.mjs pose le bouton, `menu.js` l'ouvre). Le panneau se pose sous la barre : d'où le
 * `position: relative` ici, et le `z-index` au-dessus du contenu de la page.
 *
 * ⚠ LE BOUTON N'EXISTE QUE SOUS 780 px. Au-dessus, le bloc de liens est la rangée de la
 * maquette, au pixel près : aucune de ces règles ne s'applique. */
[data-menu] { display: none; }
@media (max-width: 780px) {
  [data-m-nav] { position: relative; justify-content: flex-start !important; gap: 12px !important; }
  [data-m-nav] > a:first-of-type { margin-right: auto; }
  [data-m-nav] > div:last-of-type { order: 2; }
  [data-menu] {
    order: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 1px solid #E5E6E8; border-radius: 10px;
    background: #FFFFFF; color: #1B1C1E; font-size: 19px; line-height: 1; cursor: pointer;
  }
  [data-menu]:hover { background: #F7F7F8; }
  [data-menu]:focus-visible { outline: 2px solid var(--acc-strong); outline-offset: 2px; }
  /* ⚠ LES DEUX `display` SONT EN `!important`, ET C'EST OBLIGATOIRE. Le conteneur des liens
     porte le `style="display: flex"` en ligne de la maquette (menuMobile, noyau.mjs) : un
     `display: none` de feuille ne peut pas le battre, et le panneau restait ouvert en
     permanence sous 780 px (relevé du fondateur, 15/09). */
  [data-menu-liens] {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    display: none !important; flex-direction: column; align-items: stretch !important;
    gap: 2px !important; padding: 8px 12px 12px;
    background: #FFFFFF; border-bottom: 1px solid #E9EAEC;
    box-shadow: 0 16px 30px -20px rgba(27,28,30,0.5);
  }
  [data-menu][aria-expanded="true"] ~ [data-menu-liens] { display: flex !important; }
  [data-menu-liens] > a { padding: 11px 12px !important; font-size: 15px !important; }
}

/* Le focus clavier. La maquette dessine des `cursor: pointer` sans état de focus : sur un
   site réel, un onglet, une question de FAQ et un bouton de tarif se pilotent au clavier. */
[data-onglet]:focus-visible, [data-faq]:focus-visible, [data-tarif]:focus-visible {
  outline: 2px solid var(--acc-strong); outline-offset: 3px; border-radius: 6px;
}


/* ── Page Liste d'attente ──────────────────────────────────────────────────────────────────── */
#formulaire-liste input:focus-visible,
#formulaire-liste select:focus-visible { outline: none; border-color: var(--acc-border); box-shadow: 0 0 0 3px var(--acc-tint2); }
/* Le survol noir est réservé à l'envoi : sans le sélecteur d'attribut, il avalait aussi
   le bouton pointillé et les croix de retrait des collègues (texte gris sur fond noir). */
#formulaire-liste button[type="submit"]:hover { background: #303135; border-color: #303135; }
#formulaire-liste button:disabled { opacity: 0.6; cursor: default; }
#ajouter-collegue:hover { border-color: #B0B1B5; color: #17181A; background: #FFFFFF; }


/* ── Page Contact ─────────────────────────────────────────────────────────────────────── */
.canal:hover { border-color: var(--acc-border); box-shadow: 0 1px 2px rgba(27,28,30,0.06), 0 8px 20px -12px rgba(27,28,30,0.18); }
.canal { transition: border-color 0.18s, box-shadow 0.18s; }
#formulaire-contact input:focus-visible,
#formulaire-contact select:focus-visible,
#formulaire-contact textarea:focus-visible { outline: none; border-color: var(--acc-border); box-shadow: 0 0 0 3px var(--acc-tint2); }
#formulaire-contact button:hover { background: #303135; border-color: #303135; }
@media (max-width: 780px) { #formulaire-contact { padding: 20px !important; } }


/* ── Page Tarifs ──────────────────────────────────────────────────────────────────────── */
.tv-0:hover { background: #F3F4F5; color: #1B1C1E; }
.tv-1:hover { background: #F3F4F5; color: #1B1C1E; }
.tv-2:hover { background: #F3F4F5; color: #1B1C1E; }
.tv-3:hover { background: #F3F4F5; color: #1B1C1E; }
.tv-4:hover { background: #F7F7F8; color: #1B1C1E; }
.tv-5:hover { background: #2C2D30; color: #FFFFFF; }
.tv-6:hover { background: #303135; color: #FFFFFF; }
.tv-7:hover { border-color: rgba(23,24,26,0.5); color: #17181A; }
.tv-8:hover { border-color: #C6C8CC; color: #1B1C1E; }

/* Les dix-sept infobulles du tableau : rendues, masquées, montrées au survol et au focus
   clavier. La maquette les ouvrait en JavaScript ; `:hover` fait la même chose pour rien. */
.tv-aide .tv-bulle { display: none; }
.tv-aide:hover .tv-bulle, .tv-aide:focus-within .tv-bulle { display: contents; }

[data-faq]:focus-visible, [data-tarif]:focus-visible {
  outline: 2px solid var(--acc-strong); outline-offset: 3px; border-radius: 6px;
}

/* ── LE COMPARATIF SUR PETIT ÉCRAN (07/09) ──────────────────────────────────────────────
 *
 * La maquette masquait le tableau entier sous 780 px. Il défile maintenant à l'horizontale,
 * la colonne des intitulés collée à gauche — sans elle, on lit une croix sans savoir de quoi.
 *
 * ⚠ L'EN-TÊTE CESSE D'ÊTRE COLLANT, ET CE N'EST PAS UN CHOIX DE GOÛT. Dans un conteneur qui
 * défile en X, une `position: sticky` verticale s'accroche à CE conteneur et non à la page :
 * elle ne suivrait plus rien. Laissée en place, elle donnerait un en-tête qui ne colle pas.
 *
 * ⚠ 660 px DE LARGEUR MINIMALE, ET PAS MOINS. En dessous, « Découverte » et la pastille
 * « Populaire » débordent de leur colonne. C'est la largeur à laquelle l'en-tête tient.
 */
@media (max-width: 780px) {
  [data-comparatif-titre] { margin-top: 48px !important; flex-wrap: wrap; gap: 6px !important; }
  [data-comparatif] { overflow-x: auto; }
  [data-comparatif] > * { min-width: 660px; }
  [data-cmp-entete] { position: static !important; }
  [data-cmp-entete] > *:first-child, [data-cmp-ligne] > *:first-child {
    position: sticky; left: 0; z-index: 2; background: #FFFFFF;
  }
  /* Les trois boutons de l'en-tête : à 143 px de colonne ils s'écrivent « Rejoindre la
     lis… » (la maquette les coupe à l'ellipse), et les mêmes boutons sont sur les trois
     cartes, au-dessus. On ne redessine pas un bouton pour l'amputer. */
  [data-cmp-entete] a { display: none !important; }
  /* Les dix-sept infobulles s'ouvrent au survol : sans souris, l'icône ne fait rien, et le
     conteneur qui défile la rognerait. Un signe sans service ne se dessine pas. */
  [data-comparatif] .tv-aide { display: none !important; }
}