/* ════════════════════════════════════════════════════════════════════════════
   17/10/2026 01h (user : « l'assistant vocal et le prix, je veux que ça prenne tout l'écran,
   de droite à gauche, rempli, pas seulement rétréci ; regarde les autres pages »).
   Sur ordinateur, ces deux sections font exactement un écran sous l'en-tête et occupent
   toute la largeur du site, comme « Le produit, tel quel ». Rien n'est réduit par zoom :
   la mise en page passe en colonnes et les tailles suivent la hauteur de l'écran.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  /* Grands écrans : la page est agrandie par zoom (--z, index.html) ; une unité d'écran est donc
     divisée par ce facteur pour que « un écran » reste un écran. */
  #assistant,#pricing{--h1:calc(1vh / var(--z,1));--w1:calc(1vw / var(--z,1))}
  /* ── Assistant vocal : texte | téléphone | 4 avantages ── */
  html body #assistant.ia-band{min-height:calc(calc(100 * var(--h1)) - 72px);padding:clamp(20px,calc(3.2 * var(--h1)),44px) 0;display:flex;align-items:center;box-sizing:border-box}
  html body #assistant > .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.74fr) minmax(0,1.04fr);gap:clamp(20px,calc(2.4 * var(--w1)),40px);align-items:center}
  html body #assistant .ia-haut{display:contents}
  html body #assistant .ia-texte{padding:clamp(20px,calc(3 * var(--h1)),40px) clamp(22px,calc(2.2 * var(--w1)),36px)!important;margin:0}
  html body #assistant h2{font-size:clamp(30px,min(calc(3.6 * var(--w1)),calc(6.2 * var(--h1))),50px);margin-top:clamp(10px,calc(1.6 * var(--h1)),22px)}
  html body #assistant .ia-intro{font-size:clamp(15px,calc(2.1 * var(--h1)),19px);margin-top:clamp(9px,calc(1.4 * var(--h1)),22px);line-height:1.45}
  html body #assistant .ia-etapes{margin-top:clamp(12px,calc(2 * var(--h1)),26px);gap:clamp(6px,calc(1 * var(--h1)),10px);display:flex!important;flex-direction:column!important;align-items:flex-start}
  html body #assistant .ia-etapes li{flex:none!important;width:auto!important;margin:0!important}
  html body #assistant .ia-etapes li{font-size:13.5px;padding:6px 12px 6px 6px}
  html body #assistant .ia-etapes b{width:24px;height:24px;font-size:12.5px}
  html body #assistant .ia-etapes b{width:26px;height:26px;font-size:13px}
  html body #assistant .ia-cta{margin-top:clamp(12px,calc(2.2 * var(--h1)),30px)}
  html body #assistant .ia-stage{min-height:0;height:auto;padding:1.6em 0 0;align-content:center;font-size:min(calc((calc(100 * var(--h1)) - 150px) / 50),.9vw,15px)}
  html body #assistant .ia-stage::before{width:26em;height:26em}
  html body #assistant .ia-stage .ph{font-size:inherit}
  html body #assistant .ia-legende{margin-top:1.2em;font-size:13.5px}
  html body #assistant .ia-liste{margin:0;grid-template-columns:1fr;gap:clamp(8px,calc(1.4 * var(--h1)),14px);align-self:center}
  html body #assistant .ia-liste li{min-height:0;padding:clamp(14px,calc(2.2 * var(--h1)),22px) clamp(16px,calc(1.6 * var(--w1)),22px);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:center}
  html body #assistant .ia-liste li i{grid-row:1 / span 2;width:44px;height:44px;margin:0!important}
  html body #assistant .ia-liste li i svg{width:20px;height:20px}
  html body #assistant .ia-liste li::before{font-size:44px;top:8px;right:16px}
  html body #assistant .ia-liste b{font-size:clamp(17px,calc(2.4 * var(--h1)),20px)}
  html body #assistant .ia-liste span{font-size:clamp(13px,calc(1.8 * var(--h1)),14.5px);line-height:1.4}
  html body #assistant .ia-liste b{padding-right:2.4em}

  /* ── Prix : en-tête sur une ligne, choix de la taille, puis carte | contenu inclus ── */
  html body #pricing{min-height:calc(calc(100 * var(--h1)) - 72px);padding-top:clamp(12px,calc(1.8 * var(--h1)),44px)!important;padding-bottom:clamp(12px,calc(2 * var(--h1)),36px)!important;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
  html body #pricing .sec-head{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,calc(3 * var(--w1)),56px);align-items:end;margin:0 0 clamp(8px,calc(1.4 * var(--h1)),24px)!important}
  html body #pricing .sec-head .kick{grid-column:1;grid-row:1;justify-self:start;margin-bottom:clamp(8px,calc(1.4 * var(--h1)),14px)}
  html body #pricing .sec-head h2{grid-column:1;grid-row:2;align-self:end}
  html body #pricing .sec-head p{grid-column:2;grid-row:2;align-self:end;padding-bottom:.45em}
  html body #pricing .sec-head h2{font-size:clamp(32px,min(calc(4 * var(--w1)),calc(6.4 * var(--h1))),64px);margin:0!important}
  html body #pricing .sec-head p{font-size:clamp(15px,calc(2.1 * var(--h1)),18px);margin:0 0 .35em!important;max-width:30em}
  html body #pricing .tx{padding:0!important;max-width:none!important;width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(16px,calc(1.8 * var(--w1)),28px);grid-template-rows:auto 1fr auto}
  html body #pricing .tx-choix{grid-column:1 / -1;grid-row:1}
  html body #pricing .tx .tx-carte{display:contents}
  html body #pricing .tx-g{grid-column:1;grid-row:2 / span 2}
  html body #pricing .tx-d{grid-column:2;grid-row:2}
  html body #pricing .tx-note{grid-column:2;grid-row:3}
  html body #pricing .tx-choix{margin:0 0 clamp(10px,calc(1.8 * var(--h1)),22px)!important;padding:0!important}
  html body #pricing .tx-seg button{padding-top:clamp(8px,calc(1.2 * var(--h1)),14px)!important;padding-bottom:clamp(8px,calc(1.2 * var(--h1)),14px)!important}
  html body #pricing .tx-carte{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,calc(1.8 * var(--w1)),28px);align-items:stretch;max-width:none!important;width:100%;margin:0!important}
  html body #pricing .tx-g{padding:clamp(18px,calc(2.8 * var(--h1)),32px) clamp(22px,calc(2 * var(--w1)),32px)!important;display:flex;flex-direction:column}
  html body #pricing .tx-montant{font-size:clamp(56px,min(calc(8 * var(--w1)),calc(9.9 * var(--h1))),140px)!important}
  html body #pricing .tx-prix{margin-top:clamp(4px,calc(1 * var(--h1)),12px)!important}
  html body #pricing .tx-pour{margin-top:clamp(6px,calc(1.2 * var(--h1)),16px)!important;font-size:clamp(15px,calc(2.2 * var(--h1)),19px)}
  html body #pricing .tx-equipe{margin-top:clamp(5px,calc(1 * var(--h1)),14px)!important;padding:clamp(6px,calc(1 * var(--h1)),14px) 14px!important;font-size:14px}
  html body #pricing .tx-lim{margin-top:clamp(6px,calc(1.4 * var(--h1)),16px)!important}
  html body #pricing .tx-lim > div{padding-top:clamp(6px,calc(1.2 * var(--h1)),12px)!important;padding-bottom:clamp(6px,calc(1.2 * var(--h1)),12px)!important}
  html body #pricing .tx-lim dd{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body #pricing .tx-lim dt{font-size:clamp(18px,calc(2.8 * var(--h1)),30px)}
  html body #pricing .tx .tx-cta{margin-top:clamp(10px,calc(1.8 * var(--h1)),20px)!important;min-height:0!important;padding:6px 6px 6px 24px!important}
  html body #pricing .tx .tx-cta svg{width:clamp(36px,calc(5.6 * var(--h1)),48px);height:clamp(36px,calc(5.6 * var(--h1)),48px);padding:clamp(11px,calc(1.8 * var(--h1)),16px)}
  html body #pricing .tx-sous{margin-top:6px!important;font-size:11.5px;line-height:1.3}
  html body #pricing .tx-plan{align-self:flex-start;width:auto!important}
  html body #pricing .tx-plus{margin-top:0!important}
  html body #pricing .tx-d{gap:clamp(6px,calc(.9 * var(--h1)),14px);justify-content:space-between}
  html body #pricing .tx-d-t{font-size:clamp(22px,calc(3.4 * var(--h1)),32px)!important;margin:0!important}
  html body #pricing .tx-mod{gap:clamp(6px,calc(.8 * var(--h1)),12px) clamp(8px,calc(1 * var(--w1)),12px)}
  html body #pricing .tx .tx-mod li{min-height:0;height:clamp(76px,calc(10.9 * var(--h1)),118px);justify-content:space-between;padding:clamp(9px,calc(1.4 * var(--h1)),16px) clamp(12px,calc(1 * var(--w1)),16px);gap:4px;font-size:clamp(13px,calc(1.9 * var(--h1)),15.5px);line-height:1.2}
  html body #pricing .tx .tx-mod li svg{width:clamp(28px,calc(4 * var(--h1)),44px);height:clamp(28px,calc(4 * var(--h1)),44px);padding:clamp(6px,.9vh,10px)}
  html body #pricing .tx-plus > div{padding:clamp(8px,calc(1.2 * var(--h1)),20px) 18px;gap:2px}
  html body #pricing .tx-plus svg{width:24px;height:24px;margin-bottom:2px}
  html body #pricing .tx-plus span{font-size:13px;line-height:1.35}
  html body #pricing .tx-confiance li{padding:6px 13px}
  html body #pricing .tx-note{margin:clamp(8px,calc(1.4 * var(--h1)),16px) 0 0!important;font-size:12px;line-height:1.4}
}
/* Formule 499 € : « Illimité » était écrit en bleu nuit sur la carte bleue, illisible. */
html body .tx[data-plan="large"] .tx-lim dt{color:#fff}

/* 17/10/2026 01h50 (user : « je veux l'écran normal », pas recadré) : la vidéo du produit
   est entière, donc son cadre prend plus de largeur pour rester lisible. */
@media (min-width:1024px){
  .v6 .hf-inner.hf-deux{grid-template-columns:minmax(0,.96fr) minmax(0,1.18fr)!important;gap:clamp(30px,3vw,52px)!important}
}
@media (min-width:1024px) and (max-width:1420px){
  .v6 .hero-film .trust{font-size:13.5px;gap:8px}
}

/* ════════════════════════════════════════════════════════════════════════════
   17/10/2026 02h (user : « améliore le prix, l'assistant vocal et cette forme de
   filtre au maximum »). Trois retouches de finition, à toutes les tailles d'écran.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Le choix de la taille d'entreprise : une vraie piste creusée, un seul
      élément en relief, celui qui est choisi. ── */
html body .tx-choix{align-items:center;gap:14px}
html body .tx-choix-t{color:#5B6474;font:600 15px/1 var(--v6-font,'Barlow',sans-serif);letter-spacing:.01em}
html body .tx-seg{border:0!important;background:#E6ECFB!important;padding:5px!important;box-shadow:inset 0 1px 2px rgba(27,36,51,.07)!important}
html body .tx-seg button{min-height:44px;padding:0 22px;color:#44527A!important;font:700 15px/1 var(--v6-font,'Barlow',sans-serif);letter-spacing:.005em;transition:color .18s}
html body .tx-seg button:hover{color:#1B2433!important}
html body .tx-seg button.on,html body .tx-seg button.on:hover{color:#fff!important}
html body .tx-seg-curseur{background:#2F5BEA!important;box-shadow:0 8px 18px -8px rgba(47,91,234,.7)!important}

/* ── 2. Tarif : la carte respire, les fonctions incluses se lisent en un coup d'œil. ── */
html body #pricing .tx-g{box-shadow:0 30px 60px -36px rgba(27,52,120,.6)}
html body #pricing .tx-plan{letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.18)!important;color:#fff!important;backdrop-filter:blur(2px)}
html body #pricing .tx-equipe{background:rgba(255,255,255,.14)!important;backdrop-filter:blur(2px)}
html body #pricing .tx-lim,html body #pricing .tx-lim > div + div{border-color:rgba(255,255,255,.22)!important}
html body #pricing .tx .tx-cta{transition:transform .16s,box-shadow .16s}
html body #pricing .tx .tx-cta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(0,0,0,.45)}
html body #pricing .tx .tx-mod li{border-color:#E4EAF6!important;box-shadow:0 10px 22px -20px rgba(27,52,120,.5)!important;transition:transform .16s,box-shadow .16s,border-color .16s}
html body #pricing .tx .tx-mod li:hover{transform:translateY(-2px);border-color:#C9D8F8!important;box-shadow:0 16px 28px -20px rgba(27,52,120,.65)!important}
html body #pricing .tx-plus > div{transition:transform .16s}
html body #pricing .tx-plus > div:hover{transform:translateY(-2px)}

/* ── 3. Assistant vocal : la colonne de gauche devient une carte franche, les
      quatre atouts se lisent sans que le numéro gêne le titre. ── */
html body #assistant .ia-texte{background:#fff;border:1px solid #EFF1F6;border-radius:28px;box-shadow:0 30px 60px -44px rgba(27,36,51,.5)}
html body #assistant .ia-etapes li{background:#FFF7F0;border-color:#FFE2CC;transition:transform .16s}
html body #assistant .ia-etapes li:hover{transform:translateY(-1px)}
html body #assistant .ia-liste li{border-color:#EDEFF4;box-shadow:0 12px 26px -24px rgba(27,36,51,.55);transition:transform .16s,box-shadow .16s}
html body #assistant .ia-liste li:hover{transform:translateY(-2px);box-shadow:0 18px 32px -24px rgba(27,36,51,.7)}
html body #assistant .ia-liste li::before{opacity:.2}
html body #assistant .ia-liste li i{box-shadow:0 10px 20px -12px rgba(249,115,22,.9)}
html body #assistant .ia-liste li:nth-child(3) i{box-shadow:0 10px 20px -12px rgba(59,91,219,.9)}

/* Portables à écran bas (720-760 px utiles) : quelques pixels de marge en moins, pour que les
   deux sections tiennent encore exactement dans la hauteur visible. */
@media (min-width:1024px) and (max-height:790px){
  html body #assistant .ia-texte{padding-top:17px!important;padding-bottom:17px!important}
  html body #pricing .tx-g{padding-top:17px!important;padding-bottom:17px!important}
}
@media (min-width:1024px) and (max-width:1330px){
  html body #pricing .tx .tx-mod li{height:clamp(68px,calc(10 * var(--h1)),118px);font-size:14px}
  html body #pricing .sec-head p{font-size:14.5px;line-height:1.4}
  html body #pricing .tx-plus b{font-size:16px}
  html body #pricing .tx-plus span{font-size:12.5px}
}

/* ── Fenêtre plus petite qu'un écran d'ordinateur (js/09-ecran-bureau.js, 22/10/2026) ──
   La mise en page d'ordinateur est gardée et réduite ; « un écran » vaut --ecran-h (la hauteur
   de la fenêtre, plafonnée à un format couché), ramené à l'échelle de la réduction. */
html.stk-ecran-bureau body #assistant,html.stk-ecran-bureau body #pricing{--h1:calc(var(--ecran-h,100vh) / 100 / var(--z,1))}
html.stk-ecran-bureau body .v6 :is(.hero.hero-film,#pricing,.sm-plein){min-height:calc((var(--ecran-h,100vh) - 73px * var(--z,1)) / var(--z,1)) !important}

/* Pages FAQ et Fonctionnalités : sur un écran d'ordinateur, tout se voit sans descendre.
   16 questions en deux colonnes (au lieu d'une longue liste à gauche), 8 fonctions en 4 × 2. */
@media (min-width:900px){
  #lscreen-faq > .inner,#lscreen-features > .inner{padding:22px 0 40px}
  #lscreen-faq .faq-item summary{padding-top:13px;padding-bottom:13px;line-height:1.3;text-wrap:pretty}
  #lscreen-faq .inner-intro{margin-bottom:18px}
  #lscreen-faq .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-width:none;gap:8px 14px}
  #lscreen-features .feat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Connexion / inscription : la carte se centre dans l'écran visible. La hauteur « un écran »
   était mesurée avant l'agrandissement des grands écrans (zoom) : 135 px de vide à faire défiler. */
@media (min-width:781px){
  #site-landing .auth-wrap{min-height:calc(100dvh / var(--z,1) - 140px)}
}

/* Tarif (22/10, user : « des mots sur les côtés, ça doit être centré, jamais à droite ni à
   gauche ») : titre, phrase, choix de la taille et note, tous au centre — accueil et page Tarif. */
html body #pricing .sec-head{display:flex!important;flex-direction:column;align-items:center;text-align:center}
html body #pricing .sec-head .kick{justify-self:auto;align-self:center}
html body #pricing .sec-head p{padding-bottom:0;max-width:40em;margin-top:.45em!important}
html body :is(#pricing,#lscreen-pricing) .tx-choix{justify-content:center!important}
html body :is(#pricing,#lscreen-pricing) .tx-note{text-align:center}
#lscreen-pricing .wrap > .v6 > :is(.inner-eyebrow,.inner-title,.inner-intro){text-align:center;margin-left:auto;margin-right:auto}
#lscreen-pricing .wrap > .v6 > .inner-eyebrow{display:flex;justify-content:center}
html body #pricing .sec-head :is(h2,p){align-self:center!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;justify-self:center!important}
/* 23/10/2026 (user : « un petit bug de remise en forme quand on recharge la page ») : les
   pastilles des situations sont posées par un script en fin de page, après le premier affichage.
   js/09-ecran-bureau.js mesurait donc « Vécu sur le terrain » 34,5 px trop bas, affichait la page
   à l'échelle 1, puis la réduisait d'un coup (en-tête et textes rapetissaient sous les yeux).
   La rangée garde sa hauteur dès le départ : le calcul est juste du premier coup. */
@media (min-width:600px){#lscreen-home .v6 .vt-chapitres:empty{min-height:34.5px}}