/* ==========================================================================
   AREMO — Architecture & Maîtrise d'Œuvre
   Feuille de style principale
   ========================================================================== */

/* --- 1. Variables ------------------------------------------------------- */
:root{
  --brun:        #3D291F;
  --brun-mid:    #533D32;
  --brun-soft:   #6B5347;
  --beige:       #E5DBCF;
  --beige-deep:  #D3C5B4;
  --creme:       #F4EFE8;
  --blanc:       #FCFAF7;
  --gris:        #8A7B72;
  --gris-line:   rgba(61,41,31,.16);
  --gris-line-l: rgba(229,219,207,.22);

  --ff: "Jost", "Futura", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pad-x: clamp(1.5rem, 6vw, 8rem);
  --gut:   clamp(1.5rem, 3vw, 3rem);
  --rail:  clamp(2.5rem, 5vw, 5.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --bar: 6px;
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.75;
  color:var(--brun);
  background:var(--blanc);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-weight:200;margin:0;line-height:1.14;letter-spacing:.005em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brun);color:var(--beige)}

/* --- 3. Typographie utilitaire ------------------------------------------ */
.eyebrow{
  font-size:.688rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brun-soft);
  display:flex; align-items:center; gap:.9rem; margin:0 0 1.6rem;
}
.eyebrow::before{
  content:""; width:2.2rem; height:1px; background:currentColor; opacity:.55; flex:none;
}
.on-dark .eyebrow{color:var(--beige-deep)}

.h-xl{font-size:clamp(2.6rem,7.2vw,6.4rem); line-height:1.02; letter-spacing:-.012em}
.h-lg{font-size:clamp(2rem,4.4vw,3.9rem); line-height:1.08}
.h-md{font-size:clamp(1.5rem,2.6vw,2.35rem); line-height:1.18}
.h-sm{font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.3; font-weight:300}

.lead{font-size:clamp(1.05rem,1.35vw,1.32rem); line-height:1.6; font-weight:200}
.muted{color:var(--brun-soft)}
.on-dark .muted{color:var(--beige-deep)}
.caps{text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; font-weight:400}

/* --- 4. Structure ------------------------------------------------------- */
.wrap{padding-inline:var(--pad-x)}
.section{padding-block:clamp(4.5rem,10vw,9.5rem)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.on-dark{background:var(--brun); color:var(--beige)}
.on-cream{background:var(--creme)}
.on-beige{background:var(--beige)}

.topo{position:relative; isolation:isolate}
.topo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("../img/brand/topo.jpg") center/cover no-repeat;
  opacity:.13; mix-blend-mode:luminosity; pointer-events:none;
}

.grid{display:grid; gap:var(--gut)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid; grid-template-columns:minmax(0,26ch) minmax(0,1fr); gap:clamp(2rem,6vw,7rem); align-items:start}
/* variante quand la colonne de gauche porte un grand titre */
.split--h{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem)}

/* --- 5. Barre de progression + curseur ---------------------------------- */
.scroll-progress{
  position:fixed; top:0; right:calc(var(--rail) / 2.6);
  width:var(--bar); height:100vh; z-index:60; pointer-events:none;
  background:linear-gradient(to bottom, rgba(61,41,31,.10), rgba(61,41,31,.10));
}
.scroll-progress__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:var(--brun); transition:height 90ms linear;
}
body.is-dark-rail .scroll-progress{background:rgba(229,219,207,.16)}
body.is-dark-rail .scroll-progress__fill{background:var(--beige)}

.cursor{
  position:fixed; top:0; left:0; z-index:90; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid var(--brun);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background-color .3s var(--ease), opacity .3s var(--ease), border-color .3s;
  opacity:0;
}
.cursor.is-on{opacity:1}
.cursor.is-hover{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(61,41,31,.08)}
body.is-dark-rail .cursor{border-color:var(--beige)}
body.is-dark-rail .cursor.is-hover{background:rgba(229,219,207,.12)}
/* au-dessus de la bannière, place aux grandes flèches blanches (voir .hero__nav) : le petit
   curseur rond s'efface plutôt que de se superposer */
.cursor.is-hero-nav{opacity:0}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* --- 6. En-tête --------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.15rem var(--pad-x);
  transition:background-color .45s var(--ease), padding .45s var(--ease),
             box-shadow .45s var(--ease), color .45s var(--ease);
}
.header--float{color:var(--beige)}
.header.is-stuck{
  background:var(--blanc); color:var(--brun);
  padding-block:.7rem; box-shadow:0 1px 0 var(--gris-line);
}
.header__logo{display:flex; align-items:center; flex:none}
.header__logo svg{height:86px; width:auto; transition:height .45s var(--ease)}
.header.is-stuck .header__logo svg{height:58px}
.header__logo path,.header__logo rect{fill:currentColor}
@media (max-width:900px){.header__logo svg{height:64px}
  .header.is-stuck .header__logo svg{height:48px}}

