/* ======================================================================
   VARIABLES ET RÈGLES GÉNÉRALES
   ====================================================================== */
:root{
  --navy:#020d29;
  --panel:#101b43;
  --pink:#ff5dac;
  --violet:#a865ff;
  --blue:#74baff;
  --line:#55729e;
  --white:#f8f4ff
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:"DM Sans",sans-serif
}

a{
  color:inherit
}

/* Texte uniquement destiné aux lecteurs d’écran. */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0
}

/* En-tête principal et navigation. */
.topbar{
  height:76px;
  padding:0 3%;
  display:flex;
  align-items:center;
  gap:28px;
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  background:rgba(1,9,30,.72);
  border-bottom:1px solid #b84fbd55;
  backdrop-filter:blur(10px)
}

.logo{
  display:flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  min-width:330px
}

.logo i{
  font:50px/1 "Playfair Display";
  color:var(--pink)
}

.logo b{
  display:block;
  font:italic 600 25px/1 "Playfair Display"
}

.logo small{
  display:block;
  font-size:12px;
  color:#cbd5e8
}

.topbar nav{
  display:flex;
  justify-content:center;
  gap:26px;
  flex:1
}

.topbar nav a{
  text-decoration:none;
  font:600 13px "Playfair Display"
}

.topbar nav a:hover{
  color:var(--pink)
}

.search{
  height:42px;
  width:310px;
  border:1px solid #c647c8;
  border-radius:24px;
  display:flex;
  background:#071433aa
}

.search input{
  border:0;
  background:transparent;
  color:#fff;
  outline:0;
  padding:0 18px;
  flex:1;
  min-width:0
}

.search button{
  border:0;
  background:transparent;
  color:#fff;
  font-size:24px;
  padding:0 14px
}

.menu{
  display:none
}

/* Grand visuel d’accueil. */
.hero{
  height:460px;
  position:relative;
  background:url("../images/accueil/hero-collage.webp") center/cover no-repeat
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#020d29ee 0%,#020d29aa 35%,transparent 62%)
}

.hero-copy{
  position:absolute;
  z-index:2;
  left:4.2%;
  top:125px
}

.hero-copy>p{
  letter-spacing:.28em;
  font-size:13px
}

.hero h1{
  font:700 clamp(52px,5vw,82px)/.91 "Playfair Display";
  letter-spacing:-.035em;
  margin:15px 0
}

.hero h2{
  font:600 21px "Playfair Display";
  margin:0 0 25px
}

.motto{
  display:flex;
  align-items:center;
  gap:18px;
  font:italic 17px "Playfair Display";
  color:#d6cae6
}

.motto-line{
  display:inline-block;
  flex:0 0 auto;
  width:65px;
  height:3px;
  background:var(--pink);
  vertical-align:middle
}

.motto-words{
  display:flex;
  flex-wrap:wrap;
  gap:4px 9px
}

.motto-words>span:not(:last-child)::after{
  content:" •";
  margin-left:9px
}

/* Cartes des rubriques. */
.univers{
  position:relative;
  z-index:3;
  margin:-35px auto 0;
  width:96%;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:13px
}

.univers a{
  height:152px;
  border:1px solid #6381ad;
  border-radius:17px;
  background:linear-gradient(145deg,#2b234ba8,#081738eb);
  backdrop-filter:blur(15px);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 35px #0006;
  transition:.2s
}

.univers a:hover{
  transform:translateY(-5px);
  border-color:var(--pink)
}

.univers i{
  font-style:normal;
  font-size:28px;
  color:#ff78bd
}

.univers a:nth-child(2) i{
  color:#9ce47d
}

.univers a:nth-child(5) i,
.univers a:nth-child(6) i{
  color:#8dc9ff
}

.univers b{
  font:700 20px "Playfair Display";
  margin:6px;
  text-align:center
}

.univers small{
  font:13px "Playfair Display";
  color:#d6d8e8;
  text-align:center
}

.univers em{
  font-style:normal;
  font-size:20px;
  margin-top:9px
}

/* Sélection quotidienne des quatre images. */
.daily-section{
  padding:52px 2.2% 60px;
  background:radial-gradient(circle at 52% -20%,#42164c 0,transparent 37%),#020d29
}

.daily-section>header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:0 auto 22px;
  max-width:1700px
}

.daily-section header p{
  font-size:12px;
  letter-spacing:.2em;
  color:#ff7cc0;
  margin:0 0 5px
}

.daily-section h2{
  font:700 34px "Playfair Display";
  margin:0
}

.daily-section time{
  text-transform:capitalize;
  color:#bfcce1;
  font:italic 15px "Playfair Display"
}

.daily-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1700px;
  margin:auto
}

