/* La charte recette — Novazeo, 26/09/2026.
   Maquettes : Figma « Pierrot Coquillages – Charte recette ».
   Mémo d'intégration du 26/09/2026, §3 (tokens), §4 (composants), §5 à §8.

   Cette feuille s'ajoute à recettes.css (filtre historique, champs de la
   fiche) : elle ne la remplace pas, et ne s'applique qu'aux pages de recettes
   et à la recherche (voir la garde d'enqueue dans gabarits.php).

   Point de rupture : 1000 px, celui du thème Salient — pas 768 px. Les
   maquettes mobiles sont à 390 px, les desktop à 1200 px ; l'intégration
   utilise le conteneur Salient (1300 px), comme convenu au mémo §3. */

/* --- La police de la charte ---------------------------------------------
   Le Figma (variables « Recette/… ») demande OPEN SANS. Le thème ne sert que
   Poppins et Cormorant Garamond : sans ces @font-face, nos composants
   retombaient sur la police du thème — le défaut le plus courant d'une
   intégration de charte, et il touchait ici les quatre écrans.

   La police est HÉBERGÉE avec l'extension (Open Sans, licence Apache 2.0),
   pas appelée chez Google : pas de requête vers un tiers, donc pas de
   question de consentement, et pas de dépendance réseau au rendu.

   Un seul fichier variable par sous-ensemble couvre les quatre graisses
   utilisées (400, 600, 700, 800) : 42 Ko pour le latin, 30 Ko pour le
   latin étendu (« œ », caractères accentués rares), au lieu de huit fichiers
   statiques. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Nos composants — et EUX SEULS : les 179 articles du blog gardent Poppins.
   Le sélecteur vise les classes « pc-… », c'est-à-dire exactement ce que
   cette charte dessine, titres compris. */
[class^="pc-"],
[class*=" pc-"] {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root {
  --pc-marine: #124864;
  /* L'orange de la maquette (#e84b17) donne 3,85:1 en blanc sur fond, sous le
     seuil AA de 4,5:1 pour du texte de 14-15 px (mémo §3). On retient le
     #c9440f du thème — 4,87:1 — au repos comme au survol. Le token
     --pc-orange-maquette est conservé pour les usages non textuels. */
  --pc-orange: #c9440f;
  --pc-orange-maquette: #e84b17;
  --pc-bleu-menu: #004358;
  --pc-ecume: #e7eff4;
  --pc-anthracite: #333333;
  --pc-gris-texte: #5b6b75;
  --pc-ligne: #dde5ea;
  --pc-rayon: 4px;
  --pc-rayon-pastille: 18px;
}

/* --- Briques communes ---------------------------------------------------- */

/* `line-height` explicite partout où la charte fixe une valeur : Salient pose
   un interligne de 27 px sur le texte courant, qui s'appliquait à nos libellés
   de 11 px comme à nos métas de 13 px (mesuré au navigateur). */
.pc-libelle,
.pc-pastilles__titre {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3; /* Figma : Recette/Libellé */
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pc-gris-texte);
  margin: 0 0 .5rem;
  padding-bottom: 0;
}

/* La signature du pied de page du site : première syllabe en italique
   regular, le reste en capitales très grasses (mémo §3). */
.pc-signature {
  margin: 0 0 .75rem;
  padding-bottom: 0;
  font-size: 15px;
  letter-spacing: .04em; /* Figma : 4 % */
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pc-marine);
}
.pc-signature em { font-style: italic; font-weight: 400; text-transform: uppercase; }

/* Un <button> n'hérite PAS de la police de la page : sans cette règle, les
   boutons « Filtrer » et « Rechercher » sortaient en Arial 14 px (mesuré au
   navigateur), au milieu d'une page en Poppins. `inherit` suit la police du
   thème, quelle qu'elle devienne — jamais un nom de police écrit ici.

   NOTE : le mémo §3 annonce « Open Sans, la police du thème ». Mesuré sur le
   site, le thème sert Poppins pour le texte et Cormorant Garamond pour les
   titres ; Open Sans n'est pas chargée. On suit donc la police RÉELLE du
   thème, et cette divergence est remontée pour arbitrage sur le Figma. */
