/* =====================================================================
   PontMax — styles, thème « Méditerranée »
   Mobile d'abord : tout est pensé pour un iPhone, puis élargi sur ordinateur.
   Les couleurs sont des "variables" (--nom) : le mode sombre les redéfinit.
   ===================================================================== */

:root {
  --fond: #F3F8FB;          /* blanc chaulé bleuté */
  --carte: #FFFFFF;
  --encre: #0F2A40;         /* bleu nuit : texte */
  --doux: #5F7A8F;          /* texte secondaire */
  --trait: #D6E4EE;         /* pointillés, bordures */
  --case: #EEF5FA;          /* jours travaillés du calendrier */
  --terracotta: #E0663A;    /* jours posés, bouton principal */
  --terracotta-doux: #FBE3D8;
  --soleil: #FFD15C;        /* fériés */
  --soleil-texte: #4A3600;
  --mer: #1559B5;           /* tampon, accents */
  --mer-doux: #D8ECFF;      /* jours off grâce au pont */
  --alerte: #D93A2B;
  --avert-fond: #FFF4D6;
  --avert-texte: #6B4D00;
  --barre: #0F2A40;         /* barre d'onglets */
  --barre-texte: #8FA9BF;
  --entete: linear-gradient(170deg, #1F7BE0 0%, #1FA7D6 60%, #3CCFD0 100%);
  --soleil-entete: #FFF3C4;
  --ombre: 0 8px 24px rgba(20, 70, 120, .12);
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}

/* Mode sombre automatique : la mer de nuit */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0B1622;
    --carte: #14263A;
    --encre: #EAF2F8;
    --doux: #8FA9BF;
    --trait: #24405A;
    --case: #1A2F46;
    --terracotta: #F07A4E;
    --terracotta-doux: #4A2A1F;
    --soleil: #F5C44E;
    --soleil-texte: #3A2A00;
    --mer: #7DB8FF;
    --mer-doux: #183D63;
    --alerte: #FF6B5B;
    --avert-fond: #3D3214;
    --avert-texte: #FFD970;
    --barre: #050D16;
    --barre-texte: #6F8BA3;
    --entete: linear-gradient(170deg, #0B3D6E 0%, #0C5C7E 60%, #0F7F86 100%);
    --soleil-entete: #F4E3A0;
    --soleil-opacite: .45;
    --ombre: 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.45 "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* place pour la barre d'onglets du bas + la zone "home" de l'iPhone */
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 24px;
  position: relative;
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--titre); font-weight: 800; }
h2 { font-size: 1.45rem; margin: 4px 4px 10px; }
h3 { font-size: 1.15rem; margin-bottom: 6px; }

.aide { color: var(--doux); font-size: .88rem; margin: 6px 4px 14px; }

/* ---------- En-tête bleu mer + rond du solde ---------- */
.entete {
  position: relative;
  overflow: hidden;
  background: var(--entete);
  color: #fff;
  padding: calc(18px + env(safe-area-inset-top)) 22px 64px;
}
/* le soleil */
.entete::before {
  content: "";
  position: absolute;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: var(--soleil-entete);
  opacity: var(--soleil-opacite, .85);
  right: -30px; top: -40px;
}
/* première vague (transparente) */
.entete::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: 20px;
  height: 46px;
  background: rgba(255, 255, 255, .25);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* deuxième vague, de la couleur du fond */
.vague {
  position: absolute;
  left: -5%; right: -5%; bottom: -1px;
  height: 40px;
  background: var(--fond);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}
.entete-contenu { position: relative; max-width: 608px; margin: 0 auto; z-index: 2; }
.entete h1 { font-size: 1.75rem; }
.periode-mini { font-size: .9rem; opacity: .92; }

.compteur { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.anneau { flex: none; width: 104px; height: 104px; }
.anneau .piste { stroke: rgba(255, 255, 255, .25); }
.anneau .valeur { stroke: #fff; transition: stroke-dasharray .4s ease; }
.anneau .chiffre { fill: #fff; font: 800 30px var(--titre); }
.anneau .unite { fill: rgba(255, 255, 255, .85); font: 700 10.5px "Nunito", sans-serif; }
.compteur .texte strong { display: block; font: 800 1.2rem var(--titre); }
.compteur .texte small { display: block; font-size: .85rem; opacity: .92; line-height: 1.45; margin-top: 2px; }
.compteur.depasse .anneau .valeur { stroke: #FFB4A8; }
.compteur.depasse .texte strong { color: #FFE1DB; }

/* ---------- Cartes génériques ---------- */
.carte {
  background: var(--carte);
  border-radius: 24px;
  box-shadow: var(--ombre);
  padding: 18px;
  margin-bottom: 16px;
}

/* ---------- Boutons ---------- */
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

.bouton {
  min-height: 50px;           /* cible tactile confortable */
  padding: 10px 18px;
  border-radius: 16px;
  border: 0;
  background: var(--case);
  font-weight: 800;
  width: 100%;
}
.bouton.principal { background: var(--terracotta); color: #fff; }
.bouton.secondaire { background: var(--mer-doux); color: var(--mer); }
.bouton.danger { background: transparent; color: var(--alerte); }
.bouton:active, .bouton-rond:active, .petit-bouton:active { transform: scale(.97); }

.bouton-rond {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  border: 0;
  background: var(--case);
  font-size: 1.4rem;
  line-height: 1;
}
.bouton-rond:disabled { opacity: .35; }

.boutons-ligne { display: flex; gap: 10px; }
.boutons-colonne { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* Contrôle segmenté (choix exclusif façon iOS) */
.segmente { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--case); }
.segmente button {
  flex: 1; min-height: 48px;
  border: 0; border-radius: 12px; background: transparent;
  font-weight: 800; padding: 6px 8px;
}
.segmente button small { display: block; font-weight: 500; font-size: .75rem; color: var(--doux); }
.segmente button[aria-pressed="true"] { background: var(--carte); box-shadow: var(--ombre); color: var(--mer); }
.segmente.petit button { min-height: 36px; font-size: .85rem; padding: 4px 12px; }

.titre-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Interrupteurs (cases à cocher stylées en "switch" iOS) */
.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; min-height: 56px; }
.interrupteur + .interrupteur { border-top: 2px dashed var(--trait); }
.interrupteur small { display: block; color: var(--doux); font-size: .8rem; }
.interrupteur input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 52px; height: 32px;
  border-radius: 16px; background: var(--case);
  position: relative; transition: background .2s; margin: 0;
}
.interrupteur input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.interrupteur input:checked { background: var(--mer); }
.interrupteur input:checked::after { transform: translateX(20px); }

/* Solde avec boutons − / + */
.stepper { display: flex; align-items: center; gap: 12px; justify-content: center; }
.stepper input {
  width: 110px; height: 56px; text-align: center;
  font: 800 1.7rem var(--titre);
  border-radius: 16px; border: 0; background: var(--case);
}

/* ---------- Billets (les ponts) ---------- */
.groupe-pont { margin-bottom: 18px; }
.billet {
  background: var(--carte);
  border-radius: 24px;
  box-shadow: var(--ombre);
  margin-bottom: 12px;
  position: relative;
}
.billet.posee { box-shadow: 0 0 0 3px var(--terracotta), var(--ombre); }
.billet-haut { padding: 16px 18px 12px; position: relative; }
.ruban {
  display: inline-block;
  background: var(--soleil); color: var(--soleil-texte);
  font-weight: 800; font-size: .75rem;
  padding: 4px 10px; border-radius: 99px; margin-bottom: 6px;
}
.billet h3 { font-size: 1.3rem; padding-right: 76px; margin: 0; }
.billet .variante-nom { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }

.trajet { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-right: 72px; }
.trajet small { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: var(--doux); }
.trajet b { font-size: 1.05rem; white-space: nowrap; }
.fleche { flex: 1; min-width: 24px; border-top: 2px dashed var(--trait); position: relative; }
.fleche::after {
  content: "🌴"; position: absolute; left: 50%; top: -13px;
  transform: translateX(-50%); background: var(--carte); padding: 0 3px; font-size: .9rem;
}

/* tampon du ratio */
.tampon {
  position: absolute; right: 16px; top: 14px;
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--mer); color: var(--mer);
  display: grid; place-items: center;
  font: 800 1.35rem var(--titre);
  transform: rotate(-12deg);
}
.tampon.max { border-color: var(--terracotta); color: var(--terracotta); }

/* perforation du billet (pointillés + deux encoches) */
.perfo { border-top: 2px dashed var(--trait); margin: 0 14px; position: relative; }
.perfo::before, .perfo::after {
  content: ""; position: absolute; top: -12px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--fond);
}
.perfo::before { left: -25px; }
.perfo::after { right: -25px; }

.billet-bas { padding: 12px 18px 16px; }
.billet-bas .ligne-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.billet-bas .ligne-action p { flex: 1 1 180px; }
.billet-bas p { font-size: .92rem; color: var(--doux); margin: 0; }
.billet-bas p strong { color: var(--encre); }
.billet-bas .bouton { width: auto; flex: none; padding: 10px 18px; }
.details { font-size: .85rem; color: var(--doux); margin: 8px 0 0; }

.alerte-solde { color: var(--alerte); font-size: .85rem; font-weight: 800; margin-top: 8px; }
.vide { text-align: center; color: var(--doux); padding: 28px 12px; }

/* ---------- Calendrier ---------- */
.nav-mois { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.nav-mois h2 { margin: 0; font-size: 1.35rem; text-transform: capitalize; }
.grille-entete, .grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.grille-entete span { text-align: center; font-size: .75rem; color: var(--doux); font-weight: 800; padding-bottom: 4px; }

.jour {
  aspect-ratio: 1; min-height: 40px;
  border: 0; border-radius: 14px;
  background: transparent;
  font-weight: 800; font-size: .95rem;
  position: relative; padding: 0;
}
.jour.travaille { background: var(--case); }
.jour.we { color: var(--doux); opacity: .75; }
.jour.off { background: var(--mer-doux); color: var(--mer); opacity: 1; }
.jour.ferie { background: var(--soleil); color: var(--soleil-texte); opacity: 1; }
.jour.samedi { background: var(--terracotta-doux); color: var(--terracotta); opacity: 1; }
.jour.pose { background: var(--terracotta); color: #fff; }
.jour.aujourdhui::after {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: currentColor;
}
.jour.passe, .jour.hors { opacity: .35; }
.jour:disabled { cursor: default; }

.feries-du-mois { list-style: none; padding: 0; margin: 14px 0 0; font-size: .88rem; }
.feries-du-mois li { padding: 2px 0; }
.feries-du-mois li::before { content: "☀ "; color: #E0A800; }

.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .8rem; color: var(--doux); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.pastille { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.pastille.pose { background: var(--terracotta); }
.pastille.samedi { background: var(--terracotta-doux); box-shadow: inset 0 0 0 1.5px var(--terracotta); }
.pastille.ferie { background: var(--soleil); }
.pastille.we { background: var(--case); }
.pastille.off { background: var(--mer-doux); }

/* résumé en direct sous le calendrier : bandeau bleu nuit */
.resume {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
  background: var(--barre); color: #fff;
}
.resume strong { display: block; font: 800 1.6rem var(--titre); }
.resume span { font-size: .8rem; color: var(--barre-texte); }

.ligne-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ligne-dates label { font-size: .85rem; color: var(--doux); font-weight: 700; }
.ligne-dates input {
  display: block; width: 100%; margin-top: 4px;
  min-height: 48px; padding: 8px 10px;
  border-radius: 14px; border: 0;
  background: var(--case); color: var(--encre);
}

/* ---------- Liste "Mes congés" ---------- */
.absence .ligne-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.absence .ratio { font: 800 1.4rem var(--titre); color: var(--mer); }
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.chiffres div { background: var(--case); border-radius: 14px; padding: 8px 12px; }
.chiffres strong { display: block; font: 800 1.25rem var(--titre); }
.chiffres span { font-size: .78rem; color: var(--doux); }
.ligne { font-size: .9rem; margin: 3px 0; }
.ligne b { font-weight: 800; }
.absence .petit-bouton {
  border: 0; background: var(--case);
  border-radius: 12px; min-height: 42px; padding: 6px 14px; font-weight: 800; font-size: .88rem;
}

/* ---------- Barre d'onglets flottante ---------- */
.barre-onglets {
  position: fixed; z-index: 20;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-width: 616px; margin: 0 auto;
  display: flex; gap: 4px;
  background: var(--barre);
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(15, 42, 64, .35);
}
.barre-onglets button {
  flex: 1; border: 0; background: transparent;
  min-height: 56px; border-radius: 18px;
  font-size: .72rem; font-weight: 800;
  color: var(--barre-texte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.barre-onglets button span { font-size: 1.35rem; filter: grayscale(1); opacity: .75; }
.barre-onglets button[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.barre-onglets button[aria-current="page"] span { filter: none; opacity: 1; }

/* ---------- Petit message temporaire ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(100px + env(safe-area-inset-bottom));
  background: var(--encre); color: var(--fond);
  padding: 10px 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 800;
  z-index: 30; max-width: calc(100% - 32px); text-align: center;
}