/* =====================================================
   PORTFOLIO — SEO
   seo.html + projet-seo-vpce.html
   MOBILE FIRST
===================================================== */


/* =====================================================
   HERO PAGE SEO
===================================================== */

.seo-page-hero{
  position:relative;

  min-height:78svh;

  padding:
    118px 0
    70px;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:#070707;
}


.seo-page-hero__glow{
  position:absolute;

  width:560px;
  height:560px;

  right:-300px;
  top:-190px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(200,162,103,.12),
      transparent 68%
    );

  pointer-events:none;
}


.seo-page-hero__inner{
  position:relative;

  z-index:2;
}


.seo-page-hero__content{
  max-width:1080px;
}


.seo-page-hero__title{
  max-width:1080px;

  color:#f5f5f1;

  font-size:clamp(
    42px,
    11vw,
    65px
  );

  line-height:.99;

  letter-spacing:-.055em;
}


.seo-page-hero__title span{
  display:inline;

  color:#ecece7;
}


.seo-page-hero__intro{
  max-width:720px;

  margin-top:27px;

  color:#e3e3de;

  font-size:16px;
  line-height:1.82;
}


.seo-page-hero__meta{
  margin-top:55px;

  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.11);

  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:20px;
}


.seo-page-hero__meta div{
  display:flex;
  flex-direction:column;
}


.seo-page-hero__meta span{
  color:#bdbdb8;

  font-size:11px;
}


.seo-page-hero__meta strong{
  margin-top:3px;

  color:#b8b8b3;

  font-size:12px;
  font-weight:600;

  letter-spacing:.05em;
  text-transform:uppercase;
}


/* =====================================================
   MÉTHODOLOGIE
===================================================== */

.seo-method{
  padding:85px 0;

  background:#f4f2ed;
}


.seo-method__heading,
.seo-tools__heading{
  margin-bottom:45px;

  display:grid;

  gap:32px;
}


.seo-method__grid{
  display:grid;

  gap:11px;
}


.seo-method-card{
  min-height:235px;

  padding:23px;

  display:flex;
  flex-direction:column;

  background:#faf8f4;

  border:1px solid #ddd9d1;

  transition:
    transform .35s var(--ease),
    background .35s ease,
    border-color .35s ease;
}


.seo-method-card:hover{
  transform:translateY(-4px);

  background:#fff;

  border-color:#c9c3b9;
}


.seo-method-card > span{
  color:#a77f47;

  font-size:11px;
  font-weight:700;
}


.seo-method-card h3{
  margin-top:auto;

  color:#151515;

  font-size:22px;
}


.seo-method-card p{
  margin-top:13px;

  color:#69655f;

  font-size:14px;
  line-height:1.75;
}


/* =====================================================
   CASE LIST
===================================================== */

.seo-case-list{
  padding:85px 0;

  background:#080808;
}


.seo-case-list__head{
  margin-bottom:46px;

  display:grid;

  gap:32px;
}


.seo-case-list__title{
  max-width:980px;

  color:#f5f5f1;

  font-size:clamp(
    32px,
    8.5vw,
    48px
  );

  line-height:1.08;
}


.seo-case-list__title span{
  display:inline;

  color:#ecece7;
}


.seo-case-card{
  padding:21px;

  background:#0e0e0e;

  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
}


.seo-case-card__top{
  padding-bottom:20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  border-bottom:1px solid rgba(255,255,255,.09);
}


.seo-case-card__tag{
  color:var(--gold);

  font-size:11px;
  font-weight:700;

  letter-spacing:.07em;
  text-transform:uppercase;
}


.seo-case-card__number{
  color:#bcbcb7;

  font-size:12px;
}


.seo-case-card__body{
  padding:35px 0;

  display:grid;

  gap:38px;
}


.seo-case-card__content{
  max-width:700px;
}


.seo-case-card__content h3{
  color:#f5f5f1;

  font-size:clamp(
    29px,
    7.5vw,
    43px
  );

  line-height:1.09;
}


.seo-case-card__content > p:not(.eyebrow){
  margin-top:20px;

  color:#deded9;

  font-size:15px;
  line-height:1.8;
}


