/* ===========================================================================
   V44 — refonte de deux zones. Retour Mendar du 31/10 18:26 UTC, deux
   captures a l'appui : « les parties la merite une attention particuliere
   il faut refondre ».
   Chargee APRES comptoir.css : elle ne touche que la colonne de decision du
   hero et la bande des trois avantages. Hero, photo, annotations, navigation,
   sept sections, parcours, contenus et montants restent intacts.
   Charte Arthur : creme #FFFEF4, bordeaux #2F1210, vigne #374223,
   olive #70783A, rayon 20, Piepie titres, Manrope texte.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   ZONE B — LA COLONNE DE DECISION
   Mesure du defaut sur l'apercu 6ae5e754 a 1366 : les deux choix faisaient
   exactement 501x65, meme rayon, empiles. Deux barres jumelles dont seul le
   remplissage differait : ca se lit comme une liste, pas comme un choix.
   Trois rayons se disputaient la meme colonne : 16 sur les choix, 999 sur le
   bouton, 20 dans la charte. Les fleches etaient des cercles translucides,
   donc d'apparence inactive. « Encore 2 questions » flottait a 12 px sans
   rattachement. Le renvoi vers les offres etait un contour a 24 % d'opacite
   pose tout en bas, detache du prix.
--------------------------------------------------------------------------- */

/* Un seul rayon dans toute la colonne : celui de la charte. */
#tb-accueil #tb-integrated-hero .actions{gap:10px}

/* Le choix principal. Plein, plus haut, fleche en reserve creme : c'est lui
   qu'on voit en premier et c'est lui qui porte le parcours par defaut. */
#tb-accueil #tb-integrated-hero .choice{
  border-radius:20px;
  padding:16px 18px 16px 20px;
  column-gap:18px; row-gap:4px;
}
#tb-accueil #tb-integrated-hero .choice-label{font-size:16px}
#tb-accueil #tb-integrated-hero .choice-note{font-size:12px}
#tb-accueil #tb-integrated-hero .choice-go{
  width:32px; height:32px; font-size:15px;
  background:var(--tb-creme); color:var(--tb-vin);
}

/* Le second choix reste une vraie cible — le cadeau compte a Noel — mais il
   passe d'un rang : assise chaude sans contour, un cran plus bas, libelle et
   fleche reduits. Les deux ne pesent plus la meme chose. */
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2){
  background:#f6eedd; border-color:transparent; color:var(--tb-vin);
  padding:13px 18px 13px 20px;
}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-label{font-size:14.5px}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-note{font-size:11.5px; color:var(--tb-gris)}
/* La fleche du second choix etait translucide a 8 % : elle avait l'air
   desactivee. Reserve creme pleine et liseré bordeaux, elle se lit. */
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-go{
  width:28px; height:28px; font-size:13px;
  background:var(--tb-creme); color:var(--tb-vin);
  box-shadow:inset 0 0 0 1px #2f121033;
}
/* Au survol, la fleche devient pleine : plus jamais l'air desactivee. */
#tb-accueil #tb-integrated-hero .choice:hover .choice-go{
  background:var(--tb-creme); color:var(--tb-vigne); box-shadow:none;
}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2):hover .choice-note{color:rgba(255,254,244,.8)}

/* La progression appartient au groupe des choix : elle le suit de pres, et
   un repere la rattache visuellement au lieu de la laisser flotter. */
#tb-accueil #tb-integrated-hero .guide{
  margin:11px 0 0; font-size:11.5px; font-weight:600;
  color:var(--tb-vigne);
  display:flex; align-items:center; gap:9px;
}
#tb-accueil #tb-integrated-hero .guide::before{
  content:""; width:20px; height:2px; border-radius:2px; flex:none;
  background:var(--tb-vigne); opacity:.5;
}

/* Le prix est la consequence du choix, pas un bloc pose a cote : meme rayon,
   meme largeur, un liseré lisible qui lui donne un bord franc, et un ecart
   assume avec le groupe du dessus. */
