/* ============================================================
   Plaine Altitude Design System : components.css
   Composants communs (boutique, site, réservation). Dépend de tokens.css.
   La navigation (barre haute, en-tête, tiroir, méga menu, pied) est dans navigation.css, chargée juste après cette feuille.
   Le kit propre à la boutique est dans boutique.css.
   ============================================================ */

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

/* ── Boutons : tout en pilule, fonds mats en dégradé doux (pas d'effet verre) ── */
.pa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-texte); font-weight: 700; font-size: var(--fs-sm); line-height: 1;
  padding: 0.95em 1.6em; border-radius: var(--r-pilule); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-rapide), box-shadow var(--t-rapide), background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide);
}
.pa-btn:hover { text-decoration: none; }
.pa-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.pa-btn:active { transform: translateY(1px); }
.pa-btn svg { width: 1.15em; height: 1.15em; flex: none; }

.pa-btn--s { font-size: var(--fs-xs); padding: 0.75em 1.25em; }
.pa-btn--l { font-size: var(--fs-base); padding: 1em 1.9em; }
.pa-btn--bloc { width: 100%; }

/* ACTION (jaune) : dégradé doux vertical, mat, bordure ton sur ton. RÉSERVÉ au geste principal.
   Markup recommandé (variante C) : texte .pa-defile + .pa-ico-pastille, classe .pa-btn--pastille */
.pa-btn--cta { background: var(--grad-cta); color: var(--pa-noir); border: 1px solid var(--bord-cta); box-shadow: var(--ombre-cta); }
.pa-btn--cta:hover { background: var(--grad-cta-hover); color: var(--pa-noir); transform: translateY(-1px); }

/* PANIER : dégradé turquoise doux, bordure turquoise. Markup recommandé (variante E) : .pa-ico-roule + .pa-defile */
.pa-btn--panier { background: var(--grad-panier); color: var(--pa-noir); border-color: var(--pa-turquoise-300); }
.pa-btn--panier:hover { background: var(--grad-panier-hover); border-color: var(--pa-turquoise); color: var(--pa-noir); transform: translateY(-1px); }

