/* ==========================================================
   KAFK — RÉALISATIONS
   EDITORIAL / CASE STUDIES
   ========================================================== */

body.kafk-realisations{
  --rea-paper:#f3eee4;
  --rea-paper-light:#f8f5ef;
  --rea-ink:#10110f;
  --rea-soft:#5e5c55;
  --rea-line:rgba(16,17,15,.20);
  --rea-orange:#ef6544;

  margin:0;
  background:var(--rea-paper);
  color:var(--rea-ink);
}


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

.rea-editorial{
  width:100%;
  overflow:hidden;
  background:var(--rea-paper);
}

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


/* ----------------------------------------------------------
   COVER
   ---------------------------------------------------------- */

.rea-cover{
  min-height:660px;
  padding:150px clamp(42px,5vw,86px) 90px;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(310px,.65fr);
  gap:8vw;
  align-items:center;
}

.rea-kicker{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:34px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
}

.rea-kicker span{
  display:block;
  width:42px;
  height:1px;
  background:currentColor;
}

.rea-cover h1{
  margin:0;
  max-width:820px;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(76px,7.4vw,132px);
  line-height:.77;
  letter-spacing:-.065em;
  font-weight:400;
}

.rea-cover h1 em{
  font-weight:400;
}

.rea-universes{
  margin-top:44px;
  display:flex;
  gap:20px;
  align-items:center;

  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.24em;
}

.rea-universes i{
  opacity:.35;
  font-style:normal;
}

.rea-cover-right{
  align-self:center;
  padding-top:70px;
}

.rea-cover-services{
  margin:0 0 46px;
  max-width:330px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:23px;
  line-height:1.25;
  color:var(--rea-soft);
}

.rea-index{
  border-top:1px solid var(--rea-line);
}

.rea-index a{
  min-height:48px;
  display:grid;
  grid-template-columns:48px 1fr;
  align-items:center;

  border-bottom:1px solid var(--rea-line);
  color:inherit;
  text-decoration:none;

  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
}

.rea-index small{
  font-size:10px;
  font-weight:400;
}


/* ----------------------------------------------------------
   COMMON CASE
   ---------------------------------------------------------- */

.rea-case{
  position:relative;
}

.rea-case-label{
  display:flex;
  align-items:center;
  gap:28px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
}

.rea-case-label strong{
  font-size:12px;
  font-weight:400;
  opacity:.55;
}


/* ----------------------------------------------------------
   TERRITORY — THE BOARD IS THE PAGE
   ---------------------------------------------------------- */

.rea-territory{
  padding-top:30px;
}

.rea-territory > .rea-case-label{
  padding:0 clamp(42px,5vw,86px) 28px;
}

.rea-board{
  width:calc(100% - clamp(36px,4vw,68px));
  margin:0 auto;

  background:#f6f2e9;
  box-shadow:
    0 30px 70px rgba(30,25,15,.10),
    0 4px 16px rgba(30,25,15,.05);
}

.rea-board img{
  display:block;
  width:100%;
  height:auto;
}

.rea-case-result{
  padding:88px clamp(42px,6vw,110px) 140px;

  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.65fr);
  gap:10vw;
}

.rea-result-title{
  border-top:1px solid var(--rea-ink);
  padding-top:25px;
}

.rea-result-title > span{
  display:block;
  margin-bottom:30px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
}