#tb-accueil #tb-integrated-hero .entry-offer{
  margin-top:24px;
  padding:17px 20px 16px;
  border-radius:20px;
  background:#fbf4e3;
  border:1px solid #2f12101f;
  box-sizing:border-box; width:100%;
}
#tb-accueil #tb-integrated-hero .price strong{font-size:32px}
#tb-accueil #tb-integrated-hero .offer{font-size:12px; margin-bottom:7px}

/* Une seule emphase par ligne : le code reste en gras parce qu'il se recopie ;
   « Conditions » cesse d'etre souligne et se signale par la couleur, le
   soulignement revenant au survol. */
#tb-accueil #tb-integrated-hero .terms{color:var(--tb-gris); font-size:11px}
#tb-accueil #tb-integrated-hero .terms a{
  color:var(--tb-vigne); font-weight:600;
  text-decoration:none; border-bottom:1px solid #3742234d;
  transition:border-color .2s var(--tb-ease),color .2s var(--tb-ease);
}
#tb-accueil #tb-integrated-hero .terms a:hover{color:var(--tb-vin); border-bottom-color:var(--tb-vin)}

/* Le renvoi reste au second rang derriere les deux choix, mais il cesse
   d'etre un fantome : meme rayon que tout le reste, contour lisible, largeur
   de la colonne, colle au bloc prix auquel il repond. */
#tb-accueil #tb-integrated-hero .direct{
  display:flex; width:100%; margin-top:12px;
  min-height:46px; padding:11px 18px;
  border-radius:20px; border:1px solid #2f121059;
  font-size:13px;
}

/* ---------------------------------------------------------------------------
   ZONE A — LA BANDE DES TROIS AVANTAGES ET SA MENTION LEGALE
   Mesure du defaut : grille 1,48fr / 1fr / 1fr, donc une premiere colonne
   presque double ; son titre a 20 px contre 15 px aux deux autres, rattrape
   par un padding-top de 4 px sur les petits ; trois icones de trois styles
   (silhouettes pleines, bloc carre, trait) ; des filets verticaux qui
   soulignaient le desequilibre ; et la mention legale en 11 px sur 1240 px,
   posee comme une quatrieme colonne ecrasee.
--------------------------------------------------------------------------- */

#tb-accueil #tb-integrated-hero .benefits{
  padding:34px 40px 22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:52px;
}

/* Plus de filets : trois colonnes egales n'ont pas besoin qu'on les separe,
   l'espace suffit. L'icone passe a cote du titre, dans la meme boite. */
#tb-accueil #tb-integrated-hero .benefit,
#tb-accueil #tb-integrated-hero .benefit:first-child,
#tb-accueil #tb-integrated-hero .benefit--lead{
  border-left:0; margin:0; padding:0;
  display:grid; grid-template-columns:36px minmax(0,1fr);
  column-gap:14px; row-gap:3px; align-items:start;
}

/* comptoir.css posait fill:var(--tb-vigne) sur le SVG, ce qui remplissait les
   nouveaux traces et refabriquait des pates pleines : on rend la main au
   trait, et on neutralise la hauteur/marge/placement de l'ancienne regle. */
#tb-accueil #tb-integrated-hero .benefit-pic,
#tb-accueil #tb-integrated-hero .benefit--lead .benefit-pic{
  grid-column:1; grid-row:1 / span 2; align-self:start;
  width:36px; height:36px; padding:8px; margin:0;
  box-sizing:border-box;
  border-radius:12px;
  background:#70783a1c;
  color:var(--tb-vigne);
  fill:none; stroke:currentColor;
}

/* Trois titres de meme rang, donc de meme taille. La compensation de ligne
   de base n'a plus lieu d'etre. */
#tb-accueil #tb-integrated-hero .benefit b,
#tb-accueil #tb-integrated-hero .benefit--lead b,
#tb-accueil #tb-integrated-hero .benefit:not(.benefit--lead) b{
  grid-column:2; grid-row:1;
  font-size:15.5px; line-height:1.3; margin:0; padding-top:3px;
}
#tb-accueil #tb-integrated-hero .benefit span,
#tb-accueil #tb-integrated-hero .benefit--lead span{
  grid-column:2; grid-row:2;
  font-size:13px; line-height:1.5; max-width:32ch;
}

