/* ==========================================================================
   Béton ciré commerces, bureaux et ERP — Nuancier tertiaire
   Même moteur que les pages par pièce (teinte pilotée par le JS, fonds
   dérivés, encres adaptatives) et même langage : manuscrite, fonds teintés,
   collage, accords, bande défilante, guide. Ici une teinte = ses chantiers
   tertiaires réels (photos images/erp/, fiches images/projets/.../sol/).
   Inspiration : le nuancier Fermob — la couleur envahit la page, la bande de
   teintes court sous le visuel.
   Le guide, les repères et les liens viennent de beton-cire-piece.css.
   ========================================================================== */

@font-face{font-family:Aeonik;src:url('typo/aeonik-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Aeonik;src:url('typo/aeonik-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Mistrully;src:url('typo/mistrully.ttf') format('truetype');font-weight:400;font-display:swap}

@property --teinte      {syntax:'<color>'; inherits:true;initial-value:#B6B1A7}
@property --teinte-fond {syntax:'<color>'; inherits:true;initial-value:#E6E3DE}
@property --teinte-clair{syntax:'<color>'; inherits:true;initial-value:#F0EEEA}
@property --teinte-bloc {syntax:'<color>'; inherits:true;initial-value:#F4F3F0}
@property --teinte-collage{syntax:'<color>';inherits:true;initial-value:#EDEBE7}
@property --sur-fond    {syntax:'<color>'; inherits:true;initial-value:#3A3835}
@property --sur-fond-doux{syntax:'<color>';inherits:true;initial-value:#55524E}
@property --fondu       {syntax:'<number>';inherits:true;initial-value:.62}

html{transition:
  --teinte .55s ease,--teinte-fond .55s ease,--teinte-clair .55s ease,
  --teinte-bloc .55s ease,--teinte-collage .55s ease,
  --sur-fond .55s ease,--sur-fond-doux .55s ease,--fondu .55s ease}

:root{
  --papier:#FFFFFF;
  --encre:#1D1D1B;
  --encre-douce:#3A3835;
  --gris-texte:#55524E;
  --gris-leger:#8A8681;

  /* teinte courante et fonds dérivés — écrits par le JS (valeurs de départ : Zinc 123) */
  --teinte:#B6B1A7;
  --teinte-fond:#E6E3DE;
  --teinte-collage:#EDEBE7;
  --teinte-clair:#F0EEEA;
  --teinte-bloc:#F4F3F0;
  --sur-fond:#3A3835;
  --sur-fond-doux:#55524E;
  --fondu:.62;

  --max:1440px;
  --marge:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gout:max(var(--marge), (100% - var(--max)) / 2);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font-family:Aeonik,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--encre);text-decoration:none}
a:hover{color:var(--gris-texte)}
img{display:block;max-width:100%}
::selection{background:var(--teinte)}
.page{overflow-x:clip}

/* header écrit dans la page (build-includes.ps1) : hauteur réservée dès le premier rendu */
#header-placeholder{min-height:60px;background:var(--teinte-fond)}
@media (max-width:768px){#header-placeholder{min-height:75px}}

.manuscrite{font-family:Mistrully,cursive;font-weight:400}
.h2{margin:0;font-size:clamp(34px,4.2vw,52px);line-height:1.04;font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--encre-douce)}

.btn{
  display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--encre);transition:background .25s,color .25s,opacity .25s;
}
.btn--plein{background:var(--encre);color:#fff}
.btn--filet{background:transparent}

/* ==========================================================================
   Header du site — fondu dans la teinte, comme sur les pages par pièce
   ========================================================================== */
.header,.header.scrolled{
  background:var(--teinte-fond);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:0;box-shadow:none;
}
.header .nav-menu a,.header .nav-brand .logo{color:var(--sur-fond)}
.header .configurateur-btn{background:var(--sur-fond);color:var(--teinte-fond)}
.header .configurateur-btn:hover{background:var(--sur-fond);opacity:.85}
.header .burger-menu span{background:var(--sur-fond)!important}
:root[data-mode="sombre"] .header .logo-img{filter:invert(1) brightness(1.7)}

/* ==========================================================================
   01 · Hero — texte à gauche, le lieu en photo à droite, la bande de teintes
   en dessous (le nuancier Fermob : la couleur choisie envahit toute la page)
   ========================================================================== */
.hero{position:relative;background:var(--teinte-fond);padding:56px 0 64px}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 72% at 30% 42%,
    rgba(255,255,255,var(--fondu)) 0%,
    rgba(255,255,255,calc(var(--fondu) * .48)) 44%,
    rgba(255,255,255,0) 78%);
}
.hero__grille{
  position:relative;z-index:2;margin:0 var(--gout);
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"entete visuel" "bloc visuel" "frise frise";
  column-gap:clamp(40px,5vw,88px);
}

.hero__entete{grid-area:entete;align-self:end}
.hero__kicker{margin:0 0 20px;font-size:15px;letter-spacing:.06em;color:var(--sur-fond-doux)}
.hero__h1{margin:0;font-weight:400;font-size:clamp(20px,1.8vw,27px);line-height:1.25;letter-spacing:.01em;color:var(--sur-fond);max-width:22ch}
.hero__resume{margin:12px 0 0;max-width:46ch;font-size:14px;line-height:1.7;color:var(--sur-fond-doux)}
.hero__resume a{color:inherit;border-bottom:1px solid currentColor}
/* le nom de la teinte, en manuscrite, change à chaque clic */
.hero__titre{margin:clamp(40px,3.6vw,56px) 0 0 -4px;font-size:clamp(64px,6.6vw,112px);line-height:.95;white-space:nowrap;color:var(--sur-fond)}

.hero__bloc{grid-area:bloc;align-self:start;margin-top:26px;max-width:520px}
.hero__accroche{margin:0 0 14px;font-size:clamp(20px,1.9vw,28px);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--sur-fond)}
/* 4 lignes réservées : le hero ne change pas de taille d'une teinte à l'autre */
.hero__desc{margin:0;max-width:46ch;min-height:calc(1.9em * 4);font-size:15px;line-height:1.9;color:var(--sur-fond-doux);text-wrap:pretty}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero .btn{border-color:var(--sur-fond);color:var(--sur-fond)}
.hero .btn--plein{background:var(--sur-fond);color:var(--teinte-fond)}
.hero .btn--plein:hover{opacity:.85}
.hero .btn--filet:hover{background:var(--sur-fond);color:var(--teinte-fond)}

/* ---------- le visuel : grande photo du lieu, une seconde qui mord dessus,
   et la carte de la teinte (échantillon réel + chantier en photo) ---------- */
.hero__visuel{grid-area:visuel;position:relative;align-self:center;aspect-ratio:1 / .8;min-height:0}
.hero__visuel figure{position:absolute;margin:0;overflow:hidden;background:rgba(255,255,255,.25)}
.hero__visuel img{width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.hero__photo1{top:0;right:0;width:82%;aspect-ratio:3 / 2;box-shadow:0 30px 60px -30px rgba(29,29,27,.45)}
.hero__photo2{left:0;bottom:0;width:36%;aspect-ratio:4 / 5;z-index:2;box-shadow:0 24px 44px -18px rgba(29,29,27,.45)}
.hero__carte{
  position:absolute;right:0;bottom:0;z-index:3;width:min(58%,420px);
  display:grid;grid-template-columns:76px 1fr;gap:4px 18px;align-items:center;
  padding:16px 18px 16px 16px;background:var(--papier);
  box-shadow:0 18px 40px -22px rgba(29,29,27,.4);
}
.hero__echantillon{grid-row:1 / span 3;width:76px;height:76px;background-size:cover;background-position:center}
.hero__carte-nom{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre)}
.hero__carte-lieu{margin:0;font-size:13.5px;line-height:1.45;color:var(--gris-texte)}
.hero__carte-nb{margin:0;font-size:12px;letter-spacing:.06em;color:var(--gris-leger)}

/* ---------- bande des teintes : l'échantillon réel, le nom dessous ---------- */
.frise{grid-area:frise;margin-top:clamp(40px,4.4vw,64px)}
.frise__piste{display:flex;gap:6px}
.frise__teinte{
  flex:1 1 0;display:flex;flex-direction:column;gap:12px;align-items:stretch;
  padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.frise__carre{
  display:block;height:46px;background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(29,29,27,.08);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.frise__nom{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-fond-doux);transition:color .3s}
.frise__teinte:hover .frise__carre{transform:translateY(-4px)}
.frise__teinte:focus{outline:none}
.frise__teinte:focus-visible .frise__carre{outline:2px solid var(--sur-fond);outline-offset:3px}
.frise__teinte[aria-current="true"] .frise__carre{transform:translateY(-10px);box-shadow:0 22px 14px -14px rgba(29,29,27,.55)}
.frise__teinte[aria-current="true"] .frise__nom{color:var(--sur-fond)}

/* ==========================================================================
   02 · Collage + références — les chantiers de la teinte
   ========================================================================== */
.collage{background:var(--teinte-collage);padding:118px var(--gout) 126px}
.collage__grille{display:grid;grid-template-columns:1.05fr .88fr;gap:72px;align-items:center}
.collage__cluster{position:relative;height:clamp(400px,42vw,560px)}
.collage__cluster figure{position:absolute;margin:0;overflow:hidden}
.collage__cluster img{width:100%;height:100%;object-fit:cover}
.collage__a{left:27%;top:0;  width:73%;height:36%;z-index:1}
.collage__b{left:0;  top:24%;width:37%;height:65%;z-index:2}
.collage__c{left:38%;top:44%;width:33%;height:56%;z-index:3}

.collage__texte{max-width:48ch}
.collage__surtitre{margin:0 0 14px;font-size:44px;line-height:1;color:var(--gris-leger)}
.collage .h2{color:var(--sur-fond)}
.collage__intro{margin:26px 0 0;font-size:15px;line-height:1.9;color:var(--sur-fond-doux);text-wrap:pretty}
.refs{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid rgba(29,29,27,.14)}
.ref{padding:15px 0 14px;border-bottom:1px solid rgba(29,29,27,.14)}
.ref__type{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sur-fond-doux)}
.ref__nom{display:block;margin-top:6px;font-size:19px;line-height:1.25;color:var(--sur-fond)}
.ref__meta{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--sur-fond-doux)}
.collage__suite{margin:22px 0 0;font-size:14px}
.collage__suite a{color:var(--sur-fond);border-bottom:1px solid currentColor}

/* ==========================================================================
   03 · Accords de teintes — section blanche quelle que soit la teinte
   ========================================================================== */
.accords{background:var(--papier);padding:0 var(--gout) 112px}
.accords__grille{display:grid;grid-template-columns:minmax(300px,1fr) 1.9fr;gap:56px;align-items:start}
.accords__intro{position:relative;z-index:2;background:var(--teinte-bloc);padding:52px 46px 44px;margin-top:-92px}
.accords__surtitre{margin:0;font-size:15px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce)}
.accords__titre{margin:0;font-size:clamp(40px,3.9vw,66px);line-height:1;color:var(--encre-douce)}
.accords__note{margin:28px 0 0;max-width:44ch;font-size:15px;line-height:1.85;color:var(--gris-texte);text-wrap:pretty}
.accords__note + .accords__note{margin-top:14px}
.accords__note a{color:inherit;border-bottom:1px solid currentColor}
.accords__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:34px 28px;padding-top:72px}
.trio{position:relative;height:176px;min-width:196px}
.trio__carre{
  position:absolute;display:block;padding:8px 10px;
  font-size:11px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;
  background-size:cover;background-position:center;box-shadow:0 6px 18px rgba(29,29,27,.10);
}
.trio__carre:nth-child(1){left:54px;top:0; width:106px;height:88px; z-index:1}
.trio__carre:nth-child(2){left:0;  top:48px;width:114px;height:102px;z-index:2}
.trio__carre:nth-child(3){left:88px;top:76px;width:108px;height:94px; z-index:3}

/* ==========================================================================
   04 · Dans les lieux — toutes les photos de la teinte, en bande défilante
   ========================================================================== */
.lieux{background:var(--teinte-clair);padding:104px 0 124px}
.lieux__surtitre{margin:0 0 20px;padding:0 var(--gout);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--sur-fond-doux)}
.lieux .h2{padding:0 var(--gout);color:var(--sur-fond)}
.lieux__bande{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:72px;padding:0 var(--gout) 22px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--sur-fond-doux) transparent;cursor:grab;
}
.lieux__bande::-webkit-scrollbar{height:3px}
.lieux__bande::-webkit-scrollbar-thumb{background:var(--sur-fond-doux)}
.lieux__bande:focus-visible{outline:2px solid var(--sur-fond);outline-offset:-2px}
.lieux__bande.glisse{cursor:grabbing;-webkit-user-select:none;user-select:none}
.lieux__bande.sans-aimant{scroll-snap-type:none;scroll-behavior:auto}
.lieux__bande figure{flex:none;margin:0;overflow:hidden;scroll-snap-align:center;height:clamp(300px,33vw,460px)}
.lieux__bande figure:nth-child(3n+2){margin-top:34px}
.lieux__bande img{width:100%;height:100%;object-fit:cover}
.lieux__glisser{transition:opacity .4s ease}
.lieux.a-defile .lieux__glisser{opacity:0}
.lieux__legendes{
  display:flex;justify-content:space-between;gap:24px;margin-top:6px;padding:0 var(--gout);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-fond-doux);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  :root{--marge:32px}
  /* tactile : titre, visuel, bande de teintes juste dessous, puis le texte */
  .hero__grille{grid-template-columns:minmax(0,1fr);grid-template-areas:"entete" "visuel" "frise" "bloc";max-width:760px}
  .hero__visuel{margin-top:clamp(28px,5vw,44px)}
  .frise{margin-top:clamp(26px,4vw,36px)}
  .frise__carre{height:56px}
  .hero__bloc{margin-top:clamp(32px,5vw,48px)}
  .collage__grille{grid-template-columns:1fr;gap:52px}
  .collage__texte{max-width:none}
  .accords__grille{grid-template-columns:1fr;gap:40px}
  .accords__liste{padding-top:0}
  .lieux__bande{margin-top:56px}
}
@media (max-width:760px){
  :root{--marge:22px}
  .hero{padding:40px 0 64px}
  .hero__titre{font-size:clamp(48px,13vw,68px);white-space:normal}
  .hero__desc{min-height:0}
  /* le visuel se simplifie : la grande photo, la carte dessous */
  .hero__visuel{aspect-ratio:auto;display:flex;flex-direction:column;gap:0}
  .hero__visuel figure{position:static}
  .hero__photo1{width:100%}
  .hero__photo2{display:none}
  .hero__carte{position:static;width:100%}
  /* six teintes : deux rangées de trois, à la taille d'un doigt */
  .frise__piste{flex-wrap:wrap;gap:16px 8px}
  .frise__teinte{flex:1 1 calc(33.333% - 8px)}
  .collage{padding:76px var(--gout) 84px}
  .collage__cluster{height:auto;display:grid;grid-template-columns:1fr;gap:12px}
  .collage__cluster figure{position:static;width:100%;height:250px}
  .collage__surtitre{font-size:36px}
  .accords{padding:0 var(--gout) 84px}
  .accords__intro{padding:38px 26px 32px;margin-top:-64px}
  .lieux{padding:76px 0 88px}
  .lieux__bande{margin-top:44px;gap:12px;scroll-snap-type:x mandatory}
  .lieux__bande figure{height:clamp(300px,74vw,400px)}
  .lieux__bande figure:nth-child(3n+2){margin-top:0}
  .lieux__legendes{flex-direction:column;gap:6px}
}