/* Guildmaster, site de présentation. Même direction que la refonte claire de l'appli : fond gris-bleu, cartes blanches,
   un seul bleu d'action, Noto Serif pour les titres, Figtree pour le texte. Aucune couleur marron, ocre ou or dans l'interface :
   la couleur chaude vient seulement des illustrations peintes. */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('assets/polices/Figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('assets/polices/Figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Noto Serif embarquée (police variable, graisses 600 et 700 utilisées ; OFL 1.1, assets/polices/OFL-NotoSerif.txt) :
   plus aucune requête vers Google Fonts (accord du porteur du projet, 23/10/2026). */
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/polices/NotoSerif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/polices/NotoSerif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fond: #EAEEF5;
  --fond-2: #F4F6FA;
  --carte: #FFFFFF;
  --trait: #D3DAE5;
  --texte: #16202E;
  --texte-2: #45526A;
  --texte-3: #56637A;
  --action: #2457B5;
  --action-presse: #1C4693;
  --action-clair: #DCE7F8;
  --nuit: #0E1624;
  --ombre: 0 1px 2px rgba(22, 32, 46, 0.06), 0 8px 24px rgba(22, 32, 46, 0.08);
  --ombre-forte: 0 2px 6px rgba(22, 32, 46, 0.10), 0 24px 48px rgba(22, 32, 46, 0.16);
  --serif: 'Noto Serif', 'Cambria', 'Georgia', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 18px;
  --largeur: 1160px;
  --barre: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barre) + 12px); -webkit-text-size-adjust: 100%; }
html[data-langue-attente] body { visibility: hidden; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--action); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 18px; background: var(--carte); border-radius: 10px; box-shadow: var(--ombre-forte); font-weight: 700; }
.evitement:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Barre fixe ---------- */
.barre { position: sticky; top: 0; z-index: 20; background: rgba(244, 246, 250, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.barre-defilee { border-bottom-color: var(--trait); box-shadow: 0 6px 20px rgba(22, 32, 46, 0.06); }
.barre-interieur { display: flex; align-items: center; gap: 20px; min-height: var(--barre); max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 0 16px; }
.marque { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--texte); text-decoration: none; font: 700 20px/1 var(--serif); flex-shrink: 0; }
.marque img { width: 36px; height: 36px; object-fit: contain; }
.liens { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; border-radius: 10px; color: var(--texte-2); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; }
.liens a:hover, .liens a.actif, .liens a[aria-current="page"] { color: var(--action); background: rgba(36, 87, 181, 0.07); }
.liens .lien-menu-seul { display: none; }
.barre-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bascule-langue { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--carte); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--texte); cursor: pointer; }
.bascule-langue:hover { border-color: var(--action); color: var(--action); }
.bouton-menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--texte); cursor: pointer; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--action); color: #fff; font: 700 16px/1.2 var(--sans); text-decoration: none; border: 1.5px solid var(--action); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, transform .15s; }
.bouton:hover { background: var(--action-presse); border-color: var(--action-presse); }
.bouton:active { transform: translateY(1px); }
.bouton-second { background: rgba(255, 255, 255, 0.92); color: var(--action); border-color: rgba(36, 87, 181, 0.35); }
.bouton-second:hover { background: #fff; border-color: var(--action); color: var(--action-presse); }
.bouton-clair { background: #fff; color: var(--action); border-color: #fff; }
.bouton-clair:hover { background: var(--action-clair); border-color: var(--action-clair); color: var(--action-presse); }
.bouton-petit { min-height: 44px; padding: 0 18px; font-size: 15px; }
.bouton-telecharger svg { flex-shrink: 0; }
.bouton-attente, .bouton-attente:hover { background: var(--fond); color: var(--texte-2); border-color: var(--trait); cursor: not-allowed; transform: none; }
.bouton[hidden] { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--barre)); overflow: hidden; background: #C9D3E2; }
.hero-image { position: absolute; inset: 0; transform: scale(1.06); will-change: transform; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hero-voile { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(234, 238, 245, 0.97) 0%, rgba(234, 238, 245, 0.9) 36%, rgba(234, 238, 245, 0.55) 54%, rgba(234, 238, 245, 0) 72%),
  linear-gradient(0deg, var(--fond) 0%, rgba(234, 238, 245, 0) 18%); }
.hero-contenu { position: relative; width: 100%; max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 72px 16px 96px; }
.hero h1 { font-size: clamp(36px, 4.8vw, 62px); max-width: 17ch; }
.surtitre { font: 700 13px/1.3 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--action); margin-bottom: 14px; }
.surtitre-clair { color: #C9DAF8; }
.chapo { max-width: 42ch; margin-top: 22px; font-size: 19px; color: var(--texte-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-route { min-height: min(68svh, 620px); }
.hero-route h1 { max-width: 16ch; }

/* ---------- Sections ---------- */
.section { max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 96px 16px; }
.section-claire { max-width: none; background: var(--fond-2); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.section-claire > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.section-claire > .entete-section { max-width: var(--largeur); }
.section-claire > .entete-section > * { max-width: 700px; }
.entete-section { max-width: 700px; margin-bottom: 48px; }
.entete-section h2 { font-size: clamp(30px, 3.8vw, 46px); }
.entete-section p:not(.surtitre) { margin-top: 16px; color: var(--texte-2); font-size: 18px; }
.note { margin-top: 18px; color: var(--texte-3); font-size: 15px; }

.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte h3 { font-size: 22px; }
.carte p { margin-top: 10px; color: var(--texte-2); }
.carte-image { overflow: hidden; display: flex; flex-direction: column; }
.carte-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte-texte { padding: 22px 24px 26px; }

.grille-concept { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Bandeaux immersifs ---------- */
.bandeau { position: relative; display: flex; align-items: center; min-height: clamp(420px, 46vw, 640px); overflow: hidden; color: #fff; background: var(--nuit); }
.bandeau > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bandeau-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 28, 0.82) 0%, rgba(10, 16, 28, 0.62) 34%, rgba(10, 16, 28, 0.08) 66%, rgba(10, 16, 28, 0) 100%); }
.bandeau-droite .bandeau-voile { background: linear-gradient(270deg, rgba(10, 16, 28, 0.82) 0%, rgba(10, 16, 28, 0.62) 34%, rgba(10, 16, 28, 0.08) 66%, rgba(10, 16, 28, 0) 100%); }
.bandeau-contenu { position: relative; width: 100%; max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 72px 16px; }
.bandeau-contenu > * { max-width: 520px; }
.bandeau-droite .bandeau-contenu > * { margin-left: auto; }
.bandeau h2 { font-size: clamp(30px, 3.8vw, 46px); }
.bandeau p:not(.surtitre) { margin-top: 16px; font-size: 18px; color: rgba(255, 255, 255, 0.93); }
.bandeau .bouton { margin-top: 28px; }

/* ---------- L'appli ---------- */
.vitrine { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 64px; }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.onglets [role="tab"] { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte); color: var(--texte-2); font-weight: 650; font-size: 15px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.onglets [role="tab"]:hover { border-color: var(--action); color: var(--action); }
.onglets [role="tab"][aria-selected="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.ecran-texte { margin-top: 28px; padding: 26px 28px 28px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); min-height: 168px; }
.ecran-texte h3 { font-size: clamp(24px, 2.6vw, 30px); }
.ecran-texte p { margin-top: 12px; font-size: 18px; color: var(--texte-2); }
.telephone { margin: 0; padding: 10px; border-radius: 46px; background: var(--nuit); box-shadow: var(--ombre-forte); }
.telephone img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 36px; background: var(--fond); transition: opacity .16s ease; }
.telephone img.ecran-sortie { opacity: 0; }

/* ---------- Galerie des lieux ---------- */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.galerie-large { grid-column: span 2; }
.vignette { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden; background: var(--nuit); cursor: zoom-in; box-shadow: var(--ombre); text-align: left; }
.vignette img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.vignette:hover img, .vignette:focus-visible img { transform: scale(1.04); }
.legende { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 48px 20px 16px; color: #fff; background: linear-gradient(0deg, rgba(10, 16, 28, 0.85) 0%, rgba(10, 16, 28, 0.55) 55%, rgba(10, 16, 28, 0) 100%); }
.legende strong { font: 700 20px/1.2 var(--serif); }
.legende span { font-size: 14px; color: rgba(255, 255, 255, 0.92); }

/* ---------- Peuples ---------- */
.peuples { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.peuples li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px 22px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); text-align: center; }
.peuples img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--action-clair); margin-bottom: 10px; }
.peuples strong { font: 700 20px/1.2 var(--serif); }
.peuples small { color: var(--texte-3); font-size: 14px; }
.pastille { display: inline-flex; align-items: center; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: var(--fond); color: var(--texte-2); font-size: 13px; font-weight: 700; }
.pastille-dispo { background: var(--action-clair); color: var(--action-presse); }
.faction-titre { font-size: 26px; margin: 0 0 18px; }
.peuples + .faction-titre { margin-top: 44px; }

/* ---------- Le jeu ---------- */
.grille-jeu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
.grille-jeu h3 { font-size: 20px; }
.grille-jeu p { font-size: 16px; }

/* ---------- Nouveautés ---------- */
.nouveautes-tete { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: end; margin-bottom: 48px; }
.nouveautes-tete .entete-section { margin-bottom: 0; }
.nouveautes-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); }
.journal { list-style: none; padding: 0; margin: 0; position: relative; }
.journal::before { content: ''; position: absolute; left: 180px; top: 8px; bottom: 8px; width: 2px; background: var(--trait); }
.entree { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; padding: 0 0 36px; }
.entree::before { content: ''; position: absolute; left: 174px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--carte); border: 3px solid var(--action); }
.entree[hidden] { display: none; }
.entree-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 12px; }
.entree-date { font-weight: 700; color: var(--texte); }
.entree-tete .pastille { margin-top: 4px; }
.pastille-dev { background: var(--action-clair); color: var(--action-presse); }
.pastille-version { background: var(--carte); border: 1px solid var(--trait); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.entree-corps { padding: 0 0 0 4px; }
.entree-corps h3 { font-size: 23px; }
.entree-points { margin: 10px 0 0; padding-left: 20px; color: var(--texte-2); }
.entree-points li + li { margin-top: 4px; }
.journal-suite { padding-left: 216px; }

/* ---------- Télécharger ---------- */
.telechargement { display: grid; grid-template-columns: 440px minmax(0, 1fr); overflow: hidden; }
.telechargement-image img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.telechargement-corps { padding: 40px 44px 44px; }
.telechargement-corps h2 { font-size: clamp(30px, 3.4vw, 42px); }
.telechargement-intro { margin-top: 14px; font-size: 18px; color: var(--texte-2); }
.telechargement-action { margin-top: 28px; }
.telechargement-action .note { margin-top: 12px; }
.prerequis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--trait); }
.prerequis dt { font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texte-3); }
.prerequis dd { margin: 4px 0 0; font-weight: 600; }
.conseils { margin-top: 20px; }
.conseils .carte-texte { padding: 26px 26px 28px; }
.code { margin: 14px 0 0; padding: 12px 14px; background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; font: 500 14px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre-wrap; word-break: break-all; color: var(--texte); }
.liens-version { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.liens-version a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.liens-version a[hidden], .liens-version[hidden] { display: none; }
.empreinte code { display: inline-block; margin-top: 4px; font: 600 14px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; word-break: break-all; color: var(--texte); }

/* ---------- Soutenir ---------- */
.section-soutien { padding-top: 0; }
.soutien { display: grid; grid-template-columns: 440px minmax(0, 1fr); overflow: hidden; }
.soutien-image img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.soutien-corps { padding: 40px 44px 44px; }
.soutien-corps h2 { font-size: clamp(28px, 3.2vw, 40px); }
.soutien-intro { margin-top: 14px; font-size: 18px; color: var(--texte-2); }
.soutien-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.soutien-points li { position: relative; padding-left: 32px; font-weight: 600; }
.soutien-points li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--action-clair); }
.soutien-points li::after { content: ''; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border: solid var(--action); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.soutien-action { margin-top: 28px; }
.soutien-action .note { margin-top: 12px; }
.note[hidden] { display: none; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 840px; }
.section-claire > .faq { max-width: var(--largeur); }
.faq > details { max-width: 840px; }
.faq details { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; box-shadow: var(--ombre); }
.faq summary { cursor: pointer; min-height: 44px; padding: 18px 22px; font: 700 18px/1.35 var(--serif); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action-clair); color: var(--action); font: 700 20px/1 var(--sans); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 22px 22px; color: var(--texte-2); }

/* ---------- Pied ---------- */
.pied { background: var(--carte); border-top: 1px solid var(--trait); }
.pied-interieur { max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 48px 16px 56px; display: grid; gap: 14px; color: var(--texte-3); font-size: 14px; }
.pied-marque { display: flex; align-items: center; gap: 10px; color: var(--texte); font: 700 20px/1 var(--serif); }
.pied-marque img { width: 40px; height: 40px; object-fit: contain; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 8px -10px; }
.pied-liens a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--texte-2); font-weight: 600; text-decoration: none; }
.pied-liens a:hover { color: var(--action); }
.pied p { max-width: 80ch; }
.pied-reseaux { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: -6px 0 8px -10px; }
.pied-reseaux a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; color: var(--texte-2); font-weight: 600; text-decoration: none; }
.pied-reseaux a:hover { color: var(--action); }
.pied-reseaux a[hidden] { display: none; }

/* ---------- Texte long (mentions légales) ---------- */
.texte-long { max-width: 860px; }
.texte-long h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 8px; }
.texte-long h2 { font-size: 24px; margin: 40px 0 12px; }
.texte-long p, .texte-long li { color: var(--texte-2); }
.texte-long p + p { margin-top: 10px; }
.texte-long ul, .texte-long ol { padding-left: 22px; margin: 10px 0 0; display: grid; gap: 10px; }
.texte-long strong { color: var(--texte); }
.texte-long code { font: 500 0.92em ui-monospace, 'Cascadia Mono', Consolas, monospace; overflow-wrap: anywhere; }
.a-remplir { padding: 1px 6px; border: 1.5px dashed var(--action); border-radius: 6px; background: var(--action-clair); color: var(--action-presse); font-weight: 600; }

/* ---------- Visionneuse ---------- */
.visionneuse { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 12, 22, 0.94); color: #fff; }
.visionneuse::backdrop { background: rgba(8, 12, 22, 0.6); }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse figure { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 72px 16px 56px; max-width: 100%; }
.visionneuse img { max-width: min(1586px, 92vw); max-height: calc(100dvh - 190px); width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.visionneuse figcaption { font: 700 20px/1.3 var(--serif); text-align: center; }
.visionneuse-bouton { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.visionneuse-bouton:hover { background: rgba(255, 255, 255, 0.24); }
.visionneuse-bouton:focus-visible { outline-color: #fff; }
.visionneuse-precedent { left: 16px; top: 50%; transform: translateY(-50%); }
.visionneuse-suivant { right: 16px; top: 50%; transform: translateY(-50%); }
.visionneuse-fermer { right: 16px; top: 16px; }
.visionneuse-compte { position: absolute; left: 20px; top: 28px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
html.visionneuse-ouverte { overflow: hidden; }

/* ---------- Feuille de route ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filtres button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte); color: var(--texte-2); font-weight: 650; cursor: pointer; }
.filtres button:hover { border-color: var(--action); color: var(--action); }
.filtres button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.filtres button[aria-pressed="true"] .puce { border-color: #fff; }
.filtres button[aria-pressed="true"] .puce-fait { background: #fff; }
.filtres button[aria-pressed="true"] .puce-encours { background: linear-gradient(90deg, #fff 50%, transparent 50%); }
.puce { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--action); flex-shrink: 0; }
.puce-fait { background: var(--action); }
.puce-encours { background: linear-gradient(90deg, var(--action) 50%, transparent 50%); }
.puce-prevu { border-color: #6B7890; border-style: dashed; }
.puce-idee { border-color: #8C97AA; border-style: dotted; }
.filtres button[aria-pressed="true"] .puce-prevu, .filtres button[aria-pressed="true"] .puce-idee { border-color: #fff; }
.colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.colonnes.colonnes-une { grid-template-columns: minmax(0, 760px); }
.colonne[hidden] { display: none; }
.colonne-titre { display: flex; align-items: center; gap: 10px; font-size: 24px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--trait); }
.compte { font: 600 16px/1 var(--sans); color: var(--texte-3); }
.jalons { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.jalon { padding: 18px 20px 20px; background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--action); border-radius: 14px; box-shadow: var(--ombre); }
.jalon-encours { border-left-color: #5B83CF; }
.jalon-prevu { border-left-color: #A7B2C4; border-left-style: dashed; background: var(--fond-2); box-shadow: none; }
.jalon-idee { border: 1px dashed #B8C1D0; border-left: 4px dotted #A7B2C4; background: transparent; box-shadow: none; }
.jalon-date { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-3); margin-bottom: 6px; }
.jalon h4 { font-size: 19px; }
.jalon p { margin-top: 6px; color: var(--texte-2); font-size: 16px; }

/* ---------- Apparition douce ---------- */
.anim .revele { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.anim .revele.vu { opacity: 1; transform: none; }

/* ---------- Tablette ---------- */
/* Menu replié dès 1200 px : avec le lien Téléphone, la barre complète déborde entre 1121 et 1190 px (relevé du 23/10). */
@media (max-width: 1200px) {
  .liens { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; background: var(--fond-2); border-bottom: 1px solid var(--trait); box-shadow: 0 16px 32px rgba(22, 32, 46, 0.12); }
  .menu-ouvert .liens { display: flex; }
  .liens a { min-height: 48px; font-size: 17px; }
  .liens .lien-menu-seul { display: inline-flex; }
  .barre-actions { margin-left: auto; }
  .bouton-menu { display: inline-flex; }
}
@media (max-width: 1120px) {
  .liens { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px; background: var(--fond-2); border-bottom: 1px solid var(--trait); box-shadow: 0 16px 32px rgba(22, 32, 46, 0.12); }
  .menu-ouvert .liens { display: flex; }
  .liens a { min-height: 48px; font-size: 17px; }
  .liens .lien-menu-seul { display: inline-flex; }
  .barre-actions { margin-left: auto; }
  .bouton-menu { display: inline-flex; }
  .grille-concept { grid-template-columns: repeat(2, 1fr); }
  .grille-jeu { grid-template-columns: repeat(2, 1fr); }
  .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .soutien { grid-template-columns: 1fr; }
  .soutien-image img { aspect-ratio: 21 / 9; min-height: 0; }
  .vitrine { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .telechargement { grid-template-columns: 1fr; }
  .telechargement-image img { aspect-ratio: 21 / 9; min-height: 0; }
  .nouveautes-tete { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 860px) {
  .section { padding: 72px 16px; }
  .hero, .hero-route { display: block; min-height: 0; background: var(--fond); }
  .hero-image { position: relative; height: min(58svh, 520px); transform: none !important; }
  .hero-image img { object-position: 70% 62%; }
  .hero-voile { inset: auto 0 auto 0; top: calc(min(58svh, 520px) - 140px); height: 140px; background: linear-gradient(0deg, var(--fond) 0%, rgba(234, 238, 245, 0) 100%); }
  .hero-contenu { margin-top: -36px; padding: 0 16px 48px; }
  .vitrine { grid-template-columns: 1fr; gap: 32px; }
  .telephone { width: min(300px, 80vw); margin: 0 auto; order: -1; }
  .ecran-texte { min-height: 0; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie-large { grid-column: auto; }
  .peuples { grid-template-columns: repeat(3, 1fr); }
  .grille-3 { grid-template-columns: 1fr; }
  .nouveautes-tete { grid-template-columns: 1fr; gap: 28px; }
  .colonnes { grid-template-columns: 1fr; gap: 40px; }
  .colonne[data-colonne="encours"] { order: -3; }
  .colonne[data-colonne="prevu"] { order: -2; }
  .colonne[data-colonne="idee"] { order: -1; }
  .bandeau { align-items: flex-end; min-height: 520px; }
  .bandeau-voile, .bandeau-droite .bandeau-voile { background: linear-gradient(0deg, rgba(10, 16, 28, 0.9) 0%, rgba(10, 16, 28, 0.72) 45%, rgba(10, 16, 28, 0.1) 80%, rgba(10, 16, 28, 0) 100%); }
  .bandeau-droite .bandeau-contenu > * { margin-left: 0; }
  .bandeau-contenu { padding: 160px 16px 56px; }
}
/* ---------- Téléphone ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .marque span { font-size: 18px; }
  .barre-interieur { gap: 10px; }
  .bouton-petit { padding: 0 14px; font-size: 14px; }
  .chapo { font-size: 17px; margin-top: 16px; }
  .actions .bouton { flex: 1 1 100%; }
  .grille-concept { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .galerie-large { grid-column: auto; }
  .peuples { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .peuples img { width: 96px; height: 96px; }
  .grille-jeu { grid-template-columns: 1fr; }
  .soutien-corps { padding: 28px 20px 30px; }
  .soutien-action .bouton { width: 100%; }
  .journal::before { left: 6px; }
  .entree { grid-template-columns: 1fr; gap: 8px; padding-left: 32px; }
  .entree::before { left: 0; }
  .entree-tete { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .entree-tete .pastille { margin-top: 0; }
  .journal-suite { padding-left: 0; }
  .journal-suite .bouton { width: 100%; }
  .telechargement-corps { padding: 28px 20px 30px; }
  .prerequis { grid-template-columns: 1fr; }
  .telechargement-action .bouton { width: 100%; }
  .visionneuse-precedent, .visionneuse-suivant { top: auto; bottom: 16px; transform: none; }
  .visionneuse figure { padding: 72px 12px 96px; }
  .visionneuse img { max-width: 100%; max-height: calc(100dvh - 240px); }
  .hero-image { height: min(52svh, 440px); }
  .hero-voile { top: calc(min(52svh, 440px) - 140px); }
}
@media (max-width: 480px) {
  .bouton-telecharger { width: 44px; padding: 0; }
  .bouton-telecharger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 380px) {
  .barre-interieur { padding: 0 12px; }
  .marque span { font-size: 17px; }
}

/* ---------- Guide « L'appli de partout » (telephone.html) ---------- */
.lien-guide { margin-top: 20px; }
.guide-chapo { margin-top: 14px; font-size: 19px; color: var(--texte-2); }
.guide-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.guide-sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte); color: var(--texte-2); font-weight: 650; font-size: 15px; text-decoration: none; }
.guide-sommaire a:hover { border-color: var(--action); color: var(--action); }
.encart { margin-top: 24px; padding: 18px 20px; background: var(--action-clair); border-radius: 14px; }
.encart p { margin-top: 6px; color: var(--texte); }
.guide h3 { font-size: 20px; margin: 28px 0 8px; }
.guide-etapes { counter-reset: etape; list-style: none; padding-left: 0 !important; }
.guide-etapes li { position: relative; padding-left: 42px; min-height: 30px; }
.guide-etapes li::before { counter-increment: etape; content: counter(etape); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action); color: #fff; font: 700 15px/1 var(--sans); }
.guide figure { margin: 20px 0; }
.guide figure img { width: 100%; border-radius: 12px; border: 1px solid var(--trait); box-shadow: var(--ombre); background: var(--carte); }
.guide figcaption { margin-top: 8px; font-size: 14px; color: var(--texte-3); }
.guide .guide-mobile { max-width: 320px; }
.guide-paire { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: flex-start; }
.guide-paire .guide-mobile { flex: 1 1 240px; }
.guide-astuce { margin-top: 16px; padding: 14px 16px; border-left: 4px solid var(--action); background: var(--carte); border-radius: 0 12px 12px 0; }
.guide-depannage { margin: 12px 0 0; }
.guide-depannage dt { margin-top: 16px; font: 700 17px/1.35 var(--serif); color: var(--texte); }
.guide-depannage dd { margin: 4px 0 0; color: var(--texte-2); }
.guide-securite { padding: 16px 18px; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; font-weight: 600; color: var(--texte) !important; }
.texte-long code { overflow-wrap: anywhere; }

/* ---------- Chapitres (23/10, retour de Victor : site trop long sur téléphone) ---------- */
.titre-court { font-size: clamp(24px, 3vw, 32px); margin-bottom: 20px; }
.section-courte { padding-top: 56px; padding-bottom: 56px; }
.chapitre > .section:first-child { padding-top: 56px; }
.grille-chapitres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.chapitre-carte { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--texte); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.chapitre-carte:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.chapitre-carte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.chapitre-texte { display: grid; gap: 6px; padding: 14px 16px 18px; }
.chapitre-texte strong { font: 700 19px/1.2 var(--serif); }
.chapitre-texte span { color: var(--texte-2); font-size: 15px; line-height: 1.45; }
.bandeau-telechargement { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; }
.bandeau-telechargement h2 { font-size: clamp(24px, 3vw, 32px); }
.bandeau-telechargement .note { margin-top: 8px; max-width: 60ch; }
.bandeau-telechargement-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
.fil-chapitres { display: flex; justify-content: space-between; gap: 12px; max-width: calc(var(--largeur) + 32px); margin: 0 auto; padding: 8px 16px 56px; }
.fil-lien { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 18px; border: 1.5px solid var(--trait); border-radius: 16px; background: var(--carte); color: var(--texte); text-decoration: none; box-shadow: var(--ombre); }
.fil-lien:hover { border-color: var(--action); color: var(--action); }
.fil-lien span { display: grid; }
.fil-lien small { font-size: 13px; color: var(--texte-3); }
.fil-lien strong { font: 700 17px/1.25 var(--serif); }
.fil-suiv { margin-left: auto; text-align: right; }
.guide-section { margin-top: 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; box-shadow: var(--ombre); }
.guide-section > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 20px; }
.guide-section > summary::-webkit-details-marker { display: none; }
.guide-section > summary h2 { margin: 0; font-size: 21px; }
.guide-section > summary::after { content: '+'; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action-clair); color: var(--action); font: 700 20px/1 var(--sans); }
.guide-section[open] > summary::after { content: '−'; }
.guide-section > :not(summary) { margin-left: 20px; margin-right: 20px; }
.guide-section > :last-child { margin-bottom: 20px; }

@media (max-width: 1200px) {
  /* Menu des chapitres : une rangée qui défile sous la barre, toujours visible (la barre est collante). */
  .barre-interieur { flex-wrap: wrap; row-gap: 0; }
  .liens { display: flex; position: static; order: 3; flex-basis: 100%; flex-direction: row; align-items: center; gap: 6px; margin: 0 -16px; padding: 0 16px 10px; overflow-x: auto;
    background: none; border: 0; box-shadow: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .liens::-webkit-scrollbar { display: none; }
  .liens a { flex-shrink: 0; min-height: 44px; padding: 0 14px; font-size: 15px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--carte); }
  .liens a[aria-current="page"] { background: var(--action); border-color: var(--action); color: #fff; }
  .liens .lien-menu-seul { display: inline-flex; }
  .grille-chapitres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .section, .section-courte, .chapitre > .section:first-child { padding-top: 40px; padding-bottom: 40px; }
  .entete-section { margin-bottom: 28px; }
  .entete-section p:not(.surtitre) { font-size: 17px; }
  .grille-chapitres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bandeau-telechargement { flex-direction: column; align-items: flex-start; padding: 20px; }
  .hero-route .hero-image { height: 220px; }
  .hero-route .hero-voile { top: 80px; }
  .hero-route .hero-contenu { margin-top: -24px; padding-bottom: 8px; }
  .bandeau { min-height: 360px; }
  .bandeau-contenu { padding: 110px 16px 40px; }
  .fil-chapitres { padding-bottom: 40px; }
}
@media (max-width: 600px) {
  .chapitre-texte { padding: 10px 12px 14px; }
  .chapitre-texte strong { font-size: 17px; }
  .chapitre-texte span { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* Concept : l'image à gauche, le texte à droite. */
  .grille-concept { gap: 12px; }
  .carte-image { flex-direction: row; }
  .carte-image img { width: 104px; aspect-ratio: auto; height: auto; min-height: 100%; flex-shrink: 0; }
  .carte-image .carte-texte { padding: 14px 16px 16px; }
  .carte-image .carte-texte h3 { font-size: 19px; }
  .carte-image .carte-texte p { font-size: 15px; margin-top: 6px; }
  .grille-jeu { gap: 10px; }
  .grille-jeu .carte-texte { padding: 16px 18px 18px; }
  .grille-jeu h3 { font-size: 18px; }
  .grille-jeu p { font-size: 15px; margin-top: 6px; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .legende { padding: 28px 10px 8px; }
  .legende strong { font-size: 15px; }
  .legende span { font-size: 12px; }
  .peuples { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .peuples li { padding: 12px 6px 14px; }
  .peuples img { width: 64px; height: 64px; margin-bottom: 6px; }
  .peuples strong { font-size: 15px; }
  .peuples small { font-size: 12px; line-height: 1.3; }
  .faction-titre { font-size: 21px; margin-bottom: 12px; }
  .peuples + .faction-titre { margin-top: 28px; }
  .telephone { width: min(240px, 66vw); }
  .fil-chapitres { flex-direction: column; }
  .fil-lien { width: 100%; }
  .fil-suiv { justify-content: flex-end; }
  .guide-section > summary h2 { font-size: 18px; }
  .guide-section > :not(summary) { margin-left: 14px; margin-right: 14px; }
}
@media (max-width: 600px) {
  .soutien-image { display: none; }
  .bandeau { min-height: 320px; }
  .bandeau-contenu { padding-top: 90px; }
}