/* ==========================================================================
   Défis Pâtisserie — charte du site

   Transcription de la maquette « Défis Pâtisserie - Site.dc.html »
   (projet claude.ai/design 202327cf-9e2f-4e56-a409-832a611274aa).

   SOURCE UNIQUE DE VÉRITÉ. La maquette pose tous ses styles en attributs
   `style=""` inline ; ils sont ici centralisés en variables et en classes.
   Ne pas réintroduire de style en dur dans les templates : c'est la leçon
   explicite du retour d'expérience interne sur la migration précédente.
   ========================================================================== */

:root {
    /* --- Couleurs, relevées à l'identique sur la maquette ---------------- */
    --fond-page:      #e9e4db;  /* body, autour du bloc central */
    --fond:           #f6f2ec;  /* fond du site */
    --fond-panneau:   #efe9df;  /* encadrés : ingrédients, emplacements pub */
    --encre:          #1a1714;  /* texte principal, aussi fond du pied de page */
    --encre-douce:    #6f665c;  /* texte secondaire */
    --encre-tenue:    #8a8074;  /* texte tertiaire */
    --encre-fantome:  #a59a8c;  /* libellés en capitales espacées */
    --accent:         #b04a52;  /* bordeaux : liens, sur-titres, méta */
    --accent-fonce:   #8f3a41;  /* survol des liens */
    --trait:          #e6ded2;  /* filets et séparateurs */
    --trait-fort:     #cbc0b1;  /* bordure des puces */
    --pub-trait:      #e0d7c9;
    --pub-texte:      #a89c8a;
    --pub-label:      #b6ab9c;
    --pied-texte:     #e9e0d2;
    --pied-tenu:      #8a7f6f;
    --pied-trait:     #2f2a24;
    --pied-fond-pub:  #221e19;

    /* --- Typographie ----------------------------------------------------- */
    --titre:   'Fraunces', Georgia, 'Times New Roman', serif;
    --texte:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --label:   'Archivo', system-ui, sans-serif;

    /* --- Rythme ---------------------------------------------------------- */
    --largeur:  1280px;
    --gouttiere: 44px;
    --rayon:     2px;
    --rayon-doux: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fond-page);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); }

img { max-width: 100%; height: auto; display: block; }

/* Le contenu large (tableaux, blocs de code) défile dans son propre
   conteneur : le corps de page ne doit jamais défiler horizontalement. */
main table, main pre { display: block; max-width: 100%; overflow-x: auto; }

/* Lien d'évitement : obligatoire pour la navigation au clavier, absent de
   la maquette qui ne traite pas l'accessibilité. */
.evitement {
    position: absolute; left: -9999px;
    background: var(--encre); color: var(--fond);
    padding: 12px 20px; z-index: 100;
}
.evitement:focus { left: 0; top: 0; }

/* ==========================================================================
   Coquille
   ========================================================================== */

.site {
    max-width: var(--largeur);
    margin: 0 auto;
    background: var(--fond);
    box-shadow: 0 20px 60px rgba(26, 23, 20, .10);
    min-height: 100vh;
}

/* --- Barre utilitaire ---------------------------------------------------- */
.utilitaire {
    display: flex; justify-content: flex-end; gap: 26px;
    padding: 11px var(--gouttiere);
    font-size: 12.5px; letter-spacing: .05em;
    color: var(--encre-douce);
    border-bottom: 1px solid var(--trait);
}
.utilitaire a { color: inherit; }
.utilitaire a:hover { color: var(--accent); }

/* --- En-tête -------------------------------------------------------------- */
.entete {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
    padding: 24px var(--gouttiere) 20px;
}
.entete__nav { display: flex; gap: 24px; font-size: 14px; letter-spacing: .03em; }
.entete__nav a { color: var(--encre); }
.entete__nav a:hover { color: var(--accent); }

/* La marque est un lien (donc `inline`) contenant deux `span` (donc `inline`
   aussi) : sans cette pile, « Défis Pâtisserie » et « L'atelier des recettes »
   se retrouvent côte à côte sur une seule ligne. La maquette les empile —
   elle utilise des `div`, que l'on ne peut pas imbriquer ici sans perdre le
   lien accessible. */
