/* =============================================================================
   layout.css — grilles spécifiques par page
   ========================================================================== */

/* --- Accueil : hero ---------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 560px;
}
.hero-visual { min-height: 360px; }
.hero-content {
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg);
}
.hero-content h1 { font-size: 48px; line-height: 1.12; }
.hero-content h1 em { font-style: italic; color: var(--color-accent-deep); }
.hero-actions { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin-top: var(--space-sm); }
.hero-actions .btn { justify-content: space-between; padding: 20px 24px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 340px; }
  .hero-content { padding: var(--space-lg) var(--space-sm); }
  .hero-content h1 { font-size: 32px; }
}

/* --- Accueil : présentation artisane ------------------------------------ */
.artisan-section {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px;
  padding: var(--space-2xl) var(--space-lg);
  align-items: center;
}
.artisan-section .placeholder-img { height: 420px; }
@media (max-width: 900px) {
  .artisan-section { grid-template-columns: 1fr; padding: var(--space-lg) var(--space-sm); }
}

/* --- Accueil : savoir-faire ---------------------------------------------- */
.savoir-faire { background: var(--color-accent); padding: var(--space-2xl) var(--space-lg); }
.savoir-faire-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.savoir-faire-card { background: var(--color-bg); display: flex; flex-direction: column; }
.savoir-faire-card .placeholder-img { height: 200px; align-items: center; justify-content: center; }
.savoir-faire-card .body { padding: var(--space-md); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 800px) { .savoir-faire-grid { grid-template-columns: 1fr; } }

/* --- Accueil : deux accès -------------------------------------------------*/
.split-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-border); }
.split-cta > div { background: var(--color-bg); padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
@media (max-width: 800px) { .split-cta { grid-template-columns: 1fr; } }

/* --- À propos ---------------------------------------------------------------*/
/* Page en une seule colonne étroite : le contenu est du texte long, la
   largeur de lecture prime sur l'occupation de l'écran. */
.apropos { max-width: 820px; }
.apropos-entete { display: flex; flex-direction: column; gap: 18px; padding: var(--space-lg) 0 var(--space-md); }
.apropos-entete h1 { font-size: 40px; line-height: 1.2; }
.apropos-recit p { font-size: 17px; line-height: 1.9; color: var(--color-text-muted); }
.apropos-formations { margin-top: var(--space-xl); }
.apropos-formations h2 { font-size: 26px; margin-bottom: var(--space-sm); }

/* Une entrée = une ligne réglée. La colonne de gauche accueille l'année,
   absente des lignes saisies sans séparateur (classe .pleine). */
.formation-ligne {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 4px 28px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
}
.formation-ligne:last-child { border-bottom: 1px solid var(--color-border); }
.formation-ligne.pleine { grid-template-columns: 1fr; }
.formation-date { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--color-accent-deep); }
.formation-titre { font-family: var(--font-title); font-size: 18px; line-height: 1.45; }
.formation-lieu { grid-column: 2; font-size: 14px; color: var(--color-text-muted); }

.apropos-cta {
  margin-top: var(--space-xl);
  background: var(--color-accent);
  padding: var(--space-lg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
}
.apropos-cta p { font-size: 15.5px; line-height: 1.75; max-width: 420px; margin-top: 10px; }

@media (max-width: 640px) {
  .apropos-entete h1 { font-size: 30px; }
  .formation-ligne, .formation-ligne.pleine { grid-template-columns: 1fr; gap: 6px; }
  .formation-lieu { grid-column: 1; }
  .apropos-cta { padding: var(--space-md); }
}

/* --- Contact : carte et réseaux sociaux -------------------------------------*/
.carte-lieu { margin: var(--space-md) 0 0; }
.carte-lieu iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 1px solid var(--color-border);
  /* Le fond de carte est clair et lumineux, le reste du site est crème :
     un voile très léger l'accorde sans le rendre illisible. */
  filter: saturate(.88);
}
.carte-lieu figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-sm); flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* Mentions de l'entreprise : présentes sans capter l'attention, elles
   n'intéressent qu'un visiteur qui les cherche. Le bloc disparaît de lui-même
   s'il est vide, faute de contenu à afficher. */
