/* Vestland — blanc de chemise, noir d'encre, rouge du sigle. La couture rouge relie les trois métiers. */
:root{
  --blanc:#FBFAF9;--blanc-2:#F1EFEC;--blanc-3:#E6E2DD;
  --encre:#121212;--encre-2:#1C1C1C;
  --rouge:#C4161C;--rouge-clair:#E8676C;
  --gris:#6F6B67;--gris-clair:#9E9A95;--trait:#DEDAD5;--trait-nuit:#2E2E2E;
  --titre:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;
  --texte:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --gout:22px;--max:1300px;--ease:cubic-bezier(.22,.8,.26,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:var(--texte);font-size:16.5px;font-weight:400;line-height:1.65;
  padding-inline:var(--gout);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--titre);font-weight:600;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}
section[id]{scroll-margin-top:92px}

.surligne{font-family:var(--titre);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge)}
.surligne-clair{color:var(--rouge-clair)}
.amorce{font-size:1.02rem;font-weight:400;color:var(--gris);max-width:50ch}
.amorce-clair{color:#AFABA6}
.amorce b{color:var(--blanc);font-weight:600}

.mention{
  margin:0 calc(-1*var(--gout));padding:.55rem var(--gout);background:var(--encre);color:var(--gris-clair);
  font-size:.68rem;font-weight:400;text-align:center;line-height:1.55;
}
.mention b{color:var(--blanc);font-weight:600}

/* entête */
.entete{
  position:sticky;top:0;z-index:40;margin:0 calc(-1*var(--gout));padding:.8rem var(--gout);
  background:rgba(251,250,249,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait);display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.8rem;
}
.marque{margin-right:auto;display:block;line-height:0}
.marque img{width:132px}
.menu{display:none;gap:1.8rem}
.menu a{font-size:.82rem;font-weight:500;text-decoration:none;color:var(--gris);padding-block:.2rem;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}
.menu a:hover{color:var(--encre);border-bottom-color:var(--rouge)}
@media (min-width:1020px){.menu{display:flex}}

/* boutons */
.bouton{
  display:inline-block;padding:.8rem 1.5rem;background:var(--rouge);color:#fff;
  font-family:var(--titre);font-size:.82rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;border:2px solid var(--rouge);
  transition:background .28s,color .28s;
}
.bouton:hover{background:transparent;color:var(--rouge)}
.bouton-clair{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.bouton-clair:hover{background:transparent;color:var(--blanc)}
.lien-couture{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--titre);font-size:.82rem;font-weight:600;
  text-decoration:none;padding-bottom:.25rem;cursor:pointer;
  background-image:repeating-linear-gradient(90deg,var(--rouge) 0 7px,transparent 7px 12px);
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:color .3s;
}
.lien-couture:hover{color:var(--rouge)}

/* ouverture */
.ouverture{max-width:var(--max);margin-inline:auto;display:grid;gap:2.6rem;align-items:center;padding-block:3rem 3.4rem}
.ouverture-texte{display:grid;gap:1.3rem;justify-items:start}
.ouverture h1{font-size:clamp(2.6rem,6.4vw,5rem);margin:.3rem 0 0;max-width:13ch}
.actes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:.6rem}
.portrait-ouverture{margin:0;justify-self:center;width:100%;max-width:400px;position:relative}
.portrait-ouverture::before{
  content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:2px;
  background-image:repeating-linear-gradient(180deg,var(--rouge) 0 9px,transparent 9px 16px);
}
.portrait-ouverture img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (min-width:920px){
  .ouverture{grid-template-columns:1.12fr .88fr;gap:4rem;padding-block:3.6rem 4rem}
  .portrait-ouverture{max-width:420px}
}

/* les trois métiers */
.trois{
  list-style:none;margin:0 calc(-1*var(--gout));padding:0;background:var(--encre);color:var(--blanc);
  display:grid;grid-template-columns:1fr;
}
.trois li{display:grid;gap:.15rem;padding:1.5rem var(--gout);border-bottom:1px solid var(--trait-nuit);position:relative}
.trois li:last-child{border-bottom:0}
.trois span{font-family:var(--titre);font-size:.7rem;font-weight:700;letter-spacing:.18em;color:var(--rouge-clair)}
.trois b{font-family:var(--titre);font-size:1.32rem;font-weight:600;letter-spacing:-.02em}
.trois em{font-style:normal;font-size:.86rem;color:var(--gris-clair)}
@media (min-width:860px){
  .trois{grid-template-columns:repeat(3,1fr)}
  .trois li{border-bottom:0;border-right:1px solid var(--trait-nuit);padding-block:2rem}
  .trois li:last-child{border-right:0}
}

