/* =========================================================================
   Black Rooster · éditorial luxe noir & blanc
   Cormorant Garamond (display) + Manrope (texte)
   ========================================================================= */

:root{
  --ink:#121212;
  --ink-2:#1b1b1b;
  --ink-soft:#2a2825;
  --paper:#ffffff;
  --cream:#f6f3ee;
  --cream-2:#efeae1;
  --line:#e3ddd2;
  --line-dark:#33302b;
  --text:#3a3631;
  --muted:#6e6860;
  --muted-light:#b9b2a6;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wrap:1220px;
  --pad:clamp(1.25rem, 5vw, 3rem);
  --sec-y:clamp(4.5rem, 11vh, 8.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.75;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;font-family:var(--sans);
}
.skip-link:focus{left:1rem;top:1rem;}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.section--dark :focus-visible,.hero :focus-visible{outline-color:#fff;}

.container{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}

/* ---------- Typographie ---------- */
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  margin:0 0 1.4rem;display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6;}
.section-head--center .eyebrow{justify-content:center;}
.eyebrow--light{color:var(--muted-light);}

.section-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,1.4rem + 3vw,3.6rem);
  line-height:1.08;letter-spacing:.005em;color:var(--ink);
  margin:0 0 1.5rem;
}
.section--dark .section-title,.hero-title{color:#fff;}

.lead{font-size:clamp(1.075rem,1rem + .4vw,1.3rem);line-height:1.7;color:var(--ink-soft);font-weight:400;margin:0 0 1.3rem;}
.lead--light{color:rgba(255,255,255,.82);}
p{margin:0 0 1.15rem;}

/* ---------- Boutons ---------- */
.btn{
  --bh:#111;
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;padding:1.05em 2.1em;border:1px solid var(--ink);
  background:var(--ink);color:#fff;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn--dark:hover{background:transparent;color:var(--ink);}
.btn--light{background:#fff;color:var(--ink);border-color:#fff;}
.btn--light:hover{background:transparent;color:#fff;border-color:#fff;}
.section:not(.section--dark) .btn--light{background:var(--ink);color:#fff;border-color:var(--ink);}
.section:not(.section--dark) .btn--light:hover{background:transparent;color:var(--ink);}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff;}

.link-underline{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-bottom:.35rem;border-bottom:1px solid var(--ink);
  transition:opacity .3s var(--ease),letter-spacing .3s var(--ease);
}
.link-underline:hover{opacity:.6;letter-spacing:.14em;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
  padding:.5rem 0;
}
.header-inner{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:92px;
}
.brand{position:relative;display:block;line-height:0;}
.brand-logo{height:59px;width:auto;transition:opacity .4s var(--ease);}
.brand-logo--light{position:absolute;inset:0;}
/* état par défaut (au-dessus du hero) : logo blanc */
.brand-logo--dark{opacity:0;}
.brand-logo--light{opacity:1;}
.site-header.scrolled{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line);backdrop-filter:saturate(1.1) blur(6px);}
.site-header.scrolled .brand-logo--dark{opacity:1;}
.site-header.scrolled .brand-logo--light{opacity:0;}

.nav-menu{
  list-style:none;display:flex;align-items:center;gap:2.1rem;margin:0;padding:0;
}
.nav-menu a{
  font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:#fff;position:relative;padding:.4rem 0;
  transition:color .3s var(--ease);
}
.nav-menu a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;
  transition:width .35s var(--ease);
}
.nav-menu a:not(.nav-cta):hover::after{width:100%;}
.site-header.scrolled .nav-menu a{color:var(--ink-soft);}
.nav-cta{border:1px solid rgba(255,255,255,.6);padding:.7em 1.5em !important;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);}
.nav-cta:hover{background:#fff;color:var(--ink) !important;border-color:#fff;}
.site-header.scrolled .nav-cta{border-color:var(--ink);}
.site-header.scrolled .nav-cta:hover{background:var(--ink);color:#fff !important;border-color:var(--ink);}

.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;position:relative;z-index:120;}
.nav-toggle span{display:block;height:1.5px;background:#fff;margin:5px 0;transition:transform .35s var(--ease),opacity .35s var(--ease);}
.site-header.scrolled .nav-toggle span{background:var(--ink);}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0b0b0b;}
.hero-slides{position:absolute;inset:0;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);}
.hero-slide.is-active{opacity:1;}
.hero-slide img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.64);}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,8,.52) 0%,rgba(8,8,8,.3) 40%,rgba(8,8,8,.86) 100%);
}
.hero-content{position:relative;max-width:var(--wrap);margin-inline:auto;width:100%;padding:0 var(--pad) clamp(4.5rem,12vh,8rem);}
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(3rem,2rem + 8vw,7.5rem);line-height:.98;letter-spacing:.01em;margin:0 0 1.4rem;
}
.hero-sub{max-width:44ch;font-size:clamp(1.05rem,1rem + .5vw,1.35rem);line-height:1.65;color:rgba(255,255,255,.9);margin:0 0 2.2rem;font-weight:300;}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}
.hero-progress{position:absolute;right:var(--pad);bottom:2.2rem;display:flex;gap:10px;z-index:3;}
.hero-dot{width:40px;height:3px;padding:0;border:0;background:rgba(255,255,255,.28);cursor:pointer;position:relative;overflow:hidden;border-radius:2px;transition:background .3s var(--ease);}
.hero-dot:hover{background:rgba(255,255,255,.5);}
.hero-dot i{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;display:block;}
.hero-dot.is-active i{animation:heroFill 7s linear forwards;}
@keyframes heroFill{from{width:0;}to{width:100%;}}
@media (prefers-reduced-motion: reduce){.hero-slide{transition:opacity .01s;}.hero-dot.is-active i{animation:none;width:100%;}}
.hero-scroll{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);width:1px;height:52px;background:rgba(255,255,255,.22);overflow:hidden;z-index:3;}
.hero-scroll::after{content:"";position:absolute;top:0;left:0;width:100%;height:45%;background:#fff;animation:scrollLine 2.4s var(--ease) infinite;}
@keyframes scrollLine{0%{transform:translateY(-100%);}60%,100%{transform:translateY(260%);}}
@media (prefers-reduced-motion: reduce){.hero-scroll::after{animation:none;top:auto;bottom:0;height:30%;}}

/* ---------- Sections ---------- */
.section{padding-block:var(--sec-y);}
.section--dark{background:var(--ink);color:#fff;}
.section--cream{background:var(--cream);}
.section-head{max-width:760px;margin:0 auto;}
.section-head--center{text-align:center;}

/* Split texte / média */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5.5rem);align-items:center;}
.split--reverse .split-media{order:2;}
.split-text{max-width:38rem;}
.split-media{position:relative;}
.split-media img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .8s var(--ease);}
.split-media:hover img{filter:grayscale(0) contrast(1);}
.section--dark .split-media img,.agence .split-media img{aspect-ratio:4/5;}
.media-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;}
.media-caption{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0;}
.media-credit{font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;color:var(--muted);margin:0;text-align:right;white-space:nowrap;}
.proj-credit{font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin:.8rem 0 0;text-align:right;}
.loft-poles{list-style:none;padding:0;margin:0 0 1.6rem;}
.loft-poles li{position:relative;padding-left:1.3rem;margin-bottom:.5rem;color:var(--ink-soft);font-size:1.02rem;}
.loft-poles li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1px;background:var(--ink);}
.signature{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.4;color:var(--ink);margin-top:1.8rem;padding-left:1.4rem;border-left:2px solid var(--ink);}
.section--dark .signature{color:#fff;border-color:#fff;}

/* Valeurs */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(3.5rem,8vh,6rem);padding-top:clamp(3rem,6vh,4.5rem);border-top:1px solid var(--line);}
.value-num{font-family:var(--serif);font-size:1.6rem;color:var(--muted);display:block;margin-bottom:.6rem;}
.value h3{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--ink);margin:0 0 .7rem;}
.value p{font-size:.98rem;color:var(--text);margin:0;}

