/* Citizen Society — feuille de style commune à toutes les pages.
   Thème blanc, sans cadres : la barre de navigation est transparente en haut
   de page et apparaît quand on descend (classe .defile ajoutée par main.js). */

:root {
  --fond: #ffffff;
  --fond-doux: #f4f7fb;
  --texte: #0f1a2a;
  --texte-2: #5b6a80;
  --accent: #1f7fe0;
  --accent-clair: #e8f2fd;
  --ok: #22a06b;
  --hs: #d9534a;
  --illegal: #d9534a;
  --urgence: #d99a1e;
  --largeur: 1120px;
  --nav: 76px;
  --titre: "Archivo", system-ui, sans-serif;
  --corps: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }
body[data-page="404"] main { padding-top: var(--nav); }

a { color: inherit; }

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--titre);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.015em;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Navigation ---------- */

.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  color: #fff;
  background: transparent;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.entete.defile {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--texte);
  box-shadow: 0 1px 0 rgba(15, 26, 42, .06);
}

.entete.claire { color: var(--texte); }

.entete .conteneur {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav);
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.marque img { width: 30px; height: 30px; object-fit: contain; transition: filter .3s ease; }
.entete.defile .marque img, .entete.claire .marque img { filter: invert(1); }
.marque span { color: var(--accent); }
.entete:not(.defile):not(.claire) .marque span { color: #8cc4ff; }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav a {
  position: relative;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  opacity: .8;
  padding: 6px 0;
  transition: opacity .15s;
}

