/* Selection tools (30/09, inc/selection.php, assets/js/selection.js):
   « Est-ce qu'il rentre chez moi ? » (Mon salon in a dialog), « Continuer sur mon téléphone » (QR code),
   « Vous aviez gardé N canapés » (reminder), « Télécharger en PDF » (printed selection).
   Nothing here moves the page: buttons are server-rendered, dialogs and the reminder float above it. */

/* ---------- Buttons ---------- */
.salon-lien, .outil-selection { display: inline-flex; align-items: center; gap: 0.5rem; }
.salon-lien .icone, .outil-selection .icone { width: 18px; height: 18px; flex: none; }
.mesures__salon { margin: 1rem 0 0; }
.salon-lien:focus-visible, .outil-selection:focus-visible, .modale__fermer:focus-visible, .modale__retour:focus-visible, .rappel-selection a:focus-visible, .rappel-selection__fermer:focus-visible { outline: 2px solid var(--moutarde); outline-offset: 2px; }
/* A phone is already in hand: no « Continuer sur mon téléphone » there. */
@media (pointer: coarse) { .outil-selection--telephone, [data-sel-qr].selection__telephone { display: none !important; } }

/* ---------- Dialogs ---------- */
html.modale-ouverte { overflow: hidden; }
.modale { width: min(1120px, calc(100vw - 48px)); max-width: none; height: min(880px, calc(100dvh - 48px)); max-height: none; padding: 0; border: 0; border-radius: 18px; background: var(--platre); color: var(--anthracite); box-shadow: 0 30px 80px rgba(20, 22, 25, 0.35); overflow: hidden; }
.modale[open] { display: flex; flex-direction: column; }
.modale::backdrop { background: rgba(29, 30, 33, 0.62); }
.modale__barre { display: flex; align-items: center; gap: 0.8rem; min-height: 56px; padding: 0 0.6rem 0 1.2rem; border-bottom: 1px solid var(--trait); background: var(--blanc); flex: none; }
.modale__titre { margin: 0; flex: 1; font: 650 var(--t-md)/1.2 var(--sans); }
.modale__retour { display: none; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.7rem; border: 0; background: none; color: var(--anthracite); font: 600 var(--t-sm)/1 var(--sans); cursor: pointer; }
.modale__fermer { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--anthracite); font: 400 1.8rem/1 var(--sans); cursor: pointer; }
.modale__fermer:hover { background: var(--platre); }
.modale__corps { position: relative; flex: 1; min-height: 0; overflow: auto; }
.modale__corps iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--platre); opacity: 0; transition: opacity 0.2s ease; }
.modale__corps.est-charge iframe { opacity: 1; }
.modale__attente { margin: 0; padding: 2rem 1.4rem; font: 500 var(--t-sm)/1.4 var(--sans); color: var(--feutre); }
.modale--salon .modale__attente { position: absolute; inset: 0 0 auto; }
.modale__corps.est-charge > .modale__attente { display: none; }
/* Phone: the whole screen, a « Retour » on the left like an app. */
@media (max-width: 700px) {
  .modale { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
  .modale__barre { padding: env(safe-area-inset-top, 0px) 0.3rem 0 0.2rem; }
  .modale__retour { display: inline-flex; }
  .modale__titre { font-size: var(--t-sm); text-align: center; }
}
/* QR dialog: a small card. */
.modale--qr { width: min(420px, calc(100vw - 32px)); height: fit-content; }
@media (max-width: 700px) { .modale--qr { width: calc(100vw - 32px); height: fit-content; margin: auto; border-radius: 18px; } .modale--qr .modale__retour { display: none; } }
.modale--qr .modale__corps { padding: 1.4rem 1.4rem 1.2rem; font: 400 var(--t-sm)/1.5 var(--sans); }
.modale--qr .modale__corps p { margin: 0 0 0.8rem; }
.modale__qr { display: grid; place-items: center; width: 240px; aspect-ratio: 1; margin: 0 auto 1.1rem; border-radius: 12px; background: #fff; }
.modale__qr .qr { width: 100%; height: 100%; }
.modale__lien { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.modale__lien [data-qr-retour] { color: var(--vert-ok); font-weight: 500; word-break: break-all; }

/* ---------- Mon salon in the dialog (?cadre=1): the tool alone ---------- */
body.est-cadre .entete, body.est-cadre .pied, body.est-cadre .ariane, body.est-cadre .consentement, body.est-cadre .lien-evitement, body.est-cadre .progression, body.est-cadre .salon__mur { display: none !important; }
body.est-cadre .page-standard__tete { margin-top: 1rem; }
body.est-cadre .page-standard__tete h1 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }
body.est-cadre .page-standard__tete .chapeau { font-size: var(--t-sm); }
.salon__essai { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0; padding: 0.8rem 1rem; border: 1px solid var(--trait); border-left: 4px solid var(--vert-ok); border-radius: 14px; background: var(--blanc); }
.salon__essai.est-trop-grand { border-left-color: var(--rouge-non); }
.salon__essai img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.salon__essai p { margin: 0; }
.salon__essai-nom { font: 650 var(--t-md)/1.3 var(--sans); }
.salon__essai-nom .num { margin-left: 0.3rem; font-weight: 500; color: var(--feutre); white-space: nowrap; }
.salon__essai-verdict { margin-top: 0.2rem !important; font: 600 var(--t-sm)/1.4 var(--sans); color: var(--vert-ok); }
.salon__essai.est-trop-grand .salon__essai-verdict { color: var(--rouge-non); }
@media (max-width: 500px) { .salon__essai img { width: 72px; height: 54px; } }

/* ---------- « Vous aviez gardé N canapés » ---------- */
.rappel-selection { position: fixed; z-index: 45; display: flex; align-items: stretch; max-width: min(340px, calc(100vw - 24px)); border-radius: 14px; background: var(--foret); color: #eeece6; box-shadow: 0 18px 40px -16px rgba(20, 22, 25, 0.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; }
.rappel-selection.est-visible { opacity: 1; visibility: visible; transform: none; }
.rappel-selection::before { content: ""; position: absolute; top: -6px; left: var(--fleche, 20px); width: 12px; height: 12px; background: var(--foret); transform: rotate(45deg); border-radius: 2px; }
.rappel-selection a { position: relative; display: grid; gap: 0.2rem; padding: 0.75rem 0.4rem 0.8rem 1rem; color: inherit; text-decoration: none; font: 400 var(--t-sm)/1.35 var(--sans); }
.rappel-selection strong { font-weight: 700; color: #fff; }
.rappel-selection small { font-size: var(--t-xs); color: #c9c6bd; }
.rappel-selection em { font-style: normal; font-weight: 650; color: var(--moutarde); }
.rappel-selection a:hover em { text-decoration: underline; }
.rappel-selection__fermer { position: relative; flex: none; width: 40px; border: 0; border-radius: 0 14px 14px 0; background: none; color: #c9c6bd; font: 400 1.4rem/1 var(--sans); cursor: pointer; }
.rappel-selection__fermer:hover { color: #fff; }
.rappel-selection--discret a { padding-block: 0.55rem; font-size: var(--t-xs); }
.rappel-selection--discret a { grid-auto-flow: column; align-items: baseline; gap: 0.6rem; }
@media (prefers-reduced-motion: reduce) { .rappel-selection, .modale__corps iframe { transition: none; } }

/* ---------- Printed selection (« Télécharger en PDF », Ctrl+P on /ma-selection/), A4 ----------
   The sheets are added at the end of the body by selection-outils.js; html.qc-impression prints them alone. */
.impression { display: none; }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  html.qc-impression body { background: #fff !important; color: #111; }
  html.qc-impression body > *:not(.impression) { display: none !important; }
  html.qc-impression .impression { display: block; font: 400 9.5pt/1.4 var(--sans); color: #111; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .impression__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 8mm; padding-bottom: 4mm; border-bottom: 1.5pt solid #111; }
  .impression__tete .impression__marque { margin: 0; font: 700 22pt/1 var(--sans); letter-spacing: -0.03em; color: #111; }
  .impression__tete div { text-align: right; }
  .impression__tete h2 { margin: 0; font: 650 13pt/1.2 var(--sans); }
  .impression__tete p { margin: 1mm 0 0; font-size: 9pt; color: #555; }
  .impression__avertissement { margin: 3mm 0 4mm; font-size: 8pt; color: #555; }
  .impression__canape { display: grid; grid-template-columns: 52mm minmax(0, 1fr) 30mm; gap: 5mm; align-items: start; padding: 4mm 0; border-bottom: 0.5pt solid #bbb; break-inside: avoid; page-break-inside: avoid; }
  .impression__photo img { display: block; width: 52mm; height: 39mm; object-fit: cover; border-radius: 2mm; }
  .impression__infos h3 { margin: 0 0 1mm; font: 700 11.5pt/1.25 var(--sans); }
  .impression__infos h3 small { font-weight: 500; color: #555; }
  .impression__prix { margin: 0 0 1mm; font: 700 12pt/1.3 var(--sans); }
  .impression__prix small { font: 400 8pt/1.3 var(--sans); color: #555; }
  .impression__note { margin: 0 0 1.5mm; font-size: 8.5pt; }
  .impression__note strong { font-size: 10.5pt; }
  .impression__note span { color: #333; }
  .impression dl { display: grid; gap: 0.5mm; margin: 0; }
  .impression dl div { display: flex; gap: 2mm; min-width: 0; }
  .impression dt { flex: none; width: 22mm; color: #555; }
  .impression dd { margin: 0; font-weight: 500; }
  .impression dd small { font-weight: 400; color: #777; }
  .impression__qr { text-align: center; }
  .impression__qr [data-qr] { width: 28mm; height: 28mm; margin: 0 auto; }
  .impression__qr .qr { display: block; width: 100%; height: 100%; }
  .impression__qr p { margin: 1mm 0 0; font-size: 6.5pt; line-height: 1.25; color: #333; word-break: break-all; }
  .impression__pied { margin: 5mm 0 0; font-size: 7.5pt; color: #777; }
}
@media (max-width: 700px) { body.est-cadre .page-standard__tete .chapeau { display: none; } body.est-cadre .page-standard__tete h1 { font-size: 1.2rem; } }
.modale:focus { outline: none; }

/* ---------- « Prévenez-moi si le prix baisse » (inc/alertes-prix.php): collection only ---------- */
.alerte-bouton .icone { color: var(--bleu); }
.mesures__salon { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.alerte-bouton--telephone { display: none; }
@media (max-width: 900px) { .alerte-bouton--telephone { display: inline-flex; align-items: center; gap: 0.5rem; } .alerte-bouton--telephone .icone { width: 18px; height: 18px; } }
.modale--alerte { width: min(480px, calc(100vw - 32px)); height: fit-content; }
@media (max-width: 700px) { .modale--alerte { width: calc(100vw - 32px); height: fit-content; margin: auto; border-radius: 18px; } .modale--alerte .modale__retour { display: none; } }
.modale--alerte .modale__corps { padding: 1.2rem 1.4rem 1.3rem; }
.alerte { display: grid; gap: 0.9rem; font: 400 var(--t-sm)/1.5 var(--sans); }
.alerte p { margin: 0; }
.alerte__canapes { margin: 0; padding: 0.6rem 0.8rem 0.6rem 1.8rem; border-radius: 10px; background: var(--blanc); font-weight: 600; max-height: 8.5rem; overflow: auto; }
.alerte__champ { display: grid; gap: 0.3rem; font-weight: 600; }
.alerte__champ input, .alerte__champ select { min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); font: 500 var(--t-md)/1 var(--sans); color: var(--anthracite); }
.alerte__champ input:focus-visible, .alerte__champ select:focus-visible, .alerte__accord input:focus-visible { outline: 2px solid var(--moutarde); outline-offset: 2px; }
.alerte__accord { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--t-xs); color: var(--feutre); }
.alerte__accord input { width: 18px; height: 18px; margin: 0.15rem 0 0; flex: none; accent-color: var(--bleu); }
.alerte__accord a { color: var(--bleu); }
.alerte__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alerte__erreur { min-height: 1.3em; color: var(--rouge-non); font-weight: 600; }
.alerte__erreur:empty { min-height: 0; }
.alerte__envoyer { justify-self: start; }
.alerte--ok strong { color: var(--anthracite); }
@media (max-width: 900px) { .achat__outils .alerte-bouton { display: none; } }

/* ---------- Mon salon: the collections' catalogue under the plan (inc/salon-filtres.php) ---------- */
.salon__catalogue .salon__titre { margin: 0; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem); }
.salon__catalogue .salon__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }
.salon__reste { flex-basis: 100%; margin: 0; min-height: 1.3em; font: 500 var(--t-xs)/1.3 var(--sans); color: var(--feutre); }
.salon__catalogue .salon__actions .bouton { min-height: 38px; padding: 0 0.9rem; }