@charset "UTF-8";

/* =================================================================
   Studio — feuille de style « ombre et lumière »

   Direction : la page reprend les deux températures de lumière d'un
   plateau, tungstène et lumière du jour, posées sur un noir chaud.
   Les sections alternent pénombre et clarté ; la transition se fait
   par une échelle de gris, l'objet de calibration le plus banal
   d'un studio.

   Le plateau, la technique et les tarifs vivent dans la pénombre.
   Le dehors, les repas et le moment d'équipe passent en clair.
   ================================================================= */

:root{
  --ombre:#100E0B;          /* noir chaud d'un studio éteint */
  --penombre:#1C1915;
  --gris:#7A7266;
  --gris-clair:#A9A196;

  --tungstene:#F2B15A;      /* source principale, ~3200 K */
  --jour:#9FC2D6;           /* complément, ~5600 K */

  --blanc-chaud:#F5F1E9;
  --blanc-casse:#EAE4D8;
  --trait:#332E27;          /* filets sur fond sombre */
  --trait-clair:#D6CEC1;    /* filets sur fond clair */

  --maxw:1100px;
  --pad:clamp(1.25rem,4vw,3rem);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:4.6rem}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--ombre);
  color:var(--blanc-chaud);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:1.02rem;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}

/* height:auto est indispensable : les images portent des attributs
   width et height, et sans cette règle le navigateur conserve la
   hauteur déclarée tout en réduisant la largeur — l'image se
   retrouve alors étirée verticalement. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--tungstene);color:var(--ombre)}
:focus-visible{outline:3px solid var(--tungstene);outline-offset:3px}


/* ---------- structure ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.bande{padding:clamp(3rem,7.5vw,5.6rem) 0}
.bande--clair{background:var(--blanc-chaud);color:var(--ombre)}
.bande--penombre{background:var(--penombre)}


/* ---------- signature : l'échelle de gris ----------
   Bande de calibration, du noir au blanc. Chaque changement de
   section fait passer la page de l'ombre à la lumière. */
.echelle{display:flex;height:10px}
.echelle span{flex:1}
.echelle span:nth-child(1){background:#100E0B}
.echelle span:nth-child(2){background:#231F1A}
.echelle span:nth-child(3){background:#3B352D}
.echelle span:nth-child(4){background:#5C5449}
.echelle span:nth-child(5){background:#847A6C}
.echelle span:nth-child(6){background:#AEA495}
.echelle span:nth-child(7){background:#D3CABB}
.echelle span:nth-child(8){background:#F5F1E9}
.echelle--descendante{flex-direction:row-reverse}


/* ---------- signature secondaire : la coupe de lumière ----------
   Halo chaud en haut à gauche, comme un volet de projecteur qui
   coupe le faisceau sur un fond. */
.faisceau{position:relative;overflow:hidden}
.faisceau::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% 0%,rgba(242,177,90,.16),transparent 62%);
}
.faisceau > *{position:relative}


/* ---------- typographie ---------- */
/* Anton n'existe qu'en une seule graisse. On ne déclare donc pas
   de font-weight : le navigateur ne doit pas la graisser lui-même,
   ce qui l'empâterait. Corps relevés et interlignage resserré, la
   police étant condensée. */
h1,h2,h3{
  font-family:Anton,"Instrument Sans",sans-serif;
  font-weight:400;line-height:.98;letter-spacing:-.01em;
  margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.6vw,4.4rem)}
h2{font-size:clamp(1.75rem,4vw,2.7rem)}
/* Les sous-titres restent en Instrument Sans : Anton en petit corps
   devient illisible, et sa graisse unique ne descend pas. */
h3{
  font-family:"Instrument Sans",sans-serif;font-weight:600;
  font-size:1.1rem;letter-spacing:-.01em;line-height:1.35;
}

p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

.surtitre{
  font-family:"Martian Mono",ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--tungstene);margin:0 0 1.1rem;
}
.bande--clair .surtitre{color:#9A6A1E}

.chapo{
  font-size:clamp(1.03rem,1.7vw,1.17rem);
  max-width:60ch;margin:1.3rem 0 0;color:#CFC8BB;
}
.bande--clair .chapo{color:#4A443B}

.note{font-size:.9rem;color:var(--gris-clair);max-width:58ch}
.bande--clair .note{color:#6B6459}


/* ---------- en-tête ---------- */
/* Barre de navigation fixée en haut de l'écran.
   Le fond est légèrement translucide et flouté : sur les bandeaux
   sombres la barre se fond, sur les sections claires elle reste
   lisible sans masquer brutalement le contenu qui défile dessous. */
.entete{
  position:sticky;top:0;z-index:60;
  background:rgba(16,14,11,.92);
  border-bottom:1px solid var(--trait);
}
@supports (backdrop-filter:blur(10px)){
  .entete{background:rgba(16,14,11,.78);backdrop-filter:blur(10px) saturate(1.2)}
}
.entete__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-top:1.05rem;padding-bottom:1.05rem;
}

.marque{
  font-family:Anton,sans-serif;font-weight:400;font-size:1.28rem;
  letter-spacing:.01em;text-decoration:none;line-height:1.1;
}
.marque small{
  display:block;font-family:"Martian Mono",monospace;font-weight:400;
  font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tungstene);margin-top:.22rem;
}

.menu{display:flex;gap:1.6rem;align-items:center}
.menu a{
  font-size:.93rem;text-decoration:none;padding:.35rem 0;
  border-bottom:2px solid transparent;color:var(--blanc-casse);
}
.menu a:hover,.menu a[aria-current="page"]{border-bottom-color:var(--tungstene)}
.menu a.menu__cta{
  background:var(--tungstene);color:var(--ombre);
  padding:.52rem 1rem;font-weight:600;border-bottom:0;
}
.menu a.menu__cta:hover{background:var(--blanc-chaud)}

.burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--blanc-chaud);margin:5px 0}

@media(max-width:880px){
  .burger{display:block}
  .entete__in{position:relative}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:61;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ombre);padding:0 var(--pad) 1.4rem;
    border-bottom:1px solid var(--trait);
  }
  .menu[data-ouvert="true"]{display:flex}
  .menu a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--trait)}
  .menu a.menu__cta{margin-top:.9rem;text-align:center}
}


