/* Collin Depierreux — feuille de style (01/11/2026) */

@font-face{font-family:"Roboto Slab";src:url("fonts/robotoslab.woff2") format("woff2");font-weight:300 800;font-display:swap;}
@font-face{font-family:"Source Sans 3";src:url("fonts/sourcesans3.woff2") format("woff2");font-weight:400 700;font-display:swap;}

:root{
  --noir:#1d1d1b;
  --jaune:#f9b412;
  --papier:#f5f3ee;
  --gris:#5d5b56;
  --filet:rgba(29,29,27,.15);
  --slab:"Roboto Slab",Rockwell,serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  --marge:clamp(1.25rem,5vw,4.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);font-size:1.125rem;line-height:1.6;color:var(--noir);background:var(--papier);}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--noir);outline-offset:3px;}
.cadre{max-width:1240px;margin:0 auto;padding:0 var(--marge);}

/* EN-TÊTE */
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:5.5rem;}
.marque{display:flex;align-items:center;gap:.9rem;text-decoration:none;}
.marque .picto{width:2.6rem;height:auto;}
.marque .nom{width:8.5rem;height:auto;}
.entete-contact{display:flex;gap:.75rem;align-items:center;}
.bouton{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.15rem;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid var(--noir);transition:background .2s,color .2s;}
.bouton svg{width:1.05rem;height:1.05rem;}
.bouton-plein{background:var(--noir);color:var(--papier);}
.bouton-plein:hover{background:#3a3a37;border-color:#3a3a37;}
.bouton-creux:hover{background:var(--noir);color:var(--papier);}

/* OUVERTURE */
.ouverture{padding:clamp(2.5rem,6vw,5rem) 0 clamp(4rem,8vw,7rem);}
.ouverture .cadre{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch;}
.surtitre{font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;}
.surtitre::before{content:"";width:1.75rem;height:4px;background:var(--jaune);}
h1{font-family:var(--slab);font-weight:700;font-size:clamp(2.6rem,5.6vw,4.75rem);line-height:1.02;letter-spacing:-.015em;}
.chapeau{margin-top:1.75rem;max-width:33rem;font-size:1.2rem;color:#3b3a36;}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem;}
.panneau{background:var(--jaune);display:grid;place-items:center;min-height:24rem;position:relative;overflow:hidden;}
.panneau img{width:68%;max-width:22rem;}
.panneau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(-45deg,var(--noir) 0 14px,var(--jaune) 14px 28px);}
.js .panneau{clip-path:inset(0 0 100% 0);animation:volet 1s cubic-bezier(.7,0,.2,1) .15s forwards;}
.js .panneau img{opacity:0;transform:translateY(14px) rotate(-4deg);animation:poser .9s cubic-bezier(.2,.7,.2,1) .8s forwards;}
@keyframes volet{to{clip-path:inset(0 0 0 0);}}
@keyframes poser{to{opacity:1;transform:none;}}

/* SERVICES */
.services{padding:clamp(4rem,8vw,7rem) 0;border-top:1px solid var(--filet);}
.titre-section{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin-bottom:clamp(2.5rem,5vw,4rem);align-items:baseline;}
.titre-section p{font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);}
h2{font-family:var(--slab);font-weight:650;font-size:clamp(2rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.01em;}
.liste-services{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem);}
.liste-services li{padding:1.75rem 0;border-top:3px solid var(--noir);}
.liste-services h3{font-family:var(--slab);font-weight:650;font-size:1.5rem;line-height:1.2;display:flex;gap:.8rem;align-items:baseline;}
.liste-services h3 span{font-family:var(--sans);font-size:.875rem;font-weight:700;background:var(--jaune);padding:.05rem .4rem;}
.liste-services p{margin-top:.6rem;color:#3b3a36;}
.liste-services .detail{margin-top:.5rem;font-size:1rem;color:var(--gris);}

/* CONTACT */
.contact{background:var(--jaune);padding:clamp(4rem,8vw,6.5rem) 0;}
.contact .cadre{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.contact h2{font-size:clamp(2.2rem,4.4vw,3.5rem);}
.contact .intro{margin-top:1rem;max-width:24rem;}
.coordonnees{display:grid;gap:0;border-top:2px solid var(--noir);}
.coordonnees > div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1.15rem 0;border-bottom:1px solid rgba(29,29,27,.25);align-items:baseline;}
.coordonnees dt{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.coordonnees dd{font-size:1.2rem;}
.coordonnees dd a{text-decoration:none;border-bottom:2px solid var(--noir);}
.coordonnees .grand{font-family:var(--slab);font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.1;}
.coordonnees .grand a{border:0;}
.attente{font-family:var(--slab);font-size:1.4rem;border-top:2px solid var(--noir);padding-top:1.25rem;}

/* PIED */
.pied{background:var(--noir);color:#b9b6ad;padding:3rem 0 2.5rem;font-size:.9375rem;}
.pied .cadre{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:center;justify-content:space-between;}
.pied img{width:5rem;height:auto;}
.pied p{line-height:1.7;}

/* APPARITIONS */
.js .r{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.js .r.vu{opacity:1;transform:none;}

.barre-mobile{display:none;}

@media (max-width:900px){
  .ouverture .cadre,.contact .cadre,.titre-section{grid-template-columns:1fr;}
  .panneau{min-height:15rem;order:-1;}
  .panneau img{width:40%;}
  .liste-services{grid-template-columns:1fr;}
}
@media (max-width:640px){
  body{font-size:1.0625rem;}
  .entete .cadre{height:4.5rem;}
  .entete-contact .bouton-creux{display:none;}
  .entete-contact .bouton span{display:none;}
  .marque .nom{width:7rem;}
  .coordonnees > div{grid-template-columns:1fr;gap:.2rem;}
  .barre-mobile.active{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;height:3.75rem;z-index:20;}
  .barre-mobile a{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;text-decoration:none;}
  .barre-mobile a:first-child{background:var(--noir);color:var(--papier);}
  .barre-mobile a:last-child:not(:first-child){background:var(--jaune);color:var(--noir);}
  body.avec-barre{padding-bottom:3.75rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .js .panneau{clip-path:none;}
  .js .panneau img,.js .r{opacity:1;transform:none;}
}