/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVES — bloc compact de l'accueil + pages dediees
   Pose le 29/09/2026.

   Se pose PAR-DESSUS /assets/site.css, qui apporte le fond, la palette et les
   composants communs (.page, .sky, .mod, .blk, .news-top, .hl, .prix*,
   .frame--cam...). Rien n'est redefini ici de ce qui existe deja la-bas :
   une page d'archive doit rester identique a l'accueil au pixel pres.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. BLOC COMPACT DE L'ACCUEIL ═══════════════════════════════════════════
   Remplace le 29/09/2026 les fiches d'actu qui vivaient dans #archives.
   Le bloc ne liste plus que des mois : le contenu est parti dans les pages
   dediees. Taille d'un petit module, pas d'une section. */
.arch-compact{padding:.85rem 1rem}
.arch-compact .arch-lead{
  font-size:.74rem;line-height:1.5;color:var(--txt-soft);margin:0 0 .6rem;
}
.arch-list{list-style:none;margin:0;padding:0}
.arch-list li{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.42rem 0;border-bottom:1px solid var(--line-soft);
}
.arch-list li:last-child{border-bottom:0}
.arch-list .m{
  font-weight:700;font-size:.82rem;color:var(--txt);
  flex:1;min-width:8rem;
}
.arch-list .arch-go{display:flex;gap:.4rem;flex-wrap:wrap}
.arch-list .arch-go a{
  display:inline-block;text-decoration:none;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.2rem .68rem;border-radius:999px;
  border:1px solid var(--line);color:var(--txt);
  background:rgba(10,1,24,.55);
  transition:border-color .15s,color .15s,background .15s;
}
.arch-list .arch-go a:hover,
.arch-list .arch-go a:focus-visible{
  border-color:var(--mag);color:#fff;background:rgba(255,46,151,.14);
}
.arch-list .arch-go a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* La pastille Gaming se distingue de la pastille Tech sans couleur nouvelle. */
.arch-list .arch-go a.g:hover,
.arch-list .arch-go a.g:focus-visible{border-color:var(--cyan);background:rgba(5,217,232,.14)}

/* ══ 2. PAGES DEDIEES ═══════════════════════════════════════════════════════ */
/* Colonne de lecture bornee. Sans ce plafond, sur un ecran de 1440 px le texte
   s'etirait sur toute la largeur (lignes illisibles) et la webcam, qui tient
   son ratio 16/9 de sa largeur, montait a plus de 700 px de haut. */
.arch-page{position:relative;z-index:1;padding-bottom:3rem;max-width:900px;margin:0 auto}

.arch-hd{padding:1.6rem 0 1rem}
.arch-back{
  display:inline-block;text-decoration:none;
  font-size:.76rem;font-weight:700;letter-spacing:.03em;
  color:var(--txt);background:rgba(10,1,24,.7);
  border:1px solid var(--line);border-radius:999px;padding:.34rem .8rem;
  transition:border-color .15s,color .15s,background .15s;
}
.arch-back:hover,.arch-back:focus-visible{border-color:var(--mag);color:#fff;background:rgba(255,46,151,.14)}
.arch-back:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.arch-ident{margin-top:1rem}
.arch-kicker{
  margin:0 0 .2rem;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);
}
.arch-page h1{
  margin:0;font-size:clamp(1.3rem,5vw,2rem);font-weight:800;letter-spacing:-.01em;color:#fff;
  text-shadow:0 0 8px var(--mag),0 0 18px var(--cyan);
}
.arch-sub{margin:.45rem 0 0;font-size:.82rem;line-height:1.55;color:var(--txt-soft);max-width:60ch}

/* navigation entre mois */
.arch-nav{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:1rem 0 1.4rem;
}
.arch-nav--bas{margin:1.8rem 0 0}
.arch-nav-btn{
  text-decoration:none;font-size:.74rem;font-weight:700;
  color:var(--txt);background:rgba(10,1,24,.7);
  border:1px solid var(--line);border-radius:999px;padding:.32rem .78rem;
  transition:border-color .15s,color .15s,background .15s;
}
.arch-nav-btn:hover:not([aria-disabled="true"]),
.arch-nav-btn:focus-visible{border-color:var(--mag);color:#fff;background:rgba(255,46,151,.14)}
.arch-nav-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.arch-nav-btn[aria-disabled="true"]{opacity:.32;pointer-events:none}
.arch-nav-other{flex:1;min-width:.5rem;font-size:.74rem;color:var(--txt-soft);text-align:center}
.arch-nav-other a{color:var(--cyan)}

/* contenu */
#archMain{display:grid;gap:var(--gap);min-width:0}
#archMain > *{min-width:0}

/* etat vide — jamais une fausse page de contenu */
.arch-empty{
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);
  padding:1.4rem 1.2rem;text-align:center;
}
.arch-empty h2{margin:0 0 .5rem;font-size:1.05rem;color:#fff}
.arch-empty p{margin:.4rem auto 0;max-width:52ch;font-size:.82rem;line-height:1.6;color:var(--txt-soft)}
.arch-empty .arch-empty-go{
  display:inline-block;margin-top:1rem;text-decoration:none;
  font-size:.76rem;font-weight:700;color:var(--txt);
  border:1px solid var(--line);border-radius:999px;padding:.34rem .9rem;
  background:rgba(10,1,24,.55);
}
.arch-empty .arch-empty-go:hover{border-color:var(--mag);color:#fff}

/* note de bas de fiche */
.arch-note{
  margin-top:.7rem;padding-top:.55rem;border-top:1px solid var(--line-soft);
  font-size:.74rem;line-height:1.5;color:var(--txt-soft);
}

.arch-fallback{
  font-size:.8rem;line-height:1.6;color:var(--txt-soft);
  border:1px dashed var(--line);border-radius:var(--radius);padding:1rem;margin:0;
}
.arch-foot{
  margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--line-soft);
  font-size:.74rem;line-height:1.6;color:var(--txt-soft);
}
.arch-foot p{margin:0}

/* ══ 3. TELEPHONE ══════════════════════════════════════════════════════════
   Aucune largeur fixe nulle part : rien ne peut provoquer de defilement
   horizontal. Le tableau du module des prix est le seul element qui puisse
   depasser ; site.css le gere deja, on ajoute seulement la securite. */
.arch-page table{max-width:100%}
.arch-page img,.arch-page svg,.arch-page iframe{max-width:100%}

@media (max-width:640px){
  .arch-hd{padding:1.1rem 0 .8rem}
  .arch-nav{gap:.4rem}
  .arch-nav-btn{font-size:.71rem;padding:.3rem .66rem}
  .arch-nav-other{flex-basis:100%;order:3;text-align:left;margin-top:.2rem}
  .arch-list li{gap:.4rem}
  .arch-list .m{flex-basis:100%;min-width:0}
}