/* ════════════════════════════════════════════════════════════════════════════
   ACCUEIL PLEINE LARGEUR — 22/10/2026 19h30 (user : « ça ne prend pas toute la place de
   l'écran de gauche à droite, il faut l'occuper ; le texte du haut prenait toute la place de
   gauche ; l'assistant vocal, on dirait une image collée, 4 fois plus stylé ; les boutons
   des situations sont transparents, c'est moche ; le vrai fond, une couleur plus agréable »).

   Le contenu était tenu dans 1 100–1 160 px au centre : sur un écran de portable réduit pour
   tenir en hauteur, il restait 250 px vides de chaque côté. Il occupe maintenant toute la
   largeur, avec une marge de bord régulière. Le texte n'est pas modifié ici.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  /* ── Toute la largeur, en-tête compris (bords alignés du haut en bas) ── */
  #site-landing > header.hdr > .hdr-inner,
  #lscreen-home > .v6 .wrap{
    max-width:1680px !important;
    padding-left:clamp(28px,3.6vw,72px) !important;padding-right:clamp(28px,3.6vw,72px) !important}
  #lscreen-home > .v6 :is(.vt-chapitres,.faq){max-width:none !important}

  /* ── Haut de page : le titre occupe toute la colonne de gauche ── */
  #lscreen-home .v6 .hf-inner.hf-deux{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) !important;gap:clamp(36px,4vw,80px) !important}
  #lscreen-home .v6 .hero-film h1{max-width:none !important;font-size:clamp(42px,3.3vw,72px) !important;line-height:1.02 !important}
  #lscreen-home .v6 .hero-film .sub{max-width:34em !important;font-size:clamp(17px,1.45vw,23px) !important}

  /* ── Vécu sur le terrain : 7 situations sur une ligne, en vraies pastilles blanches ── */
  #lscreen-home .v6 .vt-chapitres{flex-wrap:nowrap;gap:10px}
  #lscreen-home .v6 .vt-chap:not(.on){background:#fff !important;border-color:rgba(12,18,32,.10) !important;
    box-shadow:0 1px 2px rgba(12,18,32,.06),0 6px 16px -12px rgba(12,18,32,.35)}
  /* la scène suit la largeur (16/10) : en pleine largeur elle devenait trop haute pour l'écran */
  #lscreen-home .v6 #situations .vt-media{aspect-ratio:auto !important;height:clamp(330px,26vw,470px) !important}
  #lscreen-home .v6 .vt-chap:not(.on):hover{background:#fff !important;border-color:rgba(249,115,22,.55) !important}

  /* ── Votre rentabilité : texte et vidéo se partagent toute la largeur ── */
  #lscreen-home .v6 .tk3-grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;gap:clamp(36px,4vw,80px) !important}
  #lscreen-home .v6 .tk3-txt p{max-width:36em !important}

  /* ── Assistant vocal : une vraie scène, plus une carte posée sur du blanc ──
     Fond propre à la section (blanc chaud, halo orange derrière le téléphone, trame fine),
     texte posé directement dessus, téléphone agrandi. Deux colonnes (les 4 avantages ont
     été retirés : la 3e colonne restait vide). */
  html body #assistant.ia-band{position:relative;overflow:hidden;isolation:isolate;
    background:
      radial-gradient(42% 70% at 74% 52%,rgba(249,115,22,.22),rgba(249,115,22,0) 70%),
      radial-gradient(30% 40% at 12% 18%,rgba(99,102,241,.10),rgba(99,102,241,0) 70%),
      linear-gradient(180deg,#FFFDFB 0%,#FFF6EE 100%) !important}
  html body #assistant.ia-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background-image:linear-gradient(rgba(12,18,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,18,32,.045) 1px,transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(70% 80% at 60% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 80% at 60% 50%,#000 30%,transparent 80%)}
  html body #assistant > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;align-items:center !important;gap:clamp(30px,4vw,90px) !important}
  html body #assistant .ia-texte{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
  html body #assistant h2{font-size:clamp(40px,min(calc(4.6 * var(--vwv,1vw)),calc(8 * var(--h1,1vh))),84px) !important;line-height:1 !important;letter-spacing:-.03em}
  html body #assistant .ia-intro{font-size:clamp(16px,min(calc(1.35 * var(--vwv,1vw)),calc(2.4 * var(--h1,1vh))),22px) !important;max-width:30em}
  html body #assistant .ia-etapes{flex-direction:row !important;flex-wrap:wrap;gap:10px !important}
  html body #assistant .ia-etapes li{background:#fff !important;box-shadow:0 1px 2px rgba(12,18,32,.06),0 8px 20px -14px rgba(12,18,32,.4)}
  html body #assistant .ia-stage{justify-self:center;font-size:min(calc((calc(100 * var(--h1,1vh)) - 140px) / 50),calc(1.1 * var(--vwv,1vw)),17px) !important;padding-top:1em !important}
  html body #assistant .ia-stage::before{width:30em !important;height:30em !important;
    background:radial-gradient(circle,rgba(249,115,22,.30) 0%,rgba(249,115,22,.10) 55%,rgba(249,115,22,0) 72%) !important}
  html body #assistant .ia-legende{font-size:14px !important}
}