.pc-bouton,
.pc-filtres__champ select,
.pc-recherche__champ input[type="search"],
.pc-filtres__bascule {
  font-family: inherit;
}

/* `!important` sur ces deux seules propriétés, et scopé à nos boutons : le
   thème applique ses propres taille et graisse de bouton (mesuré : 14 px/600)
   par une règle plus spécifique que la nôtre. La charte demande 15 px/700 —
   c'est aussi ce qui tient le contraste AA du bouton orange, calculé pour du
   texte gras (mémo §3). */
.pc-bouton {
  display: inline-block;
  border-radius: var(--pc-rayon);
  padding: 13px 22px;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.2;
  text-decoration: none;
  min-height: 44px; /* cible tactile (mémo §3) */
  box-sizing: border-box;
}
.pc-bouton--orange,
.pc-bouton--orange:hover,
.pc-bouton--orange:focus { background: var(--pc-orange); color: #fff; }
.pc-bouton--marine,
.pc-bouton--marine:hover,
.pc-bouton--marine:focus { background: var(--pc-marine); color: #fff; border: 0; }
/* Bouton secondaire du bandeau marine : fond blanc, texte marine (planche 02). */
.pc-bouton--secondaire,
.pc-bouton--secondaire:hover,
.pc-bouton--secondaire:focus { background: #fff; color: var(--pc-marine); }
.pc-commande__boutons { display: flex; flex-wrap: wrap; gap: 12px; }

.pc-lien-discret { color: var(--pc-marine); text-decoration: underline; font-size: 14px; }

/* Le focus clavier doit rester visible partout (mémo §3). */
.pc-bouton:focus-visible,
.pc-pastille:focus-visible,
.pc-onglet:focus-visible,
.pc-carte__lien:focus-visible { outline: 2px solid var(--pc-marine); outline-offset: 2px; }

.pc-fil {
  font-size: 13px;
  color: var(--pc-gris-texte);
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.pc-fil a { color: var(--pc-gris-texte); text-decoration: none; }
.pc-fil a:hover { text-decoration: underline; }

/* --- Introduction -------------------------------------------------------- */

.pc-intro {
  background: var(--pc-ecume);
  border-radius: var(--pc-rayon);
  padding: 32px;
  margin: 0 0 32px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.pc-intro__texte { flex: 1 1 auto; }
.pc-intro__titre {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2; /* Figma : Recette/H1 */
  margin: 0 0 12px;
  color: var(--pc-anthracite);
}
.pc-intro__chapo {
  font-size: 18px;
  line-height: 1.6;
  color: var(--pc-anthracite);
  margin: 0;
  padding-bottom: 0;
}
/* `list-style: none` sur le <ul> ne suffit pas sous Salient : le thème pose
   ses puces sur les <li> eux-mêmes (piège déjà rencontré — on inspecte le li,
   pas seulement le ul). D'où les deux règles. */
.pc-intro__liens { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.pc-intro__liens li { list-style: none; margin: 0; padding: 0; }
.pc-intro__liens li::before,
.pc-intro__liens li::marker { content: none; }
.pc-intro__liens a { color: var(--pc-marine); font-weight: 600; font-size: 15px; }
.pc-intro__encart {
  flex: 0 0 330px;
  background: #fff;
  border-radius: var(--pc-rayon);
  padding: 24px;
}
.pc-intro__encart p { font-size: 15px; line-height: 1.55; margin: 0 0 16px; padding-bottom: 0; color: var(--pc-anthracite); }

/* --- Pastilles « Par produit » ------------------------------------------- */

.pc-pastilles { margin: 0 0 24px; }
.pc-pastilles__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon-pastille);
  padding: 8px 16px;
  font-size: 14px;
  color: var(--pc-anthracite);
  text-decoration: none;
  background: #fff;
  min-height: 36px;
  box-sizing: border-box;
}
.pc-pastille:hover { border-color: var(--pc-marine); color: var(--pc-marine); }
.pc-pastille.is-actif,
.pc-pastille.is-actif:hover { background: var(--pc-marine); border-color: var(--pc-marine); color: #fff; }
.pc-pastille__compteur { color: var(--pc-gris-texte); font-size: 12px; line-height: 1.4; }
.pc-pastille.is-actif .pc-pastille__compteur { color: rgba(255,255,255,.75); }

/* --- Filtres ------------------------------------------------------------- */

.pc-filtres { margin: 0 0 16px; }
.pc-filtres__bascule { display: none; } /* visible en mobile seulement */
.pc-filtres__panneau { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
/* Chaque filtre est une PASTILLE (Figma, planches 06 et 09) : le libellé vit
   dans la liste elle-même, en première option, et la pastille se remplit de
   marine dès qu'une valeur est choisie. La liste reste un <select> natif —
   donc utilisable au clavier, au lecteur d'écran et sur mobile, où le système
   ouvre sa propre roue de sélection. */
.pc-filtres__champ { display: flex; margin: 0; padding-bottom: 0; }
.pc-filtres__champ select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon-pastille);
  /* 36 px de haut comme la pastille du Figma : sans interligne explicite, le
     27 px du thème portait la liste à 45 px. */
  padding: 7px 34px 7px 16px;
  line-height: 1.4;
  box-sizing: border-box;
  font-size: 14px;
  background-color: #fff;
  /* Le chevron du Figma, en SVG inline : pas de fichier à charger, et il
     suit la couleur du texte quand la pastille devient active. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6b75' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  color: var(--pc-anthracite);
  min-height: 36px;
  cursor: pointer;
}
.pc-filtres__champ.is-actif select {
  background-color: var(--pc-marine);
  border-color: var(--pc-marine);
  color: #fff;
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
}
.pc-filtres__actions { display: flex; align-items: center; gap: 16px; margin: 0; padding-bottom: 0; }

.pc-filtres-actifs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.pc-filtre-actif {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pc-ecume);
  color: var(--pc-marine);
  border-radius: var(--pc-rayon-pastille);
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
}
.pc-filtres-actifs__vider { font-size: 13px; color: var(--pc-gris-texte); text-decoration: underline; }

/* Desktop : filtres, filtres actifs, pastilles, compteur — dans l'ordre du
   DOM, donc rien à réordonner ici. */
.pc-entete-liste { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; }
.pc-entete-liste > * { margin: 0; }
.pc-resultats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--pc-ligne);
  padding-top: 16px;
  margin: 0 0 24px;
  padding-bottom: 0;
}
.pc-resultats__nombre { font-weight: 700; color: var(--pc-anthracite); }
.pc-resultats__tri { font-size: 13px; line-height: 1.4; color: var(--pc-gris-texte); }

/* --- Grille et cartes ---------------------------------------------------- */

.pc-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 28px;
  margin: 0 0 32px;
}

.pc-carte { margin: 0; }
.pc-carte__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon);
  overflow: hidden;
  background: #fff;
}
.pc-carte__lien:hover { border-color: var(--pc-marine); }
.pc-carte__visuel {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--pc-ecume);
  overflow: hidden;
}
/* Salient impose `height: auto` à toute image du contenu : sans ce forçage,
   l'image ne remplissait pas son cadre (mesuré : 104 × 57 dans une vignette
   mobile de 104 × 104, et un filet écume sous la photo). `object-fit: cover`
   ne sert à rien tant que la hauteur n'est pas celle du cadre. */
