/* ============================================================
   base.css - jetons de design, reset, typographie, controles
   Direction visuelle reprise du carnet papier "La Quete".
   ============================================================ */

:root{
  /* couleurs du carnet */
  /* teintes du carnet, utilisees pour les traits, les titres et les fonds clairs */
  --automne:#E0561F;  --hiver:#1F76A0;  --printemps:#3F8F4F;  --ete:#D99512;
  --coffre:#7A3B96;   --encre:#16233F;  --trait:#C9D1DE;

  /* Gris de texte secondaire. L'ancien #6C7689 tombait a 4,06 sur le
     fond creme et a 4,00 sur les pastilles neutres, alors qu'il porte
     les plus petites tailles du carnet. Celui-ci tient 5,28 et 5,95. */
  --gris:#5A6478;

  /* variantes assombries, reservees aux fonds portant du texte blanc.
     Les teintes ci-dessus tombaient a 2,5 de contraste sur du blanc,
     ce qui rendait le bouton principal illisible en plein soleil. */
  --automne-fonce:#BF4413; --hiver-fonce:#18617F;
  --printemps-fonce:#2F7440; --ete-fonce:#8A5E06; --coffre-fonce:#68307F;

  /* ------------------------------------------------------------
     L'ENCRE d'une terre : la meme teinte, mais posee EN TEXTE sur du
     blanc. C'est le cas inverse du precedent, et il n'avait jamais
     ete traite : un titre de coffre en Terre d'Ete tombait a 2,54 de
     contraste, soit illisible au soleil un tiers de l'annee.
     Le trait, les bordures et les fonds gardent la teinte claire du
     carnet : on ne corrige que l'encre.
     ------------------------------------------------------------ */
  --automne-encre:#BF4413; --hiver-encre:#18617F;
  --printemps-encre:#2F7440; --ete-encre:#8A5E06; --coffre-encre:#68307F;

  /* declinaisons claires, pour les fonds */
  --automne-clair:#FDEEE6; --hiver-clair:#E7F2F7;
  --printemps-clair:#EAF4EC; --ete-clair:#FBF2DF; --coffre-clair:#F3EBF8;

  /* neutres */
  --fond:#F4F1EC;
  --papier:#FFFFFF;
  --encre-douce:#31405F;
  --voile:rgba(22,35,63,.45);

  /* saison active, reaffectee par js selon la semaine en cours */
  --saison:var(--automne);
  --saison-clair:var(--automne-clair);
  --saison-fonce:var(--automne-fonce);
  --saison-encre:var(--automne-encre);

  /* Le grain du papier de la carte du defi (7.2.0) : un bruit tres
     leger, brun, qui fait d'un blanc lisse une feuille. Les « # » d'une
     URI de donnees s'ecrivent %23, sinon tout ce qui suit est jete. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* rythme */
  --r-m:16px; --r-l:22px; --r-xl:30px;

  /* ------------------------------------------------------------
     Les ombres, en trois couches et en teinte chaude.
     ------------------------------------------------------------
     Elles etaient bleu-gris (rgba(22,35,63,...)) sur un fond creme :
     une ombre froide sur du papier chaud, c'est la signature d'une
     maquette, pas d'un objet pose. La teinte passe donc au brun-
     cachou, et chaque ombre se lit en trois plans - un contact
     serre, une ambiante, un halo lointain - au lieu de deux.
     ------------------------------------------------------------ */
  --ombre-s:
    0 1px 1px rgba(74,48,24,.09),
    0 2px 6px rgba(74,48,24,.06);
  --ombre-m:
    0 1px 2px rgba(74,48,24,.10),
    0 4px 10px rgba(74,48,24,.07),
    0 14px 30px rgba(74,48,24,.08);
  --ombre-l:
    0 2px 4px rgba(74,48,24,.10),
    0 8px 20px rgba(74,48,24,.09),
    0 28px 56px rgba(74,48,24,.13);

  /* Le rebord de papier : un filet clair en haut, qui donne son
     epaisseur a la carte, et une arete teintee qui la detache du
     fond. Blanc sur creme, les cartes n'avaient aucune silhouette. */
  --rebord:inset 0 1px 0 rgba(255,255,255,.9);
  --arete:0 0 0 1px rgba(74,48,24,.07);

  /* zones sures iOS */
  --haut:env(safe-area-inset-top,0px);
  --bas:env(safe-area-inset-bottom,0px);

  --ressort:cubic-bezier(.34,1.56,.64,1);
  --doux:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* html et body ne defilent JAMAIS, quoi qu'il arrive dans #vue.
   ------------------------------------------------------------
   #appli{height:100dvh;overflow:hidden} suffit sur un navigateur de
   bureau, mais pas dans une PWA installee sur iPhone : des qu'une
   carte pousse #vue jusqu'a son propre defilement, un doigt qui
   glisse peut faire rebondir la PAGE entiere (le "rubber-band" natif
   de Safari) et emporter #entete et #onglets avec elle, meme s'ils
   sont hors du flux dans #appli - parce que #appli lui-meme reste un
   bloc ordinaire dans le flux de body, et body n'avait qu'un
   min-height. Signale par Xavier : l'entete montait avec le
   defilement sur l'accueil, jamais sur les autres onglets - ceux dont
   le contenu ne pousse jamais #vue a defiler. `height` (au lieu de
   min-height) + `overflow:hidden` empechent body de grandir au-dela
   du viewport, donc iOS n'a plus rien a faire rebondir. */
