. On reporte, y compris la variante ghost. */
.cr-refonte .cr-btn .elementor-button {
display: inline-flex; align-items: center; justify-content: center;
background: var(--rouge); color: var(--creme); border: none; border-radius: 4px;
font: 600 .95rem/1 var(--sans); text-decoration: none; padding: 14px 24px;
transition: transform .15s ease, box-shadow .15s ease;
}
.cr-refonte .cr-btn .elementor-button:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(182,19,21,.3); color: var(--creme); }
.cr-refonte .cr-btn.ghost .elementor-button { background: transparent; color: var(--creme); border: 1.5px solid rgba(255,248,232,.45); }
.cr-refonte .cr-btn.ghost .elementor-button:hover { box-shadow: none; border-color: var(--creme); transform: translateY(-1px); }
.cr-refonte .cr-cta-center { align-items: center; margin-top: 34px; }
/* 7. Paragraphes courants rendus par text-editor. */
.cr-refonte .pitch .elementor-widget-container > p { color: rgba(255,248,232,.78); margin: 0; max-width: 46ch; }
.cr-refonte .pitch { margin: 18px 0 8px; }
.cr-refonte .cr-etape-txt .elementor-widget-container > p { margin: 0; font-size: .9rem; color: var(--texte-doux); }
.cr-refonte .cr-etape-txt .elementor-widget-container > p b { color: var(--brun); }
.cr-refonte .cr-avis-txt .elementor-widget-container > p { margin: 0; font-size: .92rem; color: var(--texte); }
.cr-refonte .cr-avis-appel .elementor-widget-container > p b { color: var(--brun); }
.cr-refonte .cr-avis-lien .elementor-widget-container > p { margin: 0; }
.cr-refonte .cr-avis-lien a { color: var(--rouge); font-weight: 600; font-size: .9rem; text-decoration: none; }
.cr-refonte .cr-ludo-txt .elementor-widget-container > p { color: var(--texte-doux); max-width: 52ch; margin: 0; }
.cr-refonte .cr-citation blockquote {
margin: 22px 0; padding: 0 0 0 18px; border-left: 3px solid var(--rouge);
font-family: var(--slab); font-size: 1.05rem; color: var(--brun);
}
.cr-refonte .cr-signature { margin-top: 24px; }
.cr-refonte .cr-signature .elementor-widget-container > p { margin: 0; }
.cr-refonte .cr-qui { margin-top: auto; }
/* 8. Colonnes internes : un conteneur neutre qui empile ses widgets. */
.cr-refonte .cr-col { display: flex; flex-direction: column; align-items: flex-start; }
/* 9. Bande reassurance : chaque item est un conteneur flex (icone + texte). */
.cr-refonte .reassurance .item { flex-direction: row; }
.cr-refonte .reassurance .item .elementor-widget-html { display: flex; flex: none; }
/* 10. Le widget image porte la classe : c'est le ![]()
interne qu'on stylise. */
.cr-refonte .portrait-img img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 10px; }
/* 11. La preuve d'avis du hero s'aligne en ligne. */
.cr-refonte .hero .preuve { flex-direction: row; }
/* 12. Correctifs post-comparaison pixel avec la maquette (2026-07-28).
Elementor pose flex-direction:column et align-items:center par defaut
sur les conteneurs : les deux cassaient la maquette. */
.cr-refonte .hero .ctas { flex-direction: row; }
.cr-refonte .etape { align-items: stretch; }
/* =========================================================================
13. Pages liste / conseils / revendeur en widgets natifs (2026-07-28)
========================================================================= */
/* Fil d'ariane rendu par un text-editor : la classe .fil est sur le wrapper. */
.cr-refonte .cr-fil .elementor-widget-container > p { margin: 0; font: inherit; color: inherit; }
/* Bandeau "interlude" : la classe porte le fond et le centrage, le p n'ajoute rien. */
.cr-refonte .cr-interlude .elementor-widget-container { width: 100%; }
.cr-refonte .cr-interlude .elementor-widget-container > p { margin: 0; font: inherit; color: inherit; text-align: center; }
.cr-refonte .cr-interlude b { font-family: var(--slab); }
.cr-refonte .cr-interlude-bas { margin: 40px 0 10px; }
.cr-refonte .cr-interlude a { color: var(--rouge); font-weight: 600; text-decoration: none; }
/* En-tete de la page liste. */
.cr-refonte .cr-liste-h1 .elementor-heading-title { font-family: var(--slab); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; color: var(--brun); margin: 0; }
.cr-refonte .cr-liste-chapo .elementor-widget-container > p { color: var(--texte-doux); max-width: 60ch; margin: 12px 0 0; }
/* La grille "Nos origines" tient sur 2 colonnes (5 encarts, pas 3). */
.cr-refonte .cr-grille-2 { grid-template-columns: repeat(2, 1fr); }
/* Encarts d'origine : titre + accroche coloree. */
.cr-refonte .cr-box-h3 .elementor-heading-title { font-family: var(--slab); font-size: .95rem; font-weight: 700; color: var(--brun); margin: 0 0 10px; }
.cr-refonte .cr-box-h3 .elementor-heading-title span { color: var(--rouge); }
.cr-refonte .cr-box-txt .elementor-widget-container > p { margin: 0; color: var(--texte-doux); font-size: .9rem; }
/* En-tete de la page conseils. */
.cr-refonte .cr-page-h1 .elementor-heading-title { font-family: var(--slab); font-weight: 700; color: var(--brun); font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0; }
.cr-refonte .cr-page-chapo .elementor-widget-container > p { color: var(--texte-doux); margin: 14px 0 0; }
/* Page revendeur. */
.cr-refonte .cr-eyebrow-or .elementor-heading-title { color: var(--or); }
/* Le sur-titre a 14px de respiration sous lui dans la maquette. Le reset des
marges de widget Elementor les avalait : meme piege que les titres de
section, propriete logique et specificite (0,4,0). */
.cr-refonte .elementor-widget.elementor-widget.eyebrow { margin-block-end: 14px; }
.cr-refonte .bande-sombre .cr-h1 .elementor-heading-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); letter-spacing: normal; }
.cr-refonte .cr-pro-txt .elementor-widget-container > p { color: rgba(255,248,232,.78); max-width: 52ch; margin: 16px 0 22px; }
.cr-refonte .cr-media-ph .elementor-widget-container { display: flex; align-items: center; justify-content: center; height: 100%; }
.cr-refonte .cr-media-ph .elementor-widget-container > p { margin: 0; font: inherit; color: inherit; }
/* Bloc d'inscription a la lettre, en bas de la page Conseils. Meme formulaire
et meme action ParPigeon que celui du pied de page, mais sur fond clair : les
couleurs du pied de page sont pensees pour du brun. Encadre en pointilles
comme les cartes d'appel de la maquette, pour qu'il se distingue des articles
sans se prendre pour l'un d'eux. */
.cr-refonte .cr-news-conseils {
border: 1.5px dashed rgba(49,31,21,.25); border-radius: var(--radius);
padding: 30px 32px; margin: 34px 0 40px;
display: flex; flex-direction: column; gap: 10px;
}
.cr-refonte .cr-news-conseils .cr-h2 .elementor-heading-title { font-size: 1.25rem; }
.cr-refonte .cr-news-txt .elementor-widget-container > p {
margin: 0; font-size: .9rem; color: var(--texte-doux);
/* Pas de limite a 60ch ici : la phrase tient sur une ligne dans ce bloc, et
la limite la coupait apres « Un email par », en laissant « trimestre, pas
plus » seul sur la ligne suivante. text-wrap: balance repartit les lignes
de facon egale quand l'ecran est trop etroit pour tout tenir. */
max-width: none;
text-wrap: balance;
}
.cr-refonte .cr-news-form-clair { margin-top: 8px; max-width: 520px; }
@media (max-width: 600px) {
.cr-refonte .cr-news-conseils { padding: 24px 20px; }
}
/* =========================================================================
PAGE « A PROPOS » (2026-07-29)
Le texte de cette page est celui qui etait deja en ligne, mot pour mot : il
est ecrit pour le referencement et n'a pas ete retouche. Seule la mise en
page change. Un texte de cette longueur en colonne unique fait un mur : on
alterne donc les traitements d'une section a l'autre.
========================================================================= */
.cr-refonte .cr-ap-sur .elementor-heading-title {
font-family: var(--slab); font-weight: 700; font-size: 1.05rem; color: var(--or); margin: 14px 0 0;
}
.cr-refonte .cr-ap-intro .elementor-widget-container > p {
color: rgba(255,248,232,.8); font-size: .98rem; margin: 0 0 10px; max-width: 46ch;
}
.cr-refonte .cr-ap-intro .elementor-widget-container > p:last-child { margin-bottom: 0; }
.cr-refonte .cr-ap-intro { margin-block-start: 18px; }
.cr-refonte .cr-ap-intro a { color: var(--or); }
.cr-refonte .cr-ap-photo-hero img {
width: 100%; height: 340px; object-fit: cover; border-radius: var(--radius); display: block;
}
/* Video : remontee juste sous l'en-tete, la ou elle a le plus de chances d'etre
vue. C'est la seule prise de parole en images de Ludovic sur le site. */
.cr-refonte.cr-ap-video > .e-con-inner { padding-top: 40px; padding-bottom: 0; }
.cr-refonte .cr-ap-video-cadre .elementor-wrapper { border-radius: var(--radius); overflow: hidden; }
.cr-refonte.cr-ap-sec > .e-con-inner { padding-top: 52px; padding-bottom: 0; }
.cr-refonte .cr-ap-h2 .elementor-heading-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.cr-refonte .elementor-widget.elementor-widget.cr-ap-h2 { margin-block-end: 18px; }
.cr-refonte .cr-ap-corps .elementor-widget-container > p { margin: 0 0 14px; max-width: 60ch; }
.cr-refonte .cr-ap-corps .elementor-widget-container > p:last-child { margin-bottom: 0; }
.cr-refonte .cr-ap-corps .elementor-widget-container > ul { margin: 0 0 14px; padding-left: 20px; }
.cr-refonte .cr-ap-corps li { margin-bottom: 4px; }
/* Deux colonnes : le texte garde une largeur de lecture confortable et la photo
occupe le reste. C'est ce qui casse le mur sans toucher aux mots. */
.cr-refonte .cr-ap-duo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 46px; align-items: center; }
.cr-refonte .cr-ap-duo-inverse > .cr-ap-photo { order: -1; }
.cr-refonte .cr-ap-photo img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius); display: block; }
/* Blocs de texte seul : titre a gauche, texte a droite.
Sans cette grille, le texte gardait sa largeur de lecture (541px) dans un
bloc large de 1032px, laissant 411px de vide a droite : on croyait qu'une
image manquait. Le titre en colonne laterale occupe cette place et sert de
repere, sans qu'on ait a inventer un visuel. */
.cr-refonte .cr-ap-encadre,
.cr-refonte .cr-ap-contraste,
.cr-refonte.cr-ap-texte-seul > .e-con-inner {
display: grid; grid-template-columns: 1fr 1.7fr; gap: 44px; align-items: start;
}
.cr-refonte .cr-ap-encadre .cr-ap-corps .elementor-widget-container > p,
.cr-refonte .cr-ap-contraste .cr-ap-corps .elementor-widget-container > p,
.cr-refonte.cr-ap-texte-seul .cr-ap-corps .elementor-widget-container > p { max-width: none; }
/* Le titre ne pousse plus le texte vers le bas : il vit dans sa colonne. */
.cr-refonte .cr-ap-encadre .cr-ap-h2,
.cr-refonte .cr-ap-contraste .cr-ap-h2,
.cr-refonte.cr-ap-texte-seul .cr-ap-h2 { margin-block-end: 0; }
/* La section sur le geste est isolee dans un encadre : elle raconte le metier. */
.cr-refonte .cr-ap-encadre { background: var(--or-clair); border-radius: var(--radius); padding: 38px 40px; }
/* Celle qui prend position face a l'industriel passe sur fond sombre. */
.cr-refonte .cr-ap-contraste {
background: var(--brun); border-radius: var(--radius); padding: 40px 42px;
}
.cr-refonte .cr-ap-contraste .cr-ap-h2 .elementor-heading-title { color: var(--creme); }
.cr-refonte .cr-ap-contraste .cr-ap-corps .elementor-widget-container > p { color: rgba(255,248,232,.82); }
.cr-refonte .cr-ap-contraste strong { color: var(--or); }
/* La signature ferme la page : elle se lit d'un bloc, centree, plutot qu'en
colonnes. C'est une conclusion, pas une section d'information. */
.cr-refonte .cr-ap-signature {
background: var(--brun-fonce); border-radius: var(--radius); padding: 52px 46px;
text-align: center;
}
.cr-refonte .cr-ap-signature .cr-ap-mots .elementor-widget-container > p {
max-width: 66ch; margin-left: auto; margin-right: auto;
}
.cr-refonte .cr-ap-mots .elementor-widget-container > p { color: rgba(255,248,232,.78); margin: 0 0 16px; max-width: 62ch; }
.cr-refonte .cr-ap-mots .elementor-widget-container > p:last-child { margin-bottom: 0; }
/* Les trois mots ouvrent le bloc : ils meritent la taille d'un titre. */
.cr-refonte .cr-ap-mots .elementor-widget-container > p:first-child {
font-family: var(--slab); font-weight: 700; color: var(--creme);
font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.25; margin-bottom: 18px;
}
.cr-refonte .cr-ap-mots a { color: var(--or); }
.cr-refonte .cr-ap-mots strong { color: var(--creme); }
.cr-refonte .cr-ap-galerie img { border-radius: var(--radius); }
.cr-refonte.cr-ap-final > .e-con-inner { padding-top: 44px; padding-bottom: 64px; text-align: center; }
@media (max-width: 860px) {
.cr-refonte .cr-ap-encadre,
.cr-refonte .cr-ap-contraste,
.cr-refonte.cr-ap-texte-seul > .e-con-inner { grid-template-columns: 1fr; gap: 18px; }
.cr-refonte .cr-ap-duo { grid-template-columns: 1fr; gap: 26px; }
.cr-refonte .cr-ap-duo-inverse > .cr-ap-photo { order: 0; }
.cr-refonte .cr-ap-encadre,
.cr-refonte .cr-ap-contraste,
.cr-refonte .cr-ap-signature { padding: 28px 24px; }
.cr-refonte .cr-ap-photo-hero img { height: 240px; }
}
/* =========================================================================
PAGE CONSEILS : article a la une, filtres, cartes (2026-07-29)
========================================================================= */
/* L'article a la une reprend le bloc sombre de la maquette. C'est un lien
entier, pas un titre cliquable : la cible tactile fait tout le bloc. */
.cr-refonte .cr-une {
display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
background: var(--brun); color: var(--creme);
border-radius: var(--radius); padding: 30px 32px; margin: 26px 0 30px;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease;
}
.cr-refonte .cr-une:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(49,31,21,.2); }
.cr-refonte .cr-une .eyebrow { color: var(--or); display: block; margin-bottom: 10px; }
.cr-refonte .cr-une h2 { color: var(--creme); font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: 0 0 12px; }
.cr-refonte .cr-une p { color: rgba(255,248,232,.78); font-size: .92rem; margin: 0 0 12px; }
.cr-refonte .cr-une-meta { font-size: .8rem; color: rgba(255,248,232,.6); }
.cr-refonte .cr-une-visuel { display: block; border-radius: 8px; overflow: hidden; }
.cr-refonte .cr-une-visuel img { display: block; width: 100%; height: 200px; object-fit: cover; }
/* Filtres : des boutons ici, et non des liens, puisque le tri se fait dans la
page sans changer d'adresse. */
.cr-refonte .cr-filtres-conseils { padding: 0 0 26px; }
.cr-refonte .cr-filtres-conseils .pill {
font: 500 0.9rem/1 var(--sans); color: var(--brun); background: #fff;
border: 1.5px solid rgba(49,31,21,.18); border-radius: 100px;
padding: 11px 20px; cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.cr-refonte .cr-filtres-conseils .pill:hover { border-color: var(--brun); }
.cr-refonte .cr-filtres-conseils .pill.on { background: var(--brun); color: var(--creme); border-color: var(--brun); }
/* Cartes d'articles : meme cadre que les cartes produit, pour que le site ait
une seule facon de presenter une carte. */
.cr-refonte .cr-articles .elementor-post__card {
background: #fff; border: 1px solid rgba(49,31,21,.1);
border-radius: var(--radius); overflow: hidden; box-shadow: none;
transition: transform .15s ease, box-shadow .15s ease;
}
.cr-refonte .cr-articles .elementor-post__card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(49,31,21,.12); }
.cr-refonte .cr-articles .elementor-post__title,
.cr-refonte .cr-articles .elementor-post__title a {
font-family: var(--slab); font-weight: 700; color: var(--brun); font-size: 1.02rem; line-height: 1.3;
}
.cr-refonte .cr-articles .elementor-post__excerpt p { font-size: .86rem; color: var(--texte-doux); }
.cr-refonte .cr-articles .elementor-post__badge {
background: var(--brun); color: var(--creme);
font: 600 .68rem/1 var(--sans); text-transform: uppercase; letter-spacing: .08em;
border-radius: 100px; padding: 7px 12px;
}
.cr-refonte .cr-articles .elementor-post__meta-data { font-size: .78rem; color: var(--texte-doux); }
.cr-refonte .cr-articles .elementor-post[hidden] { display: none; }
@media (max-width: 860px) {
.cr-refonte .cr-une { grid-template-columns: 1fr; padding: 24px; }
.cr-refonte .cr-une-visuel { order: -1; }
}
/* =========================================================================
ARTICLES DE CONSEILS (2026-07-29)
Le gabarit d'article n'avait jamais ete repris depuis la refonte : il servait
encore l'ancien dessin, fil d'ariane sous le titre et corps pleine largeur.
========================================================================= */
.cr-refonte.cr-art-entete > .e-con-inner { padding-top: 20px; padding-bottom: 8px; }
/* Fil d'ariane des articles : le dernier maillon repete le titre de l'article,
qui figure en H1 juste dessous. Avec des titres de cette longueur, le fil
passait sur deux lignes et venait coller le sur-titre de categorie. On le
masque a l'affichage seulement : il reste dans le HTML et dans le balisage
BreadcrumbList que Google lit. */
.cr-refonte .cr-fil .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-refonte .cr-fil .breadcrumb-item:last-child { display: none; }
/* Le separateur est un ::after pose sur chaque maillon, avec un tiret. On le
passe au chevron de la maquette, et on retire celui de l'avant-dernier
maillon : il pendait dans le vide depuis que le dernier est masque. */
.cr-refonte .cr-fil .breadcrumb-item::after { content: '›'; margin-left: 6px; color: var(--texte-doux); }
.cr-refonte .cr-fil .breadcrumb-item:nth-last-child(2)::after { content: none; }
.cr-refonte .cr-art-cat { margin-bottom: 12px; }
.cr-refonte .cr-art-cat .elementor-post-info__item,
.cr-refonte .cr-art-cat a {
font: 600 0.72rem/1 var(--sans); text-transform: uppercase; letter-spacing: .18em;
color: var(--rouge); text-decoration: none;
}
/* Le titre respire sous le fil d'ariane, qui n'est plus double par un
sur-titre de categorie. */
.cr-refonte .cr-art-entete .cr-page-h1 { margin-top: 18px; }
/* 22ch etait bien trop court : le titre de l'article expresso tombait sur trois
lignes alors qu'il tient en deux. La maquette limite l'en-tete d'article a
70ch, ce qui laisse respirer le titre sans lui faire traverser toute la page
(une ligne trop longue se lit mal). */
.cr-refonte .cr-art-entete .cr-page-h1 .elementor-heading-title,
.cr-refonte .cr-art-entete .cr-art-chapo { max-width: 44ch; }
.cr-refonte .cr-art-chapo {
color: var(--texte-doux); max-width: 70ch; margin: 12px 0 0; font-size: 1.02rem;
}
/* Image a la une : meme arrondi que les photos produit. */
.cr-refonte.cr-art-visuel > .e-con-inner { padding-top: 24px; padding-bottom: 0; }
.cr-refonte .cr-art-image img {
display: block; width: 100%; max-height: 420px; object-fit: cover;
border-radius: 12px;
}
/* Deux colonnes : sommaire a gauche, texte a droite. */
.cr-refonte.cr-art-layout > .e-con-inner {
display: grid; grid-template-columns: 220px 1fr; gap: 48px;
align-items: start; padding-top: 30px; padding-bottom: 40px;
}
/* La colonne du sommaire n'existe visuellement que si le script y a bien
depose le sommaire de l'article. Sinon elle disparait et le texte reprend
toute la largeur, plutot que de laisser une colonne vide. */
.cr-refonte .cr-sommaire { display: none; }
.cr-refonte .cr-sommaire.cr-sommaire-rempli {
display: flex; flex-direction: column; gap: 10px;
position: sticky; top: 20px;
border-left: 2px solid rgba(49,31,21,.12); padding-left: 18px; font-size: .84rem;
}
.cr-refonte .cr-sommaire ol,
.cr-refonte .cr-sommaire ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 10px;
}
.cr-refonte .cr-sommaire a { color: var(--texte-doux); text-decoration: none; }
.cr-refonte .cr-sommaire a:hover { color: var(--rouge); }
.cr-refonte .cr-sommaire .t {
font: 600 .7rem/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--brun);
}
.cr-refonte .cr-art-corps { max-width: 68ch; }
.cr-refonte .cr-art-corps h2 { font-size: 1.3rem; margin: 34px 0 12px; }
.cr-refonte .cr-art-corps h3 { font-size: 1.05rem; margin: 24px 0 10px; }
.cr-refonte .cr-art-corps p { margin: 0 0 16px; }
.cr-refonte .cr-art-corps ul,
.cr-refonte .cr-art-corps ol { margin: 0 0 16px; padding-left: 20px; }
.cr-refonte .cr-art-corps li { margin-bottom: 6px; }
.cr-refonte .cr-art-corps img { max-width: 100%; height: auto; border-radius: 10px; }
.cr-refonte .cr-art-corps table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: .9rem; }
.cr-refonte .cr-art-corps th,
.cr-refonte .cr-art-corps td { border: 1px solid rgba(49,31,21,.12); padding: 10px 12px; text-align: left; }
.cr-refonte .cr-art-corps th { background: var(--or-clair); font-weight: 600; color: var(--brun); }
/* Bloc auteur : le portrait remplace le rond en pointilles de la maquette. */
.cr-refonte .cr-auteur .rond {
border: none; background: none; overflow: hidden;
width: 44px; height: 44px; border-radius: 50%;
}
.cr-refonte .cr-auteur .rond img {
width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
.cr-refonte.cr-art-fin > .e-con-inner { padding-top: 0; padding-bottom: 56px; }
/* Encarts produit et lecture. Le visuel de la maquette etait un aplat degrade
faute de photo : on y met la vraie image, recadree au meme gabarit. */
.cr-refonte .cr-encart-guide,
.cr-refonte .cr-encart-lecture {
display: flex; gap: 18px; align-items: center;
background: var(--or-clair); border-radius: var(--radius);
padding: 18px 22px; margin: 26px 0;
}
.cr-refonte .cr-encart-guide .visu,
.cr-refonte .cr-encart-lecture .visu {
flex: none; width: 64px; height: 84px; border-radius: 5px; overflow: hidden;
background: linear-gradient(165deg, var(--kraft), var(--kraft-fonce));
}
.cr-refonte .cr-encart-guide .visu img,
.cr-refonte .cr-encart-lecture .visu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-refonte .cr-encart-guide p,
.cr-refonte .cr-encart-lecture p { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.cr-refonte .cr-encart-guide b,
.cr-refonte .cr-encart-lecture b { color: var(--brun); display: block; font-size: .95rem; margin-bottom: 2px; }
.cr-refonte .cr-btn-encart {
margin-left: auto; flex: none;
background: var(--rouge); color: var(--creme);
font: 600 .85rem/1 var(--sans); padding: 12px 18px; border-radius: 4px;
text-decoration: none; white-space: nowrap;
}
.cr-refonte .cr-btn-encart:hover { background: #8F0F11; color: var(--creme); }
.cr-refonte .cr-btn-sombre { background: var(--brun); }
.cr-refonte .cr-btn-sombre:hover { background: #1a100b; }
/* FAQ depliable. Le H3 reste un H3, a l'interieur du summary : le plan de
titres de l'article, redige pour le referencement, n'est pas modifie. */
.cr-refonte .cr-faq {
background: #fff; border: 1px solid rgba(49,31,21,.1); border-radius: 8px;
padding: 4px 20px; margin-bottom: 10px;
}
.cr-refonte .cr-faq summary {
cursor: pointer; list-style: none; padding: 14px 0;
display: flex; align-items: center; gap: 12px;
}
.cr-refonte .cr-faq summary::-webkit-details-marker { display: none; }
.cr-refonte .cr-faq summary h3 {
font: 600 .95rem/1.4 var(--sans); color: var(--brun); margin: 0; flex: 1;
}
.cr-refonte .cr-faq summary::after {
content: '+'; flex: none; font: 400 1.3rem/1 var(--sans); color: var(--rouge);
transition: transform .15s ease;
}
.cr-refonte .cr-faq[open] summary::after { content: '−'; }
.cr-refonte .cr-faq > *:not(summary) { font-size: .9rem; color: var(--texte-doux); margin: 0 0 14px; }
.cr-refonte .cr-faq-titre { margin-bottom: 18px; }
.cr-refonte .cr-encart-produit .elementor-widget-container > p { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.cr-refonte .cr-encart-produit b { color: var(--brun); display: block; font-size: .95rem; }
.cr-refonte .cr-encart-produit .cr-btn { margin-left: auto; }
@media (max-width: 860px) {
.cr-refonte.cr-art-layout > .e-con-inner { grid-template-columns: 1fr; gap: 24px; }
.cr-refonte .cr-sommaire.cr-sommaire-rempli { position: static; }
}
/* Espacements des sections de la page revendeur, valeurs de la maquette : la
premiere entre sur 72px, les suivantes s'enchainent en 16 / 30, la derniere
se termine sur 72. La classe .section appliquait 72 des deux cotes partout,
ce qui etirait la page.
POURQUOI EN CSS ET PAS EN REGLAGE ELEMENTOR : le reset de cette feuille remet
a zero les variables --padding-* de tous les conteneurs, donc un padding pose
dans le panneau Elementor reste sans effet ici. Constate le 2026-07-29. */
.cr-refonte.cr-pro-conditions > .e-con-inner { padding-top: 72px; padding-bottom: 30px; }
.cr-refonte.cr-pro-etapes > .e-con-inner { padding-top: 16px; padding-bottom: 30px; }
.cr-refonte.cr-pro-formulaire > .e-con-inner { padding-top: 16px; padding-bottom: 72px; }
/* Photo de l'atelier dans l'en-tete revendeur. La colonne est plus haute que
large, alors qu'une image d'atelier est panoramique : sans recadrage elle
flottait au milieu d'un grand vide sombre. */
.cr-refonte .cr-photo-pro img {
display: block; width: 100%; height: 340px; object-fit: cover;
border-radius: var(--radius);
}
@media (max-width: 860px) {
.cr-refonte .cr-photo-pro img { height: 240px; }
}
.cr-refonte .cr-etape-rouge { border-color: var(--rouge); }
.cr-refonte .cr-shd-txt .elementor-widget-container > p { color: var(--texte-doux); margin: 10px 0 0; }
@media (max-width: 860px) {
.cr-refonte .cr-grille-2 { grid-template-columns: 1fr; }
}
/* =========================================================================
14. Correctifs conteneurs "boxed" et cartes d'articles (2026-07-28)
========================================================================= */
/* GOTCHA (miroir de celui deja connu sur les conteneurs "full") : un conteneur
Elementor en content_width "boxed" insere un .e-con-inner. La classe CSS reste
sur le .e-con externe, mais c'est le .e-con-inner qui aligne reellement les
enfants. Poser display/gap sur la classe seule ne fait donc rien de visible.
Le cas du header est desormais traite par ses reglages natifs (gap 28). */
/* Cartes d'articles (widget Posts, skin cards) aux couleurs de la marque :
par defaut les titres et le "lire la suite" sortaient en bleu lien navigateur. */
.cr-refonte .cr-articles .elementor-post__title { font-family: var(--slab); font-size: 1.05rem; line-height: 1.3; margin: 0 0 10px; }
.cr-refonte .cr-articles .elementor-post__title a { color: var(--brun); text-decoration: none; }
.cr-refonte .cr-articles .elementor-post__title a:hover { color: var(--rouge); }
.cr-refonte .cr-articles .elementor-post__excerpt p { color: var(--texte-doux); font-size: .9rem; margin: 0; }
.cr-refonte .cr-articles .elementor-post__read-more {
color: var(--rouge); font: 600 .82rem/1 var(--sans); text-decoration: none;
text-transform: none; letter-spacing: normal;
}
.cr-refonte .cr-articles .elementor-post__read-more:hover { color: var(--brun); }
.cr-refonte .cr-articles .elementor-post__meta-data { color: var(--texte-doux); font-size: .78rem; }
.cr-refonte .cr-articles .elementor-post__badge { background: var(--brun); color: var(--creme); font: 600 .7rem/1.3 var(--sans); }
.cr-refonte .cr-articles .elementor-post__card { border: 1px solid rgba(49,31,21,.1); border-radius: var(--radius); overflow: hidden; }
/* 15. Debordement horizontal en mobile (2026-07-28).
Le formulaire newsletter du footer debordait la page de 5px a 375px :
les gouttieres du widget Form (margin -5px) ne rentraient pas dans la
colonne etroite. Corrige a la source, dans les reglages du widget
(column_gap 0, row_gap 8) plutot qu'en CSS : Elementor injecte ses
propres regles en fin de page, elles battent cette feuille a
specificite egale. Ne pas retenter de le corriger ici. */
/* 16. Alignement du header sur la grille du contenu (2026-07-28, revu le soir).
Le header n'utilise pas la classe .wrap : il etait decale par rapport au
contenu des pages. Corrige desormais dans le gabarit #1413 lui-meme
(largeur de contenu 1032 px + padding lateral 24), et non plus ici. */
/* 17. Cartes produits WooCommerce aux couleurs de la marque (2026-07-28).
Par defaut les etoiles, les prix et les titres heritaient du bleu de lien.
C'est le point "polish cartes produits" du runbook de mise en ligne. */
.cr-refonte .cr-shop-grid .woocommerce-loop-product__title,
.cr-refonte .cr-shop-grid h2.woocommerce-loop-product__title {
font-family: var(--slab); font-weight: 700; font-size: 1.05rem; color: var(--brun);
margin: 14px 0 6px; padding: 0;
}
.cr-refonte .cr-shop-grid a { color: var(--brun); text-decoration: none; }
.cr-refonte .cr-shop-grid .star-rating,
.cr-refonte .cr-shop-grid .star-rating::before,
.cr-refonte .cr-shop-grid .star-rating span::before { color: var(--etoile); }
.cr-refonte .cr-shop-grid .price,
.cr-refonte .cr-shop-grid .price ins,
.cr-refonte .cr-shop-grid .price .amount,
.cr-refonte .cr-shop-grid .price bdi {
font-family: var(--slab); font-weight: 700; color: var(--brun); font-size: 1rem;
text-decoration: none;
}
.cr-refonte .cr-shop-grid .price del,
.cr-refonte .cr-shop-grid .price del .amount { color: var(--texte-doux); font-weight: 400; }
.cr-refonte .cr-shop-grid .button,
.cr-refonte .cr-shop-grid a.button,
.cr-refonte .cr-shop-grid .add_to_cart_button {
background: var(--rouge); color: var(--creme); border: none; border-radius: 4px;
font: 600 .85rem/1 var(--sans); padding: 12px 18px; display: inline-block;
margin-top: 10px; text-decoration: none;
}
.cr-refonte .cr-shop-grid .button:hover,
.cr-refonte .cr-shop-grid a.button:hover { background: var(--brun); color: var(--creme); }
.cr-refonte .cr-shop-grid img { border-radius: 8px; }
/* Cartes produits WooCommerce au style .carte de la maquette : cadre blanc
borde, coins arrondis, et soulevement au survol. Le fond de la grille etant
creme, sans ce cadre les cartes paraissaient nues.
L'image deborde le padding lateral pour occuper toute la largeur du cadre.
POURQUOI LA CLASSE EST DOUBLEE ICI (2026-07-29, apres la bascule du CSS)
Elementor pose `.elementor-products-grid ul.products.elementor-grid li.product`
sur ces memes cartes, avec exactement la meme specificite (0,4,2) que la
version simple de nos selecteurs. Tant que la feuille etait chargee en
dernier par le theme, elle gagnait a egalite. Depuis qu'elle vit dans le CSS
personnalise d'Elementor, elle est servie en 26e position sur 54 : la feuille
du widget passe apres et l'emportait, ce qui vidait le padding des cartes et
les repassait en `display:block`. La classe doublee remonte la specificite a
(0,5,2) sans rien changer au sens du selecteur.
Diagnostic verifie : 41 ecarts de rendu sur 350 elements de l'accueil, tous
concentres sur ces cartes. */
.cr-refonte.cr-refonte .cr-shop-grid ul.products > li.product {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid rgba(49,31,21,.1);
border-radius: var(--radius);
overflow: hidden;
position: relative;
padding: 0 20px 20px;
transition: transform .15s ease, box-shadow .15s ease;
}
.cr-refonte.cr-refonte .cr-shop-grid ul.products > li.product:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(49,31,21,.12);
}
.cr-refonte.cr-refonte .cr-shop-grid ul.products > li.product img {
display: block;
width: calc(100% + 40px);
max-width: none;
margin: 0 -20px 16px;
border-radius: 0;
}
.cr-refonte .cr-shop-grid ul.products > li.product .woocommerce-loop-product__title {
padding-top: 0;
}
.cr-refonte .cr-shop-grid ul.products > li.product .price {
margin-top: auto; padding-top: 8px;
}
/* Le tarif au kilo passe sous le « des X € », comme dans la maquette. */
.cr-refonte .cr-shop-grid .price small {
display: block; margin-top: 2px;
font-family: var(--sans); font-weight: 400;
font-size: .78rem; color: var(--texte-doux);
}
.cr-refonte.cr-refonte .cr-shop-grid ul.products > li.product .button,
.cr-refonte.cr-refonte .cr-shop-grid ul.products > li.product a.button {
margin-top: auto; align-self: flex-start;
}
/* =========================================================================
18. STRUCTURE APLATIE (2026-07-28, demande Johann)
Objectif : le moins de conteneurs possible, pour que le Navigator reste
lisible et que Ludo s'y retrouve.
Principe : une section = UN conteneur Elementor en mode "boxed". Le fond
s'etend sur toute la largeur (sur le .e-con externe) pendant que le contenu
reste centre et limite (sur le .e-con-inner). Cela remplace l'ancien couple
section pleine largeur + .wrap interne, soit un niveau en moins partout.
Chaque section porte donc elle-meme la classe .cr-refonte : il n'y a plus
de conteneur racine englobant. Les regles ci-dessous sont les variantes
"meme element" (.cr-refonte.hero) des regles descendantes plus haut dans ce
fichier (.cr-refonte .hero), qui restent utilisees par le header/footer.
Les selecteurs de descendants (.cr-refonte .etape, .cr-refonte h1...) sont
valables dans les deux structures, il n'y a rien a y changer.
========================================================================= */
/* Largeur de contenu commune, equivalent de l'ancien .wrap. */
.cr-refonte > .e-con-inner {
max-width: 1080px; margin-left: auto; margin-right: auto;
padding-left: 24px; padding-right: 24px;
}
/* Rythme vertical des sections. */
.cr-refonte.section > .e-con-inner { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
/* Fonds : ils vivent sur le conteneur externe pour s'etendre pleine largeur. */
.cr-refonte.hero {
background:
radial-gradient(1100px 480px at 82% -10%, rgba(229,210,170,.14), transparent 60%),
radial-gradient(700px 420px at -8% 110%, rgba(182,19,21,.18), transparent 55%),
var(--brun-fonce);
color: var(--creme); overflow: hidden;
}
.cr-refonte.reassurance { background: var(--or); }
.cr-refonte.ludo { background: var(--or-clair); }
.cr-refonte.bande-sombre {
background: radial-gradient(900px 400px at 90% -20%, rgba(229,210,170,.12), transparent 60%), var(--brun-fonce);
color: var(--creme);
}
/* Mises en page a deux ou quatre colonnes, portees par l'inner. */
.cr-refonte.hero > .e-con-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.cr-refonte.reassurance > .e-con-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 22px; padding-bottom: 22px; }
.cr-refonte.ludo > .e-con-inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 52px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.cr-refonte.bande-sombre > .e-con-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
/* Variantes "meme element" des regles de texte des sections a fond fonce. */
.cr-refonte.hero h1, .cr-refonte.bande-sombre h1 { color: var(--creme); }
.cr-refonte.dark .eyebrow { color: var(--or); }
.cr-refonte.center { text-align: center; }
/* L'ancien conteneur .section-head disparait : le titre porte lui-meme sa
largeur et sa marge basse. */
.cr-refonte .cr-titre-section .elementor-heading-title { max-width: 60ch; }
.cr-refonte.center .cr-titre-section .elementor-heading-title { margin-left: auto; margin-right: auto; }
/* PIEGE (2026-07-29) : Elementor pose `.e-con .elementor-widget.elementor-widget
{ margin-block-end: 0 }` (specificite 0,3,0) et utilise la propriete LOGIQUE.
Un simple `.cr-refonte .cr-titre-section { margin-bottom: 40px }` (0,2,0) etait
donc ecrase et tous les titres de section collaient a leur contenu.
Il faut a la fois `margin-block-end` et une specificite >= 0,4,0. */
.cr-refonte .elementor-widget.elementor-widget.cr-titre-section { margin-block-end: 40px; }
.cr-refonte .elementor-widget.elementor-widget.cr-titre-section.cr-avec-soustitre { margin-block-end: 10px; }
.cr-refonte .elementor-widget.elementor-widget.cr-soustitre-section { margin-block-end: 40px; }
.cr-refonte .cr-soustitre-section .elementor-widget-container > p { color: var(--texte-doux); max-width: 60ch; margin: 0; }
.cr-refonte.center .cr-soustitre-section .elementor-widget-container > p { margin-left: auto; margin-right: auto; }
/* Le bouton centre n'a plus besoin d'un conteneur dedie. */
.cr-refonte .cr-btn-centre { text-align: center; margin-top: 34px; }
@media (max-width: 860px) {
.cr-refonte.hero > .e-con-inner,
.cr-refonte.ludo > .e-con-inner,
.cr-refonte.bande-sombre > .e-con-inner { grid-template-columns: 1fr; }
.cr-refonte.reassurance > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.cr-refonte.reassurance > .e-con-inner { grid-template-columns: 1fr; }
}
/* =========================================================================
19. Variantes "meme element" pour la structure aplatie (2026-07-28)
PIEGE A RETENIR : dans l'ancienne structure, .hero etait un DESCENDANT du
conteneur racine .cr-refonte, d'ou des selecteurs ".cr-refonte .hero X".
Depuis l'aplatissement, la section EST le .cr-refonte : ces selecteurs ne
matchent plus rien. Toute regle visant une SECTION doit donc exister aussi
en version ".cr-refonte.hero X" (sans espace). Les regles qui visent un
descendant quelconque (.cr-refonte .etape, .cr-refonte h1) restent valables
dans les deux structures : il n'y a rien a y toucher.
Les versions descendantes plus haut sont conservees : elles servent encore
au header et au footer, qui gardent un conteneur racine.
========================================================================= */
/* Hero */
.cr-refonte.hero h1 { color: var(--creme); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.cr-refonte.hero h1 em { font-style: normal; color: var(--or); }
.cr-refonte.hero p.pitch { color: rgba(255,248,232,.78); margin: 18px 0 8px; max-width: 46ch; }
.cr-refonte.hero .preuve { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 14px 0 26px; font-size: .92rem; color: rgba(255,248,232,.85); }
.cr-refonte.hero .ctas { display: flex; flex-direction: row; gap: 14px; flex-wrap: wrap; }
.cr-refonte.dark .cr-h2 .elementor-heading-title { color: var(--creme); }
/* Bande reassurance */
.cr-refonte.reassurance .item { display: flex; flex-direction: row; align-items: center; gap: 12px; color: var(--brun); font: 500 0.88rem/1.3 var(--sans); }
.cr-refonte.reassurance .item .elementor-widget-html { display: flex; flex: none; }
.cr-refonte.reassurance svg { flex: none; width: 26px; height: 26px; stroke: var(--rouge); }
/* Bloc torrefacteur */
.cr-refonte.ludo blockquote { margin: 22px 0; padding: 0 0 0 18px; border-left: 3px solid var(--rouge); font-family: var(--slab); font-size: 1.05rem; color: var(--brun); }
/* Hero pro de la page revendeur */
.cr-refonte.bande-sombre h1 { font-family: var(--slab); font-weight: 700; color: var(--creme); font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0; }
.cr-refonte.bande-sombre p { color: rgba(255,248,232,.78); }
.cr-refonte.bande-sombre .cr-h1 .elementor-heading-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); letter-spacing: normal; }
/* 20. En-tetes de page dans la structure aplatie (2026-07-28).
Les conteneurs .liste-head et .page-head disparaissent : le titre et le
chapo sont des enfants directs de la section, ils portent donc eux-memes
leur rythme vertical. */
/* En-tete de la page liste. Valeurs reprises de la maquette, ou le fil d'ariane
occupe 20px au-dessus et 6 en dessous, et le bloc titre 48 au-dessus et 8 en
dessous. La page etait 711px plus haute que la maquette (2903 contre 2192),
pour l'essentiel a cause des 72px de padding de section appliques a des
blocs qui n'en portent pas dans le dessin d'origine. Mesure du 2026-07-29. */
.cr-refonte.cr-entete > .e-con-inner { padding-top: 20px; padding-bottom: 8px; }
.cr-refonte .cr-liste-h1, .cr-refonte .cr-page-h1 { margin-top: 28px; }
/* La grille des cafes et les cartes d'offre n'ont aucun padding vertical dans
la maquette : ce sont les blocs qu'elles encadrent qui portent leur espace. */
.cr-refonte.cr-liste-grille > .e-con-inner { padding-top: 0; padding-bottom: 0; }
/* Les cartes d'offre doivent respirer avant le texte de reference qui suit :
6px les collaient au bloc suivant. */
.cr-refonte.cr-liste-offres > .e-con-inner { padding-top: 0; padding-bottom: 40px; }
.cr-refonte .cr-filtres { padding: 22px 0 34px; }
/* 21. Template d'archive produit refondu (2026-07-28).
La page boutique WooCommerce n'affiche pas son propre contenu Elementor :
c'est le template d'archive qui gouverne. Le design de la page liste vit
donc dans ce template. Le texte SEO historique de la page boutique est
conserve en bas de page via le widget de description d'archive : il porte
le positionnement sur « cafe artisanal ». */
.cr-refonte.cr-seo > .e-con-inner { padding-top: 10px; padding-bottom: 56px; }
.cr-refonte .cr-seo-txt { font-size: .88rem; color: var(--texte-doux); }
.cr-refonte .cr-seo-txt p { font-size: .88rem; color: var(--texte-doux); max-width: 78ch; }
.cr-refonte .cr-seo-txt strong { color: var(--brun); }
.cr-refonte .cr-seo-txt figure:empty, .cr-refonte .cr-seo-txt img:not([src]) { display: none; }
/* Fil d'ariane WooCommerce dans l'en-tete d'archive. */
.cr-refonte .cr-fil .woocommerce-breadcrumb { font-size: .8rem; color: var(--texte-doux); margin: 0; }
.cr-refonte .cr-fil .woocommerce-breadcrumb a { color: var(--texte-doux); text-decoration: none; }
.cr-refonte .cr-fil .woocommerce-breadcrumb a:hover { color: var(--brun); }
/* =========================================================================
HEADER ET FOOTER : plus rien ici (2026-07-28, soir)
Les deux gabarits (#1413 et #1414) sont entierement pilotes par leurs
reglages Elementor, et leurs conteneurs ne portent plus la classe
.cr-refonte. Toutes les regles qui les visaient ont donc ete supprimees :
elles ne matchaient plus rien.
Ne pas en remettre. Pour changer l'entete ou le pied de page, passer par
Modeles > Theme Builder dans l'administration.
========================================================================= */
/* =========================================================================
FICHE PRODUIT : raccords maquette (2026-07-29)
========================================================================= */
/* Photo produit : la maquette arrondit le cadre a 12px. La galerie WooCommerce
n'expose aucun reglage d'arrondi dans Elementor. */
.cr-refonte .woocommerce-product-gallery__image,
.cr-refonte .woocommerce-product-gallery__image img,
.cr-refonte .woocommerce-product-gallery__wrapper { border-radius: 12px; overflow: hidden; }
/* Ligne de reassurance : le flex etait pose sur le widget, alors que les trois
mentions vivent dans le genere par l'editeur. Les puces se retrouvaient
collees les unes aux autres, separees par une simple espace. */
.cr-refonte .sous-cta .elementor-widget-container > p {
display: flex; gap: 16px; flex-wrap: wrap; margin: 0;
}
/* Portrait rond du rappel torrefacteur. */
.cr-refonte .rappel-ludo .rond img {
width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: block;
}
.cr-refonte .rappel-ludo .rond { flex: none; }
.cr-refonte .rappel-ludo .elementor-widget-container > p { margin: 0; }
/* Avis WooCommerce remis au dessin de la maquette : plus de cadre gris ni
d'avatar par defaut, une simple liste separee par des filets. */
.cr-refonte .avis-prod .commentlist { list-style: none; margin: 0; padding: 0; }
.cr-refonte .avis-prod .commentlist li { list-style: none; margin: 0; }
.cr-refonte .avis-prod .comment_container {
display: block; border-bottom: 1px solid rgba(49,31,21,.1); padding: 18px 0;
background: none; border-radius: 0;
}
.cr-refonte .avis-prod .commentlist li:first-child .comment_container { padding-top: 0; }
.cr-refonte .avis-prod .comment_container img.avatar { display: none; }
.cr-refonte .avis-prod .comment-text {
/* Meme cause que les pastilles : une feuille externe impose ce cadre en
!important, il faut repasser devant pour retrouver la liste de la maquette. */
border: none !important; background: none !important;
padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
/* Un seul onglet subsiste depuis que la description et les informations
complementaires ont ete retirees : l'onglet ne sert plus a rien et la maquette
n'en montre pas. Le titre repete deja le nom du produit juste au-dessus. */
.cr-refonte .avis-prod .woocommerce-tabs ul.tabs { display: none !important; }
.cr-refonte .avis-prod .woocommerce-Reviews-title { display: none !important; }
.cr-refonte .avis-prod .woocommerce-tabs .panel { padding: 0 !important; margin: 0 !important; }
.cr-refonte .avis-prod .comment-text .star-rating { float: none; margin: 0 0 6px; font-size: .9em; }
.cr-refonte .avis-prod .comment-text .woocommerce-review__author {
font: 600 .85rem/1 var(--sans); color: var(--brun); font-style: normal;
}
.cr-refonte .avis-prod .comment-text .woocommerce-review__verified,
.cr-refonte .avis-prod .comment-text .woocommerce-review__published-date,
.cr-refonte .avis-prod .comment-text .woocommerce-review__dash {
font-size: .75rem; color: var(--texte-doux); font-style: normal;
}
.cr-refonte .avis-prod .comment-text .description p { margin: 8px 0 0; font-size: .9rem; }
.cr-refonte .avis-prod .woocommerce-Tabs-panel > h2 { display: none; }
/* =========================================================================
PAGE NOS CAFES : filtres, cartes d'offre, vitrine d'avis (2026-07-29)
========================================================================= */
/* Les pastilles de filtre sont des liens, pas des boutons : le style de .pill
vise des dans la maquette et ne descend pas sur un . */
.cr-refonte .cr-filtres .pill {
display: inline-flex; align-items: center;
font: 500 0.9rem/1 var(--sans); color: var(--brun); background: #fff;
border: 1.5px solid rgba(49,31,21,.18); border-radius: 100px;
padding: 11px 20px; text-decoration: none;
transition: background .15s ease, border-color .15s ease;
}
.cr-refonte .cr-filtres .pill:hover { border-color: var(--brun); }
.cr-refonte .cr-filtres .pill.on { background: var(--brun); color: var(--creme); border-color: var(--brun); }
/* Coffrets et abonnement : deux cartes a parts egales sur toute la largeur. */
.cr-refonte .cr-grille-offres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cr-refonte .carte-offre.cr-pointille { border: 1.5px dashed rgba(49,31,21,.25); }
.cr-refonte .carte-offre h3 { font-size: 1.15rem; }
.cr-refonte .carte-offre .eyebrow { margin: 0; }
/* Coffrets et abonnement n'existent pas encore : la mention remplace le lien,
et doit se distinguer d'un appel a l'action pour ne rien promettre. */
.cr-refonte .cr-bientot {
font-weight: 600; font-size: .82rem; letter-spacing: .04em;
text-transform: uppercase; opacity: .7; margin-top: 6px !important;
}
/* Filtres : deux groupes, memes intitules que le selecteur de l'accueil. */
.cr-refonte .cr-bloc-filtres { padding: 22px 0 34px; }
.cr-refonte .cr-bloc-filtres .q { margin: 0 0 10px; }
.cr-refonte .cr-bloc-filtres .q + .cr-filtres { padding: 0; margin-bottom: 18px; }
.cr-refonte .cr-bloc-filtres .cr-filtres:last-child { margin-bottom: 0; }
/* Le temps d'aller chercher la liste filtree, la grille s'estompe : sans ce
signal, un clic sans rechargement de page passe pour un clic sans effet. */
.cr-refonte .cr-shop-grid.cr-chargement { opacity: .4; transition: opacity .12s ease; pointer-events: none; }
/* Texte de reference et avis client cote a cote, comme dans la maquette. */
.cr-refonte.seo-avis > .e-con-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.cr-refonte .cr-vitrine-avis h3 { font-size: 1rem; margin-bottom: 10px; }
.cr-refonte .cr-vitrine-avis .avis-carte {
background: #fff; border: 1px solid rgba(49,31,21,.1); border-radius: var(--radius);
padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
}
/* Les etoiles de la vitrine reprennent la taille de la maquette : en heritant
du corps de texte elles ecrasaient la citation qu'elles accompagnent. */
.cr-refonte .cr-vitrine-avis .stars { font-size: .8rem; line-height: 1; }
.cr-refonte .cr-vitrine-avis .avis-carte p { margin: 0; font-size: .92rem; color: var(--texte); }
.cr-refonte .cr-vitrine-avis .qui { font: 600 .82rem/1.4 var(--sans); color: var(--brun); }
.cr-refonte .cr-vitrine-avis .qui small { display: block; font-weight: 400; color: var(--texte-doux); }
@media (max-width: 860px) {
.cr-refonte .cr-grille-offres { grid-template-columns: 1fr; }
.cr-refonte.seo-avis > .e-con-inner { grid-template-columns: 1fr; }
}
/* Note, prix et etoiles de la fiche (2026-07-29, retours de Johann).
Trois defauts herites de WooCommerce : les etoiles reprenaient la couleur du
texte au lieu de l'or de la maquette, le lien vers les avis etait colle aux
etoiles faute de conteneur en flex, et le prix de la variation s'affichait
dans le jaune-vert par defaut du theme, en Roboto 400. */
.cr-refonte .star-rating,
.cr-refonte .star-rating span,
.cr-refonte p.stars a { color: var(--etoile) !important; letter-spacing: 2px; }
.cr-refonte .woocommerce-product-rating {
display: flex; align-items: center; gap: 10px;
font-size: .88rem; color: var(--texte-doux); margin: 0;
}
.cr-refonte .woocommerce-product-rating .star-rating { margin: 0; float: none; }
.cr-refonte .woocommerce-product-rating a { color: var(--texte-doux); text-decoration: none; }
.cr-refonte .woocommerce-product-rating a:hover { color: var(--brun); }
/* Le point median de la maquette, pose en CSS pour ne pas toucher au markup
que WooCommerce regenere a chaque changement de variation. */
.cr-refonte .woocommerce-product-rating .cr-note-chiffre::after { content: '·'; margin-left: 10px; color: var(--texte-doux); }
.cr-refonte .woocommerce-variation-price .price,
.cr-refonte .woocommerce-variation-price .price .amount,
.cr-refonte .woocommerce-variation-price .price bdi {
font-family: var(--slab) !important; font-weight: 700 !important;
font-size: 1.9rem !important; color: var(--brun) !important; line-height: 1.1;
}
.cr-refonte .woocommerce-variation-price .price small {
font: 400 .85rem/1 var(--sans) !important; color: var(--texte-doux) !important;
}
/* Le prix vit a l'interieur du widget d'achat : le `gap` du conteneur ne
l'atteint pas, il restait donc colle aux pastilles au-dessus et au bouton en
dessous. Marges reprises de .f-prix et .cta-row dans la maquette. */
.cr-refonte .woocommerce-variation-price { margin: 18px 0 14px !important; display: block; }
/* Le panneau des onglets porte un filet gris en haut. Il separait l'onglet du
contenu, mais l'onglet est masque depuis qu'il n'en reste qu'un : le trait se
retrouvait colle aux etoiles du premier avis, sans rien separer. Les avis ont
deja leurs propres filets entre eux. */
.cr-refonte .avis-prod .woocommerce-Tabs-panel { border: none !important; }
/* Etiquettes de variations (2026-07-29).
Le