/* Cocotte 1.0.0 — noraldinhalal.eu (« Noraldin », magazine de cuisine maison).
   Aubergine nuit (en-tête, pied, boutons), UNE couleur d'accent : le cuivre du logo (filets, numéros, puces, cadres).
   Fonds pâles alternés : blanc, rose cuivré, lilas, crème. Typographie de magazine : Crimson Pro (titres, italique
   pour les mots d'accent et les numéros) + Red Hat Text (texte, capitales espacées des surtitres et étiquettes).
   Motifs discrets : filet de cuivre décalé autour des photos, numéros de fiche, carré cuivre des surtitres.
   Cadrages francs : aucune image arrondie, découpée ni en arche. */

@font-face { font-family: "Crimson Pro"; src: url(../polices/crimson-pro-500-700.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url(../polices/crimson-pro-italique.woff2) format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url(../polices/red-hat-text-400-700.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url(../polices/red-hat-text-italique.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --cct-aubergine: #2B1F33;
    --cct-aubergine-2: #3B2C45;
    --cct-nuit: #1F1626;
    --cct-cuivre: #C47F52;
    --cct-cuivre-clair: #E3AE8A;
    --cct-cuivre-texte: #9A5229;
    --cct-creme: #FAF6F1;
    --cct-rose: #F6EBE3;
    --cct-lilas: #F2EEF4;
    --cct-blanc: #FFFFFF;
    --cct-encre: #221A27;
    --cct-texte: #3A3240;
    --cct-gris: #6A6170;
    --cct-filet: #E7DED7;
    --cct-titre: "Crimson Pro", Georgia, "Times New Roman", serif;
    --cct-corps: "Red Hat Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --cct-barre: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--cct-barre) + 24px); -webkit-text-size-adjust: 100%; }
body.cct { margin: 0; background: var(--cct-blanc); color: var(--cct-texte); font-family: var(--cct-corps); font-size: 17px; line-height: 1.65; font-weight: 400; }
.cct img { max-width: 100%; height: auto; display: block; }
:where(.cct) a { color: inherit; }
.cct h1, .cct h2, .cct h3, .cct h4 { color: var(--cct-encre); font-family: var(--cct-titre); font-weight: 600; line-height: 1.12; }
:where(.cct) :where(h1, h2, h3, h4, p, figure, ol, ul) { margin: 0; }
.cct em { font-style: italic; }
.cct-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cct-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cct-blanc); color: var(--cct-aubergine); padding: 10px 16px; }
.cct-evitement:focus { top: 12px; }
.cct :focus-visible { outline: 2px solid var(--cct-cuivre); outline-offset: 3px; }

.cct-large { max-width: 1240px; margin: 0 auto; padding-inline: 24px; }
.cct-large--lecture { max-width: 820px; }
.cct-large--etroit { max-width: 900px; }

/* ---------- Barre (en-tête collant unique, aubergine) ---------- */
.cct-barre { position: sticky; top: 0; z-index: 60; background: var(--cct-aubergine); color: var(--cct-blanc); }
.cct-barre__rang { display: flex; align-items: center; gap: 24px; height: var(--cct-barre); }
.cct-barre__logo { flex: none; display: block; }
.cct .cct-barre__logo img { width: auto; height: 60px; }
.cct-nav { margin-left: auto; }
.cct-nav__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.cct .cct-nav__liste a { display: block; padding: 10px 14px; color: var(--cct-blanc); text-decoration: none; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; position: relative; }
.cct .cct-nav__liste a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1.5px; background: var(--cct-cuivre-clair); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.cct .cct-nav__liste a:hover::after, .cct .cct-nav__liste a[aria-current]::after { transform: scaleX(1); }
.cct .cct-nav__liste a[aria-current] { color: var(--cct-cuivre-clair); }
.cct-barre__loupe, .cct-barre__burger { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: var(--cct-blanc); border: 1px solid rgba(255, 255, 255, .26); border-radius: 0; cursor: pointer; padding: 0; }
.cct-barre__loupe:hover, .cct-barre__loupe[aria-expanded="true"] { border-color: var(--cct-cuivre-clair); color: var(--cct-cuivre-clair); }
.cct-barre__burger { display: none; }
.cct-barre__traits { display: grid; gap: 5px; width: 20px; }
.cct-barre__traits span { height: 2px; background: currentColor; }
.cct-fouille { background: var(--cct-nuit); padding: 18px 0; }
.cct-fouille__forme { display: flex; gap: 10px; max-width: 760px; }
.cct-fouille__forme input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 16px; border: 1px solid var(--cct-filet); background: var(--cct-blanc); color: var(--cct-encre); border-radius: 0; }
.cct-fouille__forme button { font: inherit; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; padding: 12px 22px; border: 0; background: var(--cct-cuivre-clair); color: var(--cct-nuit); cursor: pointer; border-radius: 0; }
.cct-fouille__forme--page { margin-top: 26px; }
.cct-fouille__forme--page button { background: var(--cct-aubergine); color: var(--cct-blanc); }

/* ---------- Éléments communs ---------- */
.cct-surtitre { display: flex; align-items: center; gap: 12px; font-family: var(--cct-corps); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cct-cuivre-texte); margin-bottom: 14px; }
.cct-surtitre::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--cct-cuivre); }
.cct .cct-titre { font-size: clamp(1.9rem, 2.9vw, 2.7rem); letter-spacing: -.01em; font-weight: 500; }
.cct .cct-titre em, .cct .cct-ouverture__titre em, .cct .cct-titre--moyen em { font-weight: 400; color: var(--cct-cuivre-texte); }
.cct .cct-titre--moyen { font-size: clamp(1.55rem, 2.2vw, 2.05rem); }
.cct .cct-titre a { text-decoration: none; }
.cct-chapeau { margin-bottom: 40px; max-width: 760px; }
.cct-chapeau--ligne { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--cct-filet); }
.cct .cct-tout { display: inline-flex; align-items: center; gap: 10px; color: var(--cct-aubergine); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid var(--cct-cuivre); }
.cct .cct-tout::after { content: "→"; letter-spacing: 0; transition: transform .2s ease; }
.cct .cct-tout:hover { color: var(--cct-cuivre-texte); }
.cct .cct-tout:hover::after { transform: translateX(3px); }
.cct .cct-bouton { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; background: var(--cct-aubergine); color: var(--cct-blanc); border: 1.5px solid var(--cct-aubergine); border-radius: 0; font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.cct .cct-bouton:hover { background: var(--cct-aubergine-2); border-color: var(--cct-aubergine-2); }
.cct .cct-bouton--trait { background: transparent; color: var(--cct-aubergine); }
.cct .cct-bouton--trait:hover { background: var(--cct-blanc); color: var(--cct-aubergine); }
.cct-etiq { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cct-gris); margin-bottom: 8px; line-height: 1.3; }
.cct-ariane { font-size: .86rem; color: var(--cct-gris); margin-bottom: 18px; }
.cct .cct-ariane a { color: var(--cct-gris); text-decoration: none; }
.cct .cct-ariane a:hover { color: var(--cct-aubergine); text-decoration: underline; }

