/* ============================================================
   PIF GADGET - page gadgets
   Trois rubriques du squelette : le nouveau gadget, les gadgets
   vintage (frise par numéro), les expériences. Commun : site.css.
   ============================================================ */

/* ---------- Le nouveau gadget ---------- */

/* Vignette BD : fond jaune de marque, trait encre, ombre décalée (comme
   le bandeau abonnement), photo du gadget penchée dans un cadre blanc
   qui déborde du haut et du bas, titre en capitales. */
.nouveau {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  background: var(--jaune);
  border: 2.5px solid var(--encre);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 40px) clamp(22px, 3.4vw, 48px);
  box-shadow: 6px 8px 0 var(--encre);
}

.nouveau__visuel img {
  display: block;
  width: 100%;
  height: auto;
  border: 5px solid var(--blanc);
  border-radius: 14px;
  background: var(--blanc);
  box-shadow: 0 3px 0 rgba(0,19,38,.12), 0 26px 44px -18px rgba(0,19,38,.55);
  rotate: -3deg;
  margin-block: calc(-1 * clamp(16px, 2.6vw, 36px));
}

.nouveau .kicker { margin-bottom: 12px; }

.nouveau h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.nouveau__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 12px 0 0;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .92rem;
  color: var(--encre);
}

.nouveau p { margin: 14px 0 0; max-width: 58ch; color: var(--encre); }

.nouveau__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.nouveau__actions .btn { padding: 14px 24px; font-size: .84rem; }
.nouveau__actions .btn--rouge { box-shadow: 0 12px 24px -10px rgba(206,16,10,.75); }

/* ---------- Cartes gadget (derniers gadgets, expériences) ---------- */

.gadgets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.gadget {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform .14s ease;
}

.gadget:hover { transform: translateY(-4px); }

.gadget__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #EEF1F5;
  overflow: hidden;
}

.gadget__media img { width: 100%; height: 100%; object-fit: cover; }

.gadget__media--contient { background: var(--blanc); }
.gadget__media--contient img { object-fit: contain; padding: 18px; }

/* pastille posée sur le visuel : « Vidéo », « Tuto », numéro… */
.gadget__etiquette {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--jaune);
  color: var(--encre);
  border: 1.5px solid var(--encre);
}

.gadget__etiquette--rouge { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); }

.gadget__corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 18px 20px;
}

.gadget__sous { font-family: var(--titre); font-size: .8rem; color: var(--encre-60); }

.gadget__titre { font-size: 1.05rem; font-weight: 600; line-height: 1.25; text-wrap: pretty; }

.gadget__extrait { margin: 0; font-size: .92rem; color: var(--encre-60); }

.gadget__lien {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rouge);
}

.gadget__lien:hover { text-decoration: underline; }

/* ---------- Frise vintage ---------- */

.frise {
  position: relative;
  /* la frise déborde des gouttières pour courir jusqu'aux bords ;
     +12 px à gauche pour que la première carte ne colle pas au bord */
  /* d'un bord à l'autre de l'écran, première carte alignée sur le contenu */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(calc(var(--gouttiere) + 12px), calc(50vw - 50% + 12px)) max(var(--gouttiere), calc(50vw - 50%));
  overflow-x: auto;
  scrollbar-width: none;
}

.frise::-webkit-scrollbar { display: none; }

.frise__piste {
  list-style: none;
  margin: 0;
  /* 50 px en haut : la place des pastilles de numéro (à -40 px des
     cartes), que la piste défilante ne doit pas rogner */
  padding: 50px 0 30px;
  display: flex;
  gap: 20px;
  width: max-content;
  position: relative;
}

/* La ligne du temps vit hors de la piste défilante, sur toute la
   largeur de la page : elle continue même en bout de frise. */
.frise-zone::before {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(50% - 50vw);
  width: 100vw;
  border-top: 3px dashed var(--encre-35);
  pointer-events: none;
}

/* la ligne dépasse du conteneur : la section la rogne pour qu'elle
   ne crée aucun défilement horizontal de la page */
#vintage { overflow-x: clip; }

.epoque {
  scroll-snap-align: start;
  flex: 0 0 240px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: visible;
  box-shadow: var(--ombre);
}

/* le numéro du magazine, accroché à la ligne du temps */
.epoque__numero {
  position: absolute;
  top: -40px;
  left: 16px;
  font-family: var(--titre);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
}

.epoque__media {
  aspect-ratio: 4 / 3;
  background: var(--blanc);
  border-radius: var(--rayon) var(--rayon) 0 0;
  overflow: hidden;
}

.epoque__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }

.epoque__corps { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.epoque__titre { font-size: .98rem; font-weight: 600; line-height: 1.25; }
.epoque__annee { font-family: var(--titre); font-size: .78rem; color: var(--encre-60); }

.frise-zone { position: relative; }
.frise-zone .fleches { top: -66px; right: 0; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  .nouveau { grid-template-columns: 1fr; box-shadow: 4px 6px 0 var(--encre); }
  .nouveau__visuel img { width: min(70%, 280px); margin: -8px auto 6px; rotate: -2deg; }
  .nouveau h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .nouveau__actions .btn { flex: 1; padding: 10px 12px; font-size: .68rem; line-height: 1.15; text-align: center; }
  .section__tete { align-items: start; }
  .frise-zone .fleches { position: static; transform: none; justify-content: flex-end; margin-bottom: 8px; pointer-events: auto; }
  .frise-zone .fleche { background: var(--blanc); }
  /* les flèches (46 px + 8 px de marge) passent au-dessus de la frise :
     la ligne du temps descend d'autant */
  .frise-zone::before { top: calc(25px + 54px); }
}

@media (max-width: 560px) {
  .gadgets { grid-template-columns: 1fr; gap: 14px; }
  .epoque { flex-basis: 200px; }
}