/* ============================================================
   PIF GADGET - maquette homepage
   Couleurs relevées dans le logo officiel :
   rouge #CE100A · jaune #FFEE00 · encre #001326
   ============================================================ */

:root {
  /* Marque */
  --rouge:        #CE100A;
  --rouge-fonce:  #A80C07;
  --jaune:        #FFEE00;
  --encre:        #001326;
  --encre-60:     #4A5765;
  --encre-35:     #8D97A3;

  /* Ciel */
  --ciel-haut:    #8FCDEC;
  --ciel-bas:     #E4F3FB;

  /* Cahier */
  --cahier:       #FCFCF7;
  --cahier-trait: rgba(0, 60, 110, .085);
  --cahier-marge: rgba(206, 16, 10, .18);

  --blanc:        #FFFFFF;
  --bord:         #E2E6EB;

  --titre: "Fredoka", "Trebuchet MS", sans-serif;
  --texte: "Nunito Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --rayon:  18px;
  --ombre:  0 2px 0 rgba(0,19,38,.06), 0 10px 26px -14px rgba(0,19,38,.35);
  --gouttiere: clamp(18px, 4vw, 48px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Le quadrillage vit sur le body : une seule trame pour toute la page,
     donc aucun décalage ni doublon de lignes entre deux sections. */
  background-color: var(--cahier);
  background-image:
    linear-gradient(to right,  var(--cahier-trait) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cahier-trait) 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* pistes qui débordent volontairement (carrousel) */
}
/* avec une barre de défilement classique (Windows), 100vw dépasse la
   largeur utile de quelques pixels : la page ne doit jamais défiler
   horizontalement pour autant */
/* seulement avec souris : sur iPhone, ce verrou empêchait les rangées
   défilantes (personnages, frise) de répondre au doigt */
@media (hover: hover) and (pointer: fine) {
  html { overflow-x: clip; }
}

/* height:auto : sinon l'attribut height="…" des images reste actif
   dès qu'une règle ne fixe que la largeur, et l'image s'étire. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--titre); margin: 0; line-height: 1.08; text-wrap: balance; }

:where(a, button, input):focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
  border-radius: 6px;
}

.enveloppe {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}

.btn--rouge { background: var(--rouge); color: var(--blanc); }
.btn--rouge:hover { background: var(--rouge-fonce); transform: translateY(-2px); }

.btn--contour {
  background: var(--blanc);
  color: var(--rouge);
  border-color: var(--rouge);
}
.btn--contour:hover { background: var(--rouge); color: var(--blanc); transform: translateY(-2px); }

.btn--jaune { background: var(--jaune); color: var(--encre); }
.btn--jaune:hover { transform: translateY(-2px); }

/* ---------- Bandeau ---------- */

.bandeau {
  background: var(--encre);
  color: var(--blanc);
  font-size: .84rem;
  text-align: center;
  padding: 9px var(--gouttiere);
}

.bandeau strong { color: var(--jaune); font-weight: 700; }

/* ---------- En-tête ---------- */

/* En-tête posé directement sur le ciel, comme sur la planche. */
.entete {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
}

/* Logo au centre exact de la page, nav et actions poussées à droite. */
.entete__interieur {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: clamp(14px, 1.8vh, 22px);
}

/* Le header respire plus large que le reste de la page : c'est ce qui
   permet au logo d'être vraiment centré sans écraser la navigation. */
.entete .enveloppe { max-width: 1520px; }

.marque { grid-column: 2; justify-self: center; }
.marque img { width: clamp(100px, 10vw, 124px); height: auto; transition: width .25s ease; }
/* accueil : logo plus grand en haut de page */
.hero .marque img { width: clamp(120px, 12.5vw, 176px); }

/* Header flottant : passé les premiers pixels de défilement, site.js fixe
   le header en haut de l'écran (fond papier, logo réduit) et laisse un
   gabarit vide à sa place pour que rien ne bouge en dessous. */
/* Le script déplace le header à la fin de <body> pendant qu'il flotte :
   il sort du bandeau (overflow, isolation) et se peint au-dessus de tout.
   Fond opaque : pas de filtre d'arrière-plan, Safari iOS le rendait
   transparent. */
body.entete-flottante .entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--cahier);
  border-bottom: 1px solid var(--bord);
  box-shadow: 0 10px 30px -18px rgba(0,19,38,.35);
  /* pas d'animation d'entrée : un onglet en arrière-plan la fige à mi-course */
}
/* sous la barre d'administration WordPress, seulement si elle est affichée
   (dans l'aperçu du Personnaliser, elle est masquée) */
body.admin-bar.entete-flottante .entete { top: var(--wp-admin--admin-bar--height, 32px); }
body.entete-flottante .entete__interieur { padding-block: 8px; }
/* sous 600 px, WordPress ne fixe plus sa barre d'administration (elle
   défile) : le header flottant se cale tout en haut */
@media (max-width: 600px) {
  body.admin-bar.entete-flottante .entete { top: 0; }
}
/* menu plein écran ouvert : le header flottant disparaît, le menu a sa
   propre rangée logo + fermer */
body.menu-ouvert.entete-flottante .entete { visibility: hidden; }
body.entete-flottante .marque img,
body.entete-flottante .hero .marque img { width: 84px; }

.bloc-droite {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.nav-principale { display: flex; gap: 5px; }

.nav-principale a {
  font-family: var(--titre);
  font-weight: 500;
  /* couleur explicite : sur un bandeau sombre le texte hériterait du blanc */
  color: var(--encre);
  font-size: .6rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}

.nav-principale a:hover,
.nav-principale a[aria-current] { background: var(--encre); color: var(--blanc); }

.nav-principale a.est-boutique { border-color: var(--rouge); color: var(--rouge); }
.nav-principale a.est-boutique:hover { background: var(--rouge); color: var(--blanc); }

/* Abonnement : pastille pleine en jaune de marque, la plus visible du menu */
.nav-principale a.est-abonnement { background: var(--jaune); border-color: var(--encre); color: var(--encre); font-weight: 600; }
.nav-principale a.est-abonnement:hover,
.nav-principale a.est-abonnement[aria-current] { background: var(--encre); color: var(--jaune); }
.menu-mobile a.est-abonnement { color: var(--encre); background: var(--jaune); }
.menu-mobile a.est-abonnement[aria-current] { background: var(--encre); color: var(--jaune); }

/* Sur la boutique elle-même, la pastille reste pleine, en rouge. */
.nav-principale a.est-boutique[aria-current],
.menu-mobile a.est-boutique[aria-current] { background: var(--rouge); color: var(--blanc); }

.actions-entete { display: flex; align-items: center; gap: 4px; }

.icone-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: var(--encre);
  background: rgba(255,255,255,.72);
}
.icone-btn:hover { background: var(--blanc); }
.icone-btn svg { width: 15px; height: 15px; }

.pastille {
  position: absolute;
  top: -2px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: .66rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.burger { display: none; }

/* Menu compact. Sur tablette : panneau sous le header. Sur mobile
   (règles plus bas) : panneau plein écran qui glisse depuis la droite.
   L'état ouvert est porté par la classe .est-ouvert, posée par le
   script du burger ; l'attribut hidden ne sert qu'avant le script. */
.entete__interieur { position: relative; z-index: 10; }

.menu-mobile {
  position: absolute;
  z-index: 5;
  left: var(--gouttiere);
  right: var(--gouttiere);
  top: calc(100% - 4px);
  background: var(--blanc);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 18px 40px -16px rgba(0,19,38,.45);
  display: none;
  gap: 4px;
}

.menu-mobile.est-ouvert { display: grid; }
.menu-mobile[hidden] { display: none; }

.menu-mobile a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 16px;
  border-radius: 12px;
}

.menu-mobile a:hover { background: #F0F3F6; }
.menu-mobile a.est-boutique { color: var(--rouge); }

.menu-mobile__compte {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rouge);
  color: var(--blanc);
  font-size: .72rem;
  display: grid;
  place-items: center;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* tailles partagées par la feuille et Pif, pour les empêcher de se chevaucher */
  --mag-l: min(400px, 38vw, 48vh);
  --pif-h: clamp(230px, 64vh, 610px);
  overflow: hidden;
  /* Un écran, jamais plus. Plancher pour les fenêtres basses,
     plafond pour ne pas s'étirer sur un grand moniteur. */
  height: min(100vh, 900px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background-color: var(--ciel-bas);
  background-image: url("ciel-affiche.jpg");
  background-size: cover;
  background-position: center 62%;
  /* la vidéo du ciel (z-index -1) reste dans le hero, sous tout le reste */
  isolation: isolate;
}

/* Ciel animé : vidéo en boucle posée sous le voile et le contenu.
   Son fond est l'image d'affiche (1re image de la vidéo), cadrée et
   zoomée comme elle : rien ne bouge quand la vidéo démarre. Le fond du
   hero (même image, sans zoom) ne sert que si les animations sont
   désactivées. */
.ciel {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  background: url("ciel-affiche.jpg") center 62% / cover no-repeat;
  /* léger zoom sur le ciel, depuis son point de cadrage */
  transform: scale(1.15);
  transform-origin: center 62%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ciel { display: none; }
}

/* Voile : éclaircit le bas pour la transition vers le cahier,
   et pose une zone claire à gauche pour la lisibilité du texte. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(64% 78% at 20% 52%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.16) 46%, rgba(255,255,255,0) 72%),
    linear-gradient(to bottom, rgba(255,255,255,0) 58%, rgba(252,252,247,.92) 100%);
}

/* Scène : chaque élément est posé, pas aligné dans une grille. */
.hero__interieur {
  position: relative;
  z-index: 10;
  flex: 1;
  min-height: 0;
  /* Indispensable : sans largeur explicite, le `margin-inline: auto`
     hérité de .enveloppe empêche l'étirement du flex item et la boîte
     s'effondre à 0 (tous ses enfants sont en position absolue). */
  width: 100%;
  align-self: stretch;
}

/* Étoile gadget : l'éclat jaune du logo (contour vectorisé depuis
   logo.png, 22 sommets, viewBox 934 × 682), posé en haut à gauche.
   Sa taille suit aussi la hauteur d'écran pour ne jamais toucher la
   feuille du magazine en dessous. `container-type` dimensionne le
   texte en fraction de la largeur de l'éclat (unités cqw). */

.etoile {
  position: absolute;
  z-index: 15;
  top: clamp(8px, 1.5vh, 16px);
  left: clamp(8px, 1.2vw, 18px);
  width: clamp(180px, min(20vw, 38vh), 330px);
  aspect-ratio: 934 / 682;
  container-type: inline-size;
  transition: transform .18s ease;
}

.etoile:hover { transform: rotate(-3deg) scale(1.04); }

.etoile svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ombre portée noire décalée, puis l'éclat jaune cerné de noir */
.etoile__ombre { fill: #000; transform: translate(22px, 24px); }
.etoile__forme { fill: var(--jaune); stroke: #000; stroke-width: 12; stroke-linejoin: miter; }

/* texte au centre visuel de l'éclat, incliné comme « GADGET » dans le logo */
.etoile__texte {
  position: absolute;
  left: 53%;
  top: 55%;
  translate: -50% -50%;
  rotate: -9deg;
  display: block;
  text-align: center;
}

.etoile__texte b {
  display: block;
  font-family: "Bangers", var(--titre);
  font-weight: 400;
  font-size: 11cqw;
  line-height: .95;
  letter-spacing: .03em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--encre);
}


/* Magazine : calé en bas à gauche de la scène */

.mag {
  position: absolute;
  /* Un élément absolu se cale sur la boîte de padding : sans ce
     décalage il colle au bord dès que la fenêtre atteint 1280. */
  left: calc(var(--gouttiere) + 6px);
  bottom: clamp(16px, 4vh, 48px);
  z-index: 14;
  --l: var(--mag-l);
  width: var(--l);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  align-items: center;
}

/* Deux nuages (arrière gris, avant blanc) recadrés dans le même cadre :
   posés l'un sur l'autre, ils se superposent comme dans la planche. La
   couverture est prise entre les deux et dépasse au-dessus. */
.nuages {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 530;
  /* place pour la couverture, qui monte au-dessus des nuages */
  margin-top: calc(var(--l) * .5);
}

.nuage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nuage--arriere { z-index: 0; animation: nuage-derive 9s ease-in-out infinite alternate; }
.nuage--avant   { z-index: 2; animation: nuage-derive 7s ease-in-out infinite alternate-reverse; }

/* Couverture : centrée, le bas caché derrière le nuage avant. */
.mag__lien {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 45%;
  width: 62%;
  translate: -50% 0;
  border-radius: 6px;
  rotate: -2.5deg;
  animation: mag-flotte 4.6s ease-in-out infinite alternate;
  transition: rotate .3s ease, scale .3s ease;
}

.mag__visuel {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0,19,38,.10), 0 22px 40px -18px rgba(0,19,38,.6);
}

.mag__lien:hover,
.mag__lien:focus-visible {
  rotate: 1.5deg;
  scale: 1.05;
}

/* flottement : la couverture monte et descend doucement, les nuages
   dérivent en sens contraire */
@keyframes mag-flotte {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}
@keyframes nuage-derive {
  from { transform: translateX(0); }
  to   { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .mag__lien, .nuage { animation: none; }
}

.mag h1 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  margin: 8px 0 4px;
}

.mag__prix {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--rouge);
  margin: 0;
}