.pc-carte .pc-carte__visuel img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
.pc-carte__sans-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(18, 72, 100, .35);
}
.pc-carte__badge,
.pc-carte__saison {
  position: absolute;
  top: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: var(--pc-rayon);
}
.pc-carte__badge { left: 12px; background: var(--pc-marine); color: #fff; }
/* Rendu dans le bloc texte (voir charte.php), il est remonté en desktop sur le
   coin haut droit du visuel — d'où la position absolue par rapport au lien. */
.pc-carte__lien { position: relative; }
.pc-carte__saison { right: 12px; background: #fff; color: var(--pc-marine); }
.pc-carte__texte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  /* Hauteur de zone texte constante : les cartes d'une même ligne s'alignent
     quelle que soit la longueur des titres (mémo §4), qui vont de 13 à 68
     caractères sur ce corpus. */
  min-height: 118px;
}
.pc-carte__titre {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pc-anthracite);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-carte__meta { font-size: 13px; line-height: 1.4; color: var(--pc-gris-texte); margin-top: auto; }

/* --- Pagination ---------------------------------------------------------- */

.pc-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 40px; }
.pc-pagination__liens { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon);
  color: var(--pc-anthracite);
  text-decoration: none;
  font-size: 14px;
}
.pc-pagination .page-numbers.current { background: var(--pc-marine); border-color: var(--pc-marine); color: #fff; }
.pc-pagination__compteur { display: none; font-size: 14px; color: var(--pc-gris-texte); }

/* --- État vide ----------------------------------------------------------- */

.pc-vide {
  background: var(--pc-ecume);
  border-radius: var(--pc-rayon);
  padding: 32px;
  margin: 0 0 32px;
  text-align: center;
}
.pc-vide__titre { font-size: 20px; font-weight: 700; color: var(--pc-marine); margin: 0 0 16px; padding-bottom: 0; }
.pc-vide__suggestions { margin: 0 0 12px; padding-bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pc-vide__retour { margin: 0; padding-bottom: 0; }

/* --- Pied des listes : conseil + commande -------------------------------- */

.pc-pied { display: flex; gap: 24px; align-items: stretch; margin: 40px 0 0; }
.pc-pied > * { flex: 1 1 0; }
.pc-conseil {
  background: var(--pc-ecume);
  border-left: 4px solid var(--pc-marine);
  border-radius: 0 var(--pc-rayon) var(--pc-rayon) 0;
  padding: 24px;
}
.pc-conseil__titre {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-marine);
  margin: 0 0 10px;
  padding-bottom: 0;
}
.pc-conseil__titre em { font-style: italic; font-weight: 400; }
.pc-conseil p { margin: 0; padding-bottom: 0; font-size: 15px; line-height: 1.6; }

.pc-commande {
  background: var(--pc-marine);
  color: #fff;
  border-radius: var(--pc-rayon);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  align-items: flex-start;
}
/* La signature du bandeau est sur fond marine : elle s'y lit en blanc, pas
   dans le marine du reste de la charte. */
.pc-commande .pc-signature { color: #fff; margin-bottom: 0; }
.pc-commande__texte { margin: 0; padding-bottom: 0; font-size: 16px; line-height: 1.55; color: #fff; }
.pc-commande--large { margin-top: 40px; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.pc-commande--large .pc-signature { flex: 0 0 100%; }

/* --- Recherche ----------------------------------------------------------- */

.pc-recherche__entete {
  background: var(--pc-ecume);
  border-radius: var(--pc-rayon);
  padding: 32px;
  margin: 0 0 24px;
}
.pc-recherche__titre { font-size: 40px; font-weight: 700; line-height: 1.2; margin: 0 0 20px; color: var(--pc-anthracite); }
.pc-recherche__champ { display: flex; gap: 12px; max-width: 560px; }
.pc-recherche__champ input[type="search"] {
  flex: 1 1 auto;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon);
  padding: 12px 16px;
  font-size: 16px;
  min-height: 44px;
  background: #fff;
}
.pc-recherche__compte,
.pc-recherche__conseil { margin: 16px 0 0; padding-bottom: 0; color: var(--pc-gris-texte); font-size: 15px; }

.pc-onglets { display: flex; gap: 28px; border-bottom: 1px solid var(--pc-ligne); margin: 0 0 28px; }
.pc-onglet,
.pc-onglet.is-vide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 2px;
  font-size: 16px;
  font-weight: 600;
  color: var(--pc-gris-texte);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.pc-onglet:hover { color: var(--pc-marine); }
.pc-onglet.is-actif { color: var(--pc-marine); border-bottom-color: var(--pc-marine); }
.pc-onglet.is-vide { opacity: .5; }
.pc-onglet__compteur { font-size: 13px; font-weight: 400; }

.pc-bloc__titre { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--pc-marine); margin: 0 0 16px; }
.pc-bloc__compteur { font-size: 15px; font-weight: 400; color: var(--pc-gris-texte); }
.pc-bloc__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pc-bloc__suite { color: var(--pc-marine); font-weight: 600; font-size: 15px; white-space: nowrap; }
.pc-bloc-recettes { margin: 0 0 40px; }

.pc-resultat { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--pc-ligne); }
.pc-resultat__visuel { flex: 0 0 180px; }
.pc-resultat .pc-resultat__visuel img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pc-rayon); display: block; }
.pc-resultat__texte { flex: 1 1 auto; }
.pc-resultat__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 8px; padding-bottom: 0; font-size: 12px; color: var(--pc-gris-texte); }
.pc-resultat__etiquette {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pc-marine);
  background: var(--pc-ecume);
  border-radius: var(--pc-rayon);
  padding: 4px 8px;
}
.pc-resultat__titre { font-size: 19px; line-height: 1.35; margin: 0 0 8px; }
.pc-resultat__titre a { color: var(--pc-anthracite); text-decoration: none; }
.pc-resultat__titre a:hover { color: var(--pc-marine); }
.pc-resultat__extrait { margin: 0 0 8px; padding-bottom: 0; font-size: 15px; line-height: 1.6; color: var(--pc-anthracite); }
.pc-resultat__extrait mark { background: none; color: var(--pc-marine); font-weight: 700; }
.pc-resultat__lire { margin: 0; padding-bottom: 0; }
.pc-resultat__lire a { color: var(--pc-marine); font-weight: 600; font-size: 15px; }