/* un métier */
.metier{max-width:var(--max);margin-inline:auto;padding-block:4.4rem;display:grid;gap:2.6rem}
.metier-tete{display:grid;gap:1.1rem;justify-items:start}
.repere{display:flex;align-items:center;gap:.8rem;font-family:var(--titre);font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.repere span{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--rouge);color:#fff;font-size:.72rem;letter-spacing:.02em;
}
.repere-clair{color:var(--blanc)}
.metier h2{font-size:clamp(1.8rem,3.9vw,2.9rem);max-width:19ch}
.points{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:0;width:100%;max-width:34rem}
.points li{padding:.7rem 0;border-top:1px solid var(--trait);font-size:.95rem;display:flex;gap:.8rem;align-items:baseline}
.points li::before{content:"";width:8px;height:2px;background:var(--rouge);flex:none;transform:translateY(-3px)}
.points li:last-child{border-bottom:1px solid var(--trait)}
.points-clair li{border-color:var(--trait-nuit)}
.metier-tete .bouton{margin-top:.7rem}
.metier-sombre{
  max-width:none;margin:0 calc(-1*var(--gout));padding:4.4rem var(--gout) 4.8rem;
  background:var(--encre);color:var(--blanc);
}
.metier-sombre .metier-tete,.metier-sombre .galerie-pr{max-width:var(--max);margin-inline:auto;width:100%}
@media (min-width:980px){
  .metier{grid-template-columns:.86fr 1.14fr;column-gap:4rem;align-items:start}
  .metier-sombre{grid-template-columns:.86fr 1.14fr;column-gap:4rem}
  .metier-sombre .metier-tete{max-width:none;margin-inline:0}
  .metier-sombre .galerie-pr{max-width:none;margin-inline:0}
  .metier-tete{position:sticky;top:110px}
}

/* galeries */
.galerie-sm,.galerie-pr,.galerie-fo{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.galerie-sm figure,.galerie-pr figure,.galerie-fo figure{margin:0;overflow:hidden;background:var(--blanc-2)}
.galerie-sm img,.galerie-pr img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .9s var(--ease)}
.galerie-fo img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--ease)}
.galerie-sm figure:hover img,.galerie-pr figure:hover img,.galerie-fo figure:hover img{transform:scale(1.04)}
.large{grid-column:span 2}
.galerie-sm .large img,.galerie-pr .large img{aspect-ratio:3/2}
.metier-sombre figure{background:var(--encre-2)}
@media (min-width:600px){
  .galerie-sm,.galerie-pr{grid-template-columns:repeat(3,1fr);gap:1.1rem}
  .galerie-fo{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .large{grid-column:span 2}
}
@media (min-width:1200px){.galerie-fo{grid-template-columns:repeat(3,1fr)}.galerie-fo .large{grid-column:span 2}}

/* contact */
.contact{margin:0 calc(-1*var(--gout));padding:4.4rem var(--gout) 4.8rem;background:var(--rouge);color:#fff}
.contact>*{max-width:var(--max);margin-inline:auto}
.contact-tete{display:grid;gap:.8rem}
.contact-tete h2{font-size:clamp(1.8rem,3.9vw,2.9rem);color:#fff;margin-top:.3rem;max-width:20ch}
.contact .surligne-clair{color:#FFD2D4}
.voies{display:grid;gap:2.6rem;margin-top:2.8rem}
.voie{display:grid;gap:1rem;align-content:start;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.36)}
.voie h3{font-size:1.6rem;color:#fff}
.voie p{color:rgba(255,255,255,.88);max-width:40ch}
.voie .bouton{justify-self:start;margin-top:.3rem}
.coordonnees{list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.coordonnees li{display:grid;gap:.1rem}
.coordonnees span{font-family:var(--titre);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFD2D4}
.coordonnees a{font-size:1.02rem;text-decoration:none;word-break:break-word}
.coordonnees a:hover{color:#FFD2D4}
@media (min-width:860px){.voies{grid-template-columns:1fr 1fr;gap:4rem}}

/* pied */
.pied{margin:0 calc(-1*var(--gout));padding:3rem var(--gout) 1.5rem;background:var(--encre);color:var(--gris-clair)}
.pied-zone{max-width:var(--max);margin-inline:auto}
.pied-logo{width:170px;display:block;background:#FFFFFF;padding:.85rem 1.1rem;border-radius:2px}
.pied-mot{font-family:var(--titre);font-size:1.15rem;font-weight:500;color:var(--blanc);margin-top:1rem}
.pied-bas{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--trait-nuit);font-size:.74rem}

/* mouvement */
@keyframes monte{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes parait{from{opacity:0}to{opacity:1}}
@keyframes coud{from{background-size:100% 0}to{background-size:100% 2px}}
.ouverture .surligne{animation:monte .85s var(--ease) .06s both}
.ouverture h1{animation:monte 1s var(--ease) .16s both}
.ouverture .amorce{animation:monte .9s var(--ease) .34s both}
.ouverture .actes{animation:monte .9s var(--ease) .46s both}
.portrait-ouverture{animation:parait 1.1s var(--ease) .35s both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}