/* Expertise */
.expertise .section-head{margin-bottom:clamp(3rem,7vh,5rem);}
.expertise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
.expertise-item{background:var(--ink);padding:clamp(1.8rem,4vw,3rem);transition:background .4s var(--ease);}
.expertise-item:hover{background:var(--ink-2);}
.expertise-item h3{font-family:var(--serif);font-weight:600;font-size:1.55rem;color:#fff;margin:0 0 .8rem;}
.expertise-item p{color:rgba(255,255,255,.72);font-size:.98rem;margin:0;}
.expertise-list{list-style:none;padding:0;margin:0;}
.expertise-list li{position:relative;padding-left:1.1rem;margin-bottom:.55rem;color:rgba(255,255,255,.74);font-size:.95rem;line-height:1.4;}
.expertise-list li:last-child{margin-bottom:0;}
.expertise-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:rgba(255,255,255,.5);}

/* Équipe */
.equipe .section-head{margin-bottom:clamp(3rem,7vh,5rem);}
.team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,3vw,2.5rem);}
.team-card{flex:0 0 calc((100% - 3*clamp(1.5rem,3vw,2.5rem))/4);min-width:150px;max-width:280px;text-align:center;}
.team-photo{aspect-ratio:3/4;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted-light);margin-bottom:1.3rem;}
.team-photo svg{width:40%;height:auto;}
.team-name{font-family:var(--serif);font-weight:600;font-size:1.45rem;line-height:1.15;color:var(--ink);margin:0 0 .3rem;}
.team-company{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 .3rem;}
.team-role{font-family:var(--sans);font-size:.82rem;line-height:1.4;color:var(--muted);margin:0;}
.team-tel{font-family:var(--sans);font-size:.78rem;line-height:1.4;margin:.45rem 0 0;}
.team-tel a{color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .4s var(--ease);}
.team-tel a:hover{color:var(--ink);}

/* Réalisations */
.realisations .section-head{margin-bottom:clamp(3rem,7vh,5rem);}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.real-card{display:flex;flex-direction:column;}
.real-media{overflow:hidden;margin-bottom:1.5rem;}
.real-media img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease),transform 1.2s var(--ease);}
.real-card:hover .real-media img{filter:grayscale(0) contrast(1);transform:scale(1.04);}
.real-cat{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;}
.real-title{font-family:var(--serif);font-weight:600;font-size:1.85rem;line-height:1.1;color:var(--ink);margin:0 0 .35rem;}
.real-place{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:0 0 1rem;}
.real-resume{font-size:.96rem;color:var(--text);margin:0 0 1rem;}
.real-services{font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:1rem;margin:auto 0 0;}
.real-more{text-align:center;margin-top:clamp(2.5rem,6vh,4rem);font-style:italic;font-family:var(--serif);font-size:1.2rem;color:var(--muted);}

/* Widgets placeholders */
.widget-placeholder{
  border:1px dashed var(--line);background:var(--paper);
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;
  text-align:center;padding:2.5rem;
}
.section--cream .widget-placeholder{background:var(--cream-2);border-color:var(--cream-2);}
.widget-placeholder p{font-family:var(--sans);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;}

/* Contact (fond clair, formulaire mis en valeur) */
.contact-coords{list-style:none;margin:2rem 0 0;padding:0;}
.contact-coords li{display:grid;grid-template-columns:130px 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);align-items:baseline;}
.contact-coords li span{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.contact-coords li a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease);}
.contact-coords li a:hover{border-color:var(--ink);}