.mag__actions {
  display: flex;
  flex-direction: row;
  gap: 7px;
  margin-top: 12px;
  width: 100%;
}

.mag__actions .btn {
  flex: 1;
  padding: 11px 8px;
  font-size: .72rem;
  line-height: 1.15;
  text-align: center;
}

/* Colonne Pif */

/* Pif : centré sur l'écran, le reste se pose autour de lui */

.pif {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 6;
  /* Pif reste centré ; s'il toucherait la feuille (fenêtres moyennes),
     on réserve à gauche la place qui manque. Toute la largeur de
     l'animation compte : les abeilles volent jusqu'à ses bords.
     Le % se calcule sur la largeur de la scène. */
  padding-left: max(0px, calc(2 * (var(--gouttiere) + var(--mag-l) + 24px) - 100% + var(--pif-h) * 674 / 720));
}

.pif__scene { position: relative; display: inline-block; }

.pif__portrait {
  display: block;
  height: var(--pif-h);
  width: auto;
  max-width: 100%;
  filter: drop-shadow(0 22px 34px rgba(0,19,38,.28));
}

/* Bulle de BD (Bangers) : ovale crème cerné de noir, titre, texte,
   lien rouge. L'ovale et sa queue sont un seul tracé SVG (.bulle__fond) :
   pas de raccord visible entre les deux. */
.bulle {
  position: absolute;
  /* À droite de la tête, au-dessus de la mi-hauteur : la queue
     descend vers la gauche jusqu'à la joue de Pif (comme la planche). */
  left: 86%;
  bottom: 58%;
  width: min(340px, 27vw);
  display: grid;
  justify-items: center;
  gap: 4px;
  /* en em : un % se calculerait sur la scène de Pif, pas sur la bulle */
  padding: 1.9em 2.3em 2.1em;
  font-family: "Bangers", var(--titre);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.08;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--encre);
  transition: transform .14s ease;
}

.bulle:hover { transform: translateY(-3px); }

/* les textes passent au-dessus du fond */
.bulle > span, .bulle > strong { position: relative; z-index: 1; }

.bulle__titre { font-size: 1.85em; line-height: 1; letter-spacing: .03em; font-weight: 400; }
.bulle__texte { display: block; }

.bulle__lien {
  display: block;
  margin-top: 6px;
  font-size: .8em;
  letter-spacing: .08em;
  color: var(--rouge);
}

/* Fond : le SVG couvre la bulle (viewBox 0-100 étirée), la queue en
   déborde. Le trait garde 2,5 px quelle que soit la taille. */
.bulle__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0,19,38,.28));
}

