/* ============================================================
   POMME — iPHONE, iPAD ET MACBOOK
   ------------------------------------------------------------
   Cette feuille se charge EN DERNIER et ne fait qu'une chose :
   rattraper ce que Safari fait autrement. Elle n'invente aucune
   couleur et ne change aucune mise en page voulue.

   Regle de lecture : partout on ecrit d'abord la valeur ANCIENNE,
   puis la moderne juste apres. Un Safari recent garde la seconde,
   un Safari ancien ne comprend pas la seconde et garde la
   premiere. C'est le seul ordre qui marche.

   Cible basse : iOS 12 (iPhone 6). En Cote d'Ivoire beaucoup de
   telephones sont d'occasion et n'iront jamais plus haut.
   ============================================================ */

/* ------------------------------------------------------------
   1. LE ZOOM AU TOUCHER D'UN CHAMP
   Safari agrandit la page des qu'on entre dans un champ dont le
   texte fait moins de 16 px — et il ne la reduit jamais apres.
   « maximum-scale=1 » ne l'en empeche plus depuis iOS 10 : la
   SEULE parade est une taille de 16 px.
   ------------------------------------------------------------ */
input, textarea, select {
  font-size: 16px;
  /* Safari redessine les champs a sa facon : coins arrondis gris,
     ombre interieure. On lui retire le pinceau. */
  -webkit-appearance: none;
  appearance: none;
}

/* ------------------------------------------------------------
   2. LE GRIS AU TOUCHER, LA LOUPE, LA SELECTION
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;      /* pas d'agrandissement en paysage */
  -webkit-tap-highlight-color: transparent;
}
button, .onglet, .option, .tuile, .tuile-parcours, .carte-cours, .serv, .pastille {
  -webkit-touch-callout: none;         /* pas de menu au appui long */
  -webkit-user-select: none;
  user-select: none;
}
/* Le texte des lecons, lui, doit rester copiable. */
.dedans p, .enonce, .expl, .bloc { -webkit-user-select: text; user-select: text; }

/* ------------------------------------------------------------
   3. L'ELASTIQUE
   Sur iOS toute la page rebondit quand on tire vers le bas, et on
   voit le fond blanc du navigateur derriere l'application.

   ATTENTION AU SITE : lui doit defiler normalement. On bloque donc
   seulement « mode-app », jamais « site ».
   ------------------------------------------------------------ */
html { height: 100%; background: var(--fond); }
body.mode-app {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--fond);
}
body.site { overscroll-behavior-y: none; }
.contenu, .cnx {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;   /* defilement a inertie */
}

/* ------------------------------------------------------------
   4. L'ENCOCHE EN PAYSAGE
   Le haut et le bas etaient deja traites. Sur le cote, un iPhone
   couche mange 44 px a gauche ou a droite.
   ------------------------------------------------------------ */
@media (orientation: landscape) {
  .dedans, .cnx-dedans, .lecon-corps {
    padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
  }
}

/* ------------------------------------------------------------
   5. LE CLAVIER QUI MONTE
   Safari ne retaille pas la fenetre quand le clavier apparait :
   il fait GLISSER la page sous le clavier, et un element en
   position fixed sort de l'ecran. On mesure la vraie hauteur
   visible en JavaScript (voir appareil.js) et on la pose ici.
   ------------------------------------------------------------ */
body.clavier-ouvert .app {
  height: var(--hauteur-visible, 100%);
  bottom: auto;
}
body.clavier-ouvert .cnx { justify-content: flex-start; }
body.clavier-ouvert .cnx-dedans { padding-bottom: 24px; }
body.clavier-ouvert .cnx-robot { display: none; }

/* ------------------------------------------------------------
   6. CE QUE LES VIEUX SAFARI NE CONNAISSENT PAS
   ------------------------------------------------------------ */

/* « inset » n'existe qu'a partir de Safari 14.1. Sans lui
   l'application n'a plus aucune dimension : ecran noir. */
