/* ============================================================================
   COMMUN_STYLE.CSS — Styles des éléments communs à toutes les pages
   ============================================================================
   Fichier partagé, à déployer dans /assets/commun/ (avec commun_java.js).
   Chaque page le charge AVANT sa propre feuille de style, qui garde la priorité :
       <link rel="stylesheet" href="/assets/commun/commun_style.css">

   Il ne définit PAS les couleurs : il utilise les variables (--paper, --ink,
   --line, --clay, --leaf…) déjà déclarées dans la feuille de chaque page, donc
   le thème clair/sombre s'applique tout seul. La barre supérieure et le menu
   latéral gardent les styles de chaque page (mêmes noms de classes).

   Sommaire :
     P. Polices, palette claire/sombre, base et barre du haut (communes à toutes les pages)
     0. Disposition de la page (pied de page en bas de l'écran)
     1. Barre supérieure : zone de compte
     2. Menu horizontal (pages sans menu latéral)
     3. Pied de page
     4. Version mobile (responsive)
     5. PRÉFÉRENCES D'AFFICHAGE ET D'ACCESSIBILITÉ (réglées dans /settings/)
   ============================================================================ */


/* ============================================================================
   POLICES HÉBERGÉES SUR LE SITE (aucun appel à Google Fonts)
   Fichiers .woff2 à déposer dans /assets/polices/ (voir LISEZMOI_polices.txt).
   Sous-ensemble « latin » : couvre le français (é è à ç œ « » € …).
   Si un fichier est absent, le navigateur retombe sur la police de secours
   (Georgia / police système) : le site reste lisible.
   ============================================================================ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/polices/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/polices/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/polices/fraunces-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/polices/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/polices/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/polices/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/polices/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}


/* ============================================================================
   PALETTE, THÈME CLAIR / SOMBRE, BASE ET BARRE DU HAUT — UNE SEULE FOIS POUR TOUTES LES PAGES
   ============================================================================
   Les feuilles de page ne redéfinissent plus ces éléments : pour changer une
   couleur du site ou l'aspect de la barre du haut, c'est ICI et nulle part ailleurs.
   Le thème suit le réglage de la page Paramètres : commun_java.js pose
   data-theme-effectif = « clair » ou « sombre » sur <html> (système, clair ou sombre).
   Sans JavaScript, le thème de l'appareil s'applique (media query).
   ============================================================================ */
:root {
  --paper: #F5F2E9;          /* fond général de la page */
  --paper-raised: #FBF9F3;   /* fond des blocs surélevés (cartes, champs) */
  --ink: #20281F;            /* texte principal */
  --ink-soft: #4A5347;       /* texte secondaire */
  --muted: #6E6957;          /* texte discret (assez contrasté pour être lisible) */
  --line: #D9D2C0;           /* bordures et séparateurs */
  --clay: #C1462F;           /* accent « urgence / identité » */
  --clay-tint: #F6E3DC;
  --leaf: #2E6B4E;           /* accent « adhésion / positif » */
  --leaf-tint: #E4EEE4;
  --sun: #8A6410;            /* accent « attention / à compléter » */
  --sun-tint: #F7EBC8;
  --sky: #2A5C8F;            /* accent « information / modération » */
  --sky-tint: #DDE8F3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-effectif="clair"]) {
    --paper: #171A15; --paper-raised: #1E2219; --ink: #EDE9DC; --ink-soft: #C2BEAE;
    --muted: #A09A87; --line: #333629; --clay: #E27258; --clay-tint: #3A2620;
    --leaf: #5FA37E; --leaf-tint: #24352A; --sun: #E3BE5A; --sun-tint: #3A3118;
    --sky: #6FA8DC; --sky-tint: #1E2F3F;
  }
}
html[data-theme-effectif="sombre"]:root {
    --paper: #171A15; --paper-raised: #1E2219; --ink: #EDE9DC; --ink-soft: #C2BEAE;
    --muted: #A09A87; --line: #333629; --clay: #E27258; --clay-tint: #3A2620;
    --leaf: #5FA37E; --leaf-tint: #24352A; --sun: #E3BE5A; --sun-tint: #3A3118;
    --sky: #6FA8DC; --sky-tint: #1E2F3F;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* -- Base de la page -- */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  font-size: calc(15px * var(--echelle-texte, 1));
  line-height: 1.5;
}

