/* Drohme Arts · Best Pictures — concours photo Drohme Park
   Esprit : fond noir pur, titre serif centré, mur d'images recadrées, fondus lents.
   Charte Drohme Park (app et écrans) : Instrument Serif + sans-serif sobre, crème #F2EEE4, accent rouille #A14A2E */
:root {
  --fond: #000; --texte: #F2EEE4; --doux: rgba(242,238,228,.6); --trait: rgba(242,238,228,.22);
  --rouille: #A14A2E; --rouille-clair: #d98a6c;
  --serif: "Instrument Serif", "Bodoni Moda", Didot, Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --gouttiere: 28px;
  --doux-ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 15px/1.6 var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--rouille-clair); outline-offset: 4px; }

.cap { font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.lien { letter-spacing: inherit; text-transform: inherit; font: inherit; background: none; border: 0; padding: 0 0 3px; cursor: pointer; text-decoration: none; border-bottom: 1px solid var(--trait); transition: border-color .4s, color .4s; }
.lien:hover { border-color: var(--texte); }
.lien.fait { color: var(--rouille-clair); border-color: transparent; cursor: default; }

/* logo seul, en haut à gauche */
.barre { position: fixed; top: 0; left: 0; z-index: 10; padding: 30px 40px; mix-blend-mode: difference; }
.barre img { width: 110px; height: auto; }

/* bouton fixe en bas à droite */
.coin { position: fixed; right: 32px; bottom: 30px; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sceau-lien { width: 112px; height: 112px; border-radius: 50%; background: #000; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; animation: fond 1.8s var(--doux-ease) 1.9s forwards; transition: transform .5s var(--doux-ease); }
.sceau-lien:hover { transform: scale(1.05); }
.sceau-lien:focus-visible { outline: 1px solid #c9a15a; outline-offset: 4px; }
.sceau { width: 86px; height: auto; display: block; }
.upload { display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 22px; background: rgba(0,0,0,.55); color: var(--texte); border: 1px solid rgba(242,238,228,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer;
  transition: background .5s var(--doux-ease), color .5s var(--doux-ease), border-color .5s; }
.upload span { font-size: 15px; letter-spacing: 0; transition: transform .5s var(--doux-ease); }
.upload:hover { background: var(--texte); color: #000; border-color: var(--texte); }
.upload:hover span { transform: translate(2px, -2px); }

/* titre-logo : « Best » en grande italique, « PICTURES » espacé, signature Drohme Park */
.ouverture { height: min(70vh, 680px); min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px 0; }
.titre { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: center; }
.t-best { display: block; font: italic 400 clamp(112px, 14.5vw, 214px)/.78 var(--serif); letter-spacing: -.025em; }
.t-pictures { display: block; font: 400 clamp(15px, 1.75vw, 25px)/1 var(--serif); letter-spacing: .62em; padding-left: .62em; text-transform: uppercase; margin-top: .55em; }
.signature { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; }
.signature::before, .signature::after { content: ""; width: 34px; height: 1px; background: rgba(242,238,228,.42); }
.signature img { width: 104px; height: auto; }

/* mur d'images : cadres noirs allongés, l'image n'est visible qu'en partie */
.mur { display: flex; gap: var(--gouttiere); align-items: flex-start; }
.colonne { flex: 1; display: flex; flex-direction: column; gap: var(--gouttiere); min-width: 0; will-change: transform; }
.mur.trois .colonne:nth-child(2) { margin-top: 140px; }
.mur.deux .colonne:nth-child(2) { margin-top: 80px; }
.tuile { margin: 0; position: relative; }
.cadre { position: relative; display: block; width: 100%; aspect-ratio: var(--r, 4/5); overflow: hidden; background: #000; border: 0; padding: 0; }
button.cadre { cursor: zoom-in; }
.cadre img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); opacity: 0;
  transition: opacity 1.6s var(--doux-ease), transform 2.4s var(--doux-ease); }
.tuile.vu .cadre img.charge { opacity: 1; transform: scale(1); }
.tuile:hover .cadre img.charge { transform: scale(1.03); transition: transform 1.8s var(--doux-ease), opacity 1.6s; }
.legende-tuile { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 60px 20px 18px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
  opacity: 0; transform: translateY(8px); transition: opacity .7s var(--doux-ease), transform .7s var(--doux-ease); pointer-events: none; }
.legende-tuile .qui { color: var(--doux); }
.legende-tuile .qui b { display: block; font: 400 22px/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: var(--texte); margin-bottom: 4px; }
.legende-tuile .lien { pointer-events: auto; }
.tuile:hover .legende-tuile, .tuile:focus-within .legende-tuile { opacity: 1; transform: none; }
@media (hover: none) { .legende-tuile { opacity: 1; transform: none; } }
.vues { display: flex; justify-content: center; gap: 34px; margin: 0 0 44px; }
.vues[hidden] { display: none; }
.vues button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--doux); cursor: pointer; transition: color .4s, border-color .4s; }
.vues button[aria-pressed=true] { color: var(--texte); border-color: var(--texte); }
.vues button:hover { color: var(--texte); }
.rang-tuile { position: absolute; top: 0; left: 0; z-index: 2; background: #000; padding: 10px 14px 9px; pointer-events: none; font: italic 400 38px/1 var(--serif); color: var(--texte); }
.rang-tuile small { display: block; margin-top: 6px; font: 600 9px/1 var(--sans, "Hanken Grotesk", sans-serif); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #c9a15a; }
.top-vide { text-align: center; color: var(--doux); padding: 40px 24px; margin: 0; width: 100%; }
.info-mur { text-align: center; color: var(--doux); padding: 64px 24px 0; margin: 0; }

/* apparition à l'ouverture */
.t-best { opacity: 0; transform: translateY(26px); animation: monte 2s var(--doux-ease) .1s forwards; }
.t-pictures { opacity: 0; letter-spacing: 1.1em; animation: serre 2.4s var(--doux-ease) .5s forwards; }
.signature { opacity: 0; animation: fond 1.8s var(--doux-ease) 1.2s forwards; }
.upload { opacity: 0; animation: fond 1.6s var(--doux-ease) 1.5s forwards; }
.barre { transition: opacity .8s var(--doux-ease); }
.accueil .barre { opacity: 0; pointer-events: none; }
.accueil .barre.visible { opacity: 1; pointer-events: auto; }
@keyframes serre { to { opacity: 1; letter-spacing: .62em; } }
@keyframes monte { to { opacity: 1; transform: none; } }
@keyframes fond { to { opacity: 1; } }

/* prix à gagner, sous le titre (9/11/2026) */
.gains { max-width: 1120px; margin: 0 auto; padding: 24px 40px 130px; }
.gains > h2 { margin: 0 0 36px; text-align: center; color: var(--doux); }
.gains-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.gain { border-top: 1px solid var(--trait); padding-top: 28px; }
.gain-k { margin: 0 0 16px; color: #c9a15a; }
.gain-t { margin: 0 0 18px; font: 400 clamp(32px, 3.6vw, 50px)/1.02 var(--serif); letter-spacing: -.01em; }
.gain-t em { font-style: italic; }
.gain-p { margin: 0; max-width: 430px; color: rgba(242,238,228,.85); }

/* pied */
.pied { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 120px 40px 120px; }
.pied h2 { margin: 0 0 12px; color: var(--doux); }
.pied p { margin: 0; max-width: 280px; color: rgba(242,238,228,.85); }
.pied-liens { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.langues { display: flex; gap: 18px; }
.langues a { text-decoration: none; opacity: .5; transition: opacity .4s; }
.langues a:hover, .langues a[aria-current] { opacity: 1; }

/* fenêtres (participer, voter, photo) */
dialog { border: 0; padding: 0; background: var(--fond); color: var(--texte); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(0,0,0,.88); }
dialog[open] { animation: fond .7s var(--doux-ease); }
.plein { width: 100vw; height: 100dvh; margin: 0; overflow-y: auto; }
.plein .interieur { max-width: 980px; margin: 0 auto; padding: 100px 32px 72px; }
.fermer { position: fixed; top: 24px; right: 32px; z-index: 2; background: none; border: 0; cursor: pointer; padding: 10px; }
.dlg-titre { font: 400 clamp(34px, 4vw, 54px)/1 var(--serif); text-transform: uppercase; margin: 0 0 12px; }
.dlg-titre em { font-style: italic; text-transform: none; }
.dlg-titre:focus { outline: none; }
.chapeau { color: var(--doux); margin: 0 0 48px; max-width: 560px; }
.form { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; }
.zone { position: relative; aspect-ratio: 4/5; border: 1px solid var(--trait); display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; overflow: hidden; }
.zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.zone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0a0a0a; }
.zone .invite { color: var(--doux); padding: 24px; }
.zone .invite strong { display: block; font: 400 26px/1.1 var(--serif); color: var(--texte); margin-bottom: 8px; text-transform: uppercase; }
.aide { color: var(--doux); font-size: 13px; margin: 12px 0 0; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ.large { grid-column: 1 / -1; }
.champ label { color: var(--doux); }
.facultatif { opacity: .7; text-transform: none; letter-spacing: 0; }
input[type=text], input[type=email], select, textarea {
  width: 100%; background: transparent; color: var(--texte); border: 0; border-bottom: 1px solid var(--trait); border-radius: 0;
  padding: 8px 0 10px; font: 400 17px/1.4 var(--sans); }
select { appearance: none; -webkit-appearance: none; cursor: pointer; }
select option { color: #000; }
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--texte); }
.coches { display: flex; flex-direction: column; gap: 14px; margin: 34px 0 30px; }
.coche { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--doux); cursor: pointer; }
.coche input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--rouille); }
.coche a { color: var(--texte); }
.envoyer { background: var(--texte); color: #000; border: 0; padding: 17px 34px; cursor: pointer; transition: background .4s; }
.envoyer:hover { background: #fff; }
.envoyer[disabled] { opacity: .45; cursor: default; }
.message { margin: 22px 0 0; padding-left: 14px; border-left: 1px solid var(--rouille-clair); color: var(--texte); font-size: 14px; }
.message.erreur { border-color: #e06a4a; }
.ferme { max-width: 560px; color: var(--doux); }
.cache { position: absolute; left: -9999px; }

.petite { max-width: 480px; width: calc(100vw - 32px); margin: auto; border: 1px solid var(--trait); }
.petite .interieur { padding: 44px 36px 40px; }
.petite .fermer { position: absolute; top: 10px; right: 14px; }
.petite .champ { margin-top: 26px; }

.visionneuse { width: 100vw; height: 100dvh; margin: 0; }
.visionneuse .cadre-v { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 24px 32px; gap: 20px; }
.visionneuse img { max-height: calc(100dvh - 190px); width: auto; max-width: 100%; }
.visionneuse .legende { width: 100%; max-width: 900px; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.visionneuse h3 { margin: 0 0 4px; font: 400 26px/1.15 var(--serif); }
.visionneuse p { margin: 0; color: var(--doux); }
.visionneuse .boutons { display: flex; gap: 26px; }

.bandeau { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 30; width: min(560px, calc(100vw - 32px)); background: var(--texte); color: #000; padding: 16px 46px 16px 20px; font-size: 14px; animation: fond .6s var(--doux-ease); }
.bandeau button { position: absolute; right: 10px; top: 8px; background: none; border: 0; font-size: 22px; cursor: pointer; color: #000; }

/* règlement et page de partage */
.page, .page-texte { max-width: 720px; margin: 0 auto; padding: 140px 24px 96px; }
.page h1, .page-texte h1 { font: 400 clamp(36px, 4.4vw, 56px)/1.02 var(--serif); text-transform: uppercase; margin: 0 0 36px; }
.page h2, .page-texte h2 { font: 400 26px/1.2 var(--serif); margin: 40px 0 10px; }
.page p, .page li, .page-texte p, .page-texte li { color: rgba(242,238,228,.82); }
.page-texte .retour { display: inline-block; margin-bottom: 40px; font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--trait); padding-bottom: 3px; }
.kicker { font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--doux); margin: 0 0 14px; }
.a-completer { background: rgba(161,74,46,.35); padding: 0 4px; }
.partage { text-align: center; }
.partage figure { margin: 0 auto 26px; }
.partage figure img { margin: 0 auto; max-height: 70vh; width: auto; }
.partage h1 { margin-bottom: 8px; }
.partage .qui { color: var(--doux); margin: 0 0 30px; }
.partage .actions { display: flex; gap: 30px; justify-content: center; }
.partage .dates { color: var(--doux); margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  .t-best, .t-pictures, .signature, .upload, .sceau-lien { animation: none; opacity: 1; transform: none; }
  .cadre img { transition: none; transform: none; opacity: 1; }
}
@media (max-width: 900px) {
  .form { grid-template-columns: 1fr; gap: 32px; }
  .zone { aspect-ratio: 4/3; }
  .pied { grid-template-columns: 1fr 1fr; padding: 96px 24px 120px; }
}
@media (max-width: 600px) {
  :root { --gouttiere: 14px; }
  .barre { padding: 22px 20px; }
  .barre img { width: 88px; }
  .ouverture { height: 62vh; min-height: 380px; padding-top: 30px; }
  .t-best { font-size: clamp(104px, 31vw, 140px); }
  .t-pictures { font-size: 14px; }
  .signature { margin-top: 30px; }
  .signature img { width: 88px; }
  .coin { right: 16px; bottom: 16px; gap: 8px; }
  .sceau-lien { width: 84px; height: 84px; }
  .sceau { width: 64px; }
  .upload { padding: 13px 16px 13px 18px; }
  .plein .interieur { padding: 84px 20px 56px; }
  .fermer { top: 14px; right: 14px; }
  .champs { grid-template-columns: 1fr; }
  .pied { grid-template-columns: 1fr; gap: 34px; }
  .gains { padding: 8px 24px 96px; }
  .gains-grille { grid-template-columns: 1fr; gap: 44px; }
  .envoyer { width: 100%; }
  .legende-tuile { padding: 48px 16px 14px; }
}