/* ==========================================================================
   PIZZA'MY — l'application

   Le dessin du frigo vient de la maquette Claude Design et vit presque
   entièrement dans des styles en ligne. Cette feuille ne fait que trois
   choses : servir les polices, donner au frigo sa boîte, et rattraper ce
   qu'une maquette n'a pas à traiter — le clavier, le mouvement réduit,
   les encoches d'écran.

   Mobile d'abord. Sur grand écran on ne réinvente rien : on centre le frigo,
   comme convenu.
   ========================================================================== */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/bricolage.woff2) format('woff2');}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/schibsted.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dmmono-0.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dmmono-1.woff2) format('woff2');}

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

/* Une règle d'auteur `display:flex` bat le `display:none` que le navigateur
   applique à [hidden] : sans ça, les quatre pages s'empileraient toutes. */
[hidden]{display:none!important;}

html,body{height:100%;}

body{
  background:#17120F;
  color:#23201C;
  font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow:hidden;                       /* le frigo ne défile pas, ses pages si */
  overscroll-behavior:none;
}

/* --------------------------------------------------------------- l'écran */

/* Ces quatre propriétés viennent du conteneur d'écran de la maquette : on n'a
   extrait que son contenu, il faut donc lui rendre sa boîte. Sans le flex en
   colonne, la porte du bas retombe à une hauteur nulle. */
.ecran{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100dvh;
  overflow:hidden;
  background:linear-gradient(#CA3521,#B12A17);
}

/* Les zones sûres de l'écran.

   La page déclare `viewport-fit=cover` et une barre d'état translucide : elle
   demande donc explicitement à dessiner sous l'encoche et sous la barre
   d'accueil, à charge pour elle de s'en écarter. Ce second point n'était pas
   fait. Constaté sur iPhone le 6 août 2026, application installée sur l'écran
   d'accueil : les arrondis du congélateur touchaient les bords, les pieds du
   réfrigérateur sortaient du champ, et la vraie barre d'état du système se
   posait sur la fausse.

   Le rembourrage se prend sur `.ecran` et non sur `body` : le dégradé rouge du
   frigo couvre ainsi les marges, là où `body` aurait laissé apparaître son
   fond sombre — la « barre noire » signalée en bas de l'écran. */
.ecran{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}

/* Sur grand écran, le frigo garde ses proportions de téléphone et se pose au
   centre. L'adaptation bureau se fera plus tard ; en attendant, mieux vaut un
   objet juste et centré qu'un objet étiré. Le `padding:0` de ce bloc annule
   volontairement les zones sûres ci-dessus : sur un moniteur, il n'y en a pas,
   et le frigo doit garder ses 390 × 844 exacts. */
@media (min-width:760px) and (min-height:700px){
  body{
    display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(120% 90% at 50% 0%, #2a211c 0%, #17120F 60%),
      #17120F;
  }
  .ecran{
    width:390px;height:844px;max-height:calc(100dvh - 48px);
    border-radius:43px;
    padding:0;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 12px #241c18, 0 0 0 13px rgba(255,255,255,.06);
  }
}

/* Le conteneur `.page` est ajouté par le convertisseur pour pouvoir masquer les
   pages une à une. Sans hauteur, il s'étire à son contenu : la carte faisait
   2950px au lieu de 461px et la liste des 49 pizzas ne défilait plus, elle
   débordait. */
.ecran .page{height:100%;}

/* ------------------------------------------- la face avant de la porte du bas */

/* Constaté sur l'iPhone de Gabriel le 6 août 2026 : la carte COMMANDES
   recouvrait les deux dernières semaines du calendrier et sa légende, et
   l'aimant « La maison » était coupé par le bas de la porte.

   La cause est mécanique, pas un réglage à tâtonner. Dans la maquette, les cinq
   blocs de cette face sont en `position:absolute` à des coordonnées figées,
   calibrées pour un écran de 390 × 844 : le calendrier est ancré en haut
   (`top:88px`), la carte COMMANDES est ancrée en bas (`bottom:34px`), et rien
   ne les relie. Mesuré avant correction, sur une face de 461 px : le calendrier
   finit à 343, la carte commence à 352. Nine pixels. Dès que la porte perd de
   la hauteur — les zones sûres en retirent près de 95 px — l'écart devient
   négatif et les deux blocs se superposent. Aucune valeur de `top` ou de
   `bottom` ne corrige ça.

   Deuxième cause, latente : la hauteur du calendrier dépend du mois. Août 2026
   demande six rangées (5 cases de décalage + 31 jours), un mois à cinq rangées
   gagne 27 px. Caler la porte au pixel pour un mois la casserait pour un autre.

   Correctif en deux temps :
     1. cette face devient un vrai flux — une grille de deux colonnes, le
        calendrier et la carte COMMANDES à gauche l'un SOUS l'autre, les trois
        aimants à droite ;
     2. les deux blocs qui peuvent maigrir le font : les cases du calendrier et
        les aimants suivent la hauteur disponible.

   Écrit ici et non dans la maquette : `design/frigo-source.html` est un export
   d'outil de design, réimporté tel quel, et `lib/frigo-gabarit.js` est
   régénéré. Cette feuille-ci est écrite à la main et n'est jamais réécrite.

   Les décors restent intacts : reflets de verre et poignée chromée sont eux
   aussi en `position:absolute` et ne deviennent donc pas des cases de la
   grille — seuls les cinq blocs remis en flux ci-dessous en sont. */

.ecran{
  /* La hauteur réellement disponible. `100dvh` seul ne suffit pas : dans
     l'application installée, l'écran ne rétrécit pas, ce sont les zones sûres
     qui mangent la place — et c'est précisément le mode que Francis utilise. */
  --dispo:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));

  /* Une case de calendrier et un aimant : à leur taille de maquette quand la
     place existe, réduits quand elle manque.

     Les deux droites sont calées sur deux points mesurés, pas devinées :
     à 844 (l'écran de référence de la maquette) elles rendent exactement 25 px
     et 84 px, donc le dessin d'origine au pixel ; à 719 (l'iPhone de Gabriel
     une fois ses zones sûres retirées) elles rendent 19 px et 68 px, ce qu'il
     faut pour que les cinq blocs tiennent avec de l'air entre eux. D'où
     l'ordonnée à l'origine négative : une simple proportion serait trop plate
     et se contenterait de frôler. */
  --case:clamp(17px,calc(var(--dispo) * .048 - 15.5px),25px);
  --aimant:clamp(54px,calc(var(--dispo) * .128 - 24px),84px);
}

