/* ------------------------------------------------------------------
   SID GROUPE — feuille de style
   Palette et typographies en tête : ce sont les seules valeurs
   à modifier pour décliner ce socle sur une autre marque.
   ------------------------------------------------------------------ */

:root{
  --encre:    #17191A;   /* fond principal */
  --encre-2:  #1F2224;   /* sections de respiration */
  --papier:   #F3F0E9;   /* texte sur fond sombre, fond des sections claires */
  --papier-2: #E8E3D9;   /* aplats secondaires en section claire */
  --basalte:  #4F5553;   /* gris d'appui, filets */
  --mince:    #8E938F;   /* libellés et texte secondaire sur fond sombre */
  --laiton:   #A8894E;   /* accent unique */

  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --nav-h: 72px;
}

/* ---------- polices auto-hébergées (aucun appel à un tiers) ---------- */
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:300 400; font-display:swap;
  src:url("../fonts/Cormorant-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:300 400; font-display:swap;
  src:url("../fonts/Cormorant-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Work Sans"; font-style:normal; font-weight:200 500; font-display:swap;
  src:url("../fonts/WorkSans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Work Sans"; font-style:normal; font-weight:200 500; font-display:swap;
  src:url("../fonts/WorkSans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- socle ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--encre); color:var(--papier);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.1;margin:0}
h1{font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:1.55rem}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}

.kick{
  font-family:var(--sans);font-size:.7rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--laiton);
  margin:0 0 1.6rem;
}
.lead{font-size:1.2rem;line-height:1.7;color:#CFCBC2}
.clair .lead{color:#50554F}

.filet{height:1px;background:rgba(243,240,233,.14);border:0;margin:0}
.clair .filet{background:rgba(23,25,26,.14)}

/* sections claires : toute la charte s'inverse */
.clair{background:var(--papier);color:#22251F}
.clair .kick{color:#8A6E36}

section{padding:clamp(72px,10vw,140px) 0}

/* ---------- navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;
  display:flex;align-items:center;
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.solide{background:rgba(23,25,26,.92);backdrop-filter:blur(10px);border-bottom-color:rgba(243,240,233,.12)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.marque{font-family:var(--serif);font-size:1.3rem;letter-spacing:.06em;text-decoration:none}
.marque b{font-weight:400}
.marque span{color:var(--laiton)}
.liens{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
.liens a{
  text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--papier);opacity:.75;transition:opacity .25s, color .25s;
}
.liens a:hover{opacity:1;color:var(--laiton)}
.burger{display:none;background:none;border:0;color:var(--papier);padding:8px;cursor:pointer}
.burger span{display:block;width:24px;height:1px;background:currentColor;margin:6px 0}

/* ---------- hero ---------- */
.hero{
  min-height:92vh;display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 clamp(56px,8vw,110px);
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(168,137,78,.16) 0%, rgba(168,137,78,0) 58%),
    radial-gradient(90% 70% at 92% 96%, rgba(79,85,83,.34) 0%, rgba(79,85,83,0) 60%),
    linear-gradient(180deg,#1A1D1E 0%, var(--encre) 55%, #121415 100%);
}
.hero::after{
  content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;
  background:linear-gradient(90deg,var(--laiton),rgba(168,137,78,0) 70%);
}
.hero h1{max-width:14ch}
.hero .lead{margin-top:1.8rem;max-width:52ch}
.hero .lieu{
  margin-top:2.6rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mince)
}
/* le seul mouvement de la page : le titre s'ouvre au chargement */
.reveal-mask{clip-path:inset(0 100% 0 0);animation:ouvre 1.5s cubic-bezier(.22,.8,.2,1) .25s forwards}
@keyframes ouvre{to{clip-path:inset(0 0 0 0)}}

/* ---------- activités ---------- */
.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(23,25,26,.14);margin-top:clamp(40px,6vw,72px)}
.carte{background:var(--papier);padding:clamp(28px,3.4vw,46px)}
.carte .num{
  font-family:var(--serif);font-size:1.25rem;color:#8A6E36;
  display:block;margin-bottom:1.1rem;letter-spacing:.1em
}
.carte h3{margin-bottom:.9rem}
.carte p{font-size:.97rem;line-height:1.8;color:#4A4E48}
.carte ul{margin:.9rem 0 0;padding-left:1.1rem;font-size:.92rem;color:#5A5F58;line-height:1.7}

/* ---------- repères ---------- */
.reperes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.repere{border-top:1px solid rgba(243,240,233,.18);padding-top:1.4rem}
.repere .v{font-family:var(--serif);font-size:1.9rem;line-height:1.2;display:block}
.repere .l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mince);margin-top:.7rem;display:block;line-height:1.55}

/* ---------- dirigeant ---------- */
.duo{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,90px);align-items:start}

/* ---------- contact ---------- */
.contact{background:var(--encre-2)}
.coord{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,60px)}
.coord .l{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mince);display:block;margin-bottom:.7rem}
.coord a{color:var(--papier);text-decoration:none;border-bottom:1px solid rgba(168,137,78,.5);padding-bottom:2px}
.coord a:hover{color:var(--laiton)}

/* ---------- pied ---------- */
.pied{padding:46px 0;border-top:1px solid rgba(243,240,233,.12);font-size:.84rem;color:var(--mince)}
.pied .wrap{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center}
.pied a{color:var(--mince);text-decoration:none;border-bottom:1px solid rgba(168,137,78,.45);padding-bottom:2px}
.pied a:hover{color:var(--laiton)}

/* ---------- page de texte (mentions légales) ---------- */
.doc{padding-top:calc(var(--nav-h) + clamp(56px,8vw,110px))}
.doc h2{margin-top:3.2rem;margin-bottom:1rem;font-size:1.7rem}
.doc h2:first-of-type{margin-top:2.4rem}
.doc dl{margin:0}
.doc dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mince);margin-top:1.6rem}
.doc dd{margin:.35rem 0 0}