.rea-result-title h2{
  margin:0;
  max-width:850px;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(52px,5.4vw,94px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:400;
}

.rea-result-title h2 em{
  font-weight:400;
}

.rea-result-copy{
  align-self:center;
}

.rea-result-copy p{
  margin:0 0 30px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  line-height:1.55;
  color:var(--rea-soft);
}

.rea-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.rea-tags span{
  padding:9px 14px;
  border:1px solid var(--rea-line);
  border-radius:999px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
}


/* ----------------------------------------------------------
   CONSTRUCTION
   ---------------------------------------------------------- */

.rea-construction{
  background:#e8ebe8;
  padding:130px clamp(42px,4vw,72px) 120px;
}

.rea-case-head{
  width:min(1400px,100%);
  margin:0 auto 72px;

  display:grid;
  grid-template-columns:150px minmax(0,1.3fr) minmax(300px,.55fr);
  gap:45px;
  align-items:end;
}

.rea-case-head .rea-case-label{
  align-self:start;
  display:block;
}

.rea-case-head .rea-case-label strong,
.rea-case-head .rea-case-label span{
  display:block;
}

.rea-case-head .rea-case-label span{
  margin-top:18px;
  line-height:1.45;
}

.rea-case-head h2{
  margin:0;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(58px,6vw,105px);
  line-height:.9;
  letter-spacing:-.05em;
  font-weight:400;
}

.rea-case-head h2 em{
  font-weight:400;
}

.rea-case-head > p{
  margin:0 0 5px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1.55;
  color:var(--rea-soft);
}

.rea-visual{
  margin:0 auto;
}

.rea-visual-large{
  width:min(1420px,100%);
}

.rea-visual img{
  display:block;
  width:100%;
  height:auto;

  box-shadow:0 28px 65px rgba(20,30,25,.14);
}

.rea-visual figcaption{
  min-height:54px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:var(--rea-paper-light);

  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
}


/* ----------------------------------------------------------
   DIGITAL
   ---------------------------------------------------------- */

.rea-digital{
  background:#f3f1eb;
  color:#171916;
  padding:130px clamp(42px,5vw,86px) 145px;
}

.rea-dark-head{
  display:grid;
  grid-template-columns:130px minmax(0,1.35fr) minmax(280px,.65fr);
  column-gap:clamp(38px,4vw,72px);
  align-items:center;
  margin-bottom:70px;
}

.rea-case-label-light{
  grid-column:1;
  grid-row:1;
  align-self:start;
  display:block;
  color:#171916;
}

.rea-case-label-light strong,
.rea-case-label-light span{
  display:block;
}

.rea-case-label-light span{
  margin-top:18px;
  line-height:1.45;
}

.rea-dark-head h2{
  grid-column:2;
  margin:0;
  max-width:900px;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(58px,5.6vw,94px);
  line-height:.91;
  letter-spacing:-.05em;
  font-weight:400;
}

.rea-dark-head h2 em{
  font-weight:400;
}

.rea-dark-head > p{
  grid-column:3;
  margin:0;
  max-width:390px;
  align-self:center;

  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1.6;
  color:rgba(23,25,22,.66);
}

.rea-digital-gallery{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  gap:clamp(24px,3vw,48px);
  align-items:start;
}

.rea-digital-gallery figure{
  margin:0;
  overflow:hidden;
}

.rea-digital-gallery figure:nth-child(2){
  margin-top:80px;
}

.rea-digital-gallery img{
  display:block;
  width:100%;
  height:auto;
}

.rea-digital-result{
  margin-top:90px;
  margin-left:0;
  max-width:1100px;

  border-top:1px solid rgba(23,25,22,.28);
  padding-top:26px;
}

.rea-digital-result span{
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.23em;
  color:rgba(23,25,22,.62);
}

.rea-digital-copy{
  margin-top:32px;
  max-width:980px;
}

.rea-digital-copy p{
  margin:0 0 22px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(19px,1.45vw,24px);
  line-height:1.5;
  letter-spacing:-.015em;
  color:rgba(23,25,22,.72);
}

.rea-digital-copy p:last-child{
  margin-bottom:0;
}

.rea-digital-copy .rea-digital-copy-focus{
  margin-top:34px;
  max-width:900px;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2vw,32px);
  line-height:1.25;
  letter-spacing:-.025em;
  color:#171916;
}


/* ----------------------------------------------------------
   CLIENT
   ---------------------------------------------------------- */

.rea-client{
  padding:140px clamp(42px,6vw,110px);
  display:grid;
  grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr);
  gap:8vw;
  align-items:center;
}

.rea-client-copy h2{
  margin:48px 0 36px;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(62px,6.5vw,110px);
  line-height:.87;
  letter-spacing:-.055em;
  font-weight:400;
}

.rea-client-copy h2 em{
  font-weight:400;
}

.rea-client-copy > p{
  max-width:560px;
  margin:0;

  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  line-height:1.55;
  color:var(--rea-soft);
}

.rea-client-steps{
  margin-top:55px;
  border-top:1px solid var(--rea-line);
}

