/* ===================================================================== GABARIT « PAGE PRODUIT RÉSEAU » — feuille partagée --------------------------------------------------------------------- Sert TOUTES les pages support × réseau (carte/plaque × Google, Instagram, WhatsApp, Facebook, TikTok, personnalisée). Rien de propre à un produit ici : ni nom, ni prix, ni image, ni lien — tout cela vit dans le HTML de chaque page. Cette feuille ne décrit que la composition. À charger APRÈS ../../styles.css (elle en surcharge des composants : .kk-faq__item, .kk-btn, .kktop). Parti pris de la page : c'est une fiche de vente. Tout ce qui décide de l'achat (prix, dégressivité, CTA, réassurances) est DANS le hero, à droite du texte, sur le même plan que la photo — donc au premier pli sans avoir à scroller. Le reste confirme, dans cet ordre : les 3 angles, les 3 étapes, le comparatif carte/plaque, la FAQ. Densité tenue par un seul rail (1080) et trois plans : le plan studio (hero), #FFF (les preuves), --surface-sunken (les blocs insérés). Aucune couture dégradée : des coupes franches et des blocs encartés en radius 28/20. ===================================================================== */ /* Plan studio de la page : couleur EXACTE du fond cuit des packshots servis (pipette sur les 4 coins des fichiers produits/*.webp). --kk-plan n'existe que dans la portée de .kktop ; ici le plan doit courir de la barre promo au bas du hero, donc il a son propre token, déclaré sur la page. */ body{--pc-plan:#F1F5FB} /* ---- 1 · En-tête : la pilule de nav vit dans .kktop (le CSS de la nav y est scopé), mais SANS le contrat « hauteur d'un viewport » du hero de l'accueil : ici le plan continue simplement dans le hero. ---- */ .pc-top.kktop{ display:block;min-height:0;height:auto; background:var(--pc-plan); /* même plan que le hero */ } /* ---- 1b · Panier dans la pilule (.kk-navcart) + entrée « Mon panier » du drawer mobile (.kk-mob__cart) : bloc CANON, défini une seule fois dans styles.css, chargé par toutes les pages. Rien à redupliquer ici. ---- */ /* ---- 2 · HERO SPLIT ------------------------------------------------ Grille 2 colonnes : la copie et le bloc d'achat s'empilent à gauche, la photo tient toute la colonne droite. La photo est un packshot à fond cuit identique au plan : elle affleure le plan, donc aucun cadre, aucune ombre CSS, aucun bord. ------------------------------------- */ .pc-hero{background:var(--pc-plan);padding-bottom:clamp(30px,4vw,56px)} /* Fil d'Ariane discret, posé sur le plan, aligné au rail. */ .pc-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)} .pc-crumb a{color:var(--text-muted);border-bottom:1px solid transparent} .pc-crumb a:hover{color:var(--brand);border-bottom-color:currentColor} .pc-crumb__sep{width:10px;height:10px;flex:none;fill:var(--ku-blue-200)} .pc-crumb__here{color:var(--text);font-weight:600} /* ---- 2a · BANDEAU « BIENTÔT DISPONIBLE » --------------------------- Retrait temporaire d'un support : la fiche reste en ligne, la vente est coupée. Le bandeau se lit juste après le fil d'Ariane, avant le titre. Bloc blanc net sur le plan studio, filet bleu à 1 px, radius 16 (un cran sous la carte d'achat : c'est une note, pas une carte). Aucune pastille, aucune couleur d'alerte — il informe, il ne vend pas. POUR ROUVRIR LA VENTE : retirer les