.daily-card{
  position:relative;
  overflow:hidden;
  border:1px solid #5877a4;
  border-radius:15px;
  background:#101b43;
  box-shadow:0 16px 35px #0007
}

.daily-image{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1800/945;
  object-fit:contain;
  transition:.25s
}

.daily-card:hover .daily-image{
  transform:scale(1.02)
}

.daily-card>span{
  position:absolute;
  z-index:2;
  top:12px;
  left:12px;
  padding:7px 11px;
  border-radius:18px;
  background:linear-gradient(135deg,#eb3a8b,#8d4eff);
  font:700 11px "Playfair Display";
  text-transform:uppercase
}

.share-button{
  position:absolute;
  right:10px;
  bottom:10px;
  border:1px solid #ffffff88;
  border-radius:18px;
  background:#061431dd;
  color:#fff;
  padding:8px 12px;
  font-weight:700;
  cursor:pointer
}

.share-button:hover{
  background:var(--pink)
}

/* Pied de page et notifications. */
footer{
  padding:25px 4%;
  display:grid;
  grid-template-columns:auto 1fr 1fr 1fr;
  gap:32px;
  align-items:center;
  border-top:1px solid #4b638d;
  background:#01091d;
  color:#bdc9dc;
  font:13px/1.5 "Playfair Display"
}

.foot-love{
  font-size:42px;
  color:var(--pink)
}

footer p:last-child{
  text-align:right
}

.toast{
  position:fixed;
  z-index:50;
  bottom:20px;
  left:50%;
  transform:translate(-50%,20px);
  opacity:0;
  padding:11px 20px;
  border-radius:22px;
  background:var(--pink);
  transition:.2s
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0)
}

/* Adaptation pour les tablettes. */
@media(max-width:1280px){
  .topbar nav{
    gap:15px
  }

  .logo{
    min-width:280px
  }

  .search{
    width:230px
  }

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

  .daily-grid{
    grid-template-columns:repeat(2,1fr)
  }


}

/* Adaptation pour les téléphones. */
@media(max-width:760px){
  .topbar{
    height:67px;
    padding:0 15px
  }

  .logo{
    min-width:auto
  }

  .logo i{
    font-size:37px
  }

  .logo b{
    font-size:19px
  }

  .logo small{
    font-size:10px
  }

  .menu{
    display:block;
    margin-left:auto;
    color:#fff;
    background:none;
    border:0;
    font-size:25px
  }

  .topbar nav{
    display:none;
    position:absolute;
    top:66px;
    left:10px;
    right:10px;
    flex-direction:column;
    padding:14px;
    background:#061331;
    border:1px solid #604a91;
    border-radius:14px
  }

  .topbar nav.open{
    display:flex
  }

  .search{
    display:none
  }

  .hero{
    height:530px;
    background-position:60% center
  }

  .hero-overlay{
    background:linear-gradient(90deg,#020d29f2,#020d2966),linear-gradient(0deg,#020d29dd,transparent 50%)
  }

  .hero-copy{
    left:22px;
    right:20px;
    top:120px
  }

  .hero h1{
    font-size:53px
  }

  .hero h2{
    font-size:18px;
    max-width:370px
  }

  .motto{
    font-size:14px
  }

  .univers{
    grid-template-columns:repeat(2,1fr);
    margin-top:-28px
  }

  .univers a{
    height:120px
  }

  .daily-section{
    padding:42px 14px
  }

  .daily-section time{
    display:none
  }

  .daily-grid{
    grid-template-columns:1fr
  }

  .daily-section h2{
    font-size:29px
  }

  footer{
    grid-template-columns:1fr;
    text-align:center
  }

  footer p:last-child{
    text-align:center
  }


}