.nav{display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.4rem)}
.nav a{
  position:relative; font-size:.75rem; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase; padding-block:.35rem;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1); transform-origin:left}
.nav a[aria-current]{opacity:1}

/* groupe de droite du header : réseaux sociaux, menu « plus de liens », burger —
   regroupés ensemble pour rester collés les uns aux autres (au lieu d'être
   dispersés par le space-between du header) */
.header__right{display:flex; align-items:center; gap:1.3rem; flex:none}
/* réseaux sociaux dans le header : même gabarit (carré, contour) que dans le pied de page */
.header__social{display:flex; align-items:center; gap:.6rem}
.header__social .social__icon{color:currentColor; border-color:currentColor; opacity:.82}
.header__social .social__icon:hover{opacity:1; border-color:currentColor}
@media (max-width:900px){.header__social{display:none}}

.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.85rem 1.7rem; border:1px solid currentColor;
  font-size:.72rem; font-weight:400; letter-spacing:.19em; text-transform:uppercase;
  position:relative; overflow:hidden; transition:color .45s var(--ease);
}
.btn span{position:relative; z-index:1}
.btn::before{
  content:""; position:absolute; inset:0; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.btn:hover::before{transform:scaleX(1); transform-origin:left}
.btn:hover{color:var(--blanc)}
.on-dark .btn:hover,.header--float .btn:hover{color:var(--brun)}
.btn--solid{background:var(--brun); color:var(--beige); border-color:var(--brun)}
.btn--solid:hover{color:var(--brun)}
.btn--solid::before{background:var(--beige)}
.btn--sm{padding:.55rem 1.2rem; font-size:.65rem; letter-spacing:.16em}

/* rangée de rectangles cliquables par type de projet (accueil, avant les fiches) */
.type-links{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:clamp(2rem,4vw,3rem)}

.burger{display:none; width:34px; height:20px; position:relative; flex:none}
.burger i{position:absolute; left:0; width:100%; height:1px; background:currentColor; transition:transform .4s var(--ease), opacity .3s}
.burger i:nth-child(1){top:2px}
.burger i:nth-child(2){top:10px}
.burger i:nth-child(3){top:18px}
body.menu-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:65; background:var(--brun); color:var(--beige);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:6rem var(--pad-x) 3rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); visibility:hidden;
}
body.menu-open .drawer{clip-path:inset(0 0 0 0); visibility:visible}
.drawer a{font-size:clamp(1.9rem,6vw,3.4rem); font-weight:200; padding-block:.25rem; opacity:.55; transition:opacity .3s}
.drawer a:hover,.drawer a[aria-current]{opacity:1}
.drawer__foot{margin-top:2.5rem; font-size:.78rem; letter-spacing:.1em; color:var(--beige-deep)}

/* menu « plus de liens » : pages, informations légales, connexion team */
.menuplus{position:relative; flex:none}
.menuplus__toggle{display:flex; flex-direction:column; justify-content:center; gap:5px; width:26px; height:20px}
.menuplus__toggle i{width:100%; height:1px; background:currentColor; transition:transform .3s var(--ease), opacity .3s}
.menuplus.is-open .menuplus__toggle i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menuplus.is-open .menuplus__toggle i:nth-child(2){opacity:0}
.menuplus.is-open .menuplus__toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menuplus__panel{
  position:absolute; top:calc(100% + 1.4rem); right:0; z-index:80; width:min(26rem,80vw);
  background:var(--blanc); color:var(--brun); box-shadow:0 20px 48px rgba(20,13,9,.18);
  padding:2rem clamp(1.5rem,3vw,2.2rem); display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.5rem;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.menuplus.is-open .menuplus__panel{opacity:1; transform:none; pointer-events:auto}
.menuplus__col h4{font-size:.64rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--brun-soft); margin:0 0 .9rem}
.menuplus__col ul{display:flex; flex-direction:column; gap:.55rem}
.menuplus__col a{font-size:.86rem; opacity:.85; transition:opacity .25s}
.menuplus__col a:hover,.menuplus__col a[aria-current]{opacity:1; text-decoration:underline; text-underline-offset:.25em}
.menuplus__team{
  grid-column:1/-1; margin-top:.4rem; padding-top:1.2rem; border-top:1px solid var(--gris-line);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brun-soft);
  display:flex; align-items:center; justify-content:space-between; transition:color .25s;
}
.menuplus__team::after{content:"→"}
.menuplus__team:hover{color:var(--brun)}
@media (max-width:560px){.menuplus__panel{grid-template-columns:1fr; width:min(20rem,84vw)}}