.contact-card{background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -38px rgba(20,16,10,.35);padding:clamp(1.7rem,4vw,2.9rem);}
.contact-form{display:grid;gap:1.4rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.field{display:grid;gap:.5rem;}
.field label{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.field label span{color:var(--ink);margin-left:.2rem;}
.field input,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:.7rem 0;transition:border-color .3s var(--ease);
}
.field input::placeholder{color:var(--muted);opacity:1;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field textarea{resize:vertical;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{margin:.3rem 0 0;font-size:.9rem;min-height:1.2em;white-space:pre-line;}
.form-status--ok{color:#1f6b3a;}
.form-status--error{color:#9e2b2b;}
.contact{padding-block-start:calc(var(--sec-y) * .5);}
.contact .btn{justify-self:start;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding-top:clamp(3.5rem,8vh,5.5rem);}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:clamp(2rem,5vw,4rem);padding-bottom:3rem;}
.footer-brand{text-align:center;}
.footer-brand img{height:88px;width:auto;margin:0 auto 1.2rem;}
.footer-brand p{font-family:var(--serif);font-size:1.15rem;line-height:1.4;color:#fff;margin:0;}
.footer-social{display:flex;gap:1.1rem;justify-content:center;margin-top:1.1rem !important;}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:rgba(255,255,255,.72);transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.footer-social a:hover{color:#111;background:#fff;border-color:#fff;}
.footer-social svg{width:19px;height:19px;}
.footer-nav{display:flex;flex-direction:column;gap:.7rem;}
.footer-nav a{text-decoration:none;font-size:.9rem;color:rgba(255,255,255,.7);transition:color .3s var(--ease);}
.footer-nav a:hover{color:#fff;}
.footer-legal p{font-size:.88rem;margin:0 0 .5rem;}
.footer-legal a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .3s var(--ease);}
.footer-legal a:hover{color:#fff;}
.footer-links{margin-top:1rem !important;}
.footer-bottom{border-top:1px solid var(--line-dark);padding-block:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.78rem;color:rgba(255,255,255,.62);}
.footer-bottom a{color:var(--muted-light);}
.footer-bottom .credits{max-width:60ch;}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal].visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;transform:none;transition:none;}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:block;}
  .nav-menu{
    position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);transition:transform .5s var(--ease);
  }
  .nav-menu{z-index:105;}
  /* emblème Black Rooster en filigrane sur le fond du menu */
  .nav-menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:url("../images/embleme-white.svg") no-repeat center;background-size:min(72vw,360px);opacity:.07;}
  .nav.open .nav-menu{transform:translateX(0);}
  .nav-menu a{color:#fff !important;font-size:1.15rem;}
  .nav-cta{border-color:rgba(255,255,255,.6) !important;padding:.7em 1.6em !important;}
  /* burger animé en croix à l'ouverture */
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav.open .nav-toggle span:nth-child(2){opacity:0;}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  .nav.open .nav-toggle span{background:#fff;}
  /* header plus compact sur mobile */
  .brand-logo{height:48px;}
  .header-inner{min-height:72px;}
  /* pas de backdrop-filter sur mobile : sinon le header devient le bloc conteneur
     du menu plein écran (position:fixed) et le menu se retrouve coincé dans la barre */
  .site-header.scrolled{backdrop-filter:none;}
  .split{grid-template-columns:1fr;gap:2.5rem;}
  .split--reverse .split-media{order:0;}
  .split-media img{aspect-ratio:16/11;}
  .agence .split-media img{aspect-ratio:4/5;max-width:420px;margin-inline:auto;}
  .media-caption{position:static;transform:none;}
  .values{grid-template-columns:1fr;gap:2rem;}
  .expertise-grid{grid-template-columns:1fr;}
  .team-card{flex:0 0 calc((100% - clamp(1.5rem,3vw,2.5rem))/2);}
  .real-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto;}
  .real-media img{aspect-ratio:4/3;}
  .footer-inner{grid-template-columns:1fr;text-align:center;}
  .footer-nav{align-items:center;}
  .footer-bottom{justify-content:center;text-align:center;}
  .contact-coords li{grid-template-columns:1fr;gap:.2rem;}
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .btn{display:block;text-align:center;}
  .hero-actions{flex-direction:column;}
  .contact .btn{justify-self:center;}
  /* hero mobile */
  .hero{min-height:100svh;align-items:center;}
  .hero-title{font-size:clamp(2.4rem,9.5vw,3.5rem);}
  .hero-content{padding-block:0;}
  .hero-sub{font-size:1.02rem;line-height:1.55;margin-bottom:1.8rem;}
  .eyebrow{margin-bottom:1rem;}
  /* indicateur de scroll : à droite, centré verticalement */
  .hero-scroll{display:block;left:auto;right:12px;top:50%;bottom:auto;transform:translateY(-50%);}
  /* 5 indicateurs de diaporama : centrés en bas */
  .hero-progress{left:50%;right:auto;transform:translateX(-50%);bottom:1.6rem;}
  .brand-logo{height:42px;}
}

/* ---------- Pages légales ---------- */
.legal-header{position:static;background:#fff;border-bottom:1px solid var(--line);}
.legal-header .brand-logo--dark{opacity:1;position:static;}
.legal-header .brand-logo--light{display:none;}
.legal-header .header-inner{min-height:70px;}
.legal-back{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);}
.legal-back:hover{color:var(--ink);}
.legal-page{max-width:820px;margin:0 auto;padding:clamp(6rem,14vh,9rem) var(--pad) clamp(3.5rem,8vh,6rem);}
.legal-page .eyebrow{color:var(--muted);}
.legal-page h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,1.6rem + 3vw,3.4rem);line-height:1.1;color:var(--ink);margin:0 0 2.5rem;}
.legal-page h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;color:var(--ink);margin:2.6rem 0 .9rem;}
.legal-page p,.legal-page li{color:var(--text);}
.legal-page ul{padding-left:1.2rem;margin:0 0 1.2rem;}
.legal-page li{margin-bottom:.5rem;}
.legal-page a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}

/* ---------- Vignette équipe : illustration ---------- */
.team-photo--img{display:block;padding:0;overflow:hidden;background:var(--ink);border-color:var(--ink);}
.team-photo--img picture{display:block;width:100%;height:100%;}
.team-photo--img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);}
/* Survol : photo réelle par défaut → illustration (coq) au survol */
.team-photo--reveal{position:relative;cursor:pointer;}
.team-photo--reveal picture{position:absolute;inset:0;transition:opacity .6s var(--ease);}
.team-photo--reveal .team-illus{opacity:0;}
.team-card:hover .team-photo--reveal .team-illus,
.team-photo--reveal:focus .team-illus,
.team-photo--reveal:focus-within .team-illus{opacity:1;}