html{-webkit-text-size-adjust:100%;height:100%;overflow:hidden}

body{
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:16px; line-height:1.5; color:var(--encre);
  /* Un grain de 3 px, invisible en soi : il retire au fond son aspect
     d'aplat numerique. Aucun filtre, aucune image - une trame CSS. */
  background:
    radial-gradient(rgba(120,90,50,.038) 1px, transparent 1px) 0 0 / 3px 3px,
    var(--fond);
  height:100dvh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

h1,h2,h3,h4{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1{font-size:1.75rem} h2{font-size:1.35rem} h3{font-size:1.1rem}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ------------------------------------------------------------
   Aucun zoom, nulle part
   ------------------------------------------------------------
   Arbitre le 12 septembre 2026, contre la regle precedente qui
   preservait le pincement : le carnet se tape beaucoup, et le double
   tap pour zoomer se declenchait tout seul - sur les fleches de
   semaine, sur les cases du soir, sur les cases du plateau.

   Trois couches, parce qu'aucune ne suffit seule :
     1. user-scalable=no et maximum-scale=1 dans le viewport (index.html),
        respectes par Android, ignores par iOS ;
     2. touch-action:manipulation sur le document, qui supprime le
        double tap partout, iOS compris ;
     3. les evenements gesturestart / gesturechange, bloques dans
        js/app.js : c'est le seul moyen de couper le pincement sur
        iPhone.
   Rien ne dependant d'un agrandissement, la lisibilite est portee par
   les tailles de base - jamais par le zoom du lecteur.
   ------------------------------------------------------------ */
html,body,
button,a,summary,label,input,.soir,.case-plateau,.mini-plateau .mc{
  touch-action:manipulation;
}
a{color:var(--hiver-encre)}

[hidden]{display:none !important}

/* ---------- focus ----------
   Aucun etat de focus n'existait : grep outline ne trouvait que des
   outline:none. L'application tourne aussi sur l'ordinateur familial,
   et un enfant qui navigue au clavier ne voyait jamais ou il etait. */
:focus-visible{
  outline:3px solid color-mix(in srgb, var(--saison-encre) 58%, #fff);
  outline-offset:3px;
  border-radius:inherit;
}
/* la souris ne declenche jamais de contour */
:focus:not(:focus-visible){outline:none}

/* ---------- boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:12px 22px;
  font-family:'Fredoka';font-size:1.05rem;font-weight:500;
  line-height:1.25;text-align:center;
  border-radius:var(--r-m);
  background:var(--encre);color:#fff;
  box-shadow:var(--ombre-s);
  /* Transition asymetrique : l'enfoncement est plus rapide que le
     retour. C'est ce decalage, et lui seul, qui donne la sensation
     d'une matiere qui cede puis reprend sa forme. */
  transition:transform .2s var(--ressort), box-shadow .2s var(--doux),
             background .18s, filter .18s;
}
.bouton:active{
  transform:scale(.965);
  box-shadow:0 1px 2px rgba(74,48,24,.12);
  filter:brightness(.97);
  transition-duration:.07s;
}
.bouton--saison{background:var(--saison-fonce)}
.bouton--coffre{background:var(--coffre-fonce)}
.bouton--plein{width:100%}
.bouton--grand{min-height:62px;font-size:1.2rem;border-radius:var(--r-l)}
.bouton--doux{
  background:var(--papier);color:var(--encre);
  box-shadow:inset 0 0 0 2px var(--trait);
}
.bouton--fantome{background:none;box-shadow:none;color:var(--gris);font-weight:400}
.bouton--fantome:active{background:rgba(22,35,63,.05)}
.bouton:disabled{opacity:.4;pointer-events:none}

/* ---------- champs ---------- */
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.champ > label{font-size:.85rem;font-weight:700;color:var(--gris);padding-left:2px}
.champ input[type=text],
.champ input[type=email],
.champ input[type=password],
.champ input[type=date],
.champ textarea{
  width:100%;min-height:52px;padding:12px 16px;
  background:var(--papier);
  border:2px solid var(--trait);border-radius:var(--r-m);
  font-size:1rem;
  transition:border-color .18s, box-shadow .18s;
}
.champ textarea{min-height:88px;resize:vertical;line-height:1.45}

/* ------------------------------------------------------------
   Le champ de date, sur iPhone
   ------------------------------------------------------------
   Safari iOS donne a input[type=date] une largeur INTRINSEQUE, tiree
   du format de date, et il la garde meme sous width:100% : le contenu
   sort alors de la boite par la droite. C'est ce qu'on voyait sur
   « Depart de l'aventure », et nulle part ailleurs - c'est le seul
   champ de ce type du carnet.

   appearance:none lui retire ce dimensionnement natif, et min-width:0
   l'autorise enfin a se reduire.
   ------------------------------------------------------------ */
.champ input[type=date]{
  -webkit-appearance:none;appearance:none;
  min-width:0;max-width:100%;
  display:block;text-align:left;
  /* sans cela iOS centre verticalement le texte a sa facon et le
     champ ne fait plus la meme hauteur que les autres */
  line-height:normal;
}
.champ input:focus,.champ textarea:focus{
  outline:none;border-color:var(--saison);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--saison) 18%, transparent);
}
.champ .aide{font-size:.8rem;color:var(--gris);padding-left:2px}

