, ce qui surligne le titre, le texte, etc. à l'intérieur — pas
* souhaité ici. On reset une bonne fois pour toutes. */
a.df-recipe-card,
a.df-niveau-card,
a.df-sos-row,
a.df-science-card,
a.df-lex-archive__item-link,
a.df-lex__confuse-link,
.df-lex__usage-list a,
.df-hero__popular a,
.df-recipe-card *,
.df-niveau-card *,
.df-science-card *,
.df-lex-archive__item-link *,
.df-lex__confuse-link * {
text-decoration: none;
}
a.df-recipe-card,
a.df-niveau-card,
a.df-sos-row,
a.df-science-card,
a.df-lex-archive__item-link,
a.df-lex__confuse-link {
color: inherit;
}
/* ==========================================================================
5. Prose article — voir la section « Le journal » en fin de feuille :
les Articles WP ont leur template (single.php) et leur typographie
(.df-article__content). Les anciennes règles .single-post .entry-content
gagnaient en spécificité contre elles, d'où leur retrait.
========================================================================== */
/* ==========================================================================
6. Ornements signature (squiggle, stamp, drop cap, placeholder hachuré)
========================================================================== */
/* Souligné ondulé caramel sous un mot (à la main) */
.df-squiggle {
position: relative;
white-space: nowrap;
}
.df-squiggle::after {
content: '';
position: absolute;
left: -2%;
right: -2%;
bottom: -.34em;
height: .42em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.df-squiggle.is-mint::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* Tampon de verdict (cadre pointillé + légère rotation) */
.df-stamp {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--df-sans);
font-weight: 600;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 7px;
border: 1.5px dashed currentColor;
transform: rotate(-3deg);
}
.df-stamp--rate { color: var(--df-rasp-deep); background: var(--df-rasp-bg); }
.df-stamp--reussi { color: var(--df-mint-deep); background: var(--df-mint-bg); }
.df-stamp--mitige { color: var(--df-caramel-deep); background: var(--df-caramel-bg); }
/* Drop cap éditorial */
.is-style-df-dropcap::first-letter {
font-family: var(--df-serif);
font-weight: 600;
font-size: 4.6em;
float: left;
line-height: .85;
margin: .05em .12em 0 -.05em;
color: var(--df-caramel);
}
/* Lede (chapeau) */
.is-style-df-lede {
font-family: var(--df-serif);
font-size: 21px;
line-height: 1.55;
color: var(--df-ink);
padding-left: 20px;
border-left: 4px solid var(--df-caramel);
}
/* Placeholder hachuré caramel (en attendant les vraies photos) */
.df-ph {
position: relative;
overflow: hidden;
background-color: #EDE5DB;
background-image: repeating-linear-gradient(
135deg,
rgba(216,90,48,.10) 0 8px,
transparent 8px 18px
);
border-radius: var(--df-r-md);
min-height: 160px;
}
.df-ph-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
letter-spacing: .02em;
color: var(--df-caramel-deep);
opacity: .72;
text-align: center;
padding: 0 12px;
}
/* Galère-mètre (4 points caramel) */
.df-galere {
display: inline-flex;
align-items: center;
gap: 7px;
}
.df-galere-dots {
display: inline-flex;
gap: 3px;
}
.df-galere-dots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--df-line-2);
}
.df-galere-dots span.on {
background: var(--df-caramel);
border-color: var(--df-caramel);
}
.df-galere-label {
font-size: 12px;
font-weight: 600;
color: var(--df-caramel-deep);
}
/* Pills colorés */
.df-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 4px 11px;
border-radius: 999px;
white-space: nowrap;
background: #EDEAE1;
color: var(--df-ink-2);
}
.df-pill--caramel { background: var(--df-caramel-bg); color: var(--df-caramel-deep); }
.df-pill--mint { background: var(--df-mint-bg); color: var(--df-mint-deep); }
.df-pill--rasp { background: var(--df-rasp-bg); color: var(--df-rasp-deep); }
/* ==========================================================================
7. Barre de progression de lecture (à brancher plus tard, single posts)
========================================================================== */
#df-reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0;
background: var(--df-caramel);
z-index: 9999;
transition: width .12s linear;
}
/* ==========================================================================
8. Composants patterns (hero, recipe-card, search, button, section-head)
========================================================================== */
/* Boutons */
.df-button {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
cursor: pointer;
font-family: var(--df-sans);
font-weight: 600;
font-size: 15px;
padding: 13px 22px;
border-radius: 999px;
text-decoration: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.df-button--primary {
background: var(--df-caramel);
color: #fff;
}
.df-button--primary:hover {
background: var(--df-caramel-deep);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--df-shadow-pop);
}
.df-button--dark {
background: var(--df-ink);
color: var(--df-cream);
}
.df-button--dark:hover {
background: #000;
color: var(--df-cream);
}
/* Champ de recherche éditorial */
.df-search {
display: flex;
align-items: center;
gap: 12px;
background: var(--df-paper);
border-radius: 999px;
padding: 8px 8px 8px 24px;
box-shadow: var(--df-shadow-md);
max-width: 520px;
}
.df-search input {
flex: 1;
border: none;
outline: none;
background: none;
font-family: var(--df-sans);
font-size: 17px;
color: var(--df-ink);
}
.df-search input::placeholder { color: var(--df-ink-3); }
.df-search button {
flex-shrink: 0;
border: none;
cursor: pointer;
background: var(--df-caramel);
color: #fff;
width: 48px;
height: 48px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
}
.df-search button:hover { background: var(--df-caramel-deep); }
/* En-tête de section (kicker + titre + sous-titre) */
.df-section-head { margin-bottom: 30px; }
.df-section-head .df-kicker {
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--df-caramel);
margin-bottom: 9px;
}
.df-section-head h2 {
font-family: var(--df-serif);
font-size: 40px;
font-weight: 500;
line-height: 1.05;
letter-spacing: -.5px;
margin: 0;
}
.df-section-head .df-sub {
margin: 12px 0 0;
font-size: 16px;
color: var(--df-ink-2);
line-height: 1.5;
max-width: 52ch;
}
/* Carte recette (variante éditoriale, par défaut) */
.df-recipe-card {
background: var(--df-paper);
border-radius: var(--df-r-lg);
overflow: hidden;
box-shadow: var(--df-shadow-sm);
display: flex;
flex-direction: column;
}
/* --- Cadres photo des cartes : recadrage uniforme ---------------------
Chaque cadre porte déjà un aspect-ratio, mais rien ne contraignait
l'image à l'intérieur : elle s'affichait à sa hauteur naturelle et
débordait, désalignant les cartes d'une même grille.
L'image remplit désormais le cadre et se fait rogner au centre.
Le placeholder, lui, reçoit une hauteur en ligne depuis
ldf_photo_or_ph() — d'où le !important, seul moyen de la neutraliser. */
.df-recipe-card__media .df-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.df-recipe-card__media .df-ph {
height: 100% !important;
}
.df-recipe-card__media {
overflow: hidden;
position: relative;
aspect-ratio: 16 / 11;
background: var(--df-cream-2);
}
.df-recipe-card__media .df-stamp {
position: absolute;
top: 14px;
right: 14px;
}
.df-recipe-card__body {
padding: 18px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.df-recipe-card__title {
font-family: var(--df-serif);
font-size: 23px;
font-weight: 500;
line-height: 1.12;
margin: 0 0 8px;
color: var(--df-ink);
}
.df-recipe-card__blurb {
margin: 0 0 16px;
font-size: 14.5px;
color: var(--df-ink-2);
line-height: 1.5;
flex: 1;
}
.df-recipe-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.df-recipe-card__rate {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--df-line);
display: flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
color: var(--df-ink-2);
}
.df-recipe-card__rate strong { font-weight: 600; }
/* Hero d'accueil */
.df-hero {
padding: 64px 0 72px;
}
.df-hero__pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
margin: 0 0 24px;
}
/* Reset des marges que WP/Kadence ajoutent par défaut, sinon les deux
pills ne sont plus sur la même ligne de base. */
.df-hero__pills > p,
.df-hero__pills > .wp-block-paragraph {
margin: 0;
}
.df-hero h1 {
font-family: var(--df-serif);
font-size: 68px;
font-weight: 500;
line-height: 1.0;
letter-spacing: -1.5px;
margin: 0 0 26px;
}
.df-hero h1 em {
font-style: italic;
font-weight: 500;
}
.df-hero h1 em.is-rasp { color: var(--df-rasp); }
.df-hero h1 em.is-mint { color: var(--df-mint); }
.df-hero__lede {
margin: 0 0 30px;
font-size: 19px;
color: var(--df-ink-2);
line-height: 1.55;
max-width: 42ch;
}
.df-hero__popular {
display: flex;
gap: 9px;
margin-top: 18px;
align-items: center;
flex-wrap: wrap;
font-size: 13.5px;
color: var(--df-ink-3);
}
.df-hero__popular a {
font-family: var(--df-sans);
font-size: 13.5px;
font-weight: 600;
padding: 8px 15px;
border-radius: 999px;
background: var(--df-cream-2);
color: var(--df-caramel-deep);
text-decoration: none;
}
.df-hero__popular a:hover {
background: var(--df-caramel);
color: #fff;
}
/* Icône SVG inline (helper ldf_icon) — alignement et taille cohérents */
.df-icon {
display: inline-block;
vertical-align: -.125em;
flex-shrink: 0;
}
/* Utilitaires de grille (3, 4, 2 colonnes) */
.df-grid { display: grid; gap: 26px; }
.df-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.df-grid--3 { grid-template-columns: repeat(3, 1fr); }
.df-grid--2 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* Bloc « rien à afficher » (cohérent partout) */
.df-empty {
grid-column: 1 / -1;
text-align: center;
padding: 32px 24px;
font-size: 15px;
color: var(--df-ink-2);
background: var(--df-paper);
border: 1px dashed var(--df-line-2);
border-radius: var(--df-r-lg);
}
/* ── Carte niveau (taxonomie niveau-galere) ─────────────────── */
.df-niveau-card {
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
background: var(--df-paper);
border-radius: var(--df-r-lg);
padding: 24px 22px;
box-shadow: var(--df-shadow-sm);
color: var(--df-ink);
}
.df-niveau-card__title {
font-family: var(--df-serif);
font-size: 24px;
font-weight: 500;
line-height: 1.1;
}
.df-niveau-card__count {
font-size: 14px;
color: var(--df-ink-3);
}
/* ── Bandeau SOS (rose framboise) ───────────────────────────── */
.df-sos-band {
background: var(--df-rasp-bg);
border-radius: var(--df-r-xl);
padding: 52px 56px;
}
.df-sos-band__title {
font-family: var(--df-serif);
font-size: 40px;
font-weight: 500;
color: var(--df-rasp-deep);
line-height: 1.06;
letter-spacing: -.5px;
margin: 18px 0 12px;
}
.df-sos-band__lede {
margin: 0 0 24px;
font-size: 17px;
color: var(--df-rasp-deep);
opacity: .85;
line-height: 1.55;
max-width: 34ch;
}
.df-sos-list {
display: flex;
flex-direction: column;
gap: 11px;
}
.df-sos-row {
display: flex;
align-items: center;
gap: 13px;
text-decoration: none;
background: var(--df-paper);
border-radius: var(--df-r-md);
padding: 15px 18px;
color: var(--df-ink);
}
.df-sos-row__icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--df-rasp-bg);
color: var(--df-rasp);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.df-sos-row__main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.df-sos-row__title {
font-family: var(--df-serif);
font-size: 16.5px;
font-weight: 500;
line-height: 1.2;
}
.df-sos-row__fam { font-size: 12.5px; color: var(--df-ink-3); }
.df-sos-row__chevron { color: var(--df-ink-3); font-size: 22px; line-height: 1; }
/* ── Carte science ──────────────────────────────────────────── */
.df-science-card {
display: flex;
flex-direction: column;
text-decoration: none;
background: var(--df-paper);
border-radius: var(--df-r-lg);
padding: 26px 24px;
box-shadow: var(--df-shadow-sm);
color: var(--df-ink);
}
.df-science-card .df-pill { align-self: flex-start; }
.df-science-card__title {
font-family: var(--df-serif);
font-size: 23px;
font-weight: 500;
line-height: 1.15;
margin: 16px 0 10px;
}
.df-science-card__excerpt {
margin: 0;
font-size: 15px;
color: var(--df-ink-2);
line-height: 1.5;
}
/* ── Bandeau newsletter foncé ──────────────────────────────── */
.df-newsletter-band {
background: var(--df-ink);
color: var(--df-cream);
border-radius: var(--df-r-xl);
padding: 56px 60px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
}
/* Force tout le texte du bandeau en crème (sinon Kadence / theme.json
réimpose leur couleur sombre sur les headings et les
). */
.df-newsletter-band,
.df-newsletter-band h1,
.df-newsletter-band h2,
.df-newsletter-band h3,
.df-newsletter-band h4,
.df-newsletter-band p,
.df-newsletter-band a {
color: var(--df-cream);
}
.df-newsletter-band__kicker {
font-family: var(--df-serif);
font-size: 15px;
opacity: .7;
margin: 0 0 14px;
}
.df-newsletter-band__title {
font-family: var(--df-serif);
font-size: 38px;
font-weight: 500;
line-height: 1.08;
letter-spacing: -.4px;
margin: 0 0 14px;
}
.df-newsletter-band__lede {
margin: 0;
font-size: 16.5px;
opacity: .72;
line-height: 1.55;
max-width: 46ch;
}
.df-newsletter-band__form {
display: flex;
gap: 10px;
}
.df-newsletter-band__form input[type="email"] {
flex: 1;
min-width: 0;
border: none;
outline: none;
border-radius: 999px;
padding: 16px 22px;
font-size: 16px;
background: rgba(255,255,255,.10);
color: #fff;
font-family: var(--df-sans);
}
.df-newsletter-band__form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.df-newsletter-band__form button {
border: none;
cursor: pointer;
background: var(--df-caramel);
color: #fff;
font-weight: 600;
font-size: 16px;
padding: 16px 26px;
border-radius: 999px;
flex-shrink: 0;
font-family: var(--df-sans);
}
.df-newsletter-band__form button:hover { background: var(--df-caramel-deep); }
.df-newsletter-band__legal {
margin: 14px 2px 0;
font-size: 13px;
opacity: .5;
}
/* ── Single recette (template single-recette.php) ───────────── */
.df-recette {
background: var(--df-cream);
padding: 30px 0 60px;
}
.df-recette__wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 40px;
}
.df-recette__back {
display: inline-flex;
margin-bottom: 20px;
}
.df-recette__hero {
position: relative;
margin-bottom: 36px;
border-radius: var(--df-r-xl);
overflow: hidden;
}
.df-recette__img {
display: block;
width: 100%;
height: 380px;
object-fit: cover;
border-radius: var(--df-r-xl);
}
.df-recette__ph {
height: 380px;
border-radius: var(--df-r-xl);
}
.df-recette__stamp {
position: absolute;
top: 22px;
right: 22px;
transform: scale(1.1);
}
.df-recette__grid {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 56px;
align-items: start;
}
.df-recette__title {
font-family: var(--df-serif);
font-size: 46px;
font-weight: 500;
line-height: 1.04;
letter-spacing: -.8px;
margin: 0 0 16px;
}
.df-recette__intro {
font-family: var(--df-serif);
font-size: 21px;
line-height: 1.55;
color: var(--df-ink);
margin: 0 0 36px;
padding-left: 20px;
border-left: 4px solid var(--df-caramel);
}
.df-recette__content {
font-size: 17px;
line-height: 1.65;
}
.df-recette__content h2,
.df-recette__content h3 {
font-family: var(--df-serif);
font-weight: 500;
}
.df-recette__content h2 { font-size: 28px; margin: 1.8em 0 .6em; }
.df-recette__content h3 { font-size: 22px; margin: 1.6em 0 .8em; }
/* Liste ordonnée des étapes — numéros chocolat */
.df-recette__content ol {
list-style: none;
padding-left: 0;
margin: 0 0 1.5em;
counter-reset: df-step;
}
.df-recette__content ol > li {
counter-increment: df-step;
display: grid;
grid-template-columns: 36px 1fr;
gap: 16px;
margin-bottom: 20px;
padding: 0;
font-size: 16.5px;
line-height: 1.55;
}
.df-recette__content ol > li::before {
content: counter(df-step);
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--df-ink);
color: var(--df-cream);
font-family: var(--df-serif);
font-weight: 600;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -2px;
}
/* Liste non-ordonnée : puces caramel */
.df-recette__content ul {
list-style: none;
padding-left: 0;
margin: 0 0 1em;
}
.df-recette__content ul > li {
position: relative;
padding-left: 22px;
margin-bottom: .5em;
}
.df-recette__content ul > li::before {
content: '';
position: absolute;
left: 4px;
top: .7em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--df-caramel);
}
/* Images/vidéos entre les étapes — radius doux + ombre légère */
.df-recette__content .wp-block-image img,
.df-recette__content .wp-block-video video,
.df-recette__content .wp-block-embed iframe {
border-radius: var(--df-r-md);
box-shadow: var(--df-shadow-sm);
max-width: 100%;
height: auto;
}
.df-recette__content .wp-block-image,
.df-recette__content .wp-block-video,
.df-recette__content .wp-block-embed {
margin: 1.2em 0 1.8em;
}
/* Style « Point critique » sur paragraphe — pour un warning court sur 1-2 lignes */
.df-recette__content .is-style-df-point-critique,
.is-style-df-point-critique {
background: var(--df-rasp-bg);
border-radius: var(--df-r-md);
padding: 14px 18px 14px 50px;
color: var(--df-rasp-deep);
font-size: 15.5px;
position: relative;
}
.is-style-df-point-critique::before {
content: '';
position: absolute;
left: 18px;
top: 16px;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
/* Style « Point critique » sur Group block — pour un warning structuré (titre + liste/plusieurs paragraphes) */
.wp-block-group.is-style-df-point-critique,
.df-recette__content .wp-block-group.is-style-df-point-critique {
background: var(--df-rasp-bg);
border-radius: var(--df-r-md);
padding: 20px 22px 18px 58px;
position: relative;
margin: 1.4em 0;
color: var(--df-rasp-deep);
}
.wp-block-group.is-style-df-point-critique::before {
content: '';
position: absolute;
left: 22px;
top: 22px;
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.wp-block-group.is-style-df-point-critique > *,
.wp-block-group.is-style-df-point-critique p,
.wp-block-group.is-style-df-point-critique li,
.wp-block-group.is-style-df-point-critique h2,
.wp-block-group.is-style-df-point-critique h3,
.wp-block-group.is-style-df-point-critique h4 {
color: var(--df-rasp-deep);
}
.wp-block-group.is-style-df-point-critique h2,
.wp-block-group.is-style-df-point-critique h3,
.wp-block-group.is-style-df-point-critique h4 {
font-family: var(--df-serif);
font-weight: 600;
font-size: 17px;
line-height: 1.2;
margin: 0 0 10px;
}
.wp-block-group.is-style-df-point-critique p {
font-size: 15.5px;
line-height: 1.55;
margin: 0 0 8px;
}
.wp-block-group.is-style-df-point-critique p:last-child { margin-bottom: 0; }
.wp-block-group.is-style-df-point-critique ul {
margin: 6px 0 0;
padding-left: 0;
list-style: none;
}
.wp-block-group.is-style-df-point-critique ul > li {
position: relative;
padding-left: 16px;
margin-bottom: 5px;
font-size: 15px;
line-height: 1.5;
}
.wp-block-group.is-style-df-point-critique ul > li::before {
content: '';
position: absolute;
left: 0;
top: .65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--df-rasp);
}
/* Style « Étape de recette » sur Group block — compteur continu (front + éditeur) */
.df-recette__content,
.editor-styles-wrapper,
.wp-block-post-content {
counter-reset: df-step;
}
.wp-block-group.is-style-df-step {
counter-increment: df-step;
position: relative;
/* Les étapes sont ancrées (#etape-3) et référencées par HowToStep.url :
de l'air au-dessus quand on arrive dessus depuis un lien externe. */
scroll-margin-top: 90px;
padding: 0 0 0 54px;
margin: 0 0 28px;
background: transparent;
min-height: 36px;
}
.wp-block-group.is-style-df-step::before {
content: counter(df-step);
position: absolute;
left: 0;
top: 0;
width: 36px;
height: 36px;
border-radius: 999px;
background: var(--df-ink);
color: var(--df-cream);
font-family: var(--df-serif);
font-weight: 600;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
}
.wp-block-group.is-style-df-step > *:first-child { margin-top: 0; }
.wp-block-group.is-style-df-step > *:last-child { margin-bottom: 0; }
.wp-block-group.is-style-df-step p:first-of-type {
font-size: 16.5px;
line-height: 1.55;
}
/* Les étapes sont rendues en
dans un (ldf_render_step_blocks) :
huit divs anonymes devenaient huit divs anonymes pour un moteur comme pour un
lecteur d'écran, alors que le numéro n'existait que dans un compteur CSS.
Il faut donc neutraliser ici le style des listes ordonnées rédigées à la main
(« .df-recette__content ol » plus haut) : sans ça chaque étape hériterait de sa
grille 36px + 1fr, qui renverrait le Media & Text de l'étape à la ligne suivante.
La pastille numérotée, elle, continue de venir de .is-style-df-step, plus
spécifique — l'apparence ne bouge pas. */
.df-recette__content ol.df-steps,
.df-tour-de-main__content ol.df-steps {
list-style: none;
padding-left: 0;
margin: 0;
counter-reset: none;
}
.df-recette__content ol.df-steps > li,
.df-tour-de-main__content ol.df-steps > li {
display: block;
grid-template-columns: none;
gap: 0;
font-size: inherit;
line-height: inherit;
}
.df-recette__content ol.df-steps > li::before,
.df-tour-de-main__content ol.df-steps > li::before {
margin-top: 0;
}
/* CTA SOS « Quelque chose a raté ? » — shortcode [df_sos_cta], posé dans
l'éditeur (sous le tableau « Problèmes fréquents » en général). */
.df-recette__sos {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
margin: 32px 0;
background: var(--df-rasp-bg);
border-radius: var(--df-r-lg);
padding: 20px 24px;
color: var(--df-rasp-deep);
}
.df-recette__sos-body { flex: 1; }
.df-recette__sos-title { font-weight: 600; font-size: 17px; }
.df-recette__sos-sub { font-size: 14.5px; opacity: .8; }
/* ── Questions fréquentes ──
* Accordéon en natif : ouvrable sans JS, et l'attribut `name`
* n'en laisse qu'un ouvert là où le navigateur le gère (sinon, plusieurs
* ouverts — ça reste lisible).
*/
.df-recette__faq {
margin: 40px 0 0;
}
.df-recette__faq-head {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 18px;
}
.df-recette__faq-icon {
display: inline-flex;
color: var(--df-caramel);
}
.df-recette__faq-title {
font-family: var(--df-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.3px;
color: var(--df-ink);
margin: 0;
}
.df-recette__faq-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.df-recette__faq-item {
background: var(--df-paper);
border-radius: var(--df-r-md);
box-shadow: var(--df-shadow-sm);
overflow: hidden;
}
.df-recette__faq-q {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
cursor: pointer;
list-style: none;
font-size: 18px;
font-weight: 600;
line-height: 1.35;
color: var(--df-ink);
}
/* Le triangle par défaut de (WebKit a besoin du pseudo-élément). */
.df-recette__faq-q::-webkit-details-marker { display: none; }
.df-recette__faq-q-text { flex: 1; }
.df-recette__faq-sign {
display: inline-flex;
flex-shrink: 0;
color: var(--df-caramel);
}
.df-recette__faq-item[open] .df-recette__faq-sign--closed,
.df-recette__faq-sign--open { display: none; }
.df-recette__faq-item[open] .df-recette__faq-sign--open { display: inline-flex; }
.df-recette__faq-a {
padding: 0 22px 20px;
font-size: 15.5px;
line-height: 1.6;
color: var(--df-ink-2);
}
.df-recette__faq-a p { margin: 0 0 .6em; }
.df-recette__faq-a p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
.df-recette__faq-title { font-size: 26px; }
.df-recette__faq-q { font-size: 16px; padding: 15px 16px; }
.df-recette__faq-a { padding: 0 16px 16px; font-size: 14px; }
}
/* Sidebar collante */
.df-recette__aside {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: 18px;
/* Une colonne plus haute que l'écran restait épinglée par le haut : son bas
sortait du champ sans aucun moyen d'y accéder (une recette à deux pâtes,
c'est vingt lignes d'ingrédients). Elle reçoit donc sa propre zone de
défilement, haute comme la fenêtre moins le header collant. */
max-height: calc(100vh - 120px);
overflow-y: auto;
/* overflow-y déclenche un overflow-x implicite, qui rognerait les ombres
portées des cartes : la marge négative rend la place que le padding reprend.
12px tiennent largement dans les 40px de padding de .df-recette__wrap. */
margin: -12px;
padding: 12px;
scrollbar-width: thin;
scrollbar-color: var(--df-line-2) transparent;
}
.df-recette__aside::-webkit-scrollbar { width: 7px; }
.df-recette__aside::-webkit-scrollbar-track { background: transparent; }
.df-recette__aside::-webkit-scrollbar-thumb {
background: var(--df-line-2);
border-radius: 4px;
}
.df-recette__stats {
background: var(--df-paper);
border-radius: var(--df-r-lg);
padding: 22px 24px;
box-shadow: var(--df-shadow-sm);
display: flex;
flex-direction: column;
gap: 12px;
}
.df-recette__stats-rate {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 18px;
border-bottom: 1px solid var(--df-line);
margin-bottom: 6px;
}
.df-recette__ring {
position: relative;
width: 54px;
height: 54px;
flex-shrink: 0;
}
.df-recette__ring-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.df-recette__stats-title { font-size: 16px; font-weight: 600; }
.df-recette__stats-sub { font-size: 13.5px; color: var(--df-ink-2); }
.df-recette__stats-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--df-ink-2);
}
/* Pills de temps (déprécié — gardé pour compat) */
.df-recette__times {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 26px;
}
.df-recette__time-pill {
display: inline-flex;
flex-direction: column;
gap: 2px;
background: var(--df-paper);
border-radius: var(--df-r-md);
padding: 10px 16px;
box-shadow: var(--df-shadow-sm);
min-width: 88px;
}
.df-recette__time-key {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--df-ink-3);
}
.df-recette__time-val {
font-family: var(--df-serif);
font-size: 19px;
font-weight: 500;
color: var(--df-ink);
line-height: 1.1;
}
.df-recette__time-pill--rest .df-recette__time-key { color: var(--df-caramel); }
/* Barre horizontale de stats sous le hero (96% / niveau / prep / cuisson / total).
La marge négative est plus grande que le margin-bottom du hero (36px), de manière
à créer un vrai chevauchement (~45px) avec l'image. */
.df-recette__statbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 16px;
background: var(--df-paper);
border-radius: var(--df-r-lg);
box-shadow: var(--df-shadow-md);
padding: 22px 28px;
margin: -82px auto 40px;
position: relative;
z-index: 2;
width: calc(100% - 60px);
max-width: 100%;
}
.df-recette__statbar-cell {
display: flex;
align-items: center;
gap: 14px;
padding: 0 22px;
border-left: 1px solid var(--df-line);
/* Chaque cellule prend la place de son contenu et jamais moins : une valeur
coupée sur trois lignes (« 1 h / 30 ») ne se lit plus. Si la ligne est trop
courte, la barre passe à deux rangées plutôt que d'écraser les cellules. */
flex: 1 1 auto;
white-space: nowrap;
}
.df-recette__statbar-cell:first-child {
border-left: none;
padding-left: 0;
}
.df-recette__statbar-cell--rate { flex-grow: 1.4; }
.df-recette__statbar-textblock { display: flex; flex-direction: column; }
.df-recette__statbar-title {
font-size: 15px;
font-weight: 600;
color: var(--df-ink);
line-height: 1.2;
}
.df-recette__statbar-sub {
font-size: 12.5px;
color: var(--df-ink-2);
line-height: 1.3;
margin-top: 2px;
}
.df-recette__statbar-key {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--df-ink-3);
margin-bottom: 5px;
}
.df-recette__statbar-val {
display: inline-flex;
align-items: center;
gap: 8px;
}
.df-recette__statbar-time {
font-family: var(--df-serif);
font-size: 21px;
font-weight: 500;
color: var(--df-ink);
line-height: 1.05;
}
.df-recette__statbar-cell--total .df-recette__statbar-key {
color: var(--df-caramel);
}
.df-recette__statbar-cell--total .df-recette__statbar-time {
color: var(--df-caramel-deep);
}
/* Les deux groupes n'existent que pour le mobile, où la barre se scinde en deux
cartes (le taux d'un côté, les temps de l'autre). Sur desktop ils s'effacent :
les cellules redeviennent les enfants directs de la grille. */
.df-recette__statbar-group { display: contents; }
/* :first-child désigne maintenant la première cellule de CHAQUE groupe : on rend
son filet à la première cellule des temps quand elle suit le taux de réussite. */
.df-recette__statbar-group--rate + .df-recette__statbar-group--times .df-recette__statbar-cell:first-child {
border-left: 1px solid var(--df-line);
padding-left: 22px;
}
/* Sur mobile le total devient une ligne à part, en bas de la carte des temps :
il y gagne l'horloge et son libellé long. Dans la barre, la place manque. */
.df-recette__statbar-key-icon,
.df-recette__statbar-key-long { display: none; }
/* Niveau + temps total sous le titre : la barre de stats les porte sur desktop,
cette ligne prend le relais sur mobile (voir la section responsive). */
.df-recette__meta { display: none; }
/* Note : on retire le z-index sur le hero pour que la barre puisse remonter dessus */
.df-recette__hero { position: relative; z-index: 1; }
/* ── Encart « Une fois que c'est prêt » ──
* Regroupe conservation (durée + contexte + comment) + astuce du chef
* dans un seul bloc caramel/rose, à la place des deux callouts séparés.
*/
.df-recette__aftercare {
margin: 40px 0 0;
}
.df-recette__aftercare-title {
font-family: var(--df-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.3px;
color: var(--df-ink);
margin: 0 0 18px;
}
.df-recette__aftercare-card {
background: var(--df-caramel-bg);
border-radius: var(--df-r-lg);
overflow: hidden;
}
.df-recette__aftercare-head {
display: flex;
align-items: center;
gap: 12px;
padding: 22px 24px 14px;
}
.df-recette__aftercare-head-icon {
color: var(--df-caramel);
display: inline-flex;
}
.df-recette__aftercare-heading {
font-family: var(--df-serif);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
margin: 0;
color: var(--df-ink);
}
.df-recette__aftercare-body {
padding: 4px 24px 22px;
}
.df-recette__aftercare-row {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
padding: 12px 0;
}
.df-recette__aftercare-block {
padding: 12px 0 6px;
border-top: 1px dashed rgba(216, 90, 48, .25);
}
.df-recette__aftercare-label {
font-family: var(--df-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--df-ink-3);
flex-shrink: 0;
}
.df-recette__aftercare-value {
margin-left: auto;
font-size: 16px;
color: var(--df-ink-2);
text-align: right;
}
.df-recette__aftercare-duration {
font-family: var(--df-serif);
font-style: italic;
font-weight: 600;
font-size: 24px;
color: var(--df-caramel-deep);
line-height: 1;
margin-right: 4px;
}
.df-recette__aftercare-context {
font-size: 15px;
color: var(--df-ink-2);
}
.df-recette__aftercare-text {
margin-top: 8px;
font-size: 15.5px;
line-height: 1.6;
color: var(--df-ink);
}
.df-recette__aftercare-text p { margin: 0 0 .5em; }
.df-recette__aftercare-text p:last-child { margin-bottom: 0; }
/* Bloc « L'astuce du chef » — fond blanc, séparé par une barre orange */
.df-recette__aftercare-chef {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--df-paper);
padding: 22px 24px 24px;
border-top: 3px solid var(--df-caramel);
}
.df-recette__aftercare-chef-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--df-caramel-bg);
color: var(--df-caramel);
display: inline-flex;
align-items: center;
justify-content: center;
}
.df-recette__aftercare-chef-body { flex: 1; min-width: 0; }
.df-recette__aftercare-chef-label {
font-family: var(--df-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--df-caramel);
margin-bottom: 4px;
}
.df-recette__aftercare-chef-text {
font-size: 15.5px;
line-height: 1.55;
color: var(--df-ink);
}
.df-recette__aftercare-chef-text p { margin: 0 0 .5em; }
.df-recette__aftercare-chef-text p:last-child { margin-bottom: 0; }
/* Mobile : la valeur passe sous le label */
@media (max-width: 600px) {
.df-recette__aftercare-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.df-recette__aftercare-value { margin-left: 0; text-align: left; }
.df-recette__aftercare-title { font-size: 26px; }
.df-recette__aftercare-heading { font-size: 19px; }
.df-recette__aftercare-head,
.df-recette__aftercare-body,
.df-recette__aftercare-chef { padding-left: 18px; padding-right: 18px; }
}
/* ── Galerie « Mes essais » ──
* Les fournées successives d'une même recette, en scroll horizontal avec
* accroche. Pas de librairie : scroll natif + scroll-snap, les puces ne sont
* qu'un raccourci (la galerie reste utilisable sans JS).
*/
.df-recette__essais {
margin: 40px 0 0;
}
.df-recette__essais-title {
font-family: var(--df-serif);
font-size: 30px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.3px;
color: var(--df-ink);
margin: 0 0 18px;
}
.df-recette__essais-track {
display: flex;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
@media (prefers-reduced-motion: reduce) {
.df-recette__essais-track { scroll-behavior: auto; }
}
.df-recette__essais-track::-webkit-scrollbar { display: none; }
.df-recette__essais-item {
flex: 0 0 82%;
scroll-snap-align: center;
aspect-ratio: 4 / 3;
margin: 0;
border-radius: var(--df-r-lg);
overflow: hidden;
background: var(--df-cream-2);
}
.df-recette__essais-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.df-recette__essais-dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 12px;
}
.df-recette__essais-dot {
width: 7px;
height: 7px;
padding: 0;
border: none;
border-radius: 999px;
background: var(--df-line-2);
cursor: pointer;
transition: width .2s ease, background .2s ease;
}
.df-recette__essais-dot.is-active {
width: 18px;
background: var(--df-caramel);
}
@media (max-width: 600px) {
.df-recette__essais-title { font-size: 26px; }
}
/* Sélecteur de portions */
.df-portion {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--df-line);
flex-wrap: wrap;
}
.df-portion__main {
font-family: var(--df-serif);
font-size: 24px;
font-weight: 500;
line-height: 1.15;
color: var(--df-ink);
display: inline-flex;
align-items: baseline;
gap: 8px;
flex: 1;
min-width: 0;
}
.df-portion__label,
.df-portion__base-count,
.df-portion__unit {
font-family: var(--df-serif);
font-weight: 500;
color: var(--df-ink);
}
.df-portion__base-count { font-variant-numeric: tabular-nums; }
.df-portion__counter {
display: inline-flex;
align-items: center;
background: var(--df-caramel-bg);
border-radius: 999px;
padding: 4px 6px;
gap: 2px;
flex-shrink: 0;
box-sizing: border-box;
}
/* Reset agressif : Kadence stylise tous les