/* ---------- révélations ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .reveal-mask{animation:none;clip-path:none}
}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .grille{grid-template-columns:1fr}
  .reperes{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .coord{grid-template-columns:1fr}
  .burger{display:block}
  .liens{
    position:fixed;inset:var(--nav-h) 0 auto 0;background:rgba(23,25,26,.98);
    flex-direction:column;gap:0;padding:12px 0 22px;display:none;
    border-bottom:1px solid rgba(243,240,233,.12);
  }
  .liens.ouvert{display:flex}
  .liens a{display:block;padding:14px var(--gut);font-size:.85rem}
  .hero{min-height:84vh}
}


/* ---------- images (ajoute le 8 octobre 2026) ---------- */
/* Le fond du hero : la photo passe sous le degrade existant, qui reste
   la garantie de lisibilite du titre quelle que soit l'image fournie. */
.hero__fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:grayscale(.35) contrast(1.04);opacity:.42}
.hero__fond::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(18,20,21,.42) 0%, rgba(18,20,21,.62) 48%, rgba(18,20,21,.88) 100%),
    radial-gradient(120% 90% at 18% 8%, rgba(168,137,78,.14) 0%, rgba(168,137,78,0) 58%);
}
.hero .wrap{position:relative;z-index:1}

/* Les cartes d'activite : l'image coiffe la carte, a hauteur constante. */
.carte__img{display:block;width:100%;height:clamp(150px,15vw,210px);object-fit:cover;
  margin:calc(-1 * clamp(28px,3.4vw,46px)) calc(-1 * clamp(28px,3.4vw,46px)) clamp(26px,3vw,38px);
  width:calc(100% + 2 * clamp(28px,3.4vw,46px));
  filter:grayscale(.2) contrast(1.02)}

/* Le portrait, dans la colonne gauche de la direction. */
.portrait{margin:clamp(26px,3.4vw,44px) 0 0;max-width:420px}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:10/13;object-fit:cover;
  filter:grayscale(.28) contrast(1.03)}

@media (max-width:820px){
  .portrait{max-width:none;margin-top:clamp(22px,4vw,32px)}
  .carte__img{height:clamp(140px,34vw,190px)}
}

@media (prefers-reduced-motion:reduce){
  .hero__fond img,.carte__img,.portrait img{filter:none}
}

/* ---------- formulaire de contact (ajoute le 7 octobre 2026) ---------- */
.form{margin-top:clamp(44px,6vw,72px);max-width:760px}
.form__intro{color:var(--mince);margin-bottom:clamp(24px,3vw,36px);max-width:52ch}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.champ{margin:0 0 clamp(16px,2.4vw,28px)}
.champ label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mince);margin-bottom:.6rem}
.champ .opt{letter-spacing:.04em;text-transform:none;color:var(--basalte)}
.champ input,.champ textarea{
  width:100%;box-sizing:border-box;background:transparent;color:var(--papier);
  border:0;border-bottom:1px solid rgba(243,240,233,.22);
  padding:.7rem 0;font-family:var(--sans);font-size:1rem;font-weight:300;
  transition:border-color .25s ease;
}
.champ textarea{resize:vertical;min-height:7rem;line-height:1.6}
.champ input:focus,.champ textarea:focus{outline:0;border-bottom-color:var(--laiton)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--basalte)}

.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:.9rem;align-items:flex-start;margin:.6rem 0 clamp(28px,3.4vw,40px);
  font-size:.86rem;line-height:1.65;color:var(--mince);max-width:62ch}
.consent input{margin-top:.25rem;flex:0 0 auto;accent-color:var(--laiton);width:16px;height:16px}
.consent a{color:var(--papier);text-decoration:none;border-bottom:1px solid rgba(168,137,78,.5)}
.consent a:hover{color:var(--laiton)}

.form button{
  background:transparent;color:var(--papier);border:1px solid rgba(168,137,78,.6);
  padding:.95rem 2.4rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.form button:hover{background:var(--laiton);border-color:var(--laiton);color:var(--encre)}

.retour{margin-top:clamp(44px,6vw,72px);max-width:620px;padding:1.4rem 1.6rem;
  border-left:2px solid var(--laiton);background:rgba(168,137,78,.07);line-height:1.7}
.retour.erreur{border-left-color:#C0563F;background:rgba(192,86,63,.08)}
.retour a{color:var(--papier);text-decoration:none;border-bottom:1px solid rgba(168,137,78,.5)}

@media (max-width:820px){
  .form__duo{grid-template-columns:1fr;gap:0}
}

/* fin */