/* La mention legale cesse d'etre une quatrieme colonne : elle se nomme, se
   borne a une largeur de lecture, et se lit. */
#tb-accueil #tb-integrated-hero .comptoir-conditions{
  padding:16px 40px 26px;
  font-size:11.5px; line-height:1.6; color:var(--tb-gris);
}
#tb-accueil #tb-integrated-hero .conditions-titre{
  display:block; margin:0 0 5px;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tb-vigne);
}
#tb-accueil #tb-integrated-hero .conditions-texte{display:block; max-width:84ch}

/* ---------- Ecrans intermediaires ---------------------------------------- */
@media(max-width:1180px) and (min-width:901px){
  #tb-accueil #tb-integrated-hero .benefits{padding-left:30px;padding-right:30px;column-gap:36px}
  #tb-accueil #tb-integrated-hero .comptoir-conditions{padding-left:30px;padding-right:30px}
  #tb-accueil #tb-integrated-hero .price strong{font-size:30px}
}

/* ---------- Telephone ----------------------------------------------------- */
@media(max-width:900px){
  #tb-accueil #tb-integrated-hero .choice{border-radius:18px; padding:14px 15px 14px 17px}
  #tb-accueil #tb-integrated-hero .choice:nth-of-type(2){padding:12px 15px 12px 17px}
  #tb-accueil #tb-integrated-hero .choice-label{font-size:15px}
  #tb-accueil #tb-integrated-hero .choice-go{width:30px; height:30px}
  #tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-go{width:26px; height:26px}
  #tb-accueil #tb-integrated-hero .entry-offer{margin-top:18px; padding:15px 16px 14px; border-radius:18px}
  #tb-accueil #tb-integrated-hero .price strong{font-size:29px}
  #tb-accueil #tb-integrated-hero .direct{border-radius:18px; min-height:46px}
  /* Le point median se retrouvait seul en fin de ligne quand « Sans
     engagement » passait a la ligne. Il devient la coupure elle-meme :
     hauteur nulle, plus d'orphelin. */
  #tb-accueil #tb-integrated-hero .after-sep{display:block; height:0; overflow:hidden}

  #tb-accueil #tb-integrated-hero .benefits{
    padding:22px 20px 16px; grid-template-columns:1fr; row-gap:16px; column-gap:0;
  }
  #tb-accueil #tb-integrated-hero .benefit,
  #tb-accueil #tb-integrated-hero .benefit:first-child,
  #tb-accueil #tb-integrated-hero .benefit--lead{
    border-left:0; padding:0; grid-template-columns:32px minmax(0,1fr); column-gap:12px;
  }
  #tb-accueil #tb-integrated-hero .benefit-pic,
  #tb-accueil #tb-integrated-hero .benefit--lead .benefit-pic{width:32px; height:32px; padding:7px; border-radius:11px; margin:0}
  #tb-accueil #tb-integrated-hero .benefit b,
  #tb-accueil #tb-integrated-hero .benefit--lead b,
  #tb-accueil #tb-integrated-hero .benefit:not(.benefit--lead) b{font-size:14.5px; padding-top:2px}
  #tb-accueil #tb-integrated-hero .benefit span,
  #tb-accueil #tb-integrated-hero .benefit--lead span{font-size:12.5px; max-width:46ch}
  #tb-accueil #tb-integrated-hero .comptoir-conditions{padding:14px 20px 20px; font-size:10.5px}
}

@media(max-width:360px){
  #tb-accueil #tb-integrated-hero .benefits{padding:18px 14px 14px; row-gap:14px}
  #tb-accueil #tb-integrated-hero .comptoir-conditions{padding:12px 14px 18px}
}

/* Ma regle :nth-of-type(2) a la meme specificite que le :hover de
   comptoir.css et passe apres : elle le neutralisait. Le survol du second
   choix est redonne ici, explicitement, apres elle. */
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2):hover{
  background:var(--tb-vigne); border-color:var(--tb-vigne); color:var(--tb-creme);
}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2):hover .choice-note{color:rgba(255,254,244,.82)}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2):hover .choice-go{
  background:var(--tb-creme); color:var(--tb-vigne); box-shadow:none;
}

