/* Page d'accueil */

.landing-body {
  padding-bottom: 60px;
}

.landing-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 20px 0;
}

/* Grille de navigation principale */

/* Douze pistes pour deux lignes de largeurs differentes : les QUATRE portes de
   rachat en haut (3 pistes chacune), les deux autres en dessous (6 chacune).
   Un grid a deux ou quatre colonnes ne sait pas faire les deux ; douze est le
   plus petit commun multiple, et chaque carre dit juste combien il en prend.
   Il en valait six tant que la premiere ligne n'en portait que trois. */
.landing-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

/* Vendre une carte, coller une liste, apporter un carton, consulter la liste
   prioritaire : quatre facons de nous apporter des cartes, donc une seule
   ligne. */
.landing-card-buyback,
.landing-card-mass,
.landing-card-bulk,
.landing-card-hotlist {
  grid-column: span 3;
}

.landing-card-shop,
.landing-card-contact {
  grid-column: span 6;
}

.landing-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  min-height: 180px;
  background: var(--parchment);
  border: 1px solid var(--mist);
  border-bottom: 4px solid var(--mist);
  border-radius: 10px;
  padding: 24px 20px;
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.15s ease,
    border-bottom-color 0.15s ease,
    box-shadow 0.15s ease;
}

.landing-card:hover {
  transform: translateY(-3px);
  border-bottom-color: var(--brass);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* Illustration de carte en filigrane, propre a chaque carre (voir
   .landing-card-hotlist ci-dessous) — z-index explicite sur le pseudo-
   element ET sur le contenu (.landing-card-title/.landing-card-desc)
   pour garantir l'ordre d'empilement independamment des subtilites de
   peinture flex vs absolute. Trois couches : image (0), voile de
   lisibilite (1), texte (2). */
.landing-card-title,
.landing-card-desc {
  position: relative;
  z-index: 2;
}

/* Base commune aux carres avec illustration en filigrane — degrade
   estompe a gauche (sous le texte) / visible a droite (espace libre),
   chaque carre fixe juste son image + cadrage vertical + flip eventuel. */
.landing-card-hotlist::before,
.landing-card-contact::before,
.landing-card-shop::before,
.landing-card-mass::before,
.landing-card-bulk::before,
.landing-card-buyback::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);
  mask-image: linear-gradient(to right, transparent 0%, black 60%);
  opacity: 0.35;
  pointer-events: none;
  /* Se clipse lui-meme aux coins arrondis du carre, plutot que de compter
     sur l'overflow:hidden du parent — celui-ci est levé sur le carre de
     rachat pour laisser dépasser l'étoile de panier (voir plus bas). */
  border-radius: inherit;
}

/* Voile parchemin dedie a la lisibilite du texte, INDEPENDANT de
   l'opacite/saturation de l'image (qui peut donc rester vive) — opaque
   sous le texte, transparent vers la droite pour laisser l'illustration
   respirer. */
.landing-card-hotlist::after,
.landing-card-contact::after,
.landing-card-shop::after,
.landing-card-mass::after,
.landing-card-bulk::after,
.landing-card-buyback::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(243, 234, 216, 0.7) 0%, rgba(243, 234, 216, 0.7) 20%, transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}

/* PWAR #119s★ (JP) — Chandra, Fire Artisan. Degrade defini "a l'envers"
   (gauche opaque, droite transparente) car transform:scaleX(-1) retourne
   aussi le masque — une fois le flip applique, le resultat visuel est
   bien estompe a gauche et visible a droite. Tons clairs (flammes jaune/
   blanc) qui se fondent dans le parchemin : saturate+contrast pour faire
   ressortir les couleurs plutot que baisser l'opacite (qui rend juste
   l'image moins presente, pas plus contrastee — deja tente, pire). */
.landing-card-hotlist::before {
  background-image: url('media/landing-chandra.jpg');
  background-position: center 8%;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, transparent 85%);
  mask-image: linear-gradient(to right, black 0%, black 50%, transparent 85%);
  transform: scaleX(-1);
  filter: saturate(1.6) contrast(1.25);
  opacity: 0.45;
}

/* PWAR #220s★ (JP) — Tamiyo, Collector of Tales. Flip demande explicitement
   pour qu'elle regarde vers la droite — meme degrade "a l'envers" que
   Chandra pour compenser le flip. */
.landing-card-shop::before {
  background-image: url('media/landing-tamiyo.jpg');
  background-position: center 8%;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 50%, transparent 85%);
  mask-image: linear-gradient(to right, black 0%, black 50%, transparent 85%);
  transform: scaleX(-1);
  filter: saturate(1.6) contrast(1.25);
  opacity: 0.45;
}

/* PWAR #230s★ (JP) — Huatli, the Sun's Heart, deja cadree a droite dans
   l'illustration source, pas besoin de flip. */
.landing-card-buyback::before {
  background-image: url('media/landing-huatli.jpg');
  background-position: center 0%;
  filter: saturate(1.6) contrast(1.25);
  opacity: 0.45;
}

/* PWCS #2023-1 (JP) — Elspeth Resplendent, deja cadree a droite dans
   l'illustration source, pas besoin de flip. */
.landing-card-contact::before {
  background-image: url('media/landing-elspeth.jpg');
  background-position: center 0%;
  filter: saturate(1.6) contrast(1.25);
  opacity: 0.45;
}

/* PWAR #97s★ (JP) — Liliana, Dreadhorde General, par Yoshitaka Amano. Le
   general d'une horde pour le carre qui traite un deck entier d'un coup.
   Source en 633x397 la ou les quatre autres font 633x468. Plus courte, elle se
   rogne moins par le bas a largeur egale — et la DATE DE PRERELEASE imprimee
   sur ces promos, que le cadrage des quatre autres fait disparaitre, revenait
   en bas du carre. D'ou le 120% : l'image deborde de la boite dans les deux
   sens, le bas part avec la date. */
.landing-card-mass::before {
  background-image: url('media/landing-liliana.jpg');
  background-size: 120%;
  background-position: center 0%;
  filter: saturate(1.6) contrast(1.25);
  opacity: 0.45;
}

.landing-card-title {
  font-family: 'Beleren', Georgia, 'Times New Roman', serif;
  font-weight: bold;
  font-size: 1.35rem;
  color: var(--ink);
  text-shadow:
    0 0 2px var(--parchment),
    0 0 4px var(--parchment),
    0 0 6px var(--parchment),
    0 0 8px var(--parchment),
    0 0 12px var(--parchment);
}

.landing-card-desc {
  font-size: 1.3rem;
  color: #5a4f3a;
  line-height: 1.55;
  text-shadow:
    0 0 2px var(--parchment),
    0 0 4px var(--parchment),
    0 0 6px var(--parchment),
    0 0 8px var(--parchment),
    0 0 12px var(--parchment);
}

/* Sections dépliables (engagement associatif) */

.landing-accordions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.landing-accordion {
  background: var(--parchment);
  border: 1px solid var(--mist);
  border-radius: 8px;
  padding: 4px 20px;
}

.landing-accordion summary {
  cursor: pointer;
  padding: 14px 0;
  font-family: 'Beleren', Georgia, 'Times New Roman', serif;
  font-weight: bold;
  font-size: 1.35rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-accordion-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-accordion-title svg {
  flex-shrink: 0;
  color: var(--brass);
}

.landing-accordion summary::-webkit-details-marker {
  display: none;
}

.landing-accordion summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--brass);
  transition: transform 0.2s ease;
}

.landing-accordion[open] summary::after {
  transform: rotate(45deg);
}

.landing-accordion summary:hover {
  color: var(--brass);
}

.landing-accordion-body {
  padding: 4px 0 18px;
  border-top: 1px solid var(--mist);
  font-size: 1.1rem;
  color: #3a3226;
  line-height: 1.6;
}

.landing-accordion-body p {
  margin: 0 0 6px;
}

.landing-accordion-body a {
  color: var(--wine);
}

/* Mobile */

/* Deux colonnes : trois carres de front deviennent illisibles sous ~900px, les
   titres en Beleren passant a trois lignes. Le contact prend alors la case
   orpheline de la troisieme ligne. */
@media (max-width: 900px) {
  .landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-card-buyback,
  .landing-card-mass,
  .landing-card-bulk,
  .landing-card-hotlist,
  .landing-card-shop {
    grid-column: span 1;
  }

  .landing-card-contact {
    grid-column: 1 / -1;
    min-height: 130px;
  }
}

/* Une colonne : les spans doivent etre remis a plat, sans quoi `span 3` cree
   DEUX pistes implicites et la grille redevient a trois colonnes sur un
   telephone. Mesure quand le carre du vrac a ete ajoute sans etre inscrit dans
   ces deux listes : 3 pistes a 360px, et des carres de 42, 169, 61 et 320 px.

   TOUT NOUVEAU CARRE DOIT ENTRER DANS LES DEUX REQUETES CI-DESSUS ET CI-DESSOUS.
   Le manquement ne leve rien : la page rend, en large sur un ecran de bureau et
   illisible sur un telephone. `check:css` le refuse desormais. */
@media (max-width: 600px) {
  .landing-grid {
    grid-template-columns: 1fr;
  }

  .landing-card-buyback,
  .landing-card-mass,
  .landing-card-bulk,
  .landing-card-hotlist,
  .landing-card-shop,
  .landing-card-contact {
    grid-column: span 1;
  }
}

/* Page de contact */

.landing-main-narrow {
  max-width: 560px;
}

/* Le panneau parchemin. `.bulk-panel` s'ajoute ICI plutot que de reecrire un
   bloc equivalent : les deux ecrans posent le meme objet, et une seconde copie
   aurait diverge des que l'un des deux aurait bouge. */
.contact-form,
.bulk-panel {
  background: var(--parchment);
  border: 1px solid var(--mist);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form-row label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--ink);
}

.contact-form-row input,
.contact-form-row select,
.contact-form-row textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--mist);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

.contact-form-row textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form-row input:focus,
.contact-form-row select:focus,
.contact-form-row textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}

.contact-error,
.contact-sent {
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
  margin: 0;
}

.contact-error {
  background: #fdecea;
  border: 1px solid var(--wine);
  color: var(--wine);
}

/* Un message parti n'est pas une erreur. */
.contact-sent {
  background: #e6f4ea;
  border: 1px solid #b7e0c0;
  color: #1b5e20;
}

.contact-submit-btn {
  padding: 14px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--brass);
  border-bottom: 3px solid #8a5f08;
  background: var(--brass);
  color: var(--ink);
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
.contact-submit-btn:hover:not(:disabled) {
  background: var(--brass-light);
  transform: translateY(-1px);
}

/* UN BOUTON DESACTIVE DOIT EN AVOIR L'AIR. Il n'avait aucune regle : l'attribut
   etait bien pose — le contact pendant l'envoi, le vrac sous le poids minimum —
   mais le bouton gardait son laiton et se soulevait encore au survol. Un clic
   qui ne fait rien sur un bouton d'apparence normale se lit comme une panne du
   site, pas comme un refus.

   `:not(:disabled)` sur le survol ci-dessus fait la moitie du travail : sans
   lui, la regle de survol reprenait le dessus sur celle-ci. */
.contact-submit-btn:disabled {
  cursor: not-allowed;
  background: var(--mist);
  border-color: var(--mist);
  border-bottom-color: var(--mist);
  color: #6b5f45;
}

.contact-fallback-note {
  font-size: 0.78rem;
  color: #6b5f45;
  text-align: center;
  margin: 0;
}
.contact-fallback-note a {
  color: var(--wine);
}

/* Page d'erreur (404) */

.error-panel {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 40px 34px;
  background: var(--parchment);
  border: 1px solid var(--mist);
  border-radius: 10px;
}

.error-code {
  margin: 0;
  font-size: 5rem;
  font-weight: bold;
  line-height: 1;
  color: var(--brass);
  letter-spacing: 0.05em;
}

.error-heading {
  margin: 10px 0 12px;
  color: var(--ink);
}

.error-message {
  margin: 0;
  color: #5a4f3a;
  line-height: 1.55;
  white-space: pre-line;
}

/* Étoile "panier en cours" (landing-cart-star.js)
   Posée sur la carte "Vendez-nous vos cartes" quand un panier de rachat
   attend le client, à cheval sur son coin haut-gauche.

   L'étoile DÉBORDE volontairement du carré : `overflow: visible` ici lève
   le `overflow: hidden` de .landing-card, qui la rognerait. Ce hidden ne
   servait qu'à clipser les pseudo-éléments d'illustration aux coins
   arrondis — ils s'en chargent désormais eux-mêmes (border-radius: inherit
   plus haut), donc rien d'autre ne change.

   z-index 3 : au-dessus de l'image (0), du voile (1) et du texte (2). */
.landing-card-buyback {
  overflow: visible;
}

.landing-card-star {
  position: absolute;
  top: -18px;
  left: -16px;
  z-index: 3;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--brass-light);
  text-shadow:
    0 0 8px rgba(224, 181, 69, 0.95),
    0 0 20px rgba(224, 181, 69, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  animation: landing-star-glow 2.4s ease-in-out infinite;
  /* Surtout PAS pointer-events: none — sans survol, pas d'infobulle. Le
     clic n'a besoin d'aucun câblage : l'étoile est posée à l'intérieur du
     <a href="#/rachat"> du carré, elle mène donc au rachat comme le
     reste du bloc. */
  cursor: pointer;
}

@keyframes landing-star-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

/* Un client qui a demandé moins d'animation ne doit pas voir l'étoile
   pulser ; elle reste visible et lumineuse, simplement immobile. */
@media (prefers-reduced-motion: reduce) {
  .landing-card-star {
    animation: none;
  }
}

/* PWAR #169s★ (JP) — Nissa, Who Shakes the World, par Hitowa. Deja cadree au
   centre-droit comme Huatli, pas de flip a prevoir. Le vert manquait a la
   premiere ligne, ou Chandra tient le rouge, Liliana le noir et Huatli le
   blanc. */
.landing-card-bulk::before {
  background-image: url('media/landing-nissa.jpg');
  background-position: center 15%;
  filter: saturate(1.6) contrast(1.25);
  opacity: 0.45;
}

/* Les deux panneaux de l'ecran s'espacent entre eux ; a l'interieur, c'est le
   `gap` herite de .contact-form qui separe, donc les blocs n'ont pas de marge
   propre — deux espacements superposes donnent une colonne qui respire trop. */
.bulk-panel {
  margin-bottom: 20px;
}

/* L'annonce, en trois morceaux : l'amorce, les deux tarifs, le minimum. */
.bulk-rate,
.bulk-minimum,
.bulk-rates,
.bulk-exclusions {
  margin: 0;
}

.bulk-rates {
  padding-left: 20px;
}

.bulk-rates li {
  margin-bottom: 4px;
}

.bulk-exclusions {
  padding-left: 20px;
}

.bulk-exclusions li {
  margin-bottom: 6px;
}

.bulk-estimate {
  margin: 0;
  font-size: 1.15rem;
  font-weight: bold;
  white-space: nowrap;
}

/* Un poids saisi sous le minimum : on le DIT plutot que de n'afficher rien,
   un champ rempli qui ne rend rien se lisant comme une panne.
   
   Meme poids visuel que le montant qu'il remplace, et le rouge d'erreur du
   site plutot qu'un ton invente : en gris et en petit il passait pour une
   precision, alors que c'est un REFUS — le bouton d'a cote est desactive, et
   rien d'autre ne dit pourquoi. */
.bulk-estimate-under {
  color: var(--wine);
}

.bulk-exclusions-title {
  margin: 0;
  font-size: 1.1rem;
}

/* Le nombre, son unite et le montant sur une meme ligne : ce sont les deux
   moities d'une seule saisie et sa reponse immediate. Les empiler laissait
   croire a trois questions. */
.bulk-amount {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-amount input {
  flex: 1;
  min-width: 0;
}

/* Le poids DEDUIT d'un nombre de cartes, en second plan : c'est une precision,
   pas le resultat. */
.bulk-as-weight {
  font-size: 0.9rem;
  font-weight: normal;
}