/* Le gabarit « article de blog » — Novazeo, 4/11/2026.
   Maquettes : Figma « Pierrot Coquillages – Charte recette », page
   « Template article ». Valeurs relevées au connecteur, pas à l'œil :
   hero 52:501 (desktop) et 52:616 (mobile), composants A1 46:316,
   règles A2 49:496, exemples B1 52:496 et B2 52:612.

   Cette feuille ne s'applique qu'aux ARTICLES, et seulement quand le gabarit
   est allumé (option `pc_articles_actif`) ou qu'on regarde un aperçu
   (`?pc_apercu=1`). Voir la garde d'enqueue dans pc-articles.php.

   POINT DE RUPTURE : 1000 px, celui du thème Salient — pas 768 px. C'est
   celui qu'a retenu la charte recette le 26/09/2026, et deux points de
   rupture différents sur un même site finiraient par se contredire. Les
   maquettes sont à 1200 px et à 390 px. */

/* --- La police ----------------------------------------------------------
   Le Figma demande OPEN SANS. Le thème ne sert que Poppins et Cormorant
   Garamond : sans ces @font-face, nos composants retombent sur la police du
   thème — le défaut le plus courant d'une intégration de charte, et il avait
   touché les quatre écrans des recettes.

   Fichiers hébergés avec l'extension (Open Sans, licence Apache 2.0) : pas de
   requête vers un tiers, donc pas de question de consentement. Ce sont les
   mêmes deux fichiers que pc-recettes, recopiés ici pour que ce dossier soit
   autonome : une dépendance croisée se casserait en silence, et on ne s'en
   apercevrait qu'à la police. */
@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;
}

: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 px. Le #c9440f — 4,87:1 — a déjà été
     retenu pour la charte recette le 26/09/2026 ; on garde le même, sans quoi
     deux oranges cohabiteraient sur le site. `--pc-orange-maquette` reste
     disponible pour un usage non textuel. */
  --pc-orange: #c9440f;
  --pc-orange-maquette: #e84b17;
  --pc-ecume: #e7eff4;
  --pc-anthracite: #333333;
  --pc-gris-texte: #5b6b75;
  --pc-ligne: #dde5ea;
  --pc-blanc: #ffffff;
  --pc-rayon: 4px;
  /* L'espacement vertical de la charte : 28 px entre deux blocs (mémo §3,
     vérifié sur B1 — hero 891, barre méta à 919). */
  --pc-pas: 28px;
}

/* Nos composants, et EUX SEULS : le reste du site garde Poppins. */
[class^="pc-"],
[class*=" pc-"] {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Le CORPS de l'article est écrit par la CM : ses titres et ses paragraphes
   portent les classes de Gutenberg (`wp-block-heading`…), jamais les nôtres.
   Sans cette règle, Salient leur impose Cormorant Garamond — mesuré le
   4/11/2026 sur l'article 1692 : H2 en Cormorant alors que tout le reste
   était en Open Sans. Même piège que la FAQ des recettes.
   Le `#ajax-content-wrap` n'est là que pour la spécificité : c'est
   l'enveloppe que Salient pose autour de la page, et elle lui sert à gagner
   sur les titres. */
#ajax-content-wrap .pc-article__corps,
#ajax-content-wrap .pc-article__corps h1,
#ajax-content-wrap .pc-article__corps h2,
#ajax-content-wrap .pc-article__corps h3,
#ajax-content-wrap .pc-article__corps h4,
#ajax-content-wrap .pc-article__corps h5,
#ajax-content-wrap .pc-article__corps h6,
#ajax-content-wrap .pc-article__corps p,
#ajax-content-wrap .pc-article__corps li,
#ajax-content-wrap .pc-article__corps a,
#ajax-content-wrap .pc-article__corps blockquote,
#ajax-content-wrap .pc-article__corps figcaption,
#ajax-content-wrap .pc-article__corps th,
#ajax-content-wrap .pc-article__corps td {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- La colonne ----------------------------------------------------------
   760 px centrés. Salient sert ici un conteneur pleine largeur (option
   « std-blog-fullwidth », pas de colonne latérale) : sans cette contrainte,
   le texte courrait sur 1300 px. */
.pc-hero,
.pc-article {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--pc-anthracite);
  /* Salient (skin-material) pose `p { padding-bottom: var(
     --nectar-paragraph-bottom-spacing, 1.5em) }`. Ce padding s'AJOUTE à notre
     pas de 28 px : mesuré le 4/11/2026, les paragraphes du corps étaient
     séparés de 81 px au lieu de 28, la barre méta portait 19,5 px de trop et
     la signature de l'encart 22,5 px.
     On neutralise par la VARIABLE que le thème lit lui-même, et non par un
     `!important` sur `p` : la règle du thème continue de s'appliquer
     normalement partout ailleurs sur le site. */
  --nectar-paragraph-bottom-spacing: 0px;
}