.pc-pistes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 32px; }
.pc-piste { background: var(--pc-ecume); border-radius: var(--pc-rayon); padding: 24px; }
.pc-piste__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* Même piège que .pc-intro__liens : Salient pose ses puces sur les <li>. */
.pc-piste__liste li { list-style: none; margin: 0; padding: 0; }
.pc-piste__liste li::before,
.pc-piste__liste li::marker { content: none; }
.pc-piste__liste a { color: var(--pc-marine); font-weight: 600; }
.pc-piste--boutique p { font-size: 15px; line-height: 1.55; margin: 0 0 16px; padding-bottom: 0; }
.pc-piste__tel { margin: 16px 0 0; padding-bottom: 0; }
.pc-piste .pc-pastilles { margin: 0; }
.pc-piste .pc-pastilles__titre { display: none; }

/* --- Fiche recette : fiche express et frise des mois --------------------- */

/* Cinq cellules encadrées, côte à côte (Figma, planche 02) : chacune porte
   son libellé et sa valeur, et le cadre les sépare sans filet vertical à
   dessiner. */
.pc-express {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon);
  margin: 0 0 24px;
  overflow: hidden;
}
.pc-express__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  min-width: 120px;
  padding: 14px 18px;
  border-right: 1px solid var(--pc-ligne);
}
.pc-express__item:last-child { border-right: 0; }
.pc-express__libelle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--pc-gris-texte);
}
.pc-express__valeur { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--pc-anthracite); }

