/* Boreal Agency — refonte 2026 · feuille de style unique (FR à la racine, EN sous /en/) */

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:#FBFBFA;color:#171716;font-family:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#171716;text-decoration:none}a:hover{color:#8C8C88}
img,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul{margin:0}
.page{display:flex;flex-direction:column;width:100%;min-width:0;min-height:100vh}
.page>footer{margin-top:auto}
.wrap{padding-inline:40px}
:focus-visible{outline:1px solid #171716;outline-offset:3px}

/* ---------- En-tête ---------- */
.hd{display:flex;justify-content:space-between;align-items:center;height:72px;gap:24px}
.hd.hd-fix{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(251,251,250,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}  /* pages intérieures : figé au défilement */
.hd-over{position:absolute;top:0;left:0;right:0;z-index:2}  /* accueil : posé sur la vidéo, texte blanc */
.hd-over a{color:#FFFFFF}.hd-over a:hover{color:rgba(255,255,255,.7)}.hd-over .nav a.on{border-bottom-color:#FFFFFF}
.brand{display:flex;align-items:baseline;gap:16px;min-width:0}
.wm{font-weight:500;letter-spacing:.2em;font-size:13px;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:center;gap:28px;font-size:13px}
.nav a{padding-block:14px;white-space:nowrap}
.nav a.on{border-bottom:1px solid #171716}
.nav .lang{padding-block:14px;font-size:11px;letter-spacing:.12em;color:#8C8C88}  /* lien FR / EN vers la page équivalente */
.nav .lang:hover{color:#171716}
.hd-over .nav .lang{color:rgba(255,255,255,.7)}.hd-over .nav .lang:hover{color:#FFFFFF}

/* ---------- Typographie ---------- */
.disp{font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:300;letter-spacing:-.01em;text-wrap:balance}
.h1{font-size:54px;line-height:1.06}
.h1-intro{font-size:46px;line-height:1.12}
.h1-svc{font-size:46px;line-height:1.08}
.state{font-size:34px;line-height:1.2}
.muted{color:#8C8C88}
.soft{color:#4A4A48}
.mono{font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8C8C88}
.txt{display:flex;flex-direction:column;gap:18px;max-width:52ch}
.lnk{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.02em;padding-block:12px}
.dot{width:14px;height:14px;border-radius:50%;border:1px solid #171716;position:relative;flex:none}
.dot:after{content:"";position:absolute;inset:4px;border-radius:50%;background:#171716}

/* ---------- Accueil (vidéo plein écran, sans défilement) ---------- */
body.home{overflow:hidden;height:100vh;height:100svh;background:#0E0E0E}
.page.home{position:relative}
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#0E0E0E}
.hero video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}
.hero img{position:absolute;left:50%;top:42%;width:150px;transform:translate(-50%,-50%)}
.hero-txt{position:absolute;left:40px;right:40px;bottom:calc(5% + 96px);text-align:center;align-items:center;display:flex;flex-direction:column;gap:14px;color:#FFFFFF}
.hero-txt .h1{font-size:40px;line-height:1.08}
.hero-txt p{font-size:14px;line-height:1.6;color:#FFFFFF;white-space:nowrap}

/* ---------- Bandeau aurore (vidéo passée en noir et blanc) ---------- */
.band{display:block;width:100%;height:180px;object-fit:cover;filter:grayscale(1) contrast(1.05);background:#EFEFEC}

/* ---------- À propos : accordéon d'images ---------- */
.fan{display:flex;gap:4px;height:420px}
.fan img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;transition:flex .6s cubic-bezier(.2,.7,.2,1)}
.fan img:hover{flex:3 1 0}

/* ---------- Services : 4 colonnes de mots-clés ---------- */
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;border-top:1px solid #E6E6E2;padding-top:40px}
.cols h2{font-size:15px;font-weight:500;margin-bottom:10px}
.cols ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:#8C8C88;line-height:1.5}
.cols a{color:#8C8C88;border-bottom:1px solid #E6E6E2;display:inline-flex;align-items:center;gap:5px}.cols a .arr{flex:none;display:inline-block}.cols a:hover{color:#171716;border-color:#171716}

/* ---------- Contact ---------- */
.ft{display:grid;gap:40px}
.ct{grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #E6E6E2;padding-top:40px}  /* 2 cellules sur 3 colonnes : l'adresse au tiers */
.cell{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.copy{appearance:none;background:none;border:1px solid #E6E6E2;padding:0 11px;min-height:35px;font:inherit;font-size:11px;letter-spacing:.04em;cursor:pointer;color:#171716}
.copy:hover{border-color:#171716}

/* ---------- Pied de page ---------- */
.bar{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid #E6E6E2;padding-block:24px;font-size:12px;color:#8C8C88}

/* ---------- Préférences d'accessibilité ---------- */
@media (prefers-reduced-motion:reduce){.hero video,.band{display:none}.hero,body.home{background:#DADAD6}}

/* ---------- Tablette et téléphone ---------- */
@media (max-width:900px){
  .wrap{padding-inline:20px}
  .nav{gap:18px}
  .h1{font-size:40px}.h1-intro{font-size:32px}.h1-svc{font-size:36px}.state{font-size:26px}
  .hero{height:100vh;height:100svh;min-height:420px}.hero img{width:110px}
  .hero-txt{left:20px;right:20px;bottom:calc(14% + env(safe-area-inset-bottom,0px));gap:10px}.hero-txt p{white-space:normal;font-size:13px}.hero-txt .h1{font-size:30px}
  .band{height:120px}
  .fan{height:260px;gap:3px}.fan img:nth-child(even){display:none}  /* 14 fragments au lieu de 27 */
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .ft{grid-template-columns:1fr}
}

/* ---------- Téléphone ---------- */
@media (max-width:520px){
  .nav{gap:14px;font-size:12px}.wm{font-size:12px;letter-spacing:.1em}
  .hero-txt{top:72%;bottom:auto}  /* texte ancré au tiers inférieur, indépendant de la hauteur réelle de l'écran */
  .cols{grid-template-columns:1fr}
}

/* ---------- Petits téléphones (FR par défaut : « À propos » est plus long) ---------- */
@media (max-width:400px){
  .hd{gap:12px}.nav{gap:11px}.wm{font-size:11px;letter-spacing:.08em}
}