/* ====================================================================== */
/* HERO                                                                    */
/* ====================================================================== */

.pc-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 48px 0 8px;
  background: var(--pc-blanc);
}

.pc-hero__entete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pc-hero__fil,
.pc-hero__fil a {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-gris-texte);
  text-decoration: none;
}
.pc-hero__fil a:hover {
  text-decoration: underline;
}
/* Les deux espaces de part et d'autre du chevron sont dans la maquette
   (« Blog  ›  Conseils de l'écailler ») ; en HTML ils se réduiraient à un
   seul, d'où la marge. */
.pc-hero__fil span[aria-hidden] {
  margin: 0 4px;
}

.pc-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--pc-rayon);
  background: var(--pc-marine);
  color: var(--pc-blanc);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.66px; /* 6 % de 11 px */
  text-transform: uppercase;
}
.pc-badge__lien {
  text-decoration: none;
}

.pc-hero__titre.entry-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--pc-anthracite);
  text-transform: none;
}

.pc-hero__chapo,
.pc-hero__chapo p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--pc-anthracite);
}
.pc-hero__chapo p + p {
  margin-top: 12px;
}

/* L'image à la une : 16/9 exactement, quel que soit le fichier envoyé. */
.pc-hero__image {
  position: relative;
  margin: 0;
  border-radius: var(--pc-rayon);
  overflow: hidden;
  background: var(--pc-ecume);
  aspect-ratio: 16 / 9;
}
.pc-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Archives : noir et blanc par filtre, le fichier d'origine n'est pas touché. */
.pc-hero__image--archive img {
  filter: grayscale(1);
}
.pc-hero__etiquette {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 5px 10px;
  border-radius: var(--pc-rayon);
  background: var(--pc-marine);
  color: var(--pc-blanc);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.1px; /* 10 % de 11 px */
  text-transform: uppercase;
}

/* --- La bande catégorie -------------------------------------------------
   Desktop : cellules côte à côte, trait vertical, bouton à droite.
   Mobile (voir plus bas) : empilées, trait horizontal, bouton pleine largeur.
   Un seul balisage, deux mises en page. */
.pc-bande {
  display: flex;
  align-items: center;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon);
  overflow: hidden;
}
.pc-bande__cellule {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 0 0;
  min-width: 0;
  padding: 12px 14px;
}
.pc-bande__cellule + .pc-bande__cellule {
  border-left: 1px solid var(--pc-ligne);
}
.pc-bande__libelle {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.1px; /* 10 % de 11 px */
  text-transform: uppercase;
  color: var(--pc-gris-texte);
}
.pc-bande__valeur {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pc-marine);
}
.pc-bande__cta {
  flex: 0 0 auto;
  padding: 12px 14px;
  border-left: 1px solid var(--pc-ligne);
}
/* Une bande qui n'a QUE le bouton ne doit pas porter de trait à gauche. */
.pc-bande__cta:first-child {
  border-left: 0;
}

/* ====================================================================== */
/* BOUTONS (composant 46:330)                                              */
/* ====================================================================== */

.pc-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--pc-rayon);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pc-bouton--commander {
  background: var(--pc-orange);
  color: var(--pc-blanc);
}
.pc-bouton--commander:hover,
.pc-bouton--commander:focus {
  background: #a9380c;
  color: var(--pc-blanc);
}
.pc-bouton--marine {
  background: var(--pc-marine);
  color: var(--pc-blanc);
}
.pc-bouton--marine:hover,
.pc-bouton--marine:focus {
  background: #0d364b;
  color: var(--pc-blanc);
}
.pc-bouton--contour {
  background: transparent;
  color: var(--pc-marine);
  border: 1px solid var(--pc-marine);
}
.pc-bouton--contour:hover,
.pc-bouton--contour:focus {
  background: var(--pc-marine);
  color: var(--pc-blanc);
}
.pc-bouton--contour-clair {
  background: transparent;
  color: var(--pc-blanc);
  border: 1px solid var(--pc-blanc);
}
.pc-bouton--contour-clair:hover,
.pc-bouton--contour-clair:focus {
  background: var(--pc-blanc);
  color: var(--pc-marine);
}

/* ====================================================================== */
/* BARRE MÉTA ET SOMMAIRE                                                  */
/* ====================================================================== */

.pc-article > * + * {
  margin-top: var(--pc-pas);
}
.pc-article {
  padding-bottom: 48px;
}

.pc-article__meta {
  margin: var(--pc-pas) 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-gris-texte);
}

.pc-sommaire {
  display: inline-block;
  padding: 16px 18px;
  border: 1px solid var(--pc-ligne);
  border-radius: var(--pc-rayon);
}
.pc-sommaire__titre {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--pc-gris-texte);
}
.pc-sommaire__liste {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pc-sommaire;
}
.pc-sommaire__liste li {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-increment: pc-sommaire;
}
.pc-sommaire__liste li + li {
  margin-top: 8px;
}
.pc-sommaire__liste li::before {
  content: counter(pc-sommaire) ". ";
  color: var(--pc-marine);
  font-size: 16px;
  line-height: 1.65;
}
.pc-sommaire__liste a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-marine);
  text-decoration: none;
}
.pc-sommaire__liste a:hover {
  text-decoration: underline;
}

/* ====================================================================== */
/* LE CORPS                                                                */
/* ====================================================================== */

/* Un seul pas vertical pour tout le corps : la maquette met 28 px entre
   CHAQUE bloc, titre compris. On remet les marges du thème et des blocs
   Gutenberg à zéro avant de poser le nôtre, sinon les deux s'ajoutent. */
.pc-article__corps > * {
  margin: 0;
}
.pc-article__corps > * + * {
  margin-top: var(--pc-pas);
}

#ajax-content-wrap .pc-article__corps h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pc-marine);
  text-transform: none;
}
#ajax-content-wrap .pc-article__corps h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pc-anthracite);
  text-transform: none;
}
.pc-article__corps p,
.pc-article__corps li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-anthracite);
}
.pc-article__corps a {
  color: var(--pc-marine);
  text-decoration: underline;
}
/* Mémo §7 : l'orange est réservé aux liens produits. La CM pose la classe. */
.pc-article__corps a.pc-produit {
  color: var(--pc-orange);
}

/* Listes à puces. Salient pose ses puces sur les `li`, pas sur le `ul` :
   il faut neutraliser les DEUX, sinon on obtient deux puces par ligne. */
.pc-article__corps ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pc-article__corps ul > li {
  position: relative;
  margin: 0;
  padding-left: 20px;
  list-style: none;
}
.pc-article__corps ul > li + li {
  margin-top: 6px;
}
.pc-article__corps ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pc-marine);
}

/* Listes numérotées : pastille marine de 24 px, chiffre blanc, texte à 38 px
   du bord (mémo §4.4, mesuré sur B1 — pastille 24, texte à x=38). */
.pc-article__corps ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pc-etape;
}
.pc-article__corps ol > li {
  position: relative;
  margin: 0;
  padding-left: 38px;
  list-style: none;
  counter-increment: pc-etape;
}
.pc-article__corps ol > li + li {
  margin-top: 16px;
}
.pc-article__corps ol > li::before {
  content: counter(pc-etape);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pc-marine);
  color: var(--pc-blanc);
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* Images dans le texte : 3/2 et légende en italique. */
.pc-article__corps figure {
  margin: 0;
}
.pc-article__corps figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pc-rayon);
}
.pc-article__corps figcaption {
  margin-top: 8px;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-gris-texte);
}

/* --- L'encart « Astuce Pierrot » (46:339) ------------------------------
   Écrit dans le contenu, par la CM : une balise avec la classe `pc-astuce`.
   Une seule fois par article (mémo §4.5) — la règle est éditoriale, elle ne
   se vérifie pas en CSS. */
.pc-article__corps .pc-astuce,
.pc-astuce {
  padding: 18px 22px;
  background: var(--pc-ecume);
  border-left: 4px solid var(--pc-marine);
}
.pc-astuce > * {
  margin: 0;
}
.pc-astuce > * + * {
  margin-top: 8px;
}

