/* ===========================================================================
   photo-aerienne-france.fr — partie vente
   ---------------------------------------------------------------------------
   L'ancienne boutique présentait les tirages en grille de cartes : le visuel
   du produit en fond, un voile bleu, le titre en blanc sur deux lignes, un
   filet, le prix en grand italique, et un bouton arrondi « Ajouter au
   panier ». C'est ce dessin qui est repris ici — Patrice et ses clients le
   connaissent — avec trois différences :

   - le fond n'est plus l'un des trois visuels génériques de l'ancien site
     mais **la photo que le visiteur regarde**, dans la finition choisie :
     la carte montre ce qu'il va recevoir ;
   - la teinte du voile dit la matière (papier, toile, bois, papeterie) ;
   - le survol et le clic répondent — relief, voile qui s'éclaircit, bouton
     qui se remplit, article qui s'envole vers le panier.

   Tout ce qui suit dégrade proprement : sans JavaScript, chaque carte reste
   un formulaire qui poste vers la page panier.
   ======================================================================== */

:root {
  --v-bleu:        #3B94B6;
  --v-bleu-fonce:  #2b7591;
  --v-or:          #dac390;
  --v-encre:       #151515;
  --v-doux:        #8a939c;
  --v-bord:        #e4e8ec;
  --v-ombre:       0 2px 10px rgba(21, 31, 38, .07);
  --v-ombre-forte: 0 14px 34px rgba(21, 31, 38, .22);
  --v-rapide:      .18s cubic-bezier(.4, 0, .2, 1);
  --v-souple:      .34s cubic-bezier(.22, .9, .3, 1);
}

/* ===========================================================================
   1. La grille de tirages
   ======================================================================== */

.tirages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 22px;
  margin: 26px 0 8px;
}


.tirage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 268px;
  padding: 26px 22px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;                 /* le voile ne déborde pas de la carte */
  background: #cfe0e8;
  box-shadow: var(--v-ombre);
  transition: transform var(--v-souple), box-shadow var(--v-souple);
}

/* Le visuel du tirage, légèrement incliné comme sur l'ancien site. */
.tirage__visuel {
  position: absolute;
  inset: -6%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: rotate(-2.4deg) scale(1.06);
  transform-origin: center;
  transition: transform var(--v-souple), filter var(--v-souple);
}

/* Le voile : c'est lui qui rend le titre lisible par-dessus n'importe quelle
   photo, et sa teinte qui distingue les matières. */
/* Le voile est dosé pour que la photo reste lisible dessous : c'est elle
   qu'on vend. Deux couches superposées — la teinte de matière, puis un
   dégradé sombre discret — plutôt qu'une seule très opaque : le texte reste
   lisible sur un ciel clair comme sur une mer sombre, sans effacer l'image. */
.tirage__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 20, 28, .38) 0%, rgba(8, 20, 28, .10) 42%, rgba(8, 20, 28, .46) 100%),
    linear-gradient(165deg, rgba(59, 148, 182, .62) 0%, rgba(43, 117, 145, .72) 100%);
  transition: opacity var(--v-souple);
}
.tirage--toile .tirage__voile {
  background:
    linear-gradient(180deg, rgba(8, 20, 28, .38) 0%, rgba(8, 20, 28, .10) 42%, rgba(8, 20, 28, .46) 100%),
    linear-gradient(165deg, rgba(56, 142, 138, .62), rgba(37, 104, 101, .72));
}
.tirage--bois .tirage__voile {
  background:
    linear-gradient(180deg, rgba(20, 12, 4, .38) 0%, rgba(20, 12, 4, .10) 42%, rgba(20, 12, 4, .48) 100%),
    linear-gradient(165deg, rgba(150, 110, 72, .60), rgba(110, 78, 50, .72));
}
.tirage--papeterie .tirage__voile {
  background:
    linear-gradient(180deg, rgba(14, 8, 24, .38) 0%, rgba(14, 8, 24, .10) 42%, rgba(14, 8, 24, .48) 100%),
    linear-gradient(165deg, rgba(120, 98, 158, .60), rgba(86, 68, 120, .72));
}
.tirage--art .tirage__voile {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .16) 42%, rgba(0, 0, 0, .54) 100%),
    linear-gradient(165deg, rgba(38, 48, 58, .58), rgba(20, 26, 32, .70));
}