/* -- Barre supérieure (remplie par commun_java.js) -- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;   /* le titre est un lien vers l'accueil */
}
.brand-mark {
  /* Logo du site (décoratif : le nom est écrit à côté) — remplace l'ancien point rouge */
  width: 32px;
  height: 32px;
  background: url('/assets/logo/favicon.svg') center / contain no-repeat;
  display: inline-block;
  flex: none;
}
.brand h1 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: calc(22px * var(--echelle-texte, 1));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.icon-btn:hover { border-color: var(--ink-soft); }
@media (max-width: 640px) {
  .topbar { padding: 14px 16px; }
}


/* ============================================================================
   0. DISPOSITION DE LA PAGE
   Le pied de page reste en bas de l'écran quand la page est courte, et suit
   le contenu quand la page est longue.
   ============================================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .topbar,
body > .menu-horizontal {
  flex: none;
}
body > main,
body > .shell {
  width: 100%;
  flex: 1 0 auto;
}
body > .pied-de-page {
  flex: none;
}


/* ============================================================================
   1. BARRE SUPÉRIEURE : ZONE DE COMPTE
   ============================================================================ */
.zone-compte {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Lien « Mon compte » : icône + pseudo */
.compte-pseudo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  font-size: calc(13.5px * var(--echelle-texte, 1));
  color: var(--ink-soft);
  text-decoration: none;
}
.compte-pseudo:hover .compte-pseudo-texte {
  color: var(--ink);
  text-decoration: underline;
}
.compte-pseudo:focus-visible {
  outline: 2px solid var(--leaf, #2E6B4E);
  outline-offset: 3px;
}
.compte-pseudo img {
  flex: none;
}
.compte-pseudo-texte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actions .icon-btn,
.zone-compte .btn {
  text-decoration: none;
}

/* Cloche des notifications (à côté de « Se déconnecter ») et sa pastille de non lues */
.icon-btn-notifications {
  position: relative;
}
.pastille-notifications {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--clay, #C1462F);
  color: #fff;
  font-size: calc(11px * var(--echelle-texte, 1));
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.pastille-notifications[hidden] {
  display: none;
}

/* Bouton de la barre supérieure pour les pages dont la feuille de style n'a
   pas de style « .btn » (:where garde la priorité faible : si la page définit
   .btn, c'est le style de la page qui s'applique). */
:where(.zone-compte) .btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: 3px;
  font-family: inherit;
  font-size: calc(13.5px * var(--echelle-texte, 1));
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
:where(.zone-compte) .btn:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}


/* ============================================================================
   2. MENU HORIZONTAL (pages sans menu latéral)
   ============================================================================ */
.menu-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  padding: 6px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.menu-lien {
  text-decoration: none;   /* jamais souligné, quelle que soit la page */
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  font-size: calc(14px * var(--echelle-texte, 1));
  font-weight: 500;
}
.menu-lien:hover {
  color: var(--ink);
  background: var(--paper-raised);
}
.menu-lien.active {
  color: var(--ink);
  border-bottom-color: var(--clay);
}


/* ============================================================================
   3. PIED DE PAGE
   ============================================================================ */
.pied-de-page {
  margin-top: 48px;
  padding: 32px 28px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: calc(13.5px * var(--echelle-texte, 1));
}
.pied-contenu {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 8px clamp(32px, 8vw, 96px);
  max-width: 1180px;
  margin: 0 auto;
}
.pied-nom {
  margin: 0 0 18px;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: calc(18px * var(--echelle-texte, 1));
  font-weight: 600;
  color: var(--ink);
}
.pied-nom .brand-mark {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 4px;
}
.pied-colonne ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied-colonne li {
  margin-bottom: 6px;
}
.pied-colonne a {
  text-decoration: none;
}
.pied-colonne a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.pied-colonne a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}
.pied-copyright {
  text-align: center;
  max-width: 1180px;
  margin: 24px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: calc(12.5px * var(--echelle-texte, 1));
  color: var(--muted);
}
.pied-de-page a:focus-visible,
.menu-lien:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
}


/* ============================================================================
   4. VERSION MOBILE (RESPONSIVE)
   ============================================================================ */
@media (max-width: 640px) {
  .menu-horizontal {
    padding: 4px 12px;
  }
  /* Sur mobile, le pseudo est masqué : seule l'icône « Mon compte » reste */
  .compte-pseudo-texte {
    display: none;
  }
  .compte-pseudo {
    padding: 8px;
  }
  /* Barre supérieure : quand compte + cloche + recherche + paramètres ne tiennent
     plus à côté du titre, les actions passent sur une seconde ligne (à droite) */
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .top-actions {
    flex-wrap: wrap;
    margin-left: auto;
  }
  .zone-compte .btn {
    white-space: nowrap;
  }
  .pied-de-page {
    padding: 24px 16px 18px;
  }
  .pied-contenu {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 14px;
  }
}


/* ============================================================================
   5. PRÉFÉRENCES D'AFFICHAGE ET D'ACCESSIBILITÉ
   Ces règles réagissent aux attributs posés sur <html> par commun_java.js
   (section « PRÉFÉRENCES »), à partir des réglages enregistrés dans la page
   Paramètres. Elles valent donc pour TOUTES les pages.
   Le suffixe « :root » augmente la priorité des sélecteurs pour qu'ils
   l'emportent sur les couleurs de thème déclarées dans chaque page.
   ============================================================================ */

/* -- 5.1 Taille du texte : toutes les tailles de police des pages sont écrites
   calc(Npx * var(--echelle-texte, 1)) et suivent donc ce coefficient. -- */
html[data-taille-police="0"] { --echelle-texte: 0.9; }
html[data-taille-police="1"] { --echelle-texte: 1; }
html[data-taille-police="2"] { --echelle-texte: 1.15; }
html[data-taille-police="3"] { --echelle-texte: 1.35; }

/* -- 5.1b Thème clair / sombre : géré dans la section « Palette » en tête de ce fichier
   (data-theme-effectif posé par commun_java.js : réglage choisi ou thème de l'appareil). -- */

/* -- 5.2 Couleur d'accentuation (clair, puis sombre) -- */
html[data-accent="bleu"]:root   { --clay: #1D5B8F; --clay-tint: #DCE9F3; --leaf: #B8860B; --leaf-tint: #F5EBD0; }
html[data-accent="violet"]:root { --clay: #6A3FA0; --clay-tint: #E9E0F5; --leaf: #B08900; --leaf-tint: #F5EDCF; }
html[data-accent="bleu"][data-theme-effectif="sombre"]:root   { --clay: #6FA8DC; --clay-tint: #1E2F3F; --leaf: #E0B84A; --leaf-tint: #3A3320; }
html[data-accent="violet"][data-theme-effectif="sombre"]:root { --clay: #B792E6; --clay-tint: #2F2640; --leaf: #E3C65A; --leaf-tint: #3A3420; }

/* -- 5.3 Contraste élevé -- */
html[data-contraste="eleve"]:root {
  --ink: #000000;
  --ink-soft: #000000;
  --muted: #333333;
  --line: #000000;
  --paper: #FFFFFF;
  --paper-raised: #FFFFFF;
}

/* Contraste élevé en thème sombre : texte blanc sur fond noir */
html[data-contraste="eleve"][data-theme-effectif="sombre"]:root {
  --ink: #FFFFFF;
  --ink-soft: #FFFFFF;
  --muted: #DDDDDD;
  --line: #FFFFFF;
  --paper: #000000;
  --paper-raised: #000000;
}

/* -- 5.4 Modes adaptés au daltonisme (contraste de luminosité, pas de seule teinte) -- */
html[data-daltonisme="protanopie"]:root,
html[data-daltonisme="deuteranopie"]:root {
  --clay: #B45309; --clay-tint: #FDE6C8; --leaf: #1D4ED8; --leaf-tint: #DCE6FB;
}
html[data-daltonisme="tritanopie"]:root {
  --clay: #B91C1C; --clay-tint: #F9DADA; --leaf: #15803D; --leaf-tint: #DDF0E3;
}

/* -- 5.5 Police à haute lisibilité (Atkinson Hyperlegible, hébergée sur le site) -- */
html[data-police="lisible"] body,
html[data-police="lisible"] :where(button, input, select, textarea) {
  font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans', sans-serif;
}

/* -- 5.6 Interligne et espacement augmentés (aide à la dyslexie) -- */
html[data-interligne="large"] body {
  line-height: 1.9;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
}

/* -- 5.7 Réduction des animations -- */
html[data-mouvement="reduit"] * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   BLOC CHOIX D'IDENTITÉ — choix pseudo / alias (CausesConnect.creerChoixIdentite)
   Affiché quand on suit ou crée une cause, et dans Mon compte.
   ============================================================================ */
.choix-identite {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-raised);
  margin: 0;
  padding: 12px 14px;
  min-width: 0;
}
.choix-identite-titre {
  padding: 0 6px;
  font-weight: 600;
  font-size: calc(14px * var(--echelle-texte, 1));
  color: var(--ink);
}
.choix-identite-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  cursor: pointer;
  font-size: calc(14.5px * var(--echelle-texte, 1));
  color: var(--ink);
}
.choix-identite-option input { margin: 0; accent-color: var(--leaf); }
.choix-identite-champ {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  font-family: inherit;
  font-size: calc(15px * var(--echelle-texte, 1));
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 12px;
}
.choix-identite-champ:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
  border-color: var(--leaf);
}
.choix-identite-aide {
  margin: 2px 0 6px 26px;
  font-size: calc(12.5px * var(--echelle-texte, 1));
  color: var(--muted);
}

/* =============================================================================
   LIENS DE NAVIGATION : JAMAIS SOULIGNÉS, QUELLE QUE SOIT LA PAGE
   Certaines pages soulignent les liens placés dans un texte (« p a, li a »).
   Ces règles, plus précises, protègent la barre supérieure, le menu et le pied
   de page pour qu'ils aient le même aspect partout.
   ========================================================================== */
.topbar a,
.menu-horizontal a,
.nav-group a,
.pied-de-page a {
  text-decoration: none;
}
.menu-horizontal a:hover,
.nav-group a:hover {
  text-decoration: none;
}


/* =============================================================================
   AVERTISSEMENT AVANT DE QUITTER LE SITE (liens externes)
   Fenêtre créée par commun_java.js (section 5), partagée par toutes les pages.
   ========================================================================== */
.avertissement-externe {
  max-width: min(32rem, calc(100vw - 32px));
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raised);
  color: var(--ink);
}
.avertissement-externe::backdrop {
  background: rgba(20, 24, 18, 0.55);
}
.avertissement-externe-titre {
  margin: 0 0 10px;
  font-size: calc(19px * var(--echelle-texte, 1));
}
.avertissement-externe p {
  margin: 0 0 10px;
  line-height: 1.5;
  font-size: calc(14.5px * var(--echelle-texte, 1));
}
.avertissement-externe-adresse {
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: calc(13px * var(--echelle-texte, 1));
  overflow-wrap: anywhere;
}
.avertissement-externe-alerte {
  padding: 10px 12px;
  border-radius: 4px;
  background: var(--sun-tint);
  border-left: 4px solid var(--sun);
}
.avertissement-externe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.avertissement-externe-annuler,
.avertissement-externe-continuer {
  padding: 9px 16px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.avertissement-externe-annuler {
  background: var(--leaf);
  border: 1px solid var(--leaf);
  color: var(--paper-raised);
}
.avertissement-externe-continuer {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.avertissement-externe-annuler:focus-visible,
.avertissement-externe-continuer:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}