/* La signature : première syllabe en italique maigre, le reste en très gras.
   Motif repris de la charte recette. */
/* `#ajax-content-wrap` pour la spécificité : la signature vit DANS le corps
   de l'article (encart Astuce), où la règle de paragraphe ci-dessus la
   ramenait à 16 px anthracite. Mesuré le 4/11/2026. */
#ajax-content-wrap .pc-signature,
.pc-signature {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.6px; /* 4 % de 15 px */
  text-transform: uppercase;
  color: var(--pc-marine);
}
#ajax-content-wrap .pc-signature em,
.pc-signature em {
  font-style: italic;
  font-weight: 400;
}

/* ====================================================================== */
/* FAQ (46:353)                                                            */
/* ====================================================================== */

.pc-article__corps .pc-faq {
  display: block;
}
.pc-faq__item {
  border-bottom: 1px solid var(--pc-ligne);
  padding: 16px 0;
}
.pc-faq__item + .pc-faq__item {
  margin-top: 0;
}
.pc-faq__question {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
/* Le triangle natif de Safari et de Chrome, retiré : la maquette a un
   chevron. */
.pc-faq__question::-webkit-details-marker {
  display: none;
}
.pc-faq__question::marker {
  content: "";
}
.pc-faq__texte {
  flex: 1 0 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pc-anthracite);
}
/* Les deux chevrons sont les fichiers exportés de Figma, tels quels. */
.pc-faq__chevron {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: url('chevron-ferme.svg') center / 16px 16px no-repeat;
}
.pc-faq__item[open] .pc-faq__chevron {
  background-image: url('chevron-ouvert.svg');
}
.pc-faq__reponse {
  margin-top: 8px;
}
.pc-faq__reponse > * {
  margin: 0;
}
.pc-faq__reponse > * + * {
  margin-top: 8px;
}
.pc-faq__reponse p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-anthracite);
}

/* ====================================================================== */
/* BLOCS DE FIN                                                            */
/* ====================================================================== */

.pc-pierrot {
  padding: 24px;
  border-radius: var(--pc-rayon);
  background: var(--pc-marine);
}
#ajax-content-wrap .pc-pierrot .pc-signature,
.pc-pierrot .pc-signature {
  color: var(--pc-blanc);
}
.pc-pierrot__texte {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-blanc);
}
.pc-pierrot__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.pc-source {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--pc-gris-texte);
}
.pc-source a {
  color: var(--pc-marine);
  text-decoration: underline;
}

#ajax-content-wrap .pc-aussi__titre {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pc-marine);
  text-transform: none;
}
.pc-aussi__cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
  margin-top: 16px;
}
.pc-carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
}
.pc-carte__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--pc-rayon);
  overflow: hidden;
  background: var(--pc-ecume);
}
.pc-carte__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-carte__titre {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pc-anthracite);
}
.pc-carte:hover .pc-carte__titre {
  text-decoration: underline;
}

/* ====================================================================== */
/* MOBILE — point de rupture Salient                                       */
/* ====================================================================== */

@media only screen and (max-width: 999px) {
  .pc-hero {
    gap: 20px;
    padding: 24px 0 8px;
  }
  .pc-hero__titre.entry-title {
    font-size: 28px;
  }
  .pc-hero__chapo,
  .pc-hero__chapo p {
    font-size: 16px;
  }

  /* La bande s'empile : trait horizontal entre les cellules, bouton en
     pleine largeur en dessous (A2 : « Mobile : bande catégorie empilée,
     CTA pleine largeur »). */
  .pc-bande {
    display: block;
  }
  .pc-bande__cellule + .pc-bande__cellule,
  .pc-bande__cta {
    border-left: 0;
    border-top: 1px solid var(--pc-ligne);
  }
  .pc-bande__cta:first-child {
    border-top: 0;
  }
  .pc-bande__cta .pc-bouton {
    display: flex;
    width: 100%;
  }

  #ajax-content-wrap .pc-article__corps h2,
  #ajax-content-wrap .pc-aussi__titre {
    font-size: 20px;
  }

  /* Les cartes passent l'une sous l'autre. */
  .pc-aussi__cartes {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pc-pierrot__boutons .pc-bouton {
    width: 100%;
  }
}