.mentions-legales {
  margin-top: var(--space-md);
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--color-text-faint);
}
.mentions-legales:empty { display: none; }

.reseaux-liste { display: flex; flex-direction: column; gap: 4px; }
.reseau-lien {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Toute la ligne est cliquable, pas seulement le logo : une cible de 20 px
     est difficile à viser au doigt. */
  padding: 9px 10px 9px 0;
  font-size: 15px;
  color: var(--color-text);
  align-self: flex-start;
}
.reseau-lien svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--color-accent-deep); }
.reseau-lien span { border-bottom: 1px solid transparent; }
.reseau-lien:hover { color: var(--color-accent-deep); }
.reseau-lien:hover span { border-bottom-color: currentColor; }
.reseau-lien:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

@media (max-width: 640px) {
  .carte-lieu iframe { height: 240px; }
}

/* --- Pages légales (mentions, confidentialité, CGU et CGV) -----------------*/
/* Largeur volontairement réduite : un texte de loi se lit en colonne étroite,
   pas sur toute la largeur de l'écran. Même parti pris que la page À propos. */
.legal { max-width: 760px; }
.legal-entete { display: flex; flex-direction: column; gap: 14px; padding: var(--space-lg) 0 var(--space-lg); }
.legal-entete h1 { font-size: 36px; line-height: 1.25; }

/* Une rubrique par section, largement espacées : ces pages se parcourent du
   regard pour trouver une information précise, pas en lecture suivie. Le filet
   au-dessus de chaque titre donne le repère visuel qui permet ce balayage. */
