/* M14 Production : système commun aux 4 branches (accueil, Shotz, Social, Web).
   Repris de M14 Web pour que tout se tienne : encre, ivoire, or.
   Titres Bricolage Grotesque étroit et gras, texte Hanken Grotesk, étiquettes en Martian Mono. */
:root{
  /* encre (fonds sombres) */
  --bg:#F6F5F1;--bg2:#ECEAE3;--tile:#FFFFFF;--fg:#131210;--fg2:#3A3732;--muted:#5F5C55;--line:rgba(19,18,16,.12);
  /* ivoire (fonds clairs) */
  --paper:#F6F5F1;--paper2:#ECEAE3;--card:#FFFFFF;--ink:#131210;--ink2:#5F5C55;--line-l:#DDDAD1;
  /* or */
  --gold:#C9A24B;--gold-hi:#836312;--gold-on-dark:#D9B863;--gold-head:#A8801F;--gold-lo:#836312;--gold-a:rgba(131,99,18,.4);--gold-glow:rgba(201,162,75,.16);
  --display:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p{margin:0}
h1,h2,h3,.disp{font-family:var(--display);font-stretch:75%;font-weight:800;letter-spacing:-.012em;line-height:.95;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1240px;margin:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.gold{color:var(--gold-hi)}
h1 .gold,h2 .gold,h3 .gold,.disp .gold{color:var(--gold-head)}
.mono{font-family:var(--mono);font-stretch:87.5%;font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-stretch:87.5%;font-size:11px;letter-spacing:.07em;font-weight:500;color:var(--gold-hi);text-transform:uppercase}
.kicker i{font-style:normal;width:26px;height:26px;border:1px solid var(--gold-a);border-radius:50%;display:grid;place-items:center;font-size:9.5px;letter-spacing:0}
.rec{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--gold);animation:rec 1.6s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}

/* barre du haut */
.top{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:rgba(246,245,241,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top.solid{background:rgba(246,245,241,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:42px;height:42px;object-fit:contain}
.logo b{font-family:var(--display);font-stretch:75%;font-weight:800;font-size:19px;letter-spacing:0;white-space:nowrap}
.logo b span{display:inline-block;margin-left:6px;font-family:var(--mono);font-stretch:87.5%;font-size:9.5px;font-weight:600;letter-spacing:.06em;background:var(--gold);color:var(--ink);border-radius:5px;padding:3px 6px;vertical-align:4px}
.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{font-size:14px;font-weight:500;color:var(--fg2);padding:8px 12px;border-radius:999px;transition:.2s}
.top nav a:hover,.top nav a.on{color:var(--fg);background:rgba(19,18,16,.06)}
.top nav a span{font-family:var(--mono);font-size:10px;color:var(--gold-hi);margin-right:3px}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;background:var(--gold);color:var(--ink);border:1.5px solid transparent;border-radius:999px;padding:0 22px;font-weight:700;font-size:15.5px;transition:transform .16s,box-shadow .16s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,162,75,.24)}
.btn.ghost{background:transparent;color:var(--fg);border-color:rgba(19,18,16,.22)}
.btn.ghost:hover{border-color:var(--gold);box-shadow:none}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{box-shadow:0 14px 34px rgba(19,18,16,.22)}
.btn.sm{min-height:40px;padding:0 16px;font-size:13.5px}
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;min-height:44px}
.arrow::after{content:"→";color:var(--gold-hi);transition:transform .2s}
.arrow:hover::after{transform:translateX(4px)}

/* sections */
.sec{padding:120px 0;position:relative}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:46px}
.sec-head h2{font-size:clamp(44px,6.6vw,92px);margin-top:18px}
.sec-head p{color:var(--muted);font-size:17px;max-width:52ch;margin-top:18px}
.card{background:var(--tile);border:1px solid var(--line);border-radius:20px}

/* sections claires (comme M14 Web) */
.light{background:#FFFFFF;color:var(--ink)}
.light .sec-head p,.light .muted{color:var(--ink2)}
.light .kicker,.light .gold{color:var(--gold-lo)}
.light .kicker i{border-color:rgba(131,99,18,.45)}
.light .arrow::after{color:var(--gold-lo)}
.light .card{background:var(--paper);border-color:var(--line-l)}
.light .btn.ghost{color:var(--ink);border-color:var(--line-l)}

/* pied de page */
.contact{padding:110px 0 70px;text-align:center;border-top:1px solid var(--line);background:radial-gradient(60% 80% at 50% 0%,var(--gold-glow),transparent 70%)}
.contact h2{font-size:clamp(46px,7vw,96px)}
.contact p{color:var(--fg2);font-size:17px;margin:20px auto 32px;max-width:48ch}
.contact .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.contact .note{font-size:13px;color:var(--muted);margin:26px auto 0}
.legal{border-top:1px solid var(--line);padding-top:30px;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.legal img{width:44px;height:44px;object-fit:contain;opacity:.8}
.legal nav{display:flex;gap:6px}.legal nav a{padding:12px 6px}.legal nav a:hover{color:var(--gold-hi)}

/* apparition au défilement */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:860px){
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .sec{padding:84px 0}
  .sec-head{grid-template-columns:1fr;gap:22px}
  .sec-head>.btn{justify-self:start}
}
@media (max-width:380px){
  .top .wrap{gap:12px}
  .logo{gap:6px}.logo img{width:36px;height:36px}
  .logo b{font-size:0}.logo b span{font-size:9px;margin-left:0;vertical-align:0}
  .top .btn.sm{padding:0 13px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- États de chargement (visibilité de l'état du système) ---------- */
/* barre de progression de la page */
.m14-bar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));box-shadow:0 0 12px rgba(201,162,75,.6);transition:width .4s ease,opacity .5s ease .2s;pointer-events:none}
.m14-bar.done{opacity:0}
/* squelette scintillant tant qu'une image ou une vidéo n'est pas chargée */
@keyframes shimmer{to{background-position:-200% 0}}
.is-loading{background-color:var(--paper2)!important;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%)!important;background-size:200% 100%!important;animation:shimmer 1.3s linear infinite;color:transparent}
.light .is-loading{background-color:var(--paper2)!important;background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%)!important}
.just-loaded{animation:fadeLoad .5s ease both}
@keyframes fadeLoad{from{opacity:0}to{opacity:1}}
/* roue de chargement pour les vidéos qui bufferisent */
.m14-spin{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:3px solid rgba(246,245,241,.22);border-top-color:var(--gold-hi);animation:spin14 .8s linear infinite;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s}
.m14-spin.on{opacity:1}
@keyframes spin14{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-loading{animation:none!important}.m14-spin{animation:spin14 2s linear infinite!important}}