.bulle__forme {
  fill: #FFF9EC;
  stroke: var(--encre);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Bureau : queue en bas à gauche, vers le visage de Pif (elle s'arrête
   juste au-dessus de sa truffe). Mobile : queue en haut, vers la gueule. */
.bulle__forme--haut { display: none; }

/* ---------- Fond cahier ---------- */

/* Les sections « cahier » laissent voir la trame du body. */
.cahier { background: transparent; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(44px, 6vw, 76px); }

.section__tete {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.section h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  font-weight: 600;
}

.section__soustitre {
  margin: 8px 0 0;
  color: var(--encre-60);
  max-width: 54ch;
}

/* Les flèches vivent dans le carrousel : en bureau elles remontent
   à droite de l'en-tête de section, en mobile elles se posent sur
   les bords de la carte. */
.fleches {
  position: absolute;
  top: -66px;
  right: 0;
  display: flex;
  gap: 8px;
}

.fleche {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--encre);
  cursor: pointer;
  color: var(--encre);
  transition: background-color .12s ease, color .12s ease;
}
.fleche:hover { background: var(--encre); color: var(--blanc); }
.fleche svg { width: 18px; height: 18px; }

/* ---------- Grille produits (calque Woo) ---------- */

/* Ligne unique qui défile : la piste déborde, le masque la coupe. */
.carrousel { position: relative; }

.carrousel__piste {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* la piste va d'un bord à l'autre de l'écran (les cartes ne sont pas
     coupées aux bords du contenu sur grand écran) ; la première carte
     reste alignée sur le contenu. 50vw compte la barre de défilement :
     body { overflow-x: clip } avale ces quelques pixels. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gouttiere), calc(50vw - 50%));
  /* compense la marge d'ombre ajoutée sous la liste */
  margin-bottom: -16px;
}

.carrousel__piste::-webkit-scrollbar { display: none; }

ul.products {
  list-style: none;
  margin: 0;
  /* La piste défilante coupe tout ce qui dépasse verticalement :
     on lui laisse la place de l'ombre (22 px sous la carte) et du
     soulèvement au survol (4 px au-dessus). */
  padding: 12px 0 30px;
  display: flex;
  width: max-content;
  gap: 20px;
}

/* La grille (boutique, produits associés) remplace la piste défilante. */
ul.products.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  width: auto;
  padding: 0;
  gap: 20px;
}

ul.products.grille li.product { flex-basis: auto; }
ul.products.grille li.product[hidden] { display: none; }

li.product {
  flex: 0 0 clamp(205px, 20vw, 252px);
  position: relative;
  /* sert aux pastilles : compactes quand la carte est étroite */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform .14s ease;
}

li.product:hover { transform: translateY(-4px); }

li.product .onsale {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--jaune);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--encre);
}

.woocommerce-loop-product__link { display: block; }

/* Visuels entiers : une couverture ou une photo produit recadrée
   devient illisible. On garde un cadre de hauteur constante et
   l'image s'y inscrit en entier. */
li.product img {
  width: 100%;
  height: 270px;
  object-fit: contain;
  padding: 16px;
  background: var(--blanc);
}

.produit__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 16px 16px 18px;
}

.woocommerce-loop-product__title {
  font-family: var(--titre);
  font-weight: 500;
  font-size: .96rem;
  line-height: 1.24;
  margin: 0;
}

.price {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--rouge);
  margin-top: auto;
}

.price del {
  color: var(--encre-35);
  font-weight: 400;
  font-size: .86rem;
  margin-right: 7px;
}

li.product .button { width: 100%; padding: 12px 16px; font-size: .76rem; }

.lien-boutique {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* ---------- Offres d'abonnement (page abonnement, rappel boutique) ---------- */


/* bascule mensuel / annuel */
.bascule {
  display: inline-flex;
  padding: 4px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 999px;
  gap: 2px;
}

.bascule button {
  font-family: var(--titre);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
}

.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }

.bascule__note[hidden] { display: none !important; }

.bascule__note {
  margin-left: 12px;
  font-size: .82rem;
  color: var(--rouge);
  font-weight: 700;
}

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 900px;
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--ombre);
}

/* Carte cliquable : survol, puis carte choisie (bord encre, soulevée,
   bouton plein). La formule mise en avant est choisie au chargement. */
.offre { cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.offre:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -22px rgba(0,19,38,.45); }
.offre:focus-visible { outline: 3px solid var(--rouge); outline-offset: 4px; }
.offre--active,
.offre--active:hover { border-color: var(--encre); transform: translateY(-8px) scale(1.02); box-shadow: 8px 10px 0 var(--encre); }
.offre--active .btn { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }
.offre--active .btn:hover { background: var(--rouge-fonce); }

/* la phrase sous les cartes change avec la carte choisie */
.argument.est-change { animation: argument-pop .35s ease; }
@keyframes argument-pop {
  0%   { transform: scale(.94); opacity: .4; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: none; }
}

/* étiquette « le plus complet », en jaune de marque */
.offre__etiquette {
  position: absolute;
  top: -14px;
  left: 24px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--jaune);
  border: 2px solid var(--encre);
  border-radius: 999px;
  padding: 5px 12px;
}

.offre h3 { font-size: 1.35rem; font-weight: 600; }

/* deux lignes réservées : les prix des trois cartes restent alignés */
.offre__sous { margin: -8px 0 0; min-height: 3em; color: var(--encre-60); font-size: .95rem; }

.offre__prix {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--titre);
}

.offre__prix b { font-size: 2.4rem; font-weight: 600; color: var(--rouge); line-height: 1; }
/* WooCommerce enveloppe le montant dans des <span> : ils héritent du <b> */
.offre__prix b * { font: inherit; color: inherit; }
.offre__prix > span { color: var(--encre-60); font-size: .95rem; }

.offre__equiv { margin: -8px 0 0; font-size: .82rem; color: var(--encre-35); }

.offre ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: .95rem;
}

.offre li { display: flex; gap: 10px; align-items: flex-start; }

.offre li::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001326' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.offre .btn { margin-top: auto; }

.offres__mention { margin: 14px 0 0; font-size: .82rem; color: var(--encre-35); max-width: 60ch; }


/* ---------- Bandeau abonnement (accueil) ---------- */

.bumper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(240px, 400px);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  background: var(--jaune);
  color: var(--encre);
  border: 2.5px solid var(--encre);
  border-radius: 26px;
  /* bandeau fin : la boutique reste visible dessous */
  padding: clamp(18px, 2.6vw, 32px) clamp(22px, 3.4vw, 46px);
  box-shadow: 6px 8px 0 var(--encre);
  /* la photo déborde du cadre */
  overflow: visible;
}

.bumper h2 {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.02;
}

.bumper h2 em { font-style: normal; color: var(--rouge); }

.bumper__sous { margin: 8px 0 0; font-family: var(--titre); font-size: 1rem; }

.bumper__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.bumper__actions .btn { white-space: nowrap; }
/* le bouton est l'élément le plus visible du bandeau */
.bumper__actions .btn--rouge { padding: 15px 30px; font-size: .9rem; box-shadow: 0 12px 24px -10px rgba(206,16,10,.75); }
.bumper__mention { font-family: var(--titre); font-size: .84rem; color: var(--encre-60); }

/* Photo : cadre blanc, penchée comme une photo posée, elle déborde du
   bandeau jaune en haut et en bas. */
.bumper__visuel {
  aspect-ratio: 4 / 3;
  display: block;
  border: 5px solid var(--blanc);
  border-radius: 14px;
  background: var(--blanc);
  box-shadow: 0 3px 0 rgba(0,19,38,.12), 0 24px 44px -18px rgba(0,19,38,.55);
  rotate: -4deg;
  margin-block: calc(-1 * clamp(18px, 3vw, 44px));
  overflow: hidden;
  padding: 0;
}

.bumper__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Sans photo (visible des administrateurs) : emplacement en pointillés, à plat */
.bumper__visuel--vide {
  display: grid;
  place-items: center;
  border: 2.5px dashed var(--encre);
  border-radius: 18px;
  background: rgba(255,255,255,.35);
  box-shadow: none;
  rotate: 0deg;
  margin-block: 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-60);
  text-align: center;
  padding: 16px;
}

/* ---------- Recherche dans une barre de filtres ---------- */

.recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 14px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 999px;
  min-width: 200px;
}

.recherche svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--encre-60); }

.recherche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font-family: var(--texte);
  font-size: .9rem;
  color: var(--encre);
}
.recherche input::placeholder { color: var(--encre-35); }
.recherche input:focus { outline: none; }
.recherche:focus-within { box-shadow: 0 0 0 3px rgba(206,16,10,.25); }

.filtres--avec-recherche { align-items: center; }

/* ---------- Badge « + de couleurs » sur les produits mode et déco ---------- */

.couleurs {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: var(--blanc);
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}

.couleurs i {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--blanc);
  box-shadow: 0 0 0 1px rgba(0,19,38,.25);
  margin-right: -7px;
}
.couleurs i:last-of-type { margin-right: 2px; }

/* Carte étroite (mobile) : Promo et + de couleurs se chevauchaient.
   Le badge couleurs ne garde que ses pastilles et un « + ». */
@container (max-width: 250px) {
  .couleurs { font-size: 0; gap: 0; padding: 4px 7px 4px 5px; }
  .couleurs i:last-of-type { margin-right: 3px; }
  .couleurs::after { content: "+"; font-size: .8rem; line-height: 1; }
}

/* ---------- Newsletter ---------- */

.newsletter {
  position: relative;
  background: var(--rouge);
  color: var(--blanc);
  border-radius: 26px;
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  overflow: hidden;
}

.newsletter::before {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 260px; height: 260px;
  background: rgba(255,238,0,.16);
  border-radius: 50%;
}

.newsletter > * { position: relative; z-index: 1; }

/* Pif facteur : posé à gauche, à cheval sur le bord du bloc rouge,
   la tête au-dessus et les pieds en dessous - comme sur la planche. */
.newsletter-zone {
  position: relative;
  padding-left: clamp(96px, 12vw, 160px);
  /* padding et non margin : une marge s'effondrerait à travers la
     section (padding-top: 0) et sortirait du fond quadrillé. */
  padding-top: clamp(56px, 7vw, 100px);
}

.newsletter__pif {
  position: absolute;
  left: 0;
  bottom: -16px;
  height: clamp(250px, 27vw, 360px);
  width: auto;
  z-index: 3;
}

.newsletter-zone .newsletter { padding-left: clamp(140px, 16.5vw, 215px); }

.newsletter h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }

.newsletter p {
  margin: 12px 0 0;
  font-size: .98rem;
  opacity: .94;
  max-width: 46ch;
}

.newsletter__form { display: flex; flex-direction: column; gap: 10px; }