.legal-contenu { display: flex; flex-direction: column; gap: var(--space-xl); }
.legal-section { display: flex; flex-direction: column; gap: 14px; }
.legal-section h2 {
  font-size: 19px;
  line-height: 1.35;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.legal-section p { font-size: 16px; line-height: 1.9; color: var(--color-text-muted); }
.legal-section p + p { margin-top: var(--space-sm); }
/* Sous-titre à l'intérieur d'une rubrique, si l'artisane en saisit un avec
   « ## » dans l'administration. */
.legal-section h3 { font-size: 16px; margin-top: var(--space-sm); }
.legal-vide { font-size: 16px; line-height: 1.9; color: var(--color-text-faint); font-style: italic; }
.legal-section[hidden], .legal-vide[hidden], .legal-maj[hidden] { display: none; }

/* Date de mise à jour, annoncée en tête de chaque jeu de conditions. Discrète,
   mais elle doit être là : c'est ce qui permet à un client de savoir quelle
   version il a acceptée. */
.legal-maj {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0;
}

/* Le formulaire de rétractation n'est pas un article, c'est un document à
   recopier. L'encadré le dit sans avoir à l'écrire. */
.legal-encadre {
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  padding: var(--space-md);
}

/* --- Onglets des conditions générales --------------------------------------*/
/* Deux textes qui n'ont ni le même objet ni le même lecteur : la vente d'un
   côté, la simple consultation du site de l'autre. */
.onglets-legal {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}
.onglet-legal {
  border: none;
  background: none;
  cursor: pointer;
  padding: 12px 2px;
  margin-bottom: -1px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.onglet-legal + .onglet-legal { margin-left: var(--space-md); }
.onglet-legal:hover { color: var(--color-text); }
.onglet-legal.actif { color: var(--color-text); font-weight: 500; border-bottom-color: var(--color-accent-deep); }
.onglet-legal:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.volet-legal:focus { outline: none; }

/* À l'impression, les onglets n'ont plus de sens : on déplie tout. Des
   conditions générales s'impriment et se classent, il ne faut pas qu'une
   moitié disparaisse parce qu'elle était derrière un onglet fermé. */
/* --- Facture imprimable -----------------------------------------------------*/
/* Volontairement sobre et dense : c'est un document qu'on classe, pas une page
   qu'on parcourt. */
.facture { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg) 0; }
.facture-actions { display: flex; justify-content: flex-end; }
.facture-entete h1 { font-size: 28px; line-height: 1.2; margin-top: 10px; }
.facture-dates { font-size: 13px; color: var(--color-text-muted); margin: 10px 0 0; }
.facture-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.facture-parties p { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); margin: 8px 0 0; }
.facture-parties h3 { font-size: 14px; margin-top: 8px; }
.facture-lignes { width: 100%; border-collapse: collapse; font-size: 14px; }
.facture-lignes th { text-align: left; font-weight: 500; padding: 8px 0; border-bottom: 1px solid var(--color-text); }
.facture-lignes td { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.facture-lignes .nombre { text-align: right; white-space: nowrap; }
.facture-lignes tfoot td { border-bottom: none; padding: 6px 0; color: var(--color-text-muted); }
.facture-lignes tfoot .total td { font-size: 17px; font-weight: 600; color: var(--color-text); padding-top: 12px; border-top: 1px solid var(--color-border); }
.facture-reglement { font-size: 14px; color: var(--color-text); margin: 0; }
@media (max-width: 600px) { .facture-parties { grid-template-columns: 1fr; } }

@media print {
  /* Ni navigation, ni pied de page, ni bouton d'impression : ils n'ont aucun
     sens sur un document que l'on conserve ou que l'on transmet au comptable. */
  .site-header, .site-footer, .facture-actions { display: none !important; }
  body { background: #fff; }
  .facture { padding: 0; }
}

@media print {
  .onglets-legal { display: none; }
  .volet-legal[hidden] { display: flex !important; }
  .volet-legal + .volet-legal { margin-top: var(--space-xl); }
}

@media (max-width: 640px) {
  .legal-entete h1 { font-size: 27px; }
  .legal-contenu { gap: var(--space-lg); }
}

/* --- Grilles galerie / boutique -------------------------------------------*/
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.gallery-grid .span-2 { grid-column: span 2; }
.gallery-grid .placeholder-img { min-height: 260px; }
/* Hauteur ferme (et non min-height) : le calque photo se dimensionne en % de
   son cadre, ce qui suppose une hauteur définie. Toutes les vignettes
   s'alignent au passage. */
.gallery-grid .card-media { height: 260px; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .span-2 { grid-column: span 1; }
}

.shop-layout { display: grid; grid-template-columns: 248px 1fr; gap: var(--space-lg); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
/* Boutique : la case est carrée quelles que soient les photos, ce qui aligne
   toutes les vignettes de la grille. La photo, elle, garde ses proportions et
   s'affiche en entier, avec du vide de part et d'autre si elle est verticale
   ou panoramique. Un recadrage automatique couperait un pied de lampe ou le
   haut d'un abat-jour selon la photo, sans que personne le décide. */
.shop-grid .card-media {
  aspect-ratio: 1 / 1;
  height: auto;
  /* Le pourtour reprend le fond de la page : la photo semble posée sur le
     site, sans cadre ni aplat rapporté. */
  background: var(--color-bg);
}

/* Au survol, la photo grandit sans jamais être coupée. Pour cela elle est
   très légèrement réduite au repos et reprend sa taille pleine au survol,
   plutôt que de dépasser du cadre et de se faire rogner. Le mouvement est le
   même à l'oeil, mais l'objet reste entier du début à la fin. */
.shop-grid .card-media-img:not(.placeholder-img) {
  background-size: contain;
  transform: scale(.93);
}
.shop-grid .card-media:hover .card-media-img:not(.placeholder-img) {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .shop-grid .card-media:hover .card-media-img:not(.placeholder-img) { transform: scale(.93); }
}
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr; } }

.filter-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space-md); }
.filter-group h3 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-deep); font-weight: 400; }
.filter-row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 4px 0; }
.filter-row.checkbox { justify-content: flex-start; gap: 10px; align-items: center; }

/* Filtre de catégorie de la boutique, dans la colonne de gauche. Un bouton
   dépouillé de son apparence de bouton : c'est une liste de choix, pas une
   rangée de commandes. Seul l'état actif se distingue, par la graisse et par
   le contraste, jamais par la couleur seule. */