@supports not (inset: 0) {
  .app { top: 0; right: 0; bottom: 0; left: 0; }
  .trace, .voile { top: 0; right: 0; bottom: 0; left: 0; }
  /* Les trois dispositions de grand-ecran.css remettent « left »
     et « right » a la main ; seule la colonne centree a besoin
     qu'on repose le decalage ici. */
  @media (min-width: 560px) and (max-width: 1059px) {
    .app { left: 50%; right: auto; }
  }
}

/* « gap » dans un flex n'existe qu'a partir de Safari 14.1.
   Sans lui tout se colle. On rattrape les rangees qui comptent. */
@supports not (gap: 1px) {
  .haut > * + *      { margin-left: 10px; }
  .cnx-services > * + * { margin-left: 10px; }
  .ligues > * + *    { margin-left: 10px; }
  .tuiles > * + *    { margin-left: 10px; }
  .barres > * + *    { margin-left: 3px; }
  .cnx-form > * + *  { margin-top: 14px; }
  .pastille i        { margin-right: 8px; }
  .onglet span       { margin-top: 4px; }
}

/* « aspect-ratio » n'existe qu'a partir de Safari 15. */
@supports not (aspect-ratio: 1) {
  .ligue        { height: 96px; }
  .calendrier i { height: 11px; }
  .cal-legende i { height: 11px; }
}

/* « color-mix » n'existe qu'a partir de Safari 16.2. Partout ou
   il sert, on remet une couleur simple juste avant. */
.option.choisie { background: #16202A; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.option.juste   { background: #12261C; background: color-mix(in srgb, var(--succes) 16%, var(--surface)); }
.option.faux    { background: #2A1518; background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.lecon-pied.juste { background: #0D1C14; background: color-mix(in srgb, var(--succes) 14%, var(--fond)); }
.lecon-pied.faux  { background: #1C0D10; background: color-mix(in srgb, var(--danger) 12%, var(--fond)); }
.rang.moi       { background: #131C22; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.cnx-erreur     { background: #2C161A; background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.calendrier i.n1, .cal-legende i.n1 { background: #1D2630; background: color-mix(in srgb, var(--accent) 30%, var(--surface-3)); }
.calendrier i.n2, .cal-legende i.n2 { background: #26343F; background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.calendrier i.n3, .cal-legende i.n3 { background: #2E404D; background: color-mix(in srgb, var(--accent) 78%, var(--surface-3)); }

/* Le flou derriere la barre du site : prefixe obligatoire sur
   Safari, sur Mac comme sur iPhone. */
.site-haut, .barre-site, .voile-flou {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ------------------------------------------------------------
   7. LE BANDEAU « RIEN NE S'ENREGISTRE »
   Un fichier ouvert depuis les Fichiers ou WhatsApp n'a pas
   d'adresse web : Safari lui refuse le droit d'ecrire. La demo
   marche, mais la progression disparait a la fermeture. Le dire
   vaut mieux que de le laisser decouvrir.
   ------------------------------------------------------------ */
/* L'application se RETRECIT pour lui laisser la place. Pose en
   simple surimpression, le bandeau recouvrait la barre d'onglets :
   sur un telephone, « Profil » et « Pratique » devenaient
   inatteignables tant qu'on ne l'avait pas ferme. */
body.avec-bandeau .app { bottom: var(--h-bandeau, 0px); }
body.site.avec-bandeau { padding-bottom: var(--h-bandeau, 0px); }

.bandeau-appareil {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  /* Sous l'intro (90), au-dessus de tout le reste. */
  z-index: 80;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: #16120A;
  border-top: 1px solid #3A2E12;
  color: #E8D9A8;
  font-size: 12px;
  line-height: 1.45;
}
.bandeau-appareil b { color: var(--or); }
.bandeau-appareil .fermer {
  flex: none;
  margin-left: auto;
  background: none; border: 1px solid #3A2E12; border-radius: 8px;
  color: #E8D9A8;
  font: 700 11px/1 'Poppins', sans-serif;
  padding: 7px 10px;
  cursor: pointer;
}

/* ------------------------------------------------------------
   8. MACBOOK
   Sur un grand ecran Safari rend les polices plus fines que
   Chrome ; sans lissage le texte blanc sur noir devient gris.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}