.seo-case-card__tags{
  margin-top:25px;

  display:flex;
  flex-wrap:wrap;

  gap:7px;
}


.seo-case-card__tags span{
  padding:7px 10px;

  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;

  color:#d6d6d1;

  font-size:11px;
}


.seo-case-card__results{
  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:9px;
}


.seo-case-card__results div{
  min-height:116px;

  padding:15px;

  display:flex;
  flex-direction:column;

  background:#121212;

  border:1px solid rgba(255,255,255,.08);
}


.seo-case-card__results small{
  color:#cecec9;

  font-size:10px;
}


.seo-case-card__results strong{
  margin:auto 0;

  color:#f0f0ec;

  font-family:var(--font-title);

  font-size:19px;
  font-weight:600;
}


.seo-case-card__results span{
  color:var(--gold);

  font-size:10px;
  font-weight:700;
}


.seo-case-card__footer{
  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.09);

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:17px;
}


/* =====================================================
   OUTILS SEO
===================================================== */

.seo-tools{
  padding:85px 0;

  background:#f4f2ed;
}


.seo-tools__grid{
  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:8px;
}


.seo-tool{
  min-height:88px;

  padding:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#faf8f4;

  border:1px solid #ddd9d1;

  color:#242424;

  font-size:12px;
  font-weight:700;

  text-align:center;

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}


.seo-tool:hover{
  transform:translateY(-3px);

  background:#fff;

  border-color:#c7c1b6;
}


/* =====================================================
   SEO CTA
===================================================== */

.seo-page-cta{
  position:relative;

  padding:100px 0;

  overflow:hidden;

  background:#070707;
}


.seo-page-cta__inner{
  max-width:980px;
}


.seo-page-cta h2{
  color:#f5f5f1;

  font-size:clamp(
    38px,
    10vw,
    60px
  );

  line-height:1.04;
}


.seo-page-cta h2 span{
  display:inline;

  color:#ecece7;
}


.seo-page-cta__actions{
  margin-top:31px;

  display:flex;
  flex-wrap:wrap;

  gap:9px;
}


/* =====================================================
   CASE STUDY — HERO
===================================================== */

.case-hero{
  position:relative;

  padding:
    112px 0
    72px;

  overflow:hidden;

  background:#070707;
}


.case-hero__glow{
  position:absolute;

  width:600px;
  height:600px;

  right:-310px;
  top:-220px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(200,162,103,.12),
      transparent 68%
    );

  pointer-events:none;
}


.case-back{
  position:relative;

  z-index:2;

  display:inline-flex;

  margin-bottom:42px;

  color:#d2d2cd;

  font-size:12px;
  font-weight:600;

  transition:color .25s ease;
}


.case-back:hover{
  color:var(--gold);
}


.case-hero__grid{
  position:relative;

  z-index:2;

  display:grid;

  gap:42px;
}


.case-hero__title{
  max-width:1080px;

  color:#f5f5f1;

  font-size:clamp(
    42px,
    11vw,
    65px
  );

  line-height:.99;

  letter-spacing:-.055em;
}


.case-hero__title span{
  display:inline;

  color:#ecece7;
}


.case-hero__intro{
  max-width:720px;

  margin-top:27px;

  color:#e3e3de;

  font-size:16px;
  line-height:1.82;
}


.case-hero__actions{
  margin-top:29px;

  display:flex;
  flex-wrap:wrap;

  gap:9px;
}


.case-hero__facts{
  border-top:1px solid rgba(255,255,255,.11);
}


.case-hero__facts div{
  padding:15px 0;

  border-bottom:1px solid rgba(255,255,255,.10);

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;
}


.case-hero__facts span{
  color:#c4c4bf;

  font-size:11px;
}


.case-hero__facts strong{
  color:#d2d2cd;

  font-size:12px;
  font-weight:600;

  text-align:right;
}


/* =====================================================
   KPI HERO
===================================================== */

.case-results{
  padding:
    20px 0
    65px;

  background:#070707;
}


.case-results__grid{
  display:grid;

  gap:9px;
}


