/* =========================================================================
   Guide Maroc — système visuel repris du brand guide « menu »
   Noir épais, bordures franches, bandeaux de couleur plate, mono pour les
   métadonnées. Polices système uniquement : aucune requête réseau.
   ========================================================================= */

:root {
  --papier:   #F2F1EE;
  --carte:    #FFFFFF;
  --encre:    #111111;
  --gris:     #6B6B68;
  --gris-pale:#9B9B96;
  --trait:    #111111;
  --trait-fin:#D9D8D3;
  --rouge:    #E8452C;

  /* bandeaux de catégorie */
  --jaune:  #F5DE7E;
  --bleu:   #A9CBEB;
  --sable:  #EFC7A0;
  --vert:   #C2D8B4;
  --lilas:  #D3CAE8;
  --rose:   #F3C9C2;
  --sur-bande: #111111;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --large: 34rem;
  --marge: 18px;
  --bord: 1.5px;
  --r: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:   #131312;
    --carte:    #1C1C1A;
    --encre:    #F2F1EE;
    --gris:     #9B9B94;
    --gris-pale:#76766F;
    --trait:    #EDECE8;
    --trait-fin:#33332F;
    --rouge:    #FF6A52;

    --jaune:  #6E5F2A;
    --bleu:   #3C566E;
    --sable:  #6F5335;
    --vert:   #4C5F42;
    --lilas:  #4B4463;
    --rose:   #6B4741;
    --sur-bande: #F2F1EE;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }

a { color: var(--encre); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

button { font: inherit; color: inherit; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--carte); padding: 12px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- Étiquettes mono ---------- */

.mono, .eyebrow, .paire dt, .progres, .compte-etiq, .selecteur-jour label, .pied-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: var(--bord) solid var(--trait);
  padding-top: env(safe-area-inset-top);
}

.entete-haut {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  max-width: var(--large); margin: 0 auto;
  padding: 12px var(--marge) 10px;
}

.titre-bloc { min-width: 0; }
.titre-ligne { display: flex; align-items: baseline; gap: 7px; }

h1 { font-size: 26px; line-height: 1; text-transform: lowercase; }

.point {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rouge); flex: none;
}

.surtitre {
  margin: 0; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  white-space: nowrap; margin-top: 3px;
}

.etat {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris);
  text-align: right; max-width: 38%; line-height: 1.35; flex: none;
}

.pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-pale); flex: none; }
.etat.pret .pastille { background: #4E8B4A; }
.etat.attente .pastille { background: var(--rouge); }
.etat.attente { color: var(--rouge); }

/* ---------- Recherche ---------- */

.recherche-bloc { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge) 10px; }

.champ {
  display: flex; align-items: center; gap: 9px;
  background: var(--carte);
  border: var(--bord) solid var(--trait);
  border-radius: 999px; padding: 0 16px;
}

.loupe { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--gris); stroke-width: 1.8; stroke-linecap: round; }

#recherche {
  flex: 1; min-width: 0; height: 46px;
  border: 0; background: none; color: var(--encre);
  font: inherit; font-size: 16px; outline: none;
  -webkit-appearance: none; appearance: none;
}
#recherche::-webkit-search-decoration,
#recherche::-webkit-search-cancel-button { -webkit-appearance: none; }
#recherche::placeholder { color: var(--gris-pale); }

.effacer { border: 0; background: none; color: var(--gris); font-size: 24px; line-height: 1; width: 30px; height: 46px; cursor: pointer; }

/* ---------- Onglets ---------- */

.onglets {
  display: flex; gap: 7px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  max-width: var(--large); margin: 0 auto;
  padding: 0 var(--marge) 11px;
}
.onglets::-webkit-scrollbar { display: none; }

.onglet {
  flex: none; cursor: pointer;
  padding: 0 16px; min-height: 44px;
  background: none; color: var(--encre);
  border: var(--bord) solid var(--trait); border-radius: 999px;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.onglet[aria-selected="true"] { background: var(--encre); color: var(--papier); }

/* ---------- Corps ---------- */

main { max-width: var(--large); margin: 0 auto; padding: 0 var(--marge); }

.section { display: none; padding: 22px 0 8px; }
.section.actif { display: block; }

.section > h2 { font-size: 27px; line-height: 1.08; text-transform: lowercase; }
.souligne { box-shadow: inset 0 -6px 0 var(--rouge); }

.compteur, .resultats-info {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris);
  margin: 14px 0 12px;
}
.resultats-info { padding-top: 14px; }

/* ---------- Cartes ---------- */

.bloc {
  background: var(--carte);
  border: var(--bord) solid var(--trait);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
}

.bande {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 15px;
  border-bottom: var(--bord) solid var(--trait);
  background: var(--jaune); color: var(--sur-bande);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
}
.bande .num { opacity: .65; flex: none; }

.bande.vol    { background: var(--bleu); }
.bande.ville  { background: var(--jaune); }
.bande.desert { background: var(--sable); }
.bande.vallee { background: var(--vert); }
.bande.info   { background: var(--lilas); }
.bande.jaune  { background: var(--jaune); }
.bande.bleu   { background: var(--bleu); }
.bande.lilas  { background: var(--lilas); }
.bande.rose   { background: var(--rose); }
.bande.alerte { background: var(--rose); }

.corps { padding: 15px; }

.bloc h3 { font-size: 19px; line-height: 1.2; }
.sous { color: var(--gris); font-size: 13.5px; margin: 3px 0 0; }
.resume { margin: 9px 0 0; color: var(--encre); font-size: 15.5px; }

.corps h4 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  margin: 18px 0 7px;
}

.groupe-titre {
  font-size: 12px; font-family: var(--mono); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  margin: 24px 0 10px;
}
.groupe-titre:first-of-type { margin-top: 2px; }

/* Listes */

.liste { margin: 0; padding: 0; list-style: none; }
.liste li {
  position: relative; padding-left: 18px; margin-bottom: 6px;
  font-size: 15.5px;
}
.liste li::before {
  content: ""; position: absolute; left: 1px; top: 9px;
  width: 7px; height: 1.5px; background: var(--encre);
}

.notes { margin-top: 16px; border-top: var(--bord) solid var(--trait-fin); padding-top: 12px; }
.notes p { margin: 0 0 8px; font-size: 14.5px; color: var(--gris); }
.notes p:last-child { margin-bottom: 0; }
.notes p strong, .alerte-txt { color: var(--rouge); font-weight: 700; }

/* Bandeau de trajet : d'où à où, en un coup d'oeil */

.route {
  display: flex; margin: 14px 0 4px;
  border: var(--bord) solid var(--trait); border-radius: 8px;
  overflow: hidden;
}
.route > div { flex: 1; min-width: 0; padding: 8px 11px; border-left: 1px solid var(--trait-fin); }
.route > div:first-child { border-left: 0; }
.route dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris); margin-bottom: 2px;
}
.route dd { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }

/* Ligne de temps de la journée */

.horaire { list-style: none; margin: 0; padding: 0; }

.hr-ligne { display: flex; gap: 10px; }

.hr-h {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  width: 54px; flex: none; text-align: right;
  color: var(--gris); padding-top: 5px;
}

.hr-corps {
  flex: 1; min-width: 0; position: relative;
  padding: 3px 0 13px 17px;
  border-left: 1.5px solid var(--trait-fin);
}
.hr-corps::before {
  content: ""; position: absolute; left: -6px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--carte); border: 1.5px solid var(--trait-fin);
}
.hr-ligne:last-child .hr-corps { border-left-color: transparent; padding-bottom: 2px; }

.hr-texte { font-size: 15.5px; }

/* Une heure fixe : pastille pleine, texte appuyé */
.hr-ligne.fixe .hr-h { color: var(--encre); font-weight: 700; }
.hr-ligne.fixe .hr-corps { border-left-color: var(--trait); }
.hr-ligne.fixe .hr-corps::before { background: var(--encre); border-color: var(--encre); }
.hr-ligne.fixe .hr-texte { font-weight: 600; }

/* Réservation rappelée dans la journée */

.resa {
  border: var(--bord) solid var(--trait); border-radius: 8px;
  padding: 11px 13px; margin-bottom: 8px;
}
.resa-nom { font-weight: 700; font-size: 15px; line-height: 1.25; }
.resa-date {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gris); margin-top: 3px;
}
.resa .action { min-height: 38px; font-size: 13px; padding: 0 12px; }

/* Paires */

.paires { margin: 0; }
.paire {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--trait-fin);
  font-size: 15px;
}
.paire:first-child { border-top: 0; padding-top: 2px; }
.paire dt { flex: none; width: 76px; color: var(--gris); padding-top: 2px; }
.paire dd { margin: 0; flex: 1; min-width: 0; }

.confirmation, .gps {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em;
}
.confirmation { background: var(--papier); padding: 2px 7px; border-radius: 4px; }
.gps { color: var(--gris); }

.montant { font-weight: 700; }
.montant.du { color: var(--rouge); }

.acf { color: var(--rouge); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }

/* Actions */

.actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.action {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 15px;
  border: var(--bord) solid var(--trait); border-radius: 999px;
  background: var(--carte); color: var(--encre);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.action:active { background: var(--encre); color: var(--papier); }
.action.copie { background: var(--encre); color: var(--papier); }
.action.inerte { border-style: dashed; color: var(--gris); font-weight: 400; }

.action .ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.externe::after {
  content: ""; width: 10px; height: 10px; margin-left: 1px; flex: none;
  background: currentColor; opacity: .5;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  --m: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="black" d="M6 1h9v9h-2V4.4L5.4 12 4 10.6 11.6 3H6V1z"/><path fill="black" d="M1 4h4v2H3v7h7v-2h2v4H1V4z"/></svg>');
}

/* ---------- Aujourd'hui ---------- */

.compte { text-align: center; padding: 22px 16px; }
.compte .gros { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -.04em; display: block; }
.compte p { margin: 8px 0 0; font-size: 15px; }
.compte .compte-etiq { color: var(--gris); display: block; margin-bottom: 8px; }

.selecteur-jour { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.selecteur-jour label { color: var(--gris); flex: none; }
.selecteur-jour select {
  flex: 1; min-width: 0; min-height: 44px; font: inherit; font-size: 15px;
  background: var(--carte); color: var(--encre);
  border: var(--bord) solid var(--trait); border-radius: 999px;
  padding: 0 15px; -webkit-appearance: none; appearance: none;
  text-overflow: ellipsis;
}

/* ---------- Phrases ---------- */

.phrase { padding: 11px 0; border-top: 1px solid var(--trait-fin); }
.phrase:first-child { border-top: 0; padding-top: 0; }
.phrase .fr { font-size: 15.5px; font-weight: 600; }
.phrase .ar {
  font-size: 21px; line-height: 1.5; direction: rtl; text-align: right;
  margin: 2px 0; color: var(--gris);
  font-family: "Geeza Pro", "Al Nile", serif;
}
.phrase .tr { font-family: var(--mono); font-size: 14px; color: var(--rouge); }

/* ---------- Cases à cocher ---------- */

.rappel {
  background: var(--carte); border: var(--bord) solid var(--trait);
  border-left: 5px solid var(--rouge);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px;
  font-size: 15px;
}

.coche {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 8px 0;
  border-top: 1px solid var(--trait-fin);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.coche:first-of-type { border-top: 0; }

.coche input {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; flex: none; margin: 2px 0 0;
  border: var(--bord) solid var(--trait); border-radius: 5px;
  background: var(--carte); cursor: pointer;
  display: grid; place-content: center;
}
.coche input::before {
  content: ""; width: 11px; height: 6px;
  border-left: 2px solid var(--papier); border-bottom: 2px solid var(--papier);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .12s ease-out;
}
.coche input:checked { background: var(--encre); }
.coche input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

.coche span { font-size: 15.5px; padding-top: 1px; }
.coche input:checked + span { color: var(--gris-pale); text-decoration: line-through; }

.progres { color: var(--gris); font-weight: 400; }

.reinit {
  border: var(--bord) solid var(--trait); background: none; color: var(--encre);
  border-radius: 999px; min-height: 44px; padding: 0 18px;
  font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 10px;
}

/* ---------- Recherche : résultats ---------- */

.vide { text-align: center; color: var(--gris); padding: 46px 20px; font-size: 15px; }
mark { background: var(--jaune); color: var(--sur-bande); border-radius: 2px; padding: 0 2px; }

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

.pied {
  max-width: var(--large); margin: 34px auto 0;
  padding: 24px var(--marge) 10px;
  border-top: var(--bord) solid var(--trait);
  text-align: center;
}

.btn-maj {
  border: var(--bord) solid var(--trait); background: var(--carte);
  border-radius: 999px; min-height: 46px; padding: 0 22px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; color: var(--encre);
}
.btn-maj:active { background: var(--encre); color: var(--papier); }
.btn-maj:disabled { opacity: .45; }

.pied-msg { font-size: 13.5px; margin: 12px 0 0; }
.pied-msg.err { color: var(--rouge); }

.pied-meta { color: var(--gris-pale); margin: 16px 0 0; line-height: 1.9; font-size: 10px; }

@media (min-width: 700px) {
  body { font-size: 17px; }
  h1 { font-size: 30px; }
  .section > h2 { font-size: 32px; }
  .corps { padding: 18px 20px; }
  .bande { padding: 10px 20px; }
}

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