.filtre-cat {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-muted);
}
.filtre-cat:hover { color: var(--color-text); }
.filtre-cat.actif { color: var(--color-text); font-weight: 500; }
.filtre-cat:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* --- Fiche produit --------------------------------------------------------*/
.product-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-lg); }
.product-gallery-main { height: 420px; }
.product-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.product-thumbs .placeholder-img { height: 88px; }
.product-price { font-size: 26px; font-weight: 500; }
.qty-input { display: flex; align-items: center; border: 1px solid rgba(27, 42, 65, .22); }
.qty-input button { border: none; background: none; padding: 14px 16px; cursor: pointer; font-size: 15px; }
.qty-input span { padding: 14px 8px; min-width: 24px; text-align: center; }
@media (max-width: 800px) { .product-layout { grid-template-columns: 1fr; } }

/* --- Article vitrine -------------------------------------------------------*/
.article-hero { padding: var(--space-xl) var(--space-lg) 0; text-align: center; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.article-hero h1 { font-size: 44px; max-width: 820px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
/* Réalisation présentée sans avant / après : la photo du résultat s'affiche
   seule, en pleine largeur, et sans étiquette « APRÈS » qui n'aurait plus rien
   à quoi se comparer. */
.before-after.photo-seule { grid-template-columns: 1fr; }
.before-after .placeholder-img { min-height: 420px; align-items: flex-start; }
.article-body { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-xl); padding: 0 var(--space-lg) var(--space-2xl); }
/* Photos de détail d'une réalisation, sous le récit. Même parti pris que la
   boutique : case carrée pour que la grille reste alignée, photo entière à
   l'intérieur, et le vide reprend le fond de la page. Un recadrage couperait
   justement le détail que la photo est censée montrer. */
.section-details { display: flex; flex-direction: column; gap: var(--space-md); padding: 0 var(--space-lg) var(--space-2xl); }
.section-details[hidden] { display: none; }
.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.details-grid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-bg); }
@media (max-width: 900px) { .details-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .details-grid { grid-template-columns: 1fr; } }

.article-meta dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: 4px; }
.article-meta dd { margin: 0 0 var(--space-md); font-size: 14px; }
.article-text p { font-size: 17px; line-height: 1.85; color: var(--color-text-muted); margin-bottom: var(--space-md); }
@media (max-width: 800px) {
  .before-after, .article-body { grid-template-columns: 1fr; padding-left: var(--space-sm); padding-right: var(--space-sm); }
}

/* --- Panier / commande ------------------------------------------------------*/
.cart-line { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 20px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(27, 42, 65, .12); }
.cart-line .placeholder-img { height: 96px; }
@media (max-width: 640px) { .cart-line { grid-template-columns: 64px 1fr; row-gap: 8px; } }
.cart-summary { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-md); }
@media (max-width: 700px) { .cart-summary { grid-template-columns: 1fr; } }
/* Mention de franchise en base, sous chaque prix. Discrète : c'est une
   précision, pas un argument de vente, et elle ne doit pas concurrencer le
   prix qu'elle accompagne. */
/* Pièce réservée au retrait : fond teinté plutôt qu'une ligne grise de plus,
   parce que c'est une restriction et non un détail d'expédition. */