.marque {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.marque__nom {
    font-family: var(--titre); font-weight: 500; font-size: 28px;
    letter-spacing: .02em; line-height: 1; color: var(--encre);
    margin: 0;
}
.marque__bandeau {
    font-size: 10.5px; letter-spacing: .42em; color: var(--accent);
    margin-top: 6px; text-transform: uppercase;
}
.filet { height: 1px; background: var(--trait); margin: 0 var(--gouttiere); }

/* --- Pied de page --------------------------------------------------------- */
.pied {
    background: var(--encre); color: var(--pied-texte);
    padding: 40px var(--gouttiere) 30px;
    margin-top: 40px;
}
.pied__bas {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
}
.pied__nom { font-family: var(--titre); font-size: 22px; }
.pied__note { font-size: 12px; color: var(--pied-tenu); margin-top: 4px; }
.pied__liens { display: flex; gap: 22px; font-size: 13px; }
.pied__liens a { color: #b0a695; }
.pied__liens a:hover { color: var(--pied-texte); }

/* ==========================================================================
   Titraille
   ========================================================================== */

.surtitre {
    font-family: var(--label); font-size: 12px;
    letter-spacing: .34em; color: var(--accent);
    text-transform: uppercase;
}
.titre-page {
    font-family: var(--titre); font-weight: 400; font-size: 60px;
    line-height: 1.02; margin: 18px auto 10px; max-width: 760px;
}
.chapeau {
    font-size: 16.5px; color: var(--encre-douce);
    max-width: 540px; margin: 0 auto 32px;
}
.titre-section {
    font-family: var(--titre); font-weight: 400; font-size: 30px; margin: 0;
}
.barre-section {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    border-bottom: 1.5px solid var(--encre);
    padding-bottom: 12px; margin-bottom: 26px;
}
.lien-suite { font-size: 13px; letter-spacing: .06em; color: var(--accent); }

/* ==========================================================================
   Recherche et filtres
   ========================================================================== */

.recherche {
    display: flex; align-items: center;
    max-width: 640px; margin: 0 auto;
    background: #fff; border: 1.5px solid var(--encre);
    border-radius: var(--rayon); padding: 6px 6px 6px 22px;
}
.recherche__icone { font-size: 19px; color: var(--encre-tenue); }
.recherche input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: var(--texte); font-size: 15.5px; padding: 14px 12px;
    color: var(--encre);
}
.recherche input::placeholder { color: #a99e8f; }
.bouton {
    font-family: var(--label); font-size: 13px; letter-spacing: .12em;
    background: var(--encre); color: var(--fond);
    border: none; padding: 14px 26px; border-radius: var(--rayon);
    cursor: pointer; transition: background .15s; text-transform: uppercase;
}
.bouton:hover { background: var(--accent); }

.groupe-puces { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.groupe-puces--titre {
    font-size: 11px; letter-spacing: .24em; color: var(--encre-fantome);
    margin-bottom: 12px; text-transform: uppercase; text-align: center;
}
.puce {
    font-size: 13px; letter-spacing: .04em;
    padding: 8px 16px;
    border: 1px solid var(--trait-fort); border-radius: 22px;
    background: transparent; color: var(--encre);
    transition: border-color .15s;
}
.puce:hover { border-color: var(--encre); color: var(--encre); }
.puce[aria-current="page"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* Rail de filtres (page de listing) */
.rail__titre { font-family: var(--titre); font-size: 19px; margin: 0 0 14px; }
.rail__liste { display: flex; flex-direction: column; gap: 2px; margin-bottom: 30px; }
.rail__liste a {
    font-size: 14px; padding: 8px 12px; border-radius: var(--rayon-doux);
    color: var(--encre);
}
.rail__liste a:hover { background: var(--fond-panneau); }
.rail__liste a[aria-current="page"] { background: var(--encre); color: var(--fond); }

/* ==========================================================================
   Grilles et cartes
   ========================================================================== */

.grille { display: grid; gap: 30px 28px; }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--6 { grid-template-columns: repeat(6, 1fr); }

.colonnes-contenu { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.colonnes-listing { display: grid; grid-template-columns: 230px 1fr 300px; gap: 36px; }

.carte { display: block; color: inherit; }
.carte__cadre {
    overflow: hidden; border-radius: var(--rayon);
    background: #e8e0d3; aspect-ratio: 4 / 3;
}
.carte__image {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
/* Repli quand la recette n'a pas d'image : le motif de la maquette. */
.carte__cadre--vide {
    background-image: repeating-linear-gradient(135deg, #ded3c2 0 14px, #e5dcce 14px 28px);
}
.carte:hover .carte__image { transform: scale(1.045); }
.carte__meta {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .15em;
    color: var(--accent); margin: 14px 0 7px; text-transform: uppercase;
}
.carte__titre {
    font-family: var(--titre); font-weight: 400; font-size: 20px;
    line-height: 1.18; margin: 0; color: var(--encre);
}
.carte:hover .carte__titre { text-decoration: underline; text-underline-offset: 3px; }

.pastille { text-align: center; }
.pastille__rond {
    aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background-image: repeating-linear-gradient(135deg, #ded3c2 0 12px, #e5dcce 12px 24px);
    border: 1px solid var(--pub-trait);
}
.pastille__nom { font-family: var(--titre); font-size: 15px; margin-top: 12px; color: var(--encre); }

/* ==========================================================================
   Emplacements publicitaires

   La maquette les traite comme des éléments de mise en page à part entière,
   pas comme un ajout. Le blog est monétisé par AdSense (contrainte n°2 du
   projet) : couper la publicité à la bascule arrêterait le revenu.
   ========================================================================== */

.pub { margin: 0; }
.pub__label {
    font-size: 9.5px; letter-spacing: .26em; color: var(--pub-label);
    text-align: center; margin-bottom: 8px; text-transform: uppercase;
}
.pub__cadre {
    border: 1px solid var(--pub-trait); border-radius: var(--rayon-doux);
    background: var(--fond-panneau);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    font-family: var(--label); font-size: 11px; letter-spacing: .14em;
    color: var(--pub-texte);
}
.pub--rectangle .pub__cadre { height: 600px; }
.pub--carre     .pub__cadre { height: 250px; }
.pub--banniere  .pub__cadre { height: 110px; }
.pub--article   .pub__cadre { height: 100px; }
.pub--pied      .pub__cadre { height: 90px; background: var(--pied-fond-pub); border-color: var(--pied-trait); color: #6b6156; }
.pub--pied .pub__label { color: #6b6156; }
.pub__cadre ins { display: block; width: 100%; height: 100%; }

.colonne-laterale { position: sticky; top: 20px; align-self: start; }

/* ==========================================================================
   Recette
   ========================================================================== */

.fil { font-size: 13px; color: var(--encre-tenue); margin-bottom: 24px; }
.fil a { color: inherit; }
.fil a:hover { color: var(--accent); }
.fil [aria-current="page"] { color: var(--encre); }

.recette__surtitre {
    font-family: var(--label); font-size: 11.5px; letter-spacing: .18em;
    color: var(--accent); margin-bottom: 10px; text-transform: uppercase;
}
.recette__titre {
    font-family: var(--titre); font-weight: 400; font-size: 48px;
    line-height: 1.04; margin: 0 0 18px; max-width: 640px;
}
.recette__intro { font-size: 17px; color: var(--encre-douce); max-width: 600px; margin: 0 0 26px; }

.fiche {
    display: flex;
    border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
    margin-bottom: 28px;
}
.fiche__case { flex: 1; padding: 16px 4px; text-align: center; border-right: 1px solid var(--trait); }
.fiche__case:last-child { border-right: none; }
.fiche__label { font-size: 10px; letter-spacing: .16em; color: var(--encre-fantome); text-transform: uppercase; }
.fiche__valeur { font-family: var(--titre); font-size: 20px; margin-top: 4px; }

.recette__photo {
    aspect-ratio: 16 / 9; border-radius: var(--rayon-doux); overflow: hidden;
    margin-bottom: 36px; background: #e8e0d3;
}
.recette__photo img { width: 100%; height: 100%; object-fit: cover; }

.recette__corps { display: grid; grid-template-columns: 270px 1fr; gap: 40px; align-items: start; }

.ingredients {
    background: var(--fond-panneau); border: 1px solid var(--trait);
    border-radius: var(--rayon-doux); padding: 24px;
}
.ingredients h2, .etapes h2 {
    font-family: var(--titre); font-weight: 500; font-size: 22px; margin: 0 0 16px;
}
.ingredients__groupe { margin-bottom: 16px; }
.ingredients__groupe-nom {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .14em;
    color: var(--accent); margin-bottom: 8px; text-transform: uppercase;
}
.ingredients__liste { list-style: none; margin: 0; padding: 0; }
.ingredients__ligne {
    display: flex; gap: 8px; font-size: 14px; padding: 5px 0;
    border-bottom: 1px dotted #ded3c2;
}
.ingredients__qte { color: var(--encre-tenue); min-width: 64px; }

.etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.etape { display: flex; gap: 18px; margin-bottom: 22px; }
.etape__num {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--encre); color: var(--fond);
    font-family: var(--titre); font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.etape__titre { font-family: var(--titre); font-size: 17px; margin-bottom: 5px; }
.etape__texte { font-size: 14.5px; color: #4d453c; line-height: 1.55; margin: 0; }
.etape__image { margin-top: 10px; border-radius: var(--rayon); overflow: hidden; }

.notes { margin-top: 32px; }
.notes h2 { font-family: var(--titre); font-weight: 500; font-size: 22px; margin: 0 0 12px; }

/* Corps de texte des articles et pages */
.prose { font-size: 16.5px; line-height: 1.65; color: #35302a; max-width: 68ch; }
.prose h2 { font-family: var(--titre); font-weight: 400; font-size: 28px; margin: 34px 0 12px; }
.prose h3 { font-family: var(--titre); font-weight: 400; font-size: 22px; margin: 26px 0 10px; }
.prose img { border-radius: var(--rayon); margin: 20px 0; }
.prose blockquote {
    margin: 22px 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent); color: var(--encre-douce);
}

/* ==========================================================================
   Avis

   Les noms de classes suivent `templates/review/`, qui existait AVANT la
   maquette et que `tests/e2e/avis.spec.ts` verrouille nominativement
   (`section.reviews`, `.reviews__item`, `.reviews__summary`…). Les renommer
   en français aurait cassé la suite pour un gain cosmétique nul.
   ========================================================================== */

.avis { margin-top: 44px; }

.reviews { margin-top: 44px; }
.avis h2, .reviews h2 {
    font-family: var(--titre); font-weight: 400; font-size: 28px; margin: 0 0 6px;
}

.reviews__summary { font-size: 14px; color: var(--encre-douce); margin-bottom: 22px; }
.reviews__histogram { margin: 0 0 22px; font-size: 13px; color: var(--encre-tenue); }

.reviews__list, .reviews__replies { list-style: none; margin: 0; padding: 0; }
.reviews__item { border-top: 1px solid var(--trait); padding: 18px 0; }
.reviews__item--reply { margin-left: 34px; border-top-style: dotted; }
.reviews__replies { margin-top: 6px; }

.review__header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.review__author { font-family: var(--titre); font-size: 16px; }
.review__content { font-size: 15px; color: #4d453c; margin: 8px 0 0; }

/* La note est rendue en étoiles ; la valeur chiffrée reste lisible par les
   lecteurs d'écran et sert d'assertion aux tests. */
.review-stars { color: var(--accent); letter-spacing: .1em; }
.review-stars__value { font-size: 13px; color: var(--encre-tenue); letter-spacing: normal; }
.review-stars__count { font-size: 13px; color: var(--encre-tenue); }

.reviews__empty, .reviews__closed {
    font-size: 14px; color: var(--encre-tenue);
    border-top: 1px solid var(--trait); padding-top: 18px;
}

/* ==========================================================================
   Pagination et états
   ========================================================================== */

.pagination { display: flex; gap: 12px; justify-content: center; margin: 40px 0 10px; }
.pagination a, .pagination span {
    font-family: var(--label); font-size: 12px; letter-spacing: .1em;
    padding: 10px 18px; border: 1px solid var(--trait-fort);
    border-radius: var(--rayon); color: var(--encre); text-transform: uppercase;
}
.pagination a:hover { border-color: var(--encre); }
.pagination [aria-disabled="true"] { opacity: .4; }

.vide { text-align: center; padding: 60px 0; color: var(--encre-tenue); }
.vide__titre { font-family: var(--titre); font-size: 24px; margin-bottom: 8px; }

.bloc { padding: 20px var(--gouttiere) 10px; }
.bloc--large { padding: 44px var(--gouttiere) 10px; }
.bloc--haut { padding: 58px var(--gouttiere) 46px; text-align: center; }
.bloc--bas { padding: 14px var(--gouttiere) 56px; }

/* ==========================================================================
   Adaptatif

   La maquette est dessinée pour un écran large uniquement. Ces règles sont
   un ajout : le site reçoit une part majoritaire de son trafic depuis
   Pinterest, donc sur mobile.
   ========================================================================== */

@media (max-width: 1100px) {
    .colonnes-contenu, .colonnes-listing { grid-template-columns: 1fr; }
    .colonne-laterale { position: static; }
    .grille--6 { grid-template-columns: repeat(3, 1fr); }
    .grille--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    :root { --gouttiere: 20px; }
    .entete { flex-direction: column; gap: 16px; }
    .entete__nav { flex-wrap: wrap; justify-content: center; }
    .utilitaire { justify-content: center; gap: 18px; }
    .titre-page { font-size: 38px; }
    .recette__titre { font-size: 32px; }
    .titre-section { font-size: 24px; }
    .grille--2, .grille--4, .grille--6 { grid-template-columns: 1fr 1fr; }
    .recette__corps { grid-template-columns: 1fr; }
    .fiche { flex-wrap: wrap; }
    .fiche__case { flex: 1 0 50%; border-bottom: 1px solid var(--trait); }
    .recherche { flex-wrap: wrap; padding-left: 14px; }
    .bouton { width: 100%; margin-top: 8px; }
}

@media (max-width: 460px) {
    .grille--2, .grille--4, .grille--6 { grid-template-columns: 1fr; }
}

/* Respecte le réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Compléments relevés à l'implémentation ------------------------------ */

/* Fil d'Ariane sémantique : `.fil` seul ne réinitialise pas les listes, donc
   un <ol> sortait avec puces et retrait. */
.fil__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fil__item { display: flex; gap: 6px; align-items: center; }
.fil__item + .fil__item::before { content: "/"; color: var(--trait-fort); }

/* `.etapes` porte le style du <h2> ET la réinitialisation de liste, ce qui
   obligeait à poser la classe deux fois. Séparé. */
.etapes__liste { list-style: none; margin: 0; padding: 0; }

/* Intertitre d'un groupe d'étapes, en vis-à-vis de `.ingredients__groupe-nom`. */
.etapes__groupe-nom {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .14em;
    color: var(--accent); margin: 24px 0 10px; text-transform: uppercase;
}

/* Nomme le libellé d'un ingrédient, en face de `.ingredients__qte`. */
.ingredients__nom { flex: 1; }

/* Auteur de la recette et vidéo : données réelles (authorName, videoEmbedUrl)
   sans emplacement dans la maquette. */
.recette__auteur { font-size: 14px; color: var(--encre-tenue); margin: 0 0 26px; }
.recette__video { margin: 32px 0; aspect-ratio: 16 / 9; }
.recette__video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--rayon-doux); }

/* ==========================================================================
   Contenu migré depuis Gutenberg

   Cinq documents portent des grilles de produits construites avec les blocs
   WordPress (`wp-block-columns`, `wp-block-gallery`) : la page Matériels
   (78 images), « 10 ustensiles indispensables » (9), « Les chefs » (5),
   plus deux marginaux.

   Sans ces règles, les colonnes s'empilent verticalement et la page devient
   une longue liste illisible — c'était le cas de /materiels-de-patisserie-pas-cher.
   Plutôt que de réécrire le contenu migré, on lui donne la grille de la charte.
   ========================================================================== */

.prose .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 28px 22px;
    margin: 28px 0;
}

/* Chaque colonne devient une fiche produit. */
.prose .wp-block-column {
    display: flex; flex-direction: column;
    background: var(--fond-panneau);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-doux);
    padding: 16px;
    min-width: 0;
}

/* Le titre du produit, en tête de fiche. */
.prose .wp-block-column > p:first-child {
    order: 2;
    font-family: var(--titre); font-size: 16px; line-height: 1.25;
    margin: 14px 0 0; text-align: center;
}
.prose .wp-block-column > p:first-child a { color: var(--encre); }
.prose .wp-block-column > p:first-child a:hover { color: var(--accent); }
.prose .wp-block-column > p:first-child strong { font-weight: 500; }

/* La galerie imbriquée porte l'image et sa légende. */
.prose .wp-block-gallery {
    order: 1; margin: 0;
    display: flex; flex-direction: column;
}
.prose .wp-block-image {
    margin: 0;
    background: #fff;
    border-radius: var(--rayon);
    overflow: hidden;
}
.prose .wp-block-image img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    padding: 10px; margin: 0;
    transition: transform .4s ease;
}
.prose .wp-block-column:hover .wp-block-image img { transform: scale(1.04); }

/* Légende : le libellé commercial du produit. Volontairement discret, le
   titre au-dessus portant l'information utile. */
.prose .wp-element-caption,
.prose .blocks-gallery-caption {
    order: 3;
    font-size: 12px; line-height: 1.35; color: var(--encre-tenue);
    text-align: center; margin-top: 8px;
}

/* Les intertitres de rubrique (« LES MATÉRIELS DE BASE », « POUR LES TARTES »)
   sont des paragraphes centrés en capitales dans le contenu migré. */
.prose .has-text-align-center { text-align: center; }

@media (max-width: 760px) {
    .prose .wp-block-columns { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
    .prose .wp-block-column { padding: 12px; }
}