.cct-section { padding: 88px 0; position: relative; }
.cct-section--serree { padding: 48px 0 64px; }
.cct-teinte--blanc { background: var(--cct-blanc); }
.cct-teinte--rose { background: var(--cct-rose); }
.cct-teinte--lilas { background: var(--cct-lilas); }
.cct-teinte--creme { background: var(--cct-creme); }

/* ---------- Fiches (cartes d'article) ---------- */
.cct-fiche { display: flex; flex-direction: column; min-width: 0; }
.cct-fiche__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cct-rose); }
.cct .cct-fiche__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cct-fiche:hover .cct-fiche__image img { transform: scale(1.035); }
.cct-fiche__image--vide { display: flex; align-items: center; justify-content: center; }
.cct-fiche__sans { font-family: var(--cct-titre); font-style: italic; font-size: 1.4rem; color: var(--cct-cuivre-texte); }
.cct-fiche__corps { padding-top: 16px; }
.cct .cct-fiche__titre { font-size: 1.28rem; line-height: 1.22; font-weight: 600; }
.cct .cct-fiche__titre a { text-decoration: none; background-image: linear-gradient(var(--cct-cuivre), var(--cct-cuivre)); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; }
.cct .cct-fiche__titre a:hover { background-size: 100% 1.5px; }
.cct-fiche__chapo { margin-top: 10px; color: var(--cct-texte); font-size: .98rem; line-height: 1.58; }
.cct-fiche__date { margin-top: 10px; font-size: .84rem; color: var(--cct-gris); }
.cct-fiche--large .cct-fiche__image { aspect-ratio: 16 / 10; }
.cct-fiche--large .cct-fiche__corps { padding-top: 24px; max-width: 40em; }
.cct .cct-fiche--large .cct-fiche__titre { font-size: clamp(1.75rem, 2.6vw, 2.4rem); line-height: 1.1; font-weight: 500; }
.cct-fiche--large .cct-fiche__chapo { font-size: 1.06rem; margin-top: 14px; }
.cct-fiche--ligne { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start; }
.cct-fiche--ligne .cct-fiche__image { aspect-ratio: 1; }
.cct-fiche--ligne .cct-fiche__corps { padding-top: 0; }
.cct .cct-fiche--ligne .cct-fiche__titre { font-size: 1.16rem; }
.cct-fiche--ligne .cct-fiche__chapo { font-size: .93rem; margin-top: 6px; }
.cct-fiche--haute .cct-fiche__image { aspect-ratio: 4 / 5; }
.cct .cct-fiche--haute .cct-fiche__titre { font-size: clamp(1.45rem, 2vw, 1.8rem); font-weight: 500; }
.cct-fiche--carre .cct-fiche__image { aspect-ratio: 1; }