/* segment de choix */
.segment{display:flex;gap:8px;flex-wrap:wrap}
.segment label{
  flex:1;min-width:82px;min-height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--papier);border:2px solid var(--trait);border-radius:var(--r-m);
  font-family:'Fredoka';font-size:1rem;color:var(--gris);cursor:pointer;
  transition:all .2s var(--ressort);
}
/* Quatre choix sur une ligne (les niveaux). A 82 px de large minimum,
   le quatrieme passait seul a la ligne sur un telephone : 4 x 82 + les
   ecarts depassent la largeur utile d'un ecran de 375 px. */
.segment--quatre label{min-width:62px;font-size:.95rem}
/* Cinq choix sur une ligne (les niveaux, depuis la 5.0.0). Meme
   calcul un cran plus loin : sur 375 px de large, la largeur utile
   d'une section repliee des reglages est de 315 px, dont 24 pris par
   les quatre ecarts - il reste 58 px par etiquette. Le gap descend
   donc a 6 et la largeur minimale a 50, ce qui laisse « CM2 » entier
   avec de la marge. La HAUTEUR ne bouge pas : 52 px, au-dessus du
   plancher de 44 du projet, parce que c'est elle qui fait la cible. */
.segment--cinq{gap:6px}
.segment--cinq label{min-width:50px;font-size:.9rem;padding:0 2px}
.segment input{position:absolute;opacity:0;pointer-events:none}
.segment label:has(input:checked){
  /* blanc sur teinte claire tombait a 3,80 : la regle -fonce du projet
     vaut ici comme partout ailleurs */
  background:var(--saison-fonce);border-color:var(--saison-fonce);color:#fff;
  transform:translateY(-2px);box-shadow:var(--ombre-s);
}

/* interrupteur */
.bascule{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:8px 16px;
  background:var(--papier);border:2px solid var(--trait);border-radius:var(--r-m);
  cursor:pointer;margin-bottom:18px;
}
.bascule span{font-weight:700;font-size:.95rem}
.bascule input{position:absolute;opacity:0;pointer-events:none}
.bascule .piste{
  flex:none;width:56px;height:32px;border-radius:20px;background:var(--trait);
  position:relative;transition:background .22s var(--doux);
}
.bascule .piste::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;
  border-radius:50%;background:#fff;box-shadow:var(--ombre-s);
  transition:transform .28s var(--ressort);
}
.bascule:has(input:checked) .piste{background:var(--printemps)}
.bascule:has(input:checked) .piste::after{transform:translateX(24px)}

/* ---------- blocs ---------- */
.carte{
  background:var(--papier);border-radius:var(--r-l);padding:20px;
  box-shadow:var(--rebord), var(--arete), var(--ombre-s);
}
.pastille{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:999px;
  font-size:.78rem;font-weight:700;letter-spacing:.01em;
  background:var(--saison-clair);color:var(--saison-fonce);
}
.pastille--coffre{background:var(--coffre-clair);color:var(--coffre-fonce)}

/* Un titre de section s'ecrit comme une phrase (7.2.0). Les petites
   capitales espacees en gris, au-dessus de chaque bloc, sont le tic le
   plus reconnaissable d'une interface generee : Xavier voulait qu'on
   ne voie plus que c'est fait par une IA. L'icone qui l'accompagne, s'il
   y en a une, vit dans .ico-titre. */
.titre-section{
  display:flex;align-items:center;gap:7px;
  font-family:'Fredoka';font-size:1.05rem;font-weight:600;
  letter-spacing:-.005em;color:var(--encre);
  margin:0 0 10px 4px;
}
.titre-section .ico-titre{display:inline-flex;flex:none}
.titre-section .compte{color:var(--saison-encre);font-weight:700}

.vide{text-align:center;color:var(--gris);padding:40px 20px;font-size:.95rem}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- les icônes dessinées ---------- */
/* Elles prennent la couleur du texte : une icône posée dans un bouton
   de saison devient de la couleur de la saison, sans une ligne de plus. */
.ico-svg{display:inline-block;vertical-align:-.18em;flex:none;overflow:visible}
.bouton .ico-svg{margin-right:-.1em}