/* ===================================================================== /comment-ca-marche/ — « UNE MINUTE CHRONO » Feuille propre à cette page, chargée APRÈS styles.css. Elle n'ajoute que le vocabulaire .cb-* (comment · bandes) et une variable de plan sur ; elle ne réécrit aucune règle du site. Toutes les valeurs viennent des tokens de styles.css — aucune couleur en dur hors du plan photo #F1F5FB, cuit dans les packshots. ===================================================================== */ body{ /* Plan du haut de page : la couleur EXACTE du fond studio cuit dans les packshots (produits/*-3q.webp). Le packshot du hero affleure donc le plan, sans cadre ni ombre. */ --cb-plan:#F1F5FB; } /* ---- 1 · Le conteneur .kktop n'est plus un écran entier -------------- */ .cb-top.kktop{display:block;min-height:0;height:auto;background:var(--cb-plan)} /* ===================================================================== 2 · HERO — la promesse temporelle et la plaque, rien d'autre ===================================================================== */ .cb-hero{background:var(--cb-plan);padding-bottom:clamp(26px,3.4vw,48px)} .cb-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:2px 0 clamp(14px,1.8vw,22px);font-size:13px;color:var(--text-muted)} /* Cible tactile de 44 px sans épaissir la ligne : la marge négative rend au fil d'Ariane sa hauteur visuelle de 22 px. */ .cb-crumb a{color:var(--text-muted);border-bottom:1px solid transparent; display:inline-flex;align-items:center;min-height:44px;margin-block:-11px} .cb-crumb a:hover{color:var(--brand);border-bottom-color:currentColor} .cb-crumb__sep{width:10px;height:10px;flex:none;fill:var(--ku-blue-200)} .cb-crumb__here{color:var(--text);font-weight:600} .cb-hero__grid{ display:grid;align-items:center; gap:clamp(18px,2.6vw,36px) clamp(26px,3.6vw,56px); grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); } .cb-hero__h1{ font-family:var(--font-display);font-weight:700;letter-spacing:-.025em; font-size:clamp(34px,5.2vw,66px);line-height:1.02;color:var(--text);margin:0; text-wrap:balance; } .cb-hero__lead{font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.55;color:var(--text-soft); margin:clamp(14px,1.6vw,20px) 0 0;max-width:32em} /* ---- Le chrono du hero : la minute, à plat. Repère STATIQUE : la seule animation de la page est le fil des bandes. ---- */ .cb-tape{margin:clamp(20px,2.4vw,30px) 0 0;max-width:430px} .cb-tape__rail{position:relative;height:22px} .cb-tape__rail::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px; background:var(--ku-blue-100);border-radius:2px} .cb-tape__dot{position:absolute;top:5px;width:12px;height:12px;margin-left:-6px;border-radius:50%; background:var(--brand);box-shadow:0 0 0 4px var(--cb-plan)} .cb-tape__ends{display:flex;justify-content:space-between;margin-top:2px; font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--text-muted); font-variant-numeric:tabular-nums} .cb-tape__cap{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted);max-width:34em} .cb-hero__micro{margin:clamp(14px,1.6vw,20px) 0 0;font-size:13.5px;line-height:1.5;color:var(--text-muted)} .cb-hero__micro b{color:var(--text-soft);font-weight:700} /* Packshot : fond cuit identique au plan, donc aucun cadre. */ .cb-hero__shot{margin:0;display:flex;justify-content:center;align-items:center} .cb-hero__shot img{width:auto;height:clamp(280px,40vw,470px);max-width:100%;object-fit:contain} /* ===================================================================== 3 · LES CINQ GESTES — bandes pleine largeur, plan blanc / plan sunken ===================================================================== */ .cb-flow{ --cb-gut:clamp(58px,7.4vw,128px); /* colonne du numéro et du chrono */ --cb-py:clamp(42px,5vw,76px); /* respiration verticale d'une bande */ --cb-nfs:clamp(38px,4.9vw,68px); /* corps du grand numéro = sa hauteur de boîte */ --cb-gapn:10px; /* numéro → chrono */ --cb-dial:clamp(36px,3.7vw,50px); /* diamètre du chrono */ /* Abscisse du fil : le rail de la page + la moitié de la colonne du numéro. Même formule que .wrap, donc le fil tombe exactement au centre des chronos, quelle que soit la largeur. */ --cb-x:calc( max( calc(2.5% + var(--rail-pad) - var(--rail-inset)), calc((100% - var(--wrap)) / 2 + var(--rail-pad)) ) + var(--cb-gut) / 2 ); /* Hauteur du haut de bande jusqu'au centre du chrono : sert à couper le fil proprement au premier et au dernier geste. */ --cb-head:calc(var(--cb-py) + var(--cb-nfs) + var(--cb-gapn) + var(--cb-dial) / 2); } /* Cible d'ancre : #geste-1…5 sont repris par le HowTo. La pilule de nav se fixe au scroll — sans cette marge, elle recouvrirait le titre visé. */ .cb-band{scroll-margin-top:90px} .cb-band{position:relative;padding-block:var(--cb-py);overflow-x:clip} .cb-band--a{--cb-plane:var(--surface);--cb-plane-alt:var(--surface-sunken)} .cb-band--b{--cb-plane:var(--surface-sunken);--cb-plane-alt:var(--surface)} .cb-band{background:var(--cb-plane)} /* Le fil du parcours. ::before = la piste, ::after = la part parcourue. Deux traits de 2 px sur le même axe : jamais un dégradé de raccord. */ .cb-band::before, .cb-band::after{ content:"";position:absolute;top:0;bottom:0; left:calc(var(--cb-x) - 1px);width:2px;border-radius:2px; } .cb-band::before{background:var(--ku-blue-100)} .cb-band::after{background:var(--brand);transform:scaleY(var(--cb-f,0));transform-origin:top center} /* Premier geste : le fil naît au centre du chrono. Dernier : il s'y arrête. */ .cb-band--first::before,.cb-band--first::after{top:var(--cb-head)} .cb-band--last::before,.cb-band--last::after{bottom:auto;height:var(--cb-head)} .cb-band__grid{ display:grid;align-items:start; grid-template-columns:var(--cb-gut) minmax(0,1fr) minmax(0,1.02fr); column-gap:clamp(16px,2.4vw,40px);row-gap:clamp(22px,3vw,34px); } /* ---- La colonne repère : grand numéro, chrono, marqueur de temps ---- */ .cb-band__mark{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1} .cb-band__n{ font-family:var(--font-display);font-weight:700;letter-spacing:-.04em; font-size:var(--cb-nfs);line-height:1;height:var(--cb-nfs); color:var(--ku-blue-300); /* Opaque : le fil passe DERRIÈRE le numéro, la coupe est dessinée. */ background:var(--cb-plane);padding-inline:8px; } .cb-dial{display:block;width:var(--cb-dial);height:var(--cb-dial);margin-top:var(--cb-gapn)} .cb-dial__disc{fill:var(--cb-plane)} .cb-dial__track{fill:none;stroke:var(--ku-blue-100);stroke-width:3.2} .cb-dial__arc{fill:none;stroke:var(--brand);stroke-width:3.2;stroke-linecap:round; transform:rotate(-90deg);transform-origin:24px 24px} .cb-dial__pin{fill:var(--brand)} .cb-band__t{ margin-top:9px;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap; color:var(--text-muted);font-variant-numeric:tabular-nums; background:var(--cb-plane);padding-inline:4px; } /* ---- La colonne texte ---- */ .cb-band__h{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em; font-size:var(--fs-h2);line-height:1.14;color:var(--text);margin:0;text-wrap:balance} .cb-band__lead{margin:clamp(12px,1.4vw,18px) 0 0;font-size:clamp(16px,1.15vw,17.5px); line-height:1.58;color:var(--text-soft);max-width:32em} .cb-band__note{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--text-muted);max-width:32em} .cb-band__note b{color:var(--text-soft);font-weight:700} .cb-band__note .ku-hex{width:13px;height:13px;margin-right:8px;vertical-align:-1px;fill:var(--brand)} /* Le moment de bravoure : une seule ligne, à la fin du dernier geste. */ .cb-bravo{ margin:clamp(20px,2.4vw,28px) 0 0;display:flex;align-items:flex-start;gap:12px; font-family:var(--font-display);font-weight:700;letter-spacing:-.02em; font-size:clamp(24px,2.9vw,38px);line-height:1.1;color:var(--brand); } .cb-bravo .ku-hex{width:clamp(20px,2.2vw,28px);height:clamp(20px,2.2vw,28px);flex:none; margin-top:.14em} /* ---- La colonne visuelle ---- */ .cb-band__vis{margin:0} .cb-shot{display:block;width:100%;height:auto;border-radius:var(--r-xl); border:1px solid var(--ku-blue-100);box-shadow:var(--el-16)} .cb-illus{ display:block;width:100%;height:auto;border-radius:var(--r-xl); background:var(--cb-plane-alt); } .cb-cap{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted)} .cb-cap b{color:var(--text-soft);font-weight:700} /* Encres des illustrations (monochrome bleu, jamais une 2e teinte) */ .cb-i-face{fill:var(--surface)} .cb-i-line{fill:none;stroke:var(--ku-blue-200);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cb-i-line-b{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cb-i-soft{fill:var(--ku-blue-100)} .cb-i-mid{fill:var(--ku-blue-300)} .cb-i-brand{fill:var(--brand)} .cb-i-on{fill:var(--surface)} /* ===================================================================== 4 · REPRISE + CLÔTURE ===================================================================== */ .cb-close{background:var(--surface-sunken);padding:clamp(38px,5vw,64px) 0 var(--seam-air)} .cb-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 30px; margin:0 0 clamp(30px,3.6vw,46px);padding:0 0 clamp(28px,3.4vw,40px); border-bottom:1px solid var(--border)} .cb-facts li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--text-soft)} .cb-facts b{color:var(--text);font-weight:700} .cb-facts .ku-hex{width:15px;height:15px;flex:none;margin-top:4px;fill:var(--brand)} .cb-close__band{ position:relative;overflow:hidden;border-radius:var(--r-2xl); padding:clamp(30px,4vw,54px); background:var(--surface-dark);color:#fff; --eyebrow-ink:var(--ku-blue-200);--focus-ring:var(--focus-ring-on-dark); } /* Filigrane de marque : l'hexagone du logo, jamais un dégradé de fond. */ .cb-close__mark{position:absolute;right:-58px;bottom:-74px;width:280px;height:280px; fill:#fff;opacity:.04;pointer-events:none} .cb-close__grid{position:relative;display:grid;align-items:center; grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,52px)} .cb-close__in{max-width:38em} /* Le chrono de la page, à son terme : le même objet que les cinq bandes, anneau plein. « 1 min » est la promesse, pas un relevé. */ .cb-close__dial{position:relative;width:clamp(148px,15vw,198px);flex:none} .cb-close__dial svg{display:block;width:100%;height:auto} .cb-close__dial-track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3.4} .cb-close__dial-arc{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round; transform:rotate(-90deg);transform-origin:24px 24px} .cb-close__dial-txt{position:absolute;inset:0;display:grid;place-content:center; text-align:center;font-family:var(--font-display);font-weight:700;color:#fff; font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;line-height:1} .cb-close__dial-txt small{display:block;margin-top:6px;font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--ku-blue-200)} .cb-close__title{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em; font-size:var(--fs-h2);line-height:1.16;color:#fff;margin:0;text-wrap:balance} .cb-close__sub{margin:14px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.55; color:var(--text-on-dark);max-width:34em} .cb-close__cta{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(22px,2.6vw,30px) 0 0} .cb-close__cta .btn{min-height:48px;padding-block:14px} .cb-close__price{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-soft-on-dark)} /* ===================================================================== 5 · RESPONSIVE ===================================================================== */ @media (max-width:1080px){ .cb-band__grid{grid-template-columns:var(--cb-gut) minmax(0,1fr)} .cb-band__vis{grid-column:2} .cb-band__lead,.cb-band__note{max-width:38em} } @media (max-width:900px){ .cb-hero__grid{grid-template-columns:1fr;text-align:left} .cb-hero__shot{order:-1} /* Sous 900 px le shot passe pleine largeur : c'est la LARGEUR qui doit le borner. Borné en hauteur, un fichier portrait 2/3 ne remplissait que 44 % de son cadre à 390 px (147 px sur 335) quand il en remplit 69 % à 1440 px — le produit vedette paraissait sous-dimensionné sur téléphone. */ .cb-hero__shot img{width:min(100%,clamp(190px,56vw,300px));height:auto} .cb-facts{grid-template-columns:1fr} .cb-close__grid{grid-template-columns:1fr;justify-items:start} .cb-close__dial{order:-1;width:clamp(120px,26vw,150px)} } @media (max-width:560px){ .cb-flow{--cb-gut:66px;--cb-py:38px;--cb-nfs:38px;--cb-dial:34px} .cb-band__grid{column-gap:12px} .cb-band__n{padding-inline:5px} /* Le marqueur de temps est plus large que la colonne à 12 px : on le resserre plutôt que de le laisser mordre sur le rail. */ .cb-band__t{font-size:11.5px;letter-spacing:0;padding-inline:3px} .cb-hero__h1{font-size:clamp(30px,9vw,42px)} .cb-close__cta .btn{width:100%} } /* ===================================================================== 6 · MOTION — une seule animation signature (le fil + les chronos), pilotée par une horloge rAF unique. Sans elle, tout est à l'état final. ===================================================================== */ @media (prefers-reduced-motion:reduce){ .cb-band::after{transform:scaleY(1)} }