/* =====================================================
   HOME
===================================================== */

.section__home {
  position:relative;
  width:var(--w-container-size);
  min-height:clamp(420px,46vw,680px);
  margin:clamp(80px,13vw,150px) auto var(--section-gap);
  margin-bottom:calc(var(--section-gap) * .8);
  background:#000;
  border:var(--border);
  overflow:hidden;
  isolation:isolate;
}

.section__home::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.78) 24%,rgba(0,0,0,.56) 44%,rgba(0,0,0,.2) 67%,rgba(0,0,0,.05) 100%),linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.24) 100%);
}

/* =====================================================
   IMAGE DE FOND
===================================================== */

.hero__media {
  position:absolute;
  inset:0;
  z-index:1;
}

.hero__background {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center right;
}

/* =====================================================
   CONTENU DU HERO
===================================================== */

.content-flow {
  position:relative;
  z-index:3;
  width:min(55%,720px);
  min-height:clamp(420px,46vw,680px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.content-copy {
  width:100%;
  padding:clamp(28px,4vw,58px) clamp(28px,4vw,54px);
  color:var(--text-color);
  font-family:"Montserrat",Arial,sans-serif;
}

.hero__flow-text {
  width:100%;
  max-width:590px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(18px,1.8vw,24px);
  text-align:left;
  line-height:normal;
}

/* =====================================================
   VOTRE + TRAITS
===================================================== */

.hero__eyebrow {
  width:clamp(180px,25vw,360px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(10px,1.4vw,18px);
  margin:0;
}

.hero__eyebrow-text {
  color:var(--text-color);
  font-family:"Montserrat",sans-serif;
  font-size:clamp(10px,.85vw,14px);
  font-weight:500;
  letter-spacing:clamp(4px,.35vw,6px);
  line-height:1;
  white-space:nowrap;
}

.hero__eyebrow-line {
  flex:1;
  min-width:14px;
  height:1px;
  background:var(--text-color);
  opacity:.85;
}

/* =====================================================
   GRAND TITRE
===================================================== */

.hero__main-title {
  width:100%;
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(20px,3vw,40px);
  font-weight:500;
  line-height:.95;
  text-align:left;
  text-transform:uppercase;
}

.hero__main-title .text-rotator {
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  height:1.08em;
  margin:0;
  overflow:hidden;
  vertical-align:top;
}

.hero__main-title .text-rotator > span {
  position:absolute;
  inset:0 auto auto 0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:.14em;
  width:100%;
  max-width:100%;
  white-space:nowrap;
  text-align:left;
  font:inherit;
  line-height:inherit;
}

.hero__title-primary {
  color:#fff;
}

.hero__title-accent {
  color:var(--other-color);
}

/* =====================================================
   DESCRIPTION
===================================================== */

.hero__description {
  display:block;
  width:100%;
  max-width:560px;
  margin:0;
  padding:0;
  color:rgba(255,255,255,.82);
  font-family:"Montserrat",Arial,sans-serif;
  font-size:clamp(14px,1.1vw,18px);
  font-weight:300;
  line-height:1.65;
  text-align:left;
}

/* =====================================================
   BOUTONS
===================================================== */

.hero__actions {
  width:100%;
  max-width:320px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(12px,1.5vw,20px);
  margin:clamp(18px,2vw,30px) 0 0;
  pointer-events:auto;
}

.hero__button--phone {
  justify-content:center;
  gap:clamp(10px,.9vw,14px);
}

.hero__button--phone > span {
  flex:0;
  text-align:left;
}

/* =====================================================
   RESPONSIVE SMARTPHONE
===================================================== */

@media screen and (max-width:700px) {
  .section__home {
    position:relative;
    width:var(--w-container-size);
    height:auto;
    min-height:0;
    margin:clamp(100px,13vw,230px) auto var(--section-gap);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    background:#000;
    border:var(--border);
    overflow:hidden;
  }

  .section__home::after {
    content:none;
  }

  .hero__media {
    position:relative;
    inset:auto;
    order:1;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    flex:none;
    z-index:1;
    overflow:hidden;
  }

  .hero__background {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .content-flow {
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    order:2;
    z-index:3;
    width:100%;
    height:auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#000;
  }

  .content-copy {
    width:100%;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(32px,9vw,48px) clamp(18px,6vw,28px) clamp(38px,10vw,52px);
    text-align:center;
  }

  .hero__flow-text {
    width:100%;
    max-width:520px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    text-align:center;
  }

  .hero__eyebrow {
    width:clamp(160px,55vw,250px);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .hero__eyebrow-text {
    font-size:clamp(9px,2.6vw,12px);
    letter-spacing:3px;
  }

  .hero__main-title {
    width:100%;
    margin:0;
    font-size:clamp(18px,6.5vw,30px);
    line-height:.98;
    text-align:center;
  }

  .hero__main-title .text-rotator {
    width:100%;
    max-width:100%;
    margin:0 auto;
  }

  .hero__main-title .text-rotator > span {
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .hero__description {
    width:100%;
    max-width:360px;
    margin:10px 0 auto;
    font-size:clamp(12px,3.3vw,14px);
    line-height:1.55;
    text-align:center;
  }

  .hero__actions {
    width:100%;
    max-width:520px;
    margin:clamp(25px,7vw,35px) auto 0;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:center;
    gap:clamp(10px,3vw,18px);
  }

  .hero__button {
    flex:1;
    width:auto;
    justify-content:center;
  }
}

/* =====================================================
   PETITS SMARTPHONES
===================================================== */

@media screen and (max-width:420px) {
  .section__home {
    width:min(92vw,360px);
    height:auto;
    min-height:0;
    margin-top:clamp(80px,13vw,230px);
  }

  .hero__media {
    order:1;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
  }

  .hero__background {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .content-flow {
    order:2;
    width:100%;
    height:auto;
    min-height:0;
  }

  .content-copy {
    width:100%;
    height:auto;
    padding:28px 16px 34px;
  }

  .hero__flow-text {
    width:100%;
    max-width:100%;
    margin:0 auto;
    align-items:center;
    gap:13px;
    text-align:center;
  }

  .hero__eyebrow {
    width:min(72%,220px);
    margin:0 auto;
  }

  .hero__main-title {
    width:100%;
    font-size:clamp(15px,6vw,25px);
    text-align:center;
  }

  .hero__main-title .text-rotator > span {
    justify-content:center;
    text-align:center;
  }

  .hero__description {
    width:100%;
    max-width:100%;
    margin:0 auto;
    font-size:clamp(11px,3.5vw,13px);
    line-height:1.5;
    text-align:center;
  }

  .hero__actions {
    width:100%;
    max-width:100%;
    margin:24px auto 0;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:center;
    gap:8px;
  }

  .hero__button {
    flex:1;
    width:auto;
    justify-content:center;
  }
}

/* =====================================================
   TÉLÉPHONE PAYSAGE
===================================================== */

@media screen and (orientation:landscape) and (max-width:700px) and (max-height:500px) {
  .section__home {
    width:var(--w-container-size);
    height:auto;
    min-height:260px;
    margin-top:80px;
    display:grid;
    grid-template-columns:minmax(0,58%) minmax(0,42%);
    align-items:stretch;
  }

  .hero__media {
    position:relative;
    inset:auto;
    order:initial;
    grid-column:2;
    grid-row:1;
    width:100%;
    height:100%;
    min-height:260px;
    aspect-ratio:auto;
    overflow:hidden;
  }

  .hero__background {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .content-flow {
    position:relative;
    order:initial;
    grid-column:1;
    grid-row:1;
    width:100%;
    height:auto;
    min-height:260px;
    align-items:center;
    justify-content:center;
  }

  .content-copy {
    width:100%;
    height:auto;
    padding:18px 16px 20px;
    align-items:center;
    justify-content:center;
    text-align:left;
  }

  .hero__flow-text {
    width:100%;
    max-width:none;
    margin:0;
    align-items:flex-start;
    justify-content:center;
    gap:9px;
    text-align:left;
  }

  .hero__eyebrow {
    width:min(100%,210px);
    margin:0;
    justify-content:flex-start;
    gap:8px;
  }

  .hero__eyebrow-text {
    font-size:8px;
    letter-spacing:2.5px;
  }

  .hero__main-title {
    width:100%;
    font-size:clamp(17px,3.7vw,24px);
    line-height:.98;
    text-align:left;
  }

  .hero__main-title .text-rotator {
    width:100%;
    margin:0;
  }

  .hero__main-title .text-rotator > span {
    justify-content:flex-start;
    text-align:left;
  }

  .hero__description {
    width:100%;
    max-width:none;
    margin:4px 0 0;
    font-size:clamp(10px,1.9vw,12px);
    line-height:1.45;
    text-align:left;
  }

  .hero__actions {
    width:100%;
    max-width:none;
    margin:12px 0 0;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
  }

  .hero__button {
    flex:1;
    width:auto;
    justify-content:center;
  }
}