/* =========================================================
   ÉRIS AVOCAT — feuille de style
   Maquette de démonstration réalisée par 11Webstudio
   ========================================================= */

:root{
  --bg:        #F6F4EF;
  --bg-alt:    #EFECE4;
  --bg-card:   #FFFFFF;
  --ink:       #16191C;
  --ink-2:     #3E4348;
  --ink-3:     #4B5157;
  --muted:     #6B7076;
  --green:     #2C4A3E;
  --green-2:   #38614F;
  --cream:     #F1EFE8;
  --line:      #E2DED4;
  --line-2:    #C9C4B6;
  --slot:      #EAE6DC;

  --pad: clamp(20px, 4.4vw, 56px);
  --max: 1440px;

  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--green); }
h1,h2,h3,p,blockquote,figure{ margin:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 18px; background:var(--ink); color:var(--cream); font-size:14px;
}
.skip:focus{ left:12px; top:12px; color:var(--cream); }

.shell{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:80;
  background:rgba(246,244,239,.88);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:16px; padding-bottom:16px;
}
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand:hover{ color:inherit; }
.brand img{ height:40px; width:auto; mix-blend-mode:multiply; }
.brand__txt{ display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:1px solid #D9D4C7; }
.brand__name{ font-size:14px; font-weight:600; letter-spacing:.18em; white-space:nowrap; }
.brand__sub{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); font-size:14px; color:var(--ink-3); }
.nav__link{ position:relative; padding:6px 0; }
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--green); transition:right .28s var(--ease);
}
.nav__link:hover::after{ right:0; }
.nav__link.is-active{ color:var(--green); font-weight:500; }
.nav__link.is-active::after{ right:0; }

.burger{
  display:none; width:44px; height:40px; padding:0; border:1px solid var(--line-2);
  background:transparent; cursor:pointer; align-items:center; justify-content:center;
}
.burger span{ position:relative; display:block; width:18px; height:1px; background:var(--ink); transition:.25s var(--ease); }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:var(--ink); transition:.25s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; font-size:15px; font-weight:500; line-height:1;
  border:1px solid transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:var(--cream); }
