/**
* ============================================================
* CANARDISES DE VAOUR — Design system (repris du projet Lovable)
* ============================================================
* Source : https://github.com/UgoBalette/pixel-perfect-mirror (branche main,
* commit 4a8832f), fichier src/styles.css + composants src/components/site/*.
* Prompt B11 (doc/prompts_taches_restantes.md).
*
* Méthode : EXTRACTION DE CHARTE, pas reproduction pixel-perfect de mise en
* page. Lovable produit du React/Tailwind v4 avec build ; ce site est en
* PHP/CSS pur sans build (thème enfant Storefront). On retranscrit donc les
* *tokens* (palette, typographies, échelle, styles de composants) en CSS
* appliqué au balisage existant de Storefront / WooCommerce / du plugin
* canardises-dashboard, sans surcharger aucun template et sans toucher à la
* logique métier (bandeau de session, prix PRO HT, badges ❄️/pictos, champ
* quantité en grille, checkout par canal, Shop_Gate).
*
* Palette stricte de la charte (equiv. hex des oklch de Lovable) :
* #97362B rouge « chair » profond (primaire — logo, CTA, prix, liens)
* #5C2019 même rouge, plus sombre (hover CTA, pied de page)
* #F4E6E1 même rouge, très clair (fonds d'encart, bandeaux)
* #D7A774 ambre / beige doré (accent — surtitres, filet actif, numéros)
* #F2E7DF écru / crème (fonds neutres chauds, texte sur pied de page)
* #1A1A1A encre (texte principal) — jamais un noir pur d'imprimerie
* Aucune autre teinte introduite (le vert « forêt » de l'ancienne maquette
* fiche produit est réaligné sur le rouge sombre ci-dessous).
*
* Typographies :
* Titres / display -> EB Garamond (substitut libre de « Garamond »)
* Texte courant -> Jost (substitut de « ITC Avant Garde Gothic »)
* Les deux sont auto-hébergées (.woff2 dans assets/fonts/, @font-face
* section 0bis ci-dessous — 2026-09-11, retour RGPD Ablink). Jost reste un
* repli tant que ITC Avant Garde Gothic (sous licence) n'est pas déposée.
*
* Rayon de bordure : 2px (0.125rem) — volontairement discret, pas d'arrondi
* « carte app ». Ombres évitées : on structure par des filets fins.
* ============================================================
*/
:root {
/* --- Tokens de charte Lovable --- */
--cdv-terracotta: #97362b;
--cdv-terracotta-deep: #5c2019;
/* Rose très clair de la charte (equiv. oklch(0.935 0.028 34) de Lovable) —
* nettement plus chaud que la crème de fond, pour que les sections
* « Nos gammes » / bande SICA / bandeau de session se détachent. */
--cdv-terracotta-soft: #f6e1d8;
--cdv-amber: #d7a774;
--cdv-amber-ink: #a9762f; /* ambre assombri, lisible en texte sur fond clair */
--cdv-cream: #f2e7df;
--cdv-bg: #f5ede4; /* fond de page chaud (equiv. .paper de Lovable, sans le grain) */
--cdv-surface: #ffffff; /* fond des cartes / encarts */
/* Couleur de texte par défaut : #5B0E1A — consigne typo de l'exploitant
* du 27/08 (bordeaux très sombre, pas un noir d'imprimerie). Reprise ici
* dans le design system Lovable. */
--cdv-ink: #5b0e1a;
--cdv-ink-soft: #6b3a37;
--cdv-ink-faint: #8a5b52;
--cdv-border: rgba(91, 14, 26, 0.16);
--cdv-border-soft: rgba(91, 14, 26, 0.10);
--cdv-border-strong: rgba(91, 14, 26, 0.26);
--cdv-radius: 2px;
/* Titres / display : Garamond (charte + Lovable). Substitut libre :
* EB Garamond, graisse fine 400 comme Lovable (choix de l'exploitant,
* pas le « gras » de la consigne du 27/08).
* Corps : ITC Avant Garde Gothic Std (charte + Lovable). Fichier sous
* licence à déposer dans assets/fonts/ (voir @font-face plus bas et
* assets/fonts/README.md) ; en attendant, repli sur Jost (clone libre
* de Futura/Avant Garde, auto-hébergée depuis le 2026-09-11 — section
* 0bis ci-dessous). */
--cdv-font-display: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
--cdv-font-body: "ITC Avant Garde Gothic", "ITC Avant Garde Gothic Std", "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--cdv-container: 1200px;
/* --- Remap des tokens historiques de canardises-product.css /
* canardises-shop.css : ces deux fichiers (fiche produit + onglets
* famille) sont écrits contre --wine / --gold / --ground / --line...
* On redéfinit ces variables ici (feuille chargée en dernier) pour
* qu'ils adoptent la charte Lovable sans réécrire ligne par ligne. --- */
--ground: var(--cdv-bg);
--surface: var(--cdv-surface);
--surface-2: var(--cdv-cream);
--ink: var(--cdv-ink);
--ink-soft: var(--cdv-ink-soft);
--ink-faint: var(--cdv-ink-faint);
--wine: var(--cdv-terracotta);
--wine-deep: var(--cdv-terracotta-deep);
--wine-tint: var(--cdv-terracotta-soft);
--gold: var(--cdv-amber-ink);
--gold-tint: #f3e7d6;
--forest: var(--cdv-terracotta-deep);
--forest-tint: var(--cdv-terracotta-soft);
--line: var(--cdv-border);
--line-soft: var(--cdv-border-soft);
--canardises-radius: var(--cdv-radius);
}
/* Le bloc @media (prefers-color-scheme: dark) de canardises-product.css
* reste chargé mais est neutralisé par les redéfinitions ci-dessus (feuille
* postérieure, même spécificité) : le site est pensé clair, comme le rendu
* Lovable. On force explicitement le fond clair pour ne pas hériter d'un
* ground sombre sur la fiche produit chez un visiteur en mode sombre. */
@media (prefers-color-scheme: dark) {
:root {
--ground: var(--cdv-bg);
--surface: var(--cdv-surface);
--surface-2: var(--cdv-cream);
--ink: var(--cdv-ink);
--ink-soft: var(--cdv-ink-soft);
--ink-faint: var(--cdv-ink-faint);
--wine: var(--cdv-terracotta);
--wine-deep: var(--cdv-terracotta-deep);
--wine-tint: var(--cdv-terracotta-soft);
--gold: var(--cdv-amber-ink);
--gold-tint: #f3e7d6;
--forest: var(--cdv-terracotta-deep);
--forest-tint: var(--cdv-terracotta-soft);
--line: var(--cdv-border);
--line-soft: var(--cdv-border-soft);
}
}
/* ============================================================
* 0. Police corps sous licence — ITC Avant Garde Gothic Std
* ============================================================
* La charte (doc/design/Chartre_Graphique_CDT.pdf) et le rendu Lovable
* imposent ITC Avant Garde Gothic pour le texte courant — police
* commerciale. Déposer les fichiers dans
* themes/storefront-child/assets/fonts/ (voir ce dossier, README.md) :
* itc-avant-garde-gothic.woff2 / .woff (Book / Regular, 400)
* itc-avant-garde-gothic-medium.woff2 / .woff (Medium, 500) — optionnel
* itc-avant-garde-gothic-bold.woff2 / .woff (Bold, 700) — optionnel
* Tant que les fichiers sont absents, le navigateur retombe silencieusement
* sur Jost (Google Fonts, clone libre de Futura/Avant Garde). */
@font-face {
font-family: "ITC Avant Garde Gothic";
src: url("../fonts/itc-avant-garde-gothic.woff2") format("woff2"),
url("../fonts/itc-avant-garde-gothic.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ITC Avant Garde Gothic";
src: url("../fonts/itc-avant-garde-gothic-medium.woff2") format("woff2"),
url("../fonts/itc-avant-garde-gothic-medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "ITC Avant Garde Gothic";
src: url("../fonts/itc-avant-garde-gothic-bold.woff2") format("woff2"),
url("../fonts/itc-avant-garde-gothic-bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ============================================================
* 0bis. EB Garamond / Jost — auto-hébergées (RGPD, retour Ablink 2026-09-11)
* ============================================================
* Chargées jusqu'ici depuis fonts.googleapis.com (functions.php) : appel à
* un tiers sur chaque page, transmettant l'IP du visiteur à Google avant
* tout consentement (question distincte des cookies, mais adjacente —
* cf. doc/journal_avancement.md, entrée du 11/09). Fichiers .woff2 générés
* via google-webfonts-helper (sous-ensemble latin), déposés dans
* assets/fonts/eb-garamond/ et assets/fonts/jost/. Remplace l'enqueue
* Google du handle `canardises-fonts` dans functions.php. */
@font-face {
font-family: "EB Garamond";
src: url("../fonts/eb-garamond/eb-garamond-v33-latin-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "EB Garamond";
src: url("../fonts/eb-garamond/eb-garamond-v33-latin-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "EB Garamond";
src: url("../fonts/eb-garamond/eb-garamond-v33-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "EB Garamond";
src: url("../fonts/eb-garamond/eb-garamond-v33-latin-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/jost-v20-latin-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/jost-v20-latin-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/jost-v20-latin-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Jost";
src: url("../fonts/jost/jost-v20-latin-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* ============================================================
* 1. Base — typographie et fonds
* ============================================================ */
body,
button,
input,
select,
textarea {
font-family: var(--cdv-font-body);
}
body {
background-color: var(--cdv-bg);
color: var(--cdv-ink);
font-weight: 300;
letter-spacing: 0.005em;
-webkit-font-smoothing: antialiased;
}
/* Texture papier discrète (chaleur sans ornement), reprise de l'utilitaire
* @utility paper de Lovable : crème + deux halos radiaux terre/ambre. */
#page.site,
body.home #page.site {
background-color: var(--cdv-cream);
/* Halo très discret — la « Présentation » (fond transparent) doit lire
* comme une crème propre, pas comme une section teintée. Le rose, c'est
* pour « Nos gammes » (fond opaque terracotta-soft). */
background-image:
radial-gradient(circle at 15% 6%, rgba(151, 54, 43, 0.035) 0%, transparent 42%),
radial-gradient(circle at 90% 82%, rgba(215, 167, 116, 0.07) 0%, transparent 48%);
background-attachment: fixed;
/* Garde-fou pour le full-bleed de la page d'accueil (front-page.php
* utilise margin-left: calc(50% - 50vw)) : aucun défilement latéral.
* `clip` et pas `hidden` : `hidden` ferait de #page un conteneur de
* défilement et casserait le position:sticky de l'en-tête Storefront. */
overflow-x: clip;
}
h1, h2, h3, h4, h5, h6,
.page-title,
.entry-title,
blockquote {
font-family: var(--cdv-font-display);
font-weight: 400;
letter-spacing: -0.015em;
color: var(--cdv-ink);
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: var(--cdv-terracotta);
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
}
a:hover,
a:focus {
color: var(--cdv-terracotta-deep);
}
::selection {
background: var(--cdv-amber);
color: var(--cdv-ink);
}
:focus-visible {
outline: 2px solid var(--cdv-terracotta);
outline-offset: 2px;
}
/* Surtitre éditorial (« eyebrow » Lovable) — utilisable dans les templates
* du plugin et le front-page.php. */
.cdv-eyebrow {
display: block;
font-family: var(--cdv-font-body);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cdv-terracotta);
margin: 0 0 0.75rem;
}
.cdv-container {
width: 100%;
max-width: var(--cdv-container);
margin-inline: auto;
padding-inline: 1.5rem;
}
/* ============================================================
* 2. Boutons — terracotta plein, encre crème, 2px, sans ombre
* ============================================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .widget_price_filter .price_slider_amount .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.wc-block-components-button:not(.is-link),
.added_to_cart {
background-color: var(--cdv-terracotta);
border: 1px solid var(--cdv-terracotta);
color: var(--cdv-cream);
border-radius: var(--cdv-radius);
box-shadow: none;
text-shadow: none;
font-family: var(--cdv-font-body);
font-weight: 500;
letter-spacing: 0.01em;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover,
.wc-block-components-button:not(.is-link):hover,
.added_to_cart:hover {
background-color: var(--cdv-terracotta-deep);
border-color: var(--cdv-terracotta-deep);
color: var(--cdv-cream);
}
/* Bouton secondaire / « outline » (ex. « Voir le panier ») */
.woocommerce a.button.wc-forward:not(.checkout-button),
.woocommerce .widget_shopping_cart a.button:not(.checkout) {
background-color: transparent;
color: var(--cdv-terracotta);
}
.woocommerce a.button.wc-forward:not(.checkout-button):hover,
.woocommerce .widget_shopping_cart a.button:not(.checkout):hover {
background-color: var(--cdv-terracotta);
color: var(--cdv-cream);
}
/* ============================================================
* 3. Champs de formulaire
* ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select,
.select2-container .select2-selection--single {
background-color: var(--cdv-surface);
border: 1px solid var(--cdv-border-strong);
border-radius: var(--cdv-radius);
color: var(--cdv-ink);
box-shadow: none;
}
input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection--single {
border-color: var(--cdv-terracotta);
outline: 2px solid rgba(151, 54, 43, 0.25);
outline-offset: 0;
}
/* ============================================================
* 4. En-tête Storefront — bandeau terracotta pleine largeur,
* encre crème, filet ambre de 3px, sticky (cf. SiteHeader.tsx)
* ============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background-color: var(--cdv-terracotta);
border-bottom: 3px solid var(--cdv-amber);
padding-top: 1em;
padding-bottom: 1em;
margin-bottom: 0;
}
/* Storefront pose une grosse marge basse sur l'en-tête de certaines pages —
* notamment `.home.blog .site-header { margin-bottom: 4.23em }` (spécificité
* 0,3,0), d'où une bande crème entre l'en-tête et le hero. On l'annule sur
* les pages éditoriales (classe body ajoutée dans functions.php) : le
* contenu vient juste sous l'en-tête, comme sur Lovable. `!important` pour
* l'emporter sur la double-classe de Storefront. */
.canardises-editorial-page .site-header,
.no-wc-breadcrumb .site-header {
margin-bottom: 0 !important;
}
/* Pages éditoriales : la dernière section est un bloc plein cadre coloré qui
* doit toucher le pied de page — on retire la marge basse de Storefront à la
* fois sur #main ET sur #primary lui-même (en mode blocs, .canardises-editorial
* est porté par #primary, dont la marge basse .content-area de Storefront
* laissait sinon une bande claire d'environ 42px avant le pied de page). */
.canardises-editorial #main,
.canardises-editorial.site-main,
#primary.canardises-editorial #main,
#primary.canardises-editorial {
margin-bottom: 0;
}
.site-header,
.site-header a,
.site-header .site-title a,
.site-header .site-branding p,
.storefront-primary-navigation,
.main-navigation ul li a,
.site-header-cart .cart-contents,
.site-header-cart .amount {
color: var(--cdv-cream);
}
.site-header .site-branding {
margin-bottom: 0;
}
.site-header .site-title {
font-family: var(--cdv-font-display);
font-weight: 500;
font-size: 1.7rem;
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0;
text-transform: none;
}
.site-header .site-title a {
color: var(--cdv-cream);
}
.site-header .site-title a:hover {
color: #fff;
}
/* Accroche sous le nom de marque (Site_Texts « header.tagline ») —
* petites capitales espacées, crème atténué, comme sur Lovable.
* font-style: normal explicite : la classe .canardises-tagline sert aussi à
* l'accroche de fiche produit (canardises-product.css la met en italique) et
* cette règle-ci, plus spécifique, ne redéfinissait pas le style — l'accroche
* d'en-tête héritait donc l'italique (retour exploitant 2026-09-02). */
.site-header .canardises-tagline {
margin: 0.3rem 0 0;
font-family: var(--cdv-font-body);
font-size: 0.62rem;
font-weight: 500;
font-style: normal;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(242, 231, 223, 0.72);
}
/* Logo déposé (canardises-medias/logo/wordmark.*) — remplace le titre texte
* dans l'en-tête. */
.site-header .canardises-site-logo-link {
display: inline-block;
line-height: 0;
}
/* Sélecteur calqué sur celui de Storefront (« .site-header .site-branding img »,
* dans @media (min-width: 768px), max-width: 230px) pour le supplanter :
* sans le « .site-branding img » le thème parent l'emporte et impose ~90px. */
.site-header .site-branding img.canardises-site-logo {
display: block;
height: 72px;
width: auto;
max-width: 260px;
}
/* Accroche / description de site sous le titre */
.site-header .site-branding .site-description {
color: rgba(242, 231, 223, 0.6);
font-family: var(--cdv-font-body);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* En-tête sur UNE rangée : marque à gauche, puis nav + recherche + panier
* à droite (functions.php › canardises_header_actions). Le premier
* conteneur .col-full de l'en-tête devient une ligne flex. */
@media (min-width: 769px) {
.site-header > .col-full {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.site-header > .col-full > .site-branding {
float: none;
flex: 0 1 auto;
width: auto; /* Storefront fixe une largeur de colonne — on la retire */
max-width: 60%;
margin-right: 2rem;
}
.site-header .canardises-header-actions {
float: none;
margin-left: auto;
flex: 0 1 auto;
}
}
.site-header .canardises-header-actions {
display: flex;
align-items: center;
gap: 2rem;
}
.site-header .canardises-header-actions .main-navigation {
float: none;
width: auto;
margin: 0;
}
/* Menu horizontal, jamais de retour à la ligne, espacement Lovable
* (gap-x-7 ≈ 1.75rem). Desktop uniquement : sous 769px la navigation
* passe en panneau déroulant sous le bouton ☰ (bloc mobile plus bas,
* B32). Sans ce garde-fou, la nav horizontale restait forcée sur
* mobile et masquait le bouton hamburger. */
@media (min-width: 769px) {
.site-header .canardises-header-actions .main-navigation > div > ul,
.site-header .canardises-header-actions .main-navigation ul#menu-navigation-principale,
.site-header .canardises-header-actions .main-navigation .primary-navigation > ul {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 2.25rem;
margin: 0;
padding: 0;
white-space: nowrap;
}
}
.site-header .canardises-header-actions .main-navigation li {
float: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.site-header .canardises-header-actions .main-navigation li a {
padding: 0 0 4px; /* le 4px du bas décolle le trait « page active » du texte */
}
/* Le déclencheur du panier (« la miniature ») reste affiché en permanence,
* y compris panier vide (WooCommerce rend alors « 0,00 € » + « 0 article »).
* L'exploitant veut un repère de panier toujours présent à droite de
* l'en-tête. */
/* Storefront pose ~1,62em de padding vertical sur le lien du panier, ce qui
* gonflait la rangée de l'en-tête à ~104px (d'où un en-tête « énorme »).
* On le retire et on resserre l'interligne : la hauteur de l'en-tête suit
* alors la marque (~50px) + le padding de .site-header.
* On aligne le contenu à droite et on force la quantité (.count) sur sa
* propre ligne sous le prix : en ligne, le thème renvoyait « 2 articles »
* à la ligne en plein milieu du mot sur les largeurs d'en-tête réelles.
* On garde un flux inline pour la 1re ligne (un éventuel préfixe « ≈ »
* des produits au poids reste collé au montant) et on ne bloc-ifie que
* .count. */
.site-header .canardises-header-actions .site-header-cart .cart-contents {
padding-top: 0;
padding-bottom: 0;
line-height: 1.3;
text-align: right;
white-space: nowrap;
}
.site-header .canardises-header-actions .site-header-cart .cart-contents .count {
display: block;
white-space: nowrap;
}
/* Compteur panier de l'en-tête — tout en crème, sur toutes les pages.
* Deux corrections (C28) :
* - la mention « TTC » / « HT » du sous-total (canardises-price-tax-mention)
* utilise ailleurs un gris discret, illisible sur le bandeau terracotta ;
* - sur les pages Panier / Commande, Storefront marque le lien du panier
* « current-menu-item » et le rebascule en gris #747474 (règle
* « .site-header ul.menu li.current-menu-item > a », spécificité 0-3-3) —
* ce qui grisait la quantité (« 1 article ») ET la mention.
* On reforce donc le crème sur le lien lui-même (y compris son état
* current-menu-item, sélecteur assez spécifique pour l'emporter) et sur ses
* enfants texte. Le gris discret reste en place au panier / mini-panier /
* checkout (fond clair), non touché ici. */
.site-header ul.site-header-cart li.current-menu-item > a.cart-contents,
.site-header .site-header-cart .cart-contents .count,
.site-header .site-header-cart .cart-contents .canardises-price-tax-mention,
.site-header .site-header-cart .cart-contents .canardises-ht-suffix {
color: var(--cdv-cream);
}
/* Filet ambre fin qui détache le panier de la navigation (façon Lovable :
* le panier est un groupe d'action distinct). Le déclencheur restant
* toujours affiché, le filet sert de séparateur permanent du groupe
* d'action panier. */
@media (min-width: 769px) {
.site-header .canardises-header-actions .site-header-cart {
padding-left: 1.5rem;
border-left: 1px solid rgba(215, 167, 116, 0.4);
}
}
/* ------------------------------------------------------------------
* Navigation mobile (B32, 2026-09-03) — sous 769px : marque à gauche,
* bouton ☰ à droite ; la navigation s'ouvre en panneau déroulant
* plein largeur sous l'en-tête. On réutilise le bouton .menu-toggle
* de Storefront (navigation.js pose .toggled sur #site-navigation au
* clic) ; ici on ne fait que le rendre visible/lisible et transformer
* la liste en panneau empilé. La barre de pied Storefront (Mon compte
* / Recherche / Panier) est retirée côté PHP (functions.php).
* ------------------------------------------------------------------ */
@media (max-width: 768px) {
/* En-tête sur une rangée : marque à gauche, actions (☰) à droite. */
.site-header > .col-full {
display: flex;
align-items: center;
justify-content: space-between;
position: relative; /* ancre le panneau déroulant en position absolue */
}
.site-header > .col-full > .site-branding {
float: none;
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.site-header .canardises-header-actions {
float: none;
flex: 0 0 auto;
width: auto;
gap: 0;
margin: 0;
}
/* Le panier vivait dans la barre de pied : elle est supprimée, mais
* sur mobile on garde l'en-tête minimal (marque + ☰). Le panier
* reste accessible depuis la boutique et le tunnel de commande. */
.site-header .canardises-header-actions .site-header-cart {
display: none;
}
/* Bouton hamburger : carré, bordure crème, les 3 barres de
* Storefront (::before / ::after / span::before) recentrées. */
.site-header .canardises-header-actions .main-navigation .menu-toggle,
.site-header button.menu-toggle {
display: block;
float: none;
position: relative;
width: 44px;
height: 40px;
padding: 0;
max-width: none;
border: 1px solid rgba(242, 231, 223, 0.55);
border-radius: 4px;
background-color: transparent;
}
.site-header button.menu-toggle span {
display: block;
font-size: 0; /* masque le mot « Menu » ; la barre du milieu est span::before */
line-height: 0;
}
.site-header button.menu-toggle::before,
.site-header button.menu-toggle::after,
.site-header button.menu-toggle span::before {
left: 50%;
width: 20px;
margin-left: -10px;
background-color: var(--cdv-cream);
}
/* Navigation masquée par défaut, révélée quand navigation.js pose
* .toggled sur #site-navigation. On couvre les variantes de balisage
* possibles (menu assigné → ul.menu / ul.nav-menu ; repli
* wp_page_menu → div.menu > ul). */
.site-header .canardises-header-actions .main-navigation .primary-navigation,
.site-header .canardises-header-actions .main-navigation div.menu,
.site-header .canardises-header-actions .main-navigation > ul,
.site-header .canardises-header-actions .main-navigation ul.menu,
.site-header .canardises-header-actions .main-navigation ul.nav-menu {
display: none;
}
.site-header .main-navigation.toggled .primary-navigation,
.site-header .main-navigation.toggled div.menu,
.site-header .main-navigation.toggled > ul,
.site-header .main-navigation.toggled ul.menu,
.site-header .main-navigation.toggled ul.nav-menu {
display: block;
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 999;
margin: 0;
padding: 0.25rem 0;
max-height: none; /* annule le max-height:0 / overflow:hidden de Storefront */
overflow: visible;
background-color: var(--cdv-terracotta-deep);
border-top: 1px solid var(--cdv-amber);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
/* Items empilés, pleine largeur, zone tactile confortable. */
.site-header .canardises-header-actions .main-navigation.toggled li {
display: block;
float: none;
width: 100%;
margin: 0;
white-space: normal;
}
.site-header .canardises-header-actions .main-navigation.toggled li a {
display: block;
padding: 0.95rem 1.5rem;
border-bottom: 1px solid rgba(242, 231, 223, 0.14);
font-size: 1.05rem;
}
.site-header .canardises-header-actions .main-navigation.toggled li:last-child > a {
border-bottom: 0;
}
/* Sous-menus éventuels : simple retrait, pas de survol sur mobile. */
.site-header .main-navigation.toggled ul ul {
margin: 0;
padding-left: 1rem;
border-left: 1px solid rgba(242, 231, 223, 0.14);
}
}
/* Navigation principale — même typo que le texte courant du site
* (Lovable : lien de nav en graisse légère héritée du body). Le trait de
* page active / survol est décollé du texte par un padding-bottom. */
.main-navigation ul li a,
.site-header .canardises-header-actions .main-navigation li a {
color: rgba(242, 231, 223, 0.82);
font-family: var(--cdv-font-body);
font-size: 1.05rem;
font-weight: 300;
letter-spacing: 0.005em;
text-transform: none;
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
/* Le trait sous la page active / au survol. Les deux contextes de sélecteur
* de la règle de base ci-dessus doivent être repris ici, sinon la variante
* la plus spécifique (`.canardises-header-actions …`) impose son
* `border-bottom: … transparent` et le trait disparaît. */
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-menu-ancestor > a,
.site-header .canardises-header-actions .main-navigation li a:hover,
.site-header .canardises-header-actions .main-navigation li.current-menu-item > a,
.site-header .canardises-header-actions .main-navigation li.current_page_item > a,
.site-header .canardises-header-actions .main-navigation li.current-menu-ancestor > a {
color: var(--cdv-cream);
border-bottom-color: var(--cdv-amber);
}
/* Sous-menus déroulants : fond crème, encre foncée pour rester lisibles */
.main-navigation ul.nav-menu ul,
.main-navigation ul.menu ul {
background-color: var(--cdv-cream);
border: 1px solid var(--cdv-border);
box-shadow: none;
}
.main-navigation ul.nav-menu ul li a,
.main-navigation ul.menu ul li a {
color: var(--cdv-ink-soft);
border-bottom: 1px solid var(--cdv-border-soft);
}
.main-navigation ul.nav-menu ul li a:hover,
.main-navigation ul.menu ul li a:hover {
color: var(--cdv-terracotta);
border-bottom-color: var(--cdv-border-soft);
}
/* Menu mobile (bouton hamburger Storefront) */
.main-navigation .menu-toggle,
button.menu-toggle {
background-color: transparent;
border: 1px solid rgba(242, 231, 223, 0.4);
color: var(--cdv-cream);
}
.main-navigation .menu-toggle:hover,
button.menu-toggle:hover {
background-color: rgba(0, 0, 0, 0.12);
color: var(--cdv-cream);
}
/* Recherche produit dans l'en-tête */
.site-search .widget_product_search input[type="search"],
.site-header .widget_product_search input[type="search"] {
background-color: rgba(255, 255, 255, 0.92);
border-color: transparent;
}
/* Panier de l'en-tête */
.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus {
color: #fff;
}
/* Prévisualisation du panier au survol (mini-cart Storefront).
* Depuis la refonte B11, le panier vit dans .canardises-header-actions, un
* conteneur flex étroit : .site-header-cart ne fait plus que ~94px, et le
* `width: 100%` de Storefront (woocommerce.css) écrasait le menu déroulant à
* cette largeur — mise en page déformée (retour exploitant 2026-08-31).
* `functions.php` fait maintenant dépendre ce fichier de
* `storefront-woocommerce-style` pour qu'il se charge APRÈS ; les sélecteurs
* sont en outre préfixés `.site-header .site-header-cart .widget_shopping_cart`
* pour passer devant les règles Storefront à spécificité plus forte
* (`… .product_list_widget li a.remove` etc.). Le mécanisme d'affichage /
* masquage de Storefront (`left: -999em` → `left: 0` au survol) n'est pas
* touché : on ne redéfinit `left` que dans l'état visible. */
.site-header .site-header-cart .widget_shopping_cart {
width: 340px;
max-width: calc(100vw - 2rem);
padding: 1.1rem 1.25rem 1.25rem;
background-color: var(--cdv-surface);
color: var(--cdv-ink);
border: 1px solid var(--cdv-border-strong);
border-top: 3px solid var(--cdv-amber);
border-radius: 0 0 var(--cdv-radius) var(--cdv-radius);
box-shadow: 0 14px 34px rgba(91, 14, 26, 0.16);
font-size: 0.9rem;
}
.site-header .site-header-cart:hover .widget_shopping_cart,
.site-header .site-header-cart.focus .widget_shopping_cart,
.site-header .site-header-cart:focus-within .widget_shopping_cart {
left: auto;
right: 0;
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart {
margin: 0;
padding: 0;
list-style: none;
}
/* Structure d'un item (template mini-cart WooCommerce standard) :
* × ![]()
Nom du produit
* L'image et le nom sont dans le MÊME : on met ce en grille
* (vignette | nom), et .quantity passe en dessous, alignée sous le nom. */
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item {
position: relative;
display: block;
padding: 0.8rem 1.5rem 0.8rem 0;
margin: 0;
border-top: 1px solid var(--cdv-border-soft);
font-size: 0.86rem;
line-height: 1.4;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item:first-child {
border-top: 0;
padding-top: 0;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove) {
display: grid;
grid-template-columns: 46px 1fr;
gap: 0 0.75rem;
align-items: center;
color: var(--cdv-ink);
font-weight: 500;
text-decoration: none;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove):hover {
color: var(--cdv-terracotta);
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove) img {
grid-column: 1;
grid-row: 1;
width: 46px;
min-width: 46px;
max-width: 46px; /* woocommerce.css plafonne à 2.61792em (~36px) — on l'annule */
height: 46px;
margin: 0;
padding: 0;
float: none;
border: 1px solid var(--cdv-border-soft);
border-radius: var(--cdv-radius);
object-fit: cover;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item .quantity {
display: block;
margin: 0.35rem 0 0 calc(46px + 0.75rem);
color: var(--cdv-ink-soft);
font-size: 0.82rem;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item a.remove {
position: absolute;
top: 0.65rem;
right: 0;
left: auto;
float: none;
width: 1.35rem;
height: 1.35rem;
line-height: 1.3rem;
text-align: center;
border-radius: 50%;
font-size: 1rem;
color: var(--cdv-ink-faint);
background: transparent;
opacity: 1;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item:first-child a.remove {
top: 0;
}
.site-header .site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item a.remove:hover {
color: #fff;
background: var(--cdv-terracotta);
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total,
.site-header .site-header-cart .widget_shopping_cart p.total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.9rem 0 0;
margin: 0.4rem 0 0;
border-top: 1px solid var(--cdv-border);
font-family: var(--cdv-font-display);
font-size: 1.05rem;
color: var(--cdv-ink);
}
/* Prix affichés dans le menu déroulant du panier (prix unitaire de chaque
* ligne, sous-totaux). Sans ça, `.amount` hérite du crème clair de la règle
* d'en-tête `.site-header-cart .amount` — illisible sur le fond blanc du
* menu (retour exploitant 2026-09-02). La ligne « Total » ci-dessous garde
* sa teinte terracotta via sa règle plus spécifique. */
.site-header .site-header-cart .widget_shopping_cart .amount {
color: var(--cdv-ink-soft);
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total .amount {
color: var(--cdv-terracotta);
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons,
.site-header .site-header-cart .widget_shopping_cart p.buttons {
display: flex;
gap: 0.5rem;
margin: 0.95rem 0 0;
padding: 0;
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button {
flex: 1 1 50%;
margin: 0;
padding: 0.55rem 0.6rem;
text-align: center;
font-size: 0.82rem;
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
background: transparent;
border: 1px solid var(--cdv-terracotta);
color: var(--cdv-terracotta);
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
background: var(--cdv-terracotta-soft);
}
.site-header .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
margin: 0;
color: var(--cdv-ink-soft);
font-size: 0.9rem;
}
.site-header .site-header-cart .widget_shopping_cart a {
color: var(--cdv-terracotta);
}
/* ============================================================
* 5. Pied de page Storefront — bloc terracotta sombre, encre
* crème, filet ambre en haut (cf. SiteFooter.tsx)
* ============================================================ */
.site-footer {
background-color: var(--cdv-terracotta-deep);
border-top: 3px solid var(--cdv-amber);
color: rgba(242, 231, 223, 0.72);
/* Storefront pose ~26px en haut / ~59px en bas — resserré (retour exploitant). */
padding-block: 1.5rem;
}
.site-footer a {
color: rgba(242, 231, 223, 0.82);
}
.site-footer a:hover {
color: var(--cdv-cream);
}
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
color: var(--cdv-cream);
font-family: var(--cdv-font-display);
}
.site-footer .site-info {
background-color: transparent;
border-top: 1px solid rgba(242, 231, 223, 0.18);
color: rgba(242, 231, 223, 0.6);
}
/* Pied de page à 3 colonnes (functions.php, storefront_footer) — repris
* du composant SiteFooter de la charte Lovable. */
.site-footer .canardises-footer__cols {
display: grid;
gap: 2.5rem;
padding-block: 0.5rem 1.25rem;
}
@media (min-width: 768px) {
.canardises-footer__cols {
grid-template-columns: 1.4fr 1fr 1fr;
gap: 3rem;
}
}
.site-footer .canardises-footer__wordmark {
font-family: var(--cdv-font-display);
font-size: 1.35rem;
color: var(--cdv-cream);
margin: 0;
}
.site-footer .canardises-footer__logo {
display: block;
height: 96px;
width: auto;
max-width: 320px;
}
.site-footer .canardises-footer__blurb {
margin: 1rem 0 0;
max-width: 32ch;
font-size: 0.85rem;
line-height: 1.6;
color: rgba(242, 231, 223, 0.62);
}
.site-footer .canardises-footer__nav h2,
.site-footer .canardises-footer__where h2 {
font-family: var(--cdv-font-body);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cdv-amber);
margin: 0 0 1rem;
}
.site-footer .canardises-footer__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
/* !important : bat la règle Storefront .site-footer a:not(.button):not(.components-button)
* (spécificité 0,3,1) qui force sinon un gris foncé illisible sur le fond terracotta. */
.site-footer .canardises-footer__nav a {
font-size: 0.9rem;
color: rgba(242, 231, 223, 0.82) !important;
text-decoration: none;
}
.site-footer .canardises-footer__nav a:hover {
color: var(--cdv-cream) !important;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.site-footer .canardises-footer__where address {
font-style: normal;
display: grid;
gap: 0.25rem;
font-size: 0.9rem;
line-height: 1.6;
color: rgba(242, 231, 223, 0.62);
}
.site-footer .canardises-footer__credit {
border-top: 1px solid rgba(242, 231, 223, 0.18);
padding-top: 1.25rem;
margin: 0;
font-size: 0.78rem;
color: rgba(242, 231, 223, 0.55);
}
/* Ancien rappel de liens légaux (B7) — conservé si un thème/contexte
* l'affiche encore ailleurs. */
.canardises-legal-links {
font-family: var(--cdv-font-body);
font-size: 0.82rem;
letter-spacing: 0.02em;
}
.canardises-legal-links a {
color: rgba(242, 231, 223, 0.82);
}
.canardises-legal-links a:hover {
color: var(--cdv-cream);
}
/* Barre de pied mobile Storefront (Mon compte / Recherche / Panier) */
.storefront-handheld-footer-bar {
background-color: var(--cdv-terracotta-deep);
border-top: 1px solid var(--cdv-amber);
}
.storefront-handheld-footer-bar ul li > a,
.storefront-handheld-footer-bar ul li.search .site-search {
color: var(--cdv-cream);
background-color: transparent;
}
.storefront-handheld-footer-bar ul li a::before {
color: var(--cdv-cream);
}
/* ============================================================
* 6. Fil d'Ariane
* ============================================================ */
/* Storefront pose ~1,42em de padding vertical + ~3,7em de marge basse sur
* le conteneur du fil d'Ariane, soit ~80px entre « Accueil › … » et le
* bandeau de session / le contenu. Resserré (retour exploitant 2026-09-02). */
.storefront-breadcrumb {
margin-bottom: 1.25rem;
padding-top: 1rem;
padding-bottom: 0.35rem;
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
font-family: var(--cdv-font-body);
font-size: 0.78rem;
color: var(--cdv-ink-faint);
letter-spacing: 0.01em;
}
.woocommerce-breadcrumb a {
color: var(--cdv-ink-faint);
}
.woocommerce-breadcrumb a:hover {
color: var(--cdv-terracotta);
}
/* ============================================================
* 7. Titre de page (« Boutique », pages légales, À propos…)
* ============================================================ */
.page-title,
.woocommerce-products-header__title,
.entry-header .entry-title {
font-family: var(--cdv-font-display);
font-weight: 400;
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.12;
letter-spacing: -0.02em;
}
/* En-tête de la boutique : le thème parent Storefront pose
* `padding-bottom: 5.99em` (~96px) sous « Boutique », d'où un vide énorme
* avant les onglets famille. On le ramène à la marge sous le bandeau de
* session (1.75rem) pour que l'écart bandeau → « Boutique » et l'écart
* « Boutique » → onglets soient identiques (retour exploitant 2026-09-03).
* Le sélecteur composé reprend celui de woocommerce.css du parent
* (`.storefront-full-width-content .woocommerce-products-header`, sous
* `@media (min-width: 768px)`) : sans lui, sa spécificité l'emporte au
* desktop et le vide reste. */
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
padding-bottom: 1.75rem;
}
/* Sous 768px, le parent ne neutralise plus la marge basse du titre
* (sa règle `h1:last-child { margin-bottom: 0 }` est elle aussi sous
* `@media (min-width: 768px)`) — on la remet à zéro pour que l'écart
* « Boutique » → onglets reste 1.75rem sur mobile comme au desktop. */
.woocommerce-products-header__title {
margin-bottom: 0;
}
/* Pages de contenu (légales, À propos, Contact) : largeur de lecture
* confortable + interlignage, comme un article éditorial.
* Ancré sur `body.page` (et non l'article) : l'ancienne version
* `.page:not(.woocommerce-page) .entry-content` / `.page-template-default …`
* attrapait aussi le Panier et le Checkout — l' y porte la classe
* `page` sans `woocommerce-page`, et ces pages sont en `page-template-default`
* — d'où un formulaire de panier/commande coincé à 46rem (retour exploitant
* 2026-08-31). `body.woocommerce-page` couvre panier / checkout / boutique /
* fiche / compte. */
body.page:not(.woocommerce-page) .entry-content {
max-width: 46rem;
line-height: 1.6;
}
/* Interlignage resserré entre paragraphes / listes du contenu de ces pages
* (Storefront pose 1.41575em) — retour exploitant 2026-09-07 : les pages
* légales (Politique de confidentialité en tête) « aéraient » trop. Règle
* partagée par les 3 pages légales + toute page WP simple. */
body.page:not(.woocommerce-page) .entry-content p,
body.page:not(.woocommerce-page) .entry-content ul,
body.page:not(.woocommerce-page) .entry-content ol {
margin-bottom: 1em;
}
.page .entry-content h2,
.page .entry-content h3 {
margin-top: 1.7em;
}
/* ============================================================
* 8. Onglets famille de la boutique (Shop_Category_Filter) —
* style « pilule » Lovable : filet, remplissage terracotta actif
* ============================================================ */
.canardises-family-tabs {
border-bottom: 1px solid var(--cdv-border);
padding-bottom: 0.85rem;
margin-bottom: 1rem;
}
.canardises-family-tabs a {
border-radius: var(--cdv-radius);
border: 1px solid var(--cdv-border);
background: transparent;
color: var(--cdv-ink-faint);
font-family: var(--cdv-font-body);
font-size: 0.85rem;
font-weight: 400;
padding: 0.5rem 1rem;
}
.canardises-family-tabs a:hover {
background: rgba(215, 167, 116, 0.22);
border-color: var(--cdv-amber);
color: var(--cdv-ink);
}
.canardises-family-tabs a.is-active {
background: var(--cdv-terracotta);
border-color: var(--cdv-terracotta);
color: var(--cdv-cream);
}
.canardises-porc-filter {
font-family: var(--cdv-font-body);
font-size: 0.85rem;
color: var(--cdv-ink-faint);
}
/* Rangée d'outils sous les onglets famille : filtre « sans porc » +
* recherche produit (Shop_Category_Filter). La recherche a été retirée de
* l'en-tête du site pour ne vivre qu'ici (demande exploitant). */
.canardises-shop-tools {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0 0 0.35rem;
}
.canardises-shop-tools .canardises-porc-filter {
margin: 0;
}
.canardises-shop-search {
display: flex;
align-items: stretch;
margin-left: auto;
max-width: 260px;
width: 100%;
}
.canardises-shop-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
border: 1px solid var(--cdv-border-strong);
border-right: none;
border-radius: var(--cdv-radius) 0 0 var(--cdv-radius);
background: var(--cdv-surface);
font-size: 0.85rem;
padding: 0.4rem 0.6rem;
}
.canardises-shop-search button {
flex: 0 0 auto;
border-radius: 0 var(--cdv-radius) var(--cdv-radius) 0;
border: 1px solid var(--cdv-terracotta);
background: var(--cdv-terracotta);
color: var(--cdv-cream);
font-size: 0.78rem;
padding: 0 0.9rem;
cursor: pointer;
}
.canardises-shop-search button:hover {
background: var(--cdv-terracotta-deep);
border-color: var(--cdv-terracotta-deep);
}
@media (max-width: 600px) {
.canardises-shop-search {
margin-left: 0;
max-width: none;
}
}
/* ============================================================
* 9. Grille boutique — carte Lovable (ProductCard.tsx) :
* filet 1px, photo pleine largeur en haut, surtitre famille,
* titre EB Garamond, prix terracotta séparé par un filet.
* Le champ quantité (Loop_Quantity_Field) et le bouton
* « Ajouter au panier » restent en place sous la carte.
* ============================================================ */
/* Grille en CSS Grid (Storefront utilise des floats -> hauteurs de cartes
* inégales, boutons « Ajouter au panier » décalés). Avec une grille, toutes
* les cartes d'une même rangée ont la même hauteur ; en plus, chaque carte
* est une colonne flex avec le prix « collé » en bas et le titre qui réserve
* 2 lignes -> tout est aligné quel que soit le nombre de lignes du nom. */
.woocommerce ul.products:not(.products--fallback),
.woocommerce-page ul.products:not(.products--fallback) {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.75rem 1.5rem;
margin: 0;
}
/* Les 3 paliers responsive doivent reprendre `:not(.products--fallback)`
* de la règle de base — sinon leur spécificité est plus faible et
* `repeat(4, 1fr)` reste appliqué à toutes les largeurs (bug constaté le
* 04/09 : grille à 4 colonnes illisible sur smartphone). */
@media (max-width: 1200px) {
.woocommerce ul.products:not(.products--fallback),
.woocommerce-page ul.products:not(.products--fallback) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
.woocommerce ul.products:not(.products--fallback),
.woocommerce-page ul.products:not(.products--fallback) { grid-template-columns: repeat(2, 1fr); }
}
/* Smartphone : une seule colonne (à 2 colonnes sous ~430px, la carte fait
* ~150px et le sélecteur de quantité `.canardises-qty--loop` déborde). */
@media (max-width: 600px) {
.woocommerce ul.products:not(.products--fallback),
.woocommerce-page ul.products:not(.products--fallback) { grid-template-columns: 1fr; }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
clear: none !important;
display: flex;
flex-direction: column;
background: var(--cdv-surface);
/* Un peu de contraste sur la crème de fond (retour exploitant : « tout est
* blanc ») : filet plus marqué + ombre chaude très douce. On reste loin de
* la « carte app », mais la carte se détache. */
border: 1px solid var(--cdv-border-strong);
border-radius: var(--cdv-radius);
box-shadow: 0 1px 4px rgba(91, 14, 26, 0.05);
padding: 0 0 1.1rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
overflow: hidden;
}
/* Clearfix de Storefront : ::before / ::after sont posés à la fois sur
* `ul.products` ET sur chaque `li.product`. En display:grid, ceux de
* `ul.products` deviennent des éléments de grille -> une case fantôme avant
* le 1er produit (le « trou ») et une après le dernier. On les neutralise. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
content: none;
display: none;
}
.woocommerce ul.products li.product:hover {
border-color: var(--cdv-terracotta);
box-shadow: 0 4px 14px rgba(91, 14, 26, 0.11);
}
/* Zone cliquable (image + titre + prix) : grandit pour occuper la hauteur,
* le prix est poussé en bas -> même position dans toutes les cartes. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.woocommerce ul.products li.product a img {
margin: 0 0 0.9rem;
border-radius: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
/* Noms de produits : Garamond capitales, #5B0E1A — consigne typo
* du 27/08, appliquée grille + fiche. */
font-family: var(--cdv-font-display);
font-weight: 500;
font-size: 1.05rem;
line-height: 1.28;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--cdv-ink);
padding: 0 1.1rem;
margin: 0 0 0.5rem;
/* Réserve 2 lignes pour que le prix (et le bouton) ne bougent pas
* selon la longueur du nom. */
min-height: 2.56em;
}
.woocommerce ul.products li.product .price {
display: block;
margin: auto 1.1rem 0; /* « auto » en haut : colle le prix au bas de la zone cliquable */
padding-top: 0.85rem;
border-top: 1px solid var(--cdv-border);
color: var(--cdv-terracotta);
font-family: var(--cdv-font-body);
font-weight: 400;
font-size: 1rem;
}
.woocommerce ul.products li.product .price del {
color: var(--cdv-ink-faint);
}
.woocommerce ul.products li.product .price ins {
text-decoration: none;
font-weight: 500;
}
/* Champ quantité + bouton d'ajout : alignés, avec une gouttière propre */
.woocommerce ul.products li.product .quantity,
.woocommerce ul.products li.product .canardises-loop-qty {
margin: 0.9rem 1.1rem 0;
}
.woocommerce ul.products li.product .quantity input.qty {
border: 1px solid var(--cdv-border-strong);
border-radius: var(--cdv-radius);
padding: 0.4rem 0.5rem;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
display: block;
margin: 0.6rem 1.1rem 0;
text-align: center;
}
/* Badge ❄️ en superposition — laissé à canardises-shop.css (A18), on
* ajuste seulement la teinte de la pastille pour coller à la charte. */
.woocommerce ul.products li.product .canardises-frais-badge {
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--cdv-border-soft);
}
/* Compteur « N résultats » + tri : discrets */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
font-family: var(--cdv-font-body);
font-size: 0.82rem;
color: var(--cdv-ink-faint);
}
/* Rangée « N résultats + tri » de Storefront : par défaut
* `.storefront-sorting` réserve ~2.6em sous la rangée avant la 1re ligne de
* produits, ce qui rend toute la zone onglets/filtre/tri trop aérée
* (retour exploitant 2026-09-02). On resserre l'écart avant la grille et
* on rabote le padding vertical des deux blocs. */
.woocommerce .storefront-sorting {
margin-bottom: 0.6rem;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
padding-top: 0;
padding-bottom: 0;
}
/* Champ de recherche + menu de tri : rangées moins hautes pour resserrer
* l'ensemble avant la grille. */
.canardises-shop-search input[type="search"],
.canardises-shop-search button,
.woocommerce .woocommerce-ordering select {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
line-height: 1.3;
}
/* ============================================================
* 10. Bandeau de rappel de session (Session_Frontend::render_session_banner)
* Mise en page reprise du composant SessionBanner de Lovable
* (retour exploitant 2026-09-02) : une seule rangée au desktop —
* bloc gauche « surtitre + nom du réseau (+ pastille PRO) », bloc
* droit « colonnes Clôture des commandes / Livraison ».
* Le PHP rend des classes (build_session_banner) — pas de style inline.
*
* Retour exploitant 2026-09-03 : la version « lavis terracotta très
* pâle » passait inaperçue — le client doit voir tout de suite qu'il
* est sur une boutique dédiée. Fond terracotta plein + texte crème +
* liseré ambre à gauche : le bandeau se détache franchement de la page.
* ============================================================ */
.canardises-session-banner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem 2.5rem;
background: var(--cdv-terracotta);
border: 1px solid var(--cdv-terracotta-deep);
border-left: 5px solid var(--cdv-amber);
border-radius: var(--cdv-radius);
color: var(--cdv-cream);
padding: 1.1rem 1.5rem;
margin: 0 0 1.75rem;
text-align: left;
}
.canardises-session-banner__main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.3rem;
flex: 1 1 auto;
min-width: 0;
}
.canardises-session-banner__label {
font-family: var(--cdv-font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cdv-cream);
margin: 0;
}
.canardises-session-banner__title {
font-family: var(--cdv-font-display);
font-size: 1.2rem;
line-height: 1.25;
color: var(--cdv-cream);
margin: 0;
}
/* Pastille PRO + rappel « prix HT » sur une même ligne (condensé). */
.canardises-session-banner__proline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.6rem;
margin-top: 0.25rem;
}
.canardises-session-banner__pro {
font-family: var(--cdv-font-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cdv-terracotta-deep);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.92);
border-radius: 999px;
padding: 0.15rem 0.6rem;
}
.canardises-session-banner__ht {
font-family: var(--cdv-font-body);
font-size: 0.78rem;
color: rgba(242, 231, 223, 0.85);
}
/* Bloc droit : colonnes étiquetées, valeurs alignées à droite au desktop. */
.canardises-session-banner__meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 2.25rem;
flex: 0 0 auto;
text-align: right;
}
.canardises-session-banner__meta-col {
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.canardises-session-banner__meta-label {
font-family: var(--cdv-font-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(242, 231, 223, 0.72);
}
.canardises-session-banner__meta-value {
font-family: var(--cdv-font-display);
font-size: 0.98rem;
line-height: 1.3;
color: var(--cdv-cream);
}
/* Sous ~680px : le bloc droit passe sous le bloc gauche, aligné à gauche,
* ses deux colonnes côte à côte. */
@media (max-width: 680px) {
.canardises-session-banner__meta {
width: 100%;
text-align: left;
gap: 0.4rem 2rem;
}
}
/* Bouton « Quitter la boutique dédiée » (2026-09-04, demande exploitant) —
* en bas à droite du bandeau. `flex: 0 0 100%` sur .__actions le force à
* passer à la ligne suivante dans le flex-wrap du bandeau
* (.canardises-session-banner), sans toucher au HTML existant de
* __main/__meta au-dessus (une simple rangée, inchangée). */
.canardises-session-banner__actions {
flex: 0 0 100%;
text-align: right;
}
.canardises-session-banner__leave {
display: inline-block;
font-family: var(--cdv-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--cdv-cream);
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
padding: 0.3rem 0.85rem;
text-decoration: none;
transition: background 0.15s ease;
}
.canardises-session-banner__leave:hover,
.canardises-session-banner__leave:focus {
background: rgba(255, 255, 255, 0.28);
color: var(--cdv-cream);
}
@media (max-width: 680px) {
.canardises-session-banner__actions {
text-align: left;
}
}
/* Variante « récap » sur la page Commande reçue : même composant, surtitre
* plus neutre (le PHP passe un libellé dédié). */
.canardises-session-banner--recap {
margin: 0 0 1.5rem;
}
.canardises-session-banner--recap .canardises-session-banner__label {
color: rgba(242, 231, 223, 0.8);
}
/* Suffixe « (HT) » derrière un prix PRO — fiche, grille boutique et
* colonne « Prix » du panier.
* .canardises-price-tax-mention : mention « TTC » / « HT » ajoutée après le
* prix de la grille et de la fiche produit (C28, 2026-09-07) — même repère
* visuel discret. */
.canardises-ht-suffix,
.canardises-price-tax-mention {
font-size: 0.78em;
font-weight: 400;
color: var(--cdv-ink-soft);
white-space: nowrap;
}
/* ============================================================
* 11. Fiche produit — l'ossature vit dans canardises-product.css
* (rail collant + encarts). Les remaps de tokens en tête de ce
* fichier + la bascule de police (voir canardises-product.css,
* "Fraunces" -> var(--cdv-font-display)) suffisent à la reskinner.
* Ici, seuls quelques ajustements sur le bloc prix / bouton
* natif WooCommerce du haut de fiche.
* ============================================================ */
.single-product div.product .price,
.single-product div.product p.price {
font-family: var(--cdv-font-display);
font-weight: 500;
color: var(--cdv-terracotta);
font-size: 1.9rem;
}
/* Sur la fiche, le prix est grand (1.9rem) : le 0.78em du suffixe « TTC » /
* « (HT) » y devient trop imposant. On le réduit au niveau de la fiche
* seulement (la grille garde le 0.78em, qui y est bien dosé). */
.single-product div.product .price .canardises-ht-suffix,
.single-product div.product .price .canardises-price-tax-mention {
font-size: 0.55em;
}
/* Nom du produit sur la fiche : Garamond capitales, #5B0E1A (idem grille). */
.single-product .product_title,
.single-product .entry-title {
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--cdv-ink);
}
/* Exception « Conseils de dégustation » : Garamond italique, #5B0E1A —
* consigne typo du 27/08. Isolé du reste du texte courant (Avant Garde).
* Le PHP (Product_Fiche::render_degustation) ajoute la classe
* .canardises-encart--degustation sur la section. */
.canardises-encart--degustation .canardises-encart-body,
.canardises-encart--degustation .canardises-encart-body p {
font-family: var(--cdv-font-display);
font-style: italic;
font-size: 1.08rem;
line-height: 1.6;
color: var(--cdv-ink);
}
.single-product div.product form.cart .button {
padding: 0.9rem 2rem;
}
.single-product div.product .quantity input.qty {
border: 1px solid var(--cdv-border-strong);
border-radius: var(--cdv-radius);
}
/* ============================================================
* 12. Panier & Commande — WooCommerce natif reskinné
* ============================================================ */
.woocommerce table.shop_table {
border: 1px solid var(--cdv-border);
border-radius: var(--cdv-radius);
}
.woocommerce table.shop_table th {
font-family: var(--cdv-font-body);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cdv-ink);
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table_responsive tr td {
border-top: 1px solid var(--cdv-border-soft);
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
background: var(--cdv-surface);
border: 1px solid var(--cdv-border);
border-radius: var(--cdv-radius);
padding: 1.25rem 1.5rem;
}
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce form.checkout h3 {
font-family: var(--cdv-font-display);
font-weight: 400;
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
color: var(--cdv-terracotta);
font-weight: 600;
}
/* Encarts d'info WooCommerce (message panier, coupon, etc.) */
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
.woocommerce .woocommerce-info {
border-top-color: var(--cdv-terracotta);
background-color: var(--cdv-terracotta-soft);
color: var(--cdv-ink);
}
.woocommerce-info::before,
.woocommerce-message::before {
color: var(--cdv-terracotta);
}
/* Bandeau d'erreur de validation (champs vides au checkout, etc.). Storefront
* le rend en texte blanc sur fond coloré ; on garde le fond crème teinté de la
* charte, mais il faut alors forcer le texte + l'icône en bordeaux foncé,
* sinon le client lit du blanc sur crème = illisible (retour exploitant
* 2026-09-02). Filet gauche terracotta foncé pour le signaler comme une
* erreur sans sortir de la palette. */
.woocommerce-error {
border-top-color: var(--cdv-terracotta-deep);
border-left: 3px solid var(--cdv-terracotta-deep);
background-color: var(--cdv-terracotta-soft);
color: var(--cdv-ink);
}
.woocommerce-error li {
color: var(--cdv-ink);
border-bottom-color: var(--cdv-border);
}
.woocommerce-error li a,
.woocommerce-error li strong {
color: var(--cdv-terracotta-deep);
}
.woocommerce-error::before {
color: var(--cdv-terracotta-deep);
}
/* --- Panier en blocs WooCommerce (/cart/ n'est PAS le shortcode classique,
* contrairement au checkout — voir Force_Classic_Checkout). Le balisage
* est en classes .wc-block-* ; on reprend la même logique visuelle que
* l'order review du checkout : colonne de totaux en panneau à filet. --- */
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title {
font-family: var(--cdv-font-display);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--cdv-ink);
}
.wp-block-woocommerce-cart .wc-block-cart__sidebar > .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
background: var(--cdv-surface);
border: 1px solid var(--cdv-border);
border-radius: var(--cdv-radius);
padding: 1.25rem 1.5rem;
}
.wc-block-cart-items__header {
font-family: var(--cdv-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cdv-ink-faint);
border-bottom: 1px solid var(--cdv-border);
}
.wc-block-cart-items__row {
border-top: 1px solid var(--cdv-border-soft);
}
.wc-block-components-product-name {
font-family: var(--cdv-font-body);
font-weight: 500;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-item--total .wc-block-components-totals-item__value {
color: var(--cdv-terracotta);
font-weight: 600;
}
.wc-block-components-quantity-selector {
border: 1px solid var(--cdv-border-strong);
border-radius: var(--cdv-radius);
}
.wc-block-components-quantity-selector__button {
color: var(--cdv-ink-soft);
}
/* Anti-bot checkout (Frontend\Checkout_Antibot, retour Ablink 2026-09-12) :
* pot de miel hors écran — même technique que le formulaire de contact
* (assets/css/canardises-contact-form.css, .cdv-cf-hp). */
.cdv-co-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.cdv-co-turnstile,
.cdv-cf-turnstile {
margin: 16px 0;
}
/* Étapes / champs du checkout par canal (Checkout_Fields) : hérite des
* styles de champ génériques ci-dessus ; on soigne juste les titres et la
* case « Je souhaite une facture ». */
.woocommerce form .form-row label,
.woocommerce-checkout .form-row label {
font-family: var(--cdv-font-body);
font-size: 0.9rem;
color: var(--cdv-ink-soft);
}
/* Champs radio du checkout par canal (Checkout_Fields) :
* - « Expédition / Retrait en personne » (.canardises-public-fulfillment-field) ;
* - « Adresse de facturation » révélé quand « Je souhaite une facture » est
* coché en Expédition (.canardises-billing-mode-field).
* Storefront rend le