/* ---------- bandeau d'ouverture ---------- */
.ouverture__in{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(2.6rem,6vw,3.8rem)}
.ouverture h1{max-width:18ch}

.reperes{
  display:flex;flex-wrap:wrap;gap:.55rem 2.2rem;margin:2.1rem 0 0;
  font-family:"Martian Mono",monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tungstene);
}

.ouverture__media{margin:0}
.ouverture__media img{width:100%;height:clamp(220px,40vh,460px);object-fit:cover}


/* ---------- fiche technique ---------- */
.fiche{border-top:1px solid var(--trait);margin-top:2.2rem}
.bande--clair .fiche{border-top-color:var(--trait-clair)}
.fiche__ligne{
  display:grid;grid-template-columns:minmax(135px,.38fr) 1fr;gap:.6rem 2rem;
  padding:.8rem 0;border-bottom:1px solid var(--trait);
}
.bande--clair .fiche__ligne{border-bottom-color:var(--trait-clair)}
.fiche__cle{
  font-family:"Martian Mono",monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);padding-top:.32rem;
}
.fiche__val strong{font-weight:600}
@media(max-width:620px){.fiche__ligne{grid-template-columns:1fr;gap:.1rem}}


/* ---------- tarifs ---------- */
.tarifs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);margin-top:2.1rem;
}
.tarif{background:var(--ombre);padding:1.7rem 1.5rem}
.tarif__libelle{
  font-family:"Martian Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);
}
.tarif__prix{
  font-family:Anton,sans-serif;font-weight:400;font-size:2.3rem;
  letter-spacing:0;margin:.5rem 0 .3rem;line-height:1;color:var(--tungstene);
}
.tarif__prix small{font-size:.82rem;font-weight:600;letter-spacing:0}
.tarif__note{font-size:.87rem;color:var(--gris-clair);margin:0}


/* ---------- signature de contenu : la journée ----------
   Le déroulé d'une journée de tournage. Vit en registre clair,
   parce que c'est le moment où l'on sort du plateau. */
.journee{list-style:none;margin:2.4rem 0 0;padding:0;position:relative;max-width:44rem}
.journee::before{
  content:"";position:absolute;left:5.4rem;top:.7rem;bottom:.7rem;width:2px;
  background:linear-gradient(var(--tungstene),rgba(242,177,90,.12));
}
.journee li{position:relative;display:grid;grid-template-columns:5.4rem 1fr;gap:0 2rem;padding:.72rem 0}
.journee .heure{
  font-family:"Martian Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);padding-top:.42rem;
  text-align:right;padding-right:1.1rem;
}
/* Les plages horaires tiennent sur deux lignes plutôt que d'être
   coupées au milieu d'une heure. */
.journee .heure b{display:block;font-weight:400}
.journee .fait{position:relative;padding-left:1.4rem}
.journee .fait::before{
  content:"";position:absolute;left:-5px;top:.6rem;width:11px;height:11px;
  border-radius:50%;background:var(--tungstene);box-shadow:0 0 0 4px var(--blanc-chaud);
}
.journee strong{display:block;font-weight:600}
.journee .d{font-size:.93rem;color:#6B6459}
@media(max-width:640px){
  .journee::before{left:.5rem}
  .journee li{grid-template-columns:1fr;gap:.1rem}
  .journee .heure{text-align:left;padding-left:2rem;padding-right:0}
  .journee .fait{padding-left:2rem}
  .journee .fait::before{left:.5rem;transform:translateX(-50%)}
}


/* ---------- listes ---------- */
.liste{list-style:none;margin:1.5rem 0 0;padding:0;max-width:62ch}
.liste li{position:relative;padding:.5rem 0 .5rem 1.6rem;border-bottom:1px solid var(--trait)}
.bande--clair .liste li{border-bottom-color:var(--trait-clair)}
.liste li::before{
  content:"";position:absolute;left:0;top:1.08rem;width:8px;height:8px;background:var(--tungstene);
}

.etiquettes{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0}
.etiquettes li{
  font-family:"Martian Mono",monospace;font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--trait);
  padding:.44rem .8rem;color:var(--gris-clair);
}
.bande--clair .etiquettes li{border-color:var(--trait-clair);color:#6B6459}


/* ---------- deux colonnes ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.duo{grid-template-columns:1fr}}


/* ---------- films ---------- */
.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:2rem;margin-top:2.3rem}
.film__cadre{position:relative;padding-top:56.25%;background:#000;overflow:hidden}
.film__cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film__cadre--vertical{padding-top:150%}
.film__meta{
  font-family:"Martian Mono",monospace;font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tungstene);margin:.85rem 0 .25rem;
}
.bande--clair .film__meta{color:#9A6A1E}
.film h3{margin-bottom:.3rem}
.film p{font-size:.92rem;color:var(--gris-clair);margin:0}
.bande--clair .film p{color:#6B6459}


/* ---------- bouton ---------- */
.bouton{
  display:inline-block;background:var(--tungstene);color:var(--ombre);
  font-weight:600;font-size:.98rem;text-decoration:none;
  padding:.85rem 1.7rem;border:2px solid var(--tungstene);
  transition:background .15s,border-color .15s,color .15s;
}
.bouton:hover{background:transparent;color:var(--tungstene)}
.bande--clair .bouton:hover{background:var(--ombre);border-color:var(--ombre);color:var(--blanc-chaud)}


/* ---------- formulaire ---------- */
.formulaire{max-width:640px;margin-top:2rem}
.champ{margin-bottom:1.25rem}
.champ label{
  display:block;font-family:"Martian Mono",monospace;font-size:.65rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:.42rem;
}
.champ input,.champ textarea,.champ select{
  width:100%;font-family:"Instrument Sans",sans-serif;font-size:1rem;
  padding:.8rem .9rem;border:1px solid var(--trait);
  background:var(--ombre);color:var(--blanc-chaud);border-radius:0;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:0;border-color:var(--tungstene);box-shadow:0 0 0 3px rgba(242,177,90,.22);
}
.formulaire button{
  background:var(--tungstene);color:var(--ombre);border:2px solid var(--tungstene);
  font-family:"Instrument Sans",sans-serif;font-weight:600;font-size:1rem;
  padding:.85rem 1.8rem;cursor:pointer;
}
.formulaire button:hover{background:transparent;color:var(--tungstene)}

/* champ piège : hors écran, jamais display:none */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alerte{
  margin:1.4rem 0 0;padding:.9rem 1.1rem;
  border-left:4px solid var(--tungstene);background:rgba(242,177,90,.1);
  font-size:.95rem;
}


/* ---------- pied de page ---------- */
.pied{background:var(--ombre);color:var(--gris-clair);padding:2.8rem 0 2rem;font-size:.9rem}
.pied__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.pied__titre{
  font-family:"Martian Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tungstene);margin:0 0 .8rem;font-weight:400;
}
.pied a{color:var(--blanc-casse);text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.4rem}
.pied__bas{
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--trait);
  font-family:"Martian Mono",monospace;font-size:.64rem;letter-spacing:.08em;
}


/* ---------- images de contenu, pleine largeur sur mobile ---------- */
@media(max-width:700px){
  .duo img{
    width:calc(100% + var(--pad) * 2);max-width:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  }
}