/* =====================================================================
   COMPOSANTS RÉUTILISABLES
   Grands visuels, cartes, sélections et sections communes.
   ===================================================================== */

/* 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:4.48px;
  font-size:13px
}

.hero h1{
  font:700 67px/.91 var(--police-titres);
  letter-spacing:-0.56px;
  margin:15px 0
}

.hero h2{
  font:600 21px var(--police-titres);
  margin:0 0 25px
}

.motto{
  display:flex;
  align-items:center;
  gap:18px;
  font:italic 17px var(--police-titres);
  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 var(--police-titres);
  margin:6px;
  text-align:center
}

.univers small{
  font:13px var(--police-titres);
  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:3.2px;
  color:#ff7cc0;
  margin:0 0 5px
}

.daily-section h2{
  font:700 34px var(--police-titres);
  margin:0
}

.daily-section time{
  text-transform:capitalize;
  color:#bfcce1;
  font:italic 15px var(--police-titres)
}

.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 var(--police-titres);
  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;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}

.share-button:hover,
.share-button:focus-visible{
  border-color:#ff75b8;
  box-shadow:0 10px 24px #0008,0 0 18px #ff4f9d33;
  transform:translateY(-2px)
}

/* 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 var(--police-titres)
}

/* ======================================================================
   PIED DE PAGE COMMUN
   Même structure et mêmes boutons de partage sur toutes les pages.
   ====================================================================== */
.site-footer {
  display: block;
  padding: 0;
  border-top: 1px solid rgba(239, 179, 83, .5);
  background:
    radial-gradient(circle at 18% 0, rgba(99, 29, 92, .38), transparent 34%),
    radial-gradient(circle at 86% 110%, rgba(28, 67, 130, .32), transparent 38%),
    #020a20;
  color: #fffaf4;
}

.site-footer-inner {
  width: min(1500px, 92%);
  margin: auto;
  padding: 52px 0 30px;
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(210px, .8fr) minmax(320px, 1.15fr);
  gap: 54px;
  align-items: start;
}

.site-footer-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  align-items: center;
}

.site-footer-heart {
  color: var(--pink);
  font: 58px/1 var(--police-titres);
  filter: drop-shadow(0 0 13px rgba(255, 91, 164, .22));
}

.site-footer-brand strong {
  display: block;
  font: italic 700 29.5px/1 var(--police-titres);
}

.site-footer-brand p {
  grid-column: 2;
  margin: -5px 0 0;
  color: #cdd5e8;
  font-size: 14px;
  line-height: 1.55;
}

.site-footer-nav strong,
.site-footer-sharing strong {
  display: block;
  margin-bottom: 17px;
  color: #f4c36f;
  font: 700 17px var(--police-titres);
  letter-spacing: 1.28px;
  text-transform: uppercase;
}

.site-footer-nav {
  display: grid;
  gap: 9px;
}

.site-footer-nav a {
  width: fit-content;
  color: #dce3f1;
  font-size: 14px;
  text-decoration: none;
}

.site-footer-nav a:hover {
  color: var(--pink);
}

.site-footer-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.footer-share-button {
  display: inline-flex;
  min-height: 43px;
  padding: 10px 15px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #5e79a5;
  border-radius: 999px;
  color: #fff;
  background: rgba(17, 31, 68, .82);
  font: 700 13px var(--police-textes);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.footer-share-button:hover,
.footer-share-button:focus-visible {
  border-color: var(--pink);
  background: #182b59;
  transform: translateY(-2px);
}

.footer-share-button[data-share="facebook"] {
  border-color: #3d7be0;
  background: #155bb9;
}

.footer-share-button[data-share="whatsapp"] {
  border-color: #35bd70;
  background: #167c48;
}

.footer-share-icon {
  font: 800 18px/1 Arial, sans-serif;
}

.site-footer-bottom {
  width: min(1500px, 92%);
  margin: auto;
  padding: 19px 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(102, 128, 173, .35);
  color: #aebbd2;
  font-size: 12px;
}

.site-footer-bottom p {
  margin: 0;
}

.site-footer-status {
  min-height: 20.8px;
  color: #ffd0e5;
}

@media (max-width: 860px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-footer-inner {
    width: calc(100% - 36px);
    padding: 37px 0 22px;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer-brand {
    grid-column: auto;
  }

  .site-footer-heart {
    font-size: 48px;
  }

  .site-footer-brand strong {
    font-size: 27px;
  }

  .site-footer-share-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-share-button {
    width: 100%;
    padding-inline: 10px;
  }

  .site-footer-bottom {
    width: calc(100% - 36px);
    padding-bottom: 20px;
    flex-direction: column;
    gap: 7px;
  }
}

.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)
}