.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Lien Boutique : juste le texte en bleu (bleu clair sur l'image de l'accueil) */
.nav a.nav-boutique { color: var(--accent); opacity: 1; font-weight: 600; }
.entete:not(.defile):not(.claire) .nav a.nav-boutique { color: #8cc4ff; }
.nav a.nav-boutique:hover { opacity: .8; }

.menu-btn {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  width: 42px;
  height: 42px;
  cursor: pointer;
  padding: 0;
}

.menu-btn svg { width: 24px; height: 24px; }

@media (max-width: 820px) {
  .menu-btn { display: grid; place-items: center; }
  .nav {
    display: none;
    position: absolute;
    top: var(--nav);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 24px 20px;
    background: #fff;
    color: var(--texte);
    box-shadow: 0 12px 24px rgba(15, 26, 42, .08);
  }
  .nav.ouvert { display: flex; }
  .entete:has(.nav.ouvert) { background: #fff; color: var(--texte); }
  .entete:has(.nav.ouvert) .marque img { filter: invert(1); }
  .nav a { padding: 10px 0; font-size: 17px; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 8px;
  border: none;
  font-family: var(--corps);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s, opacity .15s;
}

.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-principal { background: var(--accent); color: #fff; }
.btn-principal:hover { background: #1a6fc4; }

.btn-texte { background: none; color: inherit; padding-left: 8px; padding-right: 8px; gap: 6px; }
.btn-texte:hover { opacity: .75; }

.btn:disabled { opacity: .6; cursor: wait; }

.lien-fleche {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
}

/* ---------- Accueil ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 120px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Fondu vers le blanc : l'image (et son assombrissement) devient transparente en bas,
   le blanc de la page apparaît dessous. Aucun pixel d'image au bord = aucune ligne. */
:root {
  --fondu: linear-gradient(0deg, transparent 0%, rgba(0,0,0,.04) 3%, rgba(0,0,0,.14) 6%, rgba(0,0,0,.29) 9%, rgba(0,0,0,.46) 12%, rgba(0,0,0,.62) 15%, rgba(0,0,0,.76) 18%, rgba(0,0,0,.87) 21%, rgba(0,0,0,.95) 24%, #000 27%);
}

.hero { background: #fff; }

/* Accueil : l'image remplit tout l'écran, le fondu est placé SOUS l'écran
   (zone --fondu-hero en plus de 100vh) et n'apparaît qu'en descendant. */
.hero {
  --fondu-hero: 220px;
  min-height: calc(100vh + var(--fondu-hero));
  min-height: calc(100svh + var(--fondu-hero));
  /* le texte reste centré dans la partie visible de l'écran */
  padding-bottom: calc(var(--fondu-hero) + 40px);
}

.hero + .section { padding-top: 40px; }

.hero-fonds, .hero::after {
  --f: var(--fondu-hero);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,.04) calc(var(--f) * .1), rgba(0,0,0,.14) calc(var(--f) * .2), rgba(0,0,0,.29) calc(var(--f) * .3), rgba(0,0,0,.46) calc(var(--f) * .4), rgba(0,0,0,.62) calc(var(--f) * .5), rgba(0,0,0,.76) calc(var(--f) * .6), rgba(0,0,0,.87) calc(var(--f) * .7), rgba(0,0,0,.95) calc(var(--f) * .8), #000 var(--f));
  mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,.04) calc(var(--f) * .1), rgba(0,0,0,.14) calc(var(--f) * .2), rgba(0,0,0,.29) calc(var(--f) * .3), rgba(0,0,0,.46) calc(var(--f) * .4), rgba(0,0,0,.62) calc(var(--f) * .5), rgba(0,0,0,.76) calc(var(--f) * .6), rgba(0,0,0,.87) calc(var(--f) * .7), rgba(0,0,0,.95) calc(var(--f) * .8), #000 var(--f));
}

.hero-fonds { position: absolute; inset: 0; z-index: -2; }

.hero-fonds img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease, transform 8s ease;
}

.hero-fonds img.actif { opacity: 1; transform: scale(1); }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,20,35,.45) 0%, rgba(10,20,35,.2) 30%, rgba(10,20,35,.3) 70%, rgba(10,20,35,0) 100%);
}

.statut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.statut .point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; }
.statut.en-ligne .point { background: #3ddc97; opacity: 1; }
.statut.hors-ligne .point { background: #ff7a70; opacity: 1; }

.hero h1 {
  margin-top: 18px;
  font-size: clamp(46px, 9vw, 116px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.hero h1 span { color: #8cc4ff; }

.hero .accroche {
  margin: 14px 0 0;
  font-family: var(--titre);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
}

.hero .intro { max-width: 540px; margin: 20px 0 0; font-size: 17px; opacity: .92; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }

.section { padding: 110px 0; }

.surtitre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; }
.section .chapeau { color: var(--texte-2); max-width: 600px; margin: 16px 0 0; font-size: 18px; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px 40px;
  margin-top: 56px;
}

.grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .grille-4 { grid-template-columns: 1fr; } }

/* « carte » = bloc de contenu, sans cadre ni fond */
.carte h3 { font-size: 21px; font-weight: 700; }
.carte p { color: var(--texte-2); margin: 10px 0 0; }

.carte-lien { display: flex; flex-direction: column; text-decoration: none; }
.carte-lien .fleche { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 15px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }

/* flèche SVG utilisée dans tous les liens « … → » */
.icone-fleche { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.carte-lien:hover .icone-fleche, .btn:hover .icone-fleche { transform: translateX(4px); }
.carte-lien:hover h3 { color: var(--accent); }

.numero {
  display: block;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 14px;
}

.galerie {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 230px 230px;
  gap: 14px;
  margin-top: 56px;
}

.galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.galerie img:first-child { grid-row: span 2; }

@media (max-width: 720px) {
  .galerie { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 140px 140px; }
  .galerie img:first-child { grid-column: span 2; grid-row: auto; }
}

.bandeau { background: transparent; }

/* ---------- Pages intérieures ---------- */

/* En-tête des pages : blanc, sans image, juste la typographie */
.page-tete {
  padding: calc(var(--nav) + 88px) 0 8px;
  color: var(--texte);
}

.page-tete + .section { padding-top: 64px; }

.page-tete h1 {
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.page-tete h1 span { color: var(--accent); }
.page-tete p { max-width: 560px; margin: 20px 0 0; font-size: 19px; color: var(--texte-2); }

@media (max-width: 640px) { .page-tete { padding-top: calc(var(--nav) + 48px); } }

.vide { text-align: center; padding: 40px 0; }
.vide h2 { font-size: clamp(28px, 4vw, 40px); }
.vide p { color: var(--texte-2); max-width: 460px; margin: 14px auto 0; font-size: 17px; }

/* News */

.news-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--texte-2);
}

.etiquette {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-meta .etiquette + time::before { content: "·"; margin-right: 14px; color: #c3ccd8; }

/* Liste : la dernière news en grand */
.news-une {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  text-decoration: none;
}

.news-une-image { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; }
.news-une-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.news-une:hover .news-une-image img { transform: scale(1.04); }

.news-une h2 { margin-top: 16px; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; transition: color .2s; }
.news-une:hover h2 { color: var(--accent); }
.news-une p { margin: 16px 0 0; font-size: 18px; color: var(--texte-2); }

.news-lire { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 600; color: var(--accent); }
.news-une:hover .icone-fleche, .news-ligne:hover .icone-fleche { transform: translateX(4px); }

@media (max-width: 820px) { .news-une { grid-template-columns: 1fr; gap: 24px; } }

/* Liste : les autres news, une par ligne comme un forum */
.archives-titre { display: flex; align-items: center; gap: 12px; margin-top: 96px; font-size: 26px; font-weight: 800; }
.archives-titre span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--fond-doux);
  font-family: var(--corps);
  font-size: 14px;
  font-weight: 700;
  color: var(--texte-2);
}

.news-liste { display: grid; margin-top: 20px; }

.news-ligne {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px;
  margin: 0 -18px;
  border-radius: 16px;
  text-decoration: none;
  transition: background .2s;
}

.news-ligne + .news-ligne { margin-top: 4px; }
.news-ligne:hover { background: var(--fond-doux); }
.news-ligne img { width: 148px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.news-ligne h3 { margin-top: 6px; font-size: 20px; font-weight: 700; }
.news-ligne p { margin: 6px 0 0; color: var(--texte-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-ligne-fleche { color: var(--accent); }

@media (max-width: 600px) {
  .news-ligne { grid-template-columns: 96px 1fr; gap: 16px; }
  .news-ligne img { width: 96px; }
  .news-ligne-fleche { display: none; }
}

/* Page d'une news */
.news-article { padding: calc(var(--nav) + 64px) 0 96px; }
.conteneur-etroit { max-width: 780px; }

.news-retour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texte-2);
  text-decoration: none;
}

.news-retour:hover { color: var(--texte); }
.news-retour:hover .icone-fleche { transform: translateX(-4px); }

.news-article h1 { margin-top: 18px; font-size: clamp(36px, 5.4vw, 60px); font-weight: 900; letter-spacing: -0.025em; }
.news-chapeau { margin: 20px 0 0; font-size: 20px; line-height: 1.55; color: var(--texte-2); }

.news-auteur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
}

.btn-copier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--fond-doux);
  color: var(--texte);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-copier svg { width: 16px; height: 16px; }
.btn-copier:hover { background: #e6edf5; }
.btn-copier.copie { background: #e3f6ec; color: var(--ok); }

.news-visuel { width: 100%; max-height: 520px; object-fit: cover; border-radius: 18px; margin-top: 48px; }

.news-texte { margin-top: 48px; font-size: 18px; line-height: 1.75; color: #2c3748; }
.news-texte p { margin: 0 0 20px; }
.news-texte h2 { margin: 44px 0 14px; font-size: 26px; font-weight: 800; }
.news-texte ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.news-texte li { position: relative; padding-left: 24px; }
.news-texte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Auteur et temps de lecture */
.auteur { display: flex; align-items: center; gap: 12px; }
.auteur-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 800;
}
.auteur strong { display: block; font-size: 15px; }
.auteur div span { display: block; font-size: 13px; font-weight: 500; color: var(--texte-2); }

/* Sommaire de la news (« Au programme ») */
.news-sommaire {
  margin-top: 48px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--fond-doux);
}

.news-sommaire > span {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-sommaire ol {
  counter-reset: s;
  margin: 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  column-gap: 24px;
}

.news-sommaire li { counter-increment: s; break-inside: avoid; padding: 3px 0; }
.news-sommaire a {
  display: flex;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
}
.news-sommaire a::before { content: counter(s, decimal-leading-zero); font-family: var(--titre); font-weight: 800; color: #b7c1ce; }
.news-sommaire a:hover { color: var(--accent); }

@media (max-width: 600px) { .news-sommaire ol { column-count: 1; } }

.news-texte h2 { scroll-margin-top: calc(var(--nav) + 24px); padding-top: 12px; }
.news-texte h3 { margin: 32px 0 10px; font-size: 19px; font-weight: 800; color: var(--accent); }
.news-texte strong { color: var(--texte); }

/* Chiffres clés */
.news-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 8px 0 28px;
}

.news-chiffres div { padding: 20px 18px; border-radius: 14px; background: var(--fond-doux); }
.news-chiffres strong { display: block; font-family: var(--titre); font-size: 30px; font-weight: 900; line-height: 1.1; color: var(--accent); }
.news-chiffres span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--texte-2); }

@media (max-width: 700px) { .news-chiffres { grid-template-columns: 1fr 1fr; } }

/* Encadré mis en avant */
.news-texte p.news-encadre {
  margin: 8px 0 24px;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--texte);
  color: #fff;
  font-family: var(--titre);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
}

/* Photos : une image seule prend la largeur du texte ; plusieurs images à la suite
   forment une galerie de vignettes carrées (ex. partie « Images » en bas d'une news).
   Un clic ouvre l'image en grand (news.js). */
.news-photo { margin: 28px 0; }
.news-photo img { display: block; width: 100%; border-radius: 12px; cursor: zoom-in; }
.news-photo figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--texte-2); }

