/* ==========================================================================
   GK+ — Feuille commune aux pages du site (accueil, livre, 404, pages légales).
   Se charge APRÈS gkplus-charte.css, qui reste la source des couleurs et des polices.
   L'app ne charge pas ce fichier : rien ici ne peut la toucher.
   - Version sombre automatique (prefers-color-scheme) avec les rôles de la charte (« Sombre », p. 4).
   - En-tête, pied, repères « à compléter », apparitions au défilement.
   - Mouvement : transform et opacity seulement, ease-out, et rien quand le système demande moins d'animations.
   ========================================================================== */

:root {
  --s-fond-2: var(--blanc);          /* sections alternées */
  --s-voile: var(--outremer-voile);  /* fond léger d'accent (angles, encadrés) */
  --s-cadre-tel: var(--encre);       /* contour du téléphone */
  --s-repere-fond: #FFF2A8;          /* repère « à compléter » : jaune pâle */
  --s-repere-filet: #E2CC4F;
  --s-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --s-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Version claire seule (décision d'Anteo, 10 oct. 2026) : plus de bascule automatique en sombre */

.gk-page { background: var(--gk-fond); color: var(--gk-texte); }
html { scroll-padding-top: 84px; }
body.gk-page { overflow-x: hidden; }

/* Retour au toucher : le bouton s'enfonce un peu */
.gk-btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform 160ms var(--s-ease-out); }
.gk-btn:active { transform: scale(0.97); }

/* ---------- Logo clair / sombre ---------- */
.s-logo { display: inline-flex; align-items: center; min-height: 44px; }
.s-logo img { display: block; width: 72px; height: auto; }

/* ---------- En-tête ---------- */
.s-entete { position: sticky; top: 0; z-index: 20; background: var(--gk-fond); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.s-entete.colle { border-bottom-color: var(--gk-filet); }
.s-entete-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.s-entete nav { display: flex; align-items: center; gap: 4px; }
.s-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; color: var(--gk-texte); text-decoration: none; }
.gk-page a.s-lien { color: var(--gk-texte); text-decoration: none; }
.gk-page a.s-lien:hover { color: var(--gk-accent); }
.s-large { display: none; }
.s-btn-petit { min-height: 44px; padding: 8px 14px; font-size: 15px; margin-left: 4px; }
@media (min-width: 980px) { .s-large { display: inline-flex; } .s-entete nav { gap: 8px; } .s-entete-in { min-height: 72px; } }

/* ---------- Pied de page ---------- */
.s-pied { border-top: 1px solid var(--gk-filet); padding-top: 28px; padding-bottom: 40px; color: var(--gk-texte-2); font-size: 14px; }
.s-pied .haut { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.s-pied nav { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 12px; }
.s-pied nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gk-texte-2); }
.gk-page .s-pied nav a { color: var(--gk-texte-2); }
.gk-page .s-pied nav a:hover { color: var(--gk-accent); }

/* ---------- Repères à compléter (jamais publiés tels quels) ---------- */
.repere { background: var(--s-repere-fond); color: var(--encre); font-family: var(--gk-police-mono); font-size: .85em; letter-spacing: .01em; padding: 1px 6px; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.repere-bloc { background: var(--s-repere-fond); color: var(--encre); border: 1px dashed var(--s-repere-filet); border-radius: 4px; padding: 16px 18px; font-size: 15px; line-height: 1.5; }
.repere-bloc strong { font-family: var(--gk-police-mono); font-weight: 500; font-size: 13px; letter-spacing: .04em; display: block; margin-bottom: 6px; }
.repere-bloc p { margin: 0; color: var(--encre); }
.repere-bloc p + p { margin-top: 8px; }

/* ---------- Apparitions au défilement ----------
   Rien n'est caché sans JavaScript : la classe « anime » n'est posée sur <html> que si le script tourne,
   et elle est retirée au bout de 3 s si le script des apparitions n'a pas démarré. */
.apparait { transition: opacity 500ms var(--s-ease-out), transform 500ms var(--s-ease-out); }
.anime .apparait:not(.vu) { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .gk-btn, .gk-btn:active { transition: background-color .15s ease, color .15s ease, border-color .15s ease; transform: none; }
  .anime .apparait:not(.vu) { opacity: 1; transform: none; }
  .apparait { transition: none; }
}
@media print {
  .s-entete { position: static; }
  .anime .apparait:not(.vu) { opacity: 1; transform: none; }
}