/* ---------------------------------------------------------------------------
   V45 — « encore un peu trop chargé, un peu trop d'infos » (Mendar, 31/10 19:40).
   La colonne portait neuf unites d'information. Trois sont retirees du HTML :
   les deux sous-lignes des choix, le rappel « L'abonnement Decouverte, pour
   soi » (que le choix « Pour moi » dit deja) et la ligne code + date + lien
   (la pastille -20 % porte la promesse, les conditions completes sont juste
   en dessous et portent maintenant leur titre). Il en reste six.
   Le script d'expiration du 16 novembre n'est pas touche : il vise [data-promo],
   #amount et .price-what, tous conserves.
--------------------------------------------------------------------------- */
#tb-accueil #tb-integrated-hero .choice{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding:17px 18px 17px 20px;
}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2){padding:15px 18px 15px 20px}
#tb-accueil #tb-integrated-hero .choice-label{font-size:16.5px; line-height:1.1}
#tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-label{font-size:15px}
#tb-accueil #tb-integrated-hero .choice-go{grid-row:1}

#tb-accueil #tb-integrated-hero .entry-offer{padding:16px 20px 15px}
#tb-accueil #tb-integrated-hero .price{margin:0}
#tb-accueil #tb-integrated-hero .after{margin-top:6px}

@media(max-width:900px){
  #tb-accueil #tb-integrated-hero .choice{padding:15px 15px 15px 17px}
  #tb-accueil #tb-integrated-hero .choice:nth-of-type(2){padding:13px 15px 13px 17px}
  #tb-accueil #tb-integrated-hero .choice-label{font-size:15.5px}
  #tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-label{font-size:14.5px}
}

/* ---------------------------------------------------------------------------
   V46 — retours Mendar 31/10 19:45 et 19:46 : « evite les traits de separation
   et les petits textes », « c'est tres flat », « les conditions on peut les
   mettre ailleurs ».
   Les trois filets du hero sautent, la legende de la photo est retiree du HTML,
   le bloc conditions descend au pied de page, et la zone gagne de la couleur
   avec la palette d'Arthur : olive et vigne, pas de bleu (le client ne l'aime
   pas, retour du 29/10).
--------------------------------------------------------------------------- */

/* Plus aucun filet : les blocs se separent par leur surface et leur espace. */
#tb-accueil #tb-integrated-hero .intro{border-bottom:0; padding-bottom:4px; margin-bottom:26px}
#tb-accueil #tb-integrated-hero .tb-ruban{border-top:0; border-bottom:0}
#tb-accueil #tb-integrated-hero .comptoir-conditions::before{display:none}

/* Le bandeau defilant n'a plus de filets pour le tenir : c'est sa propre
   surface chaude qui le pose, et elle apporte la premiere touche de couleur. */
#tb-accueil #tb-integrated-hero .tb-ruban{
  background:#f3e8d2; margin:18px 0 0;
}

/* La bande des avantages devient une carte posee sur un aplat olive leger :
   c'est le deuxieme point de couleur, et elle cesse d'etre du creme sur creme. */
#tb-accueil #tb-integrated-hero .benefits{
  background:#70783a14;
  border-radius:20px;
  margin:22px auto 0;
  padding:30px 36px 28px;
  max-width:1240px;
}

/* Les pastilles passent en olive plein, trait creme : trois vrais points de
   couleur au lieu de trois lavis. */
#tb-accueil #tb-integrated-hero .benefit-pic,
#tb-accueil #tb-integrated-hero .benefit--lead .benefit-pic{
  background:var(--tb-olive,#70783a); color:var(--tb-creme);
}