/* --- 7. Hero ------------------------------------------------------------ */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--beige)}
.hero--short{min-height:72svh}
/* bande blanche réservée à l'en-tête sur les bannières de page (header--float non appliqué
   dans ce cas), l'image ne commence que juste en dessous — séparée par un trait fin */
.hero--below-header{padding-top:clamp(6.25rem,10vw,7.75rem)}
.hero--below-header .hero__media{
  top:clamp(6.25rem,10vw,7.75rem);
  border-top:1px solid var(--gris-line);
}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:heroZoom 12s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__media--slides .hero__slide{
  position:absolute; inset:0; opacity:0; z-index:0;
  transition:opacity 1.1s var(--ease);
}
/* au-dessus du dégradé (::after, z-index:1) pour que la légende reste lisible, au premier plan
   — toujours en dessous des flèches de navigation (z-index:2, mais transparentes) */
.hero__media--slides .hero__slide.is-active{opacity:1; z-index:2}
.hero__media--slides .hero__slide img{width:100%; height:100%; object-fit:cover}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(29,19,14,.52) 0%, rgba(29,19,14,.14) 30%, rgba(29,19,14,.55) 62%, rgba(29,19,14,.90) 100%);
}
.hero__inner{position:relative; z-index:2; width:100%; padding:0 var(--pad-x) clamp(3.5rem,9vw,7rem); pointer-events:none}
.hero__inner a{pointer-events:auto}

/* accueil : texte blanc, fixe (ne disparaît plus) — vignetage marron foncé sur le
   contour des photos, et un surlignage (comme un surligneur, pas un bloc plein derrière
   tout le paragraphe) qui hug chaque mot pour rester lisible quelle que soit la photo */
.hero--home .hero__media::after{
  background:radial-gradient(ellipse at center, rgba(61,41,31,0) 35%, rgba(61,41,31,.44) 100%);
}
.hero--home .hero__title,
.hero--home .hero__sub,
.hero--home .hero__meta,
.hero--home .hero__meta a{color:var(--blanc)}
.hero--home .hero__title{font-size:clamp(1.9rem,4.6vw,4rem)}
/* un seul rectangle marron transparent derrière tout le bloc de texte (titre + sous-titre) */
.hero--home .hero__textbox{
  display:inline-block;
  background:rgba(61,41,31,.56);
  backdrop-filter:blur(6px) saturate(1.1); -webkit-backdrop-filter:blur(6px) saturate(1.1);
  padding:clamp(1.3rem,2.4vw,2.1rem) clamp(1.6rem,2.8vw,2.4rem);
}
.hero--home .hero__sub{margin-top:.6rem}

.hero__title{max-width:22ch}
.hero__sub{max-width:52ch; margin-top:clamp(1.6rem,2.4vw,2.4rem); color:var(--beige)}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 2.2rem; margin-top:2.2rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--beige-deep);
}
.hero__scroll{
  position:absolute; right:var(--pad-x); bottom:clamp(3.5rem,9vw,7rem); z-index:1;
  writing-mode:vertical-rl; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  display:flex; align-items:center; gap:1rem; color:var(--beige-deep);
}
.hero__scroll::after{content:""; width:1px; height:4.5rem; background:currentColor; animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}}

/* légende en bas à droite de la bannière (titre + lieu du projet affiché) */
.hero__caption{
  position:absolute; right:var(--pad-x); bottom:clamp(3.5rem,9vw,7rem); z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:.3rem;
  max-width:min(60%,32rem); padding:.9rem 1.25rem;
  background:rgba(61,41,31,.74); backdrop-filter:blur(9px) saturate(1.2);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);
  box-shadow:0 8px 28px rgba(15,10,7,.22);
  text-align:right; opacity:0; transform:translateY(8px);
  transition:opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;
}
.hero__slide.is-active .hero__caption{opacity:1; transform:none}
.hero__caption-title{font-size:clamp(.98rem,1.35vw,1.22rem); font-weight:400; color:var(--blanc); line-height:1.3}
.hero__caption-loc{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--beige-deep)}

/* zones gauche/droite pour naviguer entre les projets de la bannière : le curseur reste
   visible (pointeur classique), et une flèche blanche apparaît au survol de chaque côté */