.case-kpi{
  min-height:165px;

  padding:20px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  background:#0e0e0e;

  border:1px solid rgba(255,255,255,.09);
}


.case-kpi > span{
  color:#d2d2cd;

  font-size:11px;
}


.case-kpi > div{
  display:flex;
  align-items:baseline;

  gap:8px;

  font-family:var(--font-title);
}


.case-kpi small{
  color:#c4c4bf;

  font-size:16px;
}


.case-kpi b{
  color:var(--gold);

  font-size:16px;
}


.case-kpi strong{
  color:#f3f3ef;

  font-size:28px;
  font-weight:600;
}


.case-kpi p{
  color:var(--gold);

  font-size:11px;
  font-weight:700;

  text-align:left;
}


/* =====================================================
   CASE SECTIONS
===================================================== */

.case-section{
  padding:85px 0;

  background:#080808;
}


.case-section--light{
  background:#f4f2ed;
}


.case-two-cols,
.case-heading,
.case-final__head{
  display:grid;

  gap:32px;
}


.case-light-title,
.case-dark-title{
  max-width:980px;

  font-size:clamp(
    31px,
    8.2vw,
    47px
  );

  line-height:1.08;
}


.case-light-title{
  color:#121212;
}


.case-dark-title{
  color:#f5f5f1;
}


.case-light-title span{
  display:inline;

  color:#99958e;
}


.case-dark-title span{
  display:inline;

  color:#ecece7;
}


.case-light-text,
.case-dark-text{
  max-width:760px;

  margin-top:23px;

  font-size:15px;
  line-height:1.82;
}


.case-light-text{
  color:#625f59;
}


.case-dark-text{
  color:#deded9;
}


.case-dark-text strong{
  color:#eee;
}


.case-dark-text--small{
  font-size:13px;
}


/* =====================================================
   PROCESS
===================================================== */

.case-process{
  margin-top:44px;

  display:grid;

  gap:9px;
}


.case-process__item{
  min-height:220px;

  padding:22px;

  display:flex;
  flex-direction:column;

  background:#0e0e0e;

  border:1px solid rgba(255,255,255,.09);
}


.case-process__item > span{
  color:var(--gold);

  font-size:11px;
}


.case-process__item h3{
  margin-top:auto;

  color:#f0f0ec;

  font-size:22px;
}


.case-process__item p{
  margin-top:12px;

  color:#d4d4cf;

  font-size:13px;
  line-height:1.72;
}


/* =====================================================
   AUDIT
===================================================== */

.audit-grid{
  margin-top:44px;

  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:9px;
}


.audit-card{
  min-height:170px;

  padding:19px;

  display:flex;
  flex-direction:column;

  background:#faf8f4;

  border:1px solid #ddd9d1;
}


.audit-card > span{
  color:#706b64;

  font-size:11px;
}


.audit-card strong{
  margin:auto 0;

  color:#171717;

  font-family:var(--font-title);

  font-size:38px;
  font-weight:600;
}


.audit-card p{
  color:#625f59;

  font-size:12px;
  line-height:1.55;
}


.case-note{
  margin-top:20px;

  padding:23px;

  border-left:2px solid var(--gold);

  background:#e9e5dd;
}


.case-note strong{
  color:#202020;

  font-size:13px;
}


.case-note p{
  max-width:840px;

  margin-top:8px;

  color:#625f59;

  font-size:13px;
  line-height:1.72;
}


/* =====================================================
   KEYWORDS
===================================================== */

.keywords-table{
  margin-top:44px;

  border-top:1px solid rgba(255,255,255,.12);
}


.keywords-row{
  padding:17px 0;

  display:grid;
  grid-template-columns:
    1fr 1.4fr;

  gap:10px;

  border-bottom:1px solid rgba(255,255,255,.10);
}


.keywords-row > span:nth-child(3),
.keywords-row > span:nth-child(4){
  display:none;
}


.keywords-row span{
  color:#cecec9;

  font-size:11px;
}


.keywords-row strong{
  color:#deded9;

  font-size:12px;
  font-weight:600;
}


.keywords-row--head{
  display:none;
}


.case-caption{
  margin-top:17px;

  color:#c9c9c4;

  font-size:11px;
}


/* =====================================================
   OPTIMISATIONS
===================================================== */

.case-optim-grid{
  margin-top:44px;

  display:grid;

  gap:9px;
}


.case-optim-card{
  min-height:285px;

  padding:22px;

  background:#faf8f4;

  border:1px solid #ddd9d1;
}


.case-optim-card > span{
  color:#a47d45;

  font-size:11px;
  font-weight:700;
}


.case-optim-card h3{
  margin-top:42px;

  color:#161616;

  font-size:23px;
}


.case-optim-card ul{
  margin:19px 0 0;

  padding:0;

  list-style:none;
}


.case-optim-card li{
  padding:8px 0;

  border-bottom:1px solid #dfdbd3;

  color:#625f59;

  font-size:12px;
}


/* =====================================================
   URL FIX
===================================================== */

.url-fix{
  max-width:720px;

  margin-top:20px;

  padding:17px 0;

  display:grid;
  grid-template-columns:
    1fr auto 1fr;

  gap:13px;

  align-items:center;

  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}


.url-fix div{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:4px;
}


.url-fix small{
  color:#c7c7c2;

  font-size:10px;
}


.url-fix strong{
  color:#deded9;

  font-family:var(--font-title);

  font-size:13px;

  overflow-wrap:anywhere;
}


.url-fix > span{
  color:var(--gold);
}


/* =====================================================
   PERFORMANCE
===================================================== */

.case-performance{
  padding:85px 0;

  background:#080808;
}


.performance-comparison{
  margin-top:44px;

  display:grid;

  gap:10px;
}


.performance-block{
  padding:22px;

  background:#0e0e0e;

  border:1px solid rgba(255,255,255,.09);
}


.performance-block > small{
  color:#d2d2cd;

  font-size:11px;
}


.performance-block__numbers{
  margin:27px 0 15px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;
}


.performance-block__numbers div{
  min-width:0;

  display:flex;
  flex-direction:column;
}


.performance-block__numbers span{
  color:#c1c1bc;

  font-size:10px;
}


.performance-block__numbers strong{
  color:#f2f2ee;

  font-family:var(--font-title);

  font-size:clamp(
    23px,
    6vw,
    39px
  );

  white-space:nowrap;
}


.performance-block__numbers b{
  color:var(--gold);
}


.performance-block > p{
  color:var(--gold);

  font-size:12px;
  font-weight:700;

  text-align:left;
}


.performance-actions{
  margin-top:19px;

  display:flex;
  flex-wrap:wrap;

  gap:7px;
}


.performance-actions span,
.case-tools span{
  padding:7px 10px;

  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;

  color:#deded9;

  font-size:10px;
}


/* =====================================================
   FINAL RESULTS
===================================================== */

.case-final{
  padding:85px 0;

  background:#f4f2ed;
}


.final-results-grid{
  margin-top:44px;

  display:grid;
  grid-template-columns:
    repeat(2,1fr);

  gap:9px;
}


.final-result{
  min-height:160px;

  padding:20px;

  display:flex;
  flex-direction:column;

  background:#faf8f4;

  border:1px solid #ddd9d1;
}


.final-result span{
  color:#716d66;

  font-size:10px;
}


.final-result strong{
  margin:auto 0;

  color:#171717;

  font-family:var(--font-title);

  font-size:clamp(
    25px,
    7vw,
    38px
  );

  font-weight:600;
}


.final-result small{
  color:#967047;

  font-size:10px;
}


.case-result-note{
  max-width:800px;

  margin-top:20px;

  padding-top:19px;

  border-top:1px solid #d6d1c8;
}


.case-result-note p{
  color:#625f59;

  font-size:12px;
  line-height:1.7;
}


/* =====================================================
   TOOLS CASE
===================================================== */

.case-tools{
  margin-top:27px;

  display:flex;
  flex-wrap:wrap;

  gap:7px;
}


/* =====================================================
   CONCLUSION
===================================================== */

.case-conclusion{
  position:relative;

  padding:105px 0;

  overflow:hidden;

  background:#070707;
}


