/* ==========================================================================
   Pipattes · feuille de style principale

   Sommaire
   1. Polices
   2. Variables (couleurs, typographie, espacements)
   3. Base et accessibilité
   4. Mise en page (conteneur, sections, colonnes)
   5. Décor (formes, confettis, nuages, vagues)
   6. En-tête (bandeau d'annonce, navigation, panier)
   7. Bandeau de titre
   8. Composants (boutons, titres, étiquettes, listes, cartes)
   9. Page d'accueil
   10. Journal et pages de contenu (dont les blocs de l'éditeur)
   11. Pied de page
   12. Animations
   13. Mouvement réduit et impression

   Conventions
   - Les tailles sont en rem : le site suit la taille de texte choisie par le visiteur.
   - Les tailles fluides utilisent clamp(mini, valeur liée à l'écran, maxi) : pas de saut entre mobile et bureau.
   - Trois points de rupture seulement : 600 px, 900 px et 1100 px.
   ========================================================================== */

/* 1. Polices
   Hébergées par le thème (aucune requête vers un service tiers). « swap » affiche le texte
   tout de suite avec une police du système, puis bascule quand la police est chargée.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Fredoka";
    src: url("../fonts/fredoka-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/nunito-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mansalva";
    src: url("../fonts/mansalva-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 2. Variables
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs. Les contrastes sont vérifiés (RGAA, niveau AA) :
       - le blanc sur tomate n'est utilisé que pour du texte grand ou gras (rapport 3,4) ;
       - sur fond clair, le texte tomate utilise « tomate encre », plus foncée (rapport 5). */
    --c-tomato: #f4533a;
    --c-tomato-deep: #e0432a;
    --c-tomato-ink: #c8341c;
    --c-tomato-shadow: #a8290f;
    --c-charbon: #3a404b;
    --c-charbon-deep: #1f242c;
    --c-gris: #5e646f;
    --c-cream: #fff8ec;
    --c-white: #fff;
    --c-bleu: #8ed8ee;
    --c-jaune: #fde27a;
    --c-menthe: #b9e8d2;
    --c-rose: #ffbfcb;

    /* Typographie. */
    --f-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
    --f-text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-hand: "Mansalva", "Comic Sans MS", cursive;

    --fs-hero: clamp(2.75rem, 8.4vw, 7.25rem);
    --fs-title-xl: clamp(2.5rem, 6.4vw, 5.75rem);
    --fs-title: clamp(2.125rem, 5vw, 4.5rem);
    --fs-title-s: clamp(1.75rem, 3.4vw, 2.75rem);
    --fs-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);
    --fs-kicker: clamp(1.5rem, 2.3vw, 2rem);

    /* Espacements et mise en page. */
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --container: 75rem;
    --section: clamp(4rem, 9vw, 7.5rem);
    --radius: 1.75rem;

    /* Ombre « autocollant » des boutons et des cartes. */
    --shadow-hard: 0 5px 0 var(--c-charbon);
    --shadow-paper: 0 10px 24px -8px rgb(58 64 75 / 0.3);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 3. Base et accessibilité
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Laisse de l'air au-dessus d'une ancre visée par un lien interne. */
    scroll-padding-top: 2rem;
    /* Sans cette ligne, le « clip » de body est reporté sur la fenêtre et ne rogne plus rien : la page s'élargit sur mobile. */
    overflow-x: clip;
}

body {
    margin: 0;
    /* « clip » empêche le défilement horizontal causé par les formes qui débordent, sans créer de zone de défilement. */
    overflow-x: clip;
    background: var(--c-cream);
    color: var(--c-charbon);
    font-family: var(--f-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

ul[class],
ol[class] {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-underline-offset: 0.2em;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Focus clavier : toujours visible, sur fond clair comme sur fond tomate (double anneau). */
:focus-visible {
    outline: 3px solid var(--c-charbon);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px var(--c-white);
    border-radius: 0.5rem;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Le contenu principal reçoit le focus après le lien d'évitement : pas de cadre autour de toute la page. */
.site-main:focus {
    outline: none;
    box-shadow: none;
}

/* Texte réservé aux lecteurs d'écran. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : invisible, il apparaît à la première tabulation. */
.skip-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-charbon);
    font-family: var(--f-display);
    font-weight: 600;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* 4. Mise en page
   -------------------------------------------------------------------------- */
.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--section);
}

/* Première section sous un bandeau de titre : les nuages apportent déjà de l'espace. */
.section--first {
    padding-top: clamp(1rem, 3vw, 2rem);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__aside {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    max-width: 26rem;
    color: var(--c-gris);
    font-size: var(--fs-lead);
}

.section__center {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
}

.section__center .lead {
    max-width: 42rem;
}

/* Deux colonnes : un visuel et un texte. Empilées sur mobile. */
.split {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 6vw, 5.5rem);
}

.split__body {
    display: grid;
    gap: 1.5rem;
    justify-items: start;
}

.split__media {
    position: relative;
    display: grid;
    place-items: center;
    justify-self: center;
    width: min(100%, 36rem);
    padding: 4% 6%;
}

.split__media > img {
    position: relative;
}

.split__media--round,
.split__media--small,
.split__media--portrait {
    width: min(100%, 27rem);
    padding: 0;
}

.split__media--portrait {
    padding: 8% 10% 4%;
}

.split__extra {
    position: absolute !important;
    right: -6%;
    bottom: 2%;
    width: 42%;
    rotate: -12deg;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .split--tight {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
        width: min(100% - 2 * var(--gutter), 66rem);
    }

    /* Variante : le texte à gauche (colonne large), le visuel à droite. */
    .split--text-first {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr);
    }
}

/* 5. Décor
   -------------------------------------------------------------------------- */

/* Forme organique : elle remplit son conteneur et passe sous son contenu. */
.shape {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shape path {
    fill: currentColor;
}

.shape--jaune { color: var(--c-jaune); }
.shape--bleu { color: var(--c-bleu); }
.shape--menthe { color: var(--c-menthe); }
.shape--rose { color: var(--c-rose); }
.shape--tomate { color: var(--c-tomato); }
.shape--blanc { color: var(--c-white); }

/* Section posée sur une grande forme : la forme déborde un peu de l'écran, comme sur la maquette. */
.section--shape > .container {
    position: relative;
}

.section__shape {
    inset: clamp(1rem, 2.5vw, 2rem) -2.5rem;
    width: calc(100% + 5rem);
    max-width: none;
    height: calc(100% - 2 * clamp(1rem, 2.5vw, 2rem));
}

@media (min-width: 900px) {
    .section--narrow .section__shape {
        inset: 2rem 4%;
        width: 92%;
        height: calc(100% - 4rem);
    }
}

.section--tomato {
    color: var(--c-white);
}

/* Confettis. */
.confetti {
    position: absolute;
    pointer-events: none;
}

/* Nuages : toujours aussi larges que l'écran, jamais moins de 1100 px pour garder de belles bosses sur mobile. */
.clouds {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: max(100%, 68.75rem);
    aspect-ratio: 1560 / 220;
    height: auto;
    transform: translateX(-50%) translateY(calc(var(--py, 0) * 1px));
    pointer-events: none;
}

/* Ordre des plans du hero, de l'arrière vers l'avant :
   confettis, nuages sombres (0), girafe (1), nuages crème (2), Lapard (3), texte (4). */
.clouds--cream {
    z-index: 2;
    fill: var(--c-cream);
}

.clouds--deep {
    z-index: 0;
    bottom: clamp(2rem, 6vw, 5rem);
    fill: var(--c-tomato-deep);
}

/* Vague. */
.wave {
    display: block;
    width: 100%;
    height: clamp(2.25rem, 5vw, 4rem);
}

.wave--cream {
    fill: var(--c-cream);
}

/* 6. En-tête
   -------------------------------------------------------------------------- */
.site-top {
    position: relative;
    z-index: 20;
    background: var(--c-tomato);
}

.annonce {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1rem;
    padding: 0.625rem var(--gutter);
    background: var(--c-charbon);
    color: var(--c-white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.annonce li + li::before {
    content: "·";
    margin-right: 1rem;
}

/* Emplacement de la barre : il garde sa place dans la page quand la barre se détache pour suivre le défilement. */
.site-header-slot {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 1.75rem auto 0;
}

/* La barre blanche flottante. */
.site-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    min-height: 4.75rem;
    padding: 0.5rem 0.875rem 0.5rem clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 2.5rem;
    background: var(--c-white);
    box-shadow: 0 6px 0 rgb(168 41 15 / 0.45);
    translate: 0 0;
    transition: translate 0.35s var(--ease);
}

/* Barre détachée : elle suit le défilement, se cache quand on descend et revient dès qu'on remonte.
   Le passage à cet état est géré par main.js ; sans script, la barre reste en haut de la page. */
.site-header.is-fixed {
    position: fixed;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 60;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    box-shadow: 0 6px 0 rgb(168 41 15 / 0.45), 0 18px 34px -14px rgb(58 64 75 / 0.45);
}

.site-header.is-hidden {
    translate: 0 calc(-100% - 1.5rem);
}

.site-logo {
    display: block;
    flex: none;
    width: clamp(5.5rem, 10vw, 7rem);
    color: var(--c-tomato);
    transition: transform 0.3s var(--ease);
}

.site-logo:hover {
    transform: rotate(-4deg) scale(1.05);
}

.site-logo svg {
    width: 100%;
}

.site-nav {
    flex: 1;
}

.site-nav__list {
    display: flex;
    /* Une seule ligne sur grand écran, quel que soit le nombre d'entrées : sous 1100 px, le menu se replie. */
    flex-wrap: nowrap;
    gap: 0.25rem clamp(0.125rem, 1vw, 1rem);
}

.site-nav__list a {
    display: block;
    padding: 0.625rem clamp(0.5rem, 0.9vw, 0.75rem);
    border-radius: 999px;
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.site-nav__list a:hover {
    background: var(--c-cream);
}

/* Page en cours : signalée par la couleur et par un soulignement (jamais par la couleur seule). */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_parent > a,
.site-nav__list .current-menu-ancestor > a {
    color: var(--c-tomato-ink);
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

/* Sous-menus : ouverts au survol et au clavier. */
.site-nav__list li {
    position: relative;
}

.site-nav__list .sub-menu {
    margin: 0;
    padding: 0.5rem;
    list-style: none;
}

.site-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
    margin-left: auto;
}

.account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding-inline: 0.5rem;
    font-family: var(--f-display);
    font-weight: 500;
    text-decoration: none;
}

.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.25rem 0.5rem 0.25rem 1.375rem;
    border-radius: 999px;
    background: var(--c-charbon);
    color: var(--c-white);
    font-family: var(--f-display);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s var(--ease);
}

.cart-link:hover {
    transform: scale(1.04);
}

.cart-link__count {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding-inline: 0.5rem;
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-charbon);
    font-size: 0.9375rem;
    font-weight: 700;
}

.menu-toggle {
    display: none;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: var(--c-cream);
    cursor: pointer;
}

.menu-toggle__close {
    display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__open {
    display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
    display: block;
}

.site-top__wave {
    margin-top: 1.25rem;
}

/* Entre 900 et 1520 px, la place manque : « Mon compte » se réduit à son pictogramme (le libellé reste lu par les lecteurs d'écran). */
@media (min-width: 900px) and (max-width: 1519px) {
    .account-link__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

@media (min-width: 900px) {
    .site-nav__list .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 30;
        min-width: 14rem;
        border-radius: 1.25rem;
        background: var(--c-white);
        box-shadow: var(--shadow-paper);
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.5rem);
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    }

    .site-nav__list li:hover > .sub-menu,
    .site-nav__list li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Mobile et tablette : la navigation se replie derrière un bouton « Menu ». */
@media (max-width: 899px) {
    .menu-toggle {
        display: grid;
        order: 3;
    }

    .site-actions {
        order: 2;
    }

    .account-link__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 0;
        right: 0;
        z-index: 40;
        display: none;
        padding: 0.75rem;
        border-radius: var(--radius);
        background: var(--c-white);
        box-shadow: 0 6px 0 rgb(168 41 15 / 0.45), var(--shadow-paper);
    }

    .site-header.is-open .site-nav {
        display: block;
    }

    .site-nav__list {
        flex-direction: column;
        gap: 0.125rem;
    }

    .site-nav__list a {
        padding: 0.875rem 1rem;
        font-size: 1.25rem;
    }

    .site-nav__list .sub-menu {
        padding: 0 0 0 1rem;
    }
}

@media (max-width: 599px) {
    /* Sur petit écran, un seul message : le plus utile à l'acheteur. */
    .annonce li:not(:first-child) {
        display: none;
    }

    .site-header-slot {
        margin-top: 1rem;
    }

    .site-header {
        min-height: 4rem;
    }

    .cart-link {
        padding-left: 1rem;
    }
}