/* ---------- Le Loft : diaporama + lightbox ---------- */
.loft-slider{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;border:0;background:#0c0c0c;cursor:zoom-in;overflow:hidden;}
.loft-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);}
.loft-slide.is-active{opacity:1;}
.loft-slide img{width:100%;height:100%;object-fit:cover;}
.loft-zoom{position:absolute;right:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.65em 1.1em;background:rgba(12,12,12,.55);color:#fff;font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(4px);transition:background .3s var(--ease);pointer-events:none;}
.loft-slider:hover .loft-zoom{background:rgba(12,12,12,.85);}
.loft-zoom svg{width:15px;height:15px;}

.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(8,8,8,.95);padding:clamp(1rem,4vw,3rem);}
.lightbox[hidden]{display:none;}
.lightbox-figure{margin:0;max-width:min(1200px,92vw);display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.lightbox-figure img{max-width:100%;max-height:82vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.55);}
.lightbox-count{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;color:rgba(255,255,255,.65);}
.lightbox-close{position:absolute;top:1.1rem;right:1.4rem;width:48px;height:48px;background:none;border:0;color:#fff;font-size:2.1rem;line-height:1;cursor:pointer;opacity:.8;transition:opacity .3s var(--ease);}
.lightbox-close:hover{opacity:1;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease);}
.lightbox-nav:hover{background:rgba(255,255,255,.18);}
.lightbox-prev{left:clamp(.5rem,3vw,2rem);}
.lightbox-next{right:clamp(.5rem,3vw,2rem);}
@media (max-width:560px){.lightbox-nav{width:42px;height:42px;font-size:1.4rem;}}

/* ---------- Fond animé (bloc expertise) ---------- */
.expertise{position:relative;overflow:hidden;}
.expertise>.container{position:relative;z-index:2;}
.expertise-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.expertise-bg::before{content:"";position:absolute;inset:-25%;background:repeating-linear-gradient(115deg,transparent 0 44px,rgba(255,255,255,.04) 44px 45px);animation:bgLines 34s linear infinite;}
.expertise-bg span{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,0) 70%);filter:blur(3px);will-change:transform,opacity;}
.expertise-bg span:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-16vw;animation:drift1 24s ease-in-out infinite;}
.expertise-bg span:nth-child(2){width:34vw;height:34vw;right:-8vw;top:16%;animation:drift2 30s ease-in-out infinite;}
.expertise-bg span:nth-child(3){width:26vw;height:26vw;left:38%;bottom:-14vw;animation:drift3 36s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);opacity:.4;}50%{transform:translate(9vw,6vw) scale(1.2);opacity:1;}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);opacity:1;}50%{transform:translate(-8vw,-4vw) scale(1.12);opacity:.5;}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);opacity:.55;}50%{transform:translate(5vw,-6vw) scale(1.22);opacity:1;}}
@keyframes bgLines{from{transform:translateX(0);}to{transform:translateX(90px);}}
@media (prefers-reduced-motion: reduce){.expertise-bg::before,.expertise-bg span{animation:none;}}

/* ---------- Instagram (démo) ---------- */
/* Instagram suit directement L'agence (les 3 valeurs) → on resserre l'espace au-dessus */
.agence + .instagram{padding-top:clamp(1rem,3vh,2.5rem);}
.ig-head{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(1.2rem,4vw,3rem);margin-bottom:2.2rem;}
.ig-profile{display:flex;align-items:center;gap:.9rem;}
.ig-ava{width:52px;height:52px;flex:0 0 52px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.ig-ava img{width:32px;height:32px;}
.ig-name{font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--ink);margin:0;line-height:1.2;}
.ig-user{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin:0;}
.ig-stats{display:flex;gap:1.7rem;}
.ig-stats span{display:flex;flex-direction:column;align-items:center;font-size:.78rem;color:var(--muted);}
.ig-stats strong{font-size:1.05rem;color:var(--ink);font-weight:700;}
.ig-follow-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--ink);border:1px solid var(--ink);padding:.75em 1.4em;transition:background .3s var(--ease),color .3s var(--ease);}
.ig-follow-btn:hover{background:transparent;color:var(--ink);}
.ig-glyph{width:18px;height:18px;}
.ig-viewport{position:relative;}
.ig-track{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.ig-track::-webkit-scrollbar{display:none;}
.ig-item{position:relative;flex:0 0 clamp(220px,30%,300px);aspect-ratio:4/5;scroll-snap-align:start;overflow:hidden;display:block;}
.ig-item picture{display:block;width:100%;height:100%;}
.ig-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);transition:filter .6s var(--ease),transform 1s var(--ease);}
.ig-item:hover img{filter:grayscale(0);transform:scale(1.05);}
.ig-item::before{content:"";position:absolute;top:.6rem;right:.6rem;width:20px;height:20px;z-index:2;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='4' width='12' height='12' rx='2.5' fill='white'/%3E%3Crect x='4' y='8' width='12' height='12' rx='2.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));opacity:.95;}
.ig-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.45rem;color:#fff;font-family:var(--sans);font-weight:700;font-size:.95rem;background:rgba(10,10,10,.42);opacity:0;transition:opacity .4s var(--ease);z-index:1;}
.ig-item:hover .ig-ov,.ig-item:focus-visible .ig-ov{opacity:1;}
.ig-ov svg{width:20px;height:20px;}
.ig-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;z-index:3;box-shadow:0 6px 20px rgba(0,0,0,.12);transition:background .3s var(--ease);}
.ig-nav:hover{background:var(--cream);}
.ig-prev{left:-10px;}
.ig-next{right:-10px;}