/* ---------------------------------------------------------------------------
   La carte avec mise en situation
   ---------------------------------------------------------------------------
   Quand la composition existe — la photo incrustée dans le visuel produit de
   l'ancienne boutique — le fond n'est plus la photo agrandie et inclinée mais
   l'objet lui-même : le tirage posé à plat avec son ombre, le coin de toile,
   le cadre au mur. Il est affiché en entier, sur le bleu pâle de l'ancien
   site, et le voile s'allège d'autant — c'est l'objet qu'on vend, il doit
   rester visible.
   ------------------------------------------------------------------------ */
.tirage--gabarit {
  background: #cfe0e9;
  min-height: 250px;
  justify-content: space-between;
  padding: 18px 16px 16px;
}
/* `contain` et non `cover` : on vend un objet, il doit tenir en entier dans
   la carte. Recadré, le tirage posé à plat ne montrait qu'un coin de papier
   et ne se lisait plus comme un tirage. */
.tirage--gabarit .tirage__visuel {
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: none;
}
/* Le voile reste, mais à mi-force : le titre doit se lire sur un ciel clair
   sans effacer l'objet. Un dégradé plutôt qu'un aplat — le haut porte le
   texte, le bas porte le bouton, le milieu montre le tirage. */
.tirage--gabarit .tirage__voile {
  background:
    linear-gradient(180deg,
      rgba(28, 74, 94, .72) 0%,
      rgba(28, 74, 94, .16) 30%,
      rgba(28, 74, 94, .12) 62%,
      rgba(18, 48, 62, .62) 100%);
}
.tirage--gabarit.tirage--toile .tirage__voile {
  background:
    linear-gradient(180deg,
      rgba(26, 76, 74, .72) 0%, rgba(26, 76, 74, .16) 30%,
      rgba(26, 76, 74, .12) 62%, rgba(16, 50, 49, .62) 100%);
}
.tirage--gabarit.tirage--bois .tirage__voile,
.tirage--gabarit.tirage--art .tirage__voile {
  background:
    linear-gradient(180deg,
      rgba(34, 27, 20, .74) 0%, rgba(34, 27, 20, .18) 30%,
      rgba(34, 27, 20, .14) 62%, rgba(22, 17, 11, .66) 100%);
}

/* Le voile s'étant allégé, c'est l'ombre portée du texte qui prend le relais
   au milieu de la carte : le prix se lit sur un ciel clair comme sur une
   forêt sombre, sans qu'il faille assombrir le tirage pour l'obtenir. */
.tirage--gabarit .tirage__titre,
.tirage--gabarit .tirage__prix,
.tirage--gabarit .tirage__mention {
  text-shadow: 0 1px 3px rgba(8, 20, 28, .78), 0 0 14px rgba(8, 20, 28, .5);
}
@media (hover: hover) {
  .tirage--gabarit:hover .tirage__visuel { transform: scale(1.04); }
}

/* Dans une carte à mise en situation, le titre coiffe, le prix se pose au
   milieu et le bouton tient le bas : c'est la disposition de l'ancienne
   boutique, et l'objet reste visible entre les trois. */
.tirage--gabarit .tirage__titre  { margin: 0 0 8px; }
.tirage--gabarit .tirage__filet  { margin: 0 auto 8px; }
.tirage--gabarit .tirage__prix   { margin: 0 0 4px; }
.tirage--gabarit .tirage__mention { margin: 0 0 12px; }
.tirage--gabarit .tirage__bouton { margin-top: 0; }

.tirage__titre {
  margin: 0 0 14px;
  font: 700 16px/1.45 "Poppins", "Lato", sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* Le filet court sous le titre, comme sur l'ancienne carte. */
.tirage__filet {
  width: 62px;
  height: 2px;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, .75);
  border-radius: 2px;
  transition: width var(--v-souple), background var(--v-souple);
}

.tirage__prix {
  margin: 0 0 18px;
  font: italic 700 27px/1 "Poppins", "Lato", sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .48);
}
.tirage__prix s {
  display: block;
  margin-top: 5px;
  font: italic 400 15px/1 "Lato", sans-serif;
  color: rgba(255, 255, 255, .7);
}

