/* =============================================================================
   Boutique Agence Bouillot — vitrine NOIR & BLANC, direction « Apple ».
   Apparence uniquement : toutes les classes ciblées par cart.js / antivol.js
   sont conservées (restylées). Le moteur (recherche, panier, checkout) est intact.
   ========================================================================== */

:root {
  --noir: #0a0a0a;
  --blanc: #ffffff;
  --fond: #ffffff;
  --fond-doux: #f5f5f7;
  --texte: #111113;
  --texte-doux: #6b6b72;
  --bordure: #e7e7ea;
  --rayon: 14px;
  --rayon-l: 20px;
  --ombre: 0 6px 30px rgba(0, 0, 0, 0.08);
  --trans: .22s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--noir); text-decoration: none; transition: color var(--trans), opacity var(--trans); }
.pic { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

.conteneur { max-width: 1120px; margin: 0 auto; padding: 36px 22px 72px; }

/* ─── Header noir ──────────────────────────────────────────────────────────── */
.hdr { background: var(--noir); color: #fff; }
.hdr-in { max-width: 1120px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hdr-logo { display: inline-flex; align-items: center; }
.hdr-logo-img { height: 38px; width: auto; display: block; }
.hdr-logo-txt { color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .2px; }
.hdr-contacts { display: flex; gap: 10px; }
.hdr-act { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .82); font-size: 13.5px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; transition: background var(--trans), color var(--trans); }
.hdr-act:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ─── Barre de navigation ─────────────────────────────────────────────────── */
.navbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--bordure); }
.navbar-in { max-width: 1120px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 18px; min-height: 58px; }
.nav-liens { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav-liens a { display: inline-block; padding: 9px 14px; font-size: 15px; color: var(--texte-doux); border-radius: 999px; transition: color var(--trans), background var(--trans); }
.nav-liens a:hover { color: var(--noir); }
.nav-liens a.actif { color: var(--noir); font-weight: 600; }
.nav-liens a.actif::after { content: ""; display: block; height: 2px; background: var(--noir); border-radius: 2px; margin: 5px 12px 0; }
.nav-recherche { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--fond-doux); border: 1px solid transparent; border-radius: 999px; padding: 0 14px; color: var(--texte-doux); transition: border-color var(--trans), background var(--trans); }
.nav-recherche:focus-within { background: #fff; border-color: var(--noir); }
.nav-recherche input { border: none; background: none; outline: none; font: inherit; font-size: 14.5px; padding: 10px 2px; width: 240px; max-width: 42vw; color: var(--texte); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-recherche + .nav-actions { margin-left: 12px; }
.nav-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--noir); transition: background var(--trans); }
.nav-icone:hover { background: var(--fond-doux); }
.badge-panier { position: absolute; top: 4px; right: 2px; background: var(--noir); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nav-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; }
.nav-burger span { width: 22px; height: 2px; background: var(--noir); border-radius: 2px; transition: transform var(--trans), opacity var(--trans); }