/* Très petits téléphones (320 à 380 px) : la barre se resserre pour que le bouton du menu reste dans la page. */
@media (max-width: 380px) {
    .site-header {
        gap: 0.5rem;
        padding-left: 1rem;
    }

    .site-logo {
        width: 4.75rem;
    }

    .cart-link {
        gap: 0.5rem;
        padding-left: 0.75rem;
        font-size: 1rem;
    }

    .menu-toggle {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Sous 380 px, le compte quitte la barre : il reste accessible depuis le pied de page. */
    .account-link {
        display: none;
    }
}

/* 7. Bandeau de titre
   -------------------------------------------------------------------------- */
.band {
    position: relative;
    /* Le bandeau forme son propre empilement : l'ordre des plans ci-dessous ne dépend pas du reste de la page. */
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(7.5rem, 15vw, 12.5rem);
    background: var(--c-tomato);
    color: var(--c-white);
    text-align: center;
}

.band__content {
    position: relative;
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.band__title {
    max-width: 18ch;
    font-family: var(--f-display);
    font-size: var(--fs-title-xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.band__title--xl {
    max-width: 14ch;
    font-size: var(--fs-hero);
    line-height: 0.96;
}

/* Gras et au moins 19 px : c'est ce qui rend ce texte blanc lisible sur fond tomate. */
.band__text {
    max-width: 40rem;
    font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
    font-weight: 700;
    line-height: 1.5;
    text-wrap: pretty;
}

.band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.25rem;
    margin-top: 0.75rem;
}

.band__confetti {
    top: 0;
    width: clamp(7rem, 21vw, 18.75rem);
    height: 100%;
}

.band__confetti--left { left: 0; }
.band__confetti--right { right: 0; }

/* Accueil : deux créatures sortent des nuages. */
.band--home {
    padding-bottom: clamp(13rem, 22vw, 17rem);
}

.band__creature {
    position: absolute;
    z-index: 1;
    bottom: 0;
    transform: translateY(calc(var(--py, 0) * 1px));
    pointer-events: none;
}

/* Girafe : plus haute, glissée derrière la rangée de nuages crème (plan 1) et devant les nuages sombres. */
.band__creature--left {
    z-index: 1;
    left: max(1rem, 50% - 36rem);
    bottom: clamp(-4rem, -3vw, -1.5rem);
    width: clamp(6rem, 17.5vw, 15.5rem);
}

/* Lapard : assis devant les nuages crème (plan 3). */
.band__creature--right {
    z-index: 3;
    right: max(0.5rem, 50% - 37.5rem);
    bottom: clamp(2rem, 6vw, 5.5rem);
    width: clamp(8.5rem, 26vw, 23.25rem);
}

/* Hero et confettis sur téléphone. Ce bloc doit rester après les règles de base ci-dessus : à priorité égale, la dernière règle l'emporte. */
@media (max-width: 599px) {
    /* Confettis : plus gros (le dessin est affiché presque à taille réelle), deux fois moins nombreux
       (un des trois groupes est masqué) et glissés à moitié hors de la page, pour ne pas gêner la lecture du titre. */
    .band__confetti {
        width: 12.5rem;
        height: 38%;
        /* Fondu vers le bas : aucun confetti ne vient se confondre avec le début du paragraphe. */
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
    }

    .band__confetti--left { left: -7rem; }
    .band__confetti--right { right: -7rem; }

    .band__confetti .confetti__group--3 {
        display: none;
    }

    /* Accueil : un hero plus haut, pour des créatures plus grandes. */
    .band--home {
        padding-bottom: 24rem;
    }

    .band__creature--left {
        left: 0.25rem;
        bottom: -2.5rem;
        width: 9.75rem;
    }

    .band__creature--right {
        right: 0.25rem;
        bottom: 3rem;
        width: 14.5rem;
    }
}

/* 8. Composants
   -------------------------------------------------------------------------- */

/* Boutons « autocollants » : une pilule avec une ombre dure, qui s'enfonce au clic. */
.button,
.wp-block-button__link,
.entry-content .button {
    --shadow: var(--c-charbon-deep);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.75rem;
    padding: 0.75rem 2.125rem;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 5px 0 var(--shadow);
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.button:hover,
.wp-block-button__link:hover {
    transform: translateY(2px);
    box-shadow: 0 3px 0 var(--shadow);
}

.button:active,
.wp-block-button__link:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 var(--shadow);
}

/* Sans variante précisée, un bouton est charbon : c'est le cas des boutons générés par WooCommerce.
   « :where » donne à cette règle une priorité nulle : n'importe quel style plus précis la remplace. */
:where(.button:not([class*="button--"])) {
    background: var(--c-charbon);
    color: var(--c-white);
}

/* Texte blanc sur tomate : gras obligatoire pour le contraste. */
.button--tomato,
.wp-block-button__link {
    --shadow: var(--c-tomato-shadow);

    background: var(--c-tomato);
    color: var(--c-white);
    font-weight: 700;
}

.button--charbon {
    background: var(--c-charbon);
    color: var(--c-white);
}

.button--white {
    --shadow: #e8d9cc;

    background: var(--c-white);
    color: var(--c-tomato-ink);
}

.band .button--white,
.section--tomato .button--white {
    --shadow: var(--c-tomato-shadow);
}

/* Petit titre manuscrit, au-dessus d'un titre. */
.kicker {
    font-family: var(--f-hand);
    font-size: var(--fs-kicker);
    line-height: 1.2;
    color: var(--c-tomato-ink);
}

.kicker--light { color: var(--c-white); }
.kicker--dark { color: var(--c-charbon); }
.kicker--small { font-size: 1.5rem; }

/* Titres de section. */
.title {
    font-family: var(--f-display);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.title--xl { font-size: var(--fs-title-xl); }
.title--small { font-size: var(--fs-title-s); }
.title--light { color: var(--c-white); }

.title__accent {
    display: block;
    color: var(--c-tomato-ink);
}

/* Texte d'introduction d'une section. */
.lead {
    max-width: 36rem;
    color: var(--c-gris);
    font-size: var(--fs-lead);
    text-wrap: pretty;
}

.lead--dark {
    color: var(--c-charbon);
    font-weight: 600;
}

/* Blanc sur tomate : gras et au moins 19 px. */
.lead--light {
    color: var(--c-white);
    font-size: clamp(1.1875rem, 1.5vw, 1.3125rem);
    font-weight: 700;
}

/* Étiquette : un mot sur une forme. */
.sticker {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 8rem;
    padding: 0.75rem 1.5rem;
    rotate: -3deg;
}

.sticker__label {
    position: relative;
    font-family: var(--f-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.1;
}

.sticker .shape--tomate + .sticker__label {
    color: var(--c-white);
    font-size: 1.1875rem;
    font-weight: 700;
}

.sticker--note {
    position: absolute;
    right: -4%;
    bottom: 6%;
    rotate: -8deg;
}

.sticker--note .sticker__label {
    font-family: var(--f-hand);
    font-size: 2rem;
    font-weight: 400;
}

/* Tag du mélange (« lapin + renard »), collé en haut à gauche de l'affiche sur la fiche produit. */
.sticker--mix {
    position: absolute;
    top: 2%;
    left: 0;
    z-index: 2;
    min-width: 9.5rem;
    padding: 0.875rem 1.75rem;
    rotate: -7deg;
    filter: drop-shadow(0 6px 10px rgb(58 64 75 / 0.18));
}

.sticker--mix .sticker__label {
    font-family: var(--f-hand);
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    font-weight: 400;
    white-space: nowrap;
}

.sticker--sale {
    position: absolute;
    top: 2%;
    left: -2%;
    min-width: 5.5rem;
    padding: 0.5rem 1rem;
    rotate: -8deg;
}

/* Liste d'atouts, avec coche. */
.checklist {
    display: grid;
    gap: 0.75rem;
    font-weight: 600;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.checklist__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--c-menthe);
}

/* Affiche : une feuille blanche, légèrement de travers. Elle se redresse au survol. */
.poster {
    position: relative;
    border-radius: 0.25rem;
    background: var(--c-white);
    box-shadow: var(--shadow-paper);
    transition: rotate 0.4s var(--ease), scale 0.4s var(--ease);
}

.poster--tilt-1 { rotate: -3deg; }
.poster--tilt-2 { rotate: 3deg; }
.poster--tilt-3 { rotate: -2deg; }
.poster--tilt-4 { rotate: 4deg; }

.tilt { rotate: 5deg; }

/* Grille d'affiches (accueil, boutique, affiches similaires). */
.product-grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2.6vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .product-grid,
    ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .product-grid,
    ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Carte d'une affiche. */
.card-product {
    position: relative;
    display: block;
}

.card-product__link {
    display: block;
    /* Place réservée à droite pour le prix et le bouton, posés par-dessus en bas de carte. */
    padding-bottom: 0.25rem;
    text-decoration: none;
}

.card-product__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 276 / 336;
    margin-bottom: 0.875rem;
}

.card-product__visual .poster {
    width: 71%;
}

.card-product__link:hover .poster,
.card-product__link:focus-visible .poster,
.recette__link:hover .poster {
    rotate: 0deg;
    scale: 1.05;
}

.card-product__name {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(1.125rem, 1.7vw, 1.375rem);
    font-weight: 700;
    line-height: 1.2;
}

.card-product__mix {
    display: block;
    color: var(--c-gris);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.card-product__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.card-product__price {
    color: var(--c-tomato-ink);
    font-family: var(--f-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.card-product__price del {
    color: var(--c-gris);
    font-size: 0.9375rem;
    font-weight: 500;
}

.card-product__price ins {
    text-decoration: none;
}

.card-product__add {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--c-charbon);
    box-shadow: 0 4px 0 var(--c-charbon-deep);
    color: var(--c-white);
    transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.2s;
}

.card-product__add:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--c-charbon-deep);
}

/* États renvoyés par WooCommerce pendant et après l'ajout au panier. */
.card-product__add.loading {
    opacity: 0.6;
}

.card-product__add.added {
    background: #2f7d5b;
}

.card-product .added_to_cart {
    display: none;
}

@media (min-width: 1100px) {
    /* Sur grand écran : le nom à gauche, le prix et le bouton à droite, sur la même ligne. */
    .card-product__link {
        padding-right: 8.75rem;
    }

    .card-product__visual {
        margin-right: -8.75rem;
    }

    .card-product__buy {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 0;
    }
}

/* Les quatre atouts, en étiquettes. */
.atouts {
    padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.atouts--bottom {
    padding-block: 0 var(--section);
}

.atouts__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
    .atouts__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.atout {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.125rem;
    min-height: clamp(6.5rem, 12vw, 9.375rem);
    padding: 1.25rem 1rem;
    text-align: center;
}

.atout:nth-child(odd) { rotate: -2deg; }
.atout:nth-child(even) { rotate: 2deg; }

.atout__title,
.atout__text {
    position: relative;
}

.atout__title {
    font-family: var(--f-display);
    font-size: clamp(1.0625rem, 1.8vw, 1.4375rem);
    font-weight: 700;
    line-height: 1.2;
}

.atout__text {
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
    font-weight: 600;
    line-height: 1.35;
}

/* Les deux formats. */
.formats {
    display: grid;
    gap: 1.125rem;
    width: 100%;
}

.format {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 1rem;
    padding: 1.125rem clamp(1.25rem, 3vw, 1.875rem);
    border: 3px solid var(--c-charbon);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-hard);
}

.format__name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.format__detail {
    grid-column: 1;
    color: var(--c-gris);
    font-weight: 600;
}

.format__price {
    grid-area: 1 / 2 / 3 / 3;
    color: var(--c-tomato-ink);
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 700;
}

/* Rubriques du journal, en pastilles. */
.chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 clamp(2rem, 4vw, 3.5rem);
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.5rem 1.5rem;
    border: 3px solid var(--c-charbon);
    border-radius: 999px;
    background: var(--c-white);
    font-family: var(--f-display);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.chip:hover,
.chip[aria-current="page"] {
    background: var(--c-charbon);
    color: var(--c-white);
}

/* Fil d'Ariane. */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--c-gris);
    font-size: 0.9375rem;
    font-weight: 600;
}

.breadcrumb a:hover {
    color: var(--c-charbon);
}

.breadcrumb [aria-current],
.breadcrumb > :last-child {
    color: var(--c-charbon);
    font-weight: 700;
}

/* Pagination. */
.pagination {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.pagination .nav-links,
.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers:not(ul) {
    display: grid;
    place-items: center;
    min-width: 3.25rem;
    height: 3.25rem;
    padding-inline: 0.75rem;
    border: 3px solid var(--c-charbon);
    border-radius: 999px;
    background: var(--c-white);
    font-family: var(--f-display);
    font-size: 1.1875rem;
    font-weight: 700;
    text-decoration: none;
}

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
    border-color: var(--c-tomato);
    background: var(--c-tomato);
    box-shadow: 0 4px 0 var(--c-tomato-shadow);
    color: var(--c-white);
}

.pagination .dots {
    border: 0;
    background: none;
}

/* Champs de formulaire. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.625rem 1.25rem;
    border: 3px solid var(--c-charbon);
    border-radius: 1.75rem;
    background: var(--c-white);
}

textarea {
    min-height: 9rem;
    border-radius: 1.5rem;
}

label {
    display: inline-block;
    margin-bottom: 0.375rem;
    font-weight: 700;
}

.search-form {
    max-width: 36rem;
    margin-bottom: 3rem;
}

.search-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.search-form__row input {
    flex: 1 1 14rem;
}

/* 9. Page d'accueil
   -------------------------------------------------------------------------- */
.recettes {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: 1.5rem;
}

@media (min-width: 700px) {
    .recettes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.recette__link {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.recette .poster {
    width: min(100%, 14.75rem);
    margin-bottom: 1rem;
    box-shadow: 0 18px 40px -12px rgb(58 64 75 / 0.35);
}

.recette__mix {
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 600;
    line-height: 1.2;
}

/* Tomate encre sur bleu : lisible parce que le texte est grand (au moins 32 px). */
.recette__name,
.story__name {
    color: var(--c-tomato-ink);
    font-family: var(--f-hand);
    font-size: clamp(2.125rem, 4vw, 3rem);
    line-height: 1;
}

.split__media--round img {
    border-radius: 50%;
}

/* 10. Journal et pages de contenu
   -------------------------------------------------------------------------- */
.post-grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 600px) {
    .post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .post-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.card-post article {
    display: grid;
    gap: 0.625rem;
}

.card-post__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 376 / 270;
    margin-bottom: 0.5rem;
    padding: 9% 12%;
}

/* L'image remplit un cadre fixe, quelle que soit sa forme d'origine : elle est recadrée, jamais déformée. */
.card-post__image {
    position: absolute;
    inset: 9% 12%;
    width: 76%;
    height: 82%;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: var(--shadow-paper);
    transition: rotate 0.4s var(--ease), scale 0.4s var(--ease);
}

.card-post:hover .card-post__image {
    rotate: 0deg;
    scale: 1.04;
}

.card-post__title {
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    font-weight: 600;
    line-height: 1.2;
}

.card-post__title a {
    text-decoration: none;
}

.card-post__title a:hover {
    text-decoration: underline;
}

.card-post__meta {
    color: var(--c-gris);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Article. */
.article__header {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding-top: clamp(0.5rem, 2vw, 1.5rem);
    text-align: center;
}

.article__header .breadcrumb {
    justify-self: start;
    margin-bottom: 0;
}

.article__category {
    text-decoration: none;
}

.article__title,
.page-content__title {
    max-width: 20ch;
    font-family: var(--f-display);
    font-size: clamp(2.125rem, 5.2vw, 4.25rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.article__meta {
    color: var(--c-gris);
    font-weight: 700;
}

.article__figure {
    position: relative;
    width: min(100%, 68rem);
    margin-top: 1rem;
    padding: clamp(1rem, 4vw, 2.75rem) clamp(1.25rem, 6vw, 4.5rem);
}

/* Visuel d'ouverture : toujours au format 16/9, recadré si l'image d'origine est en hauteur. */
.article__figure img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    box-shadow: var(--shadow-paper);
    object-fit: cover;
}

/* Contenu rédigé dans l'éditeur : colonne de lecture étroite, hiérarchie de titres nette. */
.entry-content {
    width: min(100% - 2 * var(--gutter), 45rem);
    margin-inline: auto;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.7;
}

.article__body {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.entry-content > * + * {
    margin-top: 1.5em;
}

.entry-content > p:first-child {
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.5;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2em;
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.1;
    text-wrap: balance;
}

.entry-content h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.entry-content h3 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.entry-content h4 { font-size: 1.25rem; }

.entry-content a:not(.button, .wp-block-button__link) {
    color: var(--c-tomato-ink);
    font-weight: 700;
}

/* Listes d'un contenu rédigé : on leur rend leurs puces et leurs numéros (retirés plus haut pour les listes du thème). */
.entry-content :is(ul, ol):not(.checklist, .product-grid, .products, .post-grid) {
    display: grid;
    gap: 0.625em;
    padding-left: 1.5em;
    list-style: revert;
}

.entry-content ul li::marker {
    color: var(--c-tomato);
}

.entry-content ol li::marker {
    font-family: var(--f-display);
    font-weight: 700;
}

/* Citation : une note manuscrite sur fond jaune. */
.entry-content blockquote,
.wp-block-quote,
.wp-block-pullquote {
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 0;
    border-radius: 2.5rem 3.5rem 2.75rem 3.25rem;
    background: var(--c-jaune);
    rotate: -1deg;
    font-family: var(--f-hand);
    font-size: clamp(1.625rem, 3.4vw, 2.5rem);
    line-height: 1.2;
    text-align: center;
}

.entry-content blockquote cite,
.wp-block-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--f-display);
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 600;
}

.entry-content img,
.entry-content .wp-block-image img {
    border-radius: var(--radius);
}

.entry-content figcaption {
    margin-top: 0.75rem;
    color: var(--c-gris);
    font-size: 0.9375rem;
    text-align: center;
}

.entry-content hr {
    width: 6rem;
    height: 6px;
    margin-block: 3em;
    border: 0;
    border-radius: 999px;
    background: var(--c-tomato);
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    padding: 0.75rem 1rem;
    border-bottom: 2px solid rgb(58 64 75 / 0.15);
    text-align: left;
}

/* Questions fréquentes (bloc « Détails ») et lien vers la boutique sous un article. */
.entry-content details {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--c-white);
}

.entry-content summary {
    font-family: var(--f-display);
    font-weight: 700;
    cursor: pointer;
}

.article__shop {
    margin-block: var(--section);
}

/* Encadré des pages légales (garanties, formulaire de rétractation) : groupe avec la classe « encadre-legal ». */
.entry-content .encadre-legal {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 2px solid rgb(58 64 75 / 0.25);
    border-radius: var(--radius);
    font-size: 0.9em;
    line-height: 1.6;
}

.entry-content .encadre-legal > * + * {
    margin-top: 1em;
}

/* Blocs larges : ils sortent de la colonne de lecture.
   Seuls les blocs de premier niveau sont concernés : à l'intérieur d'un groupe, WordPress gère lui-même les largeurs. */
.entry-content > .alignwide {
    width: min(100vw - 2 * var(--gutter), var(--container));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.entry-content > .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.page-content {
    padding-block: clamp(1rem, 3vw, 2rem) var(--section);
}

.page-content--short {
    padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

.page-content--short .page-content__title {
    width: min(100%, var(--container));
    margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.page-content > .entry-content {
    width: 100%;
    max-width: 45rem;
}

/* Un texte collé depuis un autre logiciel peut contenir des classes du thème (« section », « container ») :
   dans un contenu rédigé, elles ne doivent produire aucun effet. */
.entry-content .section,
.entry-content .container {
    width: auto;
    padding: 0;
}

/* Les pages de la boutique (panier, commande) utilisent toute la largeur. */
.page-content--short > .entry-content {
    max-width: none;
}

/* Blocs de l'éditeur : styles propres à Pipattes (déclarés dans inc/blocks.php).
   ---------------------------------------------------------------------- */

/* Groupe « sur forme » : une section de pleine largeur, posée sur une forme colorée. */
.wp-block-group[class*="is-style-forme-"] {
    position: relative;
    margin-block: clamp(2.5rem, 6vw, 5rem);
    padding: clamp(3.5rem, 9vw, 7.5rem) var(--gutter);
    font-weight: 600;
}

.wp-block-group[class*="is-style-forme-"] > :not(.shape) {
    position: relative;
}

/* « !important » : WordPress limite la largeur des enfants d'un groupe et les centre ; la forme, elle, doit remplir le groupe. */
.wp-block-group[class*="is-style-forme-"] > .shape {
    inset: 0 -2.5rem;
    width: calc(100% + 5rem);
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
}

@media (min-width: 900px) {
    .wp-block-group:is(.is-style-forme-jaune, .is-style-forme-bleue, .is-style-forme-menthe) > .shape {
        inset: 0 4%;
        width: 92%;
    }
}

/* Sur fond tomate : texte blanc, gras et assez grand pour rester lisible. */
.wp-block-group.is-style-forme-tomate {
    color: var(--c-white);
    font-size: clamp(1.1875rem, 1.5vw, 1.3125rem);
    font-weight: 700;
}

.wp-block-group.is-style-forme-tomate :is(h2, h3, .is-style-manuscrit) {
    color: var(--c-white);
}

.wp-block-group.is-style-forme-tomate .wp-block-button__link {
    --shadow: var(--c-tomato-shadow);

    background: var(--c-white);
    color: var(--c-tomato-ink);
}

/* Deux colonnes : l'espace entre l'image et le texte suit la taille de l'écran. */
.entry-content .wp-block-columns {
    gap: clamp(1.75rem, 6vw, 5rem);
}

.entry-content .wp-block-column > * + * {
    margin-top: 1.25em;
}

/* Paragraphe « manuscrit » : le petit titre au-dessus d'un titre. */
.is-style-manuscrit {
    color: var(--c-tomato-ink);
    font-family: var(--f-hand);
    font-size: var(--fs-kicker);
    font-weight: 400;
    line-height: 1.2;
}

.entry-content .is-style-manuscrit + :is(h2, h3) {
    margin-top: 0.25em;
}

/* Titres des pages de contenu : plus grands que dans un article. */
.page-content .entry-content h2 {
    font-size: clamp(2rem, 4.6vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
}

.entry-content .wp-block-heading.is-style-geant {
    font-size: clamp(2.5rem, 7.5vw, 6.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* Image « affiche » : une feuille blanche inclinée. Deux affiches voisines penchent en sens inverse. */
.wp-block-image.is-style-affiche img {
    border-radius: 0.3125rem;
    background: var(--c-white);
    box-shadow: 0 18px 40px -12px rgb(58 64 75 / 0.35);
    rotate: -4deg;
    transition: rotate 0.4s var(--ease);
}

.wp-block-column:nth-child(even) > .wp-block-image.is-style-affiche img,
.wp-block-image.is-style-affiche + .wp-block-image.is-style-affiche img {
    rotate: 4deg;
}

.wp-block-image.is-style-affiche:hover img {
    rotate: 0deg;
}

/* Image « portrait » : posée sur un fond bleu aux bords irréguliers. */
.wp-block-image.is-style-portrait {
    padding: 8% 10% 0;
    border-radius: 44% 56% 52% 48% / 46% 44% 56% 54%;
    background: var(--c-bleu);
    overflow: hidden;
}

.wp-block-image.is-style-portrait img {
    border-radius: 0;
}

/* Citation « manuscrite » : grande, sans fond. */
.entry-content .wp-block-quote.is-style-manuscrite {
    padding: clamp(1rem, 4vw, 3rem) 0;
    background: none;
    rotate: none;
    color: var(--c-tomato-ink);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.15;
}

.entry-content .wp-block-buttons {
    gap: 1rem;
}

/* Page introuvable. */
.not-found {
    display: grid;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding-bottom: var(--section);
}

.not-found > div:last-child {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
}

.not-found__visual {
    position: relative;
    display: grid;
    place-items: end center;
    justify-self: center;
    width: min(100%, 22rem);
    aspect-ratio: 1;
    padding-top: 12%;
    overflow: hidden;
}

.not-found__visual img {
    position: relative;
    width: 42%;
}

.not-found__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (min-width: 800px) {
    .not-found {
        grid-template-columns: 0.8fr 1fr;
    }
}

/* 11. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    overflow: hidden;
    padding-top: clamp(11rem, 20vw, 15.5rem);
    background: var(--c-charbon);
    color: var(--c-white);
}

.site-footer__wave {
    position: absolute;
    top: -1px;
    left: 0;
    height: clamp(2.5rem, 6vw, 5.5rem);
    transform: rotate(180deg);
}

.site-footer__confetti {
    top: clamp(3rem, 6vw, 4.5rem);
    left: 0;
    width: 100%;
    height: clamp(7rem, 14vw, 12.5rem);
}

.site-footer__inner {
    position: relative;
    display: grid;
    gap: 2.5rem 2rem;
    padding-bottom: 3.5rem;
}

.site-footer__brand {
    display: grid;
    gap: 1.25rem;
    align-content: start;
    max-width: 20rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.site-logo--footer {
    width: clamp(11rem, 22vw, 18rem);
    color: var(--c-white);
}

.site-footer__title {
    margin-bottom: 0.875rem;
    color: var(--c-jaune);
    font-family: var(--f-display);
    font-size: 1.3125rem;
    font-weight: 700;
}

.site-footer__column ul {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer a {
    display: inline-block;
    padding-block: 0.375rem;
    font-weight: 600;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.site-footer :focus-visible {
    outline-color: var(--c-white);
    box-shadow: 0 0 0 6px var(--c-charbon);
}

.site-footer__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1.5rem 2.5rem;
    border-top: 2px solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.78);
    font-size: 0.875rem;
    font-weight: 600;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 600px) {
    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .site-footer__inner {
        grid-template-columns: 1.6fr repeat(3, auto);
        justify-content: space-between;
    }
}

/* 12. Animations
   -------------------------------------------------------------------------- */

/* Apparition au défilement. Le contenu n'est masqué que si JavaScript est actif (classe « js » sur <html>). */
.js .reveal {
    opacity: 0;
    transform: translateY(1.75rem);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease var(--delay, 0ms), transform 0.7s var(--ease) var(--delay, 0ms);
}

/* Parallaxe : main.js écrit le décalage dans la variable --py. */
[data-parallax],
[data-parallax-center],
.section__shape {
    transform: translate3d(0, calc(var(--py, 0) * 1px), 0);
    will-change: transform;
}

/* Les créatures de l'accueil sortent des nuages, puis la girafe dodeline. */
.band__creature img {
    animation: creature-in 0.9s var(--ease) 0.2s both;
}

.band__creature--right img {
    animation-delay: 0.35s;
}

.band__creature--left img {
    transform-origin: 50% 100%;
    animation: creature-in 0.9s var(--ease) 0.2s both, sway 5s ease-in-out 1.2s infinite alternate;
}

@keyframes creature-in {
    from { translate: 0 45%; }
    to { translate: 0 0; }
}

@keyframes sway {
    from { rotate: -4deg; }
    to { rotate: 1deg; }
}

/* Les confettis flottent, chaque groupe à son rythme. */
.confetti__group {
    animation: float 6s ease-in-out infinite alternate;
}

.confetti__group--2 {
    animation-duration: 7.5s;
    animation-delay: -2s;
}

.confetti__group--3 {
    animation-duration: 9s;
    animation-delay: -4s;
}

@keyframes float {
    from { translate: 0 -5px; }
    to { translate: 0 7px; }
}

/* Le compteur du panier sursaute quand une affiche est ajoutée. */
.cart-link__count.is-bumped {
    animation: bump 0.5s var(--ease);
}

@keyframes bump {
    40% { scale: 1.35; }
}

/* 13. Mouvement réduit et impression
   -------------------------------------------------------------------------- */

/* Le visiteur a demandé moins d'animations dans son système : on n'en joue aucune. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    [data-parallax],
    [data-parallax-center],
    .section__shape,
    .band__creature {
        transform: none;
    }
}

@media print {
    .site-top,
    .site-footer,
    .band__confetti,
    .clouds,
    .button {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .band {
        padding: 0;
        background: none;
        color: #000;
    }
}