.tirage__mention {
  margin: -10px 0 16px;
  font: 400 12px/1.5 "Lato", sans-serif;
  color: rgba(255, 255, 255, .85);
  text-align: center;
}

.tirage__bouton {
  display: block;
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 26px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 600 14px/1.2 "Lato", sans-serif;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background var(--v-rapide), color var(--v-rapide),
              border-color var(--v-rapide), transform var(--v-rapide);
}

/* --- Réactions au survol ------------------------------------------------ */
@media (hover: hover) {
  .tirage:hover { transform: translateY(-4px); box-shadow: var(--v-ombre-forte); }
  .tirage:hover .tirage__visuel { transform: rotate(-1.2deg) scale(1.12); }
  .tirage:hover .tirage__voile  { opacity: .82; }
  .tirage:hover .tirage__filet  { width: 96px; background: var(--v-or); }
  .tirage__bouton:hover { background: #fff; color: var(--v-bleu-fonce); border-color: #fff; }
  .tirage__bouton:active { transform: scale(.97); }
}
.tirage:focus-within { outline: 2px solid var(--v-or); outline-offset: 3px; }
.tirage__bouton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Pendant l'envoi vers le panier. */
.tirage__bouton[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* ===========================================================================
   2. L'article qui s'envole vers le panier
   --------------------------------------------------------------------------
   Un clone du visuel part de la carte et rejoint l'icône du panier en
   suivant une courbe. Il est décoratif : `aria-hidden`, hors du flux, et il
   n'existe pas du tout si le visiteur a demandé moins d'animations.
   ======================================================================== */

.vol-panier {
  position: fixed;
  z-index: 3000;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--v-ombre-forte);
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes panier-tressaute {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.28) rotate(-8deg); }
  60%      { transform: scale(.94) rotate(4deg); }
}
.cart img.tressaute { animation: panier-tressaute .5s ease; }

.cart-compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--v-bleu);
  color: #fff;
  font: 700 12px/1 "Lato", sans-serif;
}
@keyframes compteur-pousse { 50% { transform: scale(1.45); } }
.cart-compteur.pousse { animation: compteur-pousse .42s ease; }

/* ===========================================================================
   3. Le tiroir du panier
   --------------------------------------------------------------------------
   Sur écran large, le panier s'ouvre à droite plutôt que d'emmener le
   visiteur sur une autre page : il vient d'ajouter un tirage, il veut voir
   son panier sans perdre la photo qu'il regardait. En dessous de 992 px, le
   tiroir n'existe pas — le lien mène à la page panier, qui a toute la place.
   ======================================================================== */

.tiroir-voile {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: rgba(15, 26, 32, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v-souple), visibility var(--v-souple);
}
.tiroir-voile.est-ouvert { opacity: 1; visibility: visible; }

.tiroir {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2500;
  display: flex;
  flex-direction: column;
  width: min(408px, 100vw);
  height: 100dvh;
  background: #fff;
  box-shadow: -14px 0 40px rgba(15, 26, 32, .18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--v-souple), visibility var(--v-souple);
}
.tiroir.est-ouvert { transform: none; visibility: visible; }

.tiroir__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--v-bord);
}
.tiroir__entete h2 {
  margin: 0;
  font: 700 17px/1.3 "Poppins", "Lato", sans-serif;
  color: var(--v-encre);
}
.tiroir__fermer {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--v-doux);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: background var(--v-rapide), color var(--v-rapide);
}
.tiroir__fermer:hover { background: #f2f5f7; color: var(--v-encre); }

.tiroir__corps { flex: 1; overflow-y: auto; padding: 8px 20px; }

.tiroir__vide {
  padding: 48px 10px;
  text-align: center;
  color: var(--v-doux);
  font: 400 14px/1.6 "Lato", sans-serif;
}

.tiroir-ligne {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid #eef1f4;
  animation: ligne-entre var(--v-souple) both;
}
@keyframes ligne-entre { from { opacity: 0; transform: translateX(14px); } }
.tiroir-ligne.part { opacity: 0; transform: translateX(22px); transition: opacity var(--v-rapide), transform var(--v-rapide); }

.tiroir-ligne__image {
  width: 62px; height: 46px;
  object-fit: cover;
  border-radius: 6px;
  background: #eef1f4;
}
.tiroir-ligne__nom {
  margin: 0 0 2px;
  font: 600 13.5px/1.35 "Lato", sans-serif;
  color: var(--v-encre);
}
.tiroir-ligne__meta {
  margin: 0;
  font: 400 12px/1.5 "Lato", sans-serif;
  color: var(--v-doux);
}
.tiroir-ligne__prix {
  font: 700 14px/1.3 "Lato", sans-serif;
  color: var(--v-bleu);
  text-align: right;
  white-space: nowrap;
}

.tiroir-qte {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--v-bord);
  border-radius: 18px;
  overflow: hidden;
}
.tiroir-qte button {
  width: 30px; height: 30px;
  border: 0; background: #fff;
  color: var(--v-encre);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--v-rapide);
}
.tiroir-qte button:hover { background: #f2f5f7; }
.tiroir-qte button:disabled { opacity: .35; cursor: default; }
.tiroir-qte span {
  min-width: 30px;
  text-align: center;
  font: 600 13px/1 "Lato", sans-serif;
  font-variant-numeric: tabular-nums;
}

.tiroir-ligne__retirer {
  margin-top: 6px;
  border: 0; background: none; padding: 0;
  font: 400 12px/1.4 "Lato", sans-serif;
  color: var(--v-doux);
  text-decoration: underline;
  cursor: pointer;
}
.tiroir-ligne__retirer:hover { color: #cf4040; }

.tiroir__pied {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--v-bord);
  background: #fbfcfd;
}
.tiroir__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
  font: 400 13.5px/1.6 "Lato", sans-serif;
  color: var(--v-doux);
}
.tiroir__total--fort {
  margin: 8px 0 14px;
  font: 700 18px/1.3 "Poppins", "Lato", sans-serif;
  color: var(--v-encre);
}
.tiroir__actions { display: grid; gap: 8px; }
.tiroir__commander {
  display: block;
  padding: 13px 18px;
  border: 0; border-radius: 26px;
  background: linear-gradient(180deg, var(--v-bleu), var(--v-bleu-fonce));
  color: #fff;
  font: 600 14.5px/1.2 "Lato", sans-serif;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: filter var(--v-rapide), transform var(--v-rapide);
}
.tiroir__commander:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.tiroir__commander:active { transform: scale(.985); }
.tiroir__voir {
  display: block;
  padding: 10px;
  color: var(--v-doux);
  font: 400 13px/1.2 "Lato", sans-serif;
  text-align: center;
}

.tiroir__erreur {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fdf1f1;
  color: #a23434;
  font: 400 13px/1.5 "Lato", sans-serif;
}

/* Le tiroir est une interface de bureau : sur téléphone, la page panier
   reste la bonne réponse — plus de place, et pas de couche flottante à
   refermer d'un pouce. */
@media (max-width: 991px) {
  .tiroir, .tiroir-voile { display: none !important; }
}

/* ===========================================================================
   3 bis. La grille sur téléphone
   --------------------------------------------------------------------------
   Dix-sept tirages en cartes de 268 px de haut font une page de cinq mille
   pixels. Sur un écran étroit, la carte se resserre : la photo reste visible
   — c'est elle qu'on vend — mais le bloc perd la moitié de sa hauteur.
   ======================================================================== */
@media (max-width: 575px) {
  .tirages { gap: 12px; margin-top: 18px; }
  .tirage { min-height: 178px; padding: 18px 16px; }
  .tirage__titre { margin-bottom: 9px; font-size: 14.5px; line-height: 1.35; }
  .tirage__filet { margin-bottom: 9px; }
  .tirage__prix { margin-bottom: 12px; font-size: 23px; }
  .tirage__mention { margin: -7px 0 11px; font-size: 11.5px; }
  .tirage__bouton { padding: 10px 14px; font-size: 13.5px; min-height: 42px; }
}

/* ===========================================================================
   4. Sobriété
   --------------------------------------------------------------------------
   `prefers-reduced-motion` n'est pas une préférence esthétique : chez
   certaines personnes, un mouvement qui traverse l'écran déclenche un
   malaise. Tout ce qui bouge s'arrête ici ; tout ce qui informe reste.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tirage, .tirage__visuel, .tirage__voile, .tirage__filet,
  .tirage__bouton, .tiroir, .tiroir-voile, .tiroir-ligne {
    transition: none !important;
    animation: none !important;
  }
  .tirage:hover { transform: none; }
  .vol-panier { display: none !important; }
  .cart img.tressaute, .cart-compteur.pousse { animation: none !important; }
}

/* ===========================================================================
   5. Espace client
   --------------------------------------------------------------------------
   Un client revient une ou deux fois par an : tout tient sur une page, sans
   arborescence à mémoriser. Les styles reprennent ceux du tunnel — `.tunnel`,
   `.encart`, `.champ` — et n'ajoutent que ce qui manquait.
   ======================================================================== */

.tunnel--etroit { max-width: 560px; }

.compte-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.compte-entete h1 { margin: 0; }

.compte-intro,
.champ-aide {
  font: 400 13.5px/1.65 "Lato", sans-serif;
  color: var(--v-doux);
}
.champ-aide { display: block; margin-top: 5px; }

.compte-bascule {
  margin-top: 18px;
  font: 400 14px/1.7 "Lato", sans-serif;
  color: var(--v-doux);
  text-align: center;
}

.encart-erreur, .encart-succes {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-radius: 7px;
  font: 400 14px/1.6 "Lato", sans-serif;
}
.encart-erreur  { background: #fdf1f1; color: #a23434; border: 1px solid #f3d5d5; }
.encart-succes  { background: #f0f9f2; color: #2c6b3f; border: 1px solid #cfe8d6; }

/* --- Chiffres du client ------------------------------------------------- */
.compte-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0 26px;
}
.compte-chiffres div {
  padding: 14px 16px;
  border: 1px solid var(--v-bord);
  border-radius: 9px;
  background: #fbfcfd;
  text-align: center;
}
.compte-chiffres strong {
  display: block;
  font: 700 21px/1.2 "Poppins", "Lato", sans-serif;
  color: var(--v-encre);
}
.compte-chiffres span {
  font: 400 12.5px/1.5 "Lato", sans-serif;
  color: var(--v-doux);
}

/* --- Commandes ---------------------------------------------------------- */
.compte-commandes { display: grid; gap: 12px; margin-bottom: 30px; }

.compte-commande {
  padding: 16px 18px;
  border: 1px solid var(--v-bord);
  border-radius: 9px;
  background: #fff;
  transition: border-color var(--v-rapide), box-shadow var(--v-rapide);
}
.compte-commande:hover { border-color: #cfd8de; box-shadow: var(--v-ombre); }

.compte-commande__tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.compte-commande__ref {
  font: 700 15px/1.2 ui-monospace, "SFMono-Regular", monospace;
  color: var(--v-encre);
}
.compte-commande__statut {
  padding: 3px 10px;
  border-radius: 12px;
  font: 600 11.5px/1.5 "Lato", sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: #eef3f6; color: #4a5a66;
}
.compte-commande__statut--payee,
.compte-commande__statut--livree        { background: #eaf6ee; color: #2c6b3f; }
.compte-commande__statut--expediee,
.compte-commande__statut--en_preparation { background: #e9f3f8; color: #2b6c88; }
.compte-commande__statut--echouee,
.compte-commande__statut--annulee        { background: #fdeeee; color: #a23434; }
.compte-commande__statut--en_attente_paiement,
.compte-commande__statut--remboursee     { background: #fdf4e6; color: #8a6420; }

.compte-commande__meta {
  margin: 0 0 8px;
  font: 400 13.5px/1.65 "Lato", sans-serif;
  color: var(--v-doux);
}
.compte-suivi { font-family: ui-monospace, "SFMono-Regular", monospace; color: var(--v-encre); }
.compte-commande__actions { margin: 0; font: 400 13.5px/1.5 "Lato", sans-serif; }

/* --- Adresses ----------------------------------------------------------- */
.compte-adresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.compte-adresse {
  padding: 14px 16px;
  border: 1px solid var(--v-bord);
  border-radius: 9px;
  background: #fff;
}
.compte-adresse p { margin: 0 0 8px; font: 400 13.5px/1.6 "Lato", sans-serif; }
.compte-defaut {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e9f3f8; color: #2b6c88;
  font: 600 11px/1.5 "Lato", sans-serif;
}
.lien-retirer {
  border: 0; background: none; padding: 0;
  font: 400 12.5px/1.4 "Lato", sans-serif;
  color: var(--v-doux);
  text-decoration: underline;
  cursor: pointer;
}
.lien-retirer:hover { color: #a23434; }

/* --- Blocs repliés ------------------------------------------------------ */
.compte-details { margin: 8px 0 26px; }
.compte-details > summary {
  cursor: pointer;
  padding: 11px 14px;
  border: 1px solid var(--v-bord);
  border-radius: 8px;
  background: #fbfcfd;
  font: 600 14px/1.3 "Lato", sans-serif;
  color: var(--v-encre);
  transition: background var(--v-rapide);
}
.compte-details > summary:hover { background: #f2f6f8; }
.compte-details[open] > summary { margin-bottom: 12px; }

/* --- Lien du bandeau ---------------------------------------------------- */
.compte-lien {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .compte-entete { flex-direction: column; align-items: flex-start; }
  .compte-chiffres { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .compte-chiffres div { padding: 10px 8px; }
  .compte-chiffres strong { font-size: 16px; }
  .compte-chiffres span { font-size: 11px; }
}

/* Bandeau d'identité du tunnel : qui commande, ou l'invitation à se
   connecter. Discret — il informe, il ne détourne pas de l'achat. */
.tunnel-identite {
  margin: 0 0 22px;
  padding: 11px 15px;
  border-left: 3px solid #3B94B6;
  border-radius: 0 6px 6px 0;
  background: #f3f8fa;
  font: 400 14px/1.6 "Lato", sans-serif;
  color: #4a5560;
}
.tunnel-identite strong { color: #151515; }
.tunnel-identite a { color: #3B94B6; }

#bloc-compte { margin: -4px 0 18px 28px; max-width: 420px; }
#bloc-compte small { display: block; margin-top: 5px; font-size: 12.5px; color: #8a939c; }

/* ===========================================================================
   Grille de tirages : quatre colonnes sur grand ecran
   ======================================================================== */
/* Depuis que le contenu va d'un bord à l'autre, `auto-fill` posait huit
   cartes par ligne sur un écran de 1 920 px : douze tirages sur deux lignes,
   chacun trop petit pour qu'on distingue la matière — or c'est précisément
   ce qu'on demande au visiteur de choisir. Quatre colonnes fixes, donc, et
   les douze produits tiennent sur trois lignes. La carte passe de 220 à
   450 px de large : la mise en situation redevient lisible, et le titre tient
   sur deux lignes au lieu de quatre. */
@media (min-width: 992px) {
  .tirages { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .tirage  { min-height: 330px; padding: 30px 26px; }
  .tirage--gabarit { min-height: 340px; padding: 22px 20px 20px; }
  .tirage__titre   { font-size: 17.5px; }
  .tirage__prix    { font-size: 30px; }
}

/* Au-delà, la carte gagne surtout en hauteur : une carte large et plate
   coupe le tirage en deux. */
@media (min-width: 1600px) {
  .tirages { gap: 30px; }
  .tirage,
  .tirage--gabarit { min-height: 400px; }
  .tirage__titre   { font-size: 19px; }
  .tirage__prix    { font-size: 34px; }
}

/* ===========================================================================
   Retour à la photo depuis le panier
   --------------------------------------------------------------------------
   Ni la vignette du tiroir ni celle de la page panier n'étaient cliquables.
   C'est pourtant là qu'on veut revenir — « c'est bien celle-ci que j'ai
   mise ? » — et il fallait refaire tout le chemin depuis le menu.
   ======================================================================== */
.tiroir-ligne__vers-photo {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity var(--v-rapide);
}
.tiroir-ligne__vers-photo:hover { opacity: .82; }
.tiroir-ligne__nom .tiroir-ligne__vers-photo:hover { text-decoration: underline; }

.panier-table td.vignette a {
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity var(--v-rapide), box-shadow var(--v-rapide);
}
.panier-table td.vignette a:hover {
  opacity: .9;
  box-shadow: 0 2px 10px rgba(21, 31, 38, .18);
}
.panier-table .reference a {
  color: var(--v-bleu, #3B94B6);
  text-decoration: underline;
  text-underline-offset: 2px;
}