/* ── Le vrai fond de l'accueil : plus de pêche ──
   « Vécu sur le terrain » et « Vos questions » restent posés dessus, comme demandé ; seule la
   couleur change, pour une brume claire et douce. Le logo du fond reste à sa place. */
html:has(> body:not(.dark-theme) #lscreen-home.on){background:#EEF1F6 !important}
html body:not(.dark-theme):has(#lscreen-home.on)::after{background:linear-gradient(180deg,#E8EDF4 0%,#F0F3F8 45%,#F8FAFC 100%) !important}
html body:not(.dark-theme) #lscreen-home .v6 #faq{--fond-clair:transparent}
/* le logo du fond, pêche, se fond dans la brume au lieu de trancher dessus */
html body:not(.dark-theme) #lscreen-home.on > .filigrane-accueil{opacity:.5}

/* ── Tarif allégé (22/10 20h, user : « trop d'informations, du texte partout dans tous les
   sens, grand ou petit écran ») ──
   On garde : le choix de la taille, le prix, ses 3 plafonds, le bouton d'essai, et ce qui est
   inclus en simple liste. On retire : la phrase sous le titre, l'étiquette du choix, l'encadré
   « équipe », la mention sous le bouton, les deux cartes, les pastilles et la note de bas de
   bloc (la règle des plafonds reste dans les questions de la page Tarif et dans les CGU). */
html body #site-landing:not(#_) :is(#pricing,#lscreen-pricing) .tx :is(.tx-equipe,.tx-sous,.tx-plus,.tx-confiance,.tx-note,.tx-choix-t){display:none !important}
#pricing .sec-head p,#lscreen-pricing .wrap > .v6 > .inner-intro{display:none !important}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 28px !important;margin-top:14px}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li{height:auto !important;min-height:0 !important;display:flex !important;flex-direction:row !important;align-items:center !important;
  justify-content:flex-start !important;gap:12px !important;padding:13px 2px !important;background:none !important;border:0 !important;border-bottom:1px solid rgba(12,18,32,.08) !important;
  border-radius:0 !important;box-shadow:none !important;font-size:15.5px !important;font-weight:600;text-align:left !important}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li svg{width:30px !important;height:30px !important;padding:6px !important;flex:none;margin:0 !important}
html body :is(#pricing,#lscreen-pricing) .tx-d{justify-content:center !important;gap:6px !important}
@media (max-width:600px){
  html body #site-landing :is(#pricing,#lscreen-pricing) .tx .tx-mod{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 14px !important}
  html body #site-landing :is(#pricing,#lscreen-pricing) .tx .tx-mod li{padding:10px 0 !important;font-size:13.5px !important;gap:8px !important;line-height:1.25}
  html body #site-landing :is(#pricing,#lscreen-pricing) .tx .tx-mod li svg{width:28px !important;height:28px !important;padding:6px !important}
}
html body #pricing .sec-head{margin-bottom:clamp(14px,2.4vh,26px) !important}
/* L'écran du téléphone est une vraie capture de l'appli : rien ne se pose dessus. */
html body #assistant .ia-stage .ia-stick{display:none !important}

/* ── Tarif : une seule carte (22/10 20h35, user : « moche ») ──
   Le prix (bleu) et ce qui est inclus (blanc) étaient deux blocs posés côte à côte dans le
   vide. Ils forment maintenant une seule carte, centrée, à la largeur d'une carte. */
html body :is(#pricing,#lscreen-pricing) .tx{display:block !important;max-width:1180px !important;margin:0 auto !important;width:100%}
html body :is(#pricing,#lscreen-pricing) .tx .tx-carte{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:0 !important;
  background:#fff;border-radius:28px;overflow:hidden;max-width:none !important;margin:0 !important;
  box-shadow:0 0 0 1px rgba(12,18,32,.06),0 40px 80px -48px rgba(27,36,51,.5)}
html body :is(#pricing,#lscreen-pricing) .tx .tx-g{border-radius:0 !important;box-shadow:none !important;margin:0 !important;grid-column:auto !important;grid-row:auto !important}
html body :is(#pricing,#lscreen-pricing) .tx .tx-d{grid-column:auto !important;grid-row:auto !important;padding:clamp(22px,3vw,44px) clamp(22px,3vw,48px) !important;
  display:flex !important;flex-direction:column !important;justify-content:center !important;background:#fff}
html body :is(#pricing,#lscreen-pricing) .tx .tx-d-t{font-size:clamp(21px,1.9vw,28px) !important;margin:0 0 6px !important}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod{margin-top:8px !important;gap:0 36px !important}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li{font-size:clamp(15px,1.15vw,17px) !important;padding:clamp(11px,1.3vw,16px) 0 !important;color:#0C1220}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li:nth-last-child(-n+2){border-bottom:0 !important}
html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li svg{width:34px !important;height:34px !important;padding:8px !important;border-radius:10px;
  background:#FFF1E6 !important;color:#F97316 !important;stroke:#F97316}
html body :is(#pricing,#lscreen-pricing) .tx-choix{margin:0 auto clamp(14px,2vh,24px) !important}
@media (min-width:900px){
  html body :is(#pricing,#lscreen-pricing) .tx .tx-carte{grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr) !important}
}


/* ── Tarif, 20h40 (user : « il n'y a plus rien, prends plus d'espace, c'est pas stylé ») ──
   Sur ordinateur, la carte occupe toute la largeur et presque toute la hauteur de l'écran ;
   prix, liste et icônes grandissent avec elle. Le côté « inclus » reçoit un fond travaillé. */
@media (min-width:1024px){
  html body :is(#pricing,#lscreen-pricing) .tx{max-width:none !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-carte{grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr) !important;
    min-height:min(calc(64 * var(--h1,1vh)),640px);border-radius:32px}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-g{padding:clamp(28px,3.2vw,56px) !important;display:flex !important;flex-direction:column !important;justify-content:center !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-montant{font-size:clamp(84px,min(8.6vw,calc(15 * var(--h1,1vh))),168px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-pour{font-size:clamp(17px,1.5vw,24px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-lim dt{font-size:clamp(24px,2.3vw,40px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-lim dd{font-size:clamp(12px,.95vw,15px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-cta{font-size:clamp(16px,1.35vw,21px) !important;min-height:clamp(54px,4.4vw,72px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-d{position:relative;overflow:hidden;padding:clamp(30px,3.6vw,64px) clamp(30px,4vw,72px) !important;
    background:radial-gradient(60% 80% at 100% 0%,rgba(249,115,22,.10),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(59,91,219,.08),transparent 60%),#fff !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-d-t{font-size:clamp(26px,2.5vw,44px) !important;letter-spacing:-.02em;margin-bottom:clamp(10px,1.6vh,22px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-mod{gap:0 clamp(28px,3vw,56px) !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li{font-size:clamp(16px,1.4vw,22px) !important;gap:clamp(12px,1.2vw,18px) !important;padding:clamp(14px,2.3vh,26px) 0 !important}
  html body :is(#pricing,#lscreen-pricing) .tx .tx-mod li svg{width:clamp(38px,3.2vw,52px) !important;height:clamp(38px,3.2vw,52px) !important;padding:clamp(9px,.8vw,13px) !important;border-radius:14px}
}
