/* Boutique MDS Production — direction « Plein écran » : noir, les photos en grand,
   un seul bouton blanc pour agir. Aucune couleur : celles des photos suffisent. */
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(/boutique/chakra-petch-700.woff2) format("woff2")}
@font-face{font-family:"Rubik";font-weight:400 600;font-display:swap;src:url(/boutique/rubik.woff2) format("woff2")}
:root{
  --noir:#000;--blanc:#fff;--doux:#BDBDBD;--gris:#161616;--gris-haut:#222;
  --titre:"Chakra Petch","Arial Narrow",system-ui,sans-serif;--corps:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --marge:20px;color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--noir);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--blanc);font:16px/1.5 var(--corps);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2{font-family:var(--titre);font-weight:700;line-height:1.02;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--blanc);outline-offset:3px}
[hidden]{display:none!important}
.meta{color:var(--doux);font-size:14px}
.logo{height:40px;width:auto}
.bouton-blanc{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 22px;border:0;border-radius:14px;background:var(--blanc);color:var(--noir);font:600 17px/1.2 var(--corps);text-decoration:none;cursor:pointer}
.bouton-blanc:active{transform:translateY(1px)}
.bouton-blanc:disabled{background:#5c5c5c;color:#111;cursor:not-allowed}

/* Accueil et ouverture d'un reportage : la photo plein cadre, le texte posé sur un dégradé opaque. */
.une,.intro{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:min(86svh,860px);text-decoration:none;overflow:hidden}
.une-fond,.intro-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.une-haut,.intro-haut{position:relative;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top)) var(--marge) 60px;background:linear-gradient(180deg,#000c,#0000)}
.une-texte,.intro-texte{position:relative;display:grid;gap:12px;justify-items:start;padding:120px var(--marge) 28px;background:linear-gradient(0deg,#000 0%,#000 45%,#0000 100%)}
.une-titre,.intro h1{font-family:var(--titre);font-size:clamp(36px,9vw,64px);line-height:1}
.prix{font-size:15px}
.lien-selection{font-weight:600;text-decoration:none;background:#000a;border-radius:12px;padding:10px 14px}
.autres{padding:36px var(--marge) 8px;display:grid;gap:16px;max-width:1100px;margin:0 auto}
.autres h2{font-size:26px}
.autres ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.autres a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;text-decoration:none}
.autres img{width:120px;height:80px;object-fit:cover;border-radius:10px}
.autres strong{display:block;font-family:var(--titre);font-size:20px;line-height:1.1}

/* Trouver ses photos */
.trouver{padding:32px var(--marge) 120px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:1100px;margin:0 auto}
.trouver h2{font-size:28px}
.numero{display:grid;gap:8px}
.numero label{font-weight:600}
.numero-ligne{display:flex;gap:10px}
.numero input{flex:1;min-width:0;width:100%;background:var(--gris);border:2px solid #3a3a3a;border-radius:14px;color:var(--blanc);font:700 26px/1 var(--titre);padding:10px 16px}
.numero input:focus{border-color:var(--blanc);outline:0}
.aide{color:var(--doux);font-size:14px}
.moments{list-style:none;margin:0;padding:0;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.moments a{display:grid;gap:6px;text-decoration:none}
.bande{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;border-radius:12px;overflow:hidden;background:var(--gris)}
.bande img{width:100%;aspect-ratio:1;object-fit:cover}
.moment-nom{font-family:var(--titre);font-size:21px;line-height:1.15;margin-top:4px}

/* La planche : toutes les photos d'un moment, en petit, pour reconnaître la sienne d'un coup d'œil. */
.planche,.selection{min-height:100svh;padding-bottom:120px}
.barre-haut{position:sticky;top:0;z-index:5;display:flex;gap:14px;align-items:center;padding:calc(12px + env(safe-area-inset-top)) var(--marge) 12px;background:var(--noir)}
.barre-haut h2{font-size:22px}
.retour{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--gris-haut);text-decoration:none;font-size:26px;line-height:1}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 3px}
@media (min-width:700px){.grille{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;padding:0 var(--marge)}}
/* Une tuile : la photo s'ouvre en grand, son bouton l'ajoute à la commande sans l'ouvrir. */
.tuile{position:relative;aspect-ratio:1;background:var(--gris);overflow:hidden}
.vignette{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.vignette img{width:100%;height:100%;object-fit:cover}
.tuile.prise{outline:4px solid var(--blanc);outline-offset:-4px}
.ajout{position:absolute;right:6px;bottom:6px;width:42px;height:42px;border:2px solid var(--blanc);border-radius:12px;background:#000c;color:var(--blanc);font:600 24px/1 var(--corps);display:grid;place-items:center;cursor:pointer}
.tuile.prise .ajout{background:var(--blanc);color:var(--noir)}
.vide{grid-column:1/-1;padding:24px var(--marge);color:var(--doux)}
.aide-planche{padding:0 var(--marge) 12px;color:var(--doux);font-size:14px}
.aide-planche:has(+.grille>.vide){display:none}
#sel-grille .tuile.prise{outline:0}
#sel-grille .ajout{background:#000c;color:var(--blanc)}

/* La visionneuse : une photo, tout l'écran. */
.visionneuse{position:fixed;inset:0;z-index:20;background:var(--noir);touch-action:pan-y}
.visionneuse>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vue-haut{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) var(--marge) 40px;background:linear-gradient(180deg,#000d,#0000)}
.rond{width:46px;height:46px;border:0;border-radius:14px;background:#000b;color:var(--blanc);font-size:26px;cursor:pointer}
.compte{font-variant-numeric:tabular-nums;font-size:15px}
.vue-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:76px;border:0;border-radius:14px;background:#000a;color:var(--blanc);font-size:34px;cursor:pointer}
.vue-prec{left:12px}.vue-suiv{right:12px}
.vue-nav:disabled{visibility:hidden}
@media (hover:none){.vue-nav{display:none}}
.vue-bas{position:absolute;inset:auto 0 0 0;display:grid;gap:10px;padding:70px var(--marge) calc(22px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#000 0%,#000 50%,#0000 100%)}
.vue-bas .bouton-blanc,.lien-commande{width:100%;max-width:520px;justify-self:center}
.vue-bas .bouton-blanc{justify-content:space-between}
/* Once the photo is taken, ordering becomes the white button and the photo's own button steps back. */
.bouton-blanc.prise{background:var(--gris-haut);color:var(--blanc)}
.lien-commande{display:block;padding:14px 18px;border-radius:14px;border:2px solid var(--blanc);color:var(--blanc);font:600 17px/1.2 var(--corps);text-align:center;text-decoration:none}
.bouton-blanc.prise+.lien-commande{background:var(--blanc);color:var(--noir)}
.glisse{text-align:center;color:var(--doux);font-size:13px}
@media (hover:hover){.glisse{display:none}}

/* La sélection et le paiement */
.payer{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:22px var(--marge) 40px;max-width:640px}
.devis{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0}
.devis dt{color:var(--doux)}
.devis dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.devis .total{font-family:var(--titre);font-size:24px;color:var(--blanc)}
.accord{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:14px;color:var(--doux)}
.accord input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--blanc)}
.payer .bouton-blanc{width:100%;justify-content:space-between}
.alerte{margin:0;padding:12px 14px;border-radius:12px;background:var(--blanc);color:var(--noir);font-weight:600}
.sel-photos-liste{display:grid;gap:14px}
.sel-vide{display:grid;gap:16px;justify-items:start;padding:12px var(--marge)}
.sel-vide p{font-size:18px}
.sel-plus{margin:0;padding:0 var(--marge)}
.sel-plus a{color:var(--doux)}
.panier{position:fixed;inset:auto 0 0 0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px var(--marge) calc(14px + env(safe-area-inset-bottom));background:var(--noir);box-shadow:0 -14px 28px var(--noir)}
.panier span{font-variant-numeric:tabular-nums;font-weight:600}

/* Accueil sans reportage : trois photos du photographe et ce que la boutique fait. */
.attente-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.attente-photos::before{content:"";position:absolute;inset:0 0 auto 0;z-index:1;height:120px;background:linear-gradient(180deg,#000c,#0000)}
.attente-photos .logo{position:absolute;z-index:2;top:calc(18px + env(safe-area-inset-top));left:var(--marge)}
.attente-photos img:not(.logo){width:100%;aspect-ratio:1;object-fit:cover}
.attente-photos .attente-une{grid-column:1/-1;aspect-ratio:auto!important;height:min(56svh,540px)}
.attente-texte{display:grid;gap:16px;justify-items:start;padding:28px var(--marge) 12px;max-width:640px}
.attente h1{font-size:clamp(36px,9vw,64px);line-height:1}
.genres{font-family:var(--titre);font-size:20px;line-height:1.2;color:var(--doux)}
.attente-intro{font-size:17px;color:#DADADA}

/* Pages simples */
.simple .message{min-height:80svh;display:grid;align-content:center;justify-items:start;gap:18px;padding:40px var(--marge);max-width:640px;margin:0 auto}
.simple h1,.message h1{font-size:clamp(30px,7vw,44px)}
.message p{color:var(--doux)}
.texte{padding:28px var(--marge) 40px;max-width:68ch;margin:0 auto;display:grid;gap:12px}
.texte h1{font-size:clamp(28px,6vw,40px);margin:16px 0 8px}
.texte h2{font-size:20px;margin-top:18px}
.texte p{color:#DADADA}
.pied{display:flex;flex-wrap:wrap;gap:10px 22px;padding:28px var(--marge) calc(28px + env(safe-area-inset-bottom));color:var(--doux);font-size:14px}
.evenement .pied{padding-bottom:110px}
/* Le bandeau du haut n'existe que sur ordinateur : le téléphone garde le logo posé sur la photo. */
.barre-site{display:none}
.moment-texte{display:grid;gap:4px}
.demo{display:block;font-weight:600;font-size:15px;color:var(--blanc)}
.autres .demo{font-size:13px;margin-top:2px}
.bande img:nth-child(n+5){display:none}

/* Ordinateur : la même boutique, mise en page pour un grand écran au lieu d'être étirée. */
@media (min-width:900px){
  :root{--marge:32px;--large:1360px}
  .meta{font-size:15px}
  .barre-site{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:32px;height:76px;padding:0 var(--marge);background:var(--noir)}
  .barre-logo img{height:40px;width:auto}
  .barre-lien{color:var(--doux);text-decoration:none;font-size:16px}
  .barre-lien:hover{color:var(--blanc)}
  .barre-selection{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;background:var(--blanc);color:var(--noir);font-weight:600;text-decoration:none}
  .barre-selection span{font-variant-numeric:tabular-nums;font-weight:500}
  .panier,.une-haut,.intro-haut{display:none!important}

  /* Le dernier reportage à côté de son titre, les autres en grille. */
  .une,.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:56px;min-height:0;max-width:var(--large);margin:0 auto;padding:56px var(--marge) 24px;overflow:visible}
  .une-fond,.intro-fond{position:static;order:2;width:100%;height:auto;aspect-ratio:3/2;border-radius:18px}
  .une-texte,.intro-texte{position:static;background:none;padding:0;gap:18px}
  .une-titre,.intro h1{font-size:clamp(44px,4.4vw,72px)}
  .une .meta,.intro .meta,.prix{font-size:17px}
  .une:hover .une-fond{filter:brightness(1.06)}
  .autres{max-width:var(--large);padding:48px var(--marge) 16px;gap:22px}
  .autres h2{font-size:30px}
  .autres ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .autres a{grid-template-columns:1fr;gap:12px;align-items:start}
  .autres img{width:100%;height:auto;aspect-ratio:3/2;border-radius:14px}
  .autres strong{font-size:22px;margin-bottom:4px}

  /* Les moments en lignes : le nom à gauche, six vignettes à droite. */
  .trouver{max-width:var(--large);padding:24px var(--marge) 64px;gap:26px}
  .trouver h2{font-size:34px}
  .numero{max-width:520px}
  .moments{grid-template-columns:1fr;gap:14px}
  .moments a{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"texte bande";align-items:center;gap:28px;padding:16px;border-radius:16px;background:var(--gris)}
  .moments a:hover{background:var(--gris-haut)}
  .moment-texte{grid-area:texte}
  .moment-nom{font-size:24px;margin:0}
  .bande{grid-area:bande;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;background:none;border-radius:0}
  .bande img{aspect-ratio:3/2;border-radius:8px}
  .bande img:nth-child(n+5){display:block}

  /* La planche : des rangées où chaque photo garde sa forme, sans découpe. */
  .planche,.selection{padding-bottom:64px}
  .barre-haut{top:76px;max-width:var(--large);margin:0 auto;padding:18px var(--marge)}
  .barre-haut h2{font-size:28px}
  .grille{display:flex;flex-wrap:wrap;gap:8px;max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
  .grille::after{content:"";flex-grow:1000000}
  .tuile{--h:260px;aspect-ratio:auto;height:var(--h);flex:calc(var(--r,1.5) * 100) 1 calc(var(--r,1.5) * var(--h));border-radius:8px}
  .vignette:hover img{filter:brightness(1.08)}
  .ajout{right:10px;bottom:10px}
  .vide{width:100%;max-width:var(--large);margin:0 auto}
  .aide-planche{max-width:var(--large);margin:0 auto;padding:0 var(--marge) 16px;font-size:15px}
  .accord{font-size:15px}

  /* La photo en grand, ses commandes dans une colonne à droite. */
  .visionneuse>img{left:0;right:auto;width:calc(100% - 380px)}
  .vue-haut{right:380px}
  .vue-suiv{right:392px}
  .vue-bas{inset:0 0 0 auto;width:380px;padding:40px 32px;align-content:center;background:#0b0b0b}
  .vue-bas .bouton-blanc{max-width:none}
  .vue-bas .meta{font-size:15px}

  /* La sélection : les photos à gauche, le paiement à droite, toujours en vue. */
  .selection-corps{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start;max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
  .selection-corps .grille{padding:0;max-width:none;margin:0}
  .sel-vide,.sel-plus{padding:0}
  .payer{position:sticky;top:104px;max-width:none;padding:28px;border-radius:18px;background:var(--gris)}

  .attente{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"texte photos";align-items:center;gap:56px;max-width:var(--large);margin:0 auto;padding:56px var(--marge) 24px}
  .attente-texte{grid-area:texte;padding:0;gap:20px}
  .attente-photos{grid-area:photos;gap:12px}
  .attente-photos::before,.attente-photos .logo{display:none}
  .attente-photos img:not(.logo){aspect-ratio:3/2;border-radius:14px}
  .attente-photos .attente-une{height:auto;aspect-ratio:3/2!important;border-radius:18px}
  .attente h1{font-size:clamp(44px,4.4vw,72px)}
  .genres{font-size:24px}
  .pied{max-width:var(--large);margin:0 auto}
  @media (min-width:1400px){.tuile{--h:300px}}
  /* Grand écran : la page s'élargit et le texte grandit avec elle, au lieu de flotter au milieu. */
  @media (min-width:1700px){
    :root{--large:1600px}
    body{font-size:17px}
    .meta,.aide-planche,.accord{font-size:16px}
    .tuile{--h:340px}
    .moments a{grid-template-columns:280px minmax(0,1fr)}
    .moment-nom{font-size:27px}
    .barre-haut h2{font-size:32px}
    .selection-corps{grid-template-columns:minmax(0,1fr) 440px}
  }
  .evenement .pied{padding-bottom:28px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}