.pc-frise__titre { margin-bottom: 8px; }
.pc-frise { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; }
.pc-frise__mois {
  font-size: 12px;
  text-transform: capitalize;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon-pastille);
  padding: 4px 12px;
  color: var(--pc-gris-texte);
}
.pc-frise__mois.is-actif { background: var(--pc-marine); border-color: var(--pc-marine); color: #fff; }

/* --- FAQ de la fiche (mémo du 26/09/2026) --------------------------------
   Pas d'accordéon : toutes les réponses restent visibles. Pas de fond écume
   non plus — il reste réservé à l'encadré « Conseil de l'écailler », et deux
   blocs de même couleur à la suite ne se distingueraient plus. */
.pc-faq { margin-top: 48px; }
/* Les titres de la FAQ sont des <h2>/<h3> SANS classe : la règle générale
   « [class^="pc-"] » ne les atteint pas, et le thème leur impose sa police de
   titre (Cormorant Garamond). On la pose donc explicitement, comme le mémo le
   demande : Open Sans. */
.pc-faq h2,
.pc-faq h3,
.pc-faq p { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.pc-faq h2 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--pc-marine); margin: 0 0 8px; }
/* Le <h3> du thème est déclaré avec une spécificité plus forte que la nôtre
   (mesuré : Cormorant Garamond 19 px là où la charte demande Open Sans 17 px).
   On passe par `#ajax-content-wrap`, l'enveloppe de contenu de Salient, ce qui
   suffit à gagner sans `!important` — et reste limité à la FAQ. */