/* Sur grand écran, l'écran ne fait plus 100dvh : il est plafonné à 844 px et
   n'a pas de zones sûres (voir la media query bureau plus haut). Sans ce
   rattrapage, la porte du bas est dimensionnée pour une hauteur qui n'existe
   pas et son contenu se retrouve à nouveau au ras. Ce bloc doit rester APRÈS la
   définition ci-dessus : à spécificité égale, c'est l'ordre qui tranche — la
   première version de ce correctif était placée plus haut dans le fichier et
   n'avait donc aucun effet. */
@media (min-width:760px) and (min-height:700px){
  .ecran{--dispo:min(844px,calc(100dvh - 48px));}
}

/* Seuls le calendrier et la carte COMMANDES passent en flux : ce sont les deux
   qui se chevauchaient. Tout le reste — reflets, poignée, « Ouvrez la porte »,
   les trois aimants — reste hors flux, donc le dessin ne bouge pas.
   `padding-right` réserve la colonne des aimants. */
.ecran [data-porte-face]{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:34px 104px 14px 14px;
  /* La maquette laissait 34 px de porte rouge sous la carte COMMANDES. On les
     rend quand la hauteur le permet — à 844 la marge retombe pile sur 34 — et
     on les reprend en dessous de 758, où chaque pixel sert au calendrier. */
  padding-bottom:clamp(14px,calc(var(--dispo) * .2326 - 162.3px),34px);
}