.news-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}

.news-galerie .news-photo { margin: 0; }

.news-galerie .news-photo img {
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--fond-doux);
  transition: transform .2s ease, box-shadow .2s ease;
}

.news-galerie .news-photo img:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(15,26,42,.35); }

/* Image ouverte en grand */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(10, 16, 26, .88);
  cursor: zoom-out;
  animation: apparait .2s ease;
}

.visionneuse img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.visionneuse p { position: absolute; bottom: 20px; left: 0; right: 0; margin: 0; text-align: center; color: rgba(255,255,255,.8); font-size: 14px; }

@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

.news-suite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 72px;
}

.news-suite-lien {
  display: grid;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--fond-doux);
  text-decoration: none;
  transition: background .2s;
}

.news-suite-lien:hover { background: #e6edf5; }
.news-suite-lien span { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.news-suite-lien strong { font-size: 16px; }
.news-suite-lien.suivante { text-align: right; grid-column: 2; }

@media (max-width: 600px) { .news-suite { grid-template-columns: 1fr; } .news-suite-lien.suivante { grid-column: auto; } }

/* Règlement : Discord */

.discord .icone { width: 28px; height: 28px; margin-bottom: 18px; color: var(--accent); }
.discord .icone svg { width: 28px; height: 28px; }
.discord.illegal .icone { color: var(--illegal); }
.discord.urgence .icone { color: var(--urgence); }

/* Formulaire : champs soulignés, sans cadre */

.formulaire { max-width: 680px; }

/* Page Postuler : infos à gauche (fixées au défilement), formulaire à droite */
.postuler {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 88px;
  align-items: start;
}

.postuler-infos { position: sticky; top: calc(var(--nav) + 32px); }
.postuler-infos h2 { font-size: 24px; font-weight: 800; }

.etapes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 26px; }
.etapes li { display: grid; grid-template-columns: 36px 1fr; gap: 6px; }
.etape-num { font-family: var(--titre); font-weight: 800; font-size: 15px; color: var(--accent); line-height: 1.6; }
.etapes h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
.etapes p { margin: 4px 0 0; font-size: 15px; color: var(--texte-2); }

.lien-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
}