/* ─── Carrousel d'événements (pleine largeur) ─────────────────────────────── */
.carrousel { position: relative; width: 100vw; margin: -36px 0 8px calc(50% - 50vw); height: 460px; overflow: hidden; background: var(--noir); }
.carr-piste { height: 100%; }
.carr-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.carr-slide.actif { opacity: 1; pointer-events: auto; }
.carr-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
.carr-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%); }
.carr-overlay { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 22px 64px; color: #fff; }
.carr-titre { font-size: 42px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; max-width: 760px; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.carr-meta { font-size: 16px; color: rgba(255,255,255,.9); margin: 0 0 20px; display: flex; gap: 8px; align-items: center; }
.carr-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px 5px 11px; border-radius: 999px; margin-bottom: 14px; backdrop-filter: blur(6px); }
.carr-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.carr-badge.encours::before { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .25); }
.carr-badge.avenir::before { background: #ffd60a; }
.carr-btn { align-self: flex-start; background: var(--noir); color: #fff !important; border: 1px solid rgba(255, 255, 255, .4); transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .2s ease, box-shadow .28s ease; }
.carr-btn:hover, .carr-btn:focus, .carr-btn:active { background: #fff; color: var(--noir) !important; border-color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.carr-fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,.18); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: background var(--trans); }
.carr-fleche:hover { background: rgba(255,255,255,.34); }
.carr-fleche.prev { left: 18px; } .carr-fleche.next { right: 18px; }
.carr-puces { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 3; display: flex; gap: 8px; justify-content: center; }
.carr-puce { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: width var(--trans), background var(--trans); }
.carr-puce.actif { width: 24px; border-radius: 999px; background: #fff; }

/* ─── Titres ──────────────────────────────────────────────────────────────── */
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 36px 0 16px; }
.sous-titre { color: var(--texte-doux); margin-top: 0; font-size: 17px; }
.section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 44px 0 18px; }
.section-titre h2 { margin: 0; }

/* ─── Grille de galeries (vignettes avec couverture) ──────────────────────── */
.grille-galeries { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.section-cta { display: flex; justify-content: center; margin: 34px 0 8px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 999px; border: 1px solid var(--bordure); background: transparent; color: var(--texte); font-weight: 500; text-decoration: none; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.btn-ghost:hover, .btn-ghost:focus { background: var(--noir); color: #fff; border-color: var(--noir); transform: translateY(-2px); }
.carte-galerie { display: block; border: 1px solid var(--bordure); border-radius: var(--rayon-l); overflow: hidden; background: var(--fond); color: var(--texte); transition: box-shadow var(--trans), transform var(--trans); }
.carte-galerie:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.cg-cover { position: relative; aspect-ratio: 3 / 4; background: var(--fond-doux); overflow: hidden; }
/* Badge d'état (En cours / À venir / Terminé) en coin de la vignette */
.cg-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); }
.cg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.cg-badge.encours::before { background: #34c759; }
.cg-badge.avenir::before { background: #ffd60a; }
.cg-badge.termine { color: rgba(255, 255, 255, .85); }
.cg-badge.termine::before { background: #8e8e93; }

/* ─── Page « Tous les événements » (/evenements) ──────────────────────────── */
.evt-page .section-titre { margin-top: 8px; }
.evt-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 18px; padding: 16px; border: 1px solid var(--bordure); border-radius: var(--rayon-l); background: var(--fond); }
.evt-recherche { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 200px; padding: 0 14px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--fond-doux); color: var(--texte-doux); }
.evt-recherche input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--texte); font: inherit; font-size: 15px; padding: 12px 2px; }
.evt-scopes { display: inline-flex; gap: 4px; padding: 4px; background: var(--fond-doux); border-radius: 999px; }
.evt-scope { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--texte-doux); cursor: pointer; transition: background .2s ease, color .2s ease; white-space: nowrap; }
.evt-scope input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.evt-scope.actif,
.evt-scope:has(input:checked) { background: var(--noir); color: #fff; }
.evt-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.evt-compte { color: var(--texte-doux); font-size: 14px; margin: 0 2px 18px; }
.evt-vide { margin: 36px 0; text-align: center; }
.pgn-lien { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--bordure); color: var(--texte); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
a.pgn-lien:hover { background: var(--noir); color: #fff; border-color: var(--noir); }
.pgn-lien.off { opacity: .4; pointer-events: none; }
.pgn-pos { color: var(--texte-doux); font-size: 14px; padding: 0 6px; }

/* ─── Page « Nous contacter » ─────────────────────────────────────────────── */
.ct-hero { position: relative; width: 100vw; margin: -36px 0 26px calc(50% - 50vw); min-height: 260px; background-size: cover; background-position: center; background-image: radial-gradient(120% 140% at 20% 0%, #232328 0%, #0b0b0d 70%); display: flex; align-items: flex-end; }
.ct-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .5)); }
.ct-hero-in { position: relative; z-index: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 22px 30px; }
.ct-hero-in h1 { color: #fff; margin: 0; font-size: 40px; letter-spacing: -.02em; }
.ct-bandeau { border-radius: var(--rayon-l); padding: 14px 18px; margin: 0 0 22px; font-size: 15px; }
.ct-bandeau.succes { background: #e7f7ee; color: #186a3b; border: 1px solid #b6e3c8; }
.ct-bandeau.erreur { background: #fdecec; color: #98271f; border: 1px solid #f4c4c0; }
.ct-grille { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: stretch; }
.ct-form-col h2 { margin: 0 0 18px; }
.ct-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ct-form-col .champ { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.ct-form-col label { font-weight: 500; font-size: 14px; }
.ct-form-col input[type=text], .ct-form-col input[type=email], .ct-form-col select, .ct-form-col textarea { width: 100%; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond); color: var(--texte); font: inherit; font-size: 15px; padding: 12px 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.ct-form-col input:focus, .ct-form-col select:focus, .ct-form-col textarea:focus { border-color: var(--noir); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
/* Select façon Apple : pas de rendu natif + chevron SVG custom */
.ct-form-col select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.ct-form-col select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.ct-form-col textarea { resize: vertical; min-height: 130px; }
.champ-rgpd label { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: var(--texte-doux); cursor: pointer; }
.champ-rgpd input { margin-top: 3px; flex: 0 0 auto; }
.champ.en-erreur input, .champ.en-erreur select, .champ.en-erreur textarea { border-color: #d33; }
.champ-err { color: #c0392b; font-size: 13px; }
.ct-info-col { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ct-carte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 18px; border: 1px solid var(--bordure); border-radius: var(--rayon-l); background: var(--fond); }
.ct-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--fond-doux); display: inline-flex; align-items: center; justify-content: center; color: var(--texte); }
.ct-carte-t { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.ct-carte a { color: var(--texte); text-decoration: none; }
.ct-carte a:hover { text-decoration: underline; }
.ct-reseaux { display: flex; justify-content: center; gap: 12px; margin-top: 4px; padding: 4px 2px; }
.ct-reseau { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordure); display: inline-flex; align-items: center; justify-content: center; color: var(--texte); transition: background .2s ease, color .2s ease, transform .2s ease; }
.ct-reseau:hover { background: var(--noir); color: #fff; transform: translateY(-2px); }

/* ─── Actualités : liste magazine + cartes ────────────────────────────────── */
.actu-carte { display: block; color: var(--texte); text-decoration: none; border: 1px solid var(--bordure); border-radius: var(--rayon-l); overflow: hidden; background: var(--fond); transition: box-shadow var(--trans), transform var(--trans); }
.actu-carte:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.actu-cover { aspect-ratio: 16 / 10; background: var(--fond-doux); overflow: hidden; }
.actu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.actu-carte:hover .actu-cover img { transform: scale(1.04); }
.actu-ph { width: 100%; height: 100%; background: radial-gradient(120% 140% at 20% 0%, #ececec, #f7f7f7); }
.actu-body { padding: 18px 20px 22px; }
.actu-date { font-size: 13px; color: var(--texte-doux); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.actu-titre { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.actu-extrait { margin: 0; color: var(--texte-doux); font-size: 15px; line-height: 1.5; }
.actu-grille { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 24px; }
.actu-accueil { margin-top: 8px; }
/* Article vedette : grande carte image + texte côte à côte */
.actu-carte.vedette { display: grid; grid-template-columns: 1.5fr 1fr; align-items: stretch; margin-bottom: 8px; }
.actu-carte.vedette .actu-cover { aspect-ratio: auto; height: 100%; min-height: 340px; }
.actu-carte.vedette .actu-body { align-self: center; padding: 34px 38px; }
.actu-carte.vedette .actu-titre { font-size: 30px; letter-spacing: -.01em; }
.actu-carte.vedette .actu-extrait { font-size: 16px; }

/* ─── Article : lecture immersive ─────────────────────────────────────────── */
.art-hero { position: relative; width: 100vw; margin: -36px 0 0 calc(50% - 50vw); min-height: 380px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.art-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .6)); }
.art-hero-sans { background-image: radial-gradient(120% 140% at 20% 0%, #232328 0%, #0b0b0d 70%); min-height: 260px; }
.art-hero-in { position: relative; z-index: 1; max-width: 820px; width: 100%; margin: 0 auto; padding: 0 22px 36px; }
.art-date { color: rgba(255, 255, 255, .85); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.art-titre { color: #fff; margin: 0; font-size: 42px; line-height: 1.12; letter-spacing: -.02em; }
.art-corps { max-width: 720px; margin: 40px auto 0; font-size: 18px; line-height: 1.75; color: #2a2a2c; }
.art-corps h2 { font-size: 26px; margin: 38px 0 14px; letter-spacing: -.01em; }
.art-corps h3 { font-size: 21px; margin: 30px 0 12px; }
.art-corps p { margin: 0 0 20px; }
.art-corps ul, .art-corps ol { margin: 0 0 20px; padding-left: 24px; }
.art-corps li { margin: 6px 0; }
.art-corps a { color: var(--noir); text-decoration: underline; text-underline-offset: 2px; }
.art-corps img { max-width: 100%; height: auto; border-radius: var(--rayon-l); margin: 12px 0 24px; display: block; }
.art-corps blockquote { margin: 24px 0; padding: 6px 20px; border-left: 3px solid var(--noir); color: var(--texte-doux); font-style: italic; }
.art-corps code { background: var(--fond-doux); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.art-corps hr { border: none; border-top: 1px solid var(--bordure); margin: 32px 0; }
.art-retour { max-width: 720px; margin: 36px auto 0; }

/* ─── Pages légales (page texte sobre centrée) ────────────────────────────── */
.legal-page { max-width: 760px; margin: 0 auto; padding-top: 4px; }
.legal-page .section-titre { margin: 8px 0 4px; }
.legal-page .art-corps { max-width: none; margin: 18px 0 0; }
.cg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.carte-galerie:hover .cg-cover img { transform: scale(1.05); }
.cg-ph { width: 100%; height: 100%; background: linear-gradient(135deg, #ececef, #f6f6f8); }
.cg-body { padding: 18px 20px 20px; }
.cg-body h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.carte-galerie .meta { color: var(--texte-doux); font-size: 14px; }

/* ─── Recherche (galerie / nav) ───────────────────────────────────────────── */
.recherche { display: flex; gap: 10px; margin: 22px 0 30px; flex-wrap: wrap; }
.recherche input { flex: 1; min-width: 220px; padding: 14px 18px; font-size: 16px; border: 1px solid var(--bordure); border-radius: 999px; background: var(--fond-doux); transition: border-color var(--trans), background var(--trans); }
.recherche input:focus { outline: none; border-color: var(--noir); background: #fff; }

/* ─── Grille de photos (galerie) ──────────────────────────────────────────── */
.grille-photos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.carte-photo { border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; background: var(--fond); transition: box-shadow var(--trans); }
.carte-photo:hover { box-shadow: var(--ombre); }
.carte-photo .vignette { position: relative; aspect-ratio: 3 / 2; background: var(--fond-doux); }
.carte-photo .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-photo .infos { padding: 13px 15px 4px; }
.carte-photo .infos .ref { font-weight: 600; font-size: 14.5px; }
.carte-photo .infos .det { color: var(--texte-doux); font-size: 13px; }
.carte-photo .ajout { padding: 8px 15px 16px; }

/* ─── Sélecteurs + boutons ────────────────────────────────────────────────── */
select { font-family: inherit; font-size: 15px; width: 100%; padding: 11px 14px; border: 1px solid var(--bordure); border-radius: 12px; margin-bottom: 10px; background: #fff; cursor: pointer; }
select:focus { outline: none; border-color: var(--noir); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: none; background: var(--noir); color: #fff; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; font-family: inherit; transition: transform var(--trans), opacity var(--trans), background var(--trans); }
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.98); }
.btn.plein { width: 100%; }
.btn.secondaire { background: var(--fond-doux); color: var(--noir); }
.btn.secondaire:hover { background: #ececef; opacity: 1; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ─── Panier ──────────────────────────────────────────────────────────────── */
.ligne-panier { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.ligne-panier .vign { width: 92px; height: 60px; object-fit: cover; border-radius: 10px; background: var(--fond-doux); }
.ligne-panier .desc { flex: 1; }
.ligne-panier .prix { font-weight: 600; }
.total-panier { display: flex; justify-content: space-between; font-size: 22px; font-weight: 700; margin: 22px 0; }
.total-panier.sous { font-size: 15px; font-weight: 500; margin: 6px 0; color: var(--texte-doux); }
.total-panier.remise span { color: #1f8a4c; }
.ligne-pays { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.ligne-pays label { font-weight: 600; }
.ligne-pays select { padding: 11px 14px; font: inherit; font-size: 15px; border-radius: 12px; min-width: 210px; margin: 0; width: auto; }

/* Paiement intégré (Payment Element) — carte sombre dédiée sur la page panier claire. */
.carte-paiement { margin-top: 26px; padding: 22px; background: #131316; color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; }
.carte-paiement .cp-titre { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #fff; }
#stripe-address { margin-bottom: 22px; }
.cp-erreur { margin: 14px 0 0; padding: 11px 14px; border-radius: 12px; background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .4); color: #ff9b9b; font-size: 14px; }
.cp-payer { width: 100%; margin-top: 18px; background: #fff; color: #0b0b0d; border: none; }
.cp-payer:hover { opacity: .92; }
.cp-payer:disabled, .cp-payer.charge { opacity: .7; cursor: progress; }
.cp-repli { margin: 14px 0 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .55); }
.lien-repli { background: none; border: none; padding: 0; font: inherit; color: rgba(255, 255, 255, .8); text-decoration: underline; cursor: pointer; }
.lien-repli:hover { color: #fff; }
.ligne-code { display: flex; gap: 8px; align-items: center; margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.ligne-code input { flex: 1; padding: 12px 14px; font: inherit; font-size: 15px; border: 1px solid var(--bordure); border-radius: 12px; }
.code-msg { font-size: 13px; margin: 2px 0 6px; }
.code-msg.ok { color: #1f8a4c; }
.code-msg.ko { color: #c0392b; }

/* ─── Protection anti-vol (active seulement si <body data-antivol="1">) ─────── */
@media print {
  body[data-antivol="1"] .grille-photos,
  body[data-antivol="1"] .carte-photo img,
  body[data-antivol="1"] .carte-galerie img,
  body[data-antivol="1"] .lb-img { display: none !important; }
}
body.antivol-cache .grille-photos,
body.antivol-cache .carte-photo img,
body.antivol-cache .carte-galerie img,
body.antivol-cache .lb-img { filter: blur(20px); transition: filter .12s ease; }

/* ─── Formulaire (paiement) ───────────────────────────────────────────────── */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--texte-doux); }
.champ input[type=text], .champ input[type=email], .champ input[type=tel] { width: 100%; padding: 13px 15px; font-size: 16px; border: 1px solid var(--bordure); border-radius: 12px; transition: border-color var(--trans); }
.champ input:focus { outline: none; border-color: var(--noir); }
.champ-case { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--texte-doux); }

/* ─── Messages ────────────────────────────────────────────────────────────── */
.alerte { padding: 14px 16px; border-radius: 12px; margin: 16px 0; font-size: 15px; }
.alerte.info { background: var(--fond-doux); color: var(--texte); }
.alerte.succes { background: #e8f7ee; color: #146c2e; }
.alerte.erreur { background: #fdeceb; color: #8c1d18; }

/* ─── Confirmation ────────────────────────────────────────────────────────── */
.confirmation { text-align: center; padding: 48px 0; }
.confirmation .coche { width: 80px; height: 80px; border-radius: 50%; background: var(--noir); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 20px; animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ─── Bannière galerie + message ──────────────────────────────────────────── */
.banniere-accueil { max-width: 1120px; margin: 22px auto 0; padding: 0 22px; }
.banniere-accueil img { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--rayon-l); display: block; }
.banniere-galerie { margin: 0 0 22px; border-radius: var(--rayon-l); overflow: hidden; }
.banniere-galerie img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.galerie-accueil { font-size: 16px; color: var(--texte-doux); margin: 0 0 18px; }

/* ─── Portes d'accès (18+ / PIN) ──────────────────────────────────────────── */
.porte { max-width: 480px; margin: 56px auto; text-align: center; }
.porte-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 24px; }
.pin-input { font-size: 24px; letter-spacing: 8px; text-align: center; padding: 14px 16px; border: 1px solid var(--bordure); border-radius: 14px; width: 230px; }
.pin-input:focus { outline: none; border-color: var(--noir); }

/* ─── Galerie « à venir » ─────────────────────────────────────────────────── */
.badge-bientot { display: inline-block; vertical-align: middle; margin-left: 8px; background: var(--noir); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em; }
.bientot { max-width: 640px; margin: 36px auto; text-align: center; }
.bientot-badge { display: inline-block; background: var(--noir); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 999px; margin-bottom: 14px; letter-spacing: .04em; }
/* Liste d'attente : formulaire d'inscription sur la page « à venir ». */
.attente-form { max-width: 440px; margin: 22px auto 0; text-align: left; }
.attente-form > label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; text-align: center; }
.attente-row { display: flex; gap: 8px; }
.attente-row input { flex: 1; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond); color: var(--texte); outline: none; }
.attente-row input:focus { border-color: var(--noir); }
.attente-row .btn { white-space: nowrap; }
.attente-rgpd { margin: 10px 2px 0; text-align: center; }
.attente-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.attente-ok { max-width: 460px; margin: 22px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; background: var(--fond-doux); border-radius: 14px; font-size: 15px; font-weight: 500; }
.attente-ok-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--noir); color: #fff; font-size: 14px; flex-shrink: 0; }
@media (max-width: 480px) { .attente-row { flex-direction: column; } .attente-row .btn { width: 100%; } }

/* ─── Page « bientôt » (Actualités / Contact / Mentions légales) ──────────── */
.page-bientot { max-width: 620px; margin: 70px auto; text-align: center; }
.page-bientot .pastille { width: 64px; height: 64px; border-radius: 50%; background: var(--fond-doux); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--noir); }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.pied { background: var(--noir); color: rgba(255, 255, 255, .72); margin-top: 60px; }
.pied-in { max-width: 1120px; margin: 0 auto; padding: 52px 22px 32px; display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pied-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; font-weight: 600; }
.pied-col a { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); font-size: 14.5px; padding: 5px 0; transition: color var(--trans); }
.pied-col a:hover { color: #fff; }
.pied-logo { display: block; text-align: center; }
.pied-logo-img { height: 90px; width: auto; max-width: 100%; }
.pied-logo-txt { color: #fff; font-weight: 700; font-size: 18px; }
.pied-tagline { font-size: 14px; color: rgba(255, 255, 255, .6); margin: 14px 0 0; max-width: 280px; }
.pied-reseaux { display: flex; gap: 10px; }
.pied-reseaux a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; }
.pied-reseaux a:hover { background: rgba(255, 255, 255, .12); }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, .12); }
.pied-bas p { max-width: 1120px; margin: 0 auto; padding: 20px 22px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }

/* ═══ Page galerie — thème SOMBRE (scopé body[data-page="galerie"]) ═══════════ */
body[data-page="galerie"] { background: #0b0b0d; color: #ececef; }
body[data-page="galerie"] a { color: #fff; }
body[data-page="galerie"] .navbar { background: #0a0a0a; backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .08); }
body[data-page="galerie"] .nav-liens a { color: rgba(255, 255, 255, .72); }
body[data-page="galerie"] .nav-liens a:hover, body[data-page="galerie"] .nav-liens a.actif { color: #fff; }
body[data-page="galerie"] .nav-liens a.actif::after { background: #fff; }
body[data-page="galerie"] .nav-icone { color: #fff; }
body[data-page="galerie"] .nav-icone:hover { background: rgba(255, 255, 255, .1); }
body[data-page="galerie"] .badge-panier { background: #fff; color: #0b0b0d; }
body[data-page="galerie"] .nav-burger span { background: #fff; }
body[data-page="galerie"] .sous-titre { color: rgba(255, 255, 255, .6); }
body[data-page="galerie"] h1 { color: #fff; }

/* Bannière immersive */
.gal-hero { position: relative; width: 100vw; margin: -36px 0 0 calc(50% - 50vw); min-height: 360px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.gal-hero-sans { min-height: 220px; background: radial-gradient(120% 140% at 20% 0%, #232328 0%, #0b0b0d 70%); }
.gal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,.2) 0%, rgba(11,11,13,.5) 55%, #0b0b0d 100%); }
.gal-hero-in { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; width: 100%; padding: 0 22px 38px; }
.gal-hero-in h1 { font-size: 44px; letter-spacing: -.02em; margin: 0 0 12px; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.gal-hero-meta { display: flex; gap: 20px; flex-wrap: wrap; color: rgba(255, 255, 255, .85); font-size: 15px; }
.gal-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }

/* Barre d'actions */
.gal-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.gal-compteur { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.gal-actions { display: flex; gap: 8px; }
.gal-act { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--trans); }
.gal-act:hover { background: rgba(255, 255, 255, .12); }
.gal-act.actif { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }
.gal-act.actif svg { stroke: #ff2d55; fill: #ff2d55; }
.gal-act-reel { background: #fff; color: #111113; border-color: #fff; font-weight: 600; }
.gal-act-reel:hover { background: rgba(255, 255, 255, .85); }
.gal-act-reel svg { stroke: #111113; }

/* Recherche sombre (sur la page) */
.gal-recherche { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 0 18px; margin: 16px 0 30px; color: rgba(255, 255, 255, .55); transition: border-color var(--trans); }
/* Reste sombre au focus, juste la bordure s'éclaire ; texte saisi blanc éclatant. */
.gal-recherche:focus-within { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); }
/* Reste sombre dans TOUS les états (focus/active/autofill inclus) ; texte blanc. */
.gal-recherche input,
.gal-recherche input:focus,
.gal-recherche input:focus-visible,
.gal-recherche input:active,
.gal-recherche input:hover { flex: 1; min-width: 0; border: none; background: none !important; outline: none; color: #fff; caret-color: #fff; font: inherit; font-size: 16px; padding: 15px 2px; }
.gal-recherche input::placeholder { color: rgba(255, 255, 255, .45); }
/* Neutralise le fond blanc imposé par l'autofill du navigateur. */
.gal-recherche input:-webkit-autofill,
.gal-recherche input:-webkit-autofill:hover,
.gal-recherche input:-webkit-autofill:focus,
.gal-recherche input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #15151a inset; box-shadow: 0 0 0 1000px #15151a inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Autocomplétion (panneau de suggestions sombre) */
.gal-recherche-wrap { position: relative; margin: 16px 0 30px; }
.gal-recherche-wrap .gal-recherche { margin: 0; }
.ac-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 6px; background: #16161a; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; box-shadow: 0 16px 44px rgba(0, 0, 0, .55); max-height: 300px; overflow: auto; }
.ac-item { padding: 11px 14px; border-radius: 9px; cursor: pointer; color: rgba(255, 255, 255, .82); font-size: 15px; }
.ac-item:hover, .ac-item.actif { background: rgba(255, 255, 255, .1); color: #fff; }
.ac-item strong { color: #fff; font-weight: 700; }

/* Pagination (sombre, façon admin) */
.pgn { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 36px 0 8px; }
.pgn-num, .pgn-fl { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 11px; border-radius: 10px; font-size: 14px; color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); transition: background var(--trans), color var(--trans); }
a.pgn-num:hover, a.pgn-fl:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pgn-num.actif { background: #fff; color: #0b0b0d; border-color: #fff; font-weight: 700; }
.pgn-fl.off { opacity: .35; pointer-events: none; }
.pgn-ell { color: rgba(255, 255, 255, .5); padding: 0 4px; }

/* Cœur favori sur les vignettes (injecté par lightbox.js) */
.fav-coeur { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background .2s, transform .15s; }
.fav-coeur:hover { background: rgba(0, 0, 0, .65); transform: scale(1.08); }
.fav-coeur svg { fill: none; stroke: #fff; stroke-width: 2; }
.fav-coeur.actif svg { fill: #ff2d55; stroke: #ff2d55; }

/* Visionneuse (lightbox) */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8, 8, 10, .92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
/* CRITIQUE : l'attribut hidden doit l'emporter sur display:flex (sinon la
   lightbox/le panneau s'affichent d'office et le bouton fermer semble KO). */
.lb[hidden], .lb-panel[hidden], .lb-panel-overlay[hidden] { display: none !important; }
.lb-scene { margin: 0; max-width: 92vw; max-height: 80vh; display: flex; }
.lb-img { max-width: 92vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 18px; box-shadow: 0 30px 90px rgba(0, 0, 0, .7); display: block; }
.lb-haut { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 18px 22px; color: #fff; }
.lb-compteur { font-size: 14px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.lb-ref { font-size: 15px; font-weight: 600; }
.lb-x { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s; }
.lb-x:hover { background: rgba(255, 255, 255, .22); }
.lb-fleche { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .1); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .2s; }
.lb-fleche:hover { background: rgba(255, 255, 255, .24); }
.lb-fleche.prev { left: 18px; } .lb-fleche.next { right: 18px; }
.lb-barre { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; align-items: center; background: rgba(20, 20, 24, .72); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 7px; backdrop-filter: blur(10px); }
.lb-act { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; border: none; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s, opacity .2s; }
.lb-act:hover { background: rgba(255, 255, 255, .12); }
.lb-act.lb-acheter { background: #fff; color: #0b0b0d; }
.lb-act.lb-acheter:hover { background: #fff; opacity: .9; }
.lb-act.lb-diapo.actif { background: rgba(255, 255, 255, .16); }
.lb-fav { width: 44px; padding: 10px; justify-content: center; }
.lb-fav svg { fill: none; stroke: #fff; stroke-width: 2; }
.lb-fav.actif svg { fill: #ff2d55; stroke: #ff2d55; }

/* Panneau d'achat (glisse depuis la droite) */
.lb-panel-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(0, 0, 0, .42); }
.lb-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 211; width: 460px; max-width: 92vw; background: #131316; color: #fff; border-left: 1px solid rgba(255, 255, 255, .1); box-shadow: -20px 0 60px rgba(0, 0, 0, .5); transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; }
.lb-panel.ouvert { transform: none; }
.lb-panel-tete { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px 18px; }
.lb-panel-tete h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.lb-panel-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: none; border-radius: 50%; color: rgba(255, 255, 255, .75); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.lb-panel-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.lb-panel-sub { padding: 0 26px 6px; margin: 0; color: rgba(255, 255, 255, .42); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.lb-panel-liste { padding: 8px 26px 20px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.lb-prod { display: block; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; transition: border-color .15s ease; }
.lb-prod:last-child { margin-bottom: 0; }
.lb-prod-add { width: 100%; margin-top: 14px; padding: 11px 16px; font-size: 14px; font-weight: 500; border-radius: 11px; background: #fff; color: #0b0b0d; border: 1px solid transparent; cursor: pointer; transition: opacity .15s, background .15s, color .15s, border-color .15s; }
.lb-prod-add:hover { opacity: .9; }
.lb-prod.dans-panier { border-color: rgba(52, 199, 89, .55); }
.lb-prod-add.au-panier { background: rgba(52, 199, 89, .14); color: #34c759; border-color: rgba(52, 199, 89, .45); }
.lb-prod-add.au-panier:hover { background: rgba(52, 199, 89, .2); opacity: 1; }
.lb-panel-vide { color: rgba(255, 255, 255, .5); padding: 10px 2px; }
.lb-panel-pied { flex: none; padding: 16px 26px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .08); background: #131316; }
.lb-voir-panier { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px 18px; font-size: 15px; font-weight: 600; border-radius: 13px; background: #fff; color: #0b0b0d; border: none; cursor: pointer; transition: background .18s ease, color .18s ease, transform .12s ease; }
.lb-voir-panier:hover { background: #34c759; color: #fff; }
.lb-voir-panier:active { background: #2faa4d; color: #fff; transform: scale(.985); }
.lb-panier-compte { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; background: #0b0b0d; color: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 600; transition: background .18s ease, color .18s ease; }
.lb-voir-panier:hover .lb-panier-compte, .lb-voir-panier:active .lb-panier-compte { background: #fff; color: #1c8c3c; }
.lb-transit { position: fixed; inset: 0; z-index: 400; background: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .28s ease; }
.lb-transit[hidden] { display: none; }
.lb-transit.actif { opacity: 1; }
.lb-transit svg { color: #c9c9cf; opacity: 0; transform: translateY(6px); transition: opacity .26s ease .06s, transform .3s ease .06s; }
.lb-transit.actif svg { opacity: 1; transform: none; }

/* Grille de photos (sombre, aérée) — markup .carte-photo INCHANGÉ */
body[data-page="galerie"] .grille-photos { gap: 22px; }
body[data-page="galerie"] .carte-photo { background: #16161a; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; transition: transform var(--trans), box-shadow var(--trans); }
body[data-page="galerie"] .carte-photo:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(0, 0, 0, .55); }
body[data-page="galerie"] .carte-photo .vignette { overflow: hidden; }
body[data-page="galerie"] .carte-photo .vignette img { transition: transform .5s ease; }
body[data-page="galerie"] .carte-photo:hover .vignette img { transform: scale(1.05); }
/* Grille épurée : seules les photos sont visibles (pas d'info/tarif permanent
   sous la vignette). Le sélecteur + « Ajouter » restent dans .ajout (contrat JS). */
body[data-page="galerie"] .carte-photo .infos { display: none; }
/* Achat désormais UNIQUEMENT via la visionneuse (clic photo → Acheter → panneau).
   On masque VISUELLEMENT .ajout ; le <select> + [data-ajouter] restent dans le DOM
   (la lightbox les pilote : select.value + .click() programmatiques marchent sur
   un élément caché). Contrat JS intact. */
body[data-page="galerie"] .carte-photo .ajout { display: none; }
/* Desktop (survol possible) : vignette en portrait, comme avant. */
@media (hover: hover) and (pointer: fine) {
  body[data-page="galerie"] .carte-photo { position: relative; }
  body[data-page="galerie"] .carte-photo .vignette { aspect-ratio: 3 / 4; }
}

/* Modale Tarifs (rendue uniquement sur la galerie) */
.modale-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .66); z-index: 60; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modale { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 61; width: 92%; max-width: 460px; background: #131316; color: #fff; border: 1px solid rgba(255, 255, 255, .10); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65); overflow: hidden; }
.modale-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 16px; }
.modale-tete h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.modale-sous { margin: 5px 0 0; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.modale-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: none; border-radius: 50%; color: rgba(255, 255, 255, .75); font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
.modale-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.tarifs-liste { list-style: none; margin: 0; padding: 4px 28px 28px; max-height: 62vh; overflow: auto; }
.t-section { display: flex; align-items: center; gap: 10px; padding: 24px 0 12px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.t-section svg { opacity: .95; }
.t-section:first-child { padding-top: 6px; }
.t-carte { border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.t-carte:last-child { margin-bottom: 0; }
.t-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.t-carte-desc { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.t-nom-bloc { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-nom { font-size: 15.5px; font-weight: 500; color: rgba(255, 255, 255, .94); }
.t-deg { font-size: 11.5px; letter-spacing: .02em; color: rgba(255, 255, 255, .42); }
.t-prix-bloc { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
.t-prefix { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .38); }
.t-prix { font-size: 19px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tarifs-vide { list-style: none; padding: 20px 0; text-align: center; color: rgba(255, 255, 255, .5); font-size: 14px; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hdr-act span { display: none; }
  .hdr-act { padding: 9px; }
  .navbar-in { gap: 10px; }
  .nav-burger { display: flex; order: -1; }
  .nav-liens { position: absolute; top: 58px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--bordure); flex-direction: column; gap: 0; padding: 8px 12px 14px; box-shadow: var(--ombre); display: none; }
  .navbar.ouvert .nav-liens { display: flex; }
  .nav-liens a { padding: 12px 10px; font-size: 16px; }
  .nav-liens a.actif::after { display: none; }
  .nav-recherche { order: 3; width: 100%; margin: 0 0 10px; }
  .nav-recherche input { width: 100%; max-width: none; }
  .navbar.ouvert .nav-recherche { display: flex; }
  .nav-actions { margin-left: auto; }
  .carrousel { height: 380px; }
  .carr-titre { font-size: 30px; }
  .carr-fleche { width: 40px; height: 40px; }
  .pied-in { grid-template-columns: 1fr 1fr; }
  .gal-hero { min-height: 280px; }
  .gal-hero-in h1 { font-size: 32px; }
}
@media (max-width: 560px) {
  .conteneur { padding: 24px 16px 56px; }
  h1 { font-size: 28px; }
  .carrousel { height: 320px; margin-top: -24px; }
  .carr-overlay { padding-bottom: 48px; }
  .carr-titre { font-size: 25px; }
  .grille-galeries { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grille-photos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .evt-filtres { flex-direction: column; align-items: stretch; gap: 12px; }
  .evt-recherche { flex: 1 1 auto; }
  .evt-scopes { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .evt-scope { flex: 1 0 auto; justify-content: center; }
  .evt-actions { margin-left: 0; justify-content: space-between; }
  .evt-actions .btn, .evt-actions .btn-ghost { flex: 1; justify-content: center; }
  .ct-grille { grid-template-columns: 1fr; gap: 24px; }
  .ct-hero { min-height: 200px; margin-top: -24px; }
  .ct-hero-in h1 { font-size: 30px; }
  .actu-grille { grid-template-columns: 1fr; gap: 16px; }
  .actu-carte.vedette { grid-template-columns: 1fr; }
  .actu-carte.vedette .actu-cover { aspect-ratio: 16 / 10; min-height: 0; }
  .actu-carte.vedette .actu-body { padding: 20px; }
  .actu-carte.vedette .actu-titre { font-size: 24px; }
  .art-hero { min-height: 240px; margin-top: -24px; }
  .art-titre { font-size: 30px; }
  .art-corps { font-size: 17px; }
  .pied-in { grid-template-columns: 1fr; gap: 26px; }
  .gal-hero { min-height: 220px; margin-top: -24px; }
  .gal-hero-in { padding-bottom: 26px; }
  .gal-hero-in h1 { font-size: 25px; }
  .gal-barre { gap: 10px; }
  .gal-compteur { font-size: 14px; }
  .modale { width: 100%; max-width: none; height: 100%; top: 0; left: 0; transform: none; border-radius: 0; display: flex; flex-direction: column; }
  .modale-tete { padding: 22px 22px 14px; }
  .tarifs-liste { max-height: none; flex: 1; padding: 4px 22px 24px; }
  .lb-img { max-width: 96vw; max-height: 70vh; border-radius: 14px; }
  .lb-fleche { width: 44px; height: 44px; font-size: 24px; }
  .lb-fleche.prev { left: 10px; } .lb-fleche.next { right: 10px; }
  .lb-barre { bottom: 14px; }
  .lb-act { padding: 9px 14px; font-size: 13px; }
  .lb-panel { width: 100%; max-width: none; }
}

/* ===== Reels — questionnaire public (étape 1) ===== */
.reels-hero { text-align: center; padding: 48px 0 28px; }
.reels-hero-in h1 { margin: 0 0 10px; }
.reels-hero-in p { color: var(--texte-doux); max-width: 560px; margin: 0 auto; font-size: 16px; }
.reels-wrap { max-width: 640px; margin: 0 auto; }
.reels-bandeau { max-width: 640px; margin: 0 auto 18px; padding: 12px 16px; border-radius: 14px; font-size: 14px; }
.reels-bandeau.erreur { background: #fdecec; color: #98271f; border: 1px solid #f4c4c0; }
.reels-form { max-width: 640px; margin: 0 auto; padding: 0 0 60px; position: relative; }
.reels-prog { height: 6px; background: var(--fond-doux); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.reels-prog-bar { height: 100%; width: 100%; background: var(--noir); border-radius: 999px; transition: width .25s ease; }
.reels-step { border: 1px solid var(--bordure); border-radius: 18px; padding: 20px 22px 6px; margin: 0 0 18px; }
.reels-step legend { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; padding: 0 6px; }
.reels-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--noir); color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.reels-form .champ { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.reels-form label { font-weight: 500; font-size: 14px; }
.reels-form input, .reels-form select, .reels-form textarea { font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond); color: var(--texte); outline: none; transition: border-color .15s ease; }
.reels-form input:focus, .reels-form select:focus, .reels-form textarea:focus { border-color: var(--noir); }
.reels-form textarea { resize: vertical; }
.reels-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.reels-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.reels-nav { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.reels-nav .reels-prev { margin-right: auto; }
/* [hidden] doit l'emporter sur .btn{display:inline-flex} → un seul bouton à la fois
   (Suivant masqué à la dernière étape ; submit masqué aux étapes 1-4). */
.reels-nav [hidden] { display: none !important; }
.reels-merci { text-align: center; padding: 20px 0 70px; }
.reels-merci-ic { font-size: 46px; }
.reels-merci h2 { margin: 10px 0 8px; }
.reels-merci .btn { margin-top: 18px; }
@media (max-width: 560px) { .reels-grid2 { grid-template-columns: 1fr; } }
.reels-prix-note { background: var(--fond-doux); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 4px 0 14px; }
/* Case CGV — checkbox custom (carré arrondi, coche nette). */
.reels-cgv { margin: 6px 0 4px; }
.reels-cgv-label { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--texte); }
.reels-cgv-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.reels-cgv-box { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--bordure); border-radius: 7px; background: #fff; position: relative; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.reels-cgv-label:hover .reels-cgv-box { border-color: var(--noir); }
.reels-cgv-label input:focus-visible + .reels-cgv-box { border-color: var(--noir); box-shadow: 0 0 0 4px rgba(0, 0, 0, .12); }
.reels-cgv-label input:checked + .reels-cgv-box { background: var(--noir); border-color: var(--noir); }
.reels-cgv-label input:checked + .reels-cgv-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.reels-cgv-txt a { color: var(--noir); text-decoration: underline; text-underline-offset: 2px; }
.reels-cgv.en-erreur .reels-cgv-box { border-color: #d33; }
.reels-cgv .champ-err { display: block; margin-top: 8px; }
/* Page de paiement dédiée du Reel */
.reels-pay { max-width: 460px; margin: 0 auto; padding: 0 0 60px; }
.reels-pay-recap { border: 1px solid var(--bordure); border-radius: 16px; padding: 18px 20px; margin-bottom: 22px; }
.rp-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }
.rp-ligne strong { font-size: 22px; }
.rp-concours { margin-top: 6px; }
#reel-payment-element { margin: 8px 0 18px; }
.reels-pay .btn { width: 100%; }

/* ===== Comptes clients (lot 1) — pages auth + header + encart panier ===== */
.compte { max-width: 460px; margin: 40px auto; padding: 0 16px; }
.compte-carte { border: 1px solid var(--bordure); border-radius: 18px; padding: 28px 26px; }
.compte-carte h1 { margin: 0 0 6px; font-size: 24px; }
.compte-carte .champ { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.compte-carte label { font-weight: 500; font-size: 14px; }
.compte-carte input[type=email], .compte-carte input[type=password], .compte-carte input[type=text] {
  font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--fond); color: var(--texte); outline: none; }
.compte-carte input:focus { border-color: var(--noir); }
.compte-carte .btn { width: 100%; margin-top: 6px; }
.compte-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.compte-case { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--texte-doux); margin: 4px 0 10px; }
.compte-case input { margin-top: 2px; }
.compte-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.compte-lien { font-size: 14px; margin: 12px 0 0; }
.compte-err { background: #fdecec; color: #98271f; border: 1px solid #f4c4c0; border-radius: 12px; padding: 11px 14px; font-size: 14px; margin: 0 0 14px; }
.compte-ok { background: #e9f7ef; color: #1e7a46; border: 1px solid #bfe6cf; border-radius: 12px; padding: 11px 14px; font-size: 14px; margin: 0 0 14px; }
@media (max-width: 480px) { .compte-grid2 { grid-template-columns: 1fr; } }
/* Header : lien compte */
.nav-compte { display: inline-flex; align-items: center; gap: 8px; }
.nav-compte-lien, .nav-compte-nom { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texte); text-decoration: none; }
.nav-compte-lien .pic, .nav-compte-nom .pic, .nav-deco .pic { width: 16px; height: 16px; }
/* Prénom/Compte du client connecté : noir gras (point 2). */
.nav-compte-nom { color: var(--noir); font-weight: 700; }
.nav-compte-lien:hover, .nav-compte-nom:hover { text-decoration: underline; }
.nav-deco { display: inline; margin: 0; }
.nav-deco button { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--texte-doux); text-decoration: underline; padding: 0; }
/* Encart compte/invité sur le panier */
.panier-compte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 1.5px solid #1e7d34; background: #eafaef; border-radius: 12px; margin: 0 0 16px; font-size: 14px; }
.panier-compte.connecte { background: #eafaef; }
.panier-compte .btn { padding: 8px 14px; font-size: 14px; background: #111; color: #fff; border: 1.5px solid #111; border-radius: 8px; text-decoration: none; transition: background .12s, color .12s; }
.panier-compte .btn:hover, .panier-compte .btn:active, .panier-compte .btn:focus { background: #fff; color: #111; border-color: #111; }
/* Lien d'inscription mis en valeur (pages connexion / mot de passe oublié) */
.lien-fort { font-weight: 700; }

/* Déconnexion en bas du dashboard compte */
.compte-deco { margin-top: 30px; }

/* Page 404 */
.page-404 { max-width: 560px; margin: 60px auto; text-align: center; padding: 0 20px; }
.page-404 .err-code { font-size: clamp(72px, 18vw, 140px); font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--noir); }
.page-404 h1 { margin: 10px 0 8px; font-size: 26px; }
.page-404 p { color: var(--texte-doux); margin: 0 0 26px; }

/* ===== Espace « Mon compte » (lot 2) ===== */
.espace { max-width: 880px; margin: 36px auto; padding: 0 16px; }
.espace-nav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--bordure); margin-bottom: 24px; }
.espace-nav a { padding: 10px 16px; font-size: 15px; color: var(--texte-doux); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.espace-nav a:hover { color: var(--texte); }
.espace-nav a.actif { color: var(--texte); font-weight: 600; border-bottom-color: var(--noir); }
.espace-corps h1 { margin: 0 0 6px; font-size: 26px; }
.espace-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.espace-carte { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--bordure); border-radius: 16px; text-decoration: none; color: var(--texte); transition: border-color .15s ease, transform .15s ease; }
.espace-carte:hover { border-color: var(--noir); transform: translateY(-2px); }
.ec-val { font-size: 28px; font-weight: 700; line-height: 1; }
.ec-titre { font-weight: 600; font-size: 15px; }
.ec-sous { font-size: 13px; }
@media (max-width: 640px) { .espace-cartes { grid-template-columns: 1fr; } }

.espace-bloc { margin-bottom: 18px; }
.espace-bloc h2 { margin: 0 0 12px; font-size: 18px; }

.espace-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.espace-table th, .espace-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--bordure); }
.espace-table thead th { font-size: 12px; color: var(--texte-doux); font-weight: 600; }
.espace-table td.num, .espace-table th.num { text-align: right; }
.espace-table tfoot th { border-bottom: none; }
.espace-table a { color: var(--noir); text-decoration: underline; }
.espace-fil { font-size: 13px; color: var(--texte-doux); margin: 0 0 8px; }
.espace-fil a { color: var(--texte-doux); }
.cmd-pastille { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef0f2; color: #444; }
.cmd-pastille.payee { background: #fff3df; color: #8a5a00; }
.cmd-pastille.terminee { background: #e7f6ec; color: #1e7a46; }
.cmd-pastille.a_expedier { background: #e8f0fe; color: #1a56c4; }
.cmd-pastille.expediee { background: #e7f6ec; color: #1e7a46; }

/* Blocs Mes médias repliables (un par commande) */
.media-bloc { border: 1px solid var(--bordure); border-radius: 14px; margin-top: 16px; padding: 0 16px; }
.media-bloc > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 16px 0; font-weight: 600; }
.media-bloc > summary::-webkit-details-marker { display: none; }
.media-bloc > summary::before { content: '▸'; color: var(--texte-doux); font-weight: 400; margin-right: 2px; transition: transform .15s; }
.media-bloc[open] > summary::before { transform: rotate(90deg); }
.media-bloc-titre { font-size: 16px; }
.media-bloc-date { color: var(--texte-doux); font-weight: 400; font-size: 14px; }
.media-bloc-nb { color: var(--texte-doux); font-weight: 400; font-size: 13px; margin-left: auto; }
.media-bloc-prep { font-weight: 600; font-size: 13px; color: #9a6b00; background: #fff4d6; border-radius: 999px; padding: 2px 10px; }
.media-bloc-livre { font-weight: 600; font-size: 13px; color: #1e7d34; background: #e6f4ea; border-radius: 999px; padding: 2px 10px; }
.media-bloc-actions { padding: 0 0 14px; }
.media-bloc .medias-grille { margin-top: 0; padding-bottom: 16px; }
.media-prep-msg { margin: 0 0 16px; padding: 14px 16px; background: #fff4d6; border: 1px solid #f0dca0; border-radius: 10px; color: #6b4e00; font-size: 14px; line-height: 1.5; }
.medias-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.media-carte { border: 1px solid var(--bordure); border-radius: 14px; overflow: hidden; }
.media-vign { aspect-ratio: 3/4; background: #0e0e10; display: flex; align-items: center; justify-content: center; }
.media-vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-ph { color: #6b6b72; font-size: 12px; }
.media-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.media-ref { font-size: 13px; color: var(--texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-bas .btn { padding: 7px 12px; font-size: 13px; }

.adr-carte .adr-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.adr-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--noir); color: #fff; }
.adr-txt { font-size: 14px; margin: 6px 0 12px; }
.adr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.adr-inline { display: inline; margin: 0; }
.adr-actions .btn { padding: 7px 12px; font-size: 13px; }
.adr-suppr { color: #b00020; }

.btn.danger { background: #b00020; color: #fff; }
.btn.danger:hover { background: #8e001a; }
.compte-danger { border-color: #f0c8c4; }
.compte-danger h2 { color: #b00020; }
.compte-danger ul { margin: 8px 0 14px; padding-left: 18px; }
.compte-danger li { margin-bottom: 4px; }

/* ── Panier : select pays stylé (B) ─────────────────────────────────────── */
.select-pays { position: relative; display: inline-block; }
.select-pays::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border: solid var(--texte-doux); border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.select-pays select { appearance: none; -webkit-appearance: none; padding: 11px 40px 11px 14px; font: inherit; font-size: 15px; border: 1px solid var(--bordure); border-radius: 12px; background: #fff; min-width: 220px; width: auto; margin: 0; cursor: pointer; transition: border-color var(--trans); }
.select-pays select:focus { outline: none; border-color: var(--noir); }
.ligne-pays.en-erreur select { border-color: #d33; }
#err-pays { display: block; text-align: right; margin: 6px 0 0; }

/* ── Panier : case d'acceptation visible (D) ────────────────────────────── */
.champ-consent { margin: 4px 0 18px; }
.case-grande { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--texte-doux); }
.case-grande input { position: absolute; opacity: 0; width: 0; height: 0; }
.case-grande-box { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--bordure); border-radius: 7px; background: #fff; position: relative; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.case-grande:hover .case-grande-box { border-color: var(--noir); }
.case-grande input:focus-visible + .case-grande-box { border-color: var(--noir); box-shadow: 0 0 0 4px rgba(0, 0, 0, .12); }
.case-grande input:checked + .case-grande-box { background: var(--noir); border-color: var(--noir); }
.case-grande input:checked + .case-grande-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.champ-consent.en-erreur .case-grande-box { border-color: #d33; }
.champ-consent .champ-err { display: block; margin-top: 8px; }