/* Plaine Altitude, système de design V4 : Socle V4 : conteneur, boutons à coins de 8 px en couleurs pleines, champs, badges, avatar.
   Extrait des maquettes le 2026-10-11 ; ne pas éditer les pages, éditer ce fichier. */

body { margin: 0; background: var(--bg-surface); }
/* Même gouttière que l'en-tête : le contenu s'aligne sur le début du logo et la fin de la dernière icône */
.conteneur { padding-inline: var(--gouttiere); }
.conteneur > * { min-width: 0; }
.surtitre { display: block; margin-bottom: 0.6rem; font: 800 var(--fs-2xs)/1 var(--font-texte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pa-gris); }
.actions__ligne .pa-btn { flex: 1; }
.onglets .conteneur { display: flex; align-items: center; gap: var(--sp-m); }
/* Photo d'Hervé à la place de l'initiale (2026-10-13) : la lettre reste dans le balisage, masquée */
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--pa-noir) url("assets/herve.webp") center / cover no-repeat; color: transparent; overflow: hidden; flex: none; display: grid; place-items: center; font: 900 var(--fs-sm) var(--font-titre); }
.aide .surtitre { color: var(--pa-turquoise); }
.aide .pa-btn--fantome { color: #fff; border: 1px solid rgba(255,255,255,.4); padding-inline: 1.5em; }
.aide .pa-btn--fantome:hover { background: rgba(255,255,255,.08); color: #fff; }
/* ════════ V4 : en-tête inspiré des Passagers du Vent, couleurs pleines, contenu limité à 1808px ════════ */
.conteneur { max-width: var(--largeur-max); margin-inline: auto; box-sizing: border-box; }
/* Boutons en couleurs pleines, sans dégradé */
.pa-btn--cta { background: var(--pa-jaune); border-color: var(--pa-jaune); }
.pa-btn--cta:hover { background: var(--pa-jaune-fonce); border-color: var(--pa-jaune-fonce); }
.pa-btn--primaire { background: var(--pa-turquoise); border-color: var(--pa-turquoise); }
.pa-btn--primaire:hover { background: #19b3b2; border-color: #19b3b2; }
.pa-btn--panier { background: var(--pa-noir); border-color: var(--pa-noir); color: var(--pa-turquoise); }
.pa-btn--panier:hover { background: #3a3738; border-color: #3a3738; color: var(--pa-turquoise); }
.pa-btn--sombre { background: var(--pa-noir); border-color: var(--pa-noir); }
.pa-btn--sombre:hover { background: #3a3738; }
/* Tous les boutons : carré arrondi de 8px */
.pa-btn, .pa-quantite { border-radius: var(--r-bouton); }
.pa-ico-pastille { border-radius: 6px; }
.actions .pa-btn { white-space: normal; text-align: center; line-height: 1.2; }
/* Bon cadeau : fond noir, texte turquoise, icône cadeau */
.pa-btn--cadeau { background: var(--pa-noir); border-color: var(--pa-noir); color: var(--pa-turquoise); }
.pa-btn--cadeau:hover { background: #3a3738; border-color: #3a3738; color: var(--pa-turquoise); }
.pa-btn--cadeau svg { width: 1.2em; height: 1.2em; }
/* C : sans cadre, liens centrés, filet sous l'en-tête */
body { --menu-taille: 1.1875rem; }
/* G et H : logo vertical dans un onglet qui descend de la barre grise et dépasse sous l'en-tête */
body { --logo-l: 8.25rem; --logo-h: 9rem; }
@media (max-width: 1179px) {
  body { --logo-l: 6.75rem; --logo-h: 7.25rem; }
}
@media (max-width: 639px) {
  body { --logo-l: 5.5rem; --logo-h: 6rem; }
}
/* G et H : logo agrandi, même marge tout autour (proportions du logo vertical de la charte : 104 × 127) */
body { --logo-haut: var(--logo-h); --pad-logo: 16px; --logo-lw: calc((var(--logo-haut) - 2 * var(--pad-logo)) / 1.2212); --logo-l: calc(var(--logo-lw) + 2 * var(--pad-logo)); }
@media (min-width: 1180px) {
  body { --logo-haut: 9.625rem; }
}
@media (max-width: 1179px) {
  body { --logo-h: 6rem; }
}
@media (max-width: 639px) {
  body { --logo-h: 5.25rem; }
}
@media (max-width: 1179px) {
  body { --pad-logo: 12px; }
}
@media (max-width: 639px) {
  body { --pad-logo: 10px; }
}
@media (min-width: 1180px) {
  body { --pad-logo: 24px; --logo-haut: calc(2.625rem + var(--entete-h) + var(--depasse)); }
}
body { --menu-taille: 17px; }
/* G et H, essais : fond de page gris clair (en-tête blanc) et sections encadrées */
body { background: var(--bg-page); }
.pa-quantite { background: #fff; }
.prix-ligne .pa-btn { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
.prix-ligne .pa-btn { font-size: 1rem; padding-block: 0.85em; }
@media (min-width: 1240px) {
  .prix-ligne .pa-btn { flex: 1 1 auto; }
}
@media (max-width: 1239px) {
  .prix-ligne .pa-btn { flex: 1 1 100%; }
}
.prix-ligne .prix .pa-economie { grid-area: remise; justify-self: start; font-size: 0.75rem; padding: 0.25rem 0.45rem; }
@media (max-width: 900px) {
  .pa-barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; }
  body { padding-bottom: 4.75rem; }
}
.pa-barre-mobile .barre-prix { display: grid; gap: 0.2rem; min-width: 0; }
.pa-barre-mobile .pa-prix-label { display: flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap; }
.pa-barre-mobile .pa-prix-label, .pa-barre-mobile .pa-economie, .pa-barre-mobile .pa-prix { white-space: nowrap; }
.pa-barre-mobile .pa-economie { font-size: 0.6875rem; padding: 0.15rem 0.35rem; }
.pa-barre-mobile .pa-prix { font-size: var(--fs-lg); }
.pa-barre-mobile .pa-btn { flex: none; white-space: nowrap; }
.pa-barre-mobile .txt-court { display: none; }
@media (max-width: 399px) {
  .pa-barre-mobile .pa-prix s, .pa-barre-mobile .si-place { display: none; }
}
@media (max-width: 349px) {
  .pa-barre-mobile .txt-long { display: none; }
  .pa-barre-mobile .txt-court { display: inline-block; }
}
@media (max-width: 639px) {
  .pack__pied .pa-btn { white-space: normal; text-align: center; line-height: 1.2; }
  .pack__pied .actions__ligne .pa-btn { flex: 1 1 100%; }
}
@media (max-width: 399px) {
  .haut-fiche .pa-btn, .bande .pa-btn, .aide .pa-btn { white-space: normal; text-align: center; line-height: 1.2; min-width: 0; }
  .pa-barre-mobile .pa-btn { white-space: nowrap; }
}
.pa-en--d b { background: var(--pa-noir); color: var(--pa-turquoise); }
@media (max-width: 900px) {
  body { padding-bottom: 0; }
}
@media (max-width: 1279px) {
  body { --menu-taille: 16px; }
}
/* ── Lettre d'information et guide gratuit ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Surtitre de la fiche : lien discret vers les parapentes de la marque (turquoise au survol seulement) */
.surtitre--lien { text-decoration: none; transition: color var(--t-rapide); }
.infos .surtitre--lien { color: var(--fg-secondaire); }
.infos .surtitre--lien:hover { color: var(--pa-turquoise-text); text-decoration: none; }

/* Étiquette « Déstockage » (module d'étiquettes de PrestaShop) : jaune pâle, le jaune vif restant réservé à l'action principale */
.pa-badge--destockage { background: var(--pa-jaune-100); color: #6b4700; box-shadow: inset 0 0 0 1.5px var(--pa-jaune-fonce); }