.lien-discord:hover .icone-fleche { transform: translateX(4px); }

.postuler-form .formulaire { max-width: none; }

fieldset { border: none; margin: 0 0 24px; padding: 0; min-width: 0; }

legend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin-bottom: 26px;
  font-family: var(--titre);
  font-size: 22px;
  font-weight: 800;
  color: var(--texte);
}

legend span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-clair);
  color: var(--accent);
  font-size: 14px;
}

.compteur { justify-self: end; font-size: 13px; color: #a3aebd; font-variant-numeric: tabular-nums; }
.compteur.presque { color: var(--urgence); }

input[aria-invalid="true"], textarea[aria-invalid="true"] { border-bottom-color: var(--hs); }

.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.envoi p { flex: 1 1 240px; margin: 0; font-size: 13px; color: var(--texte-2); }
.envoi .btn { padding: 16px 28px; }

.confirmation { padding: 24px 0; }
.confirmation svg { width: 48px; height: 48px; color: var(--ok); }
.confirmation h2 { margin-top: 20px; font-size: clamp(30px, 4vw, 42px); font-weight: 800; }
.confirmation p { margin: 14px 0 28px; font-size: 18px; color: var(--texte-2); max-width: 460px; }

@media (max-width: 900px) {
  .postuler { grid-template-columns: 1fr; gap: 56px; }
  .postuler-infos { position: static; }
}

.champ { display: grid; gap: 6px; margin-bottom: 30px; }

.champs-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 640px) { .champs-ligne { grid-template-columns: 1fr; gap: 0; } }

label { font-size: 14px; font-weight: 600; color: var(--texte-2); }
label small { font-weight: 400; }

input, textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--texte);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #d6dde7;
  border-radius: 0;
  padding: 10px 0;
  transition: border-color .15s;
}

textarea { min-height: 110px; resize: vertical; }

input:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); }