/* ---------- Avis (démo) ---------- */
.reviews{background:#fff;border:1px solid var(--line);box-shadow:0 34px 70px -42px rgba(20,16,10,.3);padding:clamp(1.4rem,3vw,2.2rem);}
.reviews__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem;}
.reviews__score{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.reviews__excellent{font-family:var(--sans);font-weight:700;font-size:.98rem;color:var(--ink);}
.stars{color:var(--ink);letter-spacing:.08em;line-height:1;}
.stars--lg{font-size:1.15rem;}
.reviews__note{font-weight:700;color:var(--ink);}
.reviews__src-lbl{font-size:.82rem;color:var(--muted);}
.reviews__cta{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:.75em 1.4em;transition:background .3s var(--ease),color .3s var(--ease);}
.reviews__cta:hover{background:var(--ink);color:#fff;}
.reviews__viewport{position:relative;}
.reviews__track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.3rem;}
.reviews__track::-webkit-scrollbar{display:none;}
.review{flex:0 0 clamp(240px,78%,320px);scroll-snap-align:start;background:var(--cream);border:1px solid var(--line);padding:1.5rem;display:flex;flex-direction:column;}
.review__top{display:flex;align-items:center;gap:.75rem;margin-bottom:.9rem;}
.review__ava{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.15rem;}
.review__id{flex:1;min-width:0;}
.review__name{font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--ink);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.review__date{font-size:.76rem;color:var(--muted);margin:0;}
.review__src{width:24px;height:24px;flex:0 0 24px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:.9rem;color:var(--ink-soft);}
.review__stars{display:flex;align-items:center;gap:.45rem;margin-bottom:.7rem;}
.review__verif{width:15px;height:15px;color:var(--muted);}
.review__text{font-size:.92rem;line-height:1.6;color:var(--text);margin:0;}
.reviews__nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;z-index:2;box-shadow:0 6px 20px rgba(0,0,0,.12);transition:background .3s var(--ease);}
.reviews__nav:hover{background:var(--cream);}
.reviews__prev{left:-12px;}
.reviews__next{right:-12px;}
@media (max-width:900px){
  .ig-item{flex-basis:44%;}
  .review{flex-basis:82%;}
  .ig-prev,.reviews__prev{left:0;}
  .ig-next,.reviews__next{right:0;}
}

/* ---------- Bandeau cookies ---------- */
#cookie-banner{
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:95;
  max-width:420px;background:#fff;border:1px solid var(--line);
  box-shadow:0 26px 60px -26px rgba(20,16,10,.45);padding:1.4rem 1.5rem;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
#cookie-banner.hidden{opacity:0;transform:translateY(24px);pointer-events:none;visibility:hidden;}
#cookie-banner p{font-size:.85rem;line-height:1.55;color:var(--text);margin:0 0 1.1rem;}
#cookie-banner a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.cookie-actions{display:flex;gap:.7rem;}
.cookie-actions button{
  font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.75em 1.4em;cursor:pointer;border:1px solid var(--ink);transition:background .3s var(--ease),color .3s var(--ease);
}
.cookie-accept{background:var(--ink);color:#fff;}
.cookie-accept:hover{background:transparent;color:var(--ink);}
.cookie-refuse{background:transparent;color:var(--ink);}
.cookie-refuse:hover{background:var(--ink);color:#fff;}
.cookie-manage{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.8em 1.5em;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:background .3s var(--ease),color .3s var(--ease);}
.cookie-manage:hover{background:transparent;color:var(--ink);}
@media (max-width:560px){
  #cookie-banner{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;}
  .cookie-actions button{flex:1;}
}

/* ---------- Réalisations : rubrique + fiches ---------- */
.realisations-page,.projet-page{padding-top:92px;}          /* dégager le header fixe */
.rp-head{padding-top:clamp(2.5rem,6vh,4rem);}
.real-card{color:inherit;text-decoration:none;}            /* cartes home cliquables */

.proj-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:clamp(2rem,5vh,3.5rem) 0 clamp(2.5rem,6vh,4rem);}
.proj-filter{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);padding:.7em 1.4em;cursor:pointer;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.proj-filter:hover{color:var(--ink);border-color:var(--ink);}
.proj-filter.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}

.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
.proj-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;}
.proj-card.is-hidden{display:none;}
.proj-media{overflow:hidden;margin-bottom:1.2rem;}
.proj-media img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .8s var(--ease),transform 1.2s var(--ease);}
.proj-card:hover .proj-media img{filter:grayscale(0);transform:scale(1.04);}
.proj-cat{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem;}
.proj-title{font-family:var(--serif);font-weight:600;font-size:1.75rem;line-height:1.1;color:var(--ink);margin:0 0 .6rem;}
.proj-more{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink);padding-bottom:.2rem;align-self:flex-start;transition:opacity .3s var(--ease);}
.proj-card:hover .proj-more{opacity:.55;}

.breadcrumb{font-family:var(--sans);font-size:.75rem;letter-spacing:.05em;color:var(--muted);margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--ink);}
.breadcrumb span[aria-current]{color:var(--ink);}
.projet-hero{padding-bottom:clamp(2rem,5vh,3rem);}
.projet-hero .eyebrow{color:var(--muted);}
.projet-cover{margin-top:2rem;}
.projet-cover img{width:100%;height:auto;display:block;}
.projet-detail .split{align-items:start;gap:clamp(2rem,6vw,5rem);}
.projet-h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--ink);margin:2rem 0 1rem;}
.projet-programme{list-style:none;padding:0;margin:0;}
.projet-programme li{position:relative;padding-left:1.4rem;margin-bottom:.7rem;color:var(--text);}
.projet-programme li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--ink);}
.projet-specs{margin:0;border-top:1px solid var(--line);}
.projet-specs > div{display:grid;grid-template-columns:1fr 1.5fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);}
.projet-specs dt{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0;}
.projet-specs dd{margin:0;color:var(--ink);font-size:.95rem;}
.proj-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.proj-gallery__item{margin:0;overflow:hidden;}
.proj-gallery__item img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .8s var(--ease),transform 1.2s var(--ease);}
.proj-gallery__item:hover img{filter:grayscale(0);transform:scale(1.04);}
.projet-back{text-align:center;margin-top:clamp(2.5rem,6vh,4rem);}
@media (max-width:900px){
  .proj-grid{grid-template-columns:repeat(2,1fr);}
  .proj-gallery{grid-template-columns:repeat(2,1fr);}
  .projet-specs > div{grid-template-columns:1fr;gap:.2rem;}
}
@media (max-width:560px){
  .proj-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}
}


/* ==========================================================================
   Socle des modules Blog et Réalisations.
   --------------------------------------------------------------------------
   CE FICHIER N'EST PAS COPIÉ TEL QUEL : gen-site.js l'AJOUTE à la feuille finale,
   APRÈS l'éventuelle feuille propre au client.

   Pourquoi : un site à charte sur mesure remplace css/style.css par la sienne.
   Tant que ce socle vivait dedans, il disparaissait avec — les pages des modules
   se retrouvaient sans mise en page, et seules subsistaient les retouches du
   client, qui ajustaient des règles absentes. Le sortir d'ici garantit que le
   fonctionnement visuel des modules survit à n'importe quelle charte.

   Ordre d'assemblage : style.css du client · CE SOCLE · template/css/modules.css
   ========================================================================== */