.cct-rangee { display: grid; gap: 40px 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cct-rangee--1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.cct-rangee--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cct-rangee--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cct-grille { display: grid; gap: 44px 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Ouverture (hero) : deux colonnes, texte à gauche, photo fixe à droite dans un filet de cuivre décalé ---------- */
.cct-ouverture { background: var(--cct-creme); padding: 56px 0 72px; position: relative; overflow: hidden; }
.cct-ouverture__grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 72px;
    grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". image" "sur image" "titre image" "chapo image" "boutons image" ". image"; }
.cct-ouverture__texte { display: contents; }
.cct-ouverture__sur { grid-area: sur; }
.cct .cct-ouverture__titre { grid-area: titre; font-size: clamp(2.7rem, 4.8vw, 4.5rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 500; }
.cct-ouverture__titre em { display: block; }
.cct-ouverture__chapo { grid-area: chapo; margin-top: 24px; font-size: 1.14rem; line-height: 1.6; color: var(--cct-texte); max-width: 31em; }
.cct-ouverture__boutons { grid-area: boutons; display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.cct-ouverture__image { grid-area: image; margin: 0 18px 18px 0; position: relative; height: clamp(380px, calc(100vh - var(--cct-barre) - 230px), 600px); }
.cct-ouverture__image::before { content: ""; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1.5px solid var(--cct-cuivre); pointer-events: none; }
.cct .cct-ouverture__image img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--cct-rose); }

/* ---------- Au sommaire : quatre rubriques, photos fixes ---------- */
.cct-sommaire { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cct .cct-sommaire__rub a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "image image" "num nom" "num nb"; column-gap: 14px; text-decoration: none; color: var(--cct-encre); }
.cct-sommaire__image { grid-area: image; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cct-rose); margin-bottom: 18px; }
.cct .cct-sommaire__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cct-sommaire__rub a:hover .cct-sommaire__image img { transform: scale(1.04); }
.cct-sommaire__num { grid-area: num; font-family: var(--cct-titre); font-style: italic; font-size: 2.3rem; line-height: .9; color: var(--cct-cuivre-texte); padding-right: 14px; border-right: 1px solid var(--cct-filet); }
.cct-sommaire__nom { grid-area: nom; font-family: var(--cct-titre); font-size: 1.55rem; font-weight: 600; line-height: 1.05; }
.cct-sommaire__nb { grid-area: nb; font-size: .82rem; color: var(--cct-gris); margin-top: 4px; }
.cct-sommaire__rub a:hover .cct-sommaire__nom { color: var(--cct-cuivre-texte); }

/* ---------- À la une : une grande + une pile ---------- */
.cct-une { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: start; }
.cct-une--seule { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.cct-une__pile { display: grid; gap: 32px; padding-left: 40px; border-left: 1px solid var(--cct-filet); }
.cct-une__pile .cct-fiche + .cct-fiche { padding-top: 32px; border-top: 1px solid var(--cct-filet); }

/* ---------- Recettes : fiches numérotées ---------- */
.cct-menu { list-style: none; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cct-menu--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cct-menu--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.cct-menu--1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.cct-carte { background: var(--cct-blanc); border: 1px solid var(--cct-filet); display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 22px; }
.cct-carte__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cct-rose); }
.cct .cct-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cct-carte:hover .cct-carte__image img { transform: scale(1.04); }
.cct-carte__num { margin: 18px 6px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--cct-filet); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cct-cuivre-texte); }
.cct-carte__num sup { font-size: .75em; vertical-align: .3em; }
.cct .cct-carte__titre { margin: 0 6px; font-size: 1.24rem; line-height: 1.22; }
.cct .cct-carte__titre a { text-decoration: none; }
.cct .cct-carte__titre a:hover { color: var(--cct-cuivre-texte); }

