/* ============================================================
   Portfolio Hugo Fleury — feuille de style partagée
   DA reprise de hugo-fleury.com (vert profond / crème / ambre)
   ============================================================ */

:root{
  /* Palette — identique à la landing page */
  --vert:#012B1F;
  --vert-clair:#023F2C;
  --vert-fonce:#001810;
  --creme:#F5F5DC;
  --creme-clair:#FAFAEC;
  --creme-fonce:#E8E8C9;
  --ambre:#E8A33D;
  --or:#c9a14a;
  --or-clair:#d9b56a;
  --rouge:#E0402E;
  --redline:#C2452D;

  /* Gris de travail */
  --fg:#EDEAE0;
  --fg2:rgba(237,234,224,.72);
  --fg3:rgba(237,234,224,.46);
  --ligne:rgba(245,245,220,.14);
  --ligne-forte:rgba(245,245,220,.26);

  /* Courbe d'animation de la LP */
  --e:cubic-bezier(0.22,1,0.36,1);

  /* Typographies */
  --titre:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --corps:'Inter',-apple-system,sans-serif;
  --serif:'EB Garamond',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* Rythme */
  --gut:clamp(1.2rem,4vw,5rem);
  --max:1280px;
  --rad:16px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--corps);
  background:var(--vert-fonce);
  color:var(--fg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- Grain : casse le rendu numérique plat (emprunté au Carnet) ---- */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Barre de progression dorée (reprise de la LP) ---- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--or),var(--ambre));
  z-index:1000;
  transition:width .1s linear;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
  padding:1.1rem var(--gut);
  background:rgba(1,24,16,0);
  backdrop-filter:blur(0px);
  transition:background .4s var(--e), backdrop-filter .4s var(--e), border-color .4s var(--e);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(1,24,16,.88);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--ligne);
}
/* Marque : portrait rond à gauche du nom */
.nav-marque{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--titre);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.01em;
  color:var(--creme);
  text-decoration:none;
  line-height:1.2;
  flex:none;
}
.nav-marque img{
  width:40px;height:40px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 18%;
  border:1px solid rgba(201,161,74,.45);
  flex:none;
  display:block;
}
/* Le nom garde sa taille ; seule la ligne de métier est en petites capitales */
.nav-marque .nom{
  display:block;
  font-family:var(--titre);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--creme);
}
.nav-marque .nom span{
  display:block;
  font-family:var(--corps);
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg3);
  margin-top:.18rem;
}
.nav-liens{
  display:flex;gap:1.9rem;align-items:center;
  flex:1;                 /* occupe l'espace entre la marque et les actions */
  justify-content:center;
}
.nav-liens a{
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg2);
  text-decoration:none;
  transition:color .25s var(--e);
}
.nav-liens a:hover{color:var(--creme)}
/* Actions de la nav : WhatsApp (icône seule) + Calendly */
.nav-actions{
  display:flex;align-items:center;gap:.7rem;
  flex:none;
}
.nav-wa{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:8px;
  border:1px solid var(--ligne-forte);
  color:var(--fg2);
  text-decoration:none;
  flex:none;
  transition:border-color .3s var(--e), color .3s var(--e), background .3s var(--e);
}
.nav-wa:hover{
  border-color:var(--creme);
  color:var(--creme);
  background:rgba(245,245,220,.06);
}
.nav-wa svg{width:17px;height:17px;flex:none}

.nav-cta{
  font-family:var(--corps);
  font-size:.83rem;
  font-weight:500;
  padding:.62rem 1.25rem;
  border-radius:8px;
  background:var(--creme-clair);
  color:var(--vert);
  text-decoration:none;
  white-space:nowrap;
  transition:transform .3s var(--e), box-shadow .3s var(--e);
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(245,245,220,.16);
}
@media(max-width:860px){
  .nav-liens{display:none}
}

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

.sur-titre{
  display:flex;align-items:center;gap:.85rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);
  margin-bottom:1.5rem;
}
.sur-titre::before{
  content:'';width:34px;height:1px;background:var(--or);flex:none;
}

h1,h2,h3{font-family:var(--titre);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}

/* ============================================================
   RÉVÉLATION AU SCROLL
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--e), transform .7s var(--e);
}
.reveal.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied{
  border-top:1px solid var(--ligne);
  margin-top:7rem;
  padding:4rem 0 3rem;
  background:var(--vert-fonce);
}
.pied-grille{
  display:grid;
  /* la colonne de gauche respire, les deux de droite se rapprochent */
  grid-template-columns:2fr .85fr .85fr;
  gap:2.6rem 2rem;
  align-items:start;
}
.pied h3{
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin-bottom:.9rem;
  color:var(--creme);
  max-width:24ch;         /* deux lignes plutot que trois */
  text-wrap:balance;
}
.pied p{color:var(--fg2);font-size:.94rem;max-width:52ch}
.pied-col h4{
  font-family:var(--corps);
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);margin-bottom:1rem;font-weight:500;
}
.pied-col a{
  display:block;
  color:var(--fg2);
  text-decoration:none;
  font-size:.92rem;
  padding:.3rem 0;
  transition:color .25s var(--e);
}
.pied-col a:hover{color:var(--creme)}
.pied-bas{
  margin-top:3.5rem;padding-top:1.6rem;
  border-top:1px solid var(--ligne);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--fg3);
}

@media(max-width:800px){
  .pied-grille{grid-template-columns:1fr;gap:2.2rem}
}

/* ============================================================
   PASTILLE RETOUR EN HAUT
   ============================================================ */
.haut-page{
  position:fixed;
  right:clamp(1.1rem,2.4vw,2.2rem);
  /* remontee : la ligne du bas du pied touche les deux bords */
  bottom:clamp(4.5rem,7vh,5.5rem);
  z-index:950;
  width:52px;height:52px;
  border-radius:50%;
  border:none;
  background:var(--creme-clair);
  color:var(--vert);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:1.05rem;
  box-shadow:0 8px 28px rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .4s var(--e), transform .4s var(--e),
             visibility .4s var(--e), box-shadow .3s var(--e);
}
.haut-page.on{opacity:1;visibility:visible;transform:none}
.haut-page:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 34px rgba(201,161,74,.35);
}
.haut-page svg{width:17px;height:17px}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--corps);font-size:.92rem;font-weight:500;
  padding:.85rem 1.6rem;border-radius:9px;
  text-decoration:none;
  transition:transform .3s var(--e), box-shadow .3s var(--e), background .3s var(--e);
}
.btn-plein{background:var(--creme-clair);color:var(--vert)}
.btn-plein:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(245,245,220,.18)}
.btn-vide{border:1px solid var(--ligne-forte);color:var(--creme)}
.btn-vide:hover{border-color:var(--creme);background:rgba(245,245,220,.05)}
.btn .fl{transition:transform .3s var(--e)}
.btn:hover .fl{transform:translateX(4px)}