#ajax-content-wrap .pc-faq h3,
.pc-faq h3 {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pc-anthracite);
  margin: 20px 0 8px;
  padding-top: 20px;
  border-top: 1px solid var(--pc-ligne);
}
/* Le filet sépare DEUX questions : la première n'a rien au-dessus d'elle. */
#ajax-content-wrap .pc-faq h3:first-of-type,
.pc-faq h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 12px; }
.pc-faq p { font-size: 16px; line-height: 1.65; color: var(--pc-anthracite); margin: 0 0 8px; padding-bottom: 0; }

/* Le contrat HTML du contenu (mémo §8) : « Pour N personnes » et l'encadré
   conseil, que la CM et Claude produisent dans post_content. */
.pc-pour { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--pc-gris-texte); }
.single-recette .pc-conseil { margin: 28px 0; }

/* Le fil d'Ariane de la fiche vit dans l'en-tête du thème. Il s'aligne à
   GAUCHE, comme le badge d'ingrédient juste en dessous : centré, il partait
   d'un bord et le badge de l'autre (constaté au navigateur). */
.pc-fil--fiche { justify-content: flex-start; margin-bottom: 10px; }

/* Les étapes de la préparation portent un numéro en pastille marine (Figma,
   planche 02). Le compteur CSS suit la numérotation du <ol> du contenu —
   rien à écrire dans le texte, et la renumérotation reste automatique si une
   étape est ajoutée. */
.single-recette .entry-content ol,
.single-recette .post-content ol { list-style: none; counter-reset: pc-etape; padding-left: 0; }
.single-recette .entry-content ol > li,
.single-recette .post-content ol > li {
  counter-increment: pc-etape;
  position: relative;
  padding-left: 44px;
  margin-bottom: 14px;
  list-style: none;
}
.single-recette .entry-content ol > li::marker,
.single-recette .post-content ol > li::marker { content: none; }
.single-recette .entry-content ol > li::before,
.single-recette .post-content ol > li::before {
  content: counter(pc-etape);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pc-marine);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Mobile (sous le point de rupture du thème) -------------------------- */