/* ---------- Astuces : les bons gestes ---------- */
.cct-gestes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.cct-geste { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: start; padding: 24px 0; border-top: 1px solid rgba(34, 26, 39, .14); }
.cct-geste__image { display: block; aspect-ratio: 1; overflow: hidden; background: var(--cct-blanc); }
.cct .cct-geste__image img { width: 100%; height: 100%; object-fit: cover; }
.cct-geste__num { font-family: var(--cct-titre); font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--cct-cuivre-texte); margin-bottom: 6px; }
.cct .cct-geste__titre { font-size: 1.24rem; line-height: 1.22; }
.cct .cct-geste__titre a { text-decoration: none; }
.cct .cct-geste__titre a:hover { color: var(--cct-cuivre-texte); }
.cct-geste__chapo { margin-top: 8px; font-size: .94rem; line-height: 1.55; color: var(--cct-texte); }

/* ---------- Produits : le garde-manger ---------- */
.cct-garde { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.cct-garde--seul { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.cct-garde__pile { display: grid; gap: 0; }
.cct-garde__pile .cct-fiche { padding: 26px 0; border-top: 1px solid var(--cct-filet); }
.cct-garde__pile .cct-fiche:first-child { padding-top: 0; border-top: 0; }
.cct .cct-garde__pile .cct-fiche--ligne { grid-template-columns: 168px minmax(0, 1fr); gap: 26px; }
.cct .cct-garde__pile .cct-fiche--ligne .cct-fiche__image { aspect-ratio: 4 / 3; }
.cct .cct-garde__pile .cct-fiche__titre { font-size: 1.32rem; }
/* Peu de produits : la grande fiche passe en 3:2 et la pile grossit, pour garder deux colonnes de même hauteur */
.cct-garde--court { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.cct-garde--court > .cct-fiche--haute .cct-fiche__image { aspect-ratio: 3 / 2; }
.cct .cct-garde--court .cct-garde__pile .cct-fiche--ligne { grid-template-columns: 240px minmax(0, 1fr); }

/* ---------- Le fil ---------- */
.cct-fil { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.cct-fil li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0 18px 24px; border-top: 1px solid var(--cct-filet); position: relative; }
.cct-fil li::before { content: ""; position: absolute; left: 0; top: 27px; width: 8px; height: 8px; background: var(--cct-cuivre); }
.cct-fil__meta { font-size: .8rem; color: var(--cct-gris); letter-spacing: .02em; }
.cct .cct-fil a { text-decoration: none; color: var(--cct-encre); font-family: var(--cct-titre); font-size: 1.22rem; font-weight: 600; line-height: 1.25; }
.cct .cct-fil a:hover { color: var(--cct-cuivre-texte); }

/* ---------- La rédaction ---------- */
.cct-redaction { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: center; max-width: 940px; }
.cct-redaction__portrait { display: block; width: 220px; height: 220px; overflow: hidden; border-bottom: 4px solid var(--cct-cuivre); }
/* Simple Author Box injecte en ligne img.sab-custom-avatar{max-width:75px} : règle plus spécifique, l'image remplit son cadre */
.cct .cct-redaction__portrait img.avatar { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.cct .cct-redaction__texte h2 a { text-decoration: none; }
.cct .cct-redaction__texte h2 a:hover { color: var(--cct-cuivre-texte); }
.cct-redaction__bio { margin: 14px 0 20px; font-size: 1.02rem; }

/* ---------- Texte de fond + FAQ ---------- */
.cct-fond { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.cct-fond__texte { background: var(--cct-blanc); padding: 40px 44px; border-top: 3px solid var(--cct-cuivre); }
.cct-teinte--blanc .cct-fond__texte { background: var(--cct-creme); }
.cct-fond__texte p { margin-top: 14px; }
.cct .cct-fond__faq-titre { font-size: 1.45rem; font-weight: 500; margin-bottom: 8px; }
.cct-fond__faq details { border-bottom: 1px solid rgba(34, 26, 39, .14); }
.cct-fond__faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 700; color: var(--cct-encre); position: relative; }
.cct-fond__faq summary::-webkit-details-marker { display: none; }
.cct-fond__faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.4rem; color: var(--cct-cuivre-texte); font-weight: 400; }
.cct-fond__faq details[open] summary::after { content: "–"; }
.cct-fond__faq details p { padding: 0 0 16px; }
.cct .cct-fond__faq a, .cct .cct-fond__texte a { color: var(--cct-aubergine); text-decoration-color: var(--cct-cuivre); }

/* ---------- Rubrique (en-tête) ---------- */
.cct-rub-tete { background: var(--cct-creme); padding: 40px 0 48px; position: relative; }
.cct-rub-tete__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.cct-rub-tete__num { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cct-cuivre-texte); margin-bottom: 14px; }
.cct-rub-tete__num span { color: var(--cct-gris); }
.cct .cct-rub-tete__titre { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 500; }
.cct .cct-rub-tete__titre--moyen { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.cct-rub-tete__intro { margin-top: 18px; font-size: 1.1rem; line-height: 1.6; max-width: 34em; }
.cct-rub-tete__nb { margin-top: 14px; color: var(--cct-gris); font-size: .95rem; }
.cct-rub-tete__nb strong { font-family: var(--cct-titre); font-size: 1.55rem; color: var(--cct-aubergine); font-weight: 600; margin-right: 2px; }
.cct-rub-tete__image { margin: 0 18px 18px 0; position: relative; height: 300px; }
.cct-rub-tete__image::before { content: ""; position: absolute; top: 18px; left: 18px; right: -18px; bottom: -18px; border: 1.5px solid var(--cct-cuivre); pointer-events: none; }
.cct .cct-rub-tete__image img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.cct-rub-tete__ligne { display: flex; align-items: center; gap: 28px; }
.cct-rub-tete__portrait { flex: none; width: 128px; height: 128px; overflow: hidden; border-bottom: 4px solid var(--cct-cuivre); }
.cct .cct-rub-tete__portrait img.avatar { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.cct-rub-tete__ligne .cct-rub-tete__intro { margin-top: 10px; }
.cct-perdu { padding-bottom: 80px; }
.cct-perdu .cct-rub-tete__intro { margin-top: 14px; }

/* Onglets des rubriques (bas d'article, rubriques, 404) */
.cct-onglets { display: flex; flex-wrap: wrap; gap: 12px; }
.cct .cct-onglets__lien { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px; border: 1px solid var(--cct-filet); background: var(--cct-blanc); text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cct-encre); }
.cct-onglets__lien span { font-family: var(--cct-titre); font-style: italic; font-size: 1.15rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--cct-cuivre-texte); }
.cct .cct-onglets__lien:hover, .cct .cct-onglets__lien[aria-current] { border-color: var(--cct-cuivre); color: var(--cct-cuivre-texte); }
.cct-onglets--perdu { margin-top: 28px; }

/* Pagination */
.cct-pages { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cct .cct-pages .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--cct-filet); text-decoration: none; color: var(--cct-encre); font-weight: 600; }
.cct .cct-pages .page-numbers.current { background: var(--cct-aubergine); border-color: var(--cct-aubergine); color: var(--cct-blanc); }
.cct .cct-pages a.page-numbers:hover { border-color: var(--cct-cuivre); color: var(--cct-cuivre-texte); }

/* ---------- Article « carnet de cuisine » ---------- */
.cct-carnet-tete { background: linear-gradient(var(--cct-creme) 0, var(--cct-creme) calc(100% - 170px), var(--cct-blanc) calc(100% - 170px)); padding-top: 36px; }
.cct-carnet-tete--sans-image { background: var(--cct-creme); padding-bottom: 48px; }
.cct-carnet-tete__texte { text-align: center; }
.cct-carnet-tete__texte .cct-ariane { margin-bottom: 26px; }
.cct-carnet-tete__rub { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cct-carnet-tete__num { font-family: var(--cct-titre); font-style: italic; font-size: 1.4rem; letter-spacing: 0; color: var(--cct-cuivre-texte); padding-right: 12px; border-right: 1px solid var(--cct-filet); line-height: 1; font-weight: 400; }
.cct .cct-carnet-tete__rub a { text-decoration: none; color: var(--cct-encre); }
.cct .cct-carnet-tete__rub a:hover { color: var(--cct-cuivre-texte); }
.cct .cct-carnet-tete__titre { font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.018em; font-weight: 500; max-width: 18em; margin: 0 auto; }
.cct-signature { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 24px; font-size: .93rem; line-height: 1.4; }
.cct-signature__portrait { flex: none; width: 44px; height: 44px; overflow: hidden; }
.cct .cct-signature__portrait img.avatar { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.cct .cct-signature a { color: var(--cct-encre); font-weight: 700; text-decoration: none; }
.cct .cct-signature a:hover { text-decoration: underline; text-decoration-color: var(--cct-cuivre); }
.cct-signature__sep { width: 6px; height: 6px; background: var(--cct-cuivre); }
.cct-signature__date { color: var(--cct-gris); }
.cct-carnet-tete__cadre { max-width: 1100px; margin-top: 40px; }
.cct-carnet-tete__image { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cct-rose); }
.cct .cct-carnet-tete__image img { width: 100%; height: 100%; object-fit: cover; }

.cct-carnet-corps { display: grid; grid-template-columns: 270px minmax(0, 720px); gap: 72px; justify-content: center; padding-top: 64px; padding-bottom: 80px; }
.cct-rail { align-self: stretch; }
.cct-rail__collant { position: sticky; top: calc(var(--cct-barre) + 24px); align-self: start; display: grid; gap: 30px; }
.cct-releve { margin: 0; border-top: 3px solid var(--cct-aubergine); }
.cct-releve div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--cct-filet); font-size: .9rem; }
.cct-releve dt { color: var(--cct-gris); }
.cct-releve dd { margin: 0; font-weight: 700; color: var(--cct-encre); text-align: right; }
.cct .cct-releve dd a { text-decoration: none; color: var(--cct-cuivre-texte); }
.cct-rail__titre { font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cct-encre); padding-bottom: 10px; border-bottom: 1px solid var(--cct-encre); }
.cct-rail__memes ul { list-style: none; padding: 0; }
.cct-rail__memes li { position: relative; padding: 11px 0 11px 18px; border-bottom: 1px solid var(--cct-filet); font-family: var(--cct-titre); font-size: 1.08rem; font-weight: 600; line-height: 1.25; }
.cct-rail__memes li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; background: var(--cct-cuivre); }
.cct .cct-rail__memes a { text-decoration: none; color: var(--cct-encre); }
.cct .cct-rail__memes a:hover { color: var(--cct-cuivre-texte); }