.rea-client-steps span{
  display:block;
  padding:15px 0;
  border-bottom:1px solid var(--rea-line);

  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.rea-client-visual{
  margin:0;
}

.rea-client-visual img{
  display:block;
  width:100%;
  height:auto;
  box-shadow:0 28px 65px rgba(30,25,15,.12);
}


/* ----------------------------------------------------------
   END
   ---------------------------------------------------------- */

.rea-end{
  padding:110px clamp(42px,6vw,110px);
  background:var(--rea-paper-light);

  display:grid;
  grid-template-columns:1fr auto;
  gap:60px;
  align-items:end;
}

.rea-end-label{
  display:block;
  margin-bottom:24px;

  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
}

.rea-end h2{
  margin:0;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(58px,6vw,104px);
  line-height:.88;
  letter-spacing:-.05em;
  font-weight:400;
}

.rea-end h2 em{
  font-weight:400;
}

.rea-end > a{
  min-width:260px;
  padding:18px 22px;

  display:flex;
  justify-content:space-between;
  gap:40px;

  border-top:1px solid var(--rea-ink);
  border-bottom:1px solid var(--rea-ink);

  color:inherit;
  text-decoration:none;

  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  font-weight:700;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:980px){

  .rea-cover{
    min-height:auto;
    padding:100px 24px 75px;
    grid-template-columns:1fr;
    gap:65px;
  }

  .rea-cover h1{
    font-size:clamp(58px,16vw,90px);
    line-height:.82;
  }

  .rea-cover-right{
    padding-top:0;
  }

  .rea-cover-services{
    font-size:20px;
  }

  .rea-territory > .rea-case-label{
    padding:0 24px 22px;
  }

  .rea-board{
    width:100%;
    overflow-x:auto;
  }

  .rea-board img{
    width:1100px;
    max-width:none;
  }

  .rea-case-result{
    padding:70px 24px 100px;
    grid-template-columns:1fr;
    gap:55px;
  }

  .rea-result-title h2{
    font-size:clamp(48px,13vw,72px);
  }

  .rea-case-head,
  .rea-dark-head{
    grid-template-columns:1fr;
    gap:35px;
  }

  .rea-construction,
  .rea-digital{
    padding:95px 24px;
  }

  .rea-case-head h2,
  .rea-dark-head h2{
    font-size:clamp(50px,13vw,76px);
  }

  .rea-digital-gallery{
    grid-template-columns:1fr;
  }

  .rea-digital-gallery figure:nth-child(2){
    margin-top:0;
  }

  .rea-client{
    padding:95px 24px;
    grid-template-columns:1fr;
    gap:65px;
  }

  .rea-client-copy h2{
    font-size:clamp(54px,14vw,82px);
  }

  .rea-end{
    padding:90px 24px;
    grid-template-columns:1fr;
  }

  .rea-end h2{
    font-size:clamp(52px,14vw,82px);
  }

}


@media (max-width:600px){

  .rea-kicker{
    font-size:10px;
  }

  .rea-universes{
    gap:12px;
    font-size:10px;
  }

  .rea-cover h1{
    letter-spacing:-.055em;
  }

  .rea-board img{
    width:920px;
  }

  .rea-case-label{
    align-items:flex-start;
    gap:18px;
    font-size:9px;
  }

  .rea-result-copy p,
  .rea-case-head > p,
  .rea-dark-head > p,
  .rea-client-copy > p{
    font-size:17px;
  }

  .rea-visual-large{
    width:calc(100% + 48px);
    margin-left:-24px;
  }

  .rea-visual figcaption{
    padding:12px 18px;
    gap:15px;
    flex-direction:column;
    align-items:flex-start;
  }

}


/* petite légende juste avant l'image */

body.kafk-realisations .rea-territory > .rea-case-label{
  width:100%;
  padding:
    28px
    clamp(42px,5vw,86px)
    26px;

  background:var(--rea-paper);
}


/* ---------------------------------------------------------
   LA PLANCHE DEVIENT LE HERO
   --------------------------------------------------------- */

body.kafk-realisations .rea-board{
  width:100%;
  max-width:none;
  margin:0;

  background:#f5f0e6;

  box-shadow:none;
  overflow:hidden;
}


body.kafk-realisations .rea-board img{
  display:block;

  width:100%;
  height:auto;

  margin:0;
  padding:0;

  object-fit:contain;
}


/* ---------------------------------------------------------
   TEXTE APRES LE HERO
   --------------------------------------------------------- */

body.kafk-realisations .rea-case-result{
  width:100%;

  padding:
    clamp(80px,8vw,140px)
    clamp(42px,6vw,110px)
    clamp(110px,10vw,180px);

  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(320px,.55fr);

  gap:10vw;

  background:var(--rea-paper);
}


body.kafk-realisations .rea-result-title h2{
  max-width:900px;

  font-size:clamp(62px,6.4vw,112px);
  line-height:.88;
  letter-spacing:-.055em;
}


body.kafk-realisations .rea-result-copy p{
  font-size:20px;
  line-height:1.55;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:980px){

  body.kafk-realisations .rea-territory > .rea-case-label{
    padding:24px;
  }

  body.kafk-realisations .rea-board{
    width:100%;
    overflow:hidden;
  }

  body.kafk-realisations .rea-board img{
    width:100%;
    max-width:none;
    height:auto;
  }

  body.kafk-realisations .rea-case-result{
    padding:70px 24px 100px;

    grid-template-columns:1fr;
    gap:50px;
  }

  body.kafk-realisations .rea-result-title h2{
    font-size:clamp(52px,13vw,78px);
  }

}



/* =========================================================
   KAFK REALISATIONS — HERO FINAL
   ========================================================= */


/* ---------------------------------------------------------
   01 — INTRO
   On conserve l'identité éditoriale mais on arrête
   l'immense écran vide avant le projet.
   --------------------------------------------------------- */

body.kafk-realisations .rea-intro{
    min-height:auto !important;
    height:auto !important;

    padding-top:clamp(90px,9vw,150px) !important;
    padding-bottom:clamp(80px,8vw,130px) !important;
}


/* Le bloc grille ne doit plus imposer 100vh */

body.kafk-realisations .rea-intro-grid{
    min-height:0 !important;
    height:auto !important;
}


/* ---------------------------------------------------------
   02 — PROJET 01
   --------------------------------------------------------- */

body.kafk-realisations .rea-territory{
    padding:0 !important;
    margin:0 !important;
}


/* petite ligne éditoriale */

body.kafk-realisations .rea-territory > .rea-case-label{
    width:100% !important;

    margin:0 !important;
    padding:
        28px
        clamp(40px,5.5vw,90px)
        26px !important;

    background:var(--rea-paper) !important;
}


/* ---------------------------------------------------------
   03 — LE VISUEL EST LE HERO
   --------------------------------------------------------- */

body.kafk-realisations .rea-board{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:var(--rea-paper) !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
}


body.kafk-realisations .rea-board img{
    display:block !important;

    width:100% !important;
    max-width:none !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    border:0 !important;
    border-radius:0 !important;
}


/* ---------------------------------------------------------
   04 — TEXTE APRÈS LE VISUEL
   --------------------------------------------------------- */

body.kafk-realisations .rea-case-result{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding:
        clamp(90px,9vw,160px)
        clamp(45px,6vw,105px)
        clamp(110px,11vw,190px) !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(320px,.62fr) !important;

    gap:clamp(70px,10vw,180px) !important;

    background:var(--rea-paper) !important;
}


/* gros titre éditorial */

body.kafk-realisations .rea-result-title h2{
    max-width:900px !important;

    margin:0 !important;

    font-size:clamp(64px,6.3vw,112px) !important;
    line-height:.90 !important;
    letter-spacing:-.055em !important;
}


/* texte secondaire vraiment lisible */

body.kafk-realisations .rea-result-copy p{
    max-width:520px !important;

    font-size:clamp(18px,1.35vw,23px) !important;
    line-height:1.55 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width:980px){

    body.kafk-realisations .rea-intro{
        padding-top:70px !important;
        padding-bottom:70px !important;
    }

    body.kafk-realisations .rea-territory > .rea-case-label{
        padding:22px 24px !important;
    }

    body.kafk-realisations .rea-board,
    body.kafk-realisations .rea-board img{
        width:100% !important;
        max-width:none !important;
    }

    body.kafk-realisations .rea-case-result{
        grid-template-columns:1fr !important;

        gap:50px !important;

        padding:
            70px
            24px
            100px !important;
    }

    body.kafk-realisations .rea-result-title h2{
        font-size:clamp(50px,13vw,78px) !important;
    }

    body.kafk-realisations .rea-result-copy p{
        font-size:18px !important;
    }
}

/* KAFK REALISATIONS — POSITION SOUS HEADER START */

/*
   Le header reste dans le flux normal.
   On crée ensuite une vraie respiration avant le projet 01.
*/

body.kafk-realisations main.rea-editorial{
  box-sizing:border-box !important;
  margin:0 !important;
  padding-top:72px !important;
}

/* Label du projet */
body.kafk-realisations main.rea-editorial > .rea-case-label:first-child{
  margin-top:0 !important;
  margin-bottom:28px !important;
  padding-left:clamp(24px, 3.5vw, 64px) !important;
  padding-right:clamp(24px, 3.5vw, 64px) !important;
}

/* Première image */
body.kafk-realisations main.rea-editorial > .rea-board{
  margin-top:0 !important;
}

/* Mobile */
@media (max-width:980px){

  body.kafk-realisations main.rea-editorial{
    padding-top:48px !important;
  }

  body.kafk-realisations main.rea-editorial > .rea-case-label:first-child{
    margin-bottom:22px !important;
  }

}

/* KAFK REALISATIONS — POSITION SOUS HEADER END */


/* ----------------------------------------------------------
   FINAL CTA — présence renforcée
   ---------------------------------------------------------- */

.rea-end > a{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:28px;

  width:auto;

  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(22px,1.65vw,30px);
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.025em;

  color:#171916;
  text-decoration:none;
}

.rea-end > a span{
  display:inline-block;
  font-size:1.15em;
  line-height:1;
  transition:transform .25s ease;
}

.rea-end > a:hover span{
  transform:translateX(8px);
}