/* ===== Tunnel de commande — refonte graphique (mockup-tunnel.html) ===== Scopé sous body.tunnel / .cc-tunnel. Ne pas charger hors tunnel. */ /* Header épuré : on masque la nav horizontale et on simplifie. Le menu reste dans le DOM (intouché), juste caché en présentation. */ body.tunnel #menu { display: none; } /* Variables (reprises du mockup) */ body.tunnel { --cc-primary:var(--c-ink); --cc-primary-dark:var(--c-ink-hover); --cc-text:var(--c-text); --cc-text-dark:var(--c-text-strong); --cc-border:var(--c-border-input); --cc-bg-light:var(--c-bg-soft); --cc-bg-grey:var(--c-bg-grey); --cc-success:var(--c-success); --cc-pink:color-mix(in srgb, var(--c-accent) 14%, #fff); /* Géométrie du récapitulatif collant (spec checkout 2 colonnes §2.3, 23/07). --ck-top : retrait sous le haut de fenêtre quand le récap colle. --ck-gap-bas : respiration sous la grille (padding-bas de .cc-checkout). --ck-foot : hauteur du pied de page À L'ÉTAPE FINALISER, où il est réduit à sa bande légale (cf. « Pied aminci » plus bas). ⚠️ MESURÉE, pas devinée : un élément collant s'arrête au bas de son conteneur, donc en bas de page la place entre le haut de la fenêtre et le bas de la colonne gauche vaut 100vh − pied − retrait − top. Plafonner le récap au-delà le fait déborder PAR LE HAUT et sort son en-tête de l'écran. Si le pied du tunnel grandit, cette valeur doit suivre. */ --ck-top:24px; --ck-gap-bas:40px; --ck-foot:58px; /* 58px = mesuré sur dev à l'étape Finaliser (bande légale 30 + 2×14 de padding) */ } .cc-tunnel { font-family:'Montserrat',Arial,sans-serif; color:var(--cc-text); } /* ===== Conteneur centré (repris de .container du mockup) ===== */ body.tunnel .cc-container { max-width:1200px; margin:0 auto; padding:0 24px; } /* ===== Panier vide : message + CTA, puis rappel « à régler » (commandes en attente de paiement) et suggestions. Le tableau de bord des commandes a été retiré d'ici (il vit dans Mon compte) — le panier vide est une page d'accueil. ===== */ body.tunnel .cc-empty { max-width:880px; margin:0 auto; padding:40px 24px 64px; } body.tunnel .cc-empty-msg { font-family:'Montserrat',Arial,sans-serif; font-size:1.35rem; color:var(--cc-text-dark); margin:0 0 18px; } body.tunnel .cc-empty-cta { margin:0 0 8px; } body.tunnel .cc-empty-cta .cc-btn-next { text-decoration:none; } /* --- État A : panier vide sans impayé (bandeau compact, surface blanche franche) --- */ body.tunnel .cc-empty-a { display:flex; align-items:center; gap:22px; text-align:left; background:#fff; border:1px solid var(--c-border-struct); border-radius:var(--radius-l); padding:24px 28px; box-shadow:0 8px 26px rgba(36,26,18,.07); } body.tunnel .cc-empty-a-badge { width:60px; height:60px; border-radius:50%; background:var(--cc-primary); display:grid; place-items:center; color:var(--clr-or); flex:none; } body.tunnel .cc-empty-a-txt h2 { margin:0 0 5px; font-family:'Montserrat',Arial,sans-serif; font-size:1.2rem; font-weight:600; color:var(--cc-text-dark); } body.tunnel .cc-empty-a-txt p { margin:0; font-size:.9rem; color:var(--cc-text); max-width:46ch; } body.tunnel .cc-empty-a-cta { margin-left:auto; flex:none; } body.tunnel .cc-empty-a-cta .cc-btn-next { text-decoration:none; white-space:nowrap; } /* --- État B : sous-titre « panier vide » discret + lien continuer --- */ body.tunnel .cc-empty-sub { display:inline-flex; align-items:center; gap:8px; justify-content:center; color:#8a8378; font-size:.86rem; margin:0 0 18px; } body.tunnel .cc-empty-sub svg { opacity:.7; } body.tunnel .cc-empty-continue { margin:20px 0 0; } body.tunnel .cc-empty-continue a { color:var(--clr-or-text); font-weight:600; font-size:.88rem; text-decoration:none; border-bottom:1px solid rgba(138,98,36,.4); padding-bottom:1px; } /* --- État B : commandes à régler = HÉROS (ton B blanc premium, filet or) --- */ body.tunnel .cc-empty-pay { text-align:left; margin:0 0 8px; background:#fff; border:1px solid var(--c-border-struct); border-left:5px solid var(--clr-or); border-radius:var(--radius-l); padding:24px 26px; box-shadow:0 8px 26px rgba(36,26,18,.09); } body.tunnel .cc-empty-pay-head { display:flex; align-items:center; gap:15px; margin-bottom:18px; flex-wrap:wrap; } body.tunnel .cc-empty-pay-badge { width:48px; height:48px; border-radius:50%; background:var(--cc-primary); display:grid; place-items:center; color:var(--clr-or); flex:none; } body.tunnel .cc-empty-pay-heco { flex:1 1 auto; min-width:0; } body.tunnel .cc-empty-pay-title { font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:1.1rem; color:var(--cc-text-dark); } body.tunnel .cc-empty-pay-sub { font-size:.85rem; color:var(--cc-text); margin-top:2px; } body.tunnel .cc-empty-pay-total { text-align:right; flex:none; } body.tunnel .cc-empty-pay-total .k { font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:#9a9182; } body.tunnel .cc-empty-pay-total .v { font-family:'Montserrat',Arial,sans-serif; font-size:1.9rem; font-weight:700; color:var(--clr-or-text); line-height:1; } body.tunnel .cc-empty-pay-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } body.tunnel .cc-empty-pay-item { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--cc-bg-light); border:1px solid var(--c-line); border-radius:var(--radius-m); padding:13px 16px; } body.tunnel .cc-empty-pay-meta { display:flex; flex-direction:column; flex:1 1 160px; min-width:0; } body.tunnel .cc-empty-pay-num { font-weight:600; color:var(--cc-text-dark); } body.tunnel .cc-empty-pay-date { font-size:.78rem; color:#8a8378; } body.tunnel .cc-empty-pay-amt { margin-left:auto; font-weight:700; color:var(--cc-text-dark); font-size:1.05rem; white-space:nowrap; } body.tunnel .cc-empty-pay-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; line-height:1; text-decoration:none; background:var(--cc-primary); color:#fff; font-weight:var(--btn-weight); font-size:var(--btn-font); letter-spacing:var(--btn-letter); min-height:var(--btn-min-h); padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-s); white-space:nowrap; transition:background .15s; } /* #17 : pilule 999px → rayon système (n'était pas un chip) */ body.tunnel .cc-empty-pay-btn:hover { background:var(--cc-primary-dark); } /* --- Suggestions panier vide (markup autonome .cc-esugg*) --- */ body.tunnel .cc-esugg { margin:38px 0 0; } body.tunnel .cc-esugg-title { font-family:'Montserrat',Arial,sans-serif; font-size:1.05rem; font-weight:600; color:var(--cc-text-dark); margin:0 0 16px; text-align:center; } body.tunnel .cc-esugg-title::after { content:""; display:block; width:54px; height:2px; background:var(--clr-or); border-radius:2px; margin:10px auto 0; } body.tunnel .cc-esugg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } body.tunnel .cc-esugg-card { display:flex; flex-direction:column; border:1px solid #ececec; border-radius:var(--radius-m); padding:14px; background:#fff; transition:box-shadow .15s, transform .15s, border-color .15s; } @media (hover: hover) { body.tunnel .cc-esugg-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); border-color:var(--c-border-struct); } } /* pt13d — cf. pt11-survol-tactile */ /* #38 — la carte n'est plus un : le lien fiche stacke vignette/appellation/nom, le pied (prix + bouton « + Panier ») se cale en bas. */ body.tunnel .cc-esugg-link { display:flex; flex-direction:column; flex:1 1 auto; text-decoration:none; color:inherit; } body.tunnel .cc-esugg-thumb { display:flex; align-items:center; justify-content:center; height:120px; margin-bottom:12px; } body.tunnel .cc-esugg-thumb img { max-height:120px; max-width:100%; object-fit:contain; mix-blend-mode:multiply; } body.tunnel .cc-esugg-thumb--emoji { font-size:3rem; background:var(--cc-bg-light); border-radius:var(--radius-s); width:100%; } body.tunnel .cc-esugg-appel { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--clr-or-text); } body.tunnel .cc-esugg-name { font-family:'Montserrat',Arial,sans-serif; font-size:.95rem; color:var(--cc-text-dark); margin:3px 0 8px; line-height:1.3; } body.tunnel .cc-esugg-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; } body.tunnel .cc-esugg-price { font-weight:700; color:var(--cc-text-dark); } body.tunnel .cc-esugg-btn { flex-shrink:0; border:1px solid var(--clr-or); background:#fff; color:var(--clr-or-text); font-size:.8rem; font-weight:600; padding:6px 10px; border-radius:var(--radius-s); cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s; } /* pt4 (retours 24/07) — le survol ne bascule plus en encre plein : preset piloté par le back-office (cart_add_hover), posé en classe sur par index.php. Les variables --cc-addh-* sont définies dans site.css (bloc pt4). */ @media (hover: hover) { body.tunnel .cc-esugg-btn:hover { background:var(--cc-addh-bg); color:var(--cc-addh-tx); border-color:var(--cc-addh-bd); box-shadow:var(--cc-addh-sh); transform:var(--cc-addh-tr); } } /* pt13d — cf. pt11-survol-tactile */ body.tunnel .cc-esugg-btn:disabled { opacity:.7; cursor:default; } @media (max-width:880px) { body.tunnel .cc-esugg-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px) { body.tunnel .cc-empty-pay-total { text-align:left; width:100%; order:3; margin-top:4px; } body.tunnel .cc-empty-pay-item { flex-direction:column; align-items:stretch; } body.tunnel .cc-empty-pay-amt { margin-left:0; } body.tunnel .cc-empty-pay-btn { text-align:center; } } /* ===== Bandeau de réassurance (trustbar) ===== */ body.tunnel .cc-trustbar { background:var(--cc-bg-light); border-bottom:1px solid var(--c-border-struct); padding:8px 0; } body.tunnel .cc-trustbar .cc-container { display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; } body.tunnel .cc-trustbar span { font-size:12.5px; color:var(--cc-text); display:flex; align-items:center; gap:6px; } /* ===== Stepper (barre de progression) — Task 1 reskin bloc unique ===== */ body.tunnel .cc-steps { background:var(--c-surface); border-bottom:1px solid var(--c-line); padding:16px 0; } body.tunnel .cc-steps-list { display:flex; align-items:center; justify-content:center; list-style:none; margin:0; padding:0; } body.tunnel .cc-step-item { display:flex; align-items:center; gap:8px; } body.tunnel .cc-step-lbl { font-size:13px; font-weight:600; white-space:nowrap; } /* #1 (retours 11/07) : box-sizing:border-box → la variante .is-todo (border 1.5px) rendait 30px au lieu de 27px (pastilles inégales) ; line-height:1 → le chiffre était biaisé vers le haut par le line-height:30px hérité (boîte de ligne plus haute que la cellule). Chiffres centrés, pastilles égales. */ body.tunnel .cc-step-num { box-sizing:border-box; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; line-height:1; font-size:12px; font-weight:700; flex:0 0 auto; } body.tunnel .cc-step-item.is-done .cc-step-num { background:var(--c-ink); color:var(--c-accent); } body.tunnel .cc-step-item.is-done .cc-step-lbl { color:var(--c-ink); } body.tunnel .cc-step-item.is-current .cc-step-num { background:var(--c-ink); color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); } body.tunnel .cc-step-item.is-current .cc-step-lbl { color:var(--c-ink); font-weight:700; } body.tunnel .cc-step-item.is-todo .cc-step-num { background:transparent; border:1.5px solid var(--c-border-strong); color:#a9a294; } body.tunnel .cc-step-item.is-todo .cc-step-lbl { color:#a9a294; } body.tunnel .cc-step-sep { width:44px; height:2px; margin:0 10px; background:var(--c-border-strong); list-style:none; } body.tunnel .cc-step-sep.is-fill { background:var(--c-ink); } @media (max-width:560px){ body.tunnel .cc-step-sep{ width:18px; margin:0 6px; } body.tunnel .cc-step-lbl{ font-size:11px; } body.tunnel .cc-step-num{ width:23px; height:23px; } } /* ===== Barre fusionnée logo + étapes (tunnel plein écran) ===== cc_tunnel_stepper() rend désormais .cc-tunnel-head = logo (gauche) | fil d'étapes (centre) | cale invisible (droite, = largeur logo pour centrer optiquement le fil). Grille auto|1fr|auto. La bande propre du stepper (.cc-steps fond/bordure/padding) est neutralisée pour s'y inliner. */ /* pt11 (retours 20260718) — trait sous les étapes SUPPRIMÉ (décision Thomas : plutôt qu'étendre la border-bottom, on la retire). La bande garde son fond ; plus de filet. */ body.tunnel .cc-tunnel-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; max-width:1000px; margin:0 auto; padding:10px 22px; background:var(--c-surface); } body.tunnel .cc-tunnel-head__logo { display:inline-flex; } body.tunnel .cc-tunnel-head__logo .logo-img, body.tunnel .cc-tunnel-head__tail .logo-img { height:40px; width:auto; display:block; } body.tunnel .cc-tunnel-head .cc-steps { background:transparent; border:0; padding:0; } body.tunnel .cc-tunnel-head .cc-steps-list { justify-content:center; } /* Mobile : barre compacte (libellés d'étapes → pastilles seules, logo réduit) + options de paiement dont les pastilles CB/Visa/MC passent SOUS le libellé (fin du débordement). NB : .cc-opt est une GRILLE (22px 1fr auto), PAS un flex → le repli se fait en effondrant la grille à 2 colonnes et en faisant descendre la cellule prix sur une 2e ligne pleine largeur (le flex-wrap de la maquette d'origine était inopérant sur grid). Sélecteur .cc-optlist .cc-opt requis pour battre la spécificité de la règle de base (l.1811). */ @media (max-width:560px){ body.tunnel .cc-tunnel-head { gap:10px; padding:8px 12px; } body.tunnel .cc-tunnel-head__logo .logo-img, body.tunnel .cc-tunnel-head__tail .logo-img { height:30px; } body.tunnel .cc-tunnel-head .cc-step-lbl { display:none; } body.tunnel .cc-optlist .cc-opt { grid-template-columns:22px 1fr; } body.tunnel .cc-optlist .cc-opt .cc-opt-price { grid-column:1 / -1; justify-self:start; justify-content:flex-start; margin-top:6px; padding-left:35px; white-space:normal; } body.tunnel .cc-optlist .cc-opt .cc-opt-price.cc-pay-schemes { flex-wrap:wrap; justify-content:flex-start; } /* 🧨 pt13 = pt8 (retours 26/07) — CE 6px NE VAUT QU'À L'ÉTAPE FINALISER. Il écrasait la réservation `padding-top: var(--header-mobile-h, 110px)` que site.css:3703 pose sur #tunnel-content parmi les conteneurs de premier niveau. Or #header_mobile n'est masqué (via #site-sticky-header, cf. l.176) qu'à partir de cc-step-gt0 : à l'ÉTAPE PANIER il est fixed, opaque, z-1000 et haut de 140px au-dessus d'un contenu qui ne lui réservait que 6px. Mesuré au banc iPhone 13 (iframe 390×844 same-origin sur dev, panier garni) : .cc-tunnel-head (le fil d'étapes) 6→52px = INTÉGRALEMENT sous le header, jamais vu de personne ; le bandeau de fusion .cc-cart-alert--info 64→152,5px, recouvert sur 76,3 de ses 88,5px — il n'en dépassait que 12,3px, le liseré doré arrondi de la capture de Thomas. Après réservation : fil d'étapes 140→186, bandeau 198→286,5, recouvrement NUL. ⛔ La piste `scroll(0,0)` (présent dans la seule branche panier vide, panier.inc.php:159) est RÉFUTÉE : la mesure est prise à scrollY=0 sur un chargement neuf. Le défaut n'a rien à voir avec la position de défilement. 🔑 On réserve par DÉFAUT (donc aussi sans JS, où aucune classe d'étape n'est posée : tunnel.js:69 en est le seul émetteur) et on ne retombe à 6px qu'une fois le header réellement masqué. --header-mobile-h est reposée par index.php à chaque changement d'étape (window.ccApplyHeaderOffset, appelé depuis tunnel.js show()) : sans ce rappel, un retour Finaliser→Panier sans défilement gardait la valeur 0 mesurée pendant que le header était masqué, et le contenu repassait dessous. */ body.tunnel #tunnel-content { padding-top: var(--header-mobile-h, 110px); } body.tunnel:has(.cc-tunnel.cc-step-gt0) #tunnel-content { padding-top:6px; } body.tunnel .cc-hero { padding-top:14px; } } /* 🧨 pt7a (retours 30/07) — « le tunnel sur mobile, l'espace réservé au header est du vide » (page Confirmation). CAUSE MESURÉE au banc iPhone 13 (390px réels, DPR3, pointer:coarse), sur /paiement-accepte-payzen : #tunnel-content padding-top = 110px | --header-mobile-h = "" (JAMAIS posée) #header_mobile absent | #site-sticky-header absent | .cc-tunnel-head top = 110px Les pages tunnel de cat. B (commande, paiement accepté / refusé, reprise) n'émettent AUCUN header : index.php:238 remplace tout le bloc #site-sticky-header par un commentaire. Or le script qui publie --header-mobile-h sort immédiatement quand #header_mobile est absent (index.php:300) — la variable n'existe donc pas et les DEUX réservations retombent sur leur repli de 110px : celle de tunnel.css (l.182) et celle de site.css:3917 (@media max-width:1130px), qui réserve pour #tunnel-content parmi les conteneurs de premier niveau. 110px de blanc à DPR3 = les ~330px de la capture client. ⚠️ Le repli de 110px est CORRECT là où un header existe (anti-flash avant la mesure JS, cf. la note de site.css) : on ne le touche pas. On ANNULE la réservation là, et seulement là, où il n'y a rien à réserver — même patron que l'exclusion cc-step-gt0 ci-dessus, même valeur de repos (6px). 🔑 Portée jusqu'à 1130px et non 560px : c'est site.css qui réserve entre 561 et 1130 (mesuré : padTop = 110px de 360 à 1129px, 0 à 1131). Un correctif borné à 560px aurait laissé le vide sur toute la plage tablette. ⚠️ Spécificité (1,1,2) grâce au #id dans :not(:has()) → bat les deux réservations quel que soit l'ordre des feuilles. À l'étape Finaliser du PANIER, #header_mobile est display:none mais TOUJOURS dans le DOM : cette règle ne s'y applique pas, l'exclusion cc-step-gt0 continue de faire le travail. */ /* 🧨 C2 (retours 30/07) — MÊME DÉFAUT, AUTRE ÉTAPE : le Finaliser du PANIER. Deuxième règle de ce bloc. Le header y est RÉELLEMENT masqué (body.tunnel:has(.cc-tunnel.cc-step-gt0) #site-sticky-header { display:none }, l.229), et l'exclusion qui annule la réservation en conséquence existe depuis le pt13 — mais elle vit dans @media (max-width:560px). Entre 561 et 1130px, c'est site.css:3917 qui réserve, sans exclusion : la page réservait la hauteur d'un header invisible. Mesuré au banc, étape Finaliser à 800px : #site-sticky-header display = none, et pourtant #tunnel-content padding-top = 141px, .cc-tunnel-head top = 141px. Après : 6px, .cc-tunnel-head top = 6px — 135px récupérés. À 390px les deux états valaient déjà 6px (l'exclusion de 560px faisait son travail), à 1280px les deux valent 0px. ⚠️ La réservation reste INTACTE à l'étape Panier, où le header est visible : mesuré 141px avant comme après, à 390 et à 800px. On n'annule que sur la classe d'étape. 🔑 Corrigé depuis tunnel.css et NON depuis site.css, sciemment : le #id présent dans :has() / :not() donne à ces deux sélecteurs une spécificité (1,3,2) et (1,1,2) qui bat le `#tunnel-content` de site.css (1,0,0) quel que soit l'ordre des feuilles. Toucher site.css n'aurait rien apporté et l'aurait mise en collision avec les autres lots. */ @media (max-width:1130px){ body.tunnel:not(:has(#header_mobile)) #tunnel-content { padding-top:6px; } body.tunnel:has(.cc-tunnel.cc-step-gt0) #tunnel-content { padding-top:6px; } } /* ===== Bandeau confiance tunnel : SUPPRIMÉ (pt2, retours Thomas 28/07) ===== .cc-tunnel-trust (cat. B) et .cc-tunnel-trust--morph (cat. A) retirés du markup (index.php) en même temps que .header-top desktop et .m-promo mobile : c'était le même bandeau encre, avec le même téléphone à droite. Règles retirées avec eux. ===== Bascule plein écran au step Finaliser (panier cat. A) ===== ⚠ CETTE RÈGLE RESTE. Elle vivait dans le même bloc que le bandeau mais n'a rien à voir avec lui : au Finaliser (cc-step-gt0 posé par tunnel.js) elle masque le header complet et le menu, pour que le tunnel passe en plein écran. La supprimer avec le bandeau ferait réapparaître le header en plein tunnel. */ body.tunnel:has(.cc-tunnel.cc-step-gt0) #site-sticky-header, body.tunnel:has(.cc-tunnel.cc-step-gt0) #menu { display:none; } body.tunnel:has(.cc-tunnel.cc-step-gt0) { --header-h:0px; } /* récap : plus de header fantôme sous les éléments collants */ /* Cat. A step 0 : le logo de la barre fusionnée ferait doublon avec le header complet → masqué (cale conservée pour le centrage). */ body.tunnel .cc-tunnel.cc-at-step0 .cc-tunnel-head__logo, body.tunnel .cc-tunnel.cc-at-step0 .cc-tunnel-head__tail { visibility:hidden; } /* ===== Pied ALLÉGÉ à l'étape Finaliser (chantier checkout 2 colonnes, 23/07) ===== Pendant du masquage de header juste au-dessus, et PRÉREQUIS du récap collant. Mesuré sur dev : le pied complet fait 537px (newsletter 138 + footer-dark 400). Un pied de cette hauteur occupe toute la fenêtre en bas de page → le conteneur du récap collant s'arrête 537px au-dessus du bas de l'écran et le récapitulatif sort ENTIÈREMENT du champ (haut mesuré à −442px). Réduit à sa bande légale — 58px mesurés ici — le récap reste entier jusqu'en bas de page. C'est cette valeur qui alimente --ck-foot : les deux réglages ne se séparent pas. Ce qui part : la newsletter (commerciale, hors sujet entre le CTA de paiement et le bas de page) et les 4 colonnes. Ce qui reste : la bande légale du bas, complétée par les liens légaux de la colonne « Informations » qui disparaît avec la grille (.cc-tunnel-legal, rendu par inc/templates/v4/footer.inc.php dans le seul tunnel). Gate :has() identique à celle du header ci-dessus. */ body.tunnel .cc-tunnel-legal { display:none; } body.tunnel:has(.cc-tunnel.cc-step-gt0) footer .newsletter, body.tunnel:has(.cc-tunnel.cc-step-gt0) footer .footer-grid { display:none; } body.tunnel:has(.cc-tunnel.cc-step-gt0) footer .footer-dark { padding:14px 0; } body.tunnel:has(.cc-tunnel.cc-step-gt0) footer .footer-bottom { border-top:0; padding-top:0; } body.tunnel:has(.cc-tunnel.cc-step-gt0) .cc-tunnel-legal { display:inline-flex; flex-wrap:wrap; gap:6px 18px; } /* ===== Layout 2 colonnes — adapté de .checkout-inner ===== */ body.tunnel .cc-checkout { display:grid; /* Lot B (spec §2.2, 23/07) : 420px et non 320. À 320 le récap ne tenait que les totaux — c'est le grief « trop petit, il manque des infos » qui avait motivé la suppression des 2 colonnes en juin. Ni 50/50 : la colonne gauche tomberait à ~570px et la carte des points relais (grid 300px + carte) à ~230px, inexploitable. minmax(0,1fr) et non 1fr : sans le minimum à 0, un enfant large (table du panier, carte des relais) pousse la piste au-delà de sa part et déborde la grille. */ grid-template-columns:minmax(0,1fr) 420px; gap:32px; align-items:start; /* #3 (retour Thomas 29/06) : padding-top 36→16 pour résorber le vide sous le stepper (le margin-top:18px du 1er titre, hérité de .cc-step > h2, est par ailleurs neutralisé plus bas). Bas passé de 56px à --ck-gap-bas : c'est la même respiration, mais nommée, car elle entre dans le calcul de la hauteur du récap collant (§2.3). */ padding:16px 24px var(--ck-gap-bas); } body.tunnel .cc-checkout-left { min-width:0; } /* ===== BLOC UNIQUE — étape PANIER SEULEMENT ===== #1 (retour Thomas 25/06) : le Panier passe en bloc unique (avant : 2 colonnes table+récap collant). On EFFONDRE la grille en une seule colonne centrée et on fait DESCENDRE le récap (.cc-checkout-right) DANS LE FLUX, APRÈS le contenu (order). Le nœud récap n'est PAS déplacé dans le DOM (il est PARTAGÉ entre étapes : un déplacement casserait le panier) — seul l'ordre visuel change, ce qui préserve tous les data-recap/data-cart-state/ids. Le sticky est neutralisé en colonne unique. Lot B (spec §2.1/§2.2, 23/07) : cette surcharge s'appliquait AUSSI à cc-step-gt0. Elle en est retirée — l'étape Finaliser reprend les 2 colonnes de la grille définie plus haut. Le Panier, lui, reste en bloc unique : sa table à 4 colonnes éditables ne supporterait pas de perdre 420px (Shopify fait de même — panier pleine largeur, checkout en 2 colonnes). Le « récapitulatif orphelin » sous le bouton de paiement n'était pas un bug indépendant : c'était le résidu de l'order:1 ci-dessous, il disparaît mécaniquement avec le retrait du sélecteur gt0. */ body.tunnel .cc-tunnel.cc-at-step0 .cc-checkout { display:flex; flex-direction:column; /* #1 (retour Thomas 29/06) : le bloc unique était plafonné à 720px → gouttières « panier trop serré ». #4 (recette 29/06-bis) : passé à --max-width (1200px) c'était l'excès inverse — les écrans Finaliser/Paiement/Livraison (2-3 options + champs déjà plafonnés à 600px) s'étiraient sur 1200px → « sections énormes ». On atterrit sur une colonne contenue de 960px, centrée sous le header (même axe) : tableau panier confortable, options/formulaires non délavés, pas de saut de largeur entre étapes. La barre fixe du bas (.cc-paybar-in) est alignée sur la même largeur (cf. l. ~1869) → le CTA reste au-dessus du contenu qu'il valide. Desktop only (sous 960px de viewport, max-width n'a aucun effet). */ max-width:960px; margin:0 auto; gap:0; /* 🔁 RECETTE 26/07-quater (Thomas) : « les boutons sont collés trop bas, ils doivent être plus proches de la fin du récapitulatif ». Cause MESURÉE : .cc-checkout porte `padding-bottom:var(--ck-gap-bas)` — une réserve dimensionnée pour le récap COLLANT (elle entre dans le calcul de sa hauteur, §2.3). Or à l'étape Panier le récap est `position:static` (cf. .cc-at-step0 .cc-checkout-right) : cette réserve ne sert RIEN ici, elle ne fait qu'éloigner .cc-cart-actions, rendue juste après le bloc. On la ramène à une simple respiration POUR CETTE ÉTAPE — les étapes suivantes gardent --ck-gap-bas intact, le calcul du collant n'est pas touché. */ padding-bottom:10px; } body.tunnel .cc-tunnel.cc-at-step0 .cc-checkout-left { width:100%; } body.tunnel .cc-tunnel.cc-at-step0 .cc-checkout-right { width:100%; order:1; position:static; top:auto; align-self:auto; margin-top:8px; } /* ===== Récap commande (colonne droite collante) — adapté de .order-recap ===== #7 : le sticky est porté par la COLONNE (grid-item), pas par .cc-recap. La grille .cc-checkout est en align-items:start → sans align-self:start ici, la colonne ne collerait pas. Porté par le grid-item, il colle dans toute la hauteur de la grille. retours #6 : top header-aware (var --header-h posée en JS dans index.php, mise à 0 quand le header est masqué au scroll) → le récap se cale SOUS le header sticky au lieu d'être chevauché, et remonte quand le header disparaît. Même pattern que la FAQ/Carnet (.aside) et le sommaire article. */ body.tunnel .cc-checkout-right { min-width:0; align-self:start; position:sticky; top:calc(var(--header-h, 0px) + var(--ck-top)); transition:top .25s ease; } /* ----- Règle de HAUTEUR du récap collant (spec §2.3, 23/07) — le point le plus fragile du chantier. Un élément sticky s'arrête au bas de son conteneur : arrivé en bas de page, la place entre le haut de la fenêtre et le bas de .cc-checkout vaut 100vh − pied − retrait-bas − top. Si le récap est plus haut que ça, il ne « rentre » plus et déborde PAR LE HAUT : c'est son en-tête qui sort de l'écran. Mesuré sur dev avant amincissement du pied (537px) : le récap partait à −442px, entièrement hors champ. C'est le pied aminci (--ck-foot) qui rend ce plafond praticable ; les deux réglages ne se séparent pas. Le corps de la carte porte son propre ascenseur, l'en-tête reste figé — la chaîne flex ci-dessous est nécessaire parce que overflow ne fonctionne que si CHAQUE ancêtre autorise sa boîte à rétrécir (min-height:0). ⚠️ Structure actuelle à l'étape Finaliser : .cc-recap est aplati (l. ~1880) et la carte visible est le .cc-sec interne, qui porte l'en-tête « Récapitulatif ». Le lot C restructure ce récap — la chaîne devra suivre s'il change de forme. Desktop seulement : sous 1140px la colonne retombe dans le flux (cf. plus bas). ----- */ @media (min-width:1141px) { body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right { max-height:calc(100vh - var(--ck-top) - var(--ck-gap-bas) - var(--ck-foot)); display:flex; flex-direction:column; } body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right .cc-recap, body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right .cc-recap > .cc-recap-body, body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right .cc-recap .cc-sec { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; } body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right .cc-recap .cc-sec > .cc-sec-head { flex:none; } body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right .cc-recap .cc-sec > .cc-sec-body { overflow-y:auto; min-height:0; } } /* ----- Repli une colonne sous 1140px. La spec §6 annonçait « ~1000px » ; la mesure impose plus haut. La piste droite est fixe à 420px, donc la colonne gauche vaut viewport − 48 (gouttières) − 32 (gap) − 420. Or le sélecteur de point relais garde sa grille « liste 300px + carte » jusqu'à 640px (l. ~2135) : à 1001px de fenêtre la colonne gauche tombe à 486px et la carte à ~186px — exactement le défaut qui avait fait écarter l'option 50/50 (§2.2). À 1141px la colonne gauche vaut 641px et la carte ~341px, ce qui passe. On effondre donc la grille sous ce seuil et on redescend le récap dans le flux, APRÈS le contenu, exactement comme le fait l'étape Panier. Aucun déplacement DOM (nœud partagé) : seul l'ordre visuel change. Placé AVANT le bloc mobile ≤640px, qui le raffine (récap remonté en tête, replié). ----- */ @media (max-width:1140px) { body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout { grid-template-columns:1fr; } body.tunnel .cc-tunnel.cc-step-gt0 .cc-checkout-right { order:1; max-height:none; position:static; top:auto; align-self:auto; } } body.tunnel .cc-recap { background:#fff; border:1px solid var(--cc-border); border-radius:var(--radius-m); overflow:hidden; } /* #4 : récap en cours de rafraîchissement (changement de mode de livraison sans reload) */ body.tunnel .cc-recap.is-refreshing { opacity:.55; pointer-events:none; transition:opacity .12s; } body.tunnel .cc-recap-head { background:var(--cc-text-dark); color:#fff; padding:13px 18px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; display:flex; justify-content:space-between; align-items:center; } body.tunnel .cc-recap-toggle { font-size:11px; color:rgba(255,255,255,0.6); } body.tunnel .cc-recap-body { padding:16px 18px; } body.tunnel .cc-recap-line { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:5px 0; } /* pt13a (retours Thomas 29/07) — le SOUS-TOTAL du récap passe en or, comme celui du tiroir (.cart-drawer-sub-val, site.css) : les deux surfaces montrent le même montant, elles ne peuvent pas le montrer dans deux couleurs. Seule la VALEUR est accentuée, le libellé reste en texte courant (même partage que .cc-recap-total). 🧨 Le sous-total n'a AUCUNE classe propre (panier.inc.php:1682) — on l'atteint par sa position : c'est la ligne qui suit immédiatement la liste d'articles. Sélecteur de VOISINAGE et non :first-of-type, qui désignerait .cc-recap-items (premier
du corps). Si un jour une ligne s'intercale, poser une classe dans le PHP plutôt que d'empiler les combinateurs. */ body.tunnel .cc-recap-items + .cc-recap-line span:last-child { color:var(--c-accent-text); } /* Lot C (§2.5) — sous-ligne grise sous « Livraison » : le MODE retenu (« Point relais GLS »). Portée par le libellé, pas par la valeur, pour ne pas déséquilibrer la colonne des montants. */ /* 🔁 RECETTE 30/07 (Thomas, pt5) — interligne du sous-libellé. body.tunnel est épinglé à line-height:30px (calibrage historique du tunnel, cf. site.css) et cette sous-ligne n'y opposait rien : dès que le mode passe à la ligne, les deux lignes sont écartées de 30px. On borne le PORTEUR, jamais body.tunnel — même geste que la doctrine appliquée l.1086-1089 du présent fichier. Défaut LATENT avant ce lot (« Point relais GLS » sur écran étroit), rendu visible par les libellés de mode plus longs. */ body.tunnel .cc-recap-line .cc-sub { display:block; font-size:11.5px; font-weight:500; line-height:1.35; margin-top:1px; color:var(--cc-text-muted,#8a8a8a); } /* « offert » : vert de succès, sur la même famille que le reste du tunnel (le style inline qui portait cette couleur est remonté ici — zéro valeur en dur). */ body.tunnel .cc-recap-line .is-free { color:var(--cc-success); font-weight:700; } /* Ligne « Cagnotte gagnée » (§2.5 bis) — ancien encadré ambre (fond + bordure + pastille) converti en LIGNE DE TOTAUX ordinaire : l'encadré empruntait le vocabulaire d'une notification d'application pour une information qui est un simple poste du récap. Seule la valeur reste accentuée, en or. Montant en EUROS (cf. commentaire PHP). */ body.tunnel .cc-recap-line--pts .cc-k { display:flex; align-items:center; gap:7px; } body.tunnel .cc-recap-line--pts .cc-k svg { color:var(--clr-or); flex:none; } body.tunnel .cc-recap-line--pts .cc-v { color:var(--clr-or-text); font-weight:700; white-space:nowrap; } body.tunnel .cc-recap-total { display:flex; justify-content:space-between; padding:10px 0 0; margin-top:6px; border-top:2px solid var(--cc-text-dark); font-weight:700; } body.tunnel .cc-recap-total span:last-child { color:var(--clr-or-text); } /* ----- Lot C (§2.5) — LISTE D'ARTICLES DU RÉCAP, variante R2 : Qté | vignette | Article | Total. La quantité est une COLONNE (elle était en bulle sur la vignette) et n'a plus de « × ». L'appellation coiffe le nom du vin, en or capitales, comme dans la table du panier — c'est ce qui rend la ligne identifiable en un coup d'œil. ----- */ body.tunnel .cc-rtab { width:100%; border-collapse:collapse; margin:0; } body.tunnel .cc-rtab thead th { font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--cc-text-muted,#8a8275); text-align:left; padding:0 0 8px; border-bottom:1px solid var(--c-line); } body.tunnel .cc-rtab thead th.ta-c { text-align:center; } body.tunnel .cc-rtab thead th.ta-r { text-align:right; } body.tunnel .cc-rtab td { padding:9px 0; border-bottom:1px solid var(--c-line); vertical-align:middle; } body.tunnel .cc-rtab tbody tr:last-child td { border-bottom:0; } body.tunnel .cc-rtab .td-q { width:30px; padding-right:10px; text-align:center; white-space:nowrap; font-size:13px; font-weight:700; color:var(--cc-text-dark); } body.tunnel .cc-rtab .td-t { width:52px; padding-right:10px; } body.tunnel .cc-rtab .td-n { min-width:0; } /* pt13a (retours Thomas 29/07) — total de ligne DORÉ, comme dans le tiroir et dans la table éditable. Sans fuite possible : .cc-rtab n'est émis que par le récap de /panier (inc/panier.inc.php:1678), jamais par les récaps en lecture seule. */ body.tunnel .cc-rtab .td-p { width:64px; text-align:right; white-space:nowrap; font-size:13px; font-weight:700; color:var(--c-accent-text); } body.tunnel .cc-rtab .r-app { display:block; font-size:9.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--clr-or-text); } body.tunnel .cc-rtab .r-name { display:block; font-size:12.5px; line-height:1.3; font-weight:600; color:var(--cc-text-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Recette 23/07 (Thomas) : vignette alignée sur celle de la table ÉDITABLE (.od-photo, cf. plus bas) — la référence « faite ailleurs ». Fond gris NEUTRE (#f5f5f5) et non plus crème : la crème + mix-blend-mode:multiply teintait/assombrissait les bouteilles (rendu « incorrect »). Bordure fine comme .od-photo, format un peu plus haut (42×54) pour que la bouteille respire au lieu de paraître tassée/zoomée. object-fit:contain conservé (bouteille entière, jamais recadrée). */ /* 🧨 CAUSE RACINE du « toujours ko » (mesuré en repro 23/07) : en `display:grid` + `place-items:center`, le `height:100%` de l' NE SE RÉSOUT PAS (pourcentage contre une zone de grille non étirée) → l'image retombait sur sa hauteur INTRINSÈQUE (36px de large × ratio 3,6 = 129,6 + padding = 135,6px) et débordait la boîte de 54px, qu'`overflow:hidden` rognait. `object-fit:contain` n'y pouvait rien : la BOÎTE de l'image avait déjà le ratio de la bouteille, il n'y avait plus rien à letterboxer. En FLEX (comme .ccr-thumb, .cc-cart-thumb et .cart-drawer-thumb — les vignettes qui ont toujours bien rendu), le pourcentage se résout contre la hauteur définie du conteneur : image mesurée 42×54, bouteille entière. NE PAS repasser en grid. */ /* 🧨 Recette 24/07 (Thomas) — 2e passe : « le fond blanc de la vignette change selon la position sur la page ET la bande blanche mange les contours du récap ». 1re tentative (isolation:isolate) = ÉCHEC en situ (déployée, bug persistant). Diagnostic corrigé : le vrai mécanisme n'est pas le blend qui déborde SA boîte, mais le `mix-blend-mode` d'un descendant qui force la PROMOTION D'UN GROUPE ISOLÉ sur l'ancêtre (le récap sticky) ; ce groupe, sous compositing, se repeint en rectangle blanc couvrant ses limites → il rogne les coins arrondis de la carte. isolation:isolate sur la petite boîte ne prévient PAS la promotion de l'ancêtre. Correctif définitif : on SUPPRIME le mix-blend-mode. Plus de blend = plus de groupe promu = aucun artefact possible, quelle que soit la couche GPU autour. Les photos ont un fond BLANC (chantier de normalisation à 255) → une boîte blanche rend ce fond invisible sans aucun blend. La bordure fine délimite la vignette sur la carte blanche. object-fit:contain conservé (bouteille entière). */ body.tunnel .cc-rthumb { width:42px; height:54px; border-radius:var(--radius-s); background:#fff; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; overflow:hidden; } body.tunnel .cc-rthumb img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; } /* SEUIL DE DÉROULEMENT (§2.5) : la zone n'est déroulante qu'AU-DELÀ de 6 lignes. 72px = hauteur d'une ligne (vignette 54 + 2×9 de padding, cf. .cc-rthumb agrandie le 23/07). ≤6 articles : tout est visible, aucune barre — un panier de moins d'un carton n'a pas à être tronqué. La classe --long est posée côté serveur (PHP compte les lignes), pas en JS : le récap est ré-injecté par le swap AJAX, un calcul client se reperdrait. */ body.tunnel .cc-rscroll { margin:0 0 14px; padding-bottom:2px; border-bottom:1px solid var(--c-line); } body.tunnel .cc-rscroll--long { max-height:calc(6 * 72px); overflow-y:auto; } /* ----- Lot C (§2.5) — BLOCS CONTEXTUELS sous les totaux : Retrait/Livré à, Paiement, note d'expédition. Séparés par des filets, titre en capitales grises avec le lien « modifier » poussé à droite. ----- */ body.tunnel .cc-recap-block { margin-top:14px; padding-top:13px; border-top:1px solid var(--c-line); } body.tunnel .cc-recap-block-t { display:flex; align-items:center; gap:7px; margin-bottom:6px; font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--cc-text-muted,#8a8275); } body.tunnel .cc-recap-block-t svg { color:var(--clr-or); flex:none; } body.tunnel .cc-recap-block-t a { margin-left:auto; font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--clr-or-text); } body.tunnel .cc-recap-addr { font-size:12.5px; line-height:1.5; color:var(--cc-text-dark); } body.tunnel .cc-recap-addr .cc-dim { color:var(--cc-text); font-weight:500; } /* Rien n'est encore choisi à l'étape Panier (ni adresse, ni mode de paiement) : les blocs contextuels y afficheraient un état inventé. On les masque tant qu'on n'a pas avancé. */ body.tunnel .cc-tunnel.cc-at-step0 .cc-recap-ctx { display:none; } /* #18 (poune 19/06) — le rappel de quantité vivait dans son propre .cc-recap-count sous le Total. Lot C (§2.5) : il remonte AVANT le total et devient une .cc-recap-line ordinaire (l'ordre imposé est Sous-total / Livraison / Quantité / Cagnotte / Total). La classe dédiée n'a plus de porteur — ses règles sont supprimées avec elle. */ /* #4 (suite) — Mode différé : le port n'est pas « offert » mais « en attente ». Libellé sobre en encre/or (pas le vert « offert » qui promettrait la gratuité) + note explicative discrète sous le total. */ body.tunnel .cc-recap-line .cc-ship-pending { color:var(--clr-or-text); font-weight:700; } body.tunnel .cc-recap-note { margin-top:10px; padding:9px 11px; background:var(--cc-bg-light); border-radius:var(--radius-m); display:flex; gap:7px; align-items:flex-start; font-size:11.5px; line-height:1.45; color:var(--cc-text); } body.tunnel .cc-recap-note b { color:var(--cc-text-dark); } body.tunnel .cc-recap-note svg { flex:0 0 auto; margin-top:1px; color:var(--clr-or); } /* ===== Masque l'ancien récap dupliqué dans le tunnel (présentation seule) ===== */ body.tunnel .compte_voir { display:none; } /* ===== Titre de section (panneau d'étape) — adapté de .section-title ===== */ body.tunnel .cc-step-title { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:17px; font-weight:700; color:var(--cc-text-dark); margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--cc-bg-grey); } /* ===== Liste du panier en cartes — adapté de .cart / .or-item ===== */ body.tunnel #liste-panier { list-style:none; padding:0; margin:0; } body.tunnel #liste-panier li { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#fff; border:1px solid var(--cc-border); border-radius:var(--radius-m); padding:14px 16px; margin-bottom:12px; } body.tunnel #liste-panier li .imgcontainer { flex-shrink:0; width:48px; display:flex; align-items:center; justify-content:center; } body.tunnel #liste-panier li .imgcontainer img { max-width:48px; height:auto; } body.tunnel #liste-panier li > a { flex:1; min-width:140px; font-size:14px; line-height:1.35; color:var(--cc-text-dark); text-decoration:none; } @media (hover: hover) { body.tunnel #liste-panier li > a:hover { color:var(--clr-or-text); } } /* pt13d — cf. pt11-survol-tactile */ body.tunnel #liste-panier li .addtocart { flex-shrink:0; } body.tunnel #liste-panier li .prix { flex-shrink:0; font-size:15px; font-weight:700; color:var(--cc-text-dark); text-align:right; min-width:80px; } /* ===== Vignette bouteille du récap : VRAIE photo (table photos) comme l'overlay panier, sur fond clair neutre. Repli emoji teinté par couleur (.cc-recap-emoji.ct-*) si pas de photo. image_couleur est la pastille de couleur, pas une photo → on ne l'utilise pas. Lot C (§2.5) : les lignes du récap sont passées en TABLEAU (.cc-rtab, cf. plus bas). .cc-recap-item / -thumb / -name / -qty / -price n'ont plus de porteur et sont supprimés ; seul le repli emoji survit, réutilisé tel quel dans la nouvelle vignette .cc-rthumb. ===== */ body.tunnel .cc-recap-emoji { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:18px; background:linear-gradient(160deg,var(--clr-ink-dark) 0%,var(--clr-ink) 100%); } body.tunnel .cc-recap-emoji.ct-rouge { background:linear-gradient(160deg,var(--clr-ink-dark) 0%,var(--clr-ink) 100%); } body.tunnel .cc-recap-emoji.ct-blanc { background:linear-gradient(160deg,#e8d88a 0%,#c0a840 100%); } body.tunnel .cc-recap-emoji.ct-rose { background:linear-gradient(160deg,#f3c6d2 0%,#d98aa0 100%); } body.tunnel .cc-recap-emoji.ct-default { background:linear-gradient(160deg,var(--clr-ink-dark) 0%,var(--clr-ink) 100%); } /* ===== Actions d'étape (boutons) — adapté de .btn-next ===== */ body.tunnel .cc-step-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:20px; } /* « Retour » poussé à gauche, action principale (+ éventuel .cc-cart-lockhint) à droite (retour Thomas 24/06). margin-right:auto reste robuste si un 3e enfant s'insère, là où un justify-content:space-between les éparpillerait. Sur mobile la barre fixe occupe toute la largeur (cc-btn-pay flex:1) → l'auto-marge n'a pas d'espace libre = no-op. */ body.tunnel .cc-step-actions .cc-btn-back { margin-right:auto; } /* box-sizing:border-box + line-height:1 (chantier hauteur réelle boutons) : sans eux, padding 10+10 + line-height 30px hérité de body.tunnel s'empilent sur min-height:44 → 64px rendus. Vaut pour .cc-btn-next / .cc-btn-back / .cc-btn-ghost / .cc-btn-pay. */ body.tunnel .cc-btn-next { display:inline-flex; align-items:center; justify-content:center; background:var(--cc-primary); color:#fff; border:0; cursor:pointer; box-sizing:border-box; line-height:1; min-height:var(--btn-min-h); padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-s); font-family:'Montserrat',Arial,sans-serif; font-size:var(--btn-font); font-weight:var(--btn-weight); letter-spacing:var(--btn-letter); box-shadow:var(--btn-shadow); transition:background 0.2s; } body.tunnel .cc-btn-next:hover { background:var(--cc-primary-dark); } /* ===== Bouton Retour (étape) — fond clair, bordure ===== */ body.tunnel .cc-btn-back { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px solid var(--cc-border); color:var(--cc-text); cursor:pointer; box-sizing:border-box; line-height:1; min-height:var(--btn-min-h); padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-s); font-family:'Montserrat',Arial,sans-serif; font-size:var(--btn-font); font-weight:600; letter-spacing:var(--btn-letter); transition:border-color 0.2s, color 0.2s; } body.tunnel .cc-btn-back:hover { border-color:var(--clr-or); color:var(--clr-or-text); } /* ===== « Sauvegarder cette adresse » (retours2 #3) — bloc dépliant sous la carte adresse : libellé + cases « par défaut » (livraison/facturation). Remplace les anciennes cases legacy « nouvelles coordonnées ». ===== */ body.tunnel .cc-addr-save { margin-top:10px; } /* Lot D (spec §2.6, 23/07) : texte ET tracé en ENCRE. Cette bascule est une action secondaire et facultative ; en or plein elle rivalisait avec le CTA de l'étape. L'or ne subsiste que dans l'accent cuit du SVG (mécanique « signature E », inc/icones.inc.php) — l'icône porte la marque, le texte porte la hiérarchie. Chevron gris neutre : c'est un marqueur d'état, pas un élément de marque. */ /* Recette 23/07 (Thomas) : la bascule doit être cliquable sur TOUTE la ligne, pas seulement sur le libellé. En inline-flex le bouton ne faisait que la largeur de son texte → la moitié droite de la ligne était morte. Passage en flex pleine largeur, le chevron rejeté à droite par une auto-marge (même mécanique que les autres dépliants). */ body.tunnel .cc-addr-save-toggle { display:flex; width:100%; align-items:center; gap:8px; text-align:left; background:none; border:0; padding:10px 0; cursor:pointer; font-family:'Montserrat',Arial,sans-serif; font-size:14px; font-weight:700; color:var(--c-ink); } body.tunnel .cc-addr-save-toggle > svg { color:var(--c-ink); flex:0 0 auto; } body.tunnel .cc-addr-save-toggle .cc-addr-save-caret { margin-left:auto; transition:transform .18s; font-size:11px; color:#999; } body.tunnel .cc-addr-save.is-open .cc-addr-save-caret { transform:rotate(180deg); } /* Recette 23/07 (Thomas) : « designer selon le reste ». Le panneau était un encadré CRÈME (--cc-bg-light) qui jurait avec les autres dépliants de l'étape (message / cadeau, .cc-optmsg), dont le corps est BLANC sur filet fin. On aligne : surface blanche, filet clair (--c-line), rayon carte. Le bloc redevient une extension nette du formulaire, pas une boîte rapportée. */ body.tunnel .cc-addr-save-panel { display:none; margin-top:10px; padding:16px; border:1px solid var(--c-line); border-radius:var(--radius-m); background:#fff; } body.tunnel .cc-addr-save.is-open .cc-addr-save-panel { display:block; } body.tunnel .cc-addr-save-check { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--cc-text-dark); margin-top:8px; cursor:pointer; } body.tunnel .cc-addr-save-check input { margin:0; flex:0 0 auto; } body.tunnel .cc-addr-save-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:14px; } body.tunnel .cc-btn-ghost { display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--cc-border); color:var(--cc-text); cursor:pointer; box-sizing:border-box; line-height:1; min-height:var(--btn-min-h); padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-s); font-family:'Montserrat',Arial,sans-serif; font-size:var(--btn-font); font-weight:700; letter-spacing:var(--btn-letter); transition:border-color 0.2s, color 0.2s; } body.tunnel .cc-btn-ghost:hover { border-color:var(--clr-or); color:var(--clr-or-text); } body.tunnel .cc-addr-save-hint { font-size:12.5px; color:#888; } /* Confirmation inline de l'enregistrement (AJAX) : on reste dans le tunnel. */ body.tunnel .cc-addr-save-status { font-size:13px; font-weight:600; width:100%; } body.tunnel .cc-addr-save-status[hidden] { display:none; } body.tunnel .cc-addr-save-status.is-pending { color:#888; font-weight:400; } body.tunnel .cc-addr-save-status.is-ok { color:var(--cc-success); } body.tunnel .cc-addr-save-status.is-error { color:var(--fb-no-tx); } body.tunnel .cc-addr-save-status.is-warn { color:#9a6a00; } /* ===== Adresse de facturation — coche « identique à la livraison » (lot facturation-tunnel, Task 1). Coche standard du site (déjà stylée « doré » dans site.css), posée en ligne avec son sous-texte ; panneau replié par défaut. Cf. _mock/facturation.php (markup + largeurs validés visuellement 15/07). ===== */ body.tunnel .cc-fac-same { display:flex; align-items:flex-start; gap:10px; cursor:pointer; margin:2px 0 4px; } body.tunnel .cc-fac-same input { margin-top:2px; } body.tunnel .cc-fac-same-txt { font-size:14px; color:var(--cc-text-dark); line-height:1.35; } body.tunnel .cc-fac-same-txt small { display:block; font-size:12.5px; color:#9a8f83; margin-top:3px; } body.tunnel .cc-fac-panel { display:none; margin-top:18px; padding-top:4px; animation:facIn .18s ease; } body.tunnel .cc-fac-panel.is-open { display:block; } @keyframes facIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } body.tunnel .cc-fac-copy { margin-bottom:18px; } body.tunnel .cc-fac-copy svg { margin-right:6px; } /* ===== Cartes de formulaire — adapté de .form-card du mockup ===== */ body.tunnel .cc-card { background:#fff; border:1px solid var(--cc-border); border-radius:var(--radius-m); padding:20px; margin-bottom:20px; } body.tunnel .cc-card-title { font-weight:700; color:var(--cc-text-dark); margin-bottom:14px; font-size:1.05rem; } /* ===== Task 5 — en-têtes encre pour les cartes Finaliser (Coordonnées, Adresse) ===== .cc-card est PARTAGÉ hors tunnel (commande.inc.php, checkout_invite.inc.php, mails…). On ne touche donc PAS la règle globale : on aligne uniquement les cartes de l'étape Finaliser (data-step-panel="1") sur le bandeau encre du kit (.cc-sec-head), en conservant le picto cc_icon(). Les accordéons (.cc-acc) gardent leur summary cliquable et sont exclus. Le corps de carte reçoit le padding du kit (.cc-sec-body). */ body.tunnel [data-step-panel="1"] .cc-card:not(.cc-acc) { overflow:hidden; border:1px solid var(--c-line); border-radius:var(--radius-m); } /* En-tête full-bleed encre : on annule le padding latéral/haut de la carte par marges négatives au lieu de toucher chaque enfant (robuste quel que soit le contenu). */ body.tunnel [data-step-panel="1"] .cc-card:not(.cc-acc) > .cc-card-title { display:flex; align-items:center; gap:9px; margin:-20px -20px 18px; padding:12px 16px; background:var(--c-ink); font-size:14px; font-weight:700; letter-spacing:.01em; color:#fff; } body.tunnel [data-step-panel="1"] .cc-card:not(.cc-acc) > .cc-card-title svg, body.tunnel [data-step-panel="1"] .cc-card:not(.cc-acc) > .cc-card-title .cc-i { color:var(--c-accent); flex:0 0 auto; } /* ===== Étape Paiement — champs optionnels repliés en accordéons + CGV encadrée ===== Les blocs « Message service client / Message cadeau / Origine » sont facultatifs : on les replie (
) pour qu'ils ne concurrencent plus visuellement le mode de paiement et l'action « Confirmer et payer ». La CGV, jadis case flottante minuscule, passe en carte encadrée juste au-dessus du CTA. */ /* Lot D (spec §2.6, 23/07) — messages client / cadeau : UNE carte SANS titre contenant deux LIGNES dépliables séparées par un filet, en remplacement de deux cartes dont le TITRE servait de bascule. Un titre de carte qui se clique sans en avoir l'air est une fausse affordance : on donnait le vocabulaire d'un bloc de contenu à un comportement de ligne. Le « + » figé devient un chevron qui PIVOTE — un marqueur d'état doit changer d'état. Chevron gris : c'est de la mécanique, pas de la marque. 🧨 Nommage : NE PAS utiliser .cc-msg / .cc-msgs ici — `.cc-msg` est déjà la brique GLOBALE des messages système (site.css, doctrine « messages Direction B ») et porte un display:flex qui écrase silencieusement la mise en page de ce bloc (constaté en recette : le textarea tombait à 192px). D'où le préfixe .cc-optmsg-*. */ /* Retours 28/07-3 (pt3) — variante B « le liseré qui s'allume », validée sur maquette. 1. Le bandeau-titre encre est remplacé par un SUR-TITRE or + court filet or, POSÉ HORS de la carte (signature du site : les sur-titres « LE RÉCIT DU DOMAINE » des fiches vigneron). font: 700 11px/1 → line-height PROPRE, sinon le 30px épinglé de body.tunnel gonfle la boîte d'un texte de 11px. 2. Carte BLANCHE (--c-surface). Pas de fond crème : explicitement refusé en recette. 3. Liseré or de 3px sur le flanc gauche de chaque ligne, transparent au repos, allumé quand le
est [open]. Seul or de surface du bloc : il n'apparaît qu'au moment où le client écrit — un signal, pas une décoration. */ body.tunnel .cc-optmsg-eyebrow { display:block; margin:0 0 9px; font-family:'Montserrat',Arial,sans-serif; font-size:11px; font-weight:700; line-height:1; letter-spacing:.16em; text-transform:uppercase; color:var(--c-accent-text); } body.tunnel .cc-optmsg-eyebrow::after { content:""; display:block; width:34px; height:2px; margin-top:8px; background:var(--c-accent); border-radius:2px; } /* Le sélecteur d'étape `body.tunnel [data-step-panel="1"] .cc-card:not(.cc-acc)` (0,4,1) impose border:var(--c-line) à toutes les cartes de l'étape : on le bat explicitement pour poser le cadre --c-frame de la maquette. */ body.tunnel .cc-optmsg, body.tunnel [data-step-panel="1"] .cc-card.cc-optmsg { padding:0; overflow:hidden; background:var(--c-surface); border:1px solid var(--c-frame); border-radius:var(--radius-m); } body.tunnel .cc-optmsg-row { position:relative; } body.tunnel .cc-optmsg-row + .cc-optmsg-row { border-top:1px solid var(--c-line); } body.tunnel .cc-optmsg-row::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; transition:background .18s; } body.tunnel .cc-optmsg-row[open]::before { background:var(--c-accent); } /* Recette 23/07 (Thomas) : ces deux lignes rendaient « très/trop gros » et hors de l'esprit de la page. Même cause que .cc-cart-continue : le `line-height:30px` épinglé de body.tunnel s'ajoutait aux 12+12 de padding → rangée de ~54px pour un libellé de 14px. On borne le line-height (1.35), on repasse la taille en px et on resserre le padding. 🧨 Recette 28/07-3 : le line-height:1.35 est IMPÉRATIF et ne doit jamais être perdu en réécrivant cette règle — sans lui, un libellé qui passe sur DEUX lignes hérite des 30px de body.tunnel, soit 30px d'interligne pour un texte de 14px. Et min-height SEUL ne suffit pas : sur deux lignes le texte vient coller les bords, d'où le padding vertical explicite + box-sizing:border-box. NE PAS toucher `body.tunnel{line-height:30px}` : tout le tunnel a été calibré contre cette valeur. */ body.tunnel .cc-optmsg-row > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px; box-sizing:border-box; margin:0; padding:10px 16px 10px 19px; min-height:var(--btn-min-h); font-size:14px; font-weight:600; line-height:1.35; color:var(--cc-text-dark); } /* Le textarea héritait lui aussi d'une taille legacy (.form) hors gabarit : on l'aligne sur les champs du tunnel. */ body.tunnel .cc-optmsg-row .cc-optmsg-b textarea { font-family:'Montserrat',Arial,sans-serif; font-size:14px; line-height:1.5; color:var(--cc-text-dark); border:1px solid var(--cc-border); border-radius:var(--radius-s); background:#fcfcfb; padding:9px 13px; } body.tunnel .cc-optmsg-row > summary::-webkit-details-marker { display:none; } /* Chevron : pseudo-élément Unicode ▾ (et NON cc_icon('chevron')) — c'est de la mécanique, pas de la marque, et c'est ce qui rend la rotation [open] possible en une ligne. align-self:center + line-height:1 : il doit rester centré quand la ligne grandit. */ body.tunnel .cc-optmsg-row > summary::after { content:"\25be"; margin-left:auto; align-self:center; font-size:.8rem; line-height:1; color:#999; transition:transform .18s; } body.tunnel .cc-optmsg-row[open] > summary::after { transform:rotate(180deg); } /* Picto : dominante ENCRE (stroke:currentColor) + accents « cuits » or (#b88a3e, attribut de présentation du tracé), et non plus tout doré — recette 24/07 (Thomas). 🧨 NE JAMAIS poser color/stroke en or ou en vert ici : cela écrase l'accent cuit et détruit le contrat de cc_icon(). */ body.tunnel .cc-optmsg-row > summary svg, body.tunnel .cc-optmsg-row > summary .cc-i { flex:0 0 auto; color:var(--c-ink); } body.tunnel .cc-optmsg-row .cc-optmsg-b { padding:0 16px 14px 19px; } body.tunnel .cc-optmsg-row .cc-optmsg-b textarea, body.tunnel .cc-optmsg-row .cc-optmsg-b select { width:100%; box-sizing:border-box; margin:0; } body.tunnel .cc-opt { font-weight:400; text-transform:none; letter-spacing:0; color:#999; font-size:.85em; } /* ===== Lot E (spec du 23/07) — carte « Vos coordonnées » ========================== .cc-id-line : état 1 (connecté, e-mail connu). Rappel de l'adresse de confirmation, en TÊTE de colonne. Vocabulaire d'une MENTION, pas d'une carte : pas de cadre, pas de bandeau, une rangée sur fond crème. C'est ce que le lot A avait retiré de sous le CTA (trust-theater à cet endroit) et qui reprend son sens ici, là où le client cherche ses coordonnées. 🧨 NE PAS nommer .cc-msg* : famille prise par la brique globale des messages système (site.css), dont le display:flex casse silencieusement toute réutilisation (piège rencontré au lot D). */ body.tunnel .cc-id-line { display:flex; align-items:center; gap:9px; margin:0 0 16px; padding:10px 14px; background:var(--c-bg-soft); border-radius:var(--radius-m); font-size:12.5px; line-height:1.4; color:var(--cc-text); } body.tunnel .cc-id-line svg { color:var(--c-accent); flex:none; } body.tunnel .cc-id-line b { color:var(--cc-text-dark); font-weight:600; word-break:break-all; } body.tunnel .cc-id-line a { margin-left:auto; flex:none; font-size:11.5px; font-weight:600; color:var(--clr-or-text); } /* .cc-id-why : état 2 (connecté SANS e-mail exploitable). Filet — une phrase, pas un encadré : le cas ne concerne aucun client actif (mesuré), il ne mérite pas un bloc qui pèserait sur le parcours de tous les autres. */ body.tunnel .cc-id-why { margin:0 0 14px; font-size:12.5px; line-height:1.45; color:var(--cc-text); } /* Lot D (spec §2.6, 23/07) — CGV : case NUE, directement au-dessus du CTA. L'encadré crème (bordure + fond) lui donnait le poids visuel d'une section : c'est un engagement d'une ligne, qui doit se lire d'un trait juste avant le bouton qu'il conditionne, pas une carte de plus à traverser. La classe .cc-cgv-card est CONSERVÉE sur la rangée : le ciblage d'erreur `.cc-cgv-card.is-error label[for=cgv]` en dépend. */ /* Recette 23/07 (Thomas) : la rangée paraissait « plus large que le reste » — elle était à fleur de colonne alors que le contenu des cartes est rentré de 20px (padding .cc-card) + 1px de bordure. On la rentre d'autant : la case s'aligne verticalement sur le texte des cartes au-dessus, la colonne retrouve une seule marge de lecture. */ /* Retours 28/07-3 (pt3) : la case reste HORS du bloc message/cadeau (« une case à cocher n'est pas une section » — décision du 23/07 maintenue), mais elle reprend un cadre : surface blanche + liseré OR + --radius-s. C'est le SEUL geste obligatoire de l'écran, donc le seul endroit où l'or vaut exigence et non décoration. Le retrait latéral de 21px saute : la rangée est désormais une boîte, elle s'aligne sur le bord des cartes. */ body.tunnel .cc-cgv-card { display:flex; align-items:flex-start; gap:12px; box-sizing:border-box; margin:22px 0 6px; padding:15px 17px; background:var(--c-surface); border:1px solid var(--c-accent); border-radius:var(--radius-s); } body.tunnel .cc-cgv-card input[type=checkbox] { margin:1px 0 0; width:20px; height:20px; flex:0 0 auto; } body.tunnel .cc-cgv-card label { font-size:.95rem; color:var(--cc-text-dark); line-height:1.45; text-align:left; } body.tunnel .cc-cgv-card a { color:var(--clr-or-text); text-decoration:underline; } /* Cases à cocher du tunnel — RIEN À SURCHARGER ICI depuis pt4 (retours 20260722). Le Lot D (spec §2.6) avait basculé les cases du tunnel en encre par une surcharge scopée `body.tunnel .cc-tunnel input[type=checkbox]`, la brique globale restant dorée. pt4 a généralisé la décision : la règle globale (`site.css`, l.1474) est désormais en encre, donc cette surcharge ne faisait plus que répéter les mêmes valeurs (`--c-ink` = `--clr-ink` = #241a12, `--c-ink-hover` = `--clr-ink-dark` = #140d06) → retirée. 🧨 Le piège du Lot D reste valable pour toute future retouche : `accent-color` est SANS EFFET sur ces cases (site.css les dénative en `appearance:none`) — passer par border-color / background-color / outline-color. */ /* Largeur de lecture pour les blocs optionnels du paiement (message service client, message cadeau, CGV) : alignés sur la largeur des champs (~600px) au lieu de s'étirer pleine largeur. CORRECTIF (30/06) du sélecteur orphelin [data-step-panel="2"] : depuis la fusion « Finaliser deux temps », le paiement vit dans le panneau 1 (le panneau 2 n'existe plus) → l'ancien sélecteur ne matchait plus rien et ces cartes s'étiraient. Lot D (§2.6, 23/07) : ce plafond de 600px saute lui aussi, pour la même raison que celui des champs — dans une colonne de 748px il fabriquait une seconde largeur sans raison lisible. La carte messages et la rangée CGV s'alignent sur les autres cartes. .cc-acc a disparu du markup (deux cartes-accordéon → une carte .cc-optmsg). */ /* ===== Re-paiement « Régler votre commande » (commande_paiement.inc.php) — lifting léger : carte structurée (header crème + cadenas, récap en lignes, total mis en valeur) en remplacement des styles inline. ===== */ body.tunnel .cc-pay-card { max-width:560px; margin:24px auto; padding:0; overflow:hidden; } /* Hero crème centré (retour Thomas R6) : reprend les codes des pages paiement accepté/refusé (.cc-thanks-banner) — gradient crème, eyebrow doré, grand titre serif. */ body.tunnel .cc-pay-banner { text-align:center; padding:30px 24px 26px; background:linear-gradient(180deg,#faf6ec,#f4ecd8); border-bottom:1px solid var(--c-frame); } body.tunnel .cc-pay-eyebrow { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#b88a3e; } body.tunnel .cc-pay-merci { font-family:'Montserrat',Georgia,serif; font-size:38px; font-weight:600; line-height:1.05; color:var(--cc-text-dark); margin:6px 0 12px; } body.tunnel .cc-pay-ref { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.4px; color:var(--clr-or-text); background:var(--cc-pink); border-radius:99px; padding:3px 10px; } body.tunnel .cc-pay-items { list-style:none; margin:0; padding:4px 22px; } body.tunnel .cc-pay-item { display:flex; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid #f0ece2; font-size:.95rem; } body.tunnel .cc-pay-item:last-child { border-bottom:none; } body.tunnel .cc-pay-item__q { flex:0 0 auto; font-weight:700; color:var(--clr-or-text); } body.tunnel .cc-pay-item__n { flex:1 1 auto; color:var(--cc-text-dark); } body.tunnel .cc-pay-item__n i { color:#8a8a8a; font-style:italic; } body.tunnel .cc-pay-item__p { flex:0 0 auto; white-space:nowrap; font-weight:600; color:var(--cc-text-dark); } body.tunnel .cc-pay-total { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 22px; padding:15px 0; border-top:2px solid #efe7d6; } body.tunnel .cc-pay-total__lbl { font-size:.95rem; color:var(--cc-text-dark); line-height:1.2; } body.tunnel .cc-pay-total__lbl small { display:block; font-size:.74rem; color:#999; font-weight:400; } body.tunnel .cc-pay-total__val { font-size:1.5rem; font-weight:800; color:var(--clr-or-text); white-space:nowrap; } body.tunnel .cc-pay-cagnotte { margin:0 22px; padding:6px 0 0; font-size:.9rem; color:#555; text-align:right; } body.tunnel .cc-pay-cta { padding:14px 22px 4px; text-align:center; } /* Bouton CB modernisé (remplace l'ancien avec GIF/logos datés dans getPayzenButton). Purement visuel : le formulaire PayZen signé est inchangé. */ /* « Payer » = exception hiérarchie ASSUMÉE (spec #6+#17) : reste le CTA le plus fort du site — padding + généreux (14/32, 16/32 en pleine largeur), font 15/16, ombre plus présente, garde le cadenas (icône porteuse de sens). NE PAS aligner sur le gabarit commun : c'est le moment de la transaction. */ body.tunnel .cc-cb-pay { display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--cc-primary); color:#fff; border:none; cursor:pointer; padding:14px 32px; border-radius:var(--radius-s); font-family:'Montserrat',Arial,sans-serif; font-size:15px; font-weight:var(--btn-weight); letter-spacing:var(--btn-letter); line-height:1; transition:background .2s, box-shadow .2s; box-shadow:0 2px 8px rgba(36,26,18,.18); } body.tunnel .cc-cb-pay:hover { background:var(--clr-ink-dark); box-shadow:0 4px 14px rgba(36,26,18,.26); } body.tunnel .cc-cb-pay svg { width:18px; height:18px; } /* Cartes acceptées (réassurance) sous le bouton CB : logos officiels CB / Visa / Mastercard dans des puces blanches uniformes. Hauteurs réglées par marque car les proportions diffèrent (Visa est large, CB & Mastercard ~carrés). */ body.tunnel .cc-pay-schemes { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:16px; } body.tunnel .cc-pay-chip { height:31px; min-width:46px; background:#fff; border:1px solid #e7e2d8; border-radius:var(--radius-s); box-shadow:0 1px 2px rgba(0,0,0,.05); display:inline-flex; align-items:center; justify-content:center; padding:0 8px; box-sizing:border-box; } body.tunnel .cc-pay-chip img { display:block; width:auto; } body.tunnel .cc-pay-chip.cb img { height:20px; } body.tunnel .cc-pay-chip.mc img { height:21px; } body.tunnel .cc-pay-chip.visa img { height:13px; } body.tunnel .cc-pay-caption { text-align:center; font-size:.74rem; color:#a59a82; margin-top:11px; letter-spacing:.3px; } /* Action principale DANS LE CORPS (remplace la barre collante .cc-paybar, retour Thomas) : un seul bouton pleine largeur, centré, sous le choix de moyen. Le bloc masqué (selon le moyen coché) porte l'attribut [hidden] posé par le JS. */ body.tunnel .cc-pay-actions { margin-top:24px; } body.tunnel .cc-pay-act[hidden] { display:none; } body.tunnel .cc-pay-act { margin:0; } body.tunnel .cc-pay-actions .cc-cb-pay { display:flex; width:100%; padding:16px 32px; font-size:16px; } /* Moyens de règlement alternatifs (chèque / virement) sur la reprise de paiement, par cohérence avec la commande initiale (inc/commande.inc.php). Présentation en petites cartes (label / valeur), IBAN & BIC en chasse fixe pour la lisibilité. */ body.tunnel .cc-pay-alt { padding:8px 22px 20px; margin-top:4px; border-top:1px solid #efe7d6; } body.tunnel .cc-pay-alt__h { margin:16px 0 12px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#a59a82; text-align:center; } body.tunnel .cc-pay-method { background:#faf8f3; border:1px solid #ece4d4; border-radius:var(--radius-m); padding:12px 15px; margin-bottom:10px; text-align:left; } body.tunnel .cc-pay-method__head { font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:.98rem; color:var(--cc-text-dark); margin-bottom:8px; } body.tunnel .cc-pay-line { display:flex; gap:12px; align-items:baseline; padding:3px 0; font-size:.9rem; } body.tunnel .cc-pay-line .lbl { flex:0 0 56px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#b3a98f; padding-top:1px; } body.tunnel .cc-pay-line .val { flex:1 1 auto; color:#5f5a50; line-height:1.45; word-break:break-word; } body.tunnel .cc-pay-line .val.mono { font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace; font-weight:600; font-size:.92em; letter-spacing:.4px; color:var(--cc-text-dark); } body.tunnel .cc-pay-line .val strong { color:var(--clr-or-text); } body.tunnel .cc-pay-alt__note { margin:14px 2px 0; font-size:.82rem; color:#8a8377; text-align:center; } /* Écran « C'est noté » (confirmation chèque/virement, option 1). Le lead reprend la typo du sous-texte des pages merci (.cc-thanks-sub) au lieu de retomber sur le

legacy par défaut (couleur/typo hors charte, signalé par Thomas). */ body.tunnel .cc-offline-done__lead { margin:0 0 18px; font-size:15px; line-height:1.62; color:var(--cc-text); } body.tunnel .cc-offline-done__lead strong { color:var(--cc-text-dark); } /* ===== Contrôles de formulaire v4 dans le tunnel (adapté de .form-input / .form-select du mockup). On cible les champs legacy (.form/.formc/textarea/select) présents dans les cartes d'étape pour leur donner l'aspect v4 SANS réécrire le markup PHP champ par champ (donc sans risque sur les name/id/valeurs ni sur le JS de validation). ===== */ body.tunnel .cc-card input[type=text], body.tunnel .cc-card input[type=tel], body.tunnel .cc-card input[type=email], body.tunnel .cc-card input[type=password], body.tunnel .cc-card input[type=number], body.tunnel .cc-card input.form, body.tunnel .cc-card input.formc, body.tunnel .cc-card textarea, body.tunnel .cc-card select { font-family:'Montserrat',Arial,sans-serif; font-size:14px; color:var(--cc-text); padding:7px 13px; /* #34 (suite poune 18/06) — champs jugés trop hauts : 10→7 px vertical (~43px → ~37px) */ border:1.5px solid var(--cc-border); border-radius:var(--radius-s); background:#fff; outline:none; transition:border-color .2s; max-width:100%; } body.tunnel .cc-card input[type=text]:focus, body.tunnel .cc-card input[type=tel]:focus, body.tunnel .cc-card input[type=email]:focus, body.tunnel .cc-card input.form:focus, body.tunnel .cc-card input.formc:focus, body.tunnel .cc-card textarea:focus, body.tunnel .cc-card select:focus { border-color:var(--clr-or); } /* Textarea : police normale (fin du monospace legacy), pleine largeur, redimension verticale. Lot D (§2.6) : le plafond de 480px saute — c'était une troisième largeur dans la même carte, à côté des 600px des champs et de la largeur pleine. Un gardien / concierge ou un message au service client n'a aucune raison d'être plus étroit que le champ Adresse juste au-dessus. */ body.tunnel .cc-card textarea { width:100%; font-family:'Montserrat',Arial,sans-serif; line-height:1.5; resize:vertical; } /* Select v4 : chevron custom (repris du mockup .form-select) */ body.tunnel .cc-card select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; } /* ===== Formulaire d'adresse v4 (grille .field) — étape Livraison ===== Porté du carnet d'adresses du compte (#compte-content de site.css), scopé body.tunnel. Remplace l'ancienne legacy. ===== */ /* #34 (recette poune 18/06) — longueur des champs : le formulaire ne s'étirait plus sur toute la largeur de la carte (~1000px), plafonné à 600px. Lot D (spec §2.6, 23/07) : ce plafond uniforme SAUTE. La colonne gauche fait désormais 748px : 600px de champs dans une carte de ~700px utiles laissaient ~100px de vide à droite, lus non pas comme une largeur de lecture mais comme une incohérence — deux largeurs sans raison apparente dans la même carte. La règle devient : largeur UNIFORME = largeur utile de la carte, et contrainte PAR CONTENU sur les seuls champs courts (code postal, civilité, code d'accès), méthode « match input length » déjà appliquée plus bas. Un champ court reste court parce que son contenu est court, pas parce qu'un plafond arbitraire l'a rattrapé. */ body.tunnel .cc-card .field { margin-bottom:14px; } /* Retours 26/07 (Thomas, pt10) — « espacement important sur les retours à la ligne » des labels dont le .field-hint passe à la ligne (« Instructions de livraison (facultatif — digicode, gardien…) », « E-mail du destinataire (si vous ne réceptionnez pas vous-même) »). Cause mesurée : le label est en 11px et hérite le `body.tunnel { line-height:30px }` ÉPINGLÉ (site.css:144) → près de 3x la taille du texte entre les deux lignes. Borner le hint seul ne suffirait pas : le strut du bloc parent impose sa hauteur à CHAQUE ligne, c'est donc le porteur qu'il faut borner. Même geste que .cc-cart-continue (l.702) et que la doctrine parapluie (.wine-card:1.45, #cart-drawer:1.6). On ne touche PAS body.tunnel : les hauteurs de boutons du tunnel sont calibrées contre le 30px (cf. site.css:138-143). */ body.tunnel .cc-card .field-lbl { display:block; font-size:11px; line-height:1.35; text-transform:uppercase; letter-spacing:.5px; color:#8a8a8a; font-weight:700; margin-bottom:5px; } body.tunnel .cc-card .field-lbl .req { color:var(--clr-or-text); } body.tunnel .cc-card .field-hint { font-weight:400; text-transform:none; letter-spacing:0; color:#aaa; font-size:.9em; } body.tunnel .cc-card .field-input, /* 🔁 RECETTE 30/07 (Thomas, pt6) — « pourquoi le fond de la cellule encadrée a une couleur différente ? ». Cause mesurée : écart de spécificité d'UN point, involontaire. La liste l.1021-1029 pose le blanc en désignant les champs par SÉLECTEUR D'ATTRIBUT (input[type=text] → 0-3-2, qui bat la présente règle à 0-3-1) mais désigne textarea et select par sélecteur de TYPE nu (0-2-2, qui perd). Résultat : les input étaient blancs, le textarea « gardien/concierge » ET le select « civilité » restaient crème. On repointe simplement la surface du système au lieu du gris cassé en dur — une valeur en dur de moins. */ body.tunnel .cc-card .field-select { width:100%; box-sizing:border-box; font-family:'Montserrat',Arial,sans-serif; font-size:14px; color:var(--cc-text-dark); background:var(--c-surface); border:1px solid var(--cc-border); border-radius:var(--radius-s); padding:7px 13px; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; } /* #34 : 10→7 px, cohérent avec les inputs */ body.tunnel .cc-card .field-input::placeholder { color:#bbb; } /* Recette 23/07 (Thomas) : « la cellule de l'e-mail du destinataire est bleue ». Ce n'est pas notre CSS — c'est le fond d'auto-remplissage de Chrome (#e8f0fe) appliqué aux champs qu'il a pré-remplis. On le neutralise avec la seule technique qui marche (Chrome ignore `background` sur :-webkit-autofill) : une ombre interne opaque de la couleur du champ, + la couleur de texte forcée. Vaut pour TOUS les champs du tunnel, pas seulement l'e-mail. */ body.tunnel .cc-card .field-input:-webkit-autofill, body.tunnel .cc-card .field-input:-webkit-autofill:hover, body.tunnel .cc-card .field-input:-webkit-autofill:focus, body.tunnel .cc-card .field-select:-webkit-autofill { -webkit-box-shadow:0 0 0 40px var(--c-surface) inset; box-shadow:0 0 0 40px var(--c-surface) inset; -webkit-text-fill-color:var(--cc-text-dark); caret-color:var(--cc-text-dark); } body.tunnel .cc-card .field-input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 40px #fff inset, 0 0 0 3px rgba(36,26,18,.10); box-shadow:0 0 0 40px #fff inset, 0 0 0 3px rgba(36,26,18,.10); } body.tunnel .cc-card .field-input:focus, body.tunnel .cc-card .field-select:focus { border-color:var(--clr-or); background:#fff; box-shadow:0 0 0 3px rgba(36,26,18,.10); } body.tunnel .cc-card .field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } body.tunnel .cc-card .field-row .field { min-width:0; } /* #34 (recette poune 18/06, 3e passe) — méthode « match input length » (Baymard) : un champ a la longueur de son contenu attendu. Unité ch (= largeur d'un caractère) + 28px (padding 2×13 + bordure 2×1). Le select civilité ajoute la place du chevron (+52px). Lot D (§2.6) : la méthode est CONSERVÉE pour les champs réellement COURTS (civilité, code postal, code d'accès), et abandonnée pour les autres. Un nom, une ville, un e-mail, une raison sociale n'ont pas de longueur « attendue » : les plafonner à 18 ou 30ch fabriquait un formulaire en escalier, chaque champ s'arrêtant à une largeur différente. Ils prennent maintenant la place disponible (1fr) et la carte se lit d'un seul bord. */ body.tunnel .cc-card .field-row--civnom { grid-template-columns:calc(7ch + 52px) 1fr; } body.tunnel .cc-card .field-row--nomtel { grid-template-columns:1fr 1fr; } body.tunnel .cc-card .field-row--cp { grid-template-columns:calc(7ch + 28px) 1fr; } /* Recette 24/07 (Thomas) : sur mobile, l'astérisque « * » de « Code postal » (et « Civilité ») passait seul à la ligne — la colonne étroite ne tient pas « CODE POSTAL * » sur une ligne au ratio par défaut. `white-space:nowrap` sur ces seuls libellés de colonne étroite garde le « * » collé au texte (léger débord dans la gouttière si besoin, sans casser la grille). Scopé à ces deux rangées — pas de nowrap global (les libellés à hint le déborderaient). */ body.tunnel .cc-card .field-row--cp .field-lbl, body.tunnel .cc-card .field-row--civnom .field-lbl { white-space:nowrap; } /* Seuls rescapés du plafonnement par contenu : les champs dont la saisie est bornée. Le code d'accès (digicode) tient en 18 caractères, pas en 700px. */ body.tunnel .cc-card #code_acces { max-width:calc(18ch + 28px); } /* Recette 24/07 (Thomas) : « agrandir la case Libellé » (menu Sauvegarder cette adresse, desktop + mobile). Le plafond de 22ch la rendait étriquée dans un panneau désormais large. On la laisse en pleine largeur du panneau (comme les autres champs) — même geste pour le libellé de facturation, symétrique. */ /* Select v4 (chevron) dans une .field */ body.tunnel .cc-card .field-select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; } /* Textarea dans une .field : pleine largeur */ body.tunnel .cc-card .field textarea.field-input { line-height:1.5; resize:vertical; } /* État erreur (saisie incomplète au retour de validation). Direction B — cran « doux » (DA Thomas 20/07) : le champ ne prend plus la bordure rouge PLEINE + l'anneau rose (empilement « mur de rouge » jugé agressif). On garde le rouge concentré sur le signal utile — texte + icône de `.field-err` — et le champ n'a qu'une bordure rose discrète (token `--fb-no-bd`), sans anneau. */ body.tunnel .cc-card .field.is-error .field-input, body.tunnel .cc-card .field.is-error .field-select, body.tunnel .cc-card .field.is-error textarea { border-color:var(--fb-no-bd); } body.tunnel .cc-card .field-err { color:var(--fb-no-tx); font-size:12px; margin-top:5px; } /* Validation inline (chantier 2) : message d'erreur sous un champ / contrôle. Doctrine messages Direction B (vague tunnel) : l'ancien override `.cc-field-err` scopé tunnel (sans icône, align center) masquait le `.cc-field-err` global déjà icôné (site.css:2574, cercle-alerte rouge tokenisé). Il est SUPPRIMÉ ici → le tunnel hérite de la brique globale = un seul vocabulaire d'erreur sous-champ partout. Ne pas re-scoper sans raison (piège « double définition divergente »). */ /* Bannière d'erreur en tête d'étape : repose sur .cc-cart-alert (rouge) ; espacement. */ body.tunnel .cc-step-error { margin-top:0; } /* Conteneurs hors grille .field signalés en erreur (moyens de paiement, CGV). */ body.tunnel .cc-pay-tabs.is-error { outline:1.5px solid var(--fb-no-tx); outline-offset:4px; border-radius:var(--radius-s); } body.tunnel .centre.is-error label[for='cgv'], body.tunnel .cc-cgv-card.is-error label[for='cgv'] { color:var(--fb-no-tx); } /* Retours 28/07-3 (pt3) : depuis que la case CGV porte un cadre --c-accent permanent, un refus de validation donnait un cadre DORÉ autour d'un libellé ROUGE. La bordure suit désormais le libellé. Traitement aligné sur l'existant du tunnel (`.field.is-error .field-input` l.1092) : on ne repeint QUE la bordure — le tunnel ne remplit jamais de fond d'erreur, donc pas de --fb-no-bg ici. Spécificité : (0,3,1) contre (0,2,1) pour `body.tunnel .cc-cgv-card` qui pose l'or → la règle d'erreur gagne, quel que soit l'ordre dans la feuille. 🧨 `js/tunnel.js` pose .is-error via `closest('.centre') || closest('.cc-cgv-card')` : dans le tunnel il n'existe AUCUN ancêtre .centre (vérifié dans le DOM servi), la classe atterrit donc bien sur .cc-cgv-card. Si un jour un .centre réapparaît autour de la case, c'est le 1er sélecteur ci-dessous qui prend le relais. */ body.tunnel .centre.is-error .cc-cgv-card, body.tunnel .cc-cgv-card.is-error { border-color:var(--fb-no-bd); } /* Note sous une ligne (ex. France métropolitaine) */ body.tunnel .cc-card .field-note { font-size:12px; color:#8a8a8a; margin:-8px 0 14px; } /* Sous-bloc « Instructions de livraison (facultatif) ». Lot D (spec §2.6, 23/07) : déplié en permanence (le
est retiré du markup) et dégonflé — l'encadré pointillé + fond crème en faisait une boîte dans la boîte. Il ne reste qu'un filet de séparation et un INTERTITRE en capitales grises, du même vocabulaire que les libellés de champs (.field-lbl) : c'est une sous-partie du formulaire, pas une section autonome. Pas de picto : un cadenas sur des instructions de livraison promettrait une confidentialité qu'on ne garantit pas ici. */ body.tunnel .cc-card .cc-subform { margin-top:20px; padding-top:16px; border-top:1px solid var(--c-line); } body.tunnel .cc-card .cc-subform-title { font-family:'Montserrat',Arial,sans-serif; font-size:11px; font-weight:700; /* pt10 (26/07) — même cause que .field-lbl ci-dessus : 11px héritant le 30px épinglé de body.tunnel. Porte « Instructions de livraison (facultatif — digicode, gardien…) ». */ line-height:1.35; text-transform:uppercase; letter-spacing:.5px; color:#8a8a8a; margin:0 0 12px; } /* ===== Repli fluide du bloc adresse domicile au changement de mode de livraison (domicile ⇄ point relais) — recette 24/07 (Thomas), tempo « ample ». La bascule par display:none était brutale (saut de mise en page). On anime la HAUTEUR réelle via grid-template-rows (1fr↔0fr), sans mesure JS. Piloté par setHomeAddressVisible() (scripts/relais.js) qui pose .is-collapsed. La transition n'est armée qu'APRÈS le 1er paint (body.cc-liv-anim) → pas d'animation au chargement si on arrive déjà en relais. overflow:hidden UNIQUEMENT pendant l'animation / à l'état replié : à l'état ouvert stable il redevient visible, sinon il rognerait le menu d'autocomplétion d'adresse (BAN) ancré sous « Adresse ». ===== */ /* Bloc adresse domicile : bascule INSTANTANÉE (aucune animation de hauteur). Option 2, recette 24/07 : ce bloc est AU-DESSUS des puces de mode ; animer sa hauteur déclenchait le scroll anchoring de Chrome, qui gardait les puces « en place » mais en les faisant trembler (±1px/frame, dans les deux sens). On accepte le saut sec du bloc adresse ; seul le picker relais (EN DESSOUS des puces, plus bas) reste animé en hauteur. Piloté par setHomeAddressVisible() (scripts/relais.js) qui pose .is-collapsed. */ body.tunnel .cc-home-collapse { display:grid; grid-template-rows:1fr; } body.tunnel .cc-home-collapse > .cc-home-collapse-inner { min-height:0; } body.tunnel .cc-home-collapse.is-collapsed { grid-template-rows:0fr; } body.tunnel .cc-home-collapse.is-collapsed > .cc-home-collapse-inner { overflow:hidden; } /* Récap isolé sur sa propre couche de compositing : pendant que la colonne de gauche se replie/déplie (repli fluide) et que le sticky se recale, le récap n'est plus re-peint image par image → fin du scintillement perçu à droite. Recette 24/07. */ body.tunnel .cc-recap { transform:translateZ(0); } /* Panneau point relais : repli/dépli fluide de la HAUTEUR (grid-template-rows, comme .cc-home-collapse) — synchronisé avec le bloc adresse au changement de mode. Remplace l'ancien fondu-opacité, qui laissait la hauteur intacte puis l'arrachait d'un bloc (−~500px en une frame = scintillement mesuré le 24/07). Piloté par expandPick/ collapsePick (relais.js), scopé cc-liv-anim (pas d'effet au chargement). ⚠️ display:grid réactive l'attribut [hidden] (règle dédiée ci-dessous) — sinon le picker resterait visible en mode domicile. */ body.tunnel #cc-relais-pick { display:grid; grid-template-rows:1fr; } body.tunnel #cc-relais-pick[hidden] { display:none; } body.tunnel #cc-relais-pick > .cc-relais-pick-inner { min-height:0; } body.tunnel.cc-liv-anim #cc-relais-pick { transition:grid-template-rows 500ms cubic-bezier(.33,0,.2,1); } body.tunnel #cc-relais-pick.is-collapsed { grid-template-rows:0fr; } body.tunnel #cc-relais-pick.is-collapsed > .cc-relais-pick-inner, body.tunnel #cc-relais-pick.is-opening > .cc-relais-pick-inner { overflow:hidden; } @media (prefers-reduced-motion:reduce) { body.tunnel.cc-liv-anim #cc-relais-pick { transition:none; } } /* (retours2 #3 — cases legacy « nouvelles coordonnées » retirées, remplacées par le bloc .cc-addr-save dépliant) */ /* ===== Audit tunnel 16/06 — D3 (Société repliée) + D4 (instructions repliées) ===== */ /* D3 — Société derrière un repli discret « Je commande pour une entreprise » (clientèle majoritairement particulière).
natif : pas de JS. */ body.tunnel .cc-card details.cc-biz { margin:2px 0 14px; } body.tunnel .cc-card details.cc-biz > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:var(--clr-or-text); font-weight:600; font-size:13px; font-family:'Montserrat',Arial,sans-serif; } body.tunnel .cc-card details.cc-biz > summary::-webkit-details-marker { display:none; } /* Marqueur d'état piloté par [open] : « + » replié → « − » déplié (retour Thomas 24/06). Un + SVG figé ne pouvait pas signifier l'état ; ce pseudo-élément bascule tout seul. */ body.tunnel .cc-card details.cc-biz > summary::before { content:"+"; flex-shrink:0; width:16px; text-align:center; font-size:17px; font-weight:700; line-height:1; color:var(--clr-or); } body.tunnel .cc-card details.cc-biz[open] > summary::before { content:"\2212"; } body.tunnel .cc-card details.cc-biz[open] > summary { margin-bottom:2px; } /* D4 — le sous-bloc .cc-subform était pliable (
+ summary + chevron). Lot D (§2.6) : il est déplié en permanence, le
a disparu du markup → ces règles n'ont plus de porteur et sont supprimées. */ /* ===== Audit tunnel 16/06 — D2 : enquête « connu le site » post-commande (confirmation) ===== */ body.tunnel .cc-origine { max-width:640px; margin:22px auto 0; padding:16px 18px; border:1px solid var(--c-line); border-radius:var(--radius-m); background:var(--c-page); text-align:left; } /* max-width élargi (520→640) : la question + « (facultatif) » tiennent désormais sur une seule ligne au lieu de wrapper ; margin resserrée pour rapprocher du sélecteur. Retours 28/07-3 (pt6) : #ece2d6 → --c-line (#E7E1D6) et #fcfbf9 → --c-page (#FAF8F3), les deux tokens les plus proches (écart imperceptible). #999 du « (facultatif) » n'a PAS d'équivalent dans le :root : le plus proche, --c-text (#525252), est un changement d'apparence (et de contraste), pas une substitution — laissé tel quel, signalé pour arbitrage. */ body.tunnel .cc-origine-q { font-size:14px; color:var(--cc-text-dark); margin:0 0 10px; display:flex; align-items:center; gap:8px; } /* 🧨 stroke:var(--clr-or) RETIRÉ : il repeignait tout le picto « aide » en or et écrasait son propre accent cuit. Contrat cc_icon() : le trait suit la couleur du TEXTE. */ body.tunnel .cc-origine-q .cc-i { flex:0 0 auto; } body.tunnel .cc-origine-q .cc-opt { color:#999; font-weight:400; } body.tunnel .cc-origine-row { display:flex; gap:10px; } body.tunnel .cc-origine-select { flex:1 1 auto; min-width:0; font-family:'Montserrat',Arial,sans-serif; font-size:14px; color:var(--cc-text-dark); background:#fff; border:1px solid var(--cc-border); border-radius:var(--radius-s); padding:10px 12px; } body.tunnel .cc-origine-send { flex:0 0 auto; background:var(--cc-primary); color:#fff; border:0; border-radius:var(--radius-s); padding:10px 20px; font-family:'Montserrat',Arial,sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:background .2s; } body.tunnel .cc-origine-send:hover { background:var(--cc-primary-dark); } body.tunnel .cc-origine-send:disabled { opacity:.55; cursor:default; } /* Retours 28/07-3 (pt6) — état « répondu ». On ne crée rien : on réplique le patron de .cc-confirm-cagnotte, la pastille « Vous venez de gagner +X € de cagnotte » qui vit DÉJÀ sur cette page (inline-flex, largeur ajustée au contenu, fond crème, filet greige, texte en or foncé). Les deux accusés de la page se répondent au lieu de se contredire. 🧨 Le vert --cc-success est SUPPRIMÉ : il n'existe nulle part ailleurs dans la charte (orphelin), et `stroke:var(--cc-success)` repeignait en vert la COCHE DORÉE cuite dans le tracé de cc_icon('valide'). Le trait redevient encre, la coche redevient or. */ body.tunnel .cc-origine-done { display:inline-flex; align-items:center; gap:9px; width:fit-content; max-width:100%; margin:0 auto; padding:11px 18px; background:var(--c-bg-soft); border:1px solid var(--c-frame); border-radius:var(--radius-m); color:var(--c-accent-text); font-weight:600; font-size:14px; line-height:1.35; } body.tunnel .cc-origine-done .cc-i { flex:0 0 auto; color:var(--c-ink); } /* Le sondage répondu ne doit plus laisser son cadre de 640px autour d'une pastille de 200px (c'est l'effet « barre de notification » qu'on corrige) : le conteneur s'efface dès que le remerciement est visible, et centre la pastille (inline-flex → text-align). Aucun `display:` ici → aucune interférence avec [hidden] (cf. garde ci-dessous). */ body.tunnel .cc-origine:has(> .cc-origine-done:not([hidden])) { max-width:none; padding:0; border:0; background:none; text-align:center; } /* #8 (retours 22/06-2) : les règles display:* ci-dessus battent l'attribut [hidden] (spécificité (0,1,1) > (0,1,0)). On le rétablit explicitement, sinon « Merci, c'est noté » reste affiché en permanence et le formulaire ne se masque jamais après envoi. 🧨 Ces sélecteurs valent (0,3,1) contre (0,2,1) pour les règles d'affichage ci-dessus : la garde gagne quel que soit l'ordre. TOUTE nouvelle règle posant un `display:` sur un .cc-origine-* doit rester STRICTEMENT sous cette spécificité (pas de préfixe .cc-thanks-body, qui l'égaliserait et ferait repasser le dernier écrit devant). */ body.tunnel .cc-origine-done[hidden], body.tunnel .cc-origine-row[hidden], body.tunnel .cc-origine-q[hidden] { display:none; } @media (max-width:640px) { body.tunnel .cc-origine-row { flex-direction:column; } body.tunnel .cc-origine-send { width:100%; } } @media (max-width:640px) { /* Filet de sécurité : toute .field-row non nommée s'empile. */ body.tunnel .cc-card .field-row { grid-template-columns:1fr; } /* #39 (20/06) — on garde les paires côte à côte sur mobile au lieu de tout empiler. Petit champ étroit + partenaire flexible (1fr). Les ~96/92px sont calés pour que le label (« Civilité », « Code postal ») ne se coupe pas. */ body.tunnel .cc-card .field-row--civnom { grid-template-columns:96px 1fr; } body.tunnel .cc-card .field-row--cp { grid-template-columns:92px 1fr; } body.tunnel .cc-card .field-row--nomtel { grid-template-columns:1fr 1fr; } } /* #39 — palier de secours : sous 360px, la seule paire « moyen+moyen » (Prénom/Téléphone) se réempile pour ne pas comprimer la saisie. Les deux paires asymétriques (civilité+nom, CP+ville) tiennent jusqu'à 320px. */ @media (max-width:360px) { body.tunnel .cc-card .field-row--nomtel { grid-template-columns:1fr; } } /* Titres de section legacy (h2) à l'intérieur d'une étape : aspect carte-titre v4 plutôt que gros titre brut (les blocs « Message… » sont par ailleurs passés en .cc-card côté PHP). */ body.tunnel .cc-step > h2 { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:15px; font-weight:700; color:var(--cc-text-dark); margin:18px 0 10px; } /* #3 (retour Thomas 29/06) : le margin-top:18px ci-dessus (qui l'emporte en spécificité sur .cc-step-title) creusait le vide sous le stepper en s'ajoutant au padding-top du conteneur. On l'annule pour le titre d'EN-TÊTE de chaque étape (1er h2 du panneau). #5 (recette 29/06-ter) : l'ancien sélecteur exigeait .cc-step ENFANT DIRECT de .cc-checkout-left ; or le panneau Finaliser (#etape-finaliser) est imbriqué dans le
→ la règle ne mordait pas et le titre « Finaliser » gardait ses 18px. On cible désormais le .cc-step-title 1er enfant de N'IMPORTE quel .cc-step (spécificité 0,2,1 > .cc-step>h2 0,1,1), quelle que soit l'imbrication. Les h2 intermédiaires (« Message… », sans .cc-step-title) gardent leur respiration. */ body.tunnel .cc-step > h2.cc-step-title:first-child { margin-top:0; } /* Pastille d'étape cliquable (navigation arrière) — activée par tunnel.js */ body.tunnel .cc-step-item.cc-clickable { cursor:pointer; } @media (hover: hover) { body.tunnel .cc-step-item.cc-clickable:hover { opacity:.7; } } /* pt13d — cf. pt11-survol-tactile */ /* ===== Modes de livraison — variante compacte « radio inline » (retours2 #2) ===== Deux boutons côte à côte + un seul bloc de détail (mode sélectionné). */ body.tunnel .cc-ship-seg { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; } /* Boutons compacts, dimensionnés au contenu (recette poune 18/06) : plus de flex:1 qui les étirait sur 1/3 de la largeur, padding réduit. */ body.tunnel .cc-ship-btn { display:flex; align-items:center; gap:9px; border:1px solid var(--cc-border); border-radius:var(--radius-s); padding:12px 16px; cursor:pointer; background:#fff; transition:border-color 0.15s, box-shadow 0.15s, background 0.15s; } body.tunnel .cc-ship-btn:hover { border-color:#bbb; } /* radio natif masqué visuellement, accessibilité conservée ; pastille dessinée */ body.tunnel .cc-ship-btn input { position:absolute; opacity:0; width:0; height:0; } body.tunnel .cc-ship-dot { width:16px; height:16px; flex:0 0 auto; border-radius:50%; border:2px solid #c2bbab; position:relative; transition:border-color 0.15s; } body.tunnel .cc-ship-name { font-weight:700; color:var(--cc-text-dark); font-size:14px; } body.tunnel .cc-ship-btn:has(input:checked) { border-color:var(--clr-or); background:color-mix(in srgb, var(--clr-or) 5%, #fff); box-shadow:0 0 0 1px var(--clr-or) inset; } body.tunnel .cc-ship-btn:has(input:checked) .cc-ship-dot { border-color:var(--clr-or); } body.tunnel .cc-ship-btn:has(input:checked) .cc-ship-dot::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--cc-primary); } body.tunnel .cc-ship-detail { font-size:12.5px; color:var(--cc-text); line-height:1.55; background:var(--cc-bg-light); border-radius:var(--radius-m); padding:11px 13px; } body.tunnel .cc-ship-detail a { color:var(--clr-or-text); } /* ===== Step-gate (dégradation gracieuse) ===== Sans JS : tous les panneaux visibles (formulaire complet utilisable). En mode JS (.cc-stepped), seul le panneau actif de chaque étape s'affiche. */ body.tunnel .cc-tunnel.cc-stepped [data-step-panel] { display: none; } body.tunnel .cc-tunnel.cc-stepped [data-step-panel].is-active { display: block; } /* Collision de noms : site.css définit `.cc-step{display:flex;margin:20px 0 4px}` (ancien indicateur d'étapes horizontal). Le tunnel réutilise class="cc-step" pour ses panneaux de formulaire → sans ce reset, le Finaliser part en colonnes éparpillées quand tunnel.js ne s'exécute pas (cc-stepped absent). Reset scopé body.tunnel → le formulaire s'empile proprement même sans JS. 🧨 Recette 24/07 (Thomas) : le reset ne neutralisait QUE `display`, pas la `margin:20px 0 4px` legacy — d'où le panneau Finaliser (et le Panier) décalé de 20px vers le BAS par rapport au récap, dont la colonne démarre au ras du haut de grille. Mesuré en repro : carte gauche à top=146 vs récap à 126, delta +20 = exactement ce margin-top. On remet la marge à 0 : les deux colonnes démarrent au même niveau (la respiration sous le stepper est déjà portée par le padding-top de .cc-checkout). `.cc-step` (exact) ne cible que ces panneaux — l'indicateur d'étapes utilise .cc-step-item/-num/-sep, non concernés. */ body.tunnel .cc-step { display:block; margin:0; } /* ===== Onglets de paiement — adapté de .payment-tabs/.pay-tab du mockup ===== */ body.tunnel .cc-pay-tabs { display:flex; gap:0; margin-bottom:18px; border:1.5px solid var(--cc-border); border-radius:var(--radius-s); overflow:hidden; } body.tunnel .cc-pay-tab { flex:1; padding:12px; display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; font-size:13px; font-weight:700; background:var(--cc-bg-grey); color:var(--cc-text); border-right:1px solid var(--cc-border); cursor:pointer; transition:background 0.2s, color 0.2s; } body.tunnel .cc-pay-tab:last-child { border-right:none; } /* Pictos CB/Visa/Mastercard dans l'onglet « Carte bancaire » (retour Thomas #9 : remplace l'ancien logo_paisec_pt.png « cheap »). Chips blancs compacts = lisibles aussi bien sur l'onglet gris que sur l'onglet sélectionné (bordeaux). */ body.tunnel .cc-pay-tab .cc-pay-schemes { margin:0; gap:5px; } body.tunnel .cc-pay-tab .cc-pay-chip { height:24px; min-width:36px; border-radius:var(--radius-s); } body.tunnel .cc-pay-tab .cc-pay-chip.cb img { height:15px; } body.tunnel .cc-pay-tab .cc-pay-chip.mc img { height:16px; } body.tunnel .cc-pay-tab .cc-pay-chip.visa img { height:10px; } /* Le radio natif reste accessible mais discret : l'onglet entier fait office de cible. */ body.tunnel .cc-pay-tab input[type=radio] { margin:0; } body.tunnel .cc-pay-tab:hover { background:#e4e4e4; } body.tunnel .cc-pay-tab:has(input:checked), body.tunnel .cc-pay-tab.selected { background:var(--cc-primary); color:#fff; } /* Recette 24/07 (Thomas) : « pictos carte bancaire ET virement mal placés » sur mobile. Cause : la règle générique ≤560px fait tomber `.cc-opt-price` sur une 2e ligne indentée (padding-left:35px) — pensée pour les PRIX/tags de livraison (texte long), pas pour de petits pictos. Pour les options de PAIEMENT, on garde la grille 3 colonnes et on colle les pictos à droite (col. auto), centrés verticalement, comme en desktop. Les chips CB restent en ligne (nowrap), l'enveloppe chèque à droite. Le libellé (col. 1fr) se replie si besoin. */ @media (max-width:560px){ body.tunnel .cc-optlist .cc-opt.cc-pay-tab { grid-template-columns:22px 1fr auto; } body.tunnel .cc-optlist .cc-opt.cc-pay-tab .cc-opt-price { grid-column:auto; justify-self:end; align-self:center; margin-top:0; padding-left:0; white-space:nowrap; } body.tunnel .cc-optlist .cc-opt.cc-pay-tab .cc-opt-price.cc-pay-schemes { flex-wrap:nowrap; justify-content:flex-end; } } /* ===== Bouton de paiement final — adapté de .btn-pay/.btn-next du mockup ===== */ body.tunnel .cc-btn-pay { display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--cc-primary); color:#fff; border:0; cursor:pointer; box-sizing:border-box; line-height:1; /* gabarit L : 48px réels (token --btn-lg-min-h) au lieu de ~72px */ min-height:var(--btn-lg-min-h); padding:var(--btn-lg-pad); border-radius:var(--radius-s); font-family:'Montserrat',Arial,sans-serif; font-size:var(--btn-lg-font); font-weight:var(--btn-weight); letter-spacing:var(--btn-letter); box-shadow:var(--btn-shadow); transition:background 0.2s, box-shadow 0.18s; } body.tunnel .cc-btn-pay:hover { background:var(--cc-primary-dark); } /* C2 (spec checkout 2 colonnes, 23/07) : le cadenas du bouton « Confirmer et payer » est retiré du markup (trust-theater) et .cc-btn-pay ne porte plus aucune icône nulle part (les autres usages — « Suivre ma commande », « Régler maintenant » — sont du texte seul). La règle de gabarit d'icône est donc supprimée avec lui. */ /* ===== Écran de confirmation (étape 4) — adapté de .confirmation-wrap & co ===== */ body.tunnel .cc-confirm { text-align:center; padding:48px 24px 64px; background:#fff; } body.tunnel .cc-confirm-title { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:26px; font-weight:700; color:var(--cc-text-dark); margin:0 0 8px; } body.tunnel .cc-confirm-sub { font-size:15px; color:var(--cc-text); margin:0 auto 28px; max-width:480px; } body.tunnel .cc-confirm-num { display:inline-block; background:var(--cc-bg-light); border:1px solid var(--c-border-struct); border-radius:var(--radius-m); padding:10px 24px; font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:15px; color:var(--cc-text-dark); margin-bottom:36px; } body.tunnel .cc-confirm-num strong { color:var(--clr-or-text); font-size:18px; } /* Étapes de suivi (puces icône + libellé) — adapté de .conf-steps/.conf-step ===== */ body.tunnel .cc-confirm-steps { display:flex; justify-content:center; gap:36px; margin-bottom:36px; flex-wrap:wrap; } body.tunnel .cc-confirm-step { display:flex; flex-direction:column; align-items:center; gap:8px; max-width:160px; } body.tunnel .cc-confirm-step .ico { width:52px; height:52px; border-radius:50%; background:var(--cc-bg-light); border:1px solid var(--c-border-struct); display:flex; align-items:center; justify-content:center; font-size:22px; } body.tunnel .cc-confirm-step span { font-size:12.5px; font-weight:600; color:var(--cc-text); text-align:center; line-height:1.4; } body.tunnel .cc-confirm-help { font-size:13px; color:var(--cc-text); margin:0 auto 28px; max-width:480px; } /* Boutons d'action de fin de tunnel — adapté de .conf-cta-row ===== */ body.tunnel .cc-confirm-cta { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; } /* #8 (retours 10/07) — les CTA de fin de commande reprenaient la taille LARGE du bouton « Confirmer et payer » (--btn-lg-*), démesurée pour des liens de suivi. On les ramène à l'échelle normale (--btn-*), alignés sur .cc-btn-back-link. Portée globale assumée : toutes les confirmations (connectés + invités). */ body.tunnel .cc-confirm-cta .cc-btn-pay { min-height: var(--btn-min-h); padding: var(--btn-pad-y) var(--btn-pad-x); font-size: var(--btn-font); } /* Bouton secondaire (lien) — fond clair, bordure */ body.tunnel .cc-btn-back-link { /* #5 (retours 11/07) : inline-flex centré (au lieu d'inline-block) — sur la confirmation, align-items:stretch du duo étirait ce bouton à la hauteur du CTA « Suivre ma commande » (plus haut) et le texte restait calé en haut → « non centré ». */ display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--cc-text-dark); border:1px solid var(--cc-border); cursor:pointer; padding:var(--btn-pad-y) var(--btn-pad-x); border-radius:var(--radius-s); font-family:'Montserrat',Arial,sans-serif; font-size:var(--btn-font); font-weight:600; letter-spacing:var(--btn-letter); text-decoration:none; transition:border-color 0.2s, color 0.2s; } body.tunnel .cc-btn-back-link:hover { border-color:var(--clr-or); color:var(--clr-or-text); } /* ===== Pages « merci / paiement » — habillage marque (kit héros tunnel) ============== Utilisé par paiement-accepte-payzen.inc.php, paiement-accepte.inc.php, commande.inc.php (succès) et paiement-refuse.inc.php (interrompu/refusé, Task 7). Le bandeau adopte le style .cc-hero : fond var(--c-surface), badge encre + coche or, eyebrow petit-caps. Variante .cc-thanks--paused (ambre) pour le paiement non abouti (Task 7). Le titre réutilise Montserrat, cohérent avec le reste du tunnel. */ body.tunnel .cc-thanks { background:#fff; } body.tunnel .cc-thanks-banner { background:var(--c-surface); border-bottom:1px solid var(--c-border-struct); text-align:center; padding:28px 20px 22px; display:flex; flex-direction:column; align-items:center; gap:0; } /* Badge encre + coche or — réutilise .cc-hero-badge injecté dans le markup */ body.tunnel .cc-thanks-banner .cc-hero-badge { width:58px; height:58px; border-radius:50%; background:var(--c-ink); display:grid; place-items:center; margin:0 auto 14px; color:var(--c-accent); } body.tunnel .cc-thanks-eyebrow { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-text); margin-bottom:7px; } body.tunnel .cc-thanks-merci { font-family:'Montserrat',Georgia,serif; font-size:30px; font-weight:700; line-height:1.2; color:var(--c-ink); margin:0; } body.tunnel .cc-thanks--paused .cc-thanks-merci { color:var(--cc-text-dark); } /* Variante ambre (échec paiement) — badge + eyebrow adoptent les tokens warn */ body.tunnel .cc-thanks--paused .cc-hero-badge--warn { background:var(--fb-wa-bg); border:1.5px solid var(--fb-wa-bd); color:var(--fb-wa-tx); } body.tunnel .cc-thanks--paused .cc-thanks-eyebrow { color:var(--fb-wa-tx); } /* Étiquette de section avant le récap commande non payée */ body.tunnel .cc-thanks-recap-label { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fb-wa-tx); margin:28px 0 8px; position:relative; z-index:1; } body.tunnel .cc-thanks-body { position:relative; overflow:hidden; text-align:center; padding:42px 32px 56px; } body.tunnel .cc-thanks-wm { position:absolute; right:-26px; top:-30px; z-index:0; color:#b88a3e; opacity:.07; line-height:0; pointer-events:none; } body.tunnel .cc-thanks-sub { position:relative; z-index:1; font-size:15px; color:var(--cc-text); line-height:1.62; max-width:480px; margin:0 auto 22px; } body.tunnel .cc-thanks-sub strong { color:var(--cc-text-dark); } body.tunnel .cc-thanks-num { position:relative; z-index:1; display:inline-block; background:#fff; border:1px solid var(--c-frame); border-radius:var(--radius-m); padding:11px 26px; font-size:15px; color:var(--cc-text-dark); margin-bottom:26px; } body.tunnel .cc-thanks-num strong { color:var(--clr-or-text); font-size:18px; } /* Numéro de commande cliquable → ouvre le volet détail dans « Mes commandes ». */ body.tunnel a.cc-thanks-num-link { text-decoration:none; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } body.tunnel a.cc-thanks-num-link:hover, body.tunnel a.cc-thanks-num-link:focus-visible { border-color:var(--clr-or); box-shadow:0 2px 10px rgba(36,26,18,.12); background:#fffdf9; } body.tunnel .cc-thanks-body .cc-confirm-cagnotte { position:relative; z-index:1; } /* #14 (retours Thomas 10/07) — les 3 blocs (N° de commande / expédition / cagnotte) étaient des éléments inline-* et coulaient sur une même ligne dans le corps centré (rangée horizontale). On les empile verticalement : chacun devient un bloc calibré à son contenu et re-centré par ses marges auto (les marges verticales des règles de base sont conservées). Vaut pour la confirmation classique ET Payzen. */ body.tunnel .cc-thanks-body .cc-thanks-num { display:block; width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; } body.tunnel .cc-thanks-body .cc-thanks-ship, body.tunnel .cc-thanks-body .cc-confirm-cagnotte { display:flex; width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; } body.tunnel .cc-thanks-steps { position:relative; z-index:1; display:flex; justify-content:center; gap:30px; flex-wrap:wrap; max-width:640px; margin:4px auto 28px; padding-top:26px; border-top:1px solid #efe6d2; } body.tunnel .cc-thanks-step { display:flex; flex-direction:column; align-items:center; gap:9px; max-width:130px; } body.tunnel .cc-thanks-step .ic { width:48px; height:48px; border-radius:50%; background:#fff; border:1.5px solid var(--c-frame); display:flex; align-items:center; justify-content:center; color:var(--c-ink); } body.tunnel .cc-thanks-step span { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:12px; font-weight:600; color:var(--cc-text); line-height:1.4; text-align:center; } body.tunnel .cc-thanks-help { position:relative; z-index:1; font-size:13.5px; color:var(--cc-text); line-height:1.55; max-width:470px; margin:0 auto 24px; } body.tunnel .cc-thanks-sign { position:relative; z-index:1; font-family:'Montserrat',Georgia,serif; font-style:italic; font-size:20px; color:#b88a3e; margin:0 0 26px; } body.tunnel .cc-thanks-cta { position:relative; z-index:1; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; } /* Sur une commande CONFIRMÉE (actée), « Suivre ma commande » n'est plus une action de paiement : le sortir du gabarit large (--btn-lg-*, réservé au bouton « payer ») et l'aligner sur « Retourner à la boutique » évite deux gros pavés en pied de page. La page « à régler » (.cc-thanks--paused) est exclue : son « Régler maintenant » EST une action de paiement et garde sa proéminence. box-sizing:border-box + line-height:1 : sans ça, le padding (20px) et le line-height hérité de body.tunnel (30px) s'empilent sur min-height → le bouton rend à 64px au lieu des 44px voulus par le token. On force la vraie cible tactile de 44px, uniquement ici (le reste du tunnel garde sa hauteur de 64px, cf. chantier dédié « hauteur réelle des boutons »). */ body.tunnel .cc-thanks:not(.cc-thanks--paused) .cc-thanks-cta .cc-btn-pay, body.tunnel .cc-thanks:not(.cc-thanks--paused) .cc-thanks-cta .cc-btn-back-link { box-sizing:border-box; min-height:var(--btn-min-h); padding:var(--btn-pad-y) var(--btn-pad-x); font-size:var(--btn-font); line-height:1; } @media (max-width:600px){ body.tunnel .cc-thanks-merci { font-size:31px; } body.tunnel .cc-pay-merci { font-size:29px; } body.tunnel .cc-thanks-body { padding:34px 20px 46px; } body.tunnel .cc-thanks-steps { gap:20px 26px; } body.tunnel .cc-thanks-cta { flex-direction:column; } /* Retour 12/06 #4 — sans reset border-box global, width:100% + padding 28px débordait à droite (page paiement interrompu sur mobile). On borde la boîte. */ body.tunnel .cc-thanks-cta .cc-btn-pay, body.tunnel .cc-thanks-cta .cc-btn-back-link { width:100%; box-sizing:border-box; } } /* ===== Confirmation paiement — blocs enrichis (chantier confirmation, maquettes validées Thomas 2026-06-11) : récap commande, livraison estimée, cross-sell, support, moyens de paiement. Scopés body.tunnel + z-index:1 pour passer au-dessus du filigrane « verre ». Réutilisent les tokens crème/or de la coquille cc-thanks. */ body.tunnel .cc-thanks-recap { position:relative; z-index:1; text-align:left; max-width:460px; margin:0 auto 22px; background:#fffdf9; border:1px solid var(--c-frame); border-radius:var(--radius-m); padding:16px 18px 6px; } body.tunnel .cc-thanks-recap .ccr-h { font-family:'Montserrat','Montserrat',Arial,sans-serif; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--cc-text-dark); display:flex; align-items:center; gap:8px; margin-bottom:10px; } body.tunnel .cc-thanks-recap .ccr-h svg { color:var(--clr-or); } body.tunnel .ccr-line { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--c-frame); } body.tunnel .ccr-line:last-of-type { border-bottom:none; } /* Ligne récap cliquable : hérite du style (pas de bleu/soulignement), pleine largeur au survol (marge négative = padding du conteneur .cc-thanks-recap : 18px). */ body.tunnel a.ccr-line { color:inherit; text-decoration:none; margin:0 -18px; padding:9px 18px; border-radius:var(--radius-s); transition:background-color .12s ease; } @media (hover: hover) { body.tunnel a.ccr-line:hover { background:#fbf6ec; } } /* pt11 (28/07) — cf. pt11-survol-tactile, site.css */ @media (hover: hover) { body.tunnel a.ccr-line:hover .ccr-nm b { color:var(--clr-or-text); } } /* pt13d — cf. pt11-survol-tactile */ body.tunnel .ccr-thumb { flex:0 0 auto; width:42px; height:54px; border-radius:var(--radius-s); overflow:hidden; background:#f7f2e8; display:flex; align-items:center; justify-content:center; } body.tunnel .ccr-thumb img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; mix-blend-mode:multiply; } body.tunnel .ccr-thumb .ccr-noimg { color:var(--clr-or); opacity:.5; display:flex; } body.tunnel .ccr-nm { flex:1; min-width:0; font-size:13px; line-height:1.35; } body.tunnel .ccr-nm b { display:block; color:var(--cc-text-dark); font-weight:600; } body.tunnel .ccr-nm span { color:#9a8f7c; font-size:12px; } /* Pastille cagnotte par ligne : règle plus spécifique que « .ccr-nm span » pour garder la couleur bordeaux, et display:flex pour la poser sous la quantité. */ body.tunnel .ccr-nm .cc-cagnotte-gain { display:flex; color:var(--clr-or-text); font-size:11px; margin-top:2px; } body.tunnel .ccr-pr { font-weight:700; font-size:13.5px; color:var(--cc-text-dark); white-space:nowrap; } /* pt15 — lignes de détail du récap totaux (sous-total / livraison / cagnotte). .ccr-tot (le total, ci-dessous) garde son filet haut comme séparateur. */ body.tunnel .ccr-lines { display:flex; flex-direction:column; gap:7px; padding:2px 0 4px; } /* border-bottom:none → neutralise le filet pointillé hérité de l'ancien récap à vignettes (règle .ccr-line morte plus haut, plus émise nulle part) qui fuyait sur les lignes totaux pt15. Séparateurs unifiés : un seul filet plein avant le total (cf. .ccr-tot), au même style/largeur que le trait sous la ligne produit. */ body.tunnel .ccr-line { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; color:var(--cc-text); border-bottom:none; } body.tunnel .ccr-line .val { font-weight:600; color:var(--cc-text-dark); white-space:nowrap; } body.tunnel .ccr-line--free .val { color:var(--clr-or-text); font-weight:700; } /* « Offerts » */ body.tunnel .ccr-line--cag .val { color:var(--clr-or-text); } /* « − X € » */ /* Filet du total unifié : même trait que sous la ligne produit (1px plein --c-line, pleine largeur de la carte). Marges négatives = padding de .cc-sec-body (18px) pour que le filet coure bord à bord au lieu d'être « coupé sur les côtés » ; on re-padde d'autant pour garder le contenu aligné sur le reste du corps. */ body.tunnel .ccr-tot { display:flex; justify-content:space-between; align-items:center; padding:12px 18px 8px; margin:2px -18px 0; border-top:1px solid var(--c-line); } body.tunnel .ccr-tot .lbl { font-size:12.5px; color:var(--cc-text); } body.tunnel .ccr-tot .amt { font-family:'Montserrat',Georgia,serif; font-size:22px; font-weight:700; color:var(--clr-or-text); white-space:nowrap; } body.tunnel .ccr-addr { display:flex; gap:9px; align-items:flex-start; text-align:left; margin:12px 0 2px; padding:12px 15px; background:#fff; border:1px solid var(--c-line); border-left:3px solid var(--clr-or); border-radius:var(--radius-s); font-size:12.5px; color:var(--cc-text); line-height:1.5; } body.tunnel .ccr-addr svg { flex:0 0 auto; margin-top:1px; color:var(--clr-ink); } body.tunnel .ccr-addr b { display:block; color:var(--cc-text-dark); } /* #23c — adresse en lignes distinctes (nom / rue / complément / CP-ville) au lieu d'une phrase à virgules. Chaque fragment posé par cc_recap_commande_html est un bloc. */ body.tunnel .ccr-addr .ccr-addr-lines span { display:block; } /* 🧨 pt7-2 (30/07) — CET ENCART N'EST PLUS UN CHIP, À AUCUNE LARGEUR. Le pt7c avait borné le correctif à la media 600px, en s'appuyant sur une mesure : au-dessus de 560px le texte GLS (« Expédition le lundi 3 août, livraison à partir du lendemain ») tient sur UNE ligne, et le pill est alors la bonne forme. Ce raisonnement est mort le jour où le contenu a cessé d'être court : l'encart porte maintenant TROIS textes (cf. cc_livraison_estimee_html), dont deux longs — « fortes chaleurs » et, depuis le seuil des 36 bouteilles, l'annonce palette. Les deux passent sur deux lignes JUSQU'EN DESKTOP. Or un border-radius s'écrête à la demi-hauteur de la BOÎTE : 25px sur une ligne (le pill voulu), 40px sur deux — l'encart devient un stade dont les arcs mangent 80px de largeur utile, et align-items:center isole l'icône seule au milieu de l'arc gauche. ⛔ Ne pas re-borner ce bloc à une media query : la longueur du texte ne dépend pas de la largeur du viewport, elle dépend du canal d'expédition et de la météo. Une forme conditionnée au viewport serait fausse la moitié du temps. On adopte donc le rayon de carte de ses deux voisins immédiats (.cc-thanks-num et .cc-thanks-support), et le patron de .ccr-addr (icône en haut à gauche, lignes empilées à gauche) — correct sur une ligne comme sur quatre. Précédent identique l.69 de cette feuille : « pilule 999px → rayon système (n'était pas un chip) ». line-height:1.45 — borne l'interligne hérité de body.tunnel (30px pour du 13,5px, ratio 2,2). Doctrine maison : on borne le PORTEUR, jamais la racine. */ body.tunnel .cc-thanks-ship { position:relative; z-index:1; display:inline-flex; align-items:flex-start; gap:8px; margin:0 auto 22px; padding:9px 16px; background:#fff; border:1px solid var(--c-frame); border-radius:var(--radius-m); font-size:13.5px; line-height:1.45; text-align:left; color:var(--cc-text-dark); } /* l'icône se cale sur la 1re ligne : 2px = demi-écart entre sa hauteur (18px) et celle de la ligne de texte bornée à 1,45 (≈19,6px). */ body.tunnel .cc-thanks-ship svg { color:var(--clr-or); flex:0 0 auto; margin-top:2px; } body.tunnel .cc-thanks-ship strong { color:var(--clr-or-text); } body.tunnel .cc-thanks-xsell { position:relative; z-index:1; text-align:left; max-width:560px; margin:6px auto 26px; padding-top:22px; border-top:1px solid #efe6d2; } body.tunnel .cc-thanks-xsell .ccx-h { font-family:'Montserrat',Georgia,serif; font-size:23px; color:var(--cc-text-dark); text-align:center; margin-bottom:14px; } body.tunnel .cc-thanks-xsell .cc-wine-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0; } body.tunnel .cc-thanks-support { position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 auto 22px; padding:9px 15px; background:#faf6ec; border:1px solid var(--c-frame); border-radius:var(--radius-m); font-size:13px; color:var(--cc-text); } body.tunnel .cc-thanks-support svg { color:var(--clr-or); flex:0 0 auto; } body.tunnel .cc-thanks-support a { color:var(--clr-or-text); text-decoration:none; font-weight:600; } body.tunnel .cc-thanks-support a:hover { text-decoration:underline; } body.tunnel .cc-thanks-means { position:relative; z-index:1; display:inline-flex; align-items:center; gap:9px; margin:0 auto 16px; padding:10px 16px; background:#fff; border:1px solid var(--c-frame); border-radius:var(--radius-m); font-size:13px; color:var(--cc-text); } body.tunnel .cc-thanks-means svg { color:var(--clr-or); flex:0 0 auto; } body.tunnel .cc-thanks-means strong { color:var(--cc-text-dark); } @media (max-width:600px){ body.tunnel .cc-thanks-xsell .cc-wine-grid { gap:12px; } body.tunnel .cc-thanks-recap { max-width:none; } /* 🧨 pt7c (retours 30/07) — les deux encarts d'information de la page Confirmation « affichage cassé » en mobile : « Expédition le lundi 3 août… » (.cc-thanks-ship) et « Une question ? 04 75 07 94 60 · jlcc@… » (.cc-thanks-support). ⛔ LE DIAGNOSTIC « le cadre reste calé sur une hauteur d'une seule ligne pendant que le contenu déborde » est RÉFUTÉ par la mesure. Banc iPhone 13, 390px réels, pointer:coarse — débordement du contenu hors de la boîte : 0px en haut ET en bas, sur les deux encarts (contenu 60px dans une boîte de 80 pour le ship, 84 dans 104 pour le support : les paddings sont respectés au pixel). Le cadre SUIT son contenu. Ce qui est cassé, c'est une géométrie calibrée pour UNE ligne. Trois causes, toutes mesurées, et le rendu du banc est superposable à la capture du client : (a) INTERLIGNE — line-height:30px hérité de body.tunnel (site.css, garde du fix racine) pour un texte de 13/13,5px = ratio 2,2. Mesuré : le du ship fait 60px pour deux lignes là où 1,45 en demanderait 39 — 21px de pur interligne, et une boîte de 80px au lieu de 59. Le support paie 84px de contenu pour une icône de 16 et deux lignes de 13. Ces deux encarts n'ont jamais été bornés : le pt10 n'avait couvert que .field-lbl / .cc-subform-title, le pt9 que les .od-* scopés .cc-cart-table. Doctrine maison : on borne le PORTEUR (comme .wine-card:1.45), JAMAIS la racine — tout le tunnel est calibré contre ce 30px. (b) RAYON — .cc-thanks-ship porte border-radius:999px. Un rayon s'écrête à la demi-hauteur de la BOÎTE : 25px sur une ligne (le pill voulu), 40px sur deux. L'encart devient alors un stade dont les deux arcs mangent 80px de largeur utile ; combiné à align-items:center, l'icône se retrouve SEULE au milieu de l'arc gauche, dans du vide. Une phrase qui passe à la ligne n'est pas un chip : elle prend le rayon de carte de ses deux voisins immédiats (.cc-thanks-num et .cc-thanks-support sont déjà en --radius-m). Précédent identique dans cette feuille, l.69 : « pilule 999px → rayon système (n'était pas un chip) ». 🔑 Borné à cette media : au-dessus de 560px la phrase tient sur une ligne (mesuré : 50px de boîte dès 560) et le pill est alors la bonne forme — le desktop validé n'est pas touché. (c) RETOUR À LA LIGNE — .cc-thanks-support est en flex-wrap:wrap + justify-content:center, et son réclame toute la largeur disponible (318px pour 318 dispo). L'icône de 16px passe donc SEULE sur une première rangée : mesuré svg à left:187 (centrée), 24px AU-DESSUS du texte. Trois rangées visuelles pour un encart d'une ligne. nowrap la recolle au texte. Les deux encarts passent en align-items:flex-start + text-align:left : avec une icône posée à gauche, un texte centré sur deux lignes laisse la 2e ligne flotter au milieu, détachée de son icône. C'est exactement le patron de .ccr-addr (icône en haut à gauche, lignes empilées à gauche) — pas un 4e paradigme. ⚠️ .cc-confirm-cagnotte (le 3e bloc de la famille, cf. l.1628) ne prend QUE le bornage d'interligne — la même cause, le même gain (82 → 63px mesurés), et la page reste homogène. Pas d'alignement : ce

est un `display:inline-flex` posé sur du contenu inline MIXTE (icône + texte + + texte, aucun enveloppant, cf. cc_cagnotte_confirm_html), donc chaque suite de texte devient un item de flex et le `gap:8px` (l.2081) s'insère ENTRE LES MOTS. Défaut PRÉEXISTANT, hors du point 7 et absent des captures du client (sa commande ne gagnait pas de cagnotte) : un flex-start l'aggraverait en désalignant les fragments. À traiter dans un lot dédié, avec le markup. */ /* ⚠️ pt7-2 (30/07) — la part .cc-thanks-ship de ce bloc a été PROMUE HORS MEDIA (voir le bloc de doctrine sur .cc-thanks-ship, l.1775) : son texte peut être long à n'importe quelle largeur depuis le seuil des 36 bouteilles, une forme conditionnée au viewport y serait fausse. Ne reste ici que ce qui dépend RÉELLEMENT de la largeur : .cc-thanks-support, dont le texte est fixe et qui ne casse qu'en dessous de 480px (icône orpheline). */ body.tunnel .cc-thanks-support { line-height:1.45; align-items:flex-start; text-align:left; flex-wrap:nowrap; } body.tunnel .cc-confirm-cagnotte { line-height:1.45; } /* l'icône se cale sur la 1re ligne : 2px = demi-écart entre sa hauteur (16px) et celle de la ligne de texte bornée à 1,45 (≈18,9px). */ body.tunnel .cc-thanks-support svg { margin-top:2px; } } /* ===== Page de confirmation post-validation (commande.inc.php) ================== Réutilise .cc-confirm (héros) + .cc-card, et ajoute le « reçu » (liste articles, totaux) et le bloc d'état de paiement. Tout scopé sous body.tunnel. ============ */ body.tunnel .cc-confirm-body { max-width:760px; margin:0 auto; padding:0 24px 56px; } /* Liste des articles commandés (reçu) — .cc-order-row remplace le

  • à style inline */ body.tunnel .cc-order-list { list-style:none; margin:0; padding:0; } body.tunnel .cc-order-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; padding:10px 4px; border-bottom:1px solid #f0f0f0; font-size:14px; line-height:1.45; color:var(--cc-text); } body.tunnel .cc-order-row:last-child { border-bottom:none; } body.tunnel .cc-order-row b { margin-left:auto; color:var(--cc-text-dark); white-space:nowrap; } body.tunnel .cc-order-row i { color:#888; font-style:italic; } /* Récap des totaux (réutilise la structure legacy .recap_panier entete/valeur) */ body.tunnel .cc-order-recap-card .recap_panier { list-style:none; margin:0; padding:0; } body.tunnel .cc-order-recap-card .recap_panier li { display:flex; justify-content:space-between; align-items:center; padding:8px 4px; border-bottom:1px solid #f0f0f0; font-size:14px; } body.tunnel .cc-order-recap-card .recap_panier li:last-child { border-bottom:none; } body.tunnel .cc-order-recap-card .entete { color:var(--cc-text); } body.tunnel .cc-order-recap-card .valeur { font-weight:600; color:var(--cc-text-dark); } body.tunnel .cc-order-recap-card .entete.total, body.tunnel .cc-order-recap-card .valeur.total { font-size:16px; font-weight:700; } body.tunnel .cc-order-recap-card .valeur.total { color:var(--clr-or-text); } body.tunnel .cc-order-recap-card .offert { color:var(--cc-success); font-weight:700; } /* Bloc état de paiement (CB / chèque-virement / cagnotte) */ body.tunnel .cc-pay-state { text-align:center; } body.tunnel .cc-pay-pending, body.tunnel .cc-pay-ok { font-weight:700; font-size:15px; margin:0 0 14px; } body.tunnel .cc-pay-pending { color:var(--clr-or-text); } body.tunnel .cc-pay-ok { color:var(--cc-success); } body.tunnel .cc-pay-state .cc-confirm-cta { margin-top:20px; } /* pt4 (retours Thomas 28/07) — la partie basse de l'écran de règlement chèque/virement « faisait legacy » : .cc-pay-amount était posée dans le markup mais n'avait AUCUNE règle ici, tout son style vivait en inline dans commande.inc.php (font-size en em + l'or #8a6224 écrit en dur, alors que son voisin immédiat .cc-pay-pending utilisait déjà var(--clr-or-text) — le bloc n'avait été modernisé qu'à moitié). La couleur ne change pas : #8a6224 EST --clr-or-text, l'or d'accent AA sur fond clair. ⚠ font-size en `em` et NON en `rem` : mesuré au banc, l'inline `1.15em` héritait d'un parent à 20px et rendait 23px ; converti en rem il serait tombé à 18,4px, soit 20% de moins sur le point focal de la page. Le déplacement d'un style ne doit rien changer au rendu — on reproduit donc l'unité d'origine. */ body.tunnel .cc-pay-state .cc-pay-amount { font-size:1.15em; margin:8px 0 2px; } body.tunnel .cc-pay-state .cc-pay-amount strong { color:var(--clr-or-text); } /* Ligne « dont X € de frais de port » : reste une info de PRIX, pas une mention de pied de bloc — .cc-pay-caption (.74rem) l'aurait réduite de 18px à 11,8px. On garde sa taille et on remplace seulement le #777 en dur par var(--c-text) : légèrement plus foncé, donc meilleur contraste, la hiérarchie étant portée par la taille. */ body.tunnel .cc-pay-state .cc-pay-fees { font-size:.9em; margin:0 0 4px; color:var(--c-text); } /* ================================================================ ===== MOBILE (≤ 640px) — une colonne, récap repliable, barre fixe Adapté des classes .tm-* du mockup (stepper compact, récap pliable, barre d'action collée en bas). Tout scopé sous body.tunnel. ================================================================ */ @media (max-width: 640px) { /* ----- Layout : une seule colonne ----- */ body.tunnel .cc-checkout { grid-template-columns: 1fr; gap: 18px; /* #3 (retour Thomas 29/06) : padding-top 20→12, gap sous stepper résorbé (mobile). */ padding: 12px 14px 24px; } /* ----- Récap repliable : masqué tant que .cc-recap--open absent (desktop : toujours visible — ce repli n'existe que dans ce media query) ----- */ body.tunnel .cc-checkout-right { position: static; } /* #7 : pas de sticky en mobile */ body.tunnel .cc-recap { position: static; } body.tunnel .cc-recap-head { cursor: pointer; } body.tunnel .cc-recap-head::after { content: '▾'; font-size: 11px; color: rgba(255,255,255,0.6); transition: transform 0.2s; } body.tunnel .cc-recap.cc-recap--open .cc-recap-head::after { transform: rotate(180deg); } body.tunnel .cc-recap .cc-recap-body { display: none; } body.tunnel .cc-recap.cc-recap--open .cc-recap-body { display: block; } /* ----- Barre d'action fixe en bas ----- */ body.tunnel .cc-step-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin-top: 0; background: #fff; border-top: 1px solid var(--cc-border); box-shadow: 0 -6px 18px rgba(0,0,0,.05); display: flex; gap: 12px; /* safe-area : sur iPhone (home indicator) les boutons étaient rognés en bas. */ padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px)); } /* Boutons de la barre fixe : occupent la largeur, le principal pousse à droite */ body.tunnel .cc-step-actions .cc-btn-next, body.tunnel .cc-step-actions .cc-btn-pay { flex: 1; padding: 14px 18px; } body.tunnel .cc-step-actions .cc-btn-back { flex-shrink: 0; } /* Place pour la barre fixe (sinon le dernier champ du formulaire passe dessous). ~92px = hauteur réelle de la barre (bouton 14px + texte + bordure + 11px) + marge, plus la safe-area iPhone. */ body.tunnel .cc-checkout-left { padding-bottom: 24px; } /* (30/06) plus de barre fixe → réserve réduite */ /* ----- Bandeau réassurance compact : sur 390px les 3 items débordaient et passaient sur 2 lignes (~100px de bande crème gâchée avant le stepper, audit #5). On resserre police/gap/icônes pour tenir sur UNE ligne. ----- */ body.tunnel .cc-trustbar { padding: 6px 0; } body.tunnel .cc-trustbar .cc-container { gap: 6px 12px; padding-left: 12px; padding-right: 12px; } body.tunnel .cc-trustbar span { font-size: 11px; gap: 4px; } body.tunnel .cc-trustbar span svg { width: 13px; height: 13px; } /* ----- Stepper compact : 4 étapes sur écran étroit ----- */ body.tunnel .cc-steps { padding: 12px 0; } body.tunnel .cc-steps-list { flex-wrap: nowrap; } body.tunnel .cc-step-item { gap: 5px; font-size: 11px; } body.tunnel .cc-step-num { width: 22px; height: 22px; font-size: 11px; } body.tunnel .cc-step-sep { margin: 0 5px; font-size: 14px; } /* ----- Divers : marges plus serrées des panneaux ----- */ body.tunnel .cc-step-title { font-size: 16px; margin-bottom: 14px; } body.tunnel .cc-card { padding: 16px 15px; margin-bottom: 14px; } /* ----- Modes de paiement empilés (#6/#7) ----- En 2 colonnes sur 390px « Chèque ou virement bancaire » cassait sur 4 lignes et le picto était rogné au bord droit. On empile en pleine largeur. Chaque .cc-pay-tab est déjà un