.cct-carnet-corps__texte { min-width: 0; }
.cct-encuisine { margin-top: 48px; padding: 26px 30px; background: var(--cct-rose); border-left: 3px solid var(--cct-cuivre); }
.cct-encuisine__titre { font-family: var(--cct-titre); font-style: italic; font-size: 1.4rem; color: var(--cct-encre); margin-bottom: 8px; }
.cct-encuisine p:last-child { font-size: .98rem; }

/* Texte de l'article et des pages (contenu et liens intacts : seul l'habillage change) */
.cct-texte { min-width: 0; font-size: 1.08rem; line-height: 1.78; color: var(--cct-texte); overflow-wrap: break-word; }
.cct-texte > * + * { margin-top: 1.1em; }
.cct .cct-texte h2 { font-size: clamp(1.65rem, 2.4vw, 2.1rem); font-weight: 600; margin-top: 2em; padding-top: 22px; position: relative; }
.cct .cct-texte h2::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; background: var(--cct-cuivre); }
.cct .cct-texte h3 { font-size: 1.38rem; margin-top: 1.7em; }
.cct .cct-texte h4 { font-size: 1.16rem; margin-top: 1.4em; }
.cct .cct-texte a { color: var(--cct-aubergine); text-decoration: underline; text-decoration-color: var(--cct-cuivre); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cct .cct-texte a:hover { color: var(--cct-cuivre-texte); }
.cct-texte ul, .cct-texte ol { padding-left: 1.3em; }
.cct-texte li + li { margin-top: .35em; }
.cct-texte ul li::marker { color: var(--cct-cuivre); }
.cct-texte ol li::marker { color: var(--cct-cuivre-texte); font-weight: 700; }
.cct-texte strong { color: var(--cct-encre); }
.cct-texte blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--cct-cuivre); font-family: var(--cct-titre); font-style: italic; font-size: 1.25rem; color: var(--cct-encre); }
.cct-texte figure { margin: 1.6em 0; }
.cct-texte figcaption { font-size: .88rem; color: var(--cct-gris); margin-top: 8px; }
.cct-texte img { border-radius: 0; }
.cct-texte table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.cct-texte th, .cct-texte td { padding: 10px 12px; border: 1px solid var(--cct-filet); text-align: left; vertical-align: top; }
.cct-texte thead th, .cct-texte tr:first-child th { background: var(--cct-rose); color: var(--cct-encre); }
.cct-texte iframe, .cct-texte video { max-width: 100%; }
.cct-texte .wp-block-table { overflow-x: auto; }
/* Encadrés écrits en ligne dans le contenu (« L'essentiel », conseils, vidéos) : seul l'habillage change */
.cct .cct-texte :is(div, blockquote, aside)[style*="border-left"] { background-color: var(--cct-rose) !important; border-left: 3px solid var(--cct-cuivre) !important; border-radius: 0 !important; }
.cct .cct-texte #tool-interactive-area { background-color: var(--cct-lilas) !important; border: 1px solid var(--cct-filet); border-radius: 0 !important; box-shadow: none !important; }
.cct .cct-texte #tool-interactive-area button, .cct .cct-texte button[style*="#dc2626"] { background-color: var(--cct-aubergine) !important; color: var(--cct-blanc) !important; border: 0; border-radius: 0 !important; font-family: var(--cct-corps); }
.cct .cct-texte #tool-interactive-area select, .cct .cct-texte #tool-interactive-area input { border-radius: 0 !important; font-family: var(--cct-corps); }
.cct .cct-texte [style*="border-radius:12px"], .cct .cct-texte [style*="padding-bottom:56.25%"] { border-radius: 0 !important; }
/* Sommaire Easy TOC */
.cct .cct-texte #ez-toc-container { background: var(--cct-creme); border: 1px solid var(--cct-filet); border-top: 3px solid var(--cct-aubergine); border-radius: 0; box-shadow: none; padding: 18px 24px; width: 100%; margin: 0 0 1.8em; font-family: var(--cct-corps); }
.cct .cct-texte #ez-toc-container .ez-toc-title { font-family: var(--cct-corps); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cct-encre); }
.cct .cct-texte #ez-toc-container ul { padding-left: 0; margin: 10px 0 0; }
.cct .cct-texte #ez-toc-container li { margin: 0; padding: 4px 0; font-size: .97rem; line-height: 1.45; }
.cct .cct-texte #ez-toc-container a { color: var(--cct-aubergine); text-decoration: none; }
.cct .cct-texte #ez-toc-container a:hover { color: var(--cct-cuivre-texte); text-decoration: underline; }
.cct .cct-texte #ez-toc-container .ez-toc-title-toggle a { border: 0; background: transparent; }
/* Encadrés « A lire » (Inline Related Posts, styles écrits en ligne par l'extension) */
.cct .cct-texte a:has(.ctaText) { background-color: var(--cct-creme) !important; border: 1px solid var(--cct-filet) !important; border-left: 3px solid var(--cct-cuivre) !important; text-decoration: none !important; opacity: 1 !important; }
.cct .cct-texte a:has(.ctaText) .ctaText { color: var(--cct-cuivre-texte) !important; text-decoration: none !important; font-family: var(--cct-corps); letter-spacing: .06em; }
.cct .cct-texte a:has(.ctaText) .postTitle { color: var(--cct-aubergine) !important; font-family: var(--cct-titre); text-decoration-color: var(--cct-cuivre) !important; }
/* Boîte d'auteur (Simple Author Box) */
.cct .cct-texte .saboxplugin-wrap { border: 1px solid var(--cct-filet) !important; border-radius: 0; background: var(--cct-creme); margin-top: 2em; }
.cct .cct-texte .saboxplugin-wrap .saboxplugin-gravatar img { border-radius: 0 !important; }
.cct .cct-texte .saboxplugin-wrap .saboxplugin-authorname a { color: var(--cct-encre) !important; font-family: var(--cct-titre); text-decoration: none; }
.cct .cct-texte .saboxplugin-wrap .saboxplugin-desc p { font-size: .97rem; }
.cct .cct-texte .sr-identite-editoriale { border-left: 3px solid var(--cct-cuivre); background: var(--cct-creme); padding: 14px 18px; opacity: 1; color: var(--cct-texte); }

