/* ============================================================
   SantExpo 2026 au gabarit V10 — ce que css/v10.css n'a pas.
   Chargée APRÈS v10.css, sur /santexpo-2026 et /fr/santexpo-2026 (aperçu :
   /preview/campagnes-v10/santexpo-2026/ et /preview/campagnes-v10/fr/santexpo-2026/).
   Deux blocs seulement : la mosaïque de photos du stand dans l'en-tête, et le logo du salon.
   ============================================================ */

/* L'en-tête : quatre photos du stand, en mosaïque. Chaque image est contrainte en largeur ET en
   hauteur par la grille (width/height 100 %, object-fit) : les attributs HTML ne portent que le
   ratio, ils ne peuvent pas figer une taille (CLAUDE.md, piège 8). */
.sx-mosaique{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;aspect-ratio:5/4}
.sx-mosaique img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:1px solid var(--line-d);background:rgba(255,255,255,.04)}
.sx-mosaique .sx-a{grid-column:1/3;grid-row:1}
.sx-mosaique .sx-b{grid-column:3;grid-row:1/3}
.sx-mosaique .sx-c{grid-column:1;grid-row:2}
.sx-mosaique .sx-d{grid-column:2;grid-row:2}
@media (max-width:640px){.sx-mosaique{gap:6px}.sx-mosaique img{border-radius:12px}}

/* la date et le stand, au-dessus du titre */
.sx-quand{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line-d);font-size:13px;font-weight:600;color:var(--tx)}
.sx-quand svg{flex:none;width:16px;height:16px;color:var(--blue-l)}

/* les rangées de boutons qui suivent un texte de section */
.sx-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sx-row .btn{height:48px;font-size:14.5px}
.light .sx-row .btn--solid{background:var(--ink);color:var(--tx)}

/* photos et captures dans un v-duo : un cadre, et la capture produit garde son fond blanc */
.sx-fig{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line-l);background:#fff}
.sx-fig img{width:100%;height:auto}
.v-sec:not(.light) .sx-fig{border-color:var(--line-d);background:var(--fond)}
.sx-fig--photo{aspect-ratio:4/3}
.sx-fig--photo img{height:100%;object-fit:cover}

/* le logo du salon, au-dessus du titre « Qu'est-ce que SantExpo ? » */
.sx-logo{display:block;width:220px;max-width:60%;height:auto;margin:0 0 26px}

/* la newsletter : le formulaire dans la bande d'appel */
.sx-nl form{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;max-width:520px}
.sx-nl input[type=email]{flex:1 1 240px;height:48px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--tx);font-size:15px}
.sx-nl input[type=email]::placeholder{color:var(--dim-2)}
.sx-nl input[type=email]:focus{outline:none;border-color:var(--blue-l);box-shadow:0 0 0 3px rgba(71,154,243,.2)}
.sx-nl .btn{height:48px}
.sx-nl .w-form-done{margin-top:16px;max-width:520px}
.sx-nl .w-form-fail{color:#ffb4ab}
.sx-nl > div:first-child{flex:1 1 360px;min-width:0}

/* deux sections claires qui se suivent (logos puis « Pourquoi », FAQ puis newsletter) : une seule marge
   entre elles, sinon le vide double et la page a l'air de s'arrêter */
.v-sec.light + .v-sec.light{padding-top:0}