/* ============================ BLOG ============================ */
.blog-list h1, .blog-article h1 { margin-bottom: .5rem; }
.blog-list__intro { color: var(--c-muted); margin-bottom: 2rem; }
.blog-fil { font-size: .85rem; color: var(--c-muted); margin-bottom: 1.2rem; }

.blog-themes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.blog-theme {
  padding: .38rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600;
  border: 1px solid rgba(0,0,0,.12); color: var(--c-muted); text-decoration: none; transition: .18s ease;
}
.blog-theme:hover { border-color: var(--c-accent); color: var(--c-text); }
.blog-theme.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.blog-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.blog-card { flex: 0 0 calc((100% - 3rem) / 3); min-width: 260px; }
.blog-card__link {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card__link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.09); border-color: var(--c-accent); }
.blog-card__cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(0,0,0,.04); }
/* <picture> est en ligne par défaut : sans ce display:block, il ne remplit pas le
   cadre, l'image garde ses proportions naturelles et laisse une bande grise. */
.blog-card__cover picture { display: block; width: 100%; height: 100%; }
.blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; flex: 1; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .82rem; color: var(--c-muted); }
.blog-card__cat {
  padding: .18rem .6rem; border-radius: 999px; font-weight: 600; font-size: .74rem;
  letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.blog-card__title { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.blog-card__chapo { color: var(--c-muted); font-size: .95rem; flex: 1; }
.blog-card__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Article */
.blog-article .container { max-width: 46rem; }
.blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; color: var(--c-muted); margin-bottom: .7rem; }
.blog-article__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 2rem; }
.blog-article__cover { display: block; margin: 0 0 2.2rem; }
.blog-article__cover img { width: 100%; height: auto; border-radius: 12px; }

.blog-sommaire { margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-sommaire p { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--c-muted); margin-bottom: .5rem; }
.blog-sommaire ul { list-style: none; padding: 0; margin: 0; }
.blog-sommaire li + li { margin-top: .3rem; }

.blog-article__corps > * + * { margin-top: 1.15rem; }
.blog-article__corps h2 { font-size: 1.4rem; margin-top: 2.4rem; scroll-margin-top: 5rem; }
.blog-article__corps h3 { font-size: 1.12rem; margin-top: 1.8rem; }
.blog-article__corps ul { padding-left: 1.2rem; }
.blog-article__corps li + li { margin-top: .4rem; }
.blog-article__corps blockquote {
  margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--c-accent);
  background: rgba(0,0,0,.03); border-radius: 0 8px 8px 0;
}
.blog-article__corps blockquote p { margin: 0; font-style: italic; }
.blog-article__corps blockquote cite { display: block; margin-top: .6rem; font-size: .88rem; font-style: normal; color: var(--c-muted); }
.blog-figure { margin: 2rem 0; }
.blog-figure img { width: 100%; height: auto; border-radius: 10px; display: block; }
.blog-figure figcaption { margin-top: .5rem; font-size: .86rem; color: var(--c-muted); }
.blog-cta { margin: 2.4rem 0; padding: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 12px; text-align: center; }
.blog-cta p { margin-bottom: 1rem; font-size: 1.05rem; }

.blog-faq { margin-top: 3rem; }
.blog-faq h2 { scroll-margin-top: 5rem; }
.blog-faq__item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 1rem 0; }
.blog-faq__item summary { cursor: pointer; font-weight: 600; list-style: none; }
.blog-faq__item summary::-webkit-details-marker { display: none; }
.blog-faq__item summary::after { content: "+"; float: right; color: var(--c-muted); }
.blog-faq__item[open] summary::after { content: "–"; }
.blog-faq__item > div { margin-top: .7rem; color: var(--c-muted); }

.blog-article__retour { display: inline-block; margin-top: 3rem; font-weight: 600; }

@media (max-width: 980px) { .blog-card { flex: 0 0 calc((100% - 1.5rem) / 2); } }
@media (max-width: 620px) { .blog-card { flex: 0 0 100%; } }
.blog-home__tous { margin-top: 2.2rem; text-align: center; }

/* Article : colonne de lecture + colonne latérale (sommaire puis partage) */
.blog-article .container { max-width: 68rem; }
.blog-article__grille { display: block; }
.blog-article__lecture { max-width: 46rem; margin: 0 auto; }
/* L'en-tête vit DANS la colonne de lecture : hors d'elle, il resterait centré
   sur la page pendant que le texte est décalé par le sommaire, et les deux ne
   s'aligneraient pas. */

.blog-partage { padding: 1.1rem 1.4rem; background: rgba(0,0,0,.03); border-radius: 10px; }
.blog-partage__titre { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-bottom: .7rem; }
.blog-partage__liens { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-partage__liens > * {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; cursor: pointer;
  color: var(--c-muted); transition: .18s ease; padding: 0;
}
.blog-partage__liens > *:hover { border-color: var(--c-accent); color: var(--c-primary); transform: translateY(-2px); }
.blog-partage__liens svg { width: 17px; height: 17px; fill: currentColor; }
.blog-partage__copie.copie { border-color: var(--c-accent); color: var(--c-primary); }
.blog-partage__copie.copie::after {
  content: "Lien copié"; position: absolute; margin-top: -3.2rem; padding: .3rem .6rem;
  font-size: .78rem; white-space: nowrap; background: var(--c-primary); color: #fff; border-radius: 6px;
}

@media (min-width: 1080px) {
  .blog-article__grille { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 3rem; justify-content: center; align-items: start; }
  .blog-article__lecture { margin: 0; max-width: none; }
  .blog-cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1rem; }
  .blog-cote .blog-sommaire { margin: 0; background: transparent; border-left: 2px solid rgba(0,0,0,.12); border-radius: 0; padding: .2rem 0 .2rem 1.1rem; }
  .blog-cote .blog-partage { background: transparent; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid rgba(0,0,0,.12); }
  /* Sans sommaire, la colonne n'a qu'un bloc : on la garde alignée en haut. */
  .blog-cote[data-sans-sommaire] { padding-top: .2rem; }
}

/* ============================ PORTFOLIO ============================ */
/* Grille et non flex : avec des bases en calc((100% - 2 × écart) / 3), changer
   l'écart depuis la feuille d'un client faisait retomber la grille à deux
   colonnes sans que rien ne le signale. */
