/* ==========================================================================
   06 · Pages
   ========================================================================== */

/* ---------- Accueil : app ---------- */
.accueil-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.accueil-app h2 { font: 600 32px/1.1 var(--display); margin: 8px 0 12px; }
@media (max-width: 860px) { .accueil-app { grid-template-columns: 1fr; } }

/* ---------- Faction ---------- */
.page-faction .hero-page { border-bottom: 3px solid var(--c); }
.faction-entete { display: flex; align-items: center; gap: 22px; }
.faction-entete img { width: 96px; height: 96px; object-fit: contain; flex: none; }
.page-faction .hero-page h1 { color: var(--c); }
.faction-devise { font: italic 400 21px/1.45 var(--display); color: var(--texte); margin: 18px 0 0; max-width: 46ch; }
.faction-corps { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
.faction-corps aside { border-left: 1px solid var(--ligne); padding-left: 28px; align-self: start; }
.faction-corps aside h2 { font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--texte-3); margin: 0 0 14px; }
.faction-corps aside ul { list-style: none; margin: 0 0 28px; padding: 0; }
.faction-corps aside li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--ligne); color: var(--texte); text-decoration: none; font: 600 17px/1.3 var(--display); }
.faction-corps aside li a:hover { color: var(--c); }
.faction-corps aside li small { display: block; font: 400 12px/1.4 var(--corps); color: var(--texte-3); }
@media (max-width: 860px) {
  .faction-corps { grid-template-columns: 1fr; }
  .faction-corps aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--ligne); padding-top: 24px; }
}

.leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.leader { display: grid; grid-template-columns: 180px minmax(0, 1fr); background: var(--surface); border-top: 2px solid var(--c); }
.leader .figure img { height: 100%; min-height: 260px; object-position: top; }
.leader .figure .badge-ia { top: 8px; right: 8px; font-size: 9px; }
.leader__texte { padding: 22px; }
.leader__titre { font: 500 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.leader h3 { font: 600 22px/1.15 var(--display); margin: 6px 0 10px; }
.leader p { font-size: 14px; color: var(--texte-2); margin: 0; }
@media (max-width: 960px) { .leaders { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .leader { grid-template-columns: 1fr; }
  .leader .figure img { min-height: 0; aspect-ratio: 4 / 3; }
}

.autres-factions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 720px) { .autres-factions { grid-template-columns: 1fr; } }

/* ---------- Quartiers ---------- */
.quartiers { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.quartier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--nuit); scroll-margin-top: calc(var(--entete) + 16px); }
.quartier:nth-child(even) .figure { order: 2; }
.quartier .figure img { height: 100%; min-height: 300px; }
.quartier__texte { padding: 36px 40px; align-self: center; }
.quartier__sous-titre { font: 500 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sang-clair); }
.quartier h2 { font: 600 30px/1.1 var(--display); margin: 6px 0 14px; }
.quartier p { color: var(--texte-2); font-size: 14.5px; }
.quartier .etiquette { margin-top: 6px; text-decoration: none; }
@media (max-width: 860px) {
  .quartier { grid-template-columns: 1fr; }
  .quartier:nth-child(even) .figure { order: 0; }
  .quartier .figure img { min-height: 0; aspect-ratio: 3 / 2; }
  .quartier__texte { padding: 26px 20px; }
}

.vignettes-quartiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vignette { position: relative; display: block; text-decoration: none; overflow: hidden; }
.vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.vignette:hover img { transform: scale(1.04); }
.vignette span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  background: linear-gradient(0deg, rgba(5,8,15,.95), transparent);
  font: 600 17px/1.2 var(--display); color: var(--texte);
}
@media (max-width: 860px) { .vignettes-quartiers { grid-template-columns: 1fr 1fr; } }

