/* =====================================================================
   Polices auto-hébergées (RGPD / CNIL) - woff2, subset latin
   ===================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/playfair-700.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/playfair-900.woff2") format("woff2"); }

/* =====================================================================
   pipi-assis.fr - Design system
   Frais & propre : bleu-cyan « eau », accent ambré, Poppins + Inter
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Couleurs */
  --eau:        #14a0b4;   /* primaire */
  --eau-fonce:  #0b7a8a;
  --eau-clair:  #e4f5f8;
  --nuit:       #0e2c3a;   /* texte titres / footer */
  --ambre:      #ffb703;   /* accent / CTA */
  --ambre-fonce:#f59e0b;
  --corail:     #ff5d5d;   /* alerte douce / éclaboussure */
  --fond:       #f6fbfc;
  --blanc:      #ffffff;
  --texte:      #25424f;
  --texte-doux: #5b7480;
  --bord:       #dceaee;

  /* Typo */
  --f-titre: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rayons & ombres */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ombre-sm: 0 2px 8px rgba(14, 44, 58, .07);
  --ombre-md: 0 10px 30px rgba(14, 44, 58, .10);
  --ombre-lg: 0 24px 60px rgba(14, 44, 58, .16);

  /* Layout */
  --max: 1140px;
  --gap: clamp(1rem, 3vw, 2rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-texte);
  color: var(--texte);
  background: var(--fond);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--eau-fonce); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--eau); }
ul { padding-left: 1.2em; }

/* ---------- Typo ---------- */
h1, h2, h3, h4 { font-family: var(--f-titre); color: var(--nuit); line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--texte-doux); }
.surtitre {
  font-family: var(--f-titre); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--eau);
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gap); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--eau { background: var(--eau-clair); }
.section--nuit { background: var(--nuit); color: #cfe4ea; }
.section--nuit h2, .section--nuit h3 { color: #fff; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-prose { max-width: 62ch; }

/* ---------- Accessibilité ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--nuit); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; border-radius: 4px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-titre); font-weight: 600; font-size: 1rem;
  padding: .85em 1.5em; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primaire { background: var(--ambre); color: var(--nuit); box-shadow: var(--ombre-sm); }
.btn--primaire:hover { background: var(--ambre-fonce); color: var(--nuit); box-shadow: var(--ombre-md); }
.btn--eau { background: var(--eau); color: #fff; }
.btn--eau:hover { background: var(--eau-fonce); color:#fff; }
.btn--ghost { background: transparent; border-color: var(--bord); color: var(--nuit); }
.btn--ghost:hover { border-color: var(--eau); color: var(--eau-fonce); }
.btn--lg { font-size: 1.1rem; padding: 1em 1.8em; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.logo {
  display: inline-block;
  font-family: var(--f-titre); font-weight: 800; font-size: 1.25rem;
  color: var(--nuit); text-decoration: none; letter-spacing: -.02em;
}
.logo:hover { color: var(--nuit); }
.logo .dot { display: inline-block; width: .4em; color: var(--eau); margin: 0 .05em; vertical-align: -.08em; }
.logo .dot svg { width: 100%; height: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.nav-links a { font-family: var(--f-titre); font-weight: 500; color: var(--nuit); text-decoration: none; font-size: .98rem; }
.nav-links a:hover { color: var(--eau-fonce); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle svg { width: 28px; height: 28px; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--bord); padding: .5rem 0;
    box-shadow: var(--ombre-md); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 0; }
  .nav-links a { display: block; padding: .9rem var(--gap); }
  .nav-links .btn { margin: .5rem var(--gap); justify-content: center; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(120% 120% at 85% -10%, var(--eau-clair) 0%, var(--fond) 55%); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero h1 { margin-bottom: 1rem; }
.hero h1 .surligne { color: var(--eau); }
.hero .lead { margin-bottom: 1.8rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-visual {
  position: relative; aspect-ratio: 4/5; border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--eau) 0%, var(--eau-fonce) 100%);
  box-shadow: var(--ombre-lg); display: grid; place-items: center; overflow: hidden;
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge {
  position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
  background: rgba(255,255,255,.92); border-radius: var(--r-md); padding: .7rem 1rem;
  font-family: var(--f-titre); font-weight: 600; color: var(--nuit); font-size: .95rem;
  box-shadow: var(--ombre-sm);
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* width:100% indispensable : avec margin-inline:auto sur un élément grid,
     l'étirement est désactivé et la largeur retombe sur le contenu. Or les
     .hero-slide sont en position:absolute (0 de large) -> sans width, la boîte
     s'effondre (aspect-ratio = 0/ratio) et le carrousel disparaît sur mobile. */
  .hero-visual { width: 100%; max-width: 420px; margin-inline: auto; }
}

/* ---------- Cartes bénéfices ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-md);
  padding: 1.6rem; box-shadow: var(--ombre-sm); transition: transform .15s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); }
.card .ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--eau-clair); color: var(--eau-fonce); margin-bottom: 1rem;
}
.card .ico svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--texte-doux); font-size: .98rem; }

/* ---------- Bandeau chiffres ---------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 620px){ .stats { grid-template-columns: 1fr; } }
.stat .num { font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.2rem,5vw,3rem); color: var(--ambre); line-height: 1; }
.stat .lbl { color: #cfe4ea; margin-top: .4rem; }

/* ---------- Galerie affiches (teaser) ---------- */
.posters { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 760px){ .posters { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px){ .posters { grid-template-columns: 1fr; } }
.poster {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden;
  background: var(--eau-clair); box-shadow: var(--ombre-sm); border: 1px solid var(--bord);
}
.poster img { width:100%; height:100%; object-fit: cover; }

/* ---------- Citations ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .quotes { grid-template-columns: 1fr; } }
.quote-card {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-md);
  padding: 1.5rem; box-shadow: var(--ombre-sm); display: flex; flex-direction: column;
}
.quote-card .mark { font-family: var(--f-titre); font-size: 2.6rem; line-height: .5; color: var(--eau); opacity: .35; }
.quote-card blockquote { font-family: var(--f-titre); font-weight: 600; font-size: 1.06rem; color: var(--nuit); margin: .6rem 0 1rem; line-height: 1.4; flex: 1; }
.quote-card .auteur { color: var(--texte-doux); font-size: .92rem; font-weight: 600; }
/* Cartes citations cliquables (lien vers l'affiche) */
a.quote-card { text-decoration: none; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease; }
a.quote-card:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); border-color: var(--eau); }
.disclaimer { font-size: .85rem; color: var(--texte-doux); font-style: italic; }

