/* Agenda des jeunes PRISMES — charte graphique PRISMES (DEVELOP0/chartegraphique : charte.typ,
 * prismes.brand.json v0.3). Raleway seule, hébergée ici : aucune police ni ressource tierce.
 * Couleurs : la palette officielle, rien d'autre. Règle de la charte : vert, orange et rouge ne
 * sont JAMAIS du texte sur fond clair (contraste 2,3 à 3) — seulement des aplats (pastilles à
 * texte aubergine, filets). Sur fond aubergine, orange et saumon passent en AA. */

@font-face {
  font-family: "Raleway";
  src: url("fonts/raleway-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --aubergine: #312343;
  --violet: #6657A3;
  --vert: #3AB54A;
  --orange: #F7921E;
  --rouge: #F36C36;
  --saumon: #FBBE9F;
  --creme: #FFF7F0;
  --blanc: #FFFFFF;
  --bandeau: linear-gradient(90deg, #6657A3 0%, #3AB54A 36%, #F7921E 72%, #F36C36 100%);

  --fond: var(--creme);
  --texte: var(--aubergine);
  --texte-doux: #5E5168;            /* aubergine adoucie : 6,6:1 sur crème */
  --carte: var(--blanc);
  --trait: rgba(49, 35, 67, .12);
  --trait-fort: rgba(49, 35, 67, .30);
  --titre-jour: var(--violet);
  --lien: var(--violet);
  --ombre: 0 1px 2px rgba(49, 35, 67, .06), 0 8px 22px rgba(49, 35, 67, .07);
  --barre: var(--aubergine);
  --rayon: 18px;
  --parler-h: 0px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  /* Le fond sombre de la charte, c'est l'aubergine. */
  :root {
    --fond: var(--aubergine);
    --texte: var(--creme);
    --texte-doux: #DCD2E3;
    --carte: #403156;
    --trait: rgba(255, 247, 240, .12);
    --trait-fort: rgba(255, 247, 240, .32);
    --titre-jour: var(--saumon);
    --lien: var(--saumon);
    --ombre: none;
    --barre: #241A33;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.5 "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: lining-nums;   /* Raleway a des chiffres elzéviriens par défaut */
  padding-bottom: calc(var(--parler-h) + env(safe-area-inset-bottom));
}
svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Le liseré dégradé de la charte, en haut de chaque support */
.arc { height: 8px; background: var(--bandeau); }

.entete, .accroche, main { max-width: 640px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* ── En-tête : le logo, la pastille ── */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
.logo { display: block; width: 150px; height: auto; }    /* 120 px minimum à l'écran (charte) */
.pastille {
  margin: 0; flex: none;
  background: var(--aubergine); color: var(--creme);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 7px 14px;
}
.pastille b { color: var(--orange); font-weight: 800; }
@media (prefers-color-scheme: dark) { .pastille { background: var(--violet); } }

.accroche { padding-top: 18px; padding-bottom: 4px; }
h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.surligne { white-space: nowrap; background: linear-gradient(transparent 60%, var(--orange) 60%); padding: 0 .06em; }   /* « rendez-vous » ne se coupe pas au trait d'union */
@media (prefers-color-scheme: dark) { .surligne { background: linear-gradient(transparent 72%, var(--orange) 72%); } }
.sous-titre { margin: 6px 0 0; color: var(--texte-doux); font-size: 16px; }

/* ── Choix de l'établissement ── */
.filtre { margin: 18px 0 6px; }
.filtre label { display: block; font-size: 14px; font-weight: 600; color: var(--texte-doux); margin-bottom: 6px; }
.filtre select {
  width: 100%; min-height: 48px; padding: 11px 12px;
  font: 600 16px/1.2 "Raleway", "Helvetica Neue", Arial, sans-serif; color: var(--texte);
  background: var(--carte); border: 2px solid var(--trait-fort); border-radius: 14px;
}

.etat { min-height: 1.2em; margin: 8px 0 4px; font-size: 13.5px; color: var(--texte-doux); }
.etat.hors-ligne { color: var(--aubergine); background: var(--saumon); border-radius: 12px; padding: 9px 12px; font-weight: 600; }

/* ── Les jours ── */
.jour { margin-top: 22px; }
.jour-titre { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--titre-jour); }
.jour-titre .rel {
  background: var(--orange); color: var(--aubergine);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px;
}
.rdvs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* ── Une carte de rendez-vous ── */
.rdv {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 70px 1fr; gap: 14px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 14px 14px 8px 20px;
}
.rdv::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c, var(--violet)); }
.rdv.ici { border: 2px solid var(--orange); }

.rdv-heure { font-size: 20px; font-weight: 700; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.rdv-heure small { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--texte-doux); letter-spacing: 0; }
.rdv-heure.journee { font-size: 15px; line-height: 1.25; }
.rdv-corps { min-width: 0; }

.rdv-type {
  display: inline-block; margin: 0 0 6px;
  background: var(--c, var(--violet)); color: var(--sur-c, var(--aubergine));
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: 3px 10px;
}
.rdv-titre { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rdv-lieu { display: flex; gap: 5px; margin: 4px 0 0; color: var(--texte-doux); font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.rdv-lieu::before {   /* Phosphor map-pin-line (motifs/icones de la charte), en masque : prend la couleur du texte */
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'%3E%3Cline x1='56' y1='232' x2='200' y2='232'/%3E%3Ccircle cx='128' cy='104' r='32'/%3E%3Cpath d='M208 104c0 72-80 128-80 128S48 176 48 104a80 80 0 0 1 160 0Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'%3E%3Cline x1='56' y1='232' x2='200' y2='232'/%3E%3Ccircle cx='128' cy='104' r='32'/%3E%3Cpath d='M208 104c0 72-80 128-80 128S48 176 48 104a80 80 0 0 1 160 0Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.rdv-lieu:empty { display: none; }
.rdv-ics {
  display: inline-flex; align-items: center; gap: 7px; margin: 10px 0 6px;
  min-height: 44px; padding: 8px 14px 8px 11px;
  color: var(--lien); border: 1.5px solid currentColor; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.rdv-ics svg { stroke-width: 1.7; }
.rdv-ics:active { background: var(--trait); }

/* Les types : des APLATS de la palette, texte aubergine (ou crème sur violet) — jamais du texte coloré. */
.t-permanence    { --c: var(--violet); --sur-c: var(--creme); }
.t-etablissement { --c: var(--vert); }
.t-stand         { --c: var(--orange); }
.t-autre         { --c: var(--saumon); }
.rdv.ici         { --c: var(--orange); --sur-c: var(--aubergine); }

/* ── Liste vide / pas de réseau : le cagou ── */
.vide {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  margin-top: 18px; padding: 22px 18px 24px;
  background: var(--carte); border: 1.5px dashed var(--trait-fort); border-radius: var(--rayon);
}
.vide img { width: 72px; height: auto; }
.vide p { margin: 0; max-width: 30em; font-weight: 500; }

/* ── Garder l'appli, vie privée ── */
.apropos { margin: 30px 0 22px; display: grid; gap: 14px; }
.garder {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--trait);
  padding: 14px 16px 14px 10px;
}
.garder[hidden] { display: none; }
.cagou { width: 64px; height: auto; }
.garder-titre { margin: 0 0 8px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.bouton {   /* le bouton principal de la charte : aplat orange, texte aubergine */
  font: 700 15px/1.2 "Raleway", "Helvetica Neue", Arial, sans-serif;
  color: var(--aubergine); background: var(--orange);
  border: 0; border-radius: 999px; padding: 12px 18px; min-height: 46px;
}
.bouton:active { filter: brightness(.94); }
.astuce { margin: 0; font-size: 14.5px; }
.discret { margin: 0; font-size: 13.5px; color: var(--texte-doux); }

/* ── Le bloc fixe « Besoin de parler ? » ── */
.parler {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--barre); color: var(--creme);
  padding: 14px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(49, 35, 67, .22);
}
.parler::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bandeau); }
.parler-titre { max-width: 640px; margin: 0 auto 7px; font-weight: 700; font-size: 14.5px; }
.parler-liens { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tel {
  display: flex; align-items: center; gap: 9px; min-height: 52px;
  background: rgba(255, 247, 240, .10); color: inherit; text-decoration: none;
  border-radius: 14px; padding: 7px 10px;
}
.tel svg { color: var(--orange); width: 22px; height: 22px; stroke-width: 18; }   /* Phosphor phone, viewBox 256 */
.tel strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
.tel small { display: block; font-size: 12px; opacity: .88; line-height: 1.2; }
.tel:active { background: rgba(255, 247, 240, .2); }

@media (min-width: 560px) {
  h1 { font-size: 36px; }
  .logo { width: 170px; }
  .rdv { grid-template-columns: 84px 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .rdv-ics, .tel, .bouton { transition: background-color .15s, filter .15s; }
}