:root{
    --ink:#17181A;
    --ink-soft:#6B6A64;
    --ink-faint:#9A988F;
    --paper:#FFFFFF;
    --paper-2:#F4F1EA;
    --gold:#C89A5C;
    --gold-dark:#A87C41;
    --gold-tint:#F1E6D3;
    --pine:#222D26;
    --pine-2:#3A4A3D;
    --pine-tint:#D9C99A;
    --line:rgba(23,24,26,0.13);
    --line-soft:rgba(23,24,26,0.08);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--gold); color:var(--ink);}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media (max-width:640px){.wrap{padding:0 22px;}}
  img{display:block; max-width:100%;}

  .eyebrow{
    font-family:'Space Mono', monospace;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:0.72rem;
    color:var(--gold-dark);
    font-weight:700;
  }
  h1,h2,h3{font-family:'Manrope', sans-serif; font-weight:700; letter-spacing:-0.01em; color:var(--ink);}
  a{color:inherit;}

  /* ============ HEADER / NAV ============ */
  header{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,0.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:116px;
  }
  .logo-group{display:flex; align-items:center; gap:23px; text-decoration:none;}
  .logo-mark{width:68px; height:auto; flex-shrink:0;}
  .logo{
    font-family:'Manrope', sans-serif; font-weight:800; font-size:2.3rem;
    letter-spacing:0.01em; line-height:1.15; color:var(--ink);
  }
  .logo span{
    display:block; color:var(--ink-soft); font-weight:600; font-size:1.35rem;
    letter-spacing:0.16em; text-transform:uppercase; margin-top:2px;
  }
  .navlinks{display:flex; align-items:center; gap:38px; font-size:0.92rem; font-weight:500;}
  .navlinks a{text-decoration:none; position:relative; padding-bottom:4px;}
  .navlinks a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--gold); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .navlinks a:hover::after{transform:scaleX(1);}
  .nav-right{display:flex; align-items:center; gap:22px;}
  @media (max-width:820px){
    .navlinks{
      position:fixed; top:116px; left:0; right:0; bottom:auto;
      height:calc(100vh - 116px); overflow-y:auto;
      background:var(--paper);
      flex-direction:column; align-items:flex-start; justify-content:flex-start;
      gap:0; padding:12px 22px 28px; font-size:1.15rem;
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .22s ease, transform .22s ease;
      border-top:1px solid var(--line);
    }
    .navlinks a{width:100%; padding:16px 0; border-bottom:1px solid var(--line-soft);}
    .navlinks a::after{display:none;}
    #nav-toggle:checked ~ .navlinks{opacity:1; transform:translateY(0); pointer-events:auto;}
    .nav-right .btn-solid{padding:10px 16px; font-size:0.72rem;}
  }
  .hamburger{display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; z-index:70;}
  .hamburger span{display:block; height:2px; width:100%; background:var(--ink); transition:transform .2s ease, opacity .2s ease;}
  #nav-toggle{display:none;}
  @media (max-width:820px){
    .hamburger{display:flex;}
    #nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    #nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0;}
    #nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Mono', monospace; font-size:0.8rem; text-transform:uppercase;
    letter-spacing:0.07em; font-weight:700;
    padding:14px 24px; text-decoration:none; border:1px solid var(--ink);
    transition:all .2s ease; white-space:nowrap;
  }
  .btn-solid{background:var(--ink); border-color:var(--ink); color:var(--paper);}
  .btn-solid:hover{background:var(--gold-dark); border-color:var(--gold-dark); color:var(--ink);}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--ink);}

  /* ============ HERO ============ */
  .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center;
    min-height:600px; gap:40px;
  }
  @media (max-width:900px){.hero-grid{grid-template-columns:1fr; min-height:auto; padding-top:8px;}}
  .hero-text{padding:76px 0;}
  @media (max-width:900px){.hero-text{padding:36px 0 8px;}}
  .hero-text .eyebrow{display:block; margin-bottom:24px;}
  .hero-text h1{
    font-size:clamp(2.5rem, 5.6vw, 4.2rem);
    line-height:1.02;
    max-width:12ch;
    font-weight:800;
    letter-spacing:-0.02em;
  }
  .hero-text h1 em{color:var(--gold-dark); font-style:normal;}
  .hero-sub{
    margin-top:26px; max-width:42ch; color:var(--ink-soft); font-size:1.08rem;
  }
  .hero-cta{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap;}

  .hero-art{position:relative; height:100%; display:flex; align-items:stretch; justify-content:center; padding:20px 0 50px;}
  @media (max-width:900px){.hero-art{padding-bottom:36px;}}
  .hero-photo{
    width:100%; min-height:420px;
    background:var(--paper-2);
    border:1px solid var(--line);
    overflow:hidden;
  }
  .hero-photo img{
    width:100%; height:100%; min-height:420px;
    object-fit:cover; object-position:50% 0%;
    transform:scale(1.25); transform-origin:50% 0%;
  }
  @media (max-width:900px){
    .hero-photo{min-height:320px;}
    .hero-photo img{min-height:320px; object-position:50% 0%; transform:scale(1.22); transform-origin:50% 0%;}
  }

  .joint-divider{
    display:flex; align-items:center;
    padding:22px 0;
  }
  .joint-divider .line{flex:1; height:1px; background:var(--line);}

  section{padding:100px 0;}
  @media (max-width:760px){section{padding:64px 0;}}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head .eyebrow{margin-bottom:14px; display:block;}
  .section-head h2{font-size:clamp(1.85rem, 3.2vw, 2.5rem);}
  .section-head p{color:var(--ink-soft); margin-top:16px; font-size:1.02rem; max-width:52ch;}

  /* ============ SAVOIR-FAIRE (editorial list, no icons) ============ */
  .skills{border-top:1px solid var(--line);}
  .skill-row{
    display:grid; grid-template-columns:1.4fr 2fr; gap:40px;
    padding:38px 0; border-bottom:1px solid var(--line); align-items:baseline;
  }
  @media (max-width:700px){.skill-row{grid-template-columns:1fr; gap:10px; padding:28px 0;}}
  .skill-row h3{
    font-size:1.28rem; display:flex; align-items:baseline; gap:12px;
  }
  .skill-mark{width:9px; height:9px; background:var(--gold); flex-shrink:0; transform:translateY(-2px);}
  .skill-row p{color:var(--ink-soft); font-size:1rem; max-width:54ch;}

  /* ============ ABOUT ============ */
  .about{background:var(--paper-2);}
  .about-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:64px; align-items:start;}
  @media (max-width:860px){.about-grid{grid-template-columns:1fr; gap:40px;}}
  .about-text p{color:var(--ink-soft); font-size:1.05rem; margin-bottom:18px; max-width:56ch;}
  .about-text p strong{color:var(--ink); font-weight:700;}

  .stat-list{border-top:1px solid var(--line);}
  .stat-row{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:24px 0; border-bottom:1px solid var(--line);
  }
  .stat-num{font-family:'Manrope', sans-serif; font-size:2.1rem; font-weight:800; color:var(--gold-dark);}
  .stat-label{font-family:'Space Mono', monospace; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-soft); text-align:right; max-width:16ch;}

  /* ============ REALISATIONS ============ */
  .featured-frame{
    position:relative; aspect-ratio:16/7; width:100%;
    background:
      repeating-linear-gradient(135deg, transparent 0 22px, rgba(200,154,92,0.16) 22px 23px),
      var(--paper-2);
    border:1px solid var(--line);
    display:flex; align-items:flex-end; margin-bottom:64px;
    overflow:hidden;
  }
  .featured-frame img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; position:absolute; inset:0;}
  .featured-frame .frame-label{
    position:relative; z-index:2; padding:22px 26px;
    font-family:'Space Mono', monospace; font-size:0.72rem; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--ink-soft);
  }
  @media (max-width:700px){.featured-frame{aspect-ratio:4/5;}}

  .cat-block{padding:46px 0; border-top:1px solid var(--line);}
  .cat-block:first-of-type{border-top:none;}
  .cat-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
    margin-bottom:26px; flex-wrap:wrap;
  }
  .cat-head h3{font-size:1.4rem;}
  .cat-head p{color:var(--ink-soft); font-size:0.96rem; max-width:44ch;}
  .cat-num{font-family:'Space Mono', monospace; font-size:0.78rem; color:var(--ink-faint); letter-spacing:0.08em;}

  .cat-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:190px; gap:10px;
  }
  @media (max-width:760px){.cat-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px;}}
  @media (max-width:480px){.cat-grid{grid-template-columns:1fr; grid-auto-rows:230px;}}
  .photo-tile{
    position:relative; overflow:hidden;
    grid-column:span 1; grid-row:span 1;
    background:
      repeating-linear-gradient(135deg, transparent 0 16px, rgba(23,24,26,0.05) 16px 17px),
      var(--paper-2);
    border:1px solid var(--line);
  }
  .photo-tile.tile-hero{grid-column:span 2; grid-row:span 2;}
  .photo-tile.tile-secondary{grid-column:span 2; grid-row:span 1;}
  @media (max-width:480px){
    .photo-tile.tile-hero, .photo-tile.tile-secondary{grid-column:span 1;}
  }
  .photo-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .photo-tile .tile-tag{
    position:absolute; left:0; bottom:0; padding:9px 12px;
    font-family:'Space Mono', monospace; font-size:0.62rem; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--ink-faint);
  }

  /* ============ TEAM ============ */
  .team{background:var(--pine); color:var(--paper);}
  .team .eyebrow{color:var(--pine-tint);}
  .team h2{color:var(--paper);}
  .team .section-head p{color:rgba(255,255,255,0.62);}
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14); margin-top:10px;}
  @media (max-width:760px){.team-grid{grid-template-columns:1fr;}}
  .team-card{background:var(--pine); padding:36px 30px;}
  .team-role{font-family:'Space Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--pine-tint); margin-bottom:10px;}
  .team-name{font-family:'Manrope', sans-serif; font-size:1.35rem; font-weight:700;}

  /* ============ CONTACT ============ */
  .contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px;}
  @media (max-width:860px){.contact-grid{grid-template-columns:1fr; gap:44px;}}
  .contact-item{margin-bottom:26px;}
  .contact-item .eyebrow{display:block; margin-bottom:6px;}
  .contact-item a, .contact-item div{font-size:1.15rem; font-family:'Manrope', sans-serif; font-weight:600;}
  .contact-item a{text-decoration:none; border-bottom:1px solid var(--line);}
  .contact-item a:hover{border-color:var(--gold-dark); color:var(--gold-dark);}
  .contact-call{margin-top:8px;}

  form{display:flex; flex-direction:column; gap:18px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  label{font-family:'Space Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft);}
  input, textarea{
    background:var(--paper-2); border:1px solid var(--line); padding:14px 16px;
    font-family:'Inter', sans-serif; font-size:0.98rem; color:var(--ink);
  }
  input:focus, textarea:focus{outline:2px solid var(--gold); outline-offset:1px;}
  textarea{resize:vertical; min-height:120px;}
  form .btn{align-self:flex-start; margin-top:6px; border:none; cursor:pointer;}

  footer{
    border-top:1px solid var(--line); padding:38px 0;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    font-family:'Space Mono', monospace; font-size:0.76rem; color:var(--ink-soft); letter-spacing:0.02em;
  }

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

/* ============ AJOUTS — architecture multipage ============ */
/* État "page active" dans la navigation */
.navlinks a[aria-current="page"]{ color: var(--gold-dark); }
.navlinks a[aria-current="page"]::after{ transform: scaleX(1); }

/* Numéro de catégorie masqué quand une galerie est utilisée en aperçu
   partiel sur une page métier (pas de sens hors du portfolio complet) */
.cat-num.is-hidden{ display:none; }

/* ============ V2 — nav simplifiée, formats hero cohérents ============ */
.navlinks a[href^="tel:"]{ white-space: nowrap; }

/* Format hero large et cohérent pour les 3 pages métier (moins de zoom,
   plus de structure visible, format rectangulaire plus généreux que
   l'ancien cadrage "carré" hérité du hero de l'accueil) */
.hero-grid--wide{ grid-template-columns: 0.88fr 1.12fr; }
@media (max-width:900px){
  /* Corrige un oubli : cette règle passait au-dessus de l'empilement
     mobile de .hero-grid et écrasait le mode une-colonne, ce qui
     compressait la photo hero en bande verticale sur smartphone. */
  .hero-grid--wide{ grid-template-columns:1fr; }
  /* Même correctif pour le bloc photo d'équipe (grille dédiée, non
     couverte par les règles .hero-grid existantes) : empilement en
     une colonne, photo en dessous du texte, comme partout ailleurs
     sur le site en version mobile. */
  .team-photo-grid{ grid-template-columns:1fr !important; gap:28px !important; }
}
.hero-photo--wide{ min-height:480px; }
.hero-photo--wide img{ min-height:480px; object-fit:cover; transform:none; }
@media (max-width:900px){
  .hero-photo--wide{ min-height:280px; }
  .hero-photo--wide img{ min-height:280px; }
}

/* Emplacement en attente d'une photo — choix visuel à valider par le client
   avant de figer l'image définitive (page Aménagements bois) */
.hero-photo-pending{
  display:flex; align-items:center; justify-content:center;
  min-height:480px; width:100%;
  border:1px dashed var(--line);
  background:var(--paper-2);
  color:var(--ink-faint);
  font-family:'Space Mono', monospace;
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em;
  text-align:center; padding:24px;
}
@media (max-width:900px){ .hero-photo-pending{ min-height:280px; } }

/* Préparation à l'ajout futur de légendes par photo (figure/figcaption) —
   aucun style visuel supplémentaire tant que les légendes ne sont pas
   rédigées ; sert uniquement à préparer la structure HTML. */
figure.photo-tile, figure.featured-frame{ margin:0; }
figure.photo-tile figcaption, figure.featured-frame figcaption{
  font-family:'Space Mono', monospace; font-size:0.68rem; color:var(--ink-faint);
  margin-top:6px; text-transform:uppercase; letter-spacing:0.04em;
}

/* Liste provisoire du périmètre d'intervention — texte définitif à
   rédiger plus tard ; reprend les libellés fournis par le client. */
.scope-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:22px; padding:0; }
.scope-tags li{
  font-family:'Space Mono', monospace; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:2px; padding:6px 12px;
}

/* ============ Version de travail numérotée (temporaire) ============ */
/* Badge visible mais discret sur chaque photo, pour identification
   rapide pendant la passe de correction (C1, C2, T1, B1...). */
.photo-tile .tile-index{
  position:absolute; z-index:3; top:8px; left:8px;
  background:rgba(23,24,26,0.75);
  color:#fff;
  font-family:'Space Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.03em;
  padding:3px 7px;
  border-radius:2px;
  line-height:1;
  pointer-events:none;
}
.photo-tile.tile-hero .tile-index,
.photo-tile.tile-secondary .tile-index{
  font-size:0.78rem;
  padding:4px 9px;
}
@media (max-width:480px){
  .photo-tile .tile-index{ font-size:0.62rem; padding:2px 6px; }
}
/* ============ Lightbox galeries ============ */
/* Garde-fou : évite qu'un débordement horizontal éventuel de la page
   (ex. barre de nav sur très petits écrans) ne décale le positionnement
   fixe des contrôles de la lightbox (croix, flèches). N'a aucun effet
   visuel en usage normal. */
html, body{ overflow-x:hidden; }

/* Indice visuel léger, uniquement au survol (aucun élément permanent
   ajouté sur les photos). Ne modifie ni la taille ni la mise en page
   des vignettes existantes. */
.photo-tile{ cursor:pointer; }
.photo-tile img{ transition:transform .35s ease, filter .35s ease; }
.photo-tile:hover img{ transform:scale(1.035); filter:brightness(0.94); }
@media (hover:none){
  .photo-tile:hover img{ transform:none; filter:none; }
}

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,16,17,0.94);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility 0s linear .28s;
}
.lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .28s ease, visibility 0s linear 0s;
}
.lightbox-figure{
  position:relative; max-width:92vw; max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-img{
  max-width:92vw; max-height:88vh;
  width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:0; transform:scale(0.985);
  transition:opacity .22s ease, transform .22s ease;
}
.lightbox-img.is-visible{ opacity:1; transform:none; }

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:fixed;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(255,255,255,0.28);
  color:#fff; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.55);
}
.lightbox-close{
  top:20px; right:20px; width:42px; height:42px; border-radius:50%;
  font-size:1.3rem; line-height:1;
}
.lightbox-prev,
.lightbox-next{
  top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  font-size:1.4rem; line-height:1;
}
.lightbox-prev{ left:18px; }
.lightbox-next{ right:18px; }
.lightbox-counter{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.72);
  font-family:'Space Mono', monospace; font-size:0.75rem;
  letter-spacing:0.06em;
}
@media (max-width:640px){
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; font-size:1.15rem; }
  .lightbox-close{ width:38px; height:38px; top:14px; right:14px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

/* ============ Correctif responsive — très petits écrans (≤480px) ============ */
/* Objectif unique : garantir que le bouton menu (hamburger) reste
   toujours visible et cliquable sur les smartphones étroits (375 à
   478px), en réduisant proportionnellement le logo et le bouton Devis.
   Aucun changement de couleur, de police, de structure ou de contenu :
   uniquement des tailles réduites, dans le même esprit graphique. */
@media (max-width:480px){
  nav.wrap{ height:72px; }
  .logo-group{ gap:10px; }
  .logo-mark{ width:36px; }
  .logo{ font-size:1rem; line-height:1.1; }
  .logo span{ font-size:0.56rem; letter-spacing:0.09em; margin-top:1px; }
  .nav-right{ gap:8px; }
  .nav-right .btn-solid{ padding:7px 10px; font-size:0.58rem; letter-spacing:0.04em; }
  .hamburger{ width:22px; gap:4px; }
  #nav-toggle:checked ~ .navlinks{ top:72px; height:calc(100vh - 72px); }
  .navlinks{ top:72px; height:calc(100vh - 72px); }
}

/* ============ Carte équipe enrichie (accueil) ============ */
.team-desc{
  font-family:'Inter', sans-serif; font-size:0.92rem; line-height:1.55;
  color:rgba(255,255,255,0.68); margin-top:12px;
}

/* ============ Anti-spam formulaire (honeypot) ============ */
/* Masqué visuellement et pour les lecteurs d'écran, mais toujours
   présent dans le DOM : les robots de spam le remplissent presque
   toujours automatiquement, ce qui permet de bloquer l'envoi côté JS
   sans backend ni service tiers. */
.hp-field{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}