/* ---------- FAQ ---------- */
.faq details {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-md);
  padding: 0 1.3rem; margin-bottom: .8rem;
}
.faq summary {
  font-family: var(--f-titre); font-weight: 600; color: var(--nuit);
  cursor: pointer; padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--eau); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "-"; }
.faq details p { padding-bottom: 1.2rem; color: var(--texte-doux); }

/* ---------- Configurateur d'affiches ---------- */
.config { display: grid; grid-template-columns: 1fr 420px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) {
  .config { grid-template-columns: 1fr; }
  /* Mobile : flux linéaire 1 Format -> 2 Texte -> 3 Perso -> aperçu + export.
     On retire l'aperçu « sticky » qui bloquait le défilement et faisait passer
     les réglages sous les boutons d'export. */
  .config__preview { position: static; }
}
@media (max-width: 620px) {
  /* L'affiche ne mange plus tout l'écran : aperçu compact et centré. */
  .config__preview { max-width: 420px; margin-inline: auto; }
}

.config__panel { display: flex; flex-direction: column; gap: 1.8rem; }
.field-label { font-family: var(--f-titre); font-weight: 600; color: var(--nuit); margin-bottom: .7rem; display: block; }
.field-label .step { display:inline-grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; background:var(--eau); color:#fff; font-size:.8em; margin-right:.5em; }

/* Choix visuel */
.style-filter { margin-bottom: .9rem; gap: .4rem; }
.style-filter .choice { font-size: .82rem; padding: .35rem .7rem; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 520px){ .thumbs { grid-template-columns: repeat(3,1fr); } }
.thumb { position: relative; aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; border: 3px solid transparent; background: var(--eau-clair); padding: 0; }
.thumb img { width:100%; height:100%; object-fit: cover; }
.thumb.is-active { border-color: var(--eau); box-shadow: var(--ombre-sm); }

/* Slogans */
.field select, .field textarea, .field input[type=text] {
  width: 100%; font-family: var(--f-texte); font-size: 1rem; color: var(--texte);
  padding: .7rem .9rem; border: 1px solid var(--bord); border-radius: var(--r-sm); background: #fff;
}
.field textarea { resize: vertical; min-height: 3rem; }
.hint { font-size: .85rem; color: var(--texte-doux); margin-top: .4rem; }

/* Options en pastilles */
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice {
  font-family: var(--f-titre); font-weight: 500; font-size: .92rem; cursor: pointer;
  padding: .5em 1em; border-radius: var(--r-pill); border: 1px solid var(--bord); background: #fff; color: var(--nuit);
}
.choice.is-active { background: var(--nuit); color: #fff; border-color: var(--nuit); }

/* Barre de filtres de la galerie « Nos affiches » */
.poster-filters { justify-content: center; margin: 0 auto 1.6rem; }
.choice__count {
  display: inline-block; min-width: 1.5em; margin-left: .15em; padding: 0 .35em;
  font-size: .78em; font-weight: 600; line-height: 1.5; text-align: center;
  border-radius: var(--r-pill); background: rgba(14, 44, 58, .1); color: inherit;
}
.choice.is-active .choice__count { background: rgba(255, 255, 255, .22); }

/* Contrôles texte */
.control-row { display: flex; align-items: center; gap: .8rem; }
.control-row .field-label { margin-bottom: 0; white-space: nowrap; }
.range { flex: 1; width: 100%; accent-color: var(--eau); }
input[type=color] { width: 46px; height: 38px; padding: 0; border: 1px solid var(--bord); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.swatches { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bord); cursor: pointer; padding: 0; }
.swatch.is-active { box-shadow: 0 0 0 2px var(--eau); }

/* Aperçu canvas */
.config__preview { position: sticky; top: 84px; }
.preview-frame { width: 100%; background: var(--eau-clair); border-radius: var(--r-md); padding: 1rem; }
#poster-canvas {
  width: 100%; height: auto; display: block; border-radius: var(--r-sm);
  box-shadow: 0 10px 40px rgba(0,0,0,.22); cursor: grab; touch-action: none; background: #fff;
}
#poster-canvas:active { cursor: grabbing; }
.drag-hint { text-align: center; font-size: .85rem; color: var(--texte-doux); margin-top: .7rem; }

.export-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.export-actions .btn { flex: 1; justify-content: center; min-width: 120px; }
.export-note { font-size: .82rem; color: var(--texte-doux); margin-top: .7rem; text-align: center; }
.spinner { display:none; }
.is-exporting .spinner { display:inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Emplacement publicitaire ---------- */
.ad-slot {
  margin-inline: auto; max-width: var(--max);
  min-height: 100px; display: grid; place-items: center;
  border: 1px dashed var(--bord); border-radius: var(--r-sm);
  color: var(--texte-doux); font-size: .8rem; background: #fff;
}
.ad-slot[data-filled="true"] { border: 0; background: transparent; }
.ad-zone { padding-block: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--nuit); color: #aac6cf; padding-block: 3rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
@media (max-width: 720px){ .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color:#fff; font-size: 1rem; margin-bottom: .8rem; }
.site-footer a { color: #aac6cf; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.5rem; font-size: .85rem; color: #7fa0aa; }

/* ---------- Article (page pilier) ---------- */
.article { max-width: 760px; margin-inline: auto; }
.breadcrumb { font-size: .85rem; color: var(--texte-doux); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--texte-doux); }
.article h2 { margin-top: 2.6rem; margin-bottom: .8rem; }
.article h3 { margin-top: 1.7rem; margin-bottom: .5rem; }
.article p { margin-bottom: 1.1rem; }
.article ul { margin-bottom: 1.1rem; }
.article li { margin-bottom: .45rem; }
.callout { background: var(--eau-clair); border-left: 4px solid var(--eau); border-radius: var(--r-sm); padding: 1.2rem 1.4rem; margin: 1.8rem 0; }
.callout p:last-child { margin-bottom: 0; }
.sources { font-size: .92rem; color: var(--texte-doux); }
.sources li { margin-bottom: .6rem; }

/* ---------- Bandeau cookies ---------- */
.cookie {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 300; max-width: 560px; margin-inline: auto;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--r-md);
  box-shadow: var(--ombre-lg); padding: 1.2rem 1.3rem; display: none;
}
.cookie.show { display: block; }
.cookie p { font-size: .92rem; margin-bottom: 1rem; }
.cookie .cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie .btn { font-size: .92rem; padding: .6em 1.1em; }

/* ---------- Galerie vitrine « Imprimer nos affiches » ---------- */
/* La carte est un conteneur ; la zone cliquable (.poster__open) ouvre la
   lightbox, et le bouton de vote (.vote-btn) flotte par-dessus. Ratio A4 pour
   afficher l'affiche composée (image + slogan) sans rognage. */
#galerie-grid .poster { aspect-ratio: 210 / 297; transition: transform .15s ease, box-shadow .15s ease; }
#galerie-grid .poster:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,44,58,.20); }
#galerie-grid .poster img { display: block; }
.poster__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.poster__open:focus-visible { outline: 3px solid var(--eau); outline-offset: 2px; }

/* Bouton de vote (like) */
.vote-btn {
  position: absolute; bottom: .55rem; right: .55rem; z-index: 2; border: none; cursor: pointer;
  border-radius: 999px; background: rgba(255,255,255,.92); color: #0e2c3a;
  font-family: var(--f-titre); font-weight: 700; font-size: .82rem; line-height: 1;
  padding: .42rem .62rem; display: inline-flex; align-items: center; gap: .32rem;
  box-shadow: var(--ombre-sm); transition: background .15s ease, transform .1s ease;
}
.vote-btn:hover { transform: scale(1.05); }
.vote-btn:active { transform: scale(.95); }
.vote-btn.is-voted { background: #ffe1e1; }
.vote-btn .vote-count { font-variant-numeric: tabular-nums; }
/* Dans la lightbox, le bouton est dans le flux (pas en absolu) */
.lightbox__vote { margin: .2rem 0 1rem; }
.lightbox__vote .vote-btn { position: static; }

/* ---------- Bouton partage (carte galerie) ---------- */
.share-btn {
  position: absolute; bottom: .55rem; left: .55rem; z-index: 2; border: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92);
  font-size: .95rem; box-shadow: var(--ombre-sm); display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s ease;
}
.share-btn:hover { transform: scale(1.08); }

/* ---------- Partage social (lightbox) ---------- */
.lightbox__share { margin-top: .9rem; }
.share-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.share-link {
  font-family: var(--f-titre); font-weight: 600; font-size: .82rem; cursor: pointer; line-height: 1;
  border: 1px solid var(--bord); background: #fff; color: var(--nuit);
  border-radius: 999px; padding: .4rem .75rem; text-decoration: none;
}
.share-link:hover { border-color: var(--eau); color: var(--eau-fonce); }
.share-ig:hover { border-color: #e1306c; color: #e1306c; }
.share-fb:hover { border-color: #1877f2; color: #1877f2; }
.share-wa:hover { border-color: #25d366; color: #1ebe57; }
.share-pin:hover { border-color: #e60023; color: #e60023; }

/* ---------- Hero slider (accueil) ---------- */
.hero-slider { aspect-ratio: 210 / 297; }
.hero-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .6s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-dots { position: absolute; top: .7rem; left: 0; right: 0; z-index: 3; display: flex; gap: .4rem; justify-content: center; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(14,44,58,.15);
}
.hero-dot.is-active { background: #fff; }

/* Teaser composé : ratio A4 comme la galerie (slogan intégré, sans rognage) */
#teaser-grid .poster { aspect-ratio: 210 / 297; }

/* ---------- Lightbox de téléchargement ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(14,44,58,.72); }
.lightbox__panel {
  position: relative; z-index: 1; background: #fff; border-radius: var(--r-md);
  box-shadow: 0 24px 70px rgba(0,0,0,.4); max-width: 920px; width: 100%; max-height: 92vh;
  overflow: auto; display: grid; grid-template-columns: 1fr 300px; gap: 1.4rem; padding: 1.4rem;
}
.lightbox__close {
  position: absolute; top: .55rem; right: .55rem; z-index: 2; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); border-radius: 50%; width: 38px; height: 38px; font-size: 1.05rem;
  box-shadow: var(--ombre-sm);
}
.lightbox__preview {
  position: relative;
  display: flex; align-items: center; justify-content: center; min-height: 200px;
  background: var(--eau-clair); border-radius: var(--r-md); padding: .8rem;
}
.lightbox__preview canvas { max-width: 100%; max-height: 78vh; height: auto; border-radius: 6px; box-shadow: var(--ombre-sm); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); color: #0e2c3a;
  font-size: 1.7rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ombre-sm); transition: background .15s ease, transform .1s ease;
}
.lightbox__nav:hover { background: #fff; }
.lightbox__nav:active { transform: translateY(-50%) scale(.92); }
.lightbox__prev { left: .5rem; }
.lightbox__next { right: .5rem; }
.lightbox__side { display: flex; flex-direction: column; }
.lightbox__title { margin: .2rem 0 1rem; font-size: 1.15rem; line-height: 1.25; }
.lightbox #lb-formats { flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.lightbox__actions { margin-top: 1rem; }
.lightbox__actions .btn { flex: 1 1 auto; }
.lightbox__edit { width: 100%; justify-content: center; margin-bottom: .6rem; }
@media (max-width: 720px) {
  .lightbox__panel { grid-template-columns: 1fr; max-height: 94vh; }
  .lightbox__preview canvas { max-height: 48vh; }
}

/* ---------- Utilitaires ---------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.hidden{display:none}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Sélecteur de langue (passerelle FR <-> EN) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;opacity:.85}
.lang-switch:hover{opacity:1}