.projets-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projet-carte { min-width: 0; }
.projet-carte__lien {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 12px; color: inherit; text-decoration: none; transition: .2s ease;
}
.projet-carte__lien:hover { transform: translateY(-3px); }
.projet-carte__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.05); border-radius: 12px; }
.projet-carte__image picture { display: block; width: 100%; height: 100%; }
.projet-carte__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-carte__lien:hover .projet-carte__image img { transform: scale(1.04); }
.projet-carte__corps { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .2rem 0; }
.projet-carte__cat {
  align-self: flex-start; padding: .18rem .6rem; border-radius: 999px; text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  background: var(--c-accent-soft, rgba(0,0,0,.05)); color: var(--c-accent-ink, inherit);
}
.projet-carte__titre { font-family: var(--f-head, inherit); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.projet-carte__chapo { color: var(--c-muted); font-size: .95rem; }

/* Fiche projet */
.projet .container { max-width: 68rem; }
.projet__hero { display: block; margin-bottom: 2.4rem; }
.projet__hero img { width: 100%; height: auto; border-radius: 12px; }
.projet__grille { display: block; }
.projet__chapo { font-size: 1.12rem; line-height: 1.6; color: var(--c-muted); margin-bottom: 1.6rem; }
.projet__descriptif > * + * { margin-top: 1.15rem; }
.projet__descriptif h2 { font-size: 1.35rem; margin-top: 2rem; }
.projet__descriptif ul, .projet__descriptif ol { padding-left: 1.2rem; }

.projet-fiche { margin: 0 0 1.6rem; }
.projet-fiche__ligne { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 0; border-top: 1px solid rgba(0,0,0,.08); }
.projet-fiche__ligne:first-child { border-top: none; }
.projet-fiche dt { flex: 0 0 100%; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.projet-fiche dd { font-size: .98rem; }

.projet-galerie { display: flex; flex-wrap: wrap; gap: 1rem; margin: 3rem 0 0; }
.projet-galerie__item { flex: 0 0 calc((100% - 2rem) / 3); min-width: 240px; margin: 0; }
/* Toutes les vignettes au même format : une grille de photos aux hauteurs
   différentes se lit comme un désordre, alors que le travail montré ne l'est pas.
   La photo entière, non recadrée, est servie à l'agrandissement. */
.projet-galerie__voir {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.projet-galerie__voir picture { display: block; width: 100%; }
.projet-galerie__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.projet-galerie__voir:hover img { transform: scale(1.04); }
.projet-galerie__item figcaption { margin-top: .4rem; font-size: .84rem; color: var(--c-muted); }

@media (min-width: 1080px) {
  .projet__grille { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
  .projet__cote { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.2rem; }
}
@media (max-width: 980px) {
  .projets-grille, .projets-grille--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projet-galerie__item { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 620px) {
  .projets-grille, .projets-grille--home { grid-template-columns: 1fr; }
  .projet-galerie__item { flex: 0 0 100%; }
}

/* Agrandissement d'une photo de galerie */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.5rem; background: rgba(15,15,15,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__cadre { margin: 0; max-width: min(92vw, 1400px); max-height: 88vh; display: flex; flex-direction: column; gap: .8rem; }
.lightbox__cadre img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto; }
.lightbox__cadre figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.lightbox__cadre figcaption[hidden] { display: none; }
.lightbox__nav, .lightbox__fermer {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; transition: background .18s ease;
}
.lightbox__nav { width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; }
.lightbox__nav:hover, .lightbox__fermer:hover { background: rgba(255,255,255,.22); }
.lightbox__fermer { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.lightbox__compteur { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.65); font-size: .85rem; }
@media (max-width: 720px) {
  .lightbox { padding: .8rem; gap: .4rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__cadre img { max-height: 70vh; }
}

/* Lien de carte projet : présent dans le flux, pas seulement au survol. */
.projet-carte__more { font-weight: 600; font-size: .9rem; color: var(--c-accent-ink, var(--c-primary)); }

/* Message affiché quand un filtre ne laisse rien. */
.filtre-vide { margin-top: 2rem; text-align: center; color: var(--c-muted); }


/* ---- Retouches propres au client (template/css/modules.css) ---- */
/* ==========================================================================
   Black Rooster — habillage des modules
   --------------------------------------------------------------------------
   Le FONCTIONNEMENT des réalisations est celui de tous les sites Rhiino ; seule
   l'apparence est propre à Black Rooster. Ce fichier est ajouté à style.css à la
   génération : il ne remplace rien, il repeint.

   Les valeurs ci-dessous sont REPRISES du gabarit sur mesure d'origine
   (.projet-page, .projet-h2, .projet-specs, .proj-gallery, .lightbox-*), pas
   approchées à l'œil : c'est ce qui rend la bascule invisible pour le visiteur.
   ========================================================================== */

/* ---- Liste des réalisations ---- */
.projets-liste { padding-top: 92px; padding-bottom: clamp(3rem, 7vw, 6rem); }
.projets-liste__intro { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); text-align: center; }
.projets-liste__surtitre {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem;
}
.projets-liste__surtitre::before { content: ""; width: 34px; height: 1px; background: var(--muted-light); }
.projets-liste__texte { font-family: var(--sans); color: var(--text); margin-top: 1.2rem; }
.projets-liste .container, .projet .container { max-width: var(--wrap); }
.projets-liste h1, .projet h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.05;
  font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ink);
}
.projets-liste__intro h1 { margin: 0; }

.projets-grille { gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.5vw, 2rem); }
.projet-carte__cat { font-size: .66rem; letter-spacing: .18em; line-height: 1.5; }
.projet-carte__more {
  order: 3; margin-top: .5rem; padding-bottom: .25rem; align-self: flex-start;
  font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line);
}
.projet-carte__lien:hover .projet-carte__more { border-bottom-color: var(--ink); }
.projet-carte__lien { border-radius: 0; }
.projet-carte__lien:hover { transform: none; }
.projet-carte__image { border-radius: 0; aspect-ratio: 3 / 2; background: var(--cream-2); }
.projet-carte__image img { filter: grayscale(1); transition: filter .5s ease, transform .6s ease; }
.projet-carte__lien:hover .projet-carte__image img { filter: grayscale(0); transform: scale(1.03); }
.projet-carte__corps { padding: 1rem 0 0; gap: .4rem; }
.projet-carte__cat {
  order: 1; align-self: flex-start; padding: 0; border-radius: 0; background: none;
  font-family: var(--sans); font-weight: 600; font-size: .72rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted);
}
.projet-carte__titre {
  order: 2; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.15;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--ink);
}