.case-conclusion::before{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  right:-310px;
  bottom:-300px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(200,162,103,.10),
      transparent 68%
    );
}


.case-conclusion__inner{
  position:relative;

  z-index:2;

  max-width:1000px;
}


.case-conclusion h2{
  color:#f5f5f1;

  font-size:clamp(
    38px,
    10vw,
    61px
  );

  line-height:1.03;
}


.case-conclusion h2 span{
  display:inline;

  color:#ecece7;
}


.case-conclusion__inner > p:not(.eyebrow){
  max-width:720px;

  margin-top:26px;

  color:#deded9;

  font-size:15px;
  line-height:1.82;
}


.case-conclusion__actions{
  margin-top:31px;

  display:flex;
  flex-wrap:wrap;

  gap:9px;
}


/* =====================================================
   TABLETTE
===================================================== */

@media(min-width:640px){

  .seo-page-hero__title,
  .case-hero__title{
    font-size:clamp(
      54px,
      8.4vw,
      76px
    );
  }


  .seo-page-hero__meta{
    grid-template-columns:
      repeat(4,1fr);
  }


  .seo-method__grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .seo-tools__grid{
    grid-template-columns:
      repeat(4,1fr);
  }


  .case-results__grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .case-process{
    grid-template-columns:
      repeat(2,1fr);
  }


  .case-optim-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .performance-comparison{
    grid-template-columns:
      repeat(2,1fr);
  }


  .final-results-grid{
    grid-template-columns:
      repeat(3,1fr);
  }


  .keywords-row{
    grid-template-columns:
      1fr 1.5fr .55fr .55fr;
  }


  .keywords-row > span:nth-child(3),
  .keywords-row > span:nth-child(4){
    display:block;
  }


  .keywords-row--head{
    display:grid;
  }


  .seo-case-card__footer{
    flex-direction:row;
    align-items:center;
  }

}


/* =====================================================
   DESKTOP
===================================================== */

@media(min-width:980px){

  .seo-page-hero{
    min-height:82svh;

    padding:
      150px 0
      85px;
  }


  .seo-page-hero__title{
    max-width:1100px;

    font-size:clamp(
      66px,
      6.8vw,
      86px
    );
  }


  .seo-method,
  .seo-case-list,
  .seo-tools,
  .case-section,
  .case-performance,
  .case-final{
    padding:125px 0;
  }


  .seo-method__heading,
  .seo-case-list__head,
  .seo-tools__heading,
  .case-heading,
  .case-final__head{
    grid-template-columns:
      210px minmax(0,1fr);

    gap:65px;
  }


  .seo-method__grid{
    grid-template-columns:
      repeat(4,1fr);
  }


  .seo-case-list__title{
    font-size:clamp(
      45px,
      4.4vw,
      62px
    );
  }


  .seo-case-card{
    padding:31px;
  }


  .seo-case-card__body{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,.85fr);

    gap:65px;

    align-items:center;
  }


  .seo-case-card__content h3{
    font-size:clamp(
      39px,
      3.8vw,
      54px
    );
  }


  .case-hero{
    padding:
      155px 0
      85px;
  }


  .case-hero__grid{
    grid-template-columns:
      minmax(0,1fr)
      300px;

    gap:75px;

    align-items:end;
  }


  .case-hero__title{
    max-width:1030px;

    font-size:clamp(
      65px,
      6.7vw,
      84px
    );
  }


  .case-results__grid{
    grid-template-columns:
      repeat(4,1fr);
  }


  .case-two-cols{
    grid-template-columns:
      210px minmax(0,1fr);

    gap:65px;
  }


  .case-light-title,
  .case-dark-title{
    font-size:clamp(
      44px,
      4.25vw,
      60px
    );
  }


  .case-process{
    grid-template-columns:
      repeat(4,1fr);
  }


  .audit-grid{
    grid-template-columns:
      repeat(4,1fr);
  }


  .case-optim-grid{
    grid-template-columns:
      repeat(4,1fr);
  }


  .case-conclusion{
    padding:135px 0;
  }


  .case-conclusion h2{
    font-size:clamp(
      54px,
      5.2vw,
      72px
    );
  }

}