.avis-retrait { margin: 0; padding: 12px 14px; background: var(--color-accent); font-size: 13.5px; line-height: 1.6; }
.mention-tva { font-size: 12.5px; line-height: 1.6; color: var(--color-text-faint); margin: 0; }
.summary-row { display: flex; justify-content: space-between; font-size: 14.5px; }
.summary-total { display: flex; justify-content: space-between; font-size: 19px; font-weight: 500; padding-top: var(--space-xs); border-top: 1px solid rgba(27,42,65,.15); }
.checkout-steps { display: flex; gap: 22px; align-items: center; font-size: 13px; padding: var(--space-md) 0; }
.checkout-steps .line { flex: 1; height: 1px; background: rgba(27,42,65,.15); }
.checkout-steps .step { display: flex; gap: 9px; align-items: center; color: rgba(27,42,65,.45); }
.checkout-steps .step.active { color: var(--color-text); font-weight: 500; }
.checkout-steps .num { width: 22px; height: 22px; border: 1px solid rgba(27,42,65,.3); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.checkout-steps .step.active .num { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }

/* --- Admin ------------------------------------------------------------------*/
.admin-layout { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--color-text); color: var(--color-bg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-lg); }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.admin-sidebar nav a { padding: 12px 14px; color: rgba(244,237,222,.68); }
.admin-sidebar nav a.active { background: rgba(192,212,201,.16); color: var(--color-bg); }
.admin-sidebar .brand { display: flex; flex-direction: column; gap: 6px; }
.admin-sidebar .brand img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 6px; }
.admin-sidebar .account { margin-top: auto; border-top: 1px solid rgba(244,237,222,.16); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.admin-main { padding: 44px 48px; display: flex; flex-direction: column; gap: var(--space-lg); }
.admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.admin-card { padding: 34px; display: flex; flex-direction: column; gap: var(--space-sm); }
.admin-card.highlight { background: var(--color-accent); }
.admin-card.outline { border: 1px solid var(--color-border); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-deep); font-weight: 400; padding: 10px 0; border-bottom: 1px solid rgba(27,42,65,.15); }
.admin-table td { padding: 14px 0; border-top: 1px solid rgba(27,42,65,.12); font-size: 14.5px; vertical-align: middle; }
.admin-table img.thumb { width: 52px; height: 52px; object-fit: cover; background: var(--color-placeholder-a); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--color-bg); border: 1px solid var(--color-border); font-size: 13.5px; }
.tag-pill.add { border-style: dashed; color: var(--color-text-muted); cursor: pointer; }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-sm); }
  .admin-sidebar nav, .admin-sidebar .account { display: none; }
  .admin-main { padding: var(--space-sm); }
  .admin-cards { grid-template-columns: 1fr; }
}

.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-sm); }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-md); text-align: center; }

/* --- Tunnel de commande ----------------------------------------------------*/
/* Choix à bouton radio. Classe dédiée, et non .filter-row, qui est faite pour
   la colonne de filtres de la boutique : celle-ci écarte ses deux éléments aux
   extrémités de la ligne, ce qui éloignait le bouton de son libellé. */
.liste-choix { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.choix-radio {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 4px 0;
  cursor: pointer;
}
/* Sans cela, le rond se comprime quand le libellé passe sur deux lignes. */
.choix-radio input { flex: 0 0 auto; margin: 0; }

/* Acceptation des conditions de vente, juste au-dessus du bouton qui engage le
   paiement. Alignée en haut et non au centre : le libellé passe sur deux lignes
   en écran étroit, et une case centrée verticalement flotterait alors loin de
   son premier mot. */
.choix-cgv {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
  padding: 4px 0;
}
.choix-cgv input { flex: 0 0 auto; margin: 3px 0 0; accent-color: var(--color-accent-deep); }
.choix-cgv a { text-decoration: underline; }

/* Les deux modes de récupération annoncés dès le panier. */
.modes-recuperation { display: flex; flex-direction: column; gap: var(--space-sm); }
.modes-recuperation .mode-titre { font-family: var(--font-title); font-size: 16px; display: block; margin-bottom: 4px; }
.modes-recuperation p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }
.modes-recuperation div p + p { margin-top: 6px; }
.modes-recuperation .mode-note { font-size: 12.5px; color: var(--color-text-faint); }
/* Mode de récupération impossible pour ce panier. Barré et non supprimé : le
   client doit comprendre qu'une option existe et pourquoi elle lui est fermée,
   plutôt que de ne jamais la voir. Même parti pris sur la page de commande. */
.modes-recuperation .mode-indisponible .mode-titre { color: var(--color-text-faint); text-decoration: line-through; }
.choix-radio.choix-indisponible { color: var(--color-text-faint); }
.choix-radio.choix-indisponible span { text-decoration: line-through; }