@media only screen and (max-width: 999px) {
  .pc-intro { flex-direction: column; padding: 24px; gap: 20px; }
  .pc-intro__titre { font-size: 28px; }
  .pc-intro__encart { flex: 1 1 auto; width: 100%; background: none; padding: 0; }
  .pc-intro__encart .pc-signature,
  .pc-intro__encart p { display: none; } /* mobile : le bouton seul (mémo §5) */
  .pc-intro__encart .pc-bouton { display: block; text-align: center; width: 100%; }

  /* Les pastilles défilent horizontalement plutôt que de se replier sur
     quatre lignes, qui repousseraient la liste hors de l'écran. */
  .pc-pastilles__liste {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .pc-pastille { flex: 0 0 auto; }

  /* Les filtres passent derrière un bouton, et le panneau s'ouvre par le bas. */
  .pc-filtres__bascule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--pc-ligne);
    border-radius: var(--pc-rayon);
    background: #fff;
    color: var(--pc-anthracite);
    font-size: 15px;
    font-weight: 600;
  }
  .pc-filtres__panneau { display: none; }
  .pc-filtres.is-ouvert .pc-filtres__panneau {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 16px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--pc-ligne);
    border-radius: var(--pc-rayon);
  }
  .pc-filtres__actions { flex-direction: column; align-items: stretch; }
  .pc-filtres__actions .pc-bouton { text-align: center; }

  .pc-grille { grid-template-columns: 1fr; row-gap: 0; }

  /* Mobile (planche 10) : pastilles en premier, pleine largeur ; puis le
     bouton « Filtres » et le compteur côte à côte. Seul `order` change —
     le balisage, lui, reste celui du desktop. */
  .pc-entete-liste {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .pc-entete-liste .pc-pastilles { order: 1; flex: 0 0 100%; }
  .pc-entete-liste .pc-filtres { order: 2; }
  .pc-entete-liste .pc-resultats { order: 3; border-top: 0; padding-top: 0; gap: 8px; font-size: 13px; }
  .pc-entete-liste .pc-filtres-actifs { order: 4; flex: 0 0 100%; }
  .pc-entete-liste .pc-filtres.is-ouvert { flex: 0 0 100%; }

  /* Carte compacte : vignette carrée de 104 px à gauche, texte à droite. */
  /* `align-items: flex-start` n'est pas décoratif : sans lui, l'étirement par
     défaut du flex allonge la vignette à la hauteur du texte — une vignette
     « carrée » de 104 px devenait un rectangle de 104 × 160 sur les titres de
     deux lignes (mesuré à 390 px). */
  .pc-carte__lien { flex-direction: row; align-items: flex-start; gap: 16px; border: 0; border-bottom: 1px solid var(--pc-ligne); border-radius: 0; padding: 16px 0; }
  .pc-carte__visuel { flex: 0 0 104px; width: 104px; aspect-ratio: 1 / 1; border-radius: var(--pc-rayon); }
  /* Le badge d'ingrédient disparaît (le Figma mobile ne le montre pas), mais
     « De saison » reste : il devient une ligne sous la méta, précédée d'une
     pastille ronde (planche 10). */
  .pc-carte__badge { display: none; }
  .pc-carte__saison {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    order: 3;
    padding: 0;
    background: none;
    color: var(--pc-marine);
    font-size: 11px;
  }
  .pc-carte__saison::before { content: "●"; font-size: 8px; line-height: 1; }
  .pc-carte__texte { padding: 0; min-height: 0; justify-content: flex-start; }
  .pc-carte__meta { margin-top: 0; }
  .pc-carte__titre { font-size: 16px; }

  .pc-pagination__liens .page-numbers:not(.prev):not(.next) { display: none; }
  .pc-pagination__compteur { display: inline; }

  .pc-pied { flex-direction: column; }
  .pc-commande--large { flex-direction: column; align-items: flex-start; }

  .pc-recherche__entete { padding: 24px; }
  .pc-recherche__titre { font-size: 28px; }
  .pc-onglets { gap: 18px; overflow-x: auto; }
  .pc-resultat__visuel { display: none; } /* mémo §4 : pas de vignette en mobile */
  .pc-pistes { grid-template-columns: 1fr; }
  .pc-express { gap: 20px; }
  .pc-faq { margin-top: 36px; }
  .pc-faq h2 { font-size: 20px; }
  #ajax-content-wrap .pc-faq h3,
  .pc-faq h3 { font-size: 16px; }
}