.hero__nav{
  position:absolute; top:0; bottom:0; width:50%; z-index:2;
  background:none; border:0; cursor:pointer;
}
.hero__nav--prev{left:0}
.hero__nav--next{right:0}
.hero__nav::before,.hero__nav::after{
  content:""; position:absolute; top:50%; opacity:0;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hero__nav::before{
  width:3.4rem; height:3.4rem; margin-top:-1.7rem; border-radius:50%;
  background:rgba(20,13,9,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.hero__nav::after{
  width:1rem; height:1rem; margin-top:-.5rem;
  border-top:2px solid var(--blanc); border-right:2px solid var(--blanc);
}
.hero__nav--prev::before,.hero__nav--prev::after{left:clamp(1rem,3.5vw,3rem)}
.hero__nav--next::before,.hero__nav--next::after{right:clamp(1rem,3.5vw,3rem)}
.hero__nav--prev::after{transform:rotate(-135deg)}
.hero__nav--next::after{transform:rotate(45deg)}
.hero__nav:hover::before,.hero__nav:hover::after,
.hero__nav:focus-visible::before,.hero__nav:focus-visible::after{opacity:1}
.hero__nav--prev:hover::before{transform:translateX(-4px)}
.hero__nav--next:hover::before{transform:translateX(4px)}
.hero__nav--prev:hover::after{transform:rotate(-135deg) translate(2px,2px)}
.hero__nav--next:hover::after{transform:rotate(45deg) translate(2px,2px)}
@media (hover:none),(max-width:900px){
  .hero__nav{width:15%}
  .hero__nav::before,.hero__nav::after{display:none}
}

/* --- 8. Blocs de contenu ------------------------------------------------ */
.rule{height:1px; background:var(--gris-line); border:0; margin:0}
.on-dark .rule{background:var(--gris-line-l)}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut)}
.stat b{display:block; font-size:clamp(2.1rem,3.6vw,3.4rem); font-weight:200; line-height:1}
.stat span{display:block; margin-top:.6rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brun-soft)}
.on-dark .stat span{color:var(--beige-deep)}

.value{padding-top:1.6rem; border-top:1px solid var(--gris-line)}
.on-dark .value{border-color:var(--gris-line-l)}
.value b{display:block; font-weight:400; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.9rem}

.figure{margin:0; overflow:hidden}
.figure img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.figure figcaption{margin-top:.9rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brun-soft)}
.ratio-4-3{aspect-ratio:4/3}
.ratio-3-2{aspect-ratio:3/2}
.ratio-16-9{aspect-ratio:16/9}
.ratio-1-1{aspect-ratio:1/1}
.ratio-3-4{aspect-ratio:3/4}

/* deux photos d'agence de formats différents, alignées en bas de grille,
   avec une teinte sépia/brune qui reprend celle des photos elles-mêmes */
.agence-photos{align-items:end}
.photo-sepia img{filter:sepia(.32) saturate(1.05) brightness(.98) contrast(1.02)}

/* --- 9. Cartes projet --------------------------------------------------- */
.projects{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,4.5rem) var(--gut)}
.projects--3{grid-template-columns:repeat(3,1fr)}
.pcard{display:block; position:relative}
.pcard__media{overflow:hidden; background:var(--beige); aspect-ratio:4/3; position:relative}
.pcard__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s}
.pcard:hover .pcard__media img{transform:scale(1.055)}
.pcard__ph{
  display:flex; align-items:center; justify-content:center; height:100%;
  background:var(--beige); color:var(--brun-soft);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  background-image:repeating-linear-gradient(45deg, rgba(61,41,31,.045) 0 8px, transparent 8px 16px);
}
.pcard__body{display:flex; justify-content:space-between; gap:1.5rem; margin-top:1.15rem; align-items:baseline}
.pcard__title{font-size:clamp(1.05rem,1.35vw,1.28rem); font-weight:300; line-height:1.3; max-width:30ch}
.pcard__meta{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brun-soft); text-align:right; flex:none}
.pcard__tag{
  position:absolute; left:1rem; top:1rem; z-index:2;
  background:rgba(252,250,247,.9); color:var(--brun);
  padding:.42rem .8rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
}

/* deux filtres : le statut (Réalisés / En cours / Concours), en avant, et le type de
   programme, en retrait juste en dessous */
.filters-wrap{margin-bottom:clamp(2rem,4vw,3.5rem); display:flex; flex-direction:column; gap:1.1rem}
.filters-group{display:flex; flex-wrap:wrap; gap:.5rem}
.filters-group button{
  padding:.6rem 1.15rem; border:1px solid var(--gris-line);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  transition:background-color .35s, color .35s, border-color .35s;
}
.filters-group button:hover{border-color:var(--brun)}
.filters-group button.is-active{background:var(--brun); color:var(--beige); border-color:var(--brun)}
.filters-group--type{padding-top:1.1rem; border-top:1px solid var(--gris-line)}
.filters-group--type button{
  padding:.42rem .9rem; font-size:.62rem; letter-spacing:.13em; color:var(--brun-soft); border-color:transparent;
}
.filters-group--type button:hover{color:var(--brun)}
.filters-group--type button.is-active{background:var(--beige); color:var(--brun); border-color:var(--beige)}
.pcard.is-hidden{display:none}