.newsletter__champ {
  display: flex;
  gap: 8px;
  background: var(--blanc);
  border-radius: 999px;
  padding: 6px 6px 6px 8px;
}

.newsletter__champ input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  font-family: var(--texte);
  font-size: .95rem;
  color: var(--encre);
}
.newsletter__champ input::placeholder { color: var(--encre-35); }
.newsletter__champ input:focus { outline: none; }

.newsletter__mention { font-size: .78rem; opacity: .82; margin: 0; padding-left: 16px; }

/* message après envoi (Mailjet) */
.newsletter__retour { margin: 0; padding: 8px 16px; border-radius: 12px; font-family: var(--titre); font-weight: 600; font-size: .9rem; }
.newsletter__retour[hidden] { display: none; }
.newsletter__retour--ok { background: var(--jaune); color: var(--encre); }
.newsletter__retour--erreur { background: rgba(255,255,255,.92); color: var(--rouge); }
/* champ piège à robots : hors écran */
.newsletter__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.etiquette-masquee {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Dessin animé ---------- */

.serie {
  position: relative;
  min-height: clamp(360px, 46vw, 540px);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.serie__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% center;
}

/* vidéo de fond : même cadrage que l'image, posée dessus */
.serie__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (prefers-reduced-motion: reduce) {
  .serie--video .serie__image ~ .serie__video { display: none; }
}

/* bouton son (bande-annonce) : pastille en haut à droite du bandeau */
.serie__son {
  position: absolute;
  z-index: 3;
  top: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--jaune);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 4px 0 var(--encre);
  transition: transform .12s ease;
}
.serie__son:hover { transform: translateY(-2px); }
.serie__son svg { width: 18px; height: 18px; }
.serie__son .serie__son-on { display: none; }
.serie__son[aria-pressed="true"] .serie__son-on { display: inline; }
.serie__son[aria-pressed="true"] .serie__son-off { display: none; }

.serie__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,19,38,.82) 0%, rgba(0,19,38,.35) 46%, rgba(0,19,38,0) 78%);
}

.serie__contenu {
  position: relative;
  z-index: 2;
  color: var(--blanc);
  padding-block: clamp(28px, 4vw, 52px);
  max-width: 620px;
}

.serie__canal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.serie h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 600; color: var(--blanc); }
.serie p { margin: 12px 0 22px; font-size: 1.02rem; opacity: .93; max-width: 44ch; }

/* ---------- Pied ---------- */

.pied {
  background: var(--encre);
  color: var(--blanc);
  padding-block: clamp(40px, 5vw, 60px) 26px;
}

.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px 24px;
}

.pied__marque img {
  width: 128px;
  margin-bottom: 14px;
}

.pied__marque p {
  margin: 0;
  font-size: .9rem;
  color: #A9B6C4;
  max-width: 30ch;
}

.pied h3 {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 12px;
}

.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied li a { font-size: .92rem; color: #D3DBE3; }
.pied li a:hover { color: var(--blanc); text-decoration: underline; }

.reseaux { display: flex; gap: 10px; margin-top: 18px; }

.reseaux a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid #2C3C4E;
  color: #D3DBE3;
}
.reseaux a:hover { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.reseaux svg { width: 17px; height: 17px; }

.pied__bas {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid #1C2B3C;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  font-size: .82rem;
  color: #8697A8;
}

/* ---------- Responsive ---------- */

/* Fenêtre basse : la bulle remonte un peu et sa queue raccourcit,
   sinon elle sortirait du hero par le bas. */
@media (max-height: 740px) {
  /* la tête cède un peu de hauteur pour laisser passer la bulle
     et sa queue sans les écraser */
  .hero { --pif-h: clamp(230px, 58vh, 610px); --mag-l: min(400px, 38vw, 42vh); }
  .bulle { font-size: .92rem; }
  /* fenêtre basse : la couverture ne doit pas remonter sous l'étoile */
  .nuages { margin-top: calc(var(--l) * .42); }
  .mag__lien { width: 54%; }
}

/* Grand écran : la scène grandit avec la fenêtre au lieu de rester à la
   taille d'un portable. L'enveloppe du hero s'élargit pour laisser la
   place à Pif, sa bulle et le magazine. */
@media (min-width: 1500px) and (min-height: 760px) {
  .hero { --mag-l: min(520px, 26vw, 50vh); --pif-h: clamp(230px, 66vh, 780px); height: min(100vh, 1100px); }
  .hero__interieur { max-width: 1760px; }
  .etoile { width: clamp(180px, min(20vw, 38vh), 380px); }
  .mag h1 { font-size: clamp(1.3rem, 1.3vw, 1.6rem); }
  .mag__prix { font-size: 1.35rem; }
  .mag__actions .btn { padding: 14px 10px; font-size: .84rem; }
  /* la bulle et son texte suivent la même échelle */
  .bulle { width: min(440px, 23vw); font-size: calc(min(440px, 23vw) / 21); }
}

/* En dessous, la nav complète ne tient plus à droite d'un logo
   réellement centré : on bascule sur le menu compact. */
/* Tablette paysage : la feuille, Pif et sa bulle ne tiennent côte à côte
   qu'en réduisant un peu chacun ; sinon la bulle sort à droite. */
@media (min-width: 861px) and (max-width: 1100px) {
  .hero { --pif-h: clamp(230px, 54vh, 610px); --mag-l: min(340px, 32vw, 46vh); }
  .bulle { width: 236px; left: 80%; font-size: .72rem; }
}

@media (max-width: 1200px) {
  .nav-principale { display: none; }
  .burger { display: grid; }
  .entete__interieur { grid-template-columns: 1fr auto 1fr; }
  .bloc-droite { gap: 6px; }
  .pied__grille { grid-template-columns: 1fr 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* bandeau abonnement : le texte prend toute la largeur, la photo
     dessous, légèrement penchée, débordant du bas du cadre */
  .bumper { grid-template-columns: 1fr; gap: 14px; }
  .bumper__visuel { aspect-ratio: 16 / 9; width: 92%; justify-self: center; rotate: -2deg; margin: 10px 0 -34px; }
  .bumper__visuel--vide { width: 100%; rotate: 0deg; margin: 0; }
  .bumper__actions .btn--rouge { padding: 14px 24px; font-size: .84rem; }

  /* cible tactile confortable pour le burger (27 px suffisent à la souris) */
  .icone-btn { width: 38px; height: 38px; }
  .icone-btn svg { width: 18px; height: 18px; }
  /* ---- Hero : la scène en positions absolues redevient un flux
     empilé. Le plein écran n'a plus de sens ici. ---- */
  .hero { height: auto; min-height: 0; display: block; }
  /* accueil mobile : ciel vertical (ciel-916.mp4) et son affiche */
  .hero, .hero .ciel { background-image: url("ciel-916-affiche.jpg"); }

  /* L'étoile suit le header dans le flux, collée au bord gauche
     comme dans l'angle de la planche. */
  .etoile {
    /* relative, pas static : le SVG et le texte sont absolus et
       doivent rester calés sur l'étoile, pas sur le hero */
    position: relative;
    top: auto; left: auto;
    display: block;
    width: 52vw;
    margin: 2px 0 6px;
  }

  .hero__interieur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-block: 0 36px;
  }

  /* Pif centré, sa bulle en dessous avec une petite queue qui
     remonte vers la gueule. */
  /* pas de grid ici : une piste auto se calerait sur la largeur
     naturelle de l'image (674 px) et déborderait de l'écran */
  .pif { position: static; height: auto; width: 100%; display: block; order: -1; margin-top: -10px; padding-left: 0; }
  /* tête plus petite : la bulle et les deux boutons tiennent dans le premier écran */
  .pif__scene { display: block; width: min(76%, 320px); margin-inline: auto; }
  .pif__portrait { height: auto; width: 100%; max-width: none; }
  /* `display: block` est indispensable : la bulle est un <a>, et sans
     `position: absolute` elle redeviendrait inline (largeur, marge et
     boîte de référence de la queue perdues). */
  .bulle {
    position: relative;
    display: grid;
    top: auto;
    /* bulle centrée sous la tête, plafonnée : sur une fenêtre moyenne,
       un ovale trop large et plat coupait le texte contre ses bords */
    width: min(calc(100vw - 2 * var(--gouttiere)), 430px);
    left: 50%;
    translate: -50% 0;
    margin-top: 10px;
    font-size: .95rem;
    /* marges larges : le texte reste dans la partie pleine de l'ovale */
    padding: 2em 2.9em 2.3em;
  }
  .bulle__texte { max-width: 30ch; margin-inline: auto; }
  /* sous la tête : la queue part du haut de l'ovale vers la gueule */
  .bulle__forme--gauche { display: none; }
  .bulle__forme--haut { display: inline; }

  /* Magazine : le bloc est dissous (display: contents) pour que ses deux
     boutons remontent juste sous la bulle, visibles sans défiler ; les
     nuages, le titre et le prix suivent. --l reste hérité par les enfants. */
  .mag {
    display: contents;
    --l: min(100vw - 56px, 370px);
  }
  /* plus compact : nuages plus petits, et la place au-dessus des nuages est
     ajustée à la couverture réelle par accueil.js (--mag-haut) */
  .mag { --l: min(100vw - 110px, 300px); }
  .nuages { width: var(--l); margin-top: var(--mag-haut, calc(var(--l) * .5 + 12px)); order: 1; }
  .mag h1 { font-size: 1.02rem; order: 1; text-align: center; margin: -12px 0 0; }
  .mag__prix { order: 1; margin: -18px 0 10px; }
  .mag__actions { width: min(100% , 370px); margin-top: 0; }

  /* ---- Sections suivantes ---- */
  /* newsletter compacte : Pif plus petit, bloc moins haut */
  .newsletter { grid-template-columns: 1fr; gap: 14px; border-radius: 20px; }
  /* la main d'OPifo dépasse du coin haut droit du bloc rouge, à côté
     du titre et non dessus */
  .newsletter-zone { padding-left: 0; padding-top: 58px; }
  .newsletter__pif { position: absolute; left: auto; right: 14px; top: 0; bottom: auto; height: 118px; margin: 0; z-index: 3; }
  .newsletter-zone .newsletter { padding: 28px 18px 20px; }
  .newsletter h2 { font-size: 1.3rem; padding-right: 96px; }
  .newsletter p { font-size: .9rem; margin-top: 8px; }
  .newsletter__champ { padding: 4px 4px 4px 6px; }
  .newsletter__champ input { padding: 10px 10px; font-size: .9rem; }
  .newsletter__champ .btn { padding: 10px 14px; font-size: .72rem; }
  .newsletter__mention { font-size: .72rem; }

  /* ---- Header : logo plus grand, compte et panier rangés dans le menu ---- */
  .marque img, .hero .marque img { width: clamp(120px, 34vw, 150px); }
  body.entete-flottante .marque img, body.entete-flottante .hero .marque img { width: 96px; }
  .actions-entete .icone-btn:not(.burger) { display: none; }

  /* ---- Menu plein écran : glisse depuis la droite, sur papier
     quadrillé, Pif en fond ; le header reste posé par-dessus ---- */
  .menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    /* safe : si l'écran est trop bas (téléphone en paysage), le menu
       part du haut et défile au lieu de couper les premiers liens */
    justify-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 10px;
    padding: 110px var(--gouttiere) 48px;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--cahier);
    background-image:
      url("pif-fleur-fixe.webp"),
      linear-gradient(to right,  var(--cahier-trait) 1px, transparent 1px),
      linear-gradient(to bottom, var(--cahier-trait) 1px, transparent 1px);
    background-size: 60% auto, 30px 30px, 30px 30px;
    background-position: right -8% bottom -9%, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
  }

  .menu-mobile.est-ouvert {
    display: flex;
    transform: none;
    visibility: visible;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s;
  }

  .menu-mobile a {
    font-size: 1.35rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 14px 22px;
    border: 2px solid var(--encre);
    border-radius: 999px;
    background: var(--blanc);
  }

  .menu-mobile a:hover { background: var(--encre); color: var(--blanc); }
  .menu-mobile a[aria-current] { background: var(--encre); color: var(--blanc); }
  .menu-mobile a.est-boutique { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

  /* compte et panier : liens secondaires, sans pastille */
  .menu-mobile a:nth-last-child(-n+2) {
    margin-top: 6px;
    font-size: 1rem;
    letter-spacing: .02em;
    text-transform: none;
    padding: 8px 22px;
    border-color: transparent;
    background: transparent;
    color: var(--encre-60);
  }
  .menu-mobile a:nth-last-child(-n+2):hover { color: var(--encre); background: transparent; }
  .menu-mobile a:first-of-type { margin-top: 0; }

  /* ---- Étoile : absente en mobile ---- */
  .etoile { display: none; }

  /* ---- Magazine : boutons plus petits, texte centré ---- */
  .mag__actions .btn { padding: 11px 12px; font-size: .7rem; line-height: 1.15; text-align: center; }

  /* ---- Boutique : une carte ≈ 70 % de l'écran, flèches sur les bords ---- */
  li.product { flex-basis: 60vw; }
  li.product img { height: 200px; }
  li.product .button { font-size: .62rem; padding: 8px; }
  .fleches {
    top: 50%;
    left: 8px;
    right: 8px;
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
  }
  .fleche { pointer-events: auto; background: rgba(255,255,255,.92); }

  /* ---- Dessin animé : plus de hauteur ---- */
  .serie { min-height: min(78vh, 640px); }
}

@media (max-width: 560px) {
  ul.products.grille { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  ul.products { gap: 12px; }
  li.product { flex-basis: 62vw; }
  li.product img { height: 190px; padding: 10px; }
  li.product .button { font-size: .62rem; padding: 8px; }
  .produit__corps { padding: 12px 12px 14px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .mag__actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Pages intérieures : bandeau de page, pastille, filtres
   ============================================================ */

/* ---------- Bandeau de page : ciel court, header posé dessus ---------- */

.entete-page {
  position: relative;
  overflow: hidden;
  background-color: var(--ciel-bas);
  background-image: url("ciel-affiche.jpg");
  background-size: cover;
  background-position: center 40%;
  isolation: isolate;
}

.entete-page .ciel { object-position: center 40%; background-position: center 40%; transform-origin: center 40%; }

.entete-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 30% 60%, rgba(255,255,255,.40) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 75%),
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(252,252,247,.95) 100%);
}

.entete-page .entete { position: relative; z-index: 20; }

.titre-page {
  position: relative;
  z-index: 10;
  padding-block: clamp(18px, 3vh, 40px) clamp(30px, 5vh, 56px);
}

.titre-page h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.01em;
}

.titre-page p {
  margin: 8px 0 0;
  font-size: 1.05rem;
  color: var(--encre-60);
  max-width: 52ch;
}

.kicker {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blanc);
  background: var(--rouge);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtres button {
  font-family: var(--titre);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 15px;
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: 999px;
  color: var(--encre);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.filtres button:hover,
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--blanc); }

/* ---------- Formulaires (connexion, inscription, compte, panier) ---------- */

.champ { display: grid; gap: 6px; }
.champ + .champ { margin-top: 14px; }

.champ label,
.champ__libelle {
  font-family: var(--titre);
  font-weight: 600;
  font-size: .86rem;
}

.champ label .requis { color: var(--rouge); }

.champ input,
.champ select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--bord);
  border-radius: 14px;
  transition: border-color .12s ease;
}

.champ input::placeholder { color: var(--encre-35); }
.champ input:focus,
.champ select:focus { outline: none; border-color: var(--encre); }

.champ__aide { font-size: .8rem; color: var(--encre-60); }

.coche {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .9rem;
  cursor: pointer;
}
.coche input { accent-color: var(--rouge); width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }

.lien-texte { color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lien-texte:hover { color: var(--rouge-fonce); }

/* carte blanche générique (formulaires, blocs du compte, totaux) */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--ombre);
}

.carte h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 600; margin-bottom: 18px; }