/* Accueil : avancement des chantiers et bloc des réseaux (lot N2, D-619). Reprise de la maquette du lot N
   (maquettes/avancement_reseaux.css). Charte « Pixel aventure » : bords pleins en marches, aucune ombre floue.
   Aucun style en ligne : js/avancement.js ne pose que des classes, des attributs et du texte. */

/* ---------- avancement des chantiers ---------- */
.av { padding: 20px 0; }
.av-cadre { padding: 30px 34px 34px; }
.av-tete { display: flex; align-items: end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.av-tete h2 { font-size: 40px; margin-top: 12px; }
.av-tete .etiquette[hidden] + h2 { margin-top: 0; }
.av-releve { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px 9px; font: 800 15px/1.3 var(--corps); color: var(--texte); background: var(--encart); box-shadow: 0 0 0 3px var(--contour); }
.av-releve i { flex: none; width: 10px; height: 10px; background: var(--reussite); box-shadow: 0 0 0 2px #0F3A16; }
.av-releve.ancien { color: #3E2008; background: #FFD278; }
.av-releve.ancien i { background: var(--or-sombre); box-shadow: 0 0 0 2px var(--or-texte); }
.av-chapo { margin: 16px 0 26px; max-width: 680px; color: var(--encre2); }
.av-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 48px; }
.av-ligne { min-width: 0; }
.av-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 10px; }
.av-nom { font: 800 17px/1.3 var(--corps); color: var(--encre); min-width: 0; }
.av-pc { flex: none; font: 400 22px/1 var(--titre); color: #8A4F08; }  /* or foncé, 5,66:1 sur le panneau (lot M2) */
.fini .av-pc { font: 800 15px/1 var(--corps); color: #FFFFFF; background: #2E7A38; padding: 5px 8px 6px; }
.av-piste { position: relative; display: block; margin: 0 3px; box-shadow: 0 -3px 0 0 var(--contour), 0 3px 0 0 var(--contour), -3px 0 0 0 var(--contour), 3px 0 0 0 var(--contour); }
.av-piste::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(44, 30, 26, .28) calc(10% - 2px) 10%); }
.av-barre { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; border: 0; margin: 0; background: var(--piste-vide); color: var(--or); }
.av-barre::-webkit-progress-bar { background: var(--piste-vide); box-shadow: inset 0 4px 0 0 #343A4C; }
.av-barre::-webkit-progress-value { background: var(--or); box-shadow: inset 0 -5px 0 0 var(--or-sombre), inset 0 4px 0 0 var(--or-clair); }
.av-barre::-moz-progress-bar { background: var(--or); box-shadow: inset 0 -5px 0 0 var(--or-sombre), inset 0 4px 0 0 var(--or-clair); }
.fini .av-barre::-webkit-progress-value { background: var(--reussite); box-shadow: inset 0 -5px 0 0 #2E8A3A, inset 0 4px 0 0 #A6F0AE; }
.fini .av-barre::-moz-progress-bar { background: var(--reussite); box-shadow: inset 0 -5px 0 0 #2E8A3A, inset 0 4px 0 0 #A6F0AE; }

/* ---------- bloc des réseaux ---------- */
.rs { padding-top: 20px; }
.rs-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.rs-grille.avec-video { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rs h2 { font-size: 40px; margin-bottom: 12px; }
.rs-chapo { color: var(--encre2); max-width: 520px; }
.rs-liens { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.rs-liens li { display: flex; }
.rs-lien { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 12px; text-decoration: none; color: var(--encre); background: var(--panneau);
  box-shadow: 0 -3px 0 0 var(--contour), 0 3px 0 0 var(--contour), -3px 0 0 0 var(--contour), 3px 0 0 0 var(--contour), inset 0 -4px 0 0 #A8957A, inset 0 3px 0 0 #FFFFFF; }
a.rs-lien:hover { color: var(--encre); filter: brightness(1.05); }
a.rs-lien:focus-visible { outline: 3px solid var(--gratuit); outline-offset: 6px; }
/* Compte sans adresse pour l'instant (Facebook) : même tuile, à plat. */
.rs-sans-lien { box-shadow: 0 -3px 0 0 var(--contour), 0 3px 0 0 var(--contour), -3px 0 0 0 var(--contour), 3px 0 0 0 var(--contour); }
.rs-ico { flex: none; width: 36px; height: 36px; padding: 6px; color: #FFFFFF; background: var(--contour); shape-rendering: crispEdges; }
.rs-instagram .rs-ico { background: #B4356E; }
.rs-tiktok .rs-ico { background: #15182A; }
.rs-youtube .rs-ico { background: #C4302B; }
.rs-facebook .rs-ico { background: #1F5FA8; }
.rs-txt { display: flex; flex-direction: column; min-width: 0; }
.rs-txt b { font: 800 17px/1.2 var(--corps); }
.rs-txt small { font: 700 14px/1.3 var(--corps); color: var(--encre2); }

.rs-video h3 { font: 400 26px/1.1 var(--titre); margin-bottom: 14px; }
.rs-lecteur { position: relative; aspect-ratio: 16 / 9; background: var(--nuit); }
.rs-affiche, .rs-lecteur iframe { display: block; width: 100%; height: 100%; border: 0; }
.rs-affiche { object-fit: cover; }
.rs-jouer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; display: grid; place-items: center; border: 0; cursor: pointer; background: #C4302B;
  box-shadow: 0 -4px 0 0 var(--contour), 0 4px 0 0 var(--contour), -4px 0 0 0 var(--contour), 4px 0 0 0 var(--contour), inset 0 -6px 0 0 #7E1C18, inset 0 4px 0 0 #F07068; }
.rs-jouer::before { content: ""; width: 0; height: 0; border-left: 28px solid #FFFFFF; border-top: 17px solid transparent; border-bottom: 17px solid transparent; margin-left: 8px; }
.rs-jouer:focus-visible { outline: 3px solid var(--gratuit); outline-offset: 6px; }
.rs-lecteur iframe:focus-visible { outline: 3px solid var(--gratuit); outline-offset: 4px; }
.rs-titre-video { margin: 16px 0 4px; }
.rs-note { margin: 0 0 18px; font-size: 15px; color: var(--encre2); }
.rs-tout.btn.petit { min-height: 44px; margin-left: 3px; }

/* ---------- téléphone ---------- */
@media (max-width: 900px) {
  .rs-grille.avec-video { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 700px) {
  .av-liste { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 600px) {
  .av-cadre { padding: 22px 18px 26px; }
  .av-tete h2, .rs h2 { font-size: 30px; }
  .av-releve { font-size: 14px; }
  .av-chapo { margin: 14px 0 20px; }
  .av-nom { font-size: 16px; }
  .rs-liens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .rs-lien { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px 14px; }
  .rs-jouer { width: 72px; height: 72px; }
  .rs-jouer::before { border-left-width: 22px; border-top-width: 14px; border-bottom-width: 14px; }
}
@media (max-width: 359px) {
  .rs-liens { grid-template-columns: minmax(0, 1fr); }
  .rs-lien { flex-direction: row; align-items: center; }
}