/* Grether Family Office — version sombre, dans l'esprit d'anaxago.com :
   bleu nuit profond, grand titre serif dont la seconde ligne est en italique,
   cartes photo a coins arrondis, boutons en pilule, beaucoup d'air.
   Les photos sont des images generees, declarees comme illustratives dans
   les mentions : elles ne montrent ni les locaux ni les actifs du client. */

:root{
  --nuit:#0b1826;
  --nuit-2:#0f2130;
  --carte:#14293a;
  --ivoire:#eef1f2;
  --doux:#9aacb8;
  --laiton:#c8a96a;
  --trait:rgba(238,241,242,.13);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;
  --marge:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nuit);color:var(--ivoire);
  font:300 17px/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
.dedans{max-width:1180px;margin:0 auto;padding-inline:var(--marge)}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0}
em{font-style:italic}

/* ---------------------------------------------------------------- tete --- */
.tete{
  position:fixed;inset:0 0 auto;z-index:40;
  padding-block:18px;
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.tete.posee{
  background:rgba(11,24,38,.86);backdrop-filter:saturate(150%) blur(14px);
  padding-block:11px;border-bottom-color:var(--trait);
}
.tete .dedans{display:flex;align-items:center;gap:clamp(18px,4vw,48px)}
.logotype{
  font-family:var(--serif);font-size:21px;letter-spacing:.005em;text-decoration:none;
  white-space:nowrap;
}
.logotype span{color:var(--doux)}
.tete nav{display:flex;gap:clamp(16px,2.4vw,32px);margin-left:auto}
.tete nav a{
  text-decoration:none;color:var(--doux);font-size:15px;
  transition:color .25s var(--ease);
}
.tete nav a:hover,.tete nav a:focus-visible{color:var(--ivoire)}

.pilule{
  display:inline-block;text-decoration:none;white-space:nowrap;
  padding:11px 22px;border:1px solid var(--trait);border-radius:999px;
  font-size:15px;color:var(--ivoire);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.pilule:hover,.pilule:focus-visible{background:var(--ivoire);border-color:var(--ivoire);color:var(--nuit)}
.pilule.pleine{
  border-color:var(--laiton);color:var(--nuit);background:var(--laiton);
  padding:14px 28px;font-size:15.5px;
}
.pilule.pleine:hover,.pilule.pleine:focus-visible{background:#dcc08a;border-color:#dcc08a;color:var(--nuit)}

/* ------------------------------------------------------------ ouverture --- */
.ouverture{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(96svh,900px);
  display:flex;align-items:center;
  padding-block:clamp(130px,18vh,190px) clamp(70px,12vh,120px);
  text-align:center;
}
.ouverture .fond{position:absolute;inset:0;z-index:-2}
.ouverture .fond img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.ouverture::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(11,24,38,.78) 0%,rgba(11,24,38,.42) 34%,rgba(11,24,38,.72) 72%,var(--nuit) 100%),
    radial-gradient(90% 65% at 50% 45%,rgba(11,24,38,.12),rgba(11,24,38,.62));
}
h1{
  font-size:clamp(42px,7.4vw,96px);line-height:1.04;letter-spacing:-.012em;
  margin-bottom:clamp(22px,3vw,30px);
}
h1 .l{display:block;overflow:hidden;padding-bottom:.045em}
h1 .l > span{display:block}
h1 em{color:var(--laiton)}
.chapeau{
  margin:0 auto;max-width:54ch;color:#d4dde2;
  font-size:clamp(16.5px,1.7vw,19px);line-height:1.68;font-weight:300;
}
.ouverture .pilule.pleine{margin-top:clamp(30px,4vw,40px)}

/* --------------------------------------------------------------- propos --- */
.propos{padding-block:clamp(66px,10vw,118px);text-align:center}
.propos p{
  margin:0 auto;max-width:34ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(23px,2.9vw,36px);line-height:1.42;letter-spacing:-.005em;
  max-width:24ch;
}
@media (min-width:760px){.propos p{max-width:30ch}}

/* ------------------------------------------------------------ activites --- */
.activites{padding-block:clamp(50px,7vw,84px) clamp(66px,10vw,116px)}
h2{
  font-size:clamp(28px,3.6vw,44px);line-height:1.2;letter-spacing:-.008em;
  margin-bottom:clamp(30px,4vw,48px);
}
.cartes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:clamp(18px,2.2vw,28px);
}
.carte{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.carte:hover{border-color:rgba(200,169,106,.42);transform:translateY(-3px)}
.vue{overflow:hidden;aspect-ratio:4/3;background:var(--nuit-2)}
.vue img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.carte:hover .vue img{transform:scale(1.045)}
.carte h3{font-size:23px;line-height:1.3;margin:26px 26px 10px}
.carte p{margin:0 26px 28px;color:var(--doux);font-size:15.5px;line-height:1.7}
.carte.muette{background:var(--nuit-2);justify-content:center;padding-block:14px}
.carte.muette h3{color:var(--laiton)}

/* --------------------------------------------------------------- phrase --- */
.phrase{
  padding-block:clamp(74px,12vw,132px);text-align:center;
  border-block:1px solid var(--trait);background:var(--nuit-2);
}
.phrase p{
  margin:0 auto;max-width:22ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(27px,4.4vw,52px);line-height:1.26;letter-spacing:-.01em;
}
.phrase em{color:var(--laiton)}

/* ---------------------------------------------------------- gouvernance --- */
.gouvernance{padding-block:clamp(66px,10vw,116px)}
.deux{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(22px,4vw,56px);
}
.deux p{margin:0;color:var(--doux);font-size:17px;line-height:1.78}
.deux strong{color:var(--ivoire);font-weight:400}

/* -------------------------------------------------------------- contact --- */
.contact{
  padding-block:clamp(66px,10vw,116px);text-align:center;
  border-top:1px solid var(--trait);
}
.intro{margin:0 auto;max-width:58ch;color:var(--doux);font-size:16.5px}
.courriel{
  display:inline-block;margin-top:clamp(28px,4vw,38px);
  font-family:var(--serif);font-size:clamp(22px,3.4vw,38px);line-height:1.2;
  text-decoration:none;color:var(--ivoire);
  border-bottom:1px solid rgba(200,169,106,.5);padding-bottom:6px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.courriel:hover,.courriel:focus-visible{color:var(--laiton);border-bottom-color:var(--laiton)}
.postale{margin:clamp(26px,4vw,36px) 0 0;color:var(--doux);font-size:15px}

/* ----------------------------------------------------------------- pied --- */
.pied{background:#081220;border-top:1px solid var(--trait);padding-block:clamp(52px,7vw,84px)}
.pied h2{font-size:clamp(21px,2.4vw,27px);margin-bottom:clamp(24px,3vw,34px)}
.registre{
  margin:0 0 clamp(30px,4vw,42px);
  display:grid;grid-template-columns:minmax(150px,250px) minmax(0,1fr);
  gap:0 28px;font-size:15px;
}
.registre dt{padding:9px 0;color:var(--doux);border-top:1px solid var(--trait)}
.registre dd{margin:0;padding:9px 0;border-top:1px solid var(--trait)}
.registre dt:first-of-type,.registre dd:first-of-type{border-top:0}
.mention{margin:0 0 .9em;max-width:76ch;font-size:14px;line-height:1.7;color:#7d909d}
.mention:last-child{margin-bottom:0}

:focus-visible{outline:2px solid var(--laiton);outline-offset:3px}

/* ------------------------------------------------------------ mouvement --- */
/* Un seul moment orchestre : l'ouverture. Rien ne s'anime au defilement. */
@keyframes monte{from{transform:translateY(104%)}to{transform:translateY(0)}}
@keyframes parait{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes respire{from{transform:scale(1.07)}to{transform:scale(1)}}

html.js h1 .l > span{transform:translateY(104%);animation:monte 1.1s var(--ease) both}
html.js h1 .l:nth-child(1) > span{animation-delay:.15s}
html.js h1 .l:nth-child(2) > span{animation-delay:.29s}
html.js .ouverture .chapeau{animation:parait .9s var(--ease) .52s both}
html.js .ouverture .pilule.pleine{animation:parait .9s var(--ease) .68s both}
html.js .ouverture .fond img{animation:respire 2.4s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .ouverture *,html.js h1 .l > span{animation:none !important;opacity:1 !important;transform:none !important}
  .carte:hover{transform:none}
  .carte:hover .vue img{transform:none}
}

/* ---------------------------------------------------------------- petit --- */
@media (max-width:860px){
  .tete nav{display:none}
  .registre{grid-template-columns:1fr;gap:0}
  .registre dd{padding-top:0;border-top:0}
  .registre dt{padding-bottom:2px}
  .registre dd:first-of-type{border-top:0}
  .registre dt:first-of-type{border-top:0}
}
@media (max-width:560px){
  .ouverture{min-height:88svh}
  .postale{font-size:14px}
}