/* Primaire turquoise plein : texte noir (le blanc ne passe pas le contraste) */
.pa-btn--primaire { background: var(--grad-turquoise); color: var(--pa-noir); border: 1px solid #19adac; }
.pa-btn--primaire:hover { background: linear-gradient(180deg, #3fd0cf 0%, #19b8b7 100%); color: var(--pa-noir); transform: translateY(-1px); }

.pa-btn--secondaire { background: var(--bg-surface); color: var(--pa-noir); border-color: var(--bord-fort); }
.pa-btn--secondaire:hover { border-color: var(--pa-turquoise); color: var(--pa-turquoise-text); background: var(--pa-turquoise-50); }

.pa-btn--sombre { background: linear-gradient(180deg, #3a3738 0%, var(--pa-noir) 100%); color: var(--pa-blanc); border: 1px solid #1d1b1c; }
.pa-btn--sombre:hover { background: linear-gradient(180deg, #454142 0%, #2f2d2e 100%); color: var(--pa-blanc); }

.pa-btn--fantome { background: transparent; color: var(--fg-titre); padding-inline: 1em; }
.pa-btn--fantome:hover { background: var(--pa-turquoise-50); color: var(--pa-turquoise-text); }

.pa-btn[disabled] { opacity: 0.45; pointer-events: none; box-shadow: none; }

/* ── Animations au survol ────────────────────────────────────── */
/* Texte qui défile VERTICALEMENT : il sort par le haut, sa copie remonte par le bas
   et se pose exactement au même endroit.
   Markup : <span class="pa-defile"><span data-txt="Ajouter au panier">Ajouter au panier</span></span> */
.pa-defile { display: inline-block; overflow: hidden; vertical-align: top; height: 1.3em; line-height: 1.3em; margin-block: -0.15em; }
.pa-defile > span { display: block; position: relative; transition: transform 480ms cubic-bezier(.7,0,.2,1); }
.pa-defile > span::after { content: attr(data-txt); position: absolute; left: 0; right: 0; top: 100%; white-space: nowrap; }   /* toute la largeur : suit le centrage du texte dans un bouton large */
.pa-btn:hover .pa-defile > span, .pa-btn:focus-visible .pa-defile > span { transform: translateY(-100%); }

/* Variante « vague » : chaque lettre défile avec un léger décalage (gardée en réserve) */
.pa-vague { display: inline-flex; overflow: hidden; height: 1.3em; line-height: 1.3em; margin-block: -0.15em; white-space: pre; }
.pa-vague > span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform 460ms cubic-bezier(.7,0,.2,1) calc(var(--i, 0) * 18ms); }
.pa-btn:hover .pa-vague > span, .pa-btn:focus-visible .pa-vague > span { transform: translateY(-1.3em); }

/* Icône qui défile avec le texte (variante E, retenue pour le panier et Mon compte) */
.pa-ico-roule { display: inline-grid; overflow: hidden; width: 1.15em; height: 1.15em; flex: none; }
.pa-ico-roule svg { grid-area: 1 / 1; transition: transform 480ms cubic-bezier(.7,0,.2,1); }
.pa-ico-roule svg + svg { transform: translateY(160%); }
.pa-btn:hover .pa-ico-roule svg:first-child, .pa-btn-icone:hover .pa-ico-roule svg:first-child { transform: translateY(-160%); }
.pa-btn:hover .pa-ico-roule svg + svg, .pa-btn-icone:hover .pa-ico-roule svg + svg { transform: translateY(0); }

/* Flèche à 45° qui pivote de 45° (↗ au repos, → au survol). Utiliser une flèche → dans le SVG. */
.pa-ico-fleche { transform: rotate(-45deg); transition: transform 460ms cubic-bezier(.34,1.56,.64,1); }
.pa-btn:hover .pa-ico-fleche, .pa-btn:focus-visible .pa-ico-fleche { transform: rotate(0deg); }

/* Flèche à 45° dans une pastille ronde collée au bord droit (variante C, retenue pour les actions) */
.pa-btn--pastille { padding-right: 0.4em; }
.pa-ico-pastille { display: inline-grid; place-items: center; width: 2.3em; height: 2.3em; margin-block: -0.6em; border-radius: 50%; background: var(--pa-noir); color: var(--pa-jaune); flex: none;
  transition: transform 460ms cubic-bezier(.34,1.56,.64,1), background var(--t-rapide); }
.pa-btn--sombre .pa-ico-pastille { background: var(--pa-turquoise); color: var(--pa-noir); }
.pa-btn--secondaire .pa-ico-pastille, .pa-btn--primaire .pa-ico-pastille, .pa-btn--panier .pa-ico-pastille { background: var(--pa-noir); color: var(--pa-blanc); }
.pa-ico-pastille svg { width: 1.05em; height: 1.05em; transform: rotate(-45deg); transition: transform 460ms cubic-bezier(.34,1.56,.64,1); }
.pa-btn:hover .pa-ico-pastille { transform: scale(1.08); }
.pa-btn:hover .pa-ico-pastille svg { transform: rotate(0deg); }

/* Icône qui rebondit (gardée en réserve) */
.pa-btn:hover .pa-ico-rebond { animation: pa-rebond 620ms cubic-bezier(.3,1.6,.5,1); }
@keyframes pa-rebond { 0% { transform: none; } 35% { transform: translateY(-4px) rotate(-12deg); } 70% { transform: translateY(1px) rotate(4deg); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pa-defile > span, .pa-vague > span, .pa-ico-roule svg, .pa-ico-fleche, .pa-ico-pastille, .pa-ico-pastille svg { transition: none; }
  .pa-btn:hover .pa-defile > span, .pa-btn:hover .pa-vague > span { transform: none; }
  .pa-btn:hover .pa-ico-rebond { animation: none; }
}

.pa-btn-icone {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none;
  background: var(--bg-surface); color: var(--pa-noir); border: 1px solid var(--bord); cursor: pointer;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide); position: relative;
}
.pa-btn-icone:hover { background: var(--pa-turquoise-50); border-color: var(--pa-turquoise-300); color: var(--pa-turquoise-text); }
.pa-btn-icone svg { width: 1.25rem; height: 1.25rem; }
.pa-btn-icone .pa-ico-roule { width: 1.25rem; height: 1.25rem; }
.pa-btn-icone .pa-pastille-compte {
  position: absolute; top: -3px; right: -3px; min-width: 1.15rem; height: 1.15rem; padding: 0 4px;
  border-radius: var(--r-pilule); background: var(--grad-cta); color: var(--pa-noir);
  font: 800 0.65rem/1.15rem var(--font-texte); text-align: center; border: 2px solid var(--bg-page);
}

/* ── Champs à floating labels ───────────────────────────────── */
.pa-champ { position: relative; display: block; }
.pa-champ input, .pa-champ select, .pa-champ textarea {
  width: 100%; font-family: var(--font-texte); font-size: var(--fs-base); color: var(--fg-titre);
  background: var(--bg-surface); border: 1.5px solid var(--bord-fort); border-radius: var(--r-pilule);
  padding: 1.55rem 1.4rem 0.55rem; height: 3.6rem; outline: none; appearance: none;
  transition: border-color var(--t-rapide), box-shadow var(--t-rapide);
}
.pa-champ textarea { border-radius: var(--r-m); height: auto; min-height: 8rem; resize: vertical; padding-top: 1.8rem; line-height: 1.5; }
.pa-champ label {
  position: absolute; left: 1.45rem; top: 50%; transform: translateY(-50%); transform-origin: left center;
  font-size: var(--fs-base); color: var(--fg-secondaire); pointer-events: none;
  transition: top var(--t-rapide), transform var(--t-rapide), color var(--t-rapide), font-size var(--t-rapide);
}
.pa-champ textarea + label { top: 1.6rem; }
.pa-champ input:focus, .pa-champ select:focus, .pa-champ textarea:focus { border-color: var(--pa-turquoise); box-shadow: var(--focus); }
.pa-champ input:focus + label,
.pa-champ input:not(:placeholder-shown) + label,
.pa-champ textarea:focus + label,
.pa-champ textarea:not(:placeholder-shown) + label,
.pa-champ select + label {
  top: 0.95rem; transform: translateY(-50%) scale(0.78); color: var(--pa-turquoise-text); font-weight: 600;
}
.pa-champ textarea:focus + label, .pa-champ textarea:not(:placeholder-shown) + label { top: 0.95rem; }
/* Corrections n°38 et n°48 (2026-11-08) : l'étiquette ne sort jamais du champ. Au repos, celle d'une zone de texte se lit comme
   une consigne, sur plusieurs lignes s'il le faut, dans le cadre ; remontée, toute étiquette tient sur une ligne (points de suspension
   si elle est trop longue), au-dessus du texte saisi */
.pa-champ label { max-width: calc(100% - 2.9rem); }
.pa-champ textarea + label { top: 1.15rem; transform: none; line-height: 1.4; }
.pa-champ input:focus + label, .pa-champ input:not(:placeholder-shown) + label, .pa-champ select + label,
.pa-champ textarea:focus + label, .pa-champ textarea:not(:placeholder-shown) + label {
  max-width: calc((100% - 2.9rem) / 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.pa-champ textarea:focus + label, .pa-champ textarea:not(:placeholder-shown) + label { transform: translateY(-50%) scale(0.78); }
.pa-champ select { padding-right: 3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292728' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 1.1rem; }
.pa-champ-aide { display: block; margin: 0.4rem 1.45rem 0; font-size: var(--fs-xs); color: var(--fg-secondaire); }
.pa-champ.is-erreur input, .pa-champ.is-erreur textarea { border-color: var(--erreur); }
.pa-champ.is-erreur label { color: var(--erreur) !important; }
.pa-champ.is-erreur + .pa-champ-aide { color: var(--erreur); }

/* Recherche (champ pilule avec icône) */
.pa-recherche { position: relative; display: flex; align-items: center; }
.pa-recherche input { width: 100%; height: 3rem; border-radius: var(--r-pilule); border: 1.5px solid var(--bord); background: var(--bg-surface);
  padding: 0 1.25rem 0 3rem; font: 500 var(--fs-sm) var(--font-texte); color: var(--fg-titre); outline: none; transition: border-color var(--t-rapide), box-shadow var(--t-rapide); }
.pa-recherche input:focus { border-color: var(--pa-turquoise); box-shadow: var(--focus); }
.pa-recherche svg { position: absolute; left: 1.1rem; width: 1.15rem; height: 1.15rem; color: var(--fg-secondaire); }

/* Cases et radios arrondies */
.pa-case { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: var(--fs-sm); color: var(--fg-titre); }
.pa-case input { appearance: none; width: 1.25rem; height: 1.25rem; margin: 0; border: 1.5px solid var(--bord-fort); border-radius: 7px; background: var(--bg-surface); display: grid; place-items: center; transition: background var(--t-rapide), border-color var(--t-rapide); }
.pa-case input[type=radio] { border-radius: 50%; }
.pa-case input:checked { background: var(--pa-turquoise); border-color: var(--pa-turquoise); }
.pa-case input:checked::after { content: ""; width: 0.35rem; height: 0.65rem; border: solid var(--pa-noir); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px,-1px); }
.pa-case input[type=radio]:checked::after { width: 0.45rem; height: 0.45rem; border: 0; border-radius: 50%; background: var(--pa-noir); transform: none; }
.pa-case input:focus-visible { box-shadow: var(--focus); }

/* ── Puces (chips) ─────────────────────────────────────────── */
.pa-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem;
  border-radius: var(--r-pilule); border: 1.5px solid var(--bord); background: var(--bg-surface);
  font: 600 var(--fs-xs)/1 var(--font-texte); color: var(--fg-titre); cursor: pointer; text-decoration: none;
  transition: background var(--t-rapide), border-color var(--t-rapide), color var(--t-rapide);
}
.pa-chip:hover { border-color: var(--pa-turquoise-300); background: var(--pa-turquoise-50); text-decoration: none; color: var(--fg-titre); }
.pa-chip .n { font-weight: 600; color: var(--fg-secondaire); }
.pa-chip.is-actif { background: var(--pa-turquoise-100); border-color: var(--pa-turquoise); color: var(--pa-noir); }
.pa-chip.is-actif .n { color: var(--pa-turquoise-text); }
.pa-chip.is-vide { opacity: 0.4; pointer-events: none; }
.pa-chip--retirer { background: var(--pa-noir); border-color: var(--pa-noir); color: var(--pa-blanc); }
.pa-chip--retirer:hover { background: #3a3738; border-color: #3a3738; color: var(--pa-blanc); }
.pa-chip--retirer svg { width: 0.85rem; height: 0.85rem; }

/* ── Badges ──────────────────────────────────────────────── */
.pa-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: var(--r-pilule);
  font: 800 var(--fs-2xs)/1 var(--font-texte); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pa-badge svg { width: 1.1em; height: 1.1em; }
.pa-badge--nouveau  { background: var(--pa-turquoise); color: var(--pa-noir); }
.pa-badge--promo    { background: var(--pa-noir); color: var(--pa-jaune); }
.pa-badge--demo     { background: var(--bg-surface); color: var(--pa-noir); box-shadow: inset 0 0 0 1.5px var(--pa-noir); }
.pa-badge--occasion { background: var(--pa-turquoise-50); color: var(--pa-turquoise-text); box-shadow: inset 0 0 0 1.5px var(--pa-turquoise-300); }
.pa-badge--port     { background: var(--bg-surface); color: var(--pa-noir); box-shadow: var(--ombre-s), inset 0 0 0 1px var(--bord); text-transform: none; letter-spacing: 0; font-size: var(--fs-2xs); }
.pa-badge--port svg { color: var(--pa-turquoise-text); }
.pa-badge--cadeau   { background: var(--pa-turquoise-100); color: var(--pa-noir); }
.pa-badge--coeur    { background: var(--bg-surface); color: var(--pa-turquoise-text); box-shadow: var(--ombre-s); font-family: var(--font-accent); font-weight: 800; font-size: var(--fs-xs); letter-spacing: 0.03em; }
.pa-dispo { display: inline-flex; align-items: center; gap: 0.4rem; font: 600 var(--fs-xs)/1 var(--font-texte); }
.pa-dispo::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
.pa-dispo--stock { color: var(--succes); }
.pa-dispo--commande { color: var(--alerte); }
.pa-dispo--rupture { color: var(--fg-secondaire); }

/* Homologation EN : pastille carrée arrondie, lettre en gras */
.pa-en { display: inline-flex; align-items: center; gap: 0.3rem; font: 700 var(--fs-2xs)/1 var(--font-texte); color: var(--fg-secondaire); }
.pa-en b { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 8px; font: 900 var(--fs-xs)/1 var(--font-titre); color: var(--pa-noir); background: var(--pa-turquoise-100); }
.pa-en--b b { background: #b9ecec; } .pa-en--c b { background: #8ddfdf; } .pa-en--d b { background: var(--pa-turquoise); } .pa-en--ccc b { background: var(--pa-noir); color: var(--pa-blanc); }

/* Étoiles de notation (avis) */
.pa-etoiles { display: inline-flex; align-items: center; gap: 0.35rem; font: 700 var(--fs-xs)/1 var(--font-texte); color: var(--fg-titre); }
.pa-etoiles i { --note: 5; position: relative; display: inline-block; font-style: normal; letter-spacing: 1px; color: #e3dfe0; font-size: 1.05em; line-height: 1; }
.pa-etoiles i::before { content: "★★★★★"; }
.pa-etoiles i::after { content: "★★★★★"; position: absolute; inset: 0; width: calc(var(--note) / 5 * 100%); overflow: hidden; color: var(--pa-jaune-fonce); }
.pa-etoiles span { color: var(--fg-secondaire); font-weight: 600; }

/* ── Cartes ──────────────────────────────────────────────── */

/* Alertes et messages : voir messages.css (modèle unique, 2026-10-13) */

/* Corrections de Bastien (2026-11-08) */
/* n°27 : la case ne se tasse plus à côté d'un long libellé (elle devenait une ovale étroite) ; coins moins ronds */
.pa-case input { flex: none; }
.pa-case input[type=checkbox] { width: 1.375rem; height: 1.375rem; border-radius: 5px; }
.pa-case { align-items: flex-start; }
.pa-case > input { margin-top: 0.05em; }
/* n°28 : bandeaux qui défilent au doigt (menu de la fiche, sous-rubriques) : fondu sur le bord où il reste à voir (js/commun.js) */
.pa-fondu-d { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
.pa-fondu-g { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent); }
.pa-fondu-g.pa-fondu-d { -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }