/* Feuille commune aux pages legales de MNR Studio.
   Volontairement sobre : pas d'animation, pas de video, pas de scene.
   Une page de mentions legales doit se lire et s'imprimer, rien d'autre. */

:root{
  --noir:#0A0A0A; --noir-2:#141414; --noir-3:#1C1C1C;
  --blanc:#FFFFFF; --jaune:#FFDE00;
  --txt:#FFFFFF; --txt-2:#A1A1A1; --txt-3:#8A8A8A;
  --ligne:#2A2A2A; --ligne-2:#383838;
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --nav-h:72px; --container:820px; --r:4px;
  --ease:cubic-bezier(.22,1,.36,1);
  --t-xs:clamp(11.5px,.72vw,12px);
  --t-sm:clamp(13px,.9vw,14px);
  --t-base:clamp(15px,1.05vw,16.5px);
  --t-lg:clamp(21px,2.0vw,27px);
  --t-2xl:clamp(29px,3.6vw,46px);
  --tr-display:-.035em; --tr-body:-.006em; --tr-caps:.16em;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noir);color:var(--txt);font-family:var(--sans);
  font-size:var(--t-base);line-height:1.62;letter-spacing:var(--tr-body);
  font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--jaune);color:var(--noir)}
:focus-visible{outline:2px solid var(--jaune);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,40px)}

.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  background:rgba(10,10,10,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;
  max-width:1180px}
.logo{font:700 21px/1 var(--display);letter-spacing:-.04em;text-decoration:none;
  display:flex;align-items:baseline;gap:9px}
.logo span{font:500 var(--t-xs)/1 var(--sans);letter-spacing:var(--tr-caps);
  color:var(--txt-3);text-transform:uppercase}
.nav-r{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav-r a{font:500 var(--t-sm)/1 var(--sans);color:var(--txt-2);text-decoration:none;
  transition:color .25s var(--ease)}
.nav-r a:hover{color:var(--blanc)}
.btn{display:inline-flex;align-items:center;background:var(--jaune);color:var(--noir);
  text-decoration:none;white-space:nowrap;min-height:44px;
  font:600 var(--t-sm)/1 var(--sans);padding:0 18px;border-radius:var(--r);
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
.btn:hover{transform:translateY(-1px);opacity:.92}

/* Sur un petit ecran, logo + deux liens + bouton ne tiennent pas sur une
   ligne : le logo mordait sur les liens et le bouton passait sur deux lignes.
   On garde ce qui sert vraiment, le retour au site et l'appel. Les autres
   liens restent accessibles dans le pied de page. */
@media(max-width:600px){
  .logo span{display:none}
  .nav-r a:not(.btn){display:none}
  .nav-r{gap:0}
  .btn{padding:0 15px;font-size:13px}
}
@media(max-width:820px){
  .foot nav a{min-height:38px;display:inline-flex;align-items:center}
}

.head{padding:clamp(56px,8vw,104px) 0 clamp(28px,3.4vw,44px);border-bottom:1px solid var(--ligne)}
.eyebrow{font:500 var(--t-xs)/1 var(--sans);letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--jaune);margin-bottom:20px}
h1{font:700 var(--t-2xl)/1.06 var(--display);letter-spacing:var(--tr-display);margin:0;
  text-wrap:balance}
.maj{margin:20px 0 0;font:400 var(--t-sm)/1.5 var(--sans);color:var(--txt-3)}

main{padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,88px)}
h2{font:700 var(--t-lg)/1.2 var(--display);letter-spacing:-.03em;
  margin:clamp(38px,4.4vw,56px) 0 14px;text-wrap:balance}
main > .wrap > section:first-child h2{margin-top:0}
h3{font:500 var(--t-base)/1.35 var(--sans);color:var(--blanc);margin:24px 0 8px}
p{margin:0 0 14px;color:var(--txt-2);text-wrap:pretty}
p:last-child{margin-bottom:0}
ul{margin:0 0 14px;padding-left:20px;color:var(--txt-2)}
li{margin-bottom:7px}
li::marker{color:var(--txt-3)}
strong,b{color:var(--blanc);font-weight:500}
a[href^="mailto:"],a[href^="tel:"],main a[href^="http"],main a[href$=".html"]{
  color:var(--jaune);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em}

/* Champ que Mounir doit completer avant publication. Volontairement voyant :
   une mention legale incomplete mise en ligne est pire que pas de page du tout. */
.todo{display:inline-block;background:#2A2205;border:1px dashed var(--jaune);
  border-radius:3px;padding:1px 7px;color:var(--jaune);
  font:500 13px/1.5 var(--sans);white-space:nowrap}

.box{border:1px solid var(--ligne);border-left:2px solid var(--jaune);border-radius:var(--r);
  background:var(--noir-2);padding:20px 24px;margin:22px 0}
.box p{margin:0;font-size:var(--t-sm);color:var(--txt-2)}
.box p + p{margin-top:10px}

table{width:100%;border-collapse:collapse;margin:0 0 18px}
th,td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;
  border-bottom:1px solid var(--ligne);font-size:var(--t-sm);color:var(--txt-2)}
th{color:var(--blanc);font-weight:500;width:40%}
tr:last-child th,tr:last-child td{border-bottom:none}

/* Sous 620px, deux colonnes laissent 130px au libelle, ce qui hache les
   intitules en trois lignes. On empile : le libelle au-dessus, la valeur
   en dessous, chaque ligne separee. Plus lisible qu'un tableau comprime,
   et sans defilement horizontal. */
@media(max-width:620px){
  table,tbody,tr,th,td{display:block;width:auto}
  tr{padding:13px 0;border-bottom:1px solid var(--ligne)}
  tr:last-child{border-bottom:none}
  th,td{border-bottom:none;padding:0;width:auto}
  th{margin-bottom:4px;font-size:var(--t-xs);letter-spacing:.04em;
    text-transform:uppercase;color:var(--txt-3);font-weight:500}
  td{color:var(--txt-2)}
}

.foot{border-top:1px solid var(--ligne);padding:clamp(32px,4vw,52px) 0}
.foot .wrap{max-width:1180px;display:flex;flex-wrap:wrap;gap:18px;
  justify-content:space-between;align-items:center}
.foot p{margin:0;font-size:var(--t-xs);color:var(--txt-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{font-size:var(--t-xs);color:var(--txt-3);text-decoration:none}
.foot nav a:hover{color:var(--blanc)}

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

@media print{
  .nav,.foot nav,.btn{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  h1,h2,h3,strong,b{color:#000}
  p,li,td,th{color:#222}
  .box{border-color:#999;background:#f5f5f5}
  .todo{background:#ffe;border-color:#000;color:#000}
  a{color:#000}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}