/* ---------- Pages ---------- */
.cct-page__tete { background: var(--cct-creme); padding: 40px 0 48px; }
.cct .cct-page__titre { font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight: 500; letter-spacing: -.015em; }
.cct-page__corps { padding-top: 48px; padding-bottom: 80px; }

/* ---------- Pied (aubergine nuit, sans filet décoratif en haut) ---------- */
.cct-pied { background: var(--cct-nuit); color: rgba(255, 255, 255, .8); padding: 68px 0 28px; font-size: .95rem; }
.cct-pied__grille { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr); gap: 56px; }
.cct .cct-pied__logo img { width: auto; height: 70px; }
.cct-pied__marque p { margin-top: 16px; max-width: 28em; }
.cct-pied__titre { font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cct-cuivre-clair); margin-bottom: 14px; }
.cct-pied ul { list-style: none; padding: 0; }
.cct-pied li { padding: 5px 0; }
.cct .cct-pied a { color: var(--cct-blanc); text-decoration: none; }
.cct .cct-pied a:hover { color: var(--cct-cuivre-clair); text-decoration: underline; }
.cct-pied__bas { margin-top: 52px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .84rem; color: rgba(255, 255, 255, .62); }

/* ---------- Écrans moyens ---------- */
@media (max-width: 1100px) {
    .cct-barre__burger { display: inline-flex; }
    .cct-nav { position: absolute; left: 0; right: 0; top: var(--cct-barre); background: var(--cct-aubergine); border-top: 1px solid rgba(255, 255, 255, .14); display: none; margin: 0; }
    .cct-nav.cct-ouvert { display: block; }
    .cct-nav__liste { flex-direction: column; align-items: stretch; padding: 8px 24px 18px; gap: 0; }
    .cct .cct-nav__liste a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .cct .cct-nav__liste a::after { left: 0; right: auto; width: 40px; bottom: -1px; }
    .cct-barre__loupe { margin-left: auto; }
    .cct-grille, .cct-menu, .cct-rangee--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cct-menu--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cct-carnet-corps { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 1000px) {
    .cct-section { padding: 64px 0; }
    .cct-une, .cct-fond, .cct-garde, .cct-garde--court { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .cct-une__pile { padding-left: 0; border-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .cct-une__pile .cct-fiche + .cct-fiche { padding-top: 0; border-top: 0; }
    .cct-sommaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cct-gestes, .cct-fil { grid-template-columns: minmax(0, 1fr); }
    .cct-rangee, .cct-rangee--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cct-rangee--3 > :last-child { display: none; }
    .cct-rub-tete__grille { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
    .cct-carnet-corps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 780px; }
    .cct-rail { order: 2; margin-top: 48px; }
    .cct-rail__collant { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .cct-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile : ouverture dans l'ordre surtitre → H1 → chapô → image → boutons ---------- */
@media (max-width: 760px) {
    body.cct { font-size: 16.5px; }
    :root { --cct-barre: 66px; }
    .cct .cct-barre__logo img { height: 44px; }
    .cct-barre__rang { gap: 12px; }
    .cct-section { padding: 52px 0; }
    .cct-large { padding-inline: 18px; }
    .cct-chapeau { margin-bottom: 28px; }
    .cct-ouverture { padding: 30px 0 40px; }
    .cct-ouverture__grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sur" "titre" "chapo" "image" "boutons"; }
    .cct .cct-ouverture__titre { font-size: clamp(2.4rem, 11vw, 3rem); }
    .cct-ouverture__chapo { margin-top: 16px; font-size: 1.04rem; }
    .cct-ouverture__image { height: auto; aspect-ratio: 4 / 4.2; margin: 28px 12px 12px 0; }
    .cct-ouverture__image::before { top: 12px; left: 12px; right: -12px; bottom: -12px; }
    .cct-ouverture__boutons { margin-top: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
    .cct .cct-ouverture__boutons .cct-bouton { flex: 1 1 auto; padding: 14px 16px; font-size: .78rem; letter-spacing: .12em; }
    .cct-sommaire { gap: 26px 16px; }
    .cct-sommaire__num { font-size: 1.7rem; padding-right: 10px; }
    .cct .cct-sommaire__rub a { column-gap: 10px; }
    .cct-sommaire__nom { font-size: 1.25rem; }
    .cct-grille, .cct-menu, .cct-menu--3, .cct-menu--2, .cct-rangee, .cct-rangee--2, .cct-rangee--4, .cct-une__pile { grid-template-columns: minmax(0, 1fr); }
    .cct-rangee--3 > :last-child { display: flex; }
    .cct-rangee .cct-fiche--carre { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
    .cct-rangee .cct-fiche--carre .cct-fiche__corps { padding-top: 0; }
    .cct-geste { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
    .cct-geste__chapo { display: none; }
    .cct .cct-garde__pile .cct-fiche--ligne, .cct .cct-garde--court .cct-garde__pile .cct-fiche--ligne { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
    .cct .cct-garde__pile .cct-fiche--ligne .cct-fiche__image { aspect-ratio: 1; }
    .cct-garde__pile .cct-fiche__chapo { display: none; }
    .cct .cct-garde__pile .cct-fiche__titre { font-size: 1.16rem; }
    .cct-redaction { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cct-redaction__portrait { width: 160px; height: 160px; }
    .cct .cct-redaction__portrait img.avatar { width: 100%; height: 100%; max-width: none; }
    .cct-fond__texte { padding: 28px 22px; }
    .cct-rub-tete__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cct-rub-tete__image { height: auto; aspect-ratio: 16 / 9; margin: 0 12px 12px 0; }
    .cct-rub-tete__image::before { top: 12px; left: 12px; right: -12px; bottom: -12px; }
    .cct-rub-tete__ligne { flex-direction: column; align-items: flex-start; gap: 18px; }
    .cct-rub-tete__portrait { width: 104px; height: 104px; }
    .cct .cct-rub-tete__portrait img.avatar { max-width: none; }
    .cct-carnet-tete { padding-top: 24px; background: linear-gradient(var(--cct-creme) 0, var(--cct-creme) calc(100% - 90px), var(--cct-blanc) calc(100% - 90px)); }
    .cct-carnet-tete__cadre { margin-top: 28px; }
    .cct-carnet-tete__image { aspect-ratio: 4 / 3; }
    .cct-carnet-corps { padding-top: 40px; padding-bottom: 56px; }
    .cct-rail__collant { grid-template-columns: minmax(0, 1fr); }
    .cct-encuisine { padding: 22px 20px; }
    .cct-pied__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .cct-fouille__forme button { padding: 12px 14px; }
    .cct .cct-onglets__lien { padding: 10px 14px 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .cct *, .cct *::before, .cct *::after { transition: none !important; }
}