/* ========================================================================== custom.css — chargee APRES site.css (CSS verbatim de la maquette, jamais modifiee). Toute modification de style du site se fait ICI. ========================================================================== */ /* ========================================================================== 1. Corrections fonctionnelles V5.4 ========================================================================== */ /* En-tete collant : la maquette declare .hdr{position:sticky}, mais pose aussi html{overflow-x:clip} ET body{overflow-x:hidden}. Le debordement du body ne se propage alors plus a la fenetre : le body devient un conteneur de defilement qui ne defile jamais, et l'en-tete « colle » a lui, donc jamais (constate sur m2.html et m3.html eux-memes). html{overflow-x:clip} suffit a empecher le defilement horizontal ; le body redevient transparent. */ body { overflow-x: visible; } /* Un element masque par le filtre (attribut hidden) doit l'etre vraiment : certaines regles de la maquette (ex. .prod{display:flex}) l'emporteraient sinon sur le style par defaut de [hidden]. */ [hidden] { display: none !important; } /* Ancre atteinte au chargement d'une URL (#contact, ?gamme=…#produits) : le titre de la section n'est pas masque par l'en-tete collant. Les clics sont, eux, positionnes au pixel pres par site.js. */ main [id] { scroll-margin-top: 96px; } /* Menu mobile ouvert : le fond ne defile plus (classe posee par site.js). */ body.menu-ouvert { overflow: hidden; } /* Menu mobile ouvert : l'en-tete (et son burger) se place tout en haut. La maquette reserve 106 a 112 px en tete du menu pour un en-tete de 76 a 84 px ; mais en haut de page la barre d'information (deux lignes en mobile) le pousse plus bas, et il recouvrait alors le premier lien du menu. */ body.menu-ouvert #hdr { position: fixed; top: 0; left: 0; right: 0; } /* FAQ : refermer une reponse ne fait plus sauter la page (ancrage de defilement du navigateur sur le contenu qui suit). */ [data-js="faq-item"], [data-js="faq-reponse"] { overflow-anchor: none; } /* Rangees de l'index des gammes : elles sont activables au clavier. */ [data-js="gamme-index"]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Notification (#toast) au repos : la maquette la cache par un decalage de 140 % de SA PROPRE hauteur ; vide, elle ne fait que quelques pixels et depassait en bas de l'ecran (petit pave sombre / jaune). */ #toast:not(.on) { visibility: hidden; } /* Carte produit : toute la carte mene a la fiche (site.js). */ [data-js="produit"][data-href] { cursor: pointer; } /* -------------------------------------------------------------------------- Fiche produit (produit.php) — page absente des maquettes, demandee par le client. Elle reutilise les composants du site (kick, lead, btn, ph) ; seule sa mise en page est definie ici. -------------------------------------------------------------------------- */ .fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .fiche-retour { margin: 0 0 22px; } .fiche-retour a { text-decoration: underline; text-underline-offset: 3px; } .fiche-principale { width: 100%; height: auto; } .fiche-vignettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .fiche-vignette { width: 76px; height: 76px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; } .fiche-vignette.on { border-color: currentColor; } .fiche-vignette img { width: 100%; height: 100%; object-fit: cover; } .fiche-titre { margin: 8px 0 12px; } .fiche-badge { display: inline-block; margin: 0 0 14px; padding: 4px 10px; border: 1px solid currentColor; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .fiche-description { margin: 18px 0; } .fiche-infos { margin: 22px 0; display: grid; gap: 8px; } .fiche-infos div { display: flex; gap: 12px; } .fiche-infos dt { min-width: 120px; opacity: .7; } .fiche-infos dd { margin: 0; font-weight: 600; } .fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } @media (max-width: 820px) { .fiche { grid-template-columns: minmax(0, 1fr); } } /* -------------------------------------------------------------------------- Blog « Conseils » (V5.5) — section d'accueil, conseils.php, conseil.php. Aucune maquette de blog : les vues reutilisent les composants du site (kick, h2, lead, cartes prod, puces chip, btn). Seuls l'espacement et la lecture du contenu editorial sont definis ici ; aucune couleur ni police nouvelle (currentColor et tailles du site). -------------------------------------------------------------------------- */ [data-js="article"][data-href] { cursor: pointer; } .conseil-titre { margin: 8px 0 14px; font-size: clamp(32px, 4.4vw, 56px) /* taille des titres h2 du site */; } .conseil-image { width: 100%; height: auto; margin: 26px 0 8px; } .conseil-contenu { margin-top: 22px; } .conseil-contenu img { max-width: 100%; height: auto; } .conseil-contenu h2, .conseil-contenu h3 { margin: 1.4em 0 .5em; } .conseil-contenu ul, .conseil-contenu ol { padding-left: 1.3em; } .conseil-contenu a { text-decoration: underline; text-underline-offset: 3px; } .conseils-pages { margin: 34px 0 0; } /* ========================================================================== 2. Retouches graphiques demandees par la responsable -------------------------------------------------------------------------- V8 — charte du pressbook (docs/charte/ANALYSE_PRESSBOOK.md) : polices et fonds uniquement. Valeurs relevees dans le PDF ; --red inchange (ecart DeltaE 1,28 avec le rouge du PDF #E41F28). ========================================================================== */ /* --- Palette et polices ------------------------------------------------- */ :root { --paper: #FFFFFF; /* encarts blancs du PDF (sections selection, avis, formulaire) */ --cream: #F9F9FC; /* fond des pages claires du PDF (fond de page) */ --cream-d: #F9F9FC; /* section contact : plus sombre, le rouge passerait sous l'AA */ --line: #E5E5E5; /* filet clair neutre */ --line-2: #C2C1C1; /* gris clair du PDF */ --ink: #151618; /* noir du texte du PDF */ --black: #151618; /* noir des pages sombres du PDF */ --mute: #606161; /* gris des caracteristiques du PDF (5,91:1 sur --cream) */ --ff-d: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-c: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --ff-b: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* --- Teintes chaudes ecrites en dur dans site.css, neutralisees ---------- */ .ph { background: repeating-linear-gradient(135deg, #EFEFEF 0 13px, #E7E7E7 13px 26px); } .ph::after { color: var(--mute); background: rgba(249, 249, 252, .92); } .hdr { background: rgba(249, 249, 252, .92); } .hdr.stuck { background: rgba(249, 249, 252, .98); } .f select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606161' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .pull cite, .wa-box p, .ft p, .ft ul a { color: #C2C1C1; } /* gris clair du PDF sur fond noir */ .ft .logo-tx span, .ft-bot { color: #8E8E8E; } .ft-bot { border-top-color: #2C2D30; } .ft-legal { background: #0E0F10; color: #8E8E8E; } .fab-wa { box-shadow: 0 14px 34px rgba(21, 22, 24, .3); } /* --- Typographie Poppins ------------------------------------------------- */ /* Poppins a des capitales et des accents plus hauts que Playfair : l'interligne de 1,06 de la maquette faisait se toucher deux lignes de titre. */ h1, h2, h3, h4 { line-height: 1.15; } h1 { font-weight: 700; } /* 800 non charge : graisse du PDF (Bold) */ h3, .q-b { font-weight: 600; } /* noms de produits du PDF : SemiBold */ /* Le pressbook n'emploie jamais l'italique pour un titre ni un mot mis en valeur : les accents gardent leur couleur et perdent l'italique. */ h1 em, h2 em, h3 em, h4 em, .serif-n, .pull blockquote { font-style: normal; } /* Tableau de caracteristiques de la fiche produit : Cabin, comme le tableau technique du catalogue du PDF. */ .fiche-infos dt, .fiche-infos dd { font-family: 'Cabin', var(--ff-b); } /* Ajustements mesures : Poppins est plus large que Barlow Condensed et Inter. - Mobile : « Envoyer la demande », « Demarrer la discussion », « Demander sur WhatsApp » passaient sur deux lignes, pictogramme a part (281-335 px de large). - Fiche produit : les deux boutons d'action ne tenaient plus cote a cote (662 px pour 552 disponibles a 1366) et s'empilaient a largeurs inegales. - Pied de page : l'adresse email se coupait au trait d'union (colonne de 240 px). L'interlettrage reduit rapproche ces boutons du pressbook, qui n'en ajoute aucun. */ @media (max-width: 640px) { .btn { font-size: 14px; letter-spacing: .06em; padding-left: 16px; padding-right: 16px; } } @media (min-width: 641px) { .fiche-actions .btn-lg { letter-spacing: .06em; padding-left: 22px; padding-right: 22px; } } .ft ul a[href^="mailto:"] { font-size: 13.5px; }