/* « Ouvrez la porte » entre dans le flux — 37 px de haut, contre 88 px de
   rembourrage si on le laissait hors flux, ce qui est trop cher sur un petit
   écran. La marge négative lui rend sa place d'origine, au-dessus des aimants. */
.ecran [data-porte-face] > [style*="right:18px;top:40px"]{
  position:static!important;
  flex:none;
  align-self:flex-end;
  margin-right:-86px;
}

/* Le calendrier : premier bloc de la colonne de gauche, compressible. */
.ecran [data-porte-face] > [style*="top:88px;width:224px"]{
  position:static!important;
  width:auto!important;
  flex:0 1 auto;
  min-height:0;
}

/* La carte COMMANDES : en bas de la même colonne, plus jamais par-dessus. */
.ecran [data-porte-face] > [style*="bottom:34px"]{
  position:static!important;
  width:auto!important;
  flex:none;
}

/* Les trois aimants gardent leur colonne et leur pose à la main (les décalages
   à droite et les rotations sont dans la maquette, on n'y touche pas). Seul
   leur ancrage vertical passe du pixel au pourcentage — 88, 205 et 324 px sur
   la face de 461 px de référence — pour qu'ils restent dans la porte quelle
   qu'en soit la hauteur. */
.ecran [data-porte-face] > [style*="right:8px;top:88px"]  {top:17.5%!important;}
.ecran [data-porte-face] > [style*="right:10px;top:205px"]{top:44%!important;}
.ecran [data-porte-face] > [style*="right:16px;top:324px"]{top:70.5%!important;}

/* Leurs proportions relatives — 84 · 78 · 74 dans la maquette — sont conservées. */
.ecran [data-porte-face] > [style*="right:8px;top:88px"] > svg{
  width:var(--aimant)!important;height:var(--aimant)!important;
}
.ecran [data-porte-face] > [style*="right:10px;top:205px"] > svg{
  width:calc(var(--aimant) * .93)!important;height:calc(var(--aimant) * .93)!important;
}
.ecran [data-porte-face] > [style*="right:16px;top:324px"] > svg{
  width:calc(var(--aimant) * .88)!important;height:calc(var(--aimant) * .88)!important;
}

/* Les cases du calendrier : 25 px figés dans la maquette. La première règle
   attrape la case, la seconde la pastille du jour. C'est ce qui absorbe la
   différence entre un mois à cinq rangées et un mois à six. */
.ecran [data-porte-face] [style*="top:88px;width:224px"] [style*="height:25px"]{
  height:var(--case)!important;
}
.ecran [data-porte-face] [style*="top:88px;width:224px"] [style*="width:25px;height:25px"]{
  width:var(--case)!important;height:var(--case)!important;
}

/* --------------------------------------------------------------- outils */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* Le premier arrêt du clavier est l'appel : c'est l'action de la page. */
.saut{
  position:absolute;left:8px;top:-64px;z-index:99;
  background:#23201C;color:#F5E9D0;
  padding:12px 18px;border-radius:12px;
  font:600 15px 'Schibsted Grotesk',sans-serif;text-decoration:none;
}
.saut:focus{top:8px;}

:where(a,button,[role=button],[tabindex]):focus-visible{
  outline:3px solid #F5E9D0;
  outline-offset:2px;
  border-radius:8px;
}

/* Les listes longues défilent, mais sans faire rebondir le frigo derrière. */
.ecran [style*="overflow-y:auto"]{
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.ecran [style*="overflow-y:auto"]::-webkit-scrollbar{display:none;}

/* --------------------------------------------------------- mouvement */

/* Le battement de porte est le geste central de l'objet : on le raccourcit
   fortement plutôt que de le supprimer, sinon le changement de page devient
   incompréhensible — l'écran change sans raison visible. */
@media (prefers-reduced-motion:reduce){
  .ecran *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .ecran [data-porte]{transition-duration:.12s!important;}
}