input::placeholder, textarea::placeholder { color: #a3aebd; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message-form { display: none; margin-bottom: 28px; font-weight: 600; }
.message-form.ok { display: block; color: var(--ok); }
.message-form.erreur { display: block; color: var(--hs); }

/* ---------- Règlement ---------- */

.lien-descendre { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.lien-descendre:hover .icone-fleche { transform: translateY(3px); }

.reglement-tete { max-width: 720px; }
.reglement-tete h2 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; }
.reglement-tete .version {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-clair);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.reglement-tete p { margin: 18px 0 0; font-size: 18px; color: var(--texte-2); }

.reglement-grille {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 72px;
}

/* Sommaire fixé à gauche pendant la lecture.
   Il ne dépasse jamais la hauteur de l'écran : il défile seul si besoin,
   et seul le règlement en cours de lecture est déplié. */
.sommaire {
  position: sticky;
  top: calc(var(--nav) + 16px);
  max-height: calc(100vh - var(--nav) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d6dde7 transparent;
  padding-right: 6px;
}

.sommaire-titre {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-2);
}

.sommaire ol { list-style: none; margin: 0; padding: 0; }
.sommaire-groupes { display: grid; gap: 4px; }
/* min-width: 0 : les titres sur une ligne ne doivent pas élargir le sommaire */
.sommaire-groupes > li, .groupe-chapitres, .groupe-chapitres li { min-width: 0; }
.sommaire { overflow-x: hidden; }

.groupe-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 800;
  color: var(--texte-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.groupe-num { font-size: 13px; color: #b7c1ce; transition: color .15s; }
.groupe-titre:hover { background: var(--fond-doux); color: var(--texte); }
.groupe.ouvert .groupe-titre { color: var(--texte); }
.groupe.ouvert .groupe-num { color: var(--accent); }

.groupe-chapitres { display: none !important; margin: 2px 0 10px !important; padding-left: 10px !important; border-left: 2px solid #edf1f6 !important; margin-left: 18px !important; }
.groupe.ouvert .groupe-chapitres { display: grid !important; gap: 1px; }

/* Règlements longs : chapitres sur 2 colonnes, le sommaire tient à l'écran sans défiler */
.groupe.ouvert .groupe-chapitres.deux-colonnes { display: block !important; column-count: 2; column-gap: 6px; }
.groupe-chapitres.deux-colonnes li { break-inside: avoid; }
.groupe-chapitres.deux-colonnes .sommaire-partie { break-after: avoid; }

/* une ligne par chapitre (titre complet au survol) : le sommaire reste court */
.groupe-chapitres a {
  display: block;
  padding: 4px 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texte-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.groupe-chapitres a span { display: inline-block; width: 22px; font-family: var(--titre); font-weight: 800; color: #b7c1ce; transition: color .15s; }
.groupe-chapitres a:hover { color: var(--texte); background: var(--fond-doux); }
.groupe-chapitres a.actif { color: var(--texte); background: var(--accent-clair); }
.groupe-chapitres a.actif span { color: var(--accent); }

.sommaire-partie {
  margin: 10px 0 2px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-2);
}

.reglement-texte { min-width: 0; max-width: 760px; }

.reglement-bloc { scroll-margin-top: calc(var(--nav) + 16px); }
.reglement-bloc + .reglement-bloc { margin-top: 160px; }
.reglement-bloc .reglement-tete { margin-bottom: 64px; }
.reglement-bloc .reglement-tete h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 900; letter-spacing: -0.025em; }

/* Intertitre de partie : bien séparé du chapitre qui suit */
.reglement-partie { margin: 120px 0 36px; scroll-margin-top: calc(var(--nav) + 24px); }
.reglement-partie span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.reglement-partie h3 { margin-top: 6px; font-size: clamp(24px, 3vw, 32px); font-weight: 900; }

.chapitre { scroll-margin-top: calc(var(--nav) + 24px); }
.chapitre + .chapitre { margin-top: 88px; }

.chapitre-tete { display: flex; align-items: baseline; gap: 18px; margin-bottom: 8px; }

.chapitre-num {
  font-family: var(--titre);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.chapitre-tete h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; }

.chapitre > p { margin: 16px 0 0; font-size: 17px; color: var(--texte-2); }

.article { margin-top: 40px; scroll-margin-top: calc(var(--nav) + 24px); }

.article h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.article-num {
  flex: none;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--fond-doux);
  font-family: var(--titre);
  font-size: 14px;
  font-weight: 800;
  color: var(--texte-2);
}

.article p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.7; color: #3a4659; }

.article > ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.article > ul li { position: relative; padding-left: 22px; color: #3a4659; }
.article > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Bloc « Exemples » */
.exemples {
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--fond-doux);
}

.exemples-titre {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.exemples ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.exemples li { position: relative; padding-left: 22px; color: #3a4659; }
.exemples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}

/* Phrase importante (sanction lourde) */
.article p.alerte {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fdeceb;
  color: #a8342b;
  font-weight: 600;
}

/* Disposition finale */
.disposition p { margin: 16px 0 0; font-size: 17px; color: var(--texte-2); }
.disposition p.conclusion {
  margin-top: 28px;
  padding: 28px 30px;
  border-radius: 18px;
  background: var(--texte);
  color: #fff;
  font-family: var(--titre);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.4;
}
.disposition em { font-size: 15px; }
.disposition p.note { font-size: 14px; font-style: italic; }

.groupe-chapitres a.sans-num { padding-left: 38px; }

/* Contenu des chapitres sans articles (règlement illégal) */
.chapitre > ul, .chapitre > ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chapitre > ul li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.65; color: #3a4659; }
.chapitre > ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.chapitre > ol, .article > ol { counter-reset: n; margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chapitre > ol li, .article > ol li { counter-increment: n; position: relative; padding-left: 40px; font-size: 16.5px; line-height: 1.65; color: #3a4659; }
.chapitre > ol li::before, .article > ol li::before {
  content: counter(n);
  position: absolute;
  left: 0;
  top: .1em;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fond-doux);
  font-family: var(--titre);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}

.chapitre > p:not([class]) { color: #3a4659; font-size: 16.5px; line-height: 1.7; }
.chapitre > p.alerte, .chapitre > p.sous-titre, .article > p.sous-titre { margin-top: 24px; }

p.sous-titre {
  font-family: var(--titre);
  font-size: 17px !important;
  font-weight: 800;
  color: var(--texte) !important;
}

.chapitre > p.alerte {
  padding: 16px 20px;
  border-radius: 14px;
  background: #fdeceb;
  color: #a8342b;
  font-weight: 600;
}

/* Tableaux du règlement (rançons, quotas) */
.tableau-regle { margin-top: 18px; overflow-x: auto; }
.tableau-regle table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tableau-regle th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2); padding: 0 16px 12px; }
.tableau-regle td { padding: 14px 16px; border-top: 1px solid #edf1f6; color: #3a4659; }
.tableau-regle td:first-child { font-weight: 600; color: var(--texte); }
.tableau-regle .droite { text-align: right; }
.tableau-regle tbody tr:nth-child(odd) td { background: var(--fond-doux); }
.tableau-regle tbody td:first-child { border-radius: 10px 0 0 10px; }
.tableau-regle tbody td:last-child { border-radius: 0 10px 10px 0; }
.tableau-regle td { border-top: none; }


@media (max-width: 900px) {
  .reglement-grille { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  /* Sur téléphone : sommaire en haut, uniquement les 4 règlements (les chapitres restent repliés) */
  .sommaire { position: static; max-height: none; overflow: visible; }
  .sommaire-groupes { grid-template-columns: 1fr 1fr; }
  .groupe.ouvert .groupe-chapitres { display: none !important; }
  .groupe-titre { background: var(--fond-doux); }
  .chapitre-num { font-size: 44px; }
}

/* ---------- Boutique ---------- */

.garanties {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 32px 0 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--texte);
}

.garanties li { display: inline-flex; align-items: center; gap: 10px; }
.garanties svg { width: 20px; height: 20px; color: var(--accent); flex: none; }

.message-boutique { margin-top: 40px; font-weight: 600; color: var(--hs); }
.message-boutique.ok { color: var(--ok); }

/* Offres */

.section-offres { padding-top: 64px; }

.offres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 880px;
  align-items: stretch;
}

@media (max-width: 760px) { .offres { grid-template-columns: 1fr; max-width: 540px; } }

.offre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 34px;
  border-radius: 22px;
  background: var(--fond-doux);
  transition: transform .3s ease, box-shadow .3s ease;
}

.offre:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(15,26,42,.25); }

/* Premium Plus : la formule mise en avant */
.offre-plus { background: var(--accent); color: #fff; }
.offre-plus:hover { box-shadow: 0 28px 56px -24px rgba(31,127,224,.55); }

/* À vie : carte sombre avec la ville en fond */
.offre-vie { background: #0d1726; color: #fff; }

.offre-fond {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .35;
  transition: transform .8s ease;
}

.offre-vie::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13,23,38,.15) 0%, rgba(13,23,38,.82) 45%, #0d1726 75%);
}

.offre-vie:hover .offre-fond { transform: scale(1.06); }

.offre-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.offre-icone {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  color: var(--accent);
}

.offre-icone svg { width: 22px; height: 22px; }
.offre-plus .offre-icone, .offre-vie .offre-icone { background: rgba(255,255,255,.16); color: #fff; }

.offre-type {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fff;
  color: var(--accent);
}

.offre-plus .offre-type { background: #fff; color: var(--accent); }
.offre-populaire { display: inline-flex; align-items: center; gap: 6px; }

.offre-detail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--texte-2);
}

.offre-plus .offre-detail { color: rgba(255,255,255,.85); }
.offre-detail:hover .icone-fleche { transform: translateY(3px); }
#comparatif { scroll-margin-top: var(--nav); }
.offre-populaire svg { width: 13px; height: 13px; color: #f2994a; }
.offre-vie .offre-type { background: #f2b53c; color: #3d2600; }

.offre h3 { margin-top: 28px; font-size: 30px; font-weight: 800; }
.offre-desc { margin: 10px 0 0; color: var(--texte-2); font-size: 16px; min-height: 3.3em; }
.offre-plus .offre-desc { color: rgba(255,255,255,.85); }
.offre-vie .offre-desc { color: rgba(255,255,255,.75); }

.offre-prix {
  margin: 26px 0 0;
  font-family: var(--titre);
  font-size: 54px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* la période passe sous le prix : même hauteur sur les 3 cartes, boutons alignés */
.offre-prix small {
  display: block;
  margin-top: 8px;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texte-2);
}

.offre-plus .offre-prix small { color: rgba(255,255,255,.8); }
.offre-vie .offre-prix small { color: rgba(255,255,255,.65); }
.offre-prix.a-venir { font-size: 26px; font-weight: 800; letter-spacing: 0; color: var(--texte-2); }

.btn-offre {
  width: 100%;
  margin-top: 26px;
  padding: 16px 24px;
  background: var(--texte);
  color: #fff;
}

.btn-offre:hover { background: #22324a; }
.offre-plus .btn-offre { background: #fff; color: var(--accent); }
.offre-plus .btn-offre:hover { background: #eaf3fd; }
.offre-vie .btn-offre { background: #f2b53c; color: #3d2600; }
.offre-vie .btn-offre:hover { background: #f6c561; }

.rentabilite {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
}

.rentabilite strong { display: block; margin-bottom: 2px; font-size: 15px; color: #fff; }

.avantages { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; font-size: 15px; }
.avantages:empty { display: none; }
.avantages li { position: relative; padding-left: 28px; }
.avantages strong { font-weight: 700; }

/* coche ronde */
.avantages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-clair);
}

.avantages li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(.2em + 5px);
  width: 6px;
  height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.offre-plus .avantages li::before, .offre-vie .avantages li::before { background: rgba(255,255,255,.18); }
.offre-plus .avantages li::after { border-color: #fff; }
.offre-vie .avantages li::after { border-color: #f2b53c; }

/* Tableau comparatif */

.tableau-defile { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.comparatif { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }

.comparatif th, .comparatif td { padding: 16px 18px; text-align: center; }
.comparatif tbody th { text-align: left; font-weight: 500; color: var(--texte-2); }
.comparatif thead th { font-family: var(--titre); font-size: 18px; font-weight: 800; padding-bottom: 20px; }
.comparatif tbody tr + tr th, .comparatif tbody tr + tr td { border-top: 1px solid #edf1f6; }
.comparatif td { font-weight: 600; }
.comparatif td small { display: block; font-size: 12px; font-weight: 500; color: var(--texte-2); }
.comparatif .non { color: #b7c1ce; font-weight: 400; }
.comparatif .oui { color: var(--accent); }

.comparatif .col-plus { background: var(--accent-clair); }
.comparatif thead .col-plus { color: var(--accent); border-radius: 14px 14px 0 0; }
.comparatif tbody tr:last-child .col-plus { border-radius: 0 0 14px 14px; }
.comparatif tbody .col-plus { border-top-color: #d7e8fb !important; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Citizen Coin (img/citizencoin.png et img/citizencoin-piece.png) */

.piece { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(15,26,42,.18)); }

.coin-titre {
  width: 220px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 14px 20px rgba(15,26,42,.16));
  animation: coin-flotte 4s ease-in-out infinite;
}

@keyframes coin-flotte {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) { .coin-titre { animation: none; } }

/* Coins */

.coins-tete { display: flex; align-items: center; gap: 32px; }
.coins-tete .chapeau { margin-top: 10px; }

@media (max-width: 640px) { .coins-tete { flex-direction: column; align-items: flex-start; gap: 20px; } .coin-titre { width: 160px; } }

.coins-zone { margin-top: 48px; }

.packs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 760px) { .packs { grid-template-columns: repeat(2, 1fr); } }

.pack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px 22px;
  border: none;
  border-radius: 18px;
  background: var(--fond-doux);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}

.pack:hover { transform: translateY(-3px); background: #eaf0f7; }

.pack-pieces { display: flex; height: 40px; margin-bottom: 18px; }
.pack-pieces .piece + .piece { margin-left: -22px; }

.pack strong { font-family: var(--titre); font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.pack-legende { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--texte-2); }
.pack-prix { margin-top: 18px; font-size: 16px; font-weight: 700; color: var(--accent); }

.pack[aria-checked="true"] { background: var(--accent); color: #fff; transform: translateY(-3px); }
.pack[aria-checked="true"] .pack-legende { color: rgba(255,255,255,.8); }
.pack[aria-checked="true"] .pack-prix { color: #fff; }

.coins-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  margin-top: 40px;
}

.montant-libre label { display: block; margin-bottom: 10px; }

.stepper { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; }

.stepper button {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 12px;
  background: var(--fond-doux);
  color: var(--texte);
  cursor: pointer;
  transition: background .15s;
}

.stepper button:hover { background: #e6edf5; }
.stepper button svg { width: 18px; height: 18px; }

.stepper input {
  text-align: center;
  font-family: var(--titre);
  font-size: 24px;
  font-weight: 800;
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.montant-aide { margin: 8px 0 0; font-size: 13px; color: var(--texte-2); }
.montant-aide.erreur { color: var(--hs); }

.coins-total { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.total-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); }
.total-texte p { margin: 4px 0 0; font-size: 18px; color: var(--texte-2); }
.total-texte strong { font-family: var(--titre); font-size: 32px; font-weight: 900; color: var(--texte); }
.total-sep { margin: 0 4px; }

.btn-grand { padding: 18px 30px; font-size: 16px; }

@media (max-width: 640px) {
  .coins-bas, .coins-total { flex-direction: column; align-items: stretch; }
  .stepper { width: 100%; }
}

/* FAQ */

.section:has(.faq) { padding-top: 40px; }
.faq { max-width: 760px; }
.faq h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 20px; }

.faq details { padding: 20px 0; }
.faq details + details { border-top: 1px solid #edf1f6; }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--texte-2);
  border-bottom: 2px solid var(--texte-2);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { margin: 12px 0 0; color: var(--texte-2); max-width: 640px; }
.faq a { color: var(--accent); font-weight: 600; text-decoration: none; }

.btn[aria-busy="true"] { opacity: .6; cursor: wait; }

/* ---------- Pied de page ---------- */

.pied { padding: 40px 0 48px; color: var(--texte-2); font-size: 14px; background: var(--fond); }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.pied nav { display: flex; flex-wrap: wrap; gap: 24px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--texte); }

@media (max-width: 640px) {
  .conteneur { padding: 0 16px; }
  .section { padding: 72px 0; }
  .hero { padding-bottom: 56px; }
  .hero-actions .btn-principal { flex: 1 1 100%; }
  .nav { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Boutique : habillage ---------- */

/* Image de la ville sur tout le fond de la page, sous un voile blanc.
   --voile : opacité du blanc (plus haut = image plus discrète). */
body[data-page="boutique"] {
  --voile: .86;
  background: transparent;
}

html:has(body[data-page="boutique"]) { background: #fff; }

body[data-page="boutique"]::before,
body[data-page="boutique"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body[data-page="boutique"]::before { background: url("/img/ville-2.jpg") center / cover no-repeat; z-index: -2; }
body[data-page="boutique"]::after { background: rgba(255, 255, 255, var(--voile)); }

body[data-page="boutique"] .pied { background: transparent; }

/* Cartes et vignettes en verre dépoli léger pour laisser deviner le fond */
body[data-page="boutique"] .offre-premium,
body[data-page="boutique"] .pack:not([aria-checked="true"]),
body[data-page="boutique"] .stepper button,
body[data-page="boutique"] .faq,
body[data-page="boutique"] .tableau-defile {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body[data-page="boutique"] .faq,
body[data-page="boutique"] .tableau-defile { padding: 28px 32px; border-radius: 20px; }

body[data-page="boutique"] .pack:not([aria-checked="true"]):hover { background: rgba(255, 255, 255, .92); }

.offres-tete { margin-bottom: 32px; }
.offres-tete h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }

/* Pièces décoratives qui flottent derrière la partie coins */
.section-coins { position: relative; overflow: hidden; }

.coins-deco img {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  filter: blur(1px) drop-shadow(0 10px 18px rgba(15,26,42,.15));
  animation: coin-flotte 6s ease-in-out infinite;
}

.coins-deco img:nth-child(1) { width: 90px; top: 40px; right: 6%; }
.coins-deco img:nth-child(2) { width: 56px; top: 46%; right: 18%; animation-delay: -2s; opacity: .35; }
.coins-deco img:nth-child(3) { width: 72px; bottom: 50px; left: 3%; animation-delay: -4s; opacity: .3; }

.section-coins .conteneur { position: relative; z-index: 1; }

@media (max-width: 760px) { .coins-deco img:nth-child(2) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .coins-deco img { animation: none; }
}