/* tri des projets, par date */
.sort-select{
  padding:.55rem 1.9rem .55rem 1rem; border:1px solid var(--gris-line); border-radius:0;
  background:none; font:inherit; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brun); cursor:pointer; transition:border-color .35s;
}
.sort-select:hover,.sort-select:focus{outline:none; border-color:var(--brun)}

/* --- 10. Prestations ---------------------------------------------------- */
.serv{padding:2.2rem 0 2.4rem; border-top:1px solid var(--gris-line); display:grid; grid-template-columns:3.5rem minmax(0,20ch) minmax(0,1fr); gap:clamp(1rem,3vw,3rem); align-items:start}
.serv__num{font-size:.72rem; letter-spacing:.14em; color:var(--brun-soft); padding-top:.45rem}
.serv__title{font-size:clamp(1.25rem,2vw,1.75rem); font-weight:200}
.serv__body{color:var(--brun-soft); max-width:62ch}

.tags{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem}
.tags span{
  padding:.4rem .85rem; border:1px solid var(--gris-line);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brun-soft);
}
.on-dark .tags span{border-color:var(--gris-line-l); color:var(--beige-deep)}

/* --- 11. Équipe --------------------------------------------------------- */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gut)}
.member__media{aspect-ratio:3/4; overflow:hidden; background:var(--beige)}
.member__media img{width:100%; height:100%; object-fit:cover; object-position:center 22%; filter:grayscale(1) contrast(1.02); transition:filter .7s var(--ease), transform 1.1s var(--ease)}
.member:hover .member__media img{filter:grayscale(0); transform:scale(1.04)}
.member h3{margin:1.1rem 0 .35rem; font-size:1.05rem; font-weight:400; letter-spacing:.03em}
.member p{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brun-soft); line-height:1.9}

/* --- 12. Fiche projet --------------------------------------------------- */
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gut) clamp(1rem,3vw,3rem)}
.fact{border-top:1px solid var(--gris-line); padding-top:1.1rem}
.on-dark .fact{border-color:var(--gris-line-l)}
.fact dt{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brun-soft); margin-bottom:.5rem}
.on-dark .fact dt{color:var(--beige-deep)}
.fact dd{margin:0; font-size:1.02rem; font-weight:300; line-height:1.45}

.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gut)}
.gallery figure{margin:0; overflow:hidden; background:var(--beige)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.g-full{grid-column:span 6; aspect-ratio:21/9}
.g-half{grid-column:span 3; aspect-ratio:4/3}
.g-third{grid-column:span 2; aspect-ratio:3/4}

.pager{display:grid; grid-template-columns:1fr 1fr; gap:var(--gut)}
.pager a{padding:2rem 0; border-top:1px solid var(--gris-line)}
.pager a:last-child{text-align:right}
.pager small{display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brun-soft); margin-bottom:.6rem}
.pager strong{font-weight:300; font-size:clamp(1.05rem,1.6vw,1.4rem)}

/* --- 13. Contact -------------------------------------------------------- */
.field{margin-bottom:1.6rem}
.field label{display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brun-soft); margin-bottom:.55rem}
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 0; border:0; border-bottom:1px solid var(--gris-line);
  background:none; font:inherit; font-weight:300; color:var(--brun); border-radius:0;
  transition:border-color .35s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--brun)}
.field textarea{resize:vertical; min-height:8rem}
.contact-list dt{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brun-soft); margin-bottom:.55rem}
.contact-list dd{margin:0 0 2rem; font-size:1.22rem; font-weight:300; line-height:1.6}
.contact-list a:hover{text-decoration:underline; text-underline-offset:.25em}

/* formulaire à gauche, coordonnées + carte à droite, colonnes de même largeur */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:start}
.contact-side{display:flex; flex-direction:column; gap:1.8rem}
.contact-list--compact dd{margin-bottom:1.3rem; font-size:.96rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* --- 13bis. Réseaux sociaux ---------------------------------------------- */
.social{display:flex; gap:.85rem; margin-top:1.6rem}
.social__icon{
  display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border:1px solid var(--gris-line-l); color:var(--beige);
  transition:border-color .3s, opacity .3s;
}
a.social__icon:hover{border-color:var(--beige); opacity:.82}
.social__icon.is-soon{opacity:.4; cursor:default}

/* --- 14. Pied de page --------------------------------------------------- */
.footer{background:var(--brun); color:var(--beige); padding:clamp(4rem,7vw,6.5rem) var(--pad-x) 2.5rem}
.footer__top{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,4rem); padding-bottom:3.5rem}
.footer__logo svg{height:74px; width:auto}
.footer__logo path,.footer__logo rect{fill:var(--beige)}
.footer h4{font-size:.68rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--beige-deep); margin:0 0 1.3rem}
.footer li{margin-bottom:.65rem; font-size:.92rem; font-weight:300}
.footer li a{opacity:.85; transition:opacity .3s}
.footer li a:hover{opacity:1}
.footer__bot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  padding-top:2rem; border-top:1px solid var(--gris-line-l);
  font-size:.7rem; letter-spacing:.1em; color:var(--beige-deep);
}

/* --- 15. Révélation au scroll ------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.reveal-d1{transition-delay:.09s}.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}.reveal-d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .hero__media img{animation:none; transform:none}
  html{scroll-behavior:auto}
}

/* --- 16. Note de rédaction (à retirer en production) -------------------- */
.todo{
  display:block; margin-top:1.25rem; padding:.75rem 1rem;
  border-left:2px solid #B08968; background:rgba(176,137,104,.09);
  font-size:.76rem; letter-spacing:.02em; color:var(--brun-soft);
}
.todo b{font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.66rem}

/* --- 17. Responsive ----------------------------------------------------- */
@media (max-width:1100px){
  .footer__top{grid-template-columns:1fr 1fr}
  .team,.stat-row,.cols-4{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .header .btn{display:none}
  .burger{display:block}
  /* logo à gauche, menu « plus » + burger groupés à droite (au lieu d'être répartis
     par space-between sur 3 éléments, ce qui centrait le menu « plus ») */
  .header__right{margin-left:auto}
  .menuplus__panel{right:-.25rem}
  .split{grid-template-columns:1fr; gap:1.75rem}
  .serv{grid-template-columns:2.5rem 1fr; }
  .serv__body{grid-column:2}
  .projects,.projects--3,.cols-3,.cols-2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .g-full{grid-column:span 2; aspect-ratio:16/9}
  .g-half,.g-third{grid-column:span 1; aspect-ratio:4/3}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left}
  .hero__scroll{display:none}
  .scroll-progress{right:10px; --bar:4px}

  /* Bannières (accueil + fiches projet) : sur mobile, l'image plein écran en
     fond avec texte en surimpression forçait un recadrage (object-fit:cover).
     On passe en pile verticale — l'image entière au-dessus (object-fit:contain,
     aucun rognage), le texte juste en dessous, parfaitement lisible. */
  .hero{min-height:auto; display:flex; flex-direction:column; align-items:stretch}
  .hero__media,
  .hero--below-header .hero__media{
    position:relative; inset:auto; top:auto;
  }
  /* fiche projet (image unique, pas de slides) : la boîte épouse exactement
     l'image, aucune bande de couleur au-dessus/en dessous */
  .hero__media:not(.hero__media--slides){aspect-ratio:auto}
  .hero__media:not(.hero__media--slides) img{width:100%; height:auto; object-fit:initial; transform:none; animation:none}
  /* accueil (plusieurs slides en fondu, superposées en absolu) : la hauteur est
     calculée en JS pour coller exactement au ratio de la photo affichée
     (variable --hero-h posée par main.js), donc pas de bande ici non plus */
  .hero__media--slides{aspect-ratio:auto; height:var(--hero-h, 60vw)}
  .hero__media--slides .hero__slide{position:absolute; inset:0}
  .hero__media--slides .hero__slide img{width:100%; height:100%; object-fit:contain; transform:none; animation:none}
  .hero__media::after{display:none}
  .hero__caption{
    bottom:.6rem; right:.6rem; max-width:68%; padding:.5rem .7rem; gap:.1rem;
  }
  .hero__caption-title{font-size:.76rem}
  .hero__caption-loc{font-size:.56rem; letter-spacing:.1em}
  .hero__inner{position:relative; padding:1.6rem var(--pad-x) 2.1rem; color:var(--brun)}
  .hero--home .hero__title,
  .hero--home .hero__sub,
  .hero--home .hero__meta,
  .hero--home .hero__meta a{color:var(--brun)}
  .hero--home .hero__textbox{background:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0}
  .hero__sub{color:var(--brun-soft)}
  .hero__meta{color:var(--brun-soft)}
}
@media (max-width:560px){
  .team,.stat-row,.cols-4,.facts{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .g-full,.g-half,.g-third{grid-column:span 1; aspect-ratio:4/3}
  .footer__top{grid-template-columns:1fr}

  /* Galerie des fiches projet : sur mobile, la photo entière plutôt que
     recadrée dans un rectangle fixe — chaque image garde ses proportions. */
  .g-full,.g-half,.g-third{aspect-ratio:auto}
  .gallery img{height:auto; object-fit:initial}
}

/* --- 18. Ajouts v2 : liens, profils, secteurs --------------------------- */

/* prestations cliquables (accueil) */
.serv--link{
  display:grid; text-decoration:none;
  transition:background-color .4s var(--ease), padding-left .4s var(--ease);
}
.serv--link:hover{background:rgba(61,41,31,.035); padding-left:1rem}
.serv__more{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brun);
  opacity:0; transform:translateX(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.serv__more::after{content:"→"}
.serv--link:hover .serv__more,.value--link:hover .serv__more{opacity:1; transform:none}

/* secteurs cliquables */
.value--link{display:block; text-decoration:none; transition:border-color .4s}
.value--link:hover{border-color:var(--brun)}
.secteurs{
  text-align:center; margin:0; line-height:2.6;
  font-size:.75rem; font-weight:400; letter-spacing:.28em;
  text-transform:uppercase; color:var(--brun-soft);
}
.secteurs a{transition:color .3s}
.secteurs a:hover{color:var(--brun); text-decoration:underline; text-underline-offset:.5em}

/* chiffres cliquables */
a.stat{display:block; text-decoration:none; transition:opacity .3s}
a.stat:hover{opacity:.62}

/* liens dans le bandeau du héros */
.hero__meta a{position:relative; transition:opacity .3s}
.hero__meta a::after{
  content:""; position:absolute; left:0; bottom:-.35rem; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.hero__meta a:hover::after{transform:scaleX(1); transform-origin:left}
.hero .eyebrow a:hover{text-decoration:underline; text-underline-offset:.4em}

/* fiches équipe */
.member__role{margin:.9rem 0 .8rem !important}
.member__titre{color:var(--brun); font-weight:400}
.member__bio{
  font-size:.9rem !important; line-height:1.7 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--brun-soft); font-weight:300;
}
.member h3{margin-bottom:0}

/* pied de page à 5 colonnes */
.footer__top{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
@media (max-width:1200px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}

/* --- 19. Ajouts v3 : page d'accueil (catalogue en 4, volet au survol) --- */

/* section resserrée, pour les chiffres clés et le résumé des prestations */
.section--xtight{padding-block:clamp(1.75rem,3.2vw,3rem)}

/* catalogue de l'accueil : 4 par ligne, cartes plus discrètes */
.projects--4{grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.4vw,2.25rem) var(--gut)}
.projects--4 .pcard__title{font-size:clamp(.9rem,1vw,1.02rem)}
.projects--4 .pcard__meta{font-size:.62rem}
.projects--4 .pcard__body{margin-top:.85rem}

/* volet d'information au survol d'une carte projet, depuis la droite */
.pcard__reveal{
  position:absolute; inset:0 0 0 auto; right:0; width:33.333%; height:100%;
  box-sizing:border-box; padding:1rem .9rem; z-index:3; overflow:hidden;
  background:rgba(61,41,31,.94); color:var(--beige);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  transform:translateX(100%); opacity:0;
  transition:transform .55s var(--ease), opacity .45s var(--ease);
}
.pcard:hover .pcard__reveal{transform:translateX(0); opacity:1}
.pcard__reveal h4{margin:0; font-size:.78rem; font-weight:400; line-height:1.3}
.pcard__reveal ul{margin:.5rem 0 0; display:flex; flex-direction:column; gap:.22rem}
.pcard__reveal li{font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; color:var(--beige-deep)}
.pcard__reveal p{
  margin:.6rem 0 0; font-size:.66rem; line-height:1.5; color:var(--beige-deep); font-weight:300;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
@media (hover:none){.pcard__reveal{display:none}}

/* chiffres clés, en version discrète */
.stat-row--sm{gap:clamp(1rem,2vw,1.75rem)}
.stat-row--sm b{font-size:clamp(1.25rem,1.7vw,1.65rem)}
.stat-row--sm span{font-size:.6rem}

@media (max-width:1100px){
  .projects--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .projects--4{grid-template-columns:1fr}
}

/* --- 20. Transition de page : logo au centre, au chargement et au clic -- */
.pagetrans{
  position:fixed; inset:0; z-index:9999; background:var(--blanc);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease);
}
.pagetrans.is-hidden{opacity:0; pointer-events:none}
.pagetrans__mark{
  width:clamp(6.5rem,16vw,13rem); color:var(--brun);
  opacity:0; transform:scale(.85);
  transition:opacity .55s var(--ease), transform .65s var(--ease);
}
.pagetrans.is-visible .pagetrans__mark{opacity:1; transform:scale(1)}
.pagetrans__mark svg{width:100%; height:auto; display:block}
.pagetrans__mark svg path,.pagetrans__mark svg rect{fill:currentColor}
@media (prefers-reduced-motion:reduce){.pagetrans{display:none}}

/* --- 21. Agence : équipe alignée, stagiaires, clients, carte contact ---- */

/* les 4 membres (fondateurs + équipe) alignés sur une même rangée */
.team-row{align-items:start}

.team-col__title{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:.72rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brun-soft); margin:0 0 1.8rem; padding-bottom:1rem; border-bottom:1px solid var(--gris-line);
}
.team-col__title span{font-size:.66rem; color:var(--gris); letter-spacing:.08em}

/* stagiaires : simple liste de noms, un par ligne, sous la rangée de l'équipe */
.stagiaires-list{display:flex; flex-direction:column; gap:.9rem}
.stagiaire-line{font-size:1.05rem; font-weight:300; letter-spacing:.01em}

/* clients & collaborateurs : trame de cases sobres, sans logos (flex pour éviter
   les cases vides visibles en fin de grille lorsque le nombre n'est pas un multiple) */
.clients-grid{display:flex; flex-wrap:wrap; border-top:1px solid var(--gris-line); border-left:1px solid var(--gris-line)}
.client-chip{
  flex:1 1 25%; min-width:11rem; box-sizing:border-box;
  padding:1.15rem 1.4rem; font-size:.84rem; font-weight:300;
  letter-spacing:.01em; line-height:1.35;
  border-right:1px solid var(--gris-line); border-bottom:1px solid var(--gris-line);
}

/* carte Google Maps, teintée dans les tons de la D.A. (pas de clé API disponible) */
.map-frame{position:relative; aspect-ratio:16/6; overflow:hidden; background:var(--beige)}
.map-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) sepia(.16) saturate(1.05) brightness(1.06) contrast(1.02);
}
.map-frame::after{content:""; position:absolute; inset:0; background:var(--brun); opacity:.07; mix-blend-mode:multiply; pointer-events:none}
/* variante compacte, à côté du formulaire de contact (même largeur que la colonne) */
.map-frame--side{aspect-ratio:1/1; flex:1; width:50%}
@media (max-width:900px){.map-frame--side{aspect-ratio:4/3; width:100%}}

/* lien vers la brochure d'agence, en bas de la page Agence */
.brochure-link{
  display:inline-flex; align-items:center; gap:.7rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--gris-line);
  font-size:clamp(1.1rem,1.8vw,1.5rem); font-weight:300; letter-spacing:.01em;
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.brochure-link svg{transition:transform .3s var(--ease)}
.brochure-link:hover{gap:1.1rem; border-color:var(--brun)}
.brochure-link:hover svg{transform:translate(2px,-2px)}

/* page brochure : PDF intégré */
.pdf-frame{aspect-ratio:210/297; max-width:46rem; margin:0 auto; background:var(--beige); overflow:hidden}
.pdf-frame iframe{width:100%; height:100%; border:0; display:block}
.pdf-frame--vide{display:flex; align-items:center; justify-content:center; padding:3rem}

@media (max-width:1100px){
  .team-cols{grid-template-columns:repeat(2,1fr)}
  .client-chip{flex-basis:33.333%}
}
@media (max-width:900px){
  .team-cols{grid-template-columns:1fr}
  .client-chip{flex-basis:50%}
  .map-frame{aspect-ratio:4/3}
}
@media (max-width:560px){
  .client-chip{flex-basis:100%}
}

/* --- 22. Bandeau cookies -------------------------------------------------- */
.cookiebar{
  position:fixed; left:1.25rem; right:1.25rem; bottom:1.25rem; z-index:9500;
  max-width:36rem; margin-inline:auto;
  background:var(--brun); color:var(--beige-deep);
  padding:1.3rem 1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
  box-shadow:0 20px 44px rgba(20,13,9,.3);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.cookiebar.is-visible{opacity:1; transform:none}
.cookiebar p{margin:0; font-size:.82rem; line-height:1.55; flex:1 1 15rem}
.cookiebar a{color:var(--beige); text-decoration:underline; text-underline-offset:.2em}
.cookiebar__actions{display:flex; gap:.7rem; flex:none}
.cookiebar__actions button{
  padding:.6rem 1.1rem; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--gris-line-l); transition:background-color .3s,color .3s,border-color .3s;
}
.cookiebar__actions [data-cookie="accept"]{background:var(--beige); color:var(--brun); border-color:var(--beige)}
.cookiebar__actions [data-cookie="accept"]:hover{opacity:.88}
.cookiebar__actions [data-cookie="refuse"]:hover{border-color:var(--beige)}
@media (max-width:560px){
  .cookiebar{flex-direction:column; align-items:stretch; text-align:left}
  .cookiebar__actions{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){.cookiebar{transition:none}}

/* --- Protection des photos : filigrane + anti-copie ------------------- */
img{-webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none}
.wm-wrap{position:relative; display:block; width:100%; height:100%}
.wm-badge{
  position:absolute; right:.6em; bottom:.5em; z-index:2;
  font-size:.58rem; letter-spacing:.04em; color:rgba(255,255,255,.92);
  background:rgba(61,41,31,.55); padding:.18em .55em; border-radius:2px;
  pointer-events:none; user-select:none; white-space:nowrap;
}