/* ---- Filtres : pastilles encadrées, actif en noir plein ---- */
.blog-themes { gap: .5rem; justify-content: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); border: 0; }
.blog-theme {
  border: 1px solid var(--line); border-radius: 0; padding: .55rem 1.1rem;
  font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.blog-theme:hover { border-color: var(--ink); color: var(--ink); }
.blog-theme.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Fiche projet ---- */
.projet { padding-top: 92px; padding-bottom: 0; }

/* En-tête : filet, catégorie et lieu en capitales espacées, puis le titre, le
   tout AVANT l'image — c'est l'ordre de leur gabarit d'origine. */
.projet__entete { max-width: var(--wrap); margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.projet__entete .projet-carte__cat { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.projet__entete .projet-carte__cat::before {
  content: ""; width: 34px; height: 1px; background: var(--muted-light); flex: none;
}

/* Fil d'Ariane : PAS en capitales, contrairement au reste des libellés (.breadcrumb) */
.blog-fil {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .05em; text-transform: none;
  color: var(--muted); margin: 0 0 1.5rem;
}
.blog-fil a { color: var(--muted); text-decoration: none; }
.blog-fil a:hover { color: var(--ink); }

.projet__hero { margin-bottom: clamp(2rem, 5vh, 3rem); }
.projet__hero img { border-radius: 0; }
/* Deux colonnes égales, comme leur .split : la colonne latérale du module fait
   17rem par défaut, bien trop étroite pour un tableau à deux colonnes. */
@media (min-width: 1080px) {
  .projet__grille { grid-template-columns: 1fr 1fr; }
}
.projet__grille { gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.projet__cote { position: static; }
.projet__texte { max-width: 38rem; }                    /* .split-text */
/* Pas de `display` ici : cette règle a la même spécificité que celle du surtitre
   ci-dessus et venait après, elle repassait donc le lien en inline — un
   pseudo-élément inline ignore sa largeur, et le trait disparaissait. */
.projet .projet-carte__cat { margin-bottom: .2rem; color: var(--muted); }
.projet h1 { margin: .4rem 0 1.4rem; }
.projet__chapo { font-family: var(--sans); color: var(--text); }

/* Intertitres du descriptif : serif, comme .projet-h2 — pas un libellé en capitales */
.projet__descriptif { color: var(--text); }
.projet__descriptif h2 {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--ink);
  letter-spacing: normal; text-transform: none; margin: 2rem 0 1rem;
}
.projet__descriptif h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
/* Puces : le tiret court de .projet-programme, pas un caractère typographique */
.projet__descriptif ul { list-style: none; padding-left: 0; margin: 0; }
.projet__descriptif li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem; color: var(--text); }
.projet__descriptif li + li { margin-top: 0; }
.projet__descriptif li::before {
  content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 1px; background: var(--ink);
}

/* Tableau : deux colonnes 1fr/1.5fr, filet haut sur la liste, filet bas par ligne */
.projet-fiche { margin: 0; border-top: 1px solid var(--line); }
.projet-fiche__ligne {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem;
  padding: 1rem 0; border-top: 0; border-bottom: 1px solid var(--line);
}
.projet-fiche dt {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0; flex: none;
}
.projet-fiche dd { margin: 0; font-family: var(--sans); color: var(--ink); font-size: .95rem; }

.blog-partage { background: none; padding: 1.4rem 0 0; border-radius: 0; }
.blog-partage__titre { font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; color: var(--muted); }
.blog-partage__liens > * { border-radius: 0; border-color: var(--line); color: var(--muted); background: none; }
.blog-partage__liens > *:hover { border-color: var(--ink); color: var(--ink); transform: none; }

/* ---- Galerie : bande crème pleine largeur, grille de trois ---- */
.projet-galerie-zone { background: var(--cream); padding: clamp(3rem, 7vw, 5rem) 0; margin-top: clamp(3rem, 7vw, 5rem); }
.projet-galerie-zone .container { max-width: var(--wrap); }

.projet-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 0; }
.projet-galerie__item { flex: none; min-width: 0; }
.projet-galerie__voir { border-radius: 0; }
.projet-galerie__item img { border-radius: 0; aspect-ratio: 3 / 2; filter: grayscale(1); transition: filter .5s ease; }
.projet-galerie__voir:hover img { filter: grayscale(0); transform: none; }
.projet-galerie__item figcaption { font-family: var(--sans); font-size: .74rem; color: var(--muted); }

/* ---- Agrandissement ---- */
.lightbox { background: rgba(8,8,8,.95); padding: clamp(1rem, 4vw, 2.5rem); }
.lightbox__cadre { max-width: min(1200px, 92vw); gap: 1.1rem; }
.lightbox__cadre img { border-radius: 0; }
.lightbox__cadre figcaption { font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; color: rgba(255,255,255,.65); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 0; background: rgba(255,255,255,.07);
}
.lightbox__nav--prec { left: clamp(.6rem, 3vw, 2rem); }
.lightbox__nav--suiv { right: clamp(.6rem, 3vw, 2rem); }
.lightbox__fermer { top: 1.1rem; right: 1.4rem; width: 48px; height: 48px; border-radius: 0; background: none; font-size: 2rem; }
.lightbox__compteur { font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; color: rgba(255,255,255,.65); }

/* ---- Retour ---- */
.blog-article__retour {
  display: block; width: fit-content; margin: clamp(2.5rem, 6vh, 4rem) auto clamp(3rem, 7vw, 5rem);
  padding-bottom: .35rem; border-bottom: 1px solid var(--ink); text-align: center;
  font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
}

@media (max-width: 900px) {
  .projet-galerie { grid-template-columns: repeat(2, 1fr); }
  .projet-fiche__ligne { grid-template-columns: 1fr; gap: .2rem; }
}
@media (max-width: 560px) { .projet-galerie { grid-template-columns: 1fr; } }