/* Les conditions vivent maintenant dans le pied de page. */
.tbh-footer .comptoir-conditions{
  max-width:1240px; margin:0 auto; padding:0 40px 14px;
  font-size:11px; line-height:1.6; color:var(--tb-gris-doux,#6e5d53);
}
.tbh-footer .conditions-titre{
  display:block; margin:0 0 4px;
  font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tb-vigne,#374223);
}
.tbh-footer .conditions-texte{display:block; max-width:96ch}

@media(max-width:1180px) and (min-width:901px){
  #tb-accueil #tb-integrated-hero .benefits{padding:26px 28px 24px}
}
@media(max-width:900px){
  #tb-accueil #tb-integrated-hero .benefits{
    margin:16px 14px 0; padding:22px 20px 20px; border-radius:18px;
  }
  #tb-accueil #tb-integrated-hero .tb-ruban{margin-top:14px}
  .tbh-footer .comptoir-conditions{padding:0 20px 12px; font-size:10px}
}

/* ---------------------------------------------------------------------------
   V47 — ce qui clochait encore, diagnostique sur le rendu en ligne.
   1. QUATRE rectangles de 501 px empiles, meme rayon 20 : choix (68), choix
      (60), bloc prix (93), bouton (46). Trois menent quelque part, le bloc
      prix non, et rien ne le distingue. En corrigeant les trois rayons
      concurrents, j'avais fabrique une monotonie : l'oeil lit une pile de
      quatre boutons. Le prix sort de sa carte, le renvoi redevient un lien.
      Il ne reste que DEUX rectangles : les deux vrais choix.
   2. L'accroche etait orpheline : titre a x=103, accroche a x=750, 650 px plus
      loin. Le hero demandait « pour qui est cette box ? » avant d'avoir dit ce
      qu'est la box. Elle revient sous le titre, d'un seul tenant.
   3. Le titre de l'action etait en Manrope quand le h1 et le bandeau sont en
      Piepie : il ne tenait pas son rang. Il passe en Piepie.
--------------------------------------------------------------------------- */

/* 1 — l'accroche rejoint le titre, une seule colonne a gauche. */
#tb-accueil #tb-integrated-hero .intro{
  display:block; column-gap:0; margin-bottom:24px;
}
#tb-accueil #tb-integrated-hero .lead{
  margin:12px 0 0; max-width:46ch; font-size:16px; line-height:1.5;
}

/* 2 — le titre de l'action prend la police de titre de la charte. */
#tb-accueil #tb-integrated-hero .question h2{
  font:400 30px/1.05 piepie,"Arial Black",sans-serif;
  letter-spacing:0; margin:0 0 15px;
}

/* 3 — le prix sort de sa carte : plus de quatrieme rectangle, il se lit a
   meme le fond comme la ligne de progression. */
#tb-accueil #tb-integrated-hero .entry-offer{
  background:transparent; border:0; border-radius:0;
  padding:0; margin-top:22px;
}
#tb-accueil #tb-integrated-hero .price strong{font-size:40px}
#tb-accueil #tb-integrated-hero .after{font-size:13px; margin-top:7px}

/* 4 — le renvoi redevient un lien, pas un troisieme bouton pleine largeur. */
#tb-accueil #tb-integrated-hero .direct{
  display:inline-flex; width:auto; min-height:0;
  margin-top:18px; padding:0 0 2px;
  border:0; border-bottom:1px solid #2f121038; border-radius:0;
  background:transparent; font-size:13px; gap:8px;
}
#tb-accueil #tb-integrated-hero .direct:hover{
  background:transparent; border-bottom-color:var(--tb-vin);
}

@media(max-width:900px){
  #tb-accueil #tb-integrated-hero .lead{font-size:15px; max-width:none}
  #tb-accueil #tb-integrated-hero .question h2{font-size:26px}
  #tb-accueil #tb-integrated-hero .price strong{font-size:36px}
  #tb-accueil #tb-integrated-hero .entry-offer{margin-top:18px; padding:0}
  #tb-accueil #tb-integrated-hero .direct{width:auto; min-height:0; margin-top:16px}
}

/* Le titre en Piepie passait sur deux lignes en 390 et laissait le point
   d'interrogation seul sur la seconde. Taille reduite, et l'espace avant le
   point est devenue fine insecable dans le HTML. */
@media(max-width:900px){
  #tb-accueil #tb-integrated-hero .question h2{font-size:23px; line-height:1.08}
}
@media(max-width:360px){
  #tb-accueil #tb-integrated-hero .question h2{font-size:21px}
}