/* =========================================================
   VARIABLES
========================================================= */

:root{
  --forest:#06130d;
  --forest2:#0b2118;
  --forest3:#173628;
  --black:#010604;
  --sand:#b99a5e;
  --white:#f1f0e8;
  --muted:#aeb9b0;
  --line:rgba(238,244,238,.15);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(
      ellipse at 68% 12%,
      rgba(74,111,75,.20),
      transparent 24%
    ),
    radial-gradient(
      ellipse at 28% 78%,
      rgba(38,82,54,.20),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #020806 0%,
      #071812 38%,
      #0d2a1e 67%,
      #030a07 100%
    );

  color:var(--white);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(80,115,73,.16),
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.22),
      transparent 18%,
      transparent 82%,
      rgba(0,0,0,.22)
    );

  mix-blend-mode:screen;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{
  position:fixed;
  top:18px;
  left:5vw;
  right:5vw;
  height:64px;

  z-index:100;

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

  padding:0 18px 0 12px;

  border:1px solid rgba(238,244,238,.15);
  background:rgba(5,20,13,.48);

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

  border-radius:22px;

  box-shadow:
    0 15px 45px rgba(0,0,0,.35);
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;

  color:white;
  text-decoration:none;

  font-family:"Barlow Condensed",sans-serif;
  font-size:13px;
  font-weight:600;

  letter-spacing:.12em;
}

.brand img{
  width:41px;
  height:41px;

  border-radius:50%;
  object-fit:cover;

  border:1px solid rgba(198,174,123,.75);
}

.nav nav{
  display:flex;
  align-items:center;
}

.nav nav a{
  margin-left:28px;

  color:#e5ebe6;
  text-decoration:none;

  font-size:9px;
  letter-spacing:.25em;
  text-transform:uppercase;

  transition:.3s ease;
}

.nav nav a:hover{
  color:var(--sand);
}


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

.hero{
  position:relative;

  min-height:100svh;

  overflow:hidden;

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

  background:#020705;
}

/* IMAGE DE FOND */
.hero-bg{
  position:absolute;

  inset:-3%;

  width:106%;
  height:106%;

  object-fit:cover;

  /*
     IMPORTANT :
     L'image reste visible.
     On ne la noircit pas complètement.
  */
  filter:
    saturate(.14)
    contrast(1.22)
    brightness(.42)
    sepia(.30)
    blur(1.3px);

  opacity:.78;


  transform:scale(1.05);

  animation:heroZoom 18s ease-out both;
}

@keyframes heroZoom{
  from{
    transform:scale(1.12);
  }

  to{
    transform:scale(1.05);
  }
}


/* OVERLAY */

.hero-overlay{

  background:

    /* halo désert derrière l'image */
    radial-gradient(
      ellipse 46% 68%
      at 72% 46%,
      rgba(166,126,75,.13),
      transparent 68%
    ),

    /* voile sombre à gauche pour le texte */
    linear-gradient(
      90deg,
      rgba(10,7,4,.82) 0%,
      rgba(39,26,16,.48) 34%,
      rgba(76,54,32,.16) 64%,
      rgba(9,6,4,.68) 100%
    ),

    /* fondu vertical */
    linear-gradient(
      180deg,
      rgba(8,5,3,.48) 0%,
      rgba(38,26,16,.12) 42%,
      rgba(7,5,3,.82) 100%
    );
}


/* TOP BAR */

.hero-top{
  position:absolute;

  top:108px;
  left:5vw;
  right:5vw;

  z-index:5;

  display:flex;
  align-items:center;
  gap:15px;

  font-size:8px;
  letter-spacing:.38em;

  color:rgba(242,241,226,.58);
}

.hero-top i{
  width:75px;
  height:1px;

  background:rgba(185,154,94,.55);
}


/* HERO CONTENT */

.hero-content{
  position:relative;

  z-index:4;

  width:min(1280px,90vw);

  display:grid;
  grid-template-columns:390px 1fr;

  gap:85px;

  align-items:center;
}


/* EMBLEM */

.emblem-stage{
  position:relative;

  width:390px;
  height:390px;

  display:grid;
  place-items:center;
}

.emblem-glow{
  position:absolute;
  inset:-80px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(105,137,89,.23),
      transparent 65%
    );

  filter:blur(15px);
}

.emblem-halo{
  position:absolute;

  border-radius:50%;

  pointer-events:none;
}

.halo-one{
  inset:15px;

  border:
    1px solid
    rgba(185,154,94,.30);

  border-left-color:transparent;
  border-bottom-color:transparent;

  transform:rotate(25deg);
}

.halo-two{
  inset:-12px;

  border:
    1px solid
    rgba(240,241,226,.13);

  border-right-color:transparent;

  transform:rotate(-31deg);
}

.emblem{
  position:relative;

  z-index:4;

  width:270px;
  height:270px;

  padding:12px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,240,225,.12),
      rgba(4,13,9,.42) 62%,
      rgba(2,7,4,.65)
    );

  border:1px solid rgba(239,237,218,.38);

  box-shadow:
    0 0 0 1px rgba(185,154,94,.25),
    0 0 0 18px rgba(2,10,6,.32),
    0 0 0 19px rgba(185,154,94,.10),
    0 35px 100px rgba(0,0,0,.75);

  backdrop-filter:blur(8px);

  animation:floatEmblem 7s ease-in-out infinite;
}

@keyframes floatEmblem{
  50%{
    transform:translateY(-8px);
  }
}

.emblem img{
  width:100%;
  height:100%;

  object-fit:contain;

  border-radius:50%;

  filter:
    drop-shadow(0 20px 28px rgba(0,0,0,.65));
}

.emblem::before{
  content:"";

  position:absolute;
  inset:8px;

  border-radius:50%;

  border:1px solid rgba(185,154,94,.45);

  border-top-color:transparent;

  transform:rotate(-28deg);
}

.emblem::after{
  content:"";

  position:absolute;
  inset:25px;

  border-radius:50%;

  border:1px solid rgba(241,241,225,.11);
}

.emblem-label{
  position:absolute;

  bottom:17px;
  left:50%;

  z-index:6;

  transform:translateX(-50%);

  white-space:nowrap;

  font-size:6px;
  letter-spacing:.34em;

  color:rgba(242,241,226,.48);
}


/* HERO TEXT */

.hero-copy{
  position:relative;

  padding-left:32px;

  border-left:
    1px solid
    rgba(185,154,94,.62);
}

.hero-eyebrow{
  margin-bottom:13px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(30px,4vw,58px);

  font-weight:700;

  line-height:.8;

  letter-spacing:.02em;

  color:var(--white);
}

.hero-title{
  margin:0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(72px,9vw,145px);

  font-weight:800;

  line-height:.68;

  letter-spacing:-.025em;

  text-shadow:
    0 25px 80px rgba(0,0,0,.85);
}

.hero-title span{
  color:var(--sand);
}

.hero-lead{
  margin:34px 0 0;

  font-size:13px;

  letter-spacing:.08em;

  color:rgba(242,241,226,.66);
}

.hero-motto{
  display:flex;
  align-items:center;
  gap:18px;

  margin-top:28px;
}

.hero-motto strong{
  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(25px,3vw,44px);

  font-weight:600;

  letter-spacing:.16em;
}

.hero-motto span{
  font-size:8px;
  letter-spacing:.28em;

  color:rgba(242,241,226,.42);
}


/* HERO BOTTOM */

.hero-bottom{
  position:absolute;

  z-index:5;

  left:5vw;
  right:5vw;
  bottom:30px;

  display:flex;
  align-items:center;
  gap:14px;

  font-size:7px;
  letter-spacing:.34em;

  color:rgba(242,241,226,.45);
}

.hero-bottom i{
  width:70px;
  height:1px;

  background:rgba(185,154,94,.45);
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section{
  position:relative;

  padding:125px 5vw;

  overflow:hidden;
}

.section-inner{
  width:min(1120px,92vw);
  margin:auto;
}

.kicker{
  font-size:9px;

  letter-spacing:.36em;

  color:var(--sand);

  text-transform:uppercase;
}

.title{
  margin:18px 0 35px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(55px,7vw,105px);

  font-weight:700;

  line-height:.82;

  letter-spacing:-.018em;
}

.title span{
  color:var(--sand);
}


/* =========================================================
   IDENTITÉ
========================================================= */

.about{
  background:
    radial-gradient(
      ellipse at 80% 30%,
      rgba(73,111,75,.16),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #071812,
      #0b241a 55%,
      #030a07
    );
}

.about-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:30px;

  align-items:stretch;
}

.panel{
  padding:38px;

  border-radius:28px;

  background:
    rgba(238,244,238,.045);

  border:1px solid rgba(238,244,238,.09);

  backdrop-filter:blur(12px);
}

.panel p{
  color:var(--muted);

  line-height:1.9;

  font-size:14px;

  max-width:620px;
}


/* PHOTO */

.photo-card{
  position:relative;

  min-height:440px;

  overflow:hidden;

  border-radius:28px;

  border:1px solid rgba(238,244,238,.10);
}

.photo-card img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  filter:
    saturate(.32)
    contrast(1.08)
    brightness(.62);

  transition:
    transform .8s ease,
    filter .7s ease;
}

.photo-card:hover img{
  transform:scale(1.04);

  filter:
    saturate(.45)
    contrast(1.06)
    brightness(.72);
}

.photo-card::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      0deg,
      rgba(4,17,11,.92),
      transparent 70%
    );
}

.photo-label{
  position:absolute;

  z-index:2;

  left:30px;
  bottom:28px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:30px;

  font-weight:500;

  letter-spacing:.04em;
}


/* =========================================================
   DEVISE
========================================================= */

.devise{
  min-height:82vh;

  display:grid;
  place-items:center;

  text-align:center;

  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(91,123,76,.22),
      transparent 26%
    ),
    repeating-linear-gradient(
      128deg,
      transparent 0,
      transparent 78px,
      rgba(214,225,205,.035) 79px,
      transparent 81px
    ),
    linear-gradient(
      145deg,
      #020806,
      #0d2a1e 58%,
      #030a07
    );
}

.devise-box{
  width:100%;
  max-width:1050px;

  padding:70px 8vw;

  border-radius:30px;

  background:rgba(238,244,238,.035);

  border:1px solid rgba(238,244,238,.08);

  backdrop-filter:blur(12px);
}

.devise h2{
  margin:25px 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(80px,14vw,190px);

  font-weight:800;

  line-height:.68;

  letter-spacing:-.025em;
}

.devise h2 span{
  color:var(--sand);
}

.devise p{
  color:var(--muted);

  font-size:10px;

  letter-spacing:.25em;
}

.words{
  display:grid;

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

  gap:12px;

  margin-top:55px;
}

.word{
  padding:24px 12px;

  font-family:"Barlow Condensed",sans-serif;

  font-size:30px;

  font-weight:500;

  letter-spacing:.05em;

  border:1px solid rgba(238,244,238,.08);

  border-radius:18px;

  background:rgba(238,244,238,.04);
}


/* =========================================================
   ESPRIT
========================================================= */

.spirit{
  background:
    linear-gradient(
      145deg,
      #071810,
      #0b2419,
      #04100a
    );
}


/* =========================================================
   GALERIE
========================================================= */

.gallery{
  position:relative;

  padding:130px 0 110px;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 70% 25%,
      rgba(72,102,74,.14),
      transparent 34%
    ),
    linear-gradient(
      160deg,
      #020806,
      #081710 52%,
      #020705
    );
}

.gallery-head{
  width:min(1120px,88vw);

  margin:
    0 auto 65px;
}

.gallery-kicker{
  font-size:8px;

  letter-spacing:.42em;

  color:rgba(241,240,232,.32);
}

.gallery-title{
  margin:17px 0 0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(65px,8vw,115px);

  font-weight:800;

  line-height:.73;

  letter-spacing:-.02em;
}

.gallery-title span{
  color:var(--sand);
}

.gallery-intro{
  margin-top:22px;

  font-size:11px;

  line-height:1.7;

  color:rgba(241,240,232,.42);
}


/* GALLERY STAGE */

.gallery-stage{
  position:relative;

  width:min(1160px,90vw);

  height:650px;

  margin:auto;
}

.gallery-shot{
  position:absolute;

  margin:0;

  overflow:hidden;

  background:#06100b;

  border:
    1px solid
    rgba(239,240,225,.11);

  box-shadow:
    0 30px 85px rgba(0,0,0,.48);
}

.gallery-shot img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  filter:
    saturate(.32)
    contrast(1.08)
    brightness(.66);

  transition:
    transform .9s ease,
    filter .7s ease;
}

.gallery-shot:hover img{
  transform:scale(1.045);

  filter:
    saturate(.48)
    contrast(1.06)
    brightness(.75);
}

.gallery-shot::after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(0,0,0,.48)
    );
}

.gallery-shot figcaption{
  position:absolute;

  z-index:3;

  left:17px;
  right:17px;
  bottom:15px;

  display:flex;

  gap:12px;

  font-size:7px;

  letter-spacing:.26em;

  color:rgba(242,241,226,.58);
}

.gallery-shot figcaption small{
  color:var(--sand);
}


/* POSITIONS */

.gallery-main{
  left:31%;
  top:0;

  width:36%;
  height:445px;

  border-color:
    rgba(185,154,94,.32);
}

.gallery-left{
  left:0;
  top:54px;

  width:28%;
  height:325px;
}

.gallery-right{
  right:0;
  top:74px;

  width:26%;
  height:280px;
}

.gallery-bottom{
  left:14%;
  bottom:0;

  width:27%;
  height:215px;
}

.gallery-mark{
  position:absolute;

  right:1%;
  bottom:0;

  font-family:"Barlow Condensed",sans-serif;

  font-size:215px;

  font-weight:800;

  line-height:.7;

  letter-spacing:-.05em;

  color:rgba(239,241,226,.025);

  pointer-events:none;
}

.gallery-footer{
  width:min(1120px,88vw);

  margin:27px auto 0;

  display:flex;

  justify-content:space-between;

  font-size:7px;

  letter-spacing:.31em;

  color:rgba(242,241,226,.27);
}


/* =========================================================
   FINAL — SIGNATURE
========================================================= */

.final{
  position:relative;

  min-height:90vh;

  overflow:hidden;

  display:flex;

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

  text-align:center;

  padding:120px 6vw;

  background:
    linear-gradient(
      145deg,
      #010604,
      #0b2419 50%,
      #020806
    );
}

.final-bg{
  position:absolute;

  width:75vw;
  height:75vw;

  right:-22vw;
  top:-15vw;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(102,132,89,.19),
      transparent 64%
    );

  filter:blur(8px);
}

.final-content{
  position:relative;

  z-index:2;

  width:min(1100px,92vw);
}

.final-index{
  margin-bottom:20px;

  font-size:8px;

  letter-spacing:.42em;

  color:rgba(242,241,226,.28);
}

.final-kicker{
  font-family:"Barlow Condensed",sans-serif;

  font-size:
    clamp(24px,3vw,40px);

  font-weight:500;

  letter-spacing:.28em;

  color:var(--sand);
}

.final h2{
  margin:30px 0 32px;

  font-family:"Barlow Condensed",sans-serif;

  /*
     PLUS GRAND qu'avant
  */

  font-size:
    clamp(65px,10vw,145px);

  font-weight:800;

  line-height:.76;

  letter-spacing:-.025em;

  text-shadow:
    0 25px 80px rgba(0,0,0,.75);
}

.final h2 span{
  color:var(--sand);
}

.final p{
  margin:0;

  font-size:
    clamp(13px,1.3vw,17px);

  line-height:1.8;

  letter-spacing:.06em;

  color:rgba(242,241,226,.55);
}

.final-rule{
  width:100px;
  height:1px;

  margin:38px auto;

  background:var(--sand);
}

.final-meta{
  display:flex;

  justify-content:center;

  gap:35px;

  font-size:8px;

  letter-spacing:.30em;

  color:rgba(242,241,226,.35);
}


/* =========================================================
   FOOTER
========================================================= */

footer{
  min-height:90px;

  display:flex;

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

  padding:0 6vw;

  background:#010604;

  border-top:
    1px solid
    rgba(238,244,238,.08);

  font-size:8px;

  letter-spacing:.28em;

  color:rgba(242,241,226,.30);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal{
  opacity:0;

  transform:translateY(30px);

  transition:
    opacity .9s ease,
    transform .9s ease;
}

.reveal.show{
  opacity:1;

  transform:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

  .nav{
    left:3vw;
    right:3vw;

    height:60px;

    padding-right:14px;
  }

  .brand{
    font-size:10px;

    max-width:75vw;

    line-height:1.05;
  }

  .brand img{
    width:38px;
    height:38px;
  }

  .nav nav{
    display:none;
  }


  /* HERO */

  .hero{
    min-height:100svh;
  }

  .hero-bg{
    inset:-2%;

    width:104%;
    height:104%;

    filter:
      saturate(.32)
      contrast(1.08)
      brightness(.48);
  }

  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(0,5,3,.58),
        rgba(1,8,5,.20) 42%,
        rgba(0,5,3,.82)
      );
  }

  .hero-top{
    top:92px;

    left:7vw;
    right:7vw;

    font-size:6px;

    letter-spacing:.28em;
  }

  .hero-top i{
    width:35px;
  }

  .hero-content{
    width:88vw;

    grid-template-columns:1fr;

    gap:22px;

    padding-top:60px;
  }

  .emblem-stage{
    width:235px;
    height:235px;

    margin:auto;
  }

  .emblem{
    width:190px;
    height:190px;
  }

  .emblem-label{
    bottom:3px;
  }

  .hero-copy{
    padding-left:18px;
  }

  .hero-eyebrow{
    font-size:34px;
  }

  .hero-title{
    font-size:
      clamp(62px,17vw,94px);

    line-height:.68;
  }

  .hero-lead{
    margin-top:24px;

    font-size:11px;
  }

  .hero-motto{
    margin-top:22px;

    gap:10px;
  }

  .hero-motto strong{
    font-size:27px;
  }

  .hero-motto span{
    font-size:6px;
  }

  .hero-bottom{
    left:7vw;
    right:7vw;
    bottom:20px;

    font-size:6px;

    letter-spacing:.25em;
  }


  /* SECTIONS */

  .section{
    padding:90px 6vw;
  }

  .about-grid{
    grid-template-columns:1fr;
  }

  .panel{
    padding:28px;

    border-radius:22px;
  }

  .title{
    font-size:
      clamp(52px,15vw,80px);
  }

  .photo-card{
    min-height:330px;

    border-radius:22px;
  }

  .photo-label{
    left:22px;
    bottom:22px;

    font-size:25px;
  }


  /* DEVISE */

  .devise{
    min-height:75vh;
  }

  .devise-box{
    padding:55px 6vw;

    border-radius:24px;
  }

  .devise h2{
    font-size:
      clamp(70px,19vw,120px);
  }

  .words{
    grid-template-columns:1fr;

    margin-top:40px;
  }


  /* GALERIE */

  .gallery{
    padding:95px 0 90px;
  }

  .gallery-head{
    width:88vw;

    margin-bottom:42px;
  }

  .gallery-title{
    font-size:
      clamp(58px,16vw,90px);
  }

  .gallery-stage{
    width:90vw;

    height:620px;
  }

  .gallery-main{
    left:30%;
    top:0;

    width:53%;
    height:325px;
  }

  .gallery-left{
    left:0;
    top:28px;

    width:47%;
    height:235px;
  }

  .gallery-right{
    right:0;
    top:350px;

    width:43%;
    height:215px;
  }

  .gallery-bottom{
    left:3%;
    bottom:0;

    width:46%;
    height:185px;
  }

  .gallery-mark{
    font-size:120px;
  }

  .gallery-footer{
    width:88vw;

    flex-direction:column;

    gap:10px;
  }


  /* FINAL */

  .final{
    min-height:78vh;

    padding:90px 6vw;
  }

  .final-kicker{
    font-size:24px;
  }

  .final h2{
    font-size:
      clamp(55px,15vw,90px);

    line-height:.78;

    margin:25px 0 28px;
  }

  .final p{
    font-size:12px;
  }

  .final-meta{
    flex-direction:column;

    gap:10px;
  }


  /* FOOTER */

  footer{
    min-height:100px;

    padding:25px 6vw;

    flex-direction:column;

    justify-content:center;

    gap:10px;

    text-align:center;

    line-height:1.8;
  }
}
/* =========================================================
   NOUVEAU FOND GFS
   MARRON DÉSERT — FONCÉ / CLAIR / SABLE
========================================================= */
:root{
  --desert-black:#100b07;
  --brown-deep:#21150d;
  --brown-dark:#302015;
  --brown:#513824;
  --brown-light:#735538;
  --sand:#b99a5e;
  --sand-light:#c9ad78;
  --white:#f1eee5;
  --muted:#c0b6a5;
}
/* =========================================================
   FOND GLOBAL
========================================================= */
body{
  background:
    /* grande lumière sable */
    radial-gradient(
      ellipse 55% 42%
      at 78% 8%,
      rgba(151,116,72,.28),
      transparent 68%
    ),
    /* lumière brune gauche */
    radial-gradient(
      ellipse 60% 55%
      at 8% 48%,
      rgba(91,62,38,.26),
      transparent 70%
    ),
    /* zone chaude centrale */
    radial-gradient(
      ellipse 65% 55%
      at 54% 62%,
      rgba(103,73,44,.20),
      transparent 72%
    ),
    /* profondeur */
    linear-gradient(
      140deg,
      #0d0906 0%,
      #21150d 25%,
      #49321f 48%,
      #6b4d30 66%,
      #2c1e14 82%,
      #0b0805 100%
    );
  color:var(--white);
}
/* =========================================================
   TEXTURE ORGANIQUE
   COURBES ONDULÉES — PAS DE RAYURES DROITES
========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:50;
  opacity:.45;
  background:
    /* grande courbe 1 */
    radial-gradient(
      ellipse 80% 18%
      at 15% 28%,
      transparent 48%,
      rgba(201,173,120,.055) 49%,
      rgba(201,173,120,.055) 50%,
      transparent 51%
    ),
    /* grande courbe 2 */
    radial-gradient(
      ellipse 75% 20%
      at 85% 54%,
      transparent 47%,
      rgba(211,183,130,.045) 48%,
      rgba(211,183,130,.045) 49%,
      transparent 50%
    ),
    /* courbe basse */
    radial-gradient(
      ellipse 85% 22%
      at 30% 88%,
      transparent 47%,
      rgba(120,88,53,.07) 48%,
      rgba(120,88,53,.07) 49%,
      transparent 50%
    );
  filter:blur(1px);
  mix-blend-mode:screen;
}
/* =========================================================
   HERO
========================================================= */
.hero{
  background:
    radial-gradient(
      ellipse 60% 65%
      at 76% 42%,
      rgba(135,99,58,.25),
      transparent 68%
    ),
    radial-gradient(
      ellipse 55% 65%
      at 18% 65%,
      rgba(74,49,29,.25),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      #0d0906,
      #2a1b10 38%,
      #5d4329 67%,
      #120d08 100%
    );
}
/* =========================================================
   IMAGE DE FOND
   TRÈS FONDUE DANS LE MARRON
========================================================= */
.hero-bg{
  filter:
    saturate(.06)
    contrast(1.05)
    brightness(.30)
    sepia(.42)
    blur(2px);
  opacity:.58;
}
/* =========================================================
   VOILE DU HERO
========================================================= */
.hero-overlay{
  background:
    /* lumière sable */
    radial-gradient(
      ellipse 42% 65%
      at 75% 45%,
      rgba(190,153,96,.20),
      transparent 70%
    ),
    /* profondeur brune */
    radial-gradient(
      ellipse 70% 65%
      at 20% 55%,
      rgba(43,27,16,.35),
      transparent 72%
    ),
    /* fondu horizontal */
    linear-gradient(
      90deg,
      rgba(12,8,5,.88) 0%,
      rgba(42,28,18,.60) 35%,
      rgba(92,66,39,.28) 65%,
      rgba(10,7,4,.80) 100%
    ),
    /* fondu vertical */
    linear-gradient(
      180deg,
      rgba(10,7,4,.55),
      transparent 35%,
      rgba(8,5,3,.86) 100%
    );
}
/* =========================================================
   IDENTITÉ
========================================================= */
.about{
  background:
    radial-gradient(
      ellipse 55% 48%
      at 82% 22%,
      rgba(139,104,62,.24),
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 60%
      at 10% 78%,
      rgba(67,45,27,.24),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      #120c08,
      #332217 42%,
      #684a2d 70%,
      #100b07 100%
    );
}
/* =========================================================
   DEVISE
========================================================= */
.devise{
  background:
    radial-gradient(
      ellipse 65% 55%
      at 70% 40%,
      rgba(174,134,79,.25),
      transparent 66%
    ),
    radial-gradient(
      ellipse 55% 55%
      at 20% 75%,
      rgba(68,44,26,.28),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #0d0906,
      #2c1d12 38%,
      #63462a 68%,
      #100b07 100%
    );
}
/* =========================================================
   ESPRIT
========================================================= */
.spirit{
  background:
    radial-gradient(
      ellipse 60% 60%
      at 20% 40%,
      rgba(93,63,38,.28),
      transparent 70%
    ),
    radial-gradient(
      ellipse 55% 50%
      at 82% 68%,
      rgba(156,116,68,.20),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      #100a06,
      #392619 42%,
      #67492d 68%,
      #0e0906 100%
    );
}
/* =========================================================
   GALERIE
========================================================= */
.gallery{
  background:
    radial-gradient(
      ellipse 55% 45%
      at 78% 18%,
      rgba(169,130,76,.22),
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 55%
      at 15% 78%,
      rgba(68,44,27,.27),
      transparent 72%
    ),
    linear-gradient(
      155deg,
      #0c0805,
      #2c1d12 36%,
      #65472b 65%,
      #0c0805 100%
    );
}
/* =========================================================
   SIGNATURE FINALE
========================================================= */
.final{
  background:
    radial-gradient(
      ellipse 60% 65%
      at 72% 40%,
      rgba(174,134,78,.28),
      transparent 68%
    ),
    radial-gradient(
      ellipse 55% 60%
      at 18% 72%,
      rgba(73,47,28,.28),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #0c0805 0%,
      #2d1e13 32%,
      #67482b 65%,
      #0b0704 100%
    );
}
/* =========================================================
   HALO DE LA DERNIÈRE SECTION
========================================================= */
.final-bg{
  background:
    radial-gradient(
      circle,
      rgba(190,150,91,.25),
      rgba(125,91,53,.12) 35%,
      transparent 68%
    );
  filter:blur(22px);
}
/* =========================================================
   CARTES
========================================================= */
.panel,
.devise-box{
  background:
    linear-gradient(
      135deg,
      rgba(245,235,214,.065),
      rgba(70,46,27,.10)
    );
  border-color:
    rgba(218,191,145,.13);
}
/* =========================================================
   ACCENTS
========================================================= */
.kicker,
.gallery-kicker{
  color:var(--sand-light);
}
.hero-motto strong,
.final-kicker{
  color:var(--sand);
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width:800px){
  body{
    background:
      radial-gradient(
        ellipse 80% 38%
        at 80% 8%,
        rgba(157,119,72,.25),
        transparent 70%
      ),
      radial-gradient(
        ellipse 80% 45%
        at 12% 52%,
        rgba(76,50,29,.27),
        transparent 70%
      ),
      linear-gradient(
        145deg,
        #0d0906,
        #2d1e13 45%,
        #60432a 72%,
        #0b0704
      );
  }
  .hero-overlay{
    background:
      radial-gradient(
        ellipse 75% 45%
        at 75% 32%,
        rgba(177,137,82,.20),
        transparent 70%
      ),
      linear-gradient(
        180deg,
        rgba(10,7,4,.58),
        rgba(52,35,21,.25) 45%,
        rgba(7,5,3,.90)
      );
  }
}