/* ---------- Application ---------- */
.fonction { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 48px; border-top: 1px solid var(--ligne); }
.fonction:first-of-type { border-top: 0; padding-top: 0; }
.fonction:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) 260px; }
.fonction:nth-of-type(even) .telephone { order: 2; }
.fonction h3 { font: 600 28px/1.1 var(--display); margin: 8px 0 12px; }
.fonction p { color: var(--texte-2); }
@media (max-width: 760px) {
  .fonction, .fonction:nth-of-type(even) { grid-template-columns: 1fr; gap: 28px; }
  .fonction:nth-of-type(even) .telephone { order: 0; }
}
.onglets-app { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.onglets-app > div { background: var(--nuit); padding: 22px; }
.onglets-app .surtitre { color: var(--texte-3); }
.onglets-app h3 { font: 600 22px/1.1 var(--display); margin: 8px 0 8px; }
.onglets-app p { font-size: 13.5px; color: var(--texte-2); margin: 0; }
@media (max-width: 860px) { .onglets-app { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .onglets-app { grid-template-columns: 1fr; } }

.installer { counter-reset: install; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.installer li { counter-increment: install; position: relative; padding-left: 38px; color: var(--texte-2); font-size: 14.5px; }
.installer li::before {
  content: counter(install); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border: 1px solid var(--sang); color: var(--sang-clair);
  font: 600 12px/22px var(--mono); text-align: center;
}
.installer b { color: var(--texte); }

/* ---------- Téléchargements ---------- */
.doc-vedette { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: center; background: var(--surface); padding: 28px; border-top: 3px solid var(--sang); }
.doc-vedette .figure img { aspect-ratio: 1 / 1.414; box-shadow: 0 20px 50px -20px #000; }
.doc-vedette h2 { font: 600 32px/1.1 var(--display); margin: 8px 0 10px; }
.doc-vedette p { color: var(--texte-2); }
@media (max-width: 760px) { .doc-vedette { grid-template-columns: 1fr; } .doc-vedette .figure { max-width: 220px; } }

.meta-doc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 20px; padding: 0; list-style: none; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.meta-doc li b { color: var(--texte-2); font-weight: 500; }

.docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--ligne); }
.doc h3 { font: 600 20px/1.2 var(--display); margin: 6px 0 4px; }
.doc p { color: var(--texte-2); font-size: 14px; margin: 0 0 6px; }
.doc .meta-doc { margin: 0; }
@media (max-width: 620px) { .doc { grid-template-columns: 1fr; } }

/* ---------- Journal ---------- */
.articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.article-carte { display: flex; flex-direction: column; background: var(--surface); text-decoration: none; color: inherit; transition: background-color .15s; }
.article-carte:hover { background: var(--surface-2); }
.article-carte .figure img { aspect-ratio: 16 / 10; object-position: top; }
.article-carte__texte { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.article-carte h2 { font: 600 22px/1.15 var(--display); }
.article-carte p { font-size: 13.5px; color: var(--texte-2); margin: 0; flex: 1; }
.article-meta { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); display: flex; gap: 12px; flex-wrap: wrap; }
.article-meta .cat { color: var(--sang-clair); }
@media (max-width: 960px) { .articles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .articles { grid-template-columns: 1fr; } }

.article-une { max-width: 900px; margin: 0 auto 40px; }
.article-une img { width: 100%; max-height: 460px; object-fit: cover; object-position: top; }
.article-une--capture img { max-height: 420px; width: auto; margin: 0 auto; border: 6px solid #1a2130; border-radius: 24px; }
.article-corps { max-width: 720px; margin: 0 auto; }
.article-corps .chapo { font: italic 400 22px/1.45 var(--display); color: var(--texte); margin-bottom: 28px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; }
.contact aside { display: grid; gap: 18px; align-content: start; }
.contact aside h2 { font: 600 22px/1.2 var(--display); margin: 0 0 8px; }
.contact aside p { color: var(--texte-2); font-size: 14px; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.kit-presse { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kit-presse a { background: var(--surface); padding: 18px; display: grid; gap: 10px; justify-items: center; text-decoration: none; color: var(--texte-2); font-size: 12.5px; text-align: center; }
.kit-presse a:hover { background: var(--surface-2); color: var(--texte); }
.kit-presse img { height: 72px; width: auto; object-fit: contain; }
@media (max-width: 720px) { .kit-presse { grid-template-columns: 1fr 1fr; } }

/* ---------- Boutique ---------- */
.rayons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rayon { background: var(--surface); padding: 26px; border-top: 1px solid var(--ligne); }
.rayon__icone { width: 44px; height: 44px; border: 1px solid var(--sang); display: grid; place-items: center; margin-bottom: 16px; }
.rayon__icone svg { width: 22px; height: 22px; stroke: var(--sang-clair); fill: none; stroke-width: 1.5; }
.rayon h3 { font: 600 22px/1.2 var(--display); margin: 0 0 8px; }
.rayon p { color: var(--texte-2); font-size: 14px; margin: 0 0 12px; }
.rayon ul { margin: 0; padding-left: 18px; color: var(--texte-2); font-size: 13.5px; }
.rayon li::marker { color: var(--sang); }
@media (max-width: 860px) { .rayons { grid-template-columns: 1fr; } }

/* ---------- Bêta ---------- */
.visuels-statut { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.visuels-statut figure { margin: 0; }
.visuels-statut img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.visuels-statut figcaption { font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: 8px; color: var(--texte-3); }
.statut-officiel { color: #8fd3a6; }
.statut-provisoire { color: var(--lunar); }

/* ---------- 404 ---------- */
.erreur { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.erreur img { width: 160px; margin: 0 auto 24px; border-radius: 50%; }
.erreur h1 { font: 600 44px/1.1 var(--display); margin: 14px 0 12px; }
.erreur p { margin: 0 auto 24px; color: var(--texte-2); }
.erreur .actions { justify-content: center; }

/* ---------- Légal ---------- */
.legal { max-width: 760px; }
.legal dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 20px; margin: 0 0 1em; }
.legal dt { color: var(--texte-3); font-size: 14px; }
.legal dd { margin: 0; color: var(--texte-2); font-size: 14px; }
@media (max-width: 620px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }