/* Tasting Box : hero comptoir, correction esthétique du 30 octobre (V38). Portée : hero intégré de l'accueil uniquement. Base = direction A validée. Charte client conservée telle quelle : piepie (titres) + Manrope (texte), palette vin/vigne/vert/crème, logo réel, arrondi de référence 20 px. Règle de formes documentée et tenue partout dans ce hero : actions en pilule (999px) · cartes et image à 20px · éléments internes à 16px une seule entorse assumée : le coin signature de la photo (voir .product img). Accent unique : rouge vin #2f1210, relais unique au survol : vigne #374223. Aucune nouvelle couleur, aucune police ajoutée, aucun badge décoratif. */ #tb-accueil #tb-integrated-hero{ --tb-vin:#2f1210; --tb-vigne:#374223; --tb-creme:#fffef4; --tb-encre:#4a3a33; --tb-gris:#5f4e45; --tb-gris-doux:#6e5d53; --tb-trait:#2f12102e; --tb-trait-fort:#2f121045; --tb-ease:cubic-bezier(.16,1,.3,1); position:relative; /* Lumière unique venue du haut-gauche, cohérente avec l'éclairage de la photo. Pas de motif rapporté : seulement une assise chaude sous la scène. */ background: radial-gradient(118% 78% at 14% 0%, #fffdf0 0%, #fffef4 46%, #fbf4e4 100%); } /* ---------- Trame générale ---------------------------------------------- */ #tb-accueil #tb-integrated-hero .hero{ max-width:1240px; padding:20px 40px 13px; display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); grid-template-rows:auto auto; column-gap:48px; row-gap:0; align-items:start; } /* ---------- Promesse : titre et sous-titre sur une même ligne de force --- */ #tb-accueil #tb-integrated-hero .intro{ grid-column:1/-1; grid-row:1; display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); column-gap:48px; align-items:end; padding:0 0 16px; margin:0 0 22px; border-bottom:1px solid var(--tb-trait); text-align:left; } /* piepie est une grasse display : la charte la pose à letter-spacing 0. Le serrage négatif de la version précédente soudait les lettres en bande. Ici : interlettrage rendu à zéro, interligne resserré, largeur bornée pour que le titre forme un bloc de deux lignes au lieu d'un bandeau plein cadre. */ #tb-accueil #tb-integrated-hero h1{ font-family:piepie,'Arial Black',sans-serif; font-weight:400; font-size:clamp(32px,3.05vw,43px); line-height:1.04; letter-spacing:0; max-width:19ch; text-wrap:balance; color:var(--tb-vin); margin:0; } /* coupure maitrisee : le titre tient sur deux lignes a toutes les largeurs */ #tb-accueil #tb-integrated-hero .mobile-break{display:block} #tb-accueil #tb-integrated-hero .lead{ font-size:14px; line-height:1.6; font-weight:500; color:var(--tb-encre); max-width:34ch; margin:0 0 0 -12px; padding:0 0 5px; } /* ---------- La scène ----------------------------------------------------- */ #tb-accueil #tb-integrated-hero .product{ grid-column:1; grid-row:2; align-self:start; justify-content:flex-start; margin:0; } #tb-accueil #tb-integrated-hero .shot{position:relative; display:block; color:var(--tb-creme)} #tb-accueil #tb-integrated-hero .product img{ width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:contain; /* coin signature tourné vers le panneau de décision : les deux objets s'emboîtent au lieu de cohabiter en deux rectangles parallèles. */ border-radius:20px 20px 72px 20px; box-shadow:0 26px 54px -34px rgba(47,18,16,.45); } #tb-accueil #tb-integrated-hero .product figcaption{ margin:11px 2px 0; font-size:10.5px; line-height:1.5; color:var(--tb-gris-doux); text-wrap:pretty; } /* ---------- Le panneau de décision --------------------------------------- */ #tb-accueil #tb-integrated-hero .conversion{ grid-column:2; grid-row:2; align-self:start; max-width:none; /* décalage assumé : le panneau descend d'un cran et mord la gouttière. Les deux blocs s'imbriquent ; la photo n'est jamais recouverte. */ /* V42 : plus de carte autour du panneau. Elle enfermait deux surfaces pleines et fabriquait une carte dans une carte. La decision se lit maintenant a meme le fond du hero, comme la photo a gauche. */ margin:2px 0 0; padding:0; } #tb-accueil #tb-integrated-hero .question-step{display:none} #tb-accueil #tb-integrated-hero .question h2{ /* Manrope ici, pas piepie : teste en pixels le 30/10, piepie dans le panneau refabrique une seconde bande pleine largeur et concurrence le h1. */ font:800 25px/1.18 Manrope,system-ui,sans-serif; letter-spacing:-.02em; color:var(--tb-vin); margin:0 0 16px; max-width:none; } #tb-accueil #tb-integrated-hero .desktop-break{display:none} /* Les deux réponses réelles de la question 1, avec la précision déjà écrite dans le questionnaire : un choix s'explique, il ne se décore pas. */ #tb-accueil #tb-integrated-hero .actions{display:grid;grid-template-columns:1fr;gap:9px} #tb-accueil #tb-integrated-hero .choice{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:16px; row-gap:3px; min-height:0; padding:13px 16px 13px 18px; border-radius:16px; border:1px solid var(--tb-vin); background:var(--tb-vin); color:var(--tb-creme); text-decoration:none; transition:background .22s var(--tb-ease),border-color .22s var(--tb-ease),transform .22s var(--tb-ease); } #tb-accueil #tb-integrated-hero .choice-label{ grid-column:1; font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.2; } #tb-accueil #tb-integrated-hero .choice-note{ grid-column:1; font-size:11.5px; line-height:1.4; font-weight:500; color:rgba(255,254,244,.86); text-wrap:pretty; } #tb-accueil #tb-integrated-hero .choice-go{ grid-column:2; grid-row:1/3; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; background:rgba(255,254,244,.14); transition:transform .22s var(--tb-ease),background .22s var(--tb-ease); } #tb-accueil #tb-integrated-hero .choice:nth-of-type(2){ background:transparent; color:var(--tb-vin); border-color:#2f12105c; } #tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-note{color:#55433b} #tb-accueil #tb-integrated-hero .choice:nth-of-type(2) .choice-go{background:#2f12100f} #tb-accueil #tb-integrated-hero .choice:hover{background:var(--tb-vigne);border-color:var(--tb-vigne);color:var(--tb-creme)} #tb-accueil #tb-integrated-hero .choice:hover .choice-note{color:rgba(255,254,244,.8)} #tb-accueil #tb-integrated-hero .choice:hover .choice-go{background:rgba(255,254,244,.18);transform:translateX(3px)} #tb-accueil #tb-integrated-hero .choice:active{transform:translateY(1px)} #tb-accueil #tb-integrated-hero .guide{ font-size:11.5px; line-height:1.5; color:var(--tb-gris); margin:12px 0 0; } /* ---------- Le prix : une seule ligne de force, pas un empilement -------- */ /* ---------- L'offre : une surface, plus une pile de lignes (V41) -------- Constat en pixels sur la V40 a 1366x768 : le prix principal faisait 38 px, l'ancien prix 11,5 px en gris pale (0,30x) pose 22 px sous la baseline, et « la premiere box » tombait sous cet ancien prix au lieu du prix principal. Suivaient trois phrases de 11 a 12 px empilees, puis un lien souligne. Corrections : une surface bordeaux porte le prix en creme ; l'ancien prix et la remise sont groupes a droite, a une taille qui se lit ; la mention qualifie le prix principal, juste dessous ; la suite devient deux colonnes ; le code et la date descendent au rang de detail ; le renvoi est un bouton. */ #tb-accueil #tb-integrated-hero .entry-offer{ margin-top:18px; padding:14px 17px 13px; border-radius:16px; /* soutien commercial, pas deuxieme bouton : une surface chaude a tres bas contraste sur le fond du hero (#fbf4e3 sur #fffdf0), sans ombre. */ background:#fbf4e3; color:var(--tb-vin); } #tb-accueil #tb-integrated-hero .offer{ font-size:11.5px; font-weight:700; line-height:1.3; color:var(--tb-vigne); margin:0 0 6px; } /* Le prix a gauche, l'economie a droite : une seule ligne de force. */ #tb-accueil #tb-integrated-hero .price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:0; } #tb-accueil #tb-integrated-hero .price strong{ font-size:30px; line-height:1.05; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--tb-vin); white-space:nowrap; } /* La mention de la premiere box ouvre la ligne de suite : elle qualifie le prix sans ajouter une ligne a elle seule. Apres le 15 novembre, le script d'expiration la reecrit en « par box » et la suite reste juste. */ #tb-accueil #tb-integrated-hero .price-what{font-weight:600} /* L'ancien prix et la remise se lisent ensemble, a hauteur de repere : 17 px contre 40 px, soit 0,43x au lieu des 0,30x illisibles de la V40. */ /* L'ancien prix et la remise restent groupes, pousses en fin de ligne. */ #tb-accueil #tb-integrated-hero .price-save{ display:flex; align-items:baseline; gap:8px; margin:0; } #tb-accueil #tb-integrated-hero .price-save s{ font-size:15px; font-weight:600; line-height:1; white-space:nowrap; color:var(--tb-gris); font-variant-numeric:tabular-nums; text-decoration-thickness:1.5px; text-decoration-color:#5f4e4599; } /* seul accent sature du bloc : petit, il marque la promotion sans faire masse */ #tb-accueil #tb-integrated-hero .price-save b{ font-size:11.5px; font-weight:800; line-height:1; letter-spacing:-.01em; padding:4px 8px 5px; border-radius:999px; white-space:nowrap; background:var(--tb-vin); color:var(--tb-creme); font-variant-numeric:tabular-nums; align-self:center; } /* Ce qui se passe ensuite : une ligne lisible, plus deux colonnes etiquetees avec leur filet. Apres le 15 novembre, « Puis 42 € par box » et son point mediant disparaissent avec le reste de la promotion ; « Sans engagement » reste, parce que c'est vrai en tout temps. */ #tb-accueil #tb-integrated-hero .after{ font-size:12.5px; font-weight:500; line-height:1.45; color:var(--tb-encre); margin:7px 0 0; text-wrap:pretty; } #tb-accueil #tb-integrated-hero .after-sep{color:#2f121059} /* Le code et sa date : un detail lisible, pas un concurrent du prix. */ #tb-accueil #tb-integrated-hero .terms{ font-size:10.5px; line-height:1.5; color:var(--tb-gris-doux); margin:7px 0 0; max-width:none; text-wrap:pretty; } #tb-accueil #tb-integrated-hero .terms b{color:var(--tb-vin); font-weight:700} #tb-accueil #tb-integrated-hero .terms a{color:var(--tb-vin); text-underline-offset:3px} #tb-accueil #tb-integrated-hero .terms a:hover{color:var(--tb-vigne)} /* Le renvoi vers les offres est dessine, et reste au second rang derriere les deux choix : contour, pas aplat, pour ne pas concurrencer « Pour moi ». */ #tb-accueil #tb-integrated-hero .direct{ display:inline-flex; align-items:center; justify-content:center; gap:9px; margin-top:14px; min-height:38px; padding:9px 17px; border-radius:999px; border:1px solid #2f12103d; color:var(--tb-vin); background:transparent; font-size:12.5px; font-weight:700; text-decoration:none; transition:background .22s var(--tb-ease),border-color .22s var(--tb-ease); } #tb-accueil #tb-integrated-hero .direct span{ width:auto; height:auto; border-radius:0; background:none; font-size:14px; line-height:1; transition:transform .22s var(--tb-ease); } #tb-accueil #tb-integrated-hero .direct:hover{background:#2f12100f; border-color:var(--tb-vin)} #tb-accueil #tb-integrated-hero .direct:hover span{background:none; transform:translateX(3px)} #tb-accueil #tb-integrated-hero .direct:active{transform:translateY(1px)} /* ---------- Annotations sur la photo (V39) ------------------------------- Demande du 30/10 12:27 : dire ce que contient la box des le hero, et poser le tarif promotionnel au plus pres de l'image. Le texte reste du HTML : rien n'est grave dans le bitmap, donc tout est selectionnable, traduisible et lu par un lecteur d'ecran. Les traits sont un SVG au repere de la photo (viewBox 1536x1024, meme preserveAspectRatio que object-fit:contain) : ils restent accroches a leur objet a toutes les largeurs, sans recalcul. Libelles verifies dans les sources commerciales du client, pas inventes : « deux vins tres proches », « 5 a 6 fiches theoriques et pratiques », et l'accessoire mystere qui est reserve aux abonnements (il n'est pas dans la box a l'unite) -- d'ou la mention qui l'accompagne. Aucun libelle ne reprend mot pour mot les trois avantages du bas de hero : ici on nomme ce qu'on voit, la-bas on dit ce que ca apporte. */ #tb-accueil #tb-integrated-hero .shot-traits{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* Le trait passe sur des zones tres claires (nappe) comme tres sombres (pull, fond) : un trace sombre un peu plus epais court sous le trace clair, le repere reste lisible partout. Constate a l'ecran : en une seule couche claire, il disparaissait sur la table et la nappe. */ /* V40 : le double trace (un tiret sombre epais sous un tiret clair) faisait une bavure sur la nappe et lisait comme une rayure. Un seul trace, et la lisibilite sur fond clair comme sur fond sombre passe par une ombre portee. */ #tb-accueil #tb-integrated-hero .shot-fil{ stroke:#fffef4; stroke-width:1.9; stroke-linecap:round; filter:drop-shadow(0 1px 1.6px rgba(47,18,16,.9)); } #tb-accueil #tb-integrated-hero .shot-point{ fill:#fffef4; stroke:#2f1210; stroke-width:2.4; paint-order:stroke; filter:drop-shadow(0 1px 1.6px rgba(47,18,16,.55)); } /* V41 : les reperes etaient trois pastilles pleines de 11,5 px. Elles pesaient autant que le produit. Elles gardent leur texte, perdent du volume : fond moins opaque, moins de matiere autour du mot. */ /* V42 : trois pastilles pleines sur la photo ajoutaient trois masses sombres a une image deja chargee. Elles gardent leur texte, perdent leur volume : fond moins opaque, moins de matiere autour du mot, plus d'ombre de boite. La lisibilite sur fond clair comme sur fond sombre passe par l'ombre du texte, pas par l'epaisseur de la pastille. */ #tb-accueil #tb-integrated-hero .shot-note{ position:absolute; margin:0; z-index:2; max-width:min(38%,206px); padding:4px 9px 5px; border-radius:999px; background:#2f1210ad; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); color:var(--tb-creme); font-size:10.5px; font-weight:700; line-height:1.25; letter-spacing:-.005em; text-wrap:balance; text-shadow:0 1px 2px rgba(47,18,16,.75); } #tb-accueil #tb-integrated-hero .shot-note span{ display:block; font-weight:500; font-size:9px; line-height:1.3; color:#fffef4d6; margin-top:0; } #tb-accueil #tb-integrated-hero .shot-note--vins{left:2.5%; top:9%} #tb-accueil #tb-integrated-hero .shot-note--fiches{left:1.5%; top:64.5%} #tb-accueil #tb-integrated-hero .shot-note--accessoire{right:3%; left:auto; top:83%; border-radius:14px; text-align:left} /* ---------- Bas de hero : bandeau, avantages, conditions (V39) ----------- Le bas du hero empilait une ligne de conditions en 10 px et trois colonnes d'avantages egales en 12 px gris : aucune hierarchie, aucune separation. Trois corrections, dans cet ordre de lecture. 1. Le bandeau defilant reprend sa place de separateur sous le hero (il y etait dans les sources du 29/10, sa CSS etait restee orpheline dans le gabarit). Il separe la promesse de la preuve. 2. Les avantages cessent d'etre trois colonnes egales : « Deux vins a comparer » est le coeur de l'offre, il prend la colonne large et le corps le plus grand. Des filets verticaux, pas de cartes, pas d'ombre, pas de numeros : ce n'est pas une sequence. 3. Les conditions descendent en pied de zone, derriere un filet, detachees des avantages. L'ancre #conditions-comptoir est conservee. Titres d'avantages en Manrope 800 et non en piepie : les mentions du bandeau juste au-dessus sont deja en piepie, deux bandes display d'affilee se concurrencent (meme constat que la variante rejetee dans le panneau). */ /* Bandeau defilant restaure. Mentions, rythme et piepie d'origine conserves ; seuls l'assise dans le hero et la visibilite mobile sont ajustes ici. */ #tb-accueil #tb-integrated-hero .tb-ruban{ display:flex; overflow:hidden; margin:2px 0 0; background:#fffdf0; border-top:1px solid var(--tb-trait); border-bottom:1px solid var(--tb-trait); color:var(--tb-vin); } #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track{ display:flex; flex-shrink:0; gap:0; margin:0; padding:11px 0; list-style:none; } #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li{ display:flex; align-items:center; white-space:nowrap; font-family:piepie,'Arial Black',sans-serif; font-weight:400; font-size:16px; line-height:1; letter-spacing:0; color:var(--tb-vin); padding:0 1.3rem; } #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li::after{ content:""; width:5px; height:5px; border-radius:999px; background:var(--tb-vigne); margin-left:2.6rem; } /* Les trois avantages : hierarchie graduee, filets verticaux, rien d'autre. */ #tb-accueil #tb-integrated-hero .benefits{ max-width:1240px; margin:0 auto; padding:24px 40px 20px; display:grid; grid-template-columns:minmax(0,1.48fr) minmax(0,1fr) minmax(0,1fr); column-gap:0; border-top:0; } #tb-accueil #tb-integrated-hero .benefit{ margin:0; padding:1px 0 0 34px; border-left:1px solid var(--tb-trait); } #tb-accueil #tb-integrated-hero .benefit:first-child{border-left:0; padding-left:0} #tb-accueil #tb-integrated-hero .benefit b{ display:block; font-weight:800; font-size:15px; line-height:1.3; letter-spacing:-.01em; color:var(--tb-vin); margin:0 0 5px; } #tb-accueil #tb-integrated-hero .benefit span{ display:block; font-size:13px; line-height:1.55; color:var(--tb-gris); max-width:30ch; } #tb-accueil #tb-integrated-hero .benefit--lead{padding-right:40px} #tb-accueil #tb-integrated-hero .benefit--lead b{font-size:20px; line-height:1.2; margin-bottom:7px} /* Les deux corps ne partagent pas la meme ligne de base : les petits titres descendent de 4 px pour que les trois se lisent sur une seule ligne. */ #tb-accueil #tb-integrated-hero .benefit:not(.benefit--lead) b{padding-top:4px} #tb-accueil #tb-integrated-hero .benefit--lead span{font-size:13.5px; max-width:34ch} /* Conditions : detachees, discretes, lisibles. */ #tb-accueil #tb-integrated-hero .comptoir-conditions{ position:relative; max-width:1240px; margin:0 auto; padding:12px 40px 20px; font-size:11px; line-height:1.65; color:var(--tb-gris-doux); scroll-margin-top:110px; } /* Le filet part du texte et s'y arrete : cale sur la colonne, pas sur la zone. */ #tb-accueil #tb-integrated-hero .comptoir-conditions::before{ content:""; position:absolute; top:0; left:40px; right:40px; height:1px; background:var(--tb-trait); } /* Le clic sur « Conditions » doit montrer ou il a mene : repere statique, donc present aussi quand le mouvement est refuse. */ #tb-accueil #tb-integrated-hero .comptoir-conditions:target{ box-shadow:inset 3px 0 0 var(--tb-vigne); } @media(max-width:900px){ #tb-accueil #tb-integrated-hero .comptoir-conditions:target{box-shadow:inset 0 3px 0 var(--tb-vigne)} } /* ---------- Écrans intermédiaires ---------------------------------------- */ @media(max-width:1180px) and (min-width:901px){ #tb-accueil #tb-integrated-hero .hero{padding-left:30px;padding-right:30px;column-gap:34px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)} #tb-accueil #tb-integrated-hero .intro{column-gap:34px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)} #tb-accueil #tb-integrated-hero .conversion{margin-left:-22px} #tb-accueil #tb-integrated-hero .lead{margin-left:-22px;max-width:32ch} #tb-accueil #tb-integrated-hero .question h2{font-size:23px} #tb-accueil #tb-integrated-hero .price strong{font-size:29px} #tb-accueil #tb-integrated-hero .entry-offer{padding:13px 15px 12px} #tb-accueil #tb-integrated-hero .after{font-size:12px} #tb-accueil #tb-integrated-hero .benefits{padding-left:30px;padding-right:30px;column-gap:0} #tb-accueil #tb-integrated-hero .benefit{padding-left:26px} #tb-accueil #tb-integrated-hero .benefit--lead{padding-right:30px} #tb-accueil #tb-integrated-hero .comptoir-conditions{padding-left:30px;padding-right:30px} #tb-accueil #tb-integrated-hero .comptoir-conditions::before{left:30px;right:30px} } /* ---------- Téléphone ---------------------------------------------------- */ @media(max-width:900px){ #tb-accueil #tb-integrated-hero .hero{display:flex;flex-direction:column;max-width:600px;padding:14px 20px 16px;gap:0} #tb-accueil #tb-integrated-hero .intro{ order:0; display:block; padding:0 0 10px; margin:0 0 12px; } #tb-accueil #tb-integrated-hero .mobile-break{display:block} #tb-accueil #tb-integrated-hero h1{font-size:27px;line-height:1.07;max-width:none;margin:0 0 8px} #tb-accueil #tb-integrated-hero .lead{font-size:12px;line-height:1.5;max-width:44ch;margin:0;padding:0} #tb-accueil #tb-integrated-hero .product{order:1;width:100%;margin:0 0 12px} #tb-accueil #tb-integrated-hero .product img{border-radius:16px 16px 48px 16px;aspect-ratio:3/2;box-shadow:0 18px 36px -26px rgba(47,18,16,.42)} #tb-accueil #tb-integrated-hero .shot-note{font-size:9px;padding:4px 8px 5px;max-width:46%} #tb-accueil #tb-integrated-hero .shot-note span{font-size:7.5px;margin-top:0} #tb-accueil #tb-integrated-hero .shot-note--vins{left:2%;top:6%} #tb-accueil #tb-integrated-hero .shot-note--fiches{left:1.5%;top:62%} #tb-accueil #tb-integrated-hero .shot-note--accessoire{right:2.5%;left:auto;top:80%;border-radius:11px;max-width:44%} #tb-accueil #tb-integrated-hero .product figcaption{font-size:9px;margin:5px 2px 0;line-height:1.4} #tb-accueil #tb-integrated-hero .conversion{order:2;width:100%;margin:0;padding:0} #tb-accueil #tb-integrated-hero .question h2{font-size:20px;margin:0 0 11px} #tb-accueil #tb-integrated-hero .actions{gap:7px} #tb-accueil #tb-integrated-hero .choice{padding:11px 13px 11px 15px;border-radius:15px;column-gap:11px} #tb-accueil #tb-integrated-hero .choice-label{font-size:14px} #tb-accueil #tb-integrated-hero .choice-note{font-size:11px} #tb-accueil #tb-integrated-hero .guide{font-size:10.5px;margin-top:9px} #tb-accueil #tb-integrated-hero .entry-offer{margin-top:14px;padding:13px 14px 12px;border-radius:15px} #tb-accueil #tb-integrated-hero .offer{font-size:11px;margin-bottom:7px} #tb-accueil #tb-integrated-hero .price{gap:3px 10px} #tb-accueil #tb-integrated-hero .price strong{font-size:28px} #tb-accueil #tb-integrated-hero .price-what{font-size:11px} #tb-accueil #tb-integrated-hero .price-save{gap:8px} #tb-accueil #tb-integrated-hero .price-save s{font-size:14px} #tb-accueil #tb-integrated-hero .price-save b{font-size:11px;padding:4px 7px 5px} #tb-accueil #tb-integrated-hero .after{font-size:12px;margin-top:8px} #tb-accueil #tb-integrated-hero .terms{font-size:10px;max-width:none;margin-top:9px} #tb-accueil #tb-integrated-hero .direct{font-size:12.5px;margin-top:13px;width:100%;min-height:44px} /* Le bandeau reste visible sur telephone : il est APRES le hero, il ne pese pas sur la hauteur du prix, et c'est lui qui fait la separation. La regle display:none du gabarit a 600px est donc neutralisee ici. */ #tb-accueil #tb-integrated-hero .tb-ruban{display:flex;margin-top:0} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track{padding:9px 0} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li{font-size:13.5px;padding:0 .95rem} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li::after{margin-left:1.9rem;width:4px;height:4px} #tb-accueil #tb-integrated-hero .benefits{padding:18px 20px 14px;grid-template-columns:1fr;row-gap:14px} #tb-accueil #tb-integrated-hero .benefit{padding:0 0 0 13px;border-left:1px solid var(--tb-trait)} #tb-accueil #tb-integrated-hero .benefit:first-child{border-left:1px solid var(--tb-trait);padding-left:13px} #tb-accueil #tb-integrated-hero .benefit--lead{padding-right:0} #tb-accueil #tb-integrated-hero .benefit b{font-size:14px;margin-bottom:3px} #tb-accueil #tb-integrated-hero .benefit--lead b{font-size:16.5px;margin-bottom:4px} #tb-accueil #tb-integrated-hero .benefit span{font-size:12px;line-height:1.5;max-width:46ch} #tb-accueil #tb-integrated-hero .benefit--lead span{font-size:12px;max-width:46ch} #tb-accueil #tb-integrated-hero .comptoir-conditions{max-width:none;margin:0;padding:11px 20px 18px;font-size:9.5px;line-height:1.55} #tb-accueil #tb-integrated-hero .comptoir-conditions::before{left:20px;right:20px} #tb-accueil #tb-integrated-hero .benefit:not(.benefit--lead) b{padding-top:0} } /* ---------- Très petits écrans ------------------------------------------- */ @media(max-width:350px){ /* 320 px : budget vertical serre. On resserre le rythme pour que le prix reste au-dessus de la ligne de flottaison, sans rien retirer au contenu. */ #tb-accueil #tb-integrated-hero .hero{padding:10px 14px 12px} #tb-accueil #tb-integrated-hero .intro{padding:0 0 9px;margin:0 0 10px} #tb-accueil #tb-integrated-hero h1{font-size:23px;line-height:1.05;margin:0 0 7px} #tb-accueil #tb-integrated-hero .lead{font-size:11px;line-height:1.5} #tb-accueil #tb-integrated-hero .product{margin-bottom:9px} #tb-accueil #tb-integrated-hero .shot-note{font-size:8px;padding:3px 7px 4px} #tb-accueil #tb-integrated-hero .shot-note span{font-size:7px} #tb-accueil #tb-integrated-hero .product figcaption{margin-top:6px} #tb-accueil #tb-integrated-hero .conversion{padding:0} #tb-accueil #tb-integrated-hero .question h2{font-size:18px;margin:0 0 9px} #tb-accueil #tb-integrated-hero .actions{gap:7px} #tb-accueil #tb-integrated-hero .choice{padding:10px 11px 10px 12px;column-gap:9px;row-gap:2px} #tb-accueil #tb-integrated-hero .choice-label{font-size:13.5px} #tb-accueil #tb-integrated-hero .choice-note{font-size:10px;line-height:1.33} #tb-accueil #tb-integrated-hero .choice-go{width:25px;height:25px;font-size:13px} #tb-accueil #tb-integrated-hero .guide{font-size:10px;margin-top:8px} #tb-accueil #tb-integrated-hero .entry-offer{margin-top:10px;padding:12px 13px 11px} #tb-accueil #tb-integrated-hero .offer{font-size:10.5px;margin-bottom:6px} #tb-accueil #tb-integrated-hero .price strong{font-size:26px} #tb-accueil #tb-integrated-hero .price-what{font-size:10.5px} #tb-accueil #tb-integrated-hero .price-save s{font-size:14px} #tb-accueil #tb-integrated-hero .price-save b{font-size:11px;padding:4px 7px 5px} #tb-accueil #tb-integrated-hero .after{font-size:11.5px} #tb-accueil #tb-integrated-hero .terms{font-size:9.5px} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track{padding:8px 0} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li{font-size:12.5px;padding:0 .8rem} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li::after{margin-left:1.5rem} #tb-accueil #tb-integrated-hero .benefits{padding:15px 14px 12px;row-gap:12px} #tb-accueil #tb-integrated-hero .benefit b{font-size:13.5px} #tb-accueil #tb-integrated-hero .benefit--lead b{font-size:15.5px} #tb-accueil #tb-integrated-hero .benefit span{font-size:11.5px} #tb-accueil #tb-integrated-hero .benefit--lead span{font-size:11.5px} #tb-accueil #tb-integrated-hero .comptoir-conditions{padding:10px 14px 16px;font-size:9px} #tb-accueil #tb-integrated-hero .comptoir-conditions::before{left:14px;right:14px} } /* ---------- Mouvement (V39) ---------------------------------------------- UN seul moment orchestre : la sequence d'arrivee du hero, prolongee jusqu'au bandeau puis aux avantages. Pas de fade-up ajoute sur les autres sections, pas de survol sur les avantages : ils ne sont pas cliquables, et un effet par bloc est precisement le reflexe generique a eviter. Transform et opacity seulement. Les animations sont en CSS et en `both` : sans JavaScript le contenu arrive a son etat final et reste lisible. Le JS ne sert qu'a suspendre le bandeau hors ecran. */ @media(prefers-reduced-motion:no-preference){ #tb-accueil #tb-integrated-hero .intro, #tb-accueil #tb-integrated-hero .product, #tb-accueil #tb-integrated-hero .conversion, #tb-accueil #tb-integrated-hero .tb-ruban, #tb-accueil #tb-integrated-hero .benefit, #tb-accueil #tb-integrated-hero .comptoir-conditions{ animation:tb-hero-entree .62s var(--tb-ease) both; } #tb-accueil #tb-integrated-hero .product{animation-delay:.07s} #tb-accueil #tb-integrated-hero .conversion{animation-delay:.13s} /* derniers temps de la meme sequence, decales de 40 ms : sous la limite de 50 ms du guide, l'oeil lit une seule vague et non trois evenements */ #tb-accueil #tb-integrated-hero .tb-ruban{animation-delay:.19s} #tb-accueil #tb-integrated-hero .benefit{animation-delay:.23s} #tb-accueil #tb-integrated-hero .benefit:nth-child(2){animation-delay:.27s} #tb-accueil #tb-integrated-hero .benefit:nth-child(3){animation-delay:.31s} #tb-accueil #tb-integrated-hero .comptoir-conditions{animation-delay:.33s} /* Les annotations closent la meme vague : le trait se tire depuis l'objet, l'etiquette parait au bout. Elles arrivent APRES le panneau de decision, pour ne pas lui voler la premiere lecture. */ #tb-accueil #tb-integrated-hero .shot-fil{ stroke-dasharray:320; stroke-dashoffset:320; animation:tb-fil-trace .75s var(--tb-ease) both; } #tb-accueil #tb-integrated-hero .shot-fil:nth-of-type(2){animation-delay:.08s} #tb-accueil #tb-integrated-hero .shot-fil:nth-of-type(3){animation-delay:.16s} #tb-accueil #tb-integrated-hero .shot-point, #tb-accueil #tb-integrated-hero .shot-note{animation:tb-annot-parait .5s var(--tb-ease) both} #tb-accueil #tb-integrated-hero .shot-note--vins,#tb-accueil #tb-integrated-hero .shot-point:nth-of-type(1){animation-delay:.52s} #tb-accueil #tb-integrated-hero .shot-note--fiches,#tb-accueil #tb-integrated-hero .shot-point:nth-of-type(2){animation-delay:.6s} #tb-accueil #tb-integrated-hero .shot-note--accessoire,#tb-accueil #tb-integrated-hero .shot-point:nth-of-type(3){animation-delay:.68s} @keyframes tb-fil-trace{from{stroke-dashoffset:320}to{stroke-dashoffset:0}} @keyframes tb-annot-parait{ from{opacity:0;transform:translateY(5px) scale(.96)} to{opacity:1;transform:none} } @keyframes tb-hero-entree{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } /* Bandeau : boucle lente, duree et principe d'origine conserves. Les deux pistes sont identiques, la seconde masquee aux lecteurs d'ecran ; la premiere glisse d'exactement sa largeur, la boucle est donc invisible. */ @keyframes tb-ruban-defile{ from{transform:translateX(0)} to{transform:translateX(-100%)} } #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track{ animation:tb-ruban-defile 38s linear infinite; } /* Suspendu hors ecran : rien ne tourne pour personne pendant qu'on lit le bas de page. Pose par l'observateur d'intersection ; sans JS le bandeau defile simplement en continu. */ #tb-accueil #tb-integrated-hero .tb-ruban[data-hors-ecran] .tbh-marquee__track{ animation-play-state:paused; } /* Suspendu au survol, pour lire une mention au passage. Pointeur fin uniquement : sur tactile, un :hover colle apres le toucher. */ @media (hover:hover) and (pointer:fine){ #tb-accueil #tb-integrated-hero .tb-ruban:hover .tbh-marquee__track{ animation-play-state:paused; } } /* Reponse au clic sur « Conditions » : la cible s'eclaire le temps qu'on la trouve, puis s'eteint. Le repere en bord reste, lui, acquis. */ #tb-accueil #tb-integrated-hero .comptoir-conditions:target{ animation:tb-cible-conditions 1.9s var(--tb-ease) both; } @keyframes tb-cible-conditions{ 0%,22%{background-color:#2f12100f} 100%{background-color:transparent} } } /* Mouvement refuse : plus rien ne bouge, et le bandeau n'est plus une bande qui defile mais une liste qui se replie sur plusieurs lignes, entierement lisible. La piste miroir disparait pour ne pas doubler le texte. */ @media(prefers-reduced-motion:reduce){ #tb-accueil #tb-integrated-hero *{animation:none!important;transition:none!important} #tb-accueil #tb-integrated-hero .tb-ruban{flex-wrap:wrap; overflow:visible; padding:2px clamp(14px,5vw,40px)} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li{white-space:normal; text-align:center; padding:0 .7rem} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track{ flex-wrap:wrap; flex-shrink:1; width:100%; justify-content:center; row-gap:4px; column-gap:0; } #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li::after{margin-left:1.4rem} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track li:last-child::after{display:none} #tb-accueil #tb-integrated-hero .tb-ruban .tbh-marquee__track[aria-hidden]{display:none!important} /* le trait ne se dessine plus : il est simplement la */ #tb-accueil #tb-integrated-hero .shot-fil{stroke-dasharray:none!important; stroke-dashoffset:0!important} #tb-accueil #tb-integrated-hero .shot-note,#tb-accueil #tb-integrated-hero .shot-point{opacity:1!important; transform:none!important} } /* ---------- V40 : peaufinage du 30 octobre ------------------------------- Retour de Mendar a 13h05 : « ajouter des icones aux points, faire attention aux fioritures, jouer plus sur le contraste ». Composition inchangee : grille, panneau, titre, prix, parcours, bandeau et sept sections sont ceux de la V39 approuvee. 1. ICONES. Le carton de la box est imprime de verres a vin en SILHOUETTE PLEINE : c'est la langue graphique du client. Les trois pictogrammes sont donc des silhouettes pleines, pas des contours de 1,5 px d'une bibliotheque d'icones. Chacun nomme son avantage et rien d'autre : deux verres inegaux (deux vins proches mais distincts), la fiche avec sa roue des aromes et ses lignes (celle de la photo), le coffret qui revient. Les pastilles de la photo n'en recoivent PAS : l'image porte deja quatre etiquettes, y ajouter des glyphes serait la fioriture qu'on nous demande d'eviter. Les icones vont la ou il n'y avait aucun repere visuel. 2. CONTRASTE. Le gris secondaire passe de #7a6a60 a #5f4e45 : 5,11:1 -> 7,79:1 sur le creme. Les filets passent de 12 % a 18 % d'encre : a 12 % ils mesuraient 1,26:1, c'est-a-dire de la structure invisible. 3. FIORITURES. Le double trace des annotations (un tiret sombre epais sous un tiret clair) est remplace par un trace unique a ombre portee, et le flou d'arriere-plan des pastilles est retire : a 85 % d'opacite il ne produisait rien de visible et coutait une couche de composition. */ /* La rangee du haut a une hauteur FIXE : quelle que soit la taille de l'icone, les trois titres demarrent sur la meme ligne. */ #tb-accueil #tb-integrated-hero .benefit{ display:grid; grid-template-rows:30px auto auto; align-content:start; } #tb-accueil #tb-integrated-hero .benefit-pic{ grid-row:1; align-self:end; height:23px; width:auto; display:block; fill:var(--tb-vigne); margin:0 0 7px; } #tb-accueil #tb-integrated-hero .benefit--lead .benefit-pic{height:29px} /* L'icone close la vague d'arrivee du bas de hero, elle n'a pas son propre effet : elle herite de l'animation de son avantage. */ /* Telephone : l'icone passe A GAUCHE du titre. Posee au-dessus, elle ajoutait trois fois 30 px de hauteur et repoussait le prix sous la ligne de flottaison a 390 px — mesure, puis corrige. */ @media(max-width:900px){ #tb-accueil #tb-integrated-hero .benefit{ grid-template-columns:20px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; } #tb-accueil #tb-integrated-hero .benefit-pic{ grid-column:1; grid-row:1; align-self:center; height:17px; margin:0; } #tb-accueil #tb-integrated-hero .benefit--lead .benefit-pic{height:19px} #tb-accueil #tb-integrated-hero .benefit b{grid-column:2; grid-row:1} #tb-accueil #tb-integrated-hero .benefit span{grid-column:2; grid-row:2} } @media(max-width:350px){ #tb-accueil #tb-integrated-hero .benefit{grid-template-columns:18px minmax(0,1fr);column-gap:8px} #tb-accueil #tb-integrated-hero .benefit-pic{height:15px} #tb-accueil #tb-integrated-hero .benefit--lead .benefit-pic{height:17px} }