.btn--dark:hover{ background:var(--green); color:var(--cream); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--light:hover{ background:#fff; color:var(--ink); }
.btn--sm{ padding:11px 20px; font-size:14px; }
.nav .btn--dark{ color:var(--cream); }

.link-arrow{ font-size:14.5px; font-weight:500; color:var(--green); white-space:nowrap; }
.link-arrow span{ display:inline-block; transition:transform .25s var(--ease); }
.link-arrow:hover span{ transform:translateX(5px); }

.ilink{ border-bottom:1px solid var(--green); }

/* ---------- Blocs génériques ---------- */
.section{ padding-top:clamp(64px,7vw,96px); padding-bottom:clamp(64px,7vw,96px); }
.section--tight{ padding-top:clamp(48px,5vw,72px); padding-bottom:clamp(48px,5vw,72px); }
.section--alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--green{ background:var(--green); color:var(--cream); }
.section--green a:hover{ color:#fff; }

.eyebrow{ display:block; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.h1{ font-size:clamp(38px,5.4vw,80px); font-weight:600; line-height:1.02; letter-spacing:-.035em; margin-top:20px; }
.h2{ font-size:clamp(28px,3.4vw,50px); font-weight:600; line-height:1.04; letter-spacing:-.03em; }
.h3{ font-size:21px; font-weight:600; line-height:1.24; letter-spacing:-.02em; }
.it{ font-family:inherit; font-style:normal; font-weight:inherit; color:var(--green); }
.section--green .it{ color:inherit; }
.lead{ font-size:clamp(17px,1.5vw,19px); line-height:1.62; color:var(--ink-3); text-wrap:pretty; }
.prose p{ font-size:18px; line-height:1.68; color:var(--ink-2); text-wrap:pretty; }
.prose{ display:flex; flex-direction:column; gap:18px; max-width:68ch; }

.head-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px; }

/* ---------- Hero accueil ---------- */
.hero{ padding-top:clamp(56px,6vw,80px); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,4vw,56px); align-items:start; }
.hero__title{ max-width:24ch; }
.hero__lead{ margin-top:24px; max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__media{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hero__media .ph--wide{ grid-column:span 2; height:240px; }
.hero__media .ph--sq{ height:170px; }

.award{ display:flex; flex-direction:column; justify-content:center; gap:6px; padding:20px; background:var(--green); color:var(--cream); }
.award__y{ font-family:var(--serif); font-style:italic; font-size:38px; line-height:1; }
.award__t{ font-size:13px; line-height:1.5; color:rgba(241,239,232,.82); }

/* rotator */
.rot{ position:relative; display:inline-block; min-width:11ch; vertical-align:top; font-family:inherit; font-style:normal; font-weight:inherit; color:var(--green); }
.rot__ghost{ visibility:hidden; }
.rot i{ position:absolute; left:0; top:0; white-space:nowrap; font-style:normal; opacity:0; animation:eRot 9s linear infinite forwards; }
.rot i:nth-child(2){ animation-delay:0s; }
.rot i:nth-child(3){ animation-delay:3s; }
.rot i:nth-child(4){ animation-delay:6s; }
@keyframes eRot{ 0%,26%{opacity:1;transform:none} 33%,100%{opacity:0;transform:translateY(-14px)} }
@media (prefers-reduced-motion: reduce){
  .rot i{ animation:none; opacity:0; }
  .rot i:nth-child(2){ opacity:1; }
}

/* ---------- Chiffres ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:32px; padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat__n{ display:block; font-size:clamp(30px,3.4vw,40px); font-weight:600; letter-spacing:-.03em; line-height:1; }
.stat__l{ display:block; margin-top:8px; font-size:14px; color:var(--muted); }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:minmax(0,.45fr) minmax(0,1fr); gap:clamp(32px,4.5vw,64px); }
.split--narrow{ grid-template-columns:minmax(0,.4fr) minmax(0,1fr); }
.split--wide{ grid-template-columns:minmax(0,1fr) minmax(0,.7fr); align-items:end; }

/* ---------- Cartes expertises ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.card{
  display:flex; flex-direction:column; gap:12px; padding:30px 28px 34px;
  background:var(--bg); border:1px solid var(--line);
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{ border-color:var(--green); transform:translateY(-4px); box-shadow:0 14px 36px rgba(22,25,28,.07); color:inherit; }
.card__n{ font-size:13px; font-weight:500; color:var(--green); }
.card p{ font-size:16px; line-height:1.62; color:#5B6167; }

/* ---------- Actualités ---------- */
.news{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(22px,2.4vw,32px); }
.news-card{ display:flex; flex-direction:column; gap:13px; }
.news-card .ph{ height:200px; }
.news-card:hover{ color:var(--green); }
.news-card:hover .ph::before{ transform:scale(1.04); }
.news-card__cat{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.news-card__t{ font-size:20px; font-weight:600; line-height:1.28; letter-spacing:-.02em; }
.news-card__x{ font-size:15.5px; line-height:1.6; color:var(--muted); }

.featured{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,48px); align-items:center; padding:48px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.featured .ph{ height:380px; }
.featured__body{ display:flex; flex-direction:column; gap:15px; }
.featured__t{ font-size:clamp(26px,3.2vw,46px); font-weight:600; line-height:1.06; letter-spacing:-.03em; }
.featured:hover{ color:var(--green); }

/* ---------- Expertises (liste) ---------- */
.svc{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:clamp(28px,3.6vw,48px); padding:clamp(38px,4.4vw,56px) 0; border-top:1px solid var(--line); }
.svc:last-child{ border-bottom:1px solid var(--line); }
.svc__t{ margin-top:10px; font-size:clamp(24px,2.8vw,40px); font-weight:600; line-height:1.06; letter-spacing:-.03em; }
.svc__body{ display:flex; flex-direction:column; gap:20px; max-width:70ch; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; font-size:14px; color:var(--ink-3); }
.tag{ padding:9px 16px; background:var(--bg-alt); }
.section--alt .tag{ background:var(--bg); }

/* ---------- Équipe / citation ---------- */
.team{ display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:start; }
.team .ph{ height:520px; background:#E4E0D5; }
.team__role{ display:block; margin-top:18px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); }
.team__name{ display:block; margin-top:6px; font-size:30px; font-weight:600; letter-spacing:-.03em; }
.credentials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:24px; margin-top:18px; }
.credential{ display:flex; flex-direction:column; gap:5px; padding-top:16px; border-top:1px solid #D9D4C7; }
.credential b{ font-size:14.5px; font-weight:600; }
.credential span{ font-size:14.5px; color:var(--muted); }

.quote{ margin:0 auto; max-width:24ch; font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(30px,4.6vw,76px); line-height:1.1; }
.quote-who{ display:block; margin-top:28px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(241,239,232,.65); }

/* ---------- Questions ---------- */
.qlist{ display:flex; flex-direction:column; max-width:70ch; }
.qlist p{ padding:20px 0; border-top:1px solid var(--line); font-size:17.5px; line-height:1.62; color:var(--ink-2); }
.qlist p:last-of-type{ border-bottom:1px solid var(--line); }

/* ---------- CTA vert ---------- */
.cta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(32px,4.5vw,64px); align-items:center; }
.cta__t{ max-width:22ch; font-size:clamp(30px,4vw,62px); font-weight:600; line-height:1.02; letter-spacing:-.035em; }
.cta__x{ margin-top:18px; max-width:46ch; font-size:18px; line-height:1.6; color:rgba(241,239,232,.78); }
.cta__list{ display:flex; flex-direction:column; gap:18px; font-size:16.5px; line-height:1.6; }
.cta__item{ display:flex; flex-direction:column; gap:4px; padding-top:16px; border-top:1px solid rgba(241,239,232,.26); }
.cta__k{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(241,239,232,.62); }
.cta__socials{ display:flex; flex-wrap:wrap; gap:16px; }

.band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }

/* ---------- Contact ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,4vw,56px); align-items:start; }
.info{ display:flex; flex-direction:column; gap:28px; }
.info__block{ display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid var(--line); }
.info__k{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.info__v{ font-size:clamp(20px,2vw,24px); font-weight:500; line-height:1.42; letter-spacing:-.02em; }
.info .ph{ height:280px; }

.form{ display:flex; flex-direction:column; gap:20px; padding:clamp(26px,3vw,40px); background:var(--bg-card); border:1px solid var(--line); }
.form__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:500; color:var(--ink-3); }
.field input,.field select,.field textarea{
  padding:13px 15px; background:var(--bg); border:1px solid #DDD8CB; color:var(--ink);
  font-size:15px; font-weight:400; line-height:1.5; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--green); background:#fff; }
.field input::placeholder,.field textarea::placeholder{ color:#9BA0A5; }
.form__note{ font-size:13.5px; line-height:1.62; color:var(--muted); }
.form__msg{ display:none; padding:14px 16px; background:#EAF0EC; border-left:2px solid var(--green); font-size:14.5px; line-height:1.55; color:var(--green); }
.form__msg.is-on{ display:block; }

.access{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:36px; border-top:1px solid var(--line); padding-top:clamp(48px,5vw,72px); }
.access__b{ display:flex; flex-direction:column; gap:8px; }
.access__t{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
.access__x{ font-size:16px; line-height:1.65; color:var(--ink-3); }

/* ---------- Mentions ---------- */
.legal{ display:flex; flex-direction:column; max-width:72ch; }
.legal__b{ display:flex; flex-direction:column; gap:10px; padding:26px 0; border-top:1px solid var(--line); }
.legal__b:last-child{ border-bottom:1px solid var(--line); }
.legal__b h2{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.legal__b p{ font-size:17px; line-height:1.68; color:var(--ink-2); }

/* ---------- Placeholders visuels ---------- */
.ph{
  position:relative; overflow:hidden; background:var(--slot);
  display:flex; align-items:flex-end;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(135deg, rgba(44,74,62,.10) 0%, rgba(44,74,62,0) 55%),
    repeating-linear-gradient(135deg, rgba(22,25,28,.045) 0 1px, transparent 1px 11px);
  transition:transform .5s var(--ease);
}
.ph::after{
  content:attr(data-label);
  position:relative; z-index:1; margin:14px; padding:7px 11px;
  background:rgba(246,244,239,.86); color:var(--muted);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.35;
}

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); }
.footer__in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding-top:30px; padding-bottom:38px; font-size:14px; color:var(--muted);
}
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand img{ height:32px; width:auto; mix-blend-mode:multiply; opacity:.75; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:24px; }
.footer__sign{ width:100%; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; letter-spacing:.04em; color:#8C9096; }
.footer__sign b{ font-weight:600; color:var(--ink-3); letter-spacing:.1em; }

/* ---------- Watermark 11Webstudio ---------- */
.wm-tile{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='230'%3E%3Ctext x='12' y='150' transform='rotate(-24 12 150)' font-family='Helvetica,Arial,sans-serif' font-size='19' font-weight='700' letter-spacing='5' fill='%2316191C' fill-opacity='0.1'%3E11WEBSTUDIO%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
}
/* filigrane clair sur les sections foncées */
.section--green{ position:relative; isolation:isolate; }
.section--green::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='230'%3E%3Ctext x='12' y='150' transform='rotate(-24 12 150)' font-family='Helvetica,Arial,sans-serif' font-size='19' font-weight='700' letter-spacing='5' fill='%23FFFFFF' fill-opacity='0.09'%3E11WEBSTUDIO%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
}
.wm-badge{
  position:fixed; right:16px; bottom:16px; z-index:90;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 12px; border-radius:999px;
  background:var(--ink); color:var(--cream);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1;
  box-shadow:0 8px 26px rgba(22,25,28,.22);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.wm-badge:hover{ background:var(--green); color:var(--cream); transform:translateY(-2px); }
.wm-badge__dot{ width:7px; height:7px; border-radius:50%; background:#8FBFA6; animation:wmPulse 2.4s ease-in-out infinite; }
.wm-badge b{ font-weight:600; letter-spacing:.12em; }
@keyframes wmPulse{ 0%,100%{opacity:.45; transform:scale(.85)} 50%{opacity:1; transform:scale(1)} }
@media (prefers-reduced-motion: reduce){ .wm-badge__dot{ animation:none; } }

/* ---------- Reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; }
  .hero__media{ max-width:640px; }
  .team{ grid-template-columns:1fr; }
  .team .ph{ height:420px; max-width:520px; }
  .featured{ grid-template-columns:1fr; }
  .featured .ph{ height:280px; }
  .contact{ grid-template-columns:1fr; }
  .cta{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .split,.split--narrow,.split--wide{ grid-template-columns:1fr; gap:28px; }
  .split--wide{ align-items:start; }
  .svc{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:860px){
  .burger{ display:inline-flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:10px var(--pad) 24px;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(22,25,28,.08);
  }
  .nav.is-open{ display:flex; }
  .nav__link{ padding:15px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav__link::after{ display:none; }
  .nav .btn{ margin-top:18px; align-self:flex-start; }
  .brand__sub{ display:none; }
}
@media (max-width:620px){
  .brand img{ height:34px; }
  .brand__txt{ padding-left:12px; }
  .hero__media{ grid-template-columns:1fr; }
  .hero__media .ph--wide{ grid-column:span 1; height:200px; }
  .btn{ width:100%; }
  .hero__cta .btn{ width:auto; flex:1 1 220px; }
  .wm-badge{ right:10px; bottom:10px; padding:8px 12px 8px 10px; font-size:10.5px; }
}

/* ---------- Impression ---------- */
@media print{
  .header,.wm-tile,.burger{ position:static; }
  .wm-badge{ position:static; display:inline-flex; margin-top:16px; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}