/* Colour the Cat · style.css v0.34 · M5 étape 3b : les deux boutons de l'adieu côte à côte (.fw-buttons, #fw-yes plein, #fw-no discret) (Nathalie, 17 août) */
/* (v0.33 · M5 étape 3a : les boutons d'action du Polaroid (.pola-action-btn : Partager · Télécharger) (Nathalie, 17 août)) */
/* (v0.23 · --css-v sur :root : la feuille dit sa version au tampon (« css v0.23 ») — le cache d'iPad ne peut plus se cacher (Nathalie, 17 août)) */
/* (v0.22 · l'onglet aussi sur les côtés : collé au bord gauche ou droit, centré en hauteur sous l'en-tête, coins arrondis vers le dessin (Nathalie, 16 août)) */
/* (v0.21 · en bas, le dock est un ONGLET centré (coins arrondis en haut, palette et outils centrés dedans) sur iPad et Mac — le téléphone garde la bande ; body.dock-measure pour mesurer le contenu du dock (Nathalie, 16 août)) */
/* (v0.20 · téléphone (body.phone) : la palette toujours en bas, alignée À GAUCHE (au-dessus d'Annuler), la caméra seule à droite ; le réglage « Palette » caché ; le côté compact retiré (Nathalie, 16 août)) */
/* (v0.19 · le compact se couche (palette 3 × 5, outils 3 × 4, ≈ 190 px : Safari en paysage ne laisse que ~245 px) ; sur le côté la caméra reste au bout de la colonne (plus jamais absolue) ; petit écran : la palette à gauche, la caméra seule à droite ; la quinconce jusqu'à 900 px (paysage) ; en-tête < 560 : kicker et second filet effacés, titre tronqué proprement (Nathalie, 16 août)) */
/* (v0.18 · le dock « côté compact » (body.dock-compact) : la palette en 2 colonnes de 34 px, les outils en 2 colonnes (les largeurs empilées), ≈ 290 px de haut — un côté choisi tient sur un téléphone en paysage ; le réglage « Palette » s'empile sous 560 px (.seg-row) (Nathalie, 16 août)) */
/* (v0.17 · l'en-tête compact (petit écran et .settled) aligne kicker, titre, FR | EN sur UNE ligne de base ; petits écrans : la caméra à la hauteur de la première rangée, sous le bouton d'ajustement (Nathalie, 16 août)) */
/* (v0.16 · #widths.dim (Remplir : les points pâlissent, inertes) ; petits écrans : la palette en deux rangées de 7 EN QUINCONCE, la caméra à droite sur les deux — plus jamais une pastille hors de l'écran (Nathalie, 16 août)) */
/* (v0.15 · la mise en page qui se pose : le dock sur le côté (body.dock-left / .dock-right : deux colonnes, la palette dehors), le bouton d'ajustement qui change de coin, l'en-tête .settled (une ligne), le réglage segmenté « Palette », la signature dans le « ? ») */
/* (v0.14 · fix : --m (l'encre des icônes) est une variable posée sur .tool — le seul chemin qui traverse un <use> ; au repos --m = currentColor, choisi --m = --ink) */
/* (v0.13 · Tunnel jour 3 (Nathalie) : le dock passe au gris doux, l'outil choisi sur une plaque BLANCHE ; les icônes bicolores — le trait reste sombre, seule la partie .m s'encre ; l'anneau sombre du point de largeur choisi (une encre pâle reste lisible)) */
/* (v0.12 · M4 étape 3c : le bonjour — #hello-line au-dessus du dock, les mini-légendes .cap sous les icônes ; tout n'existe que sous body.hello) */
/* (v0.11 · M4 étape 3b : les panneaux de la famille (.howto-overlay, .settings-panel, .setting-row, .toggle, .btn-clear, .info-item — portés du 7 Diff v5.43 / Sudoku) ; le ✕ grand et épais, nouveau plancher ; la clôture d'Effacer tout) */
/* (v0.10 · M4 étape 2b-fix : plus de rangée des neutres ; le nom au-dessus de la colonne ; Blanc porte un liseré pour se voir sur le dock) */
/* (v0.9 · M4 étape 2b : l'éventail presse-et-glisse (#fan : la colonne Clair/Foncé, la rangée des neutres, le nom annoncé) ; le point de nuance sur la pastille soulevée ; .ink-light quand l'encre est trop claire) */
/* (v0.8 · M4 étape 2a-fix3 : la gomme s'encre en noir, jamais en couleur ; le pola descend de 3 px et sa photo dépasse du bas) */
/* (v0.7 · M4 étape 2a-fix2 : l'en-tête de la famille remplace les coins ; la caméra à 34 px) */
/* (v0.6 · M4 étape 2a-fix : la caméra sur la rangée de la palette, à une pastille de distance) */
/* (v0.5 · M4 étape 2a : les coins tranquilles + le dock (palette, bande d'outils, largeurs) ; le chantier retiré ; l'adieu encadré) */
/* (v0.4 · M4 étape 1 : la carte de l'adieu) */
/* (v0.3 · M1 étape 3 : les boutons d'outil du chantier) */

/* La pièce — le blanc cassé HORS de la page (Engines §1 : le pur blanc est SOUS le dessin,
   le blanc cassé est la pièce autour). Valeur de départ, à juger à l'œil. */
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #F2EEE6;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;                 /* le navigateur ne zoome jamais la PAGE — nos gestes à nous */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#room {
  position: fixed; inset: 0;
  overflow: hidden;
  cursor: default;
}

/* La boîte unique. Le fond blanc pur du papier, c'est elle.
   La transform (zoom + pan) s'applique ici et seulement ici :
   peinture et artwork ne peuvent pas dériver l'un de l'autre — c'est structurel. */
#page-box {
  position: absolute; top: 0; left: 0;
  width: 1350px; height: 1098px;
  background: #FFFFFF;
  transform-origin: 0 0;
  will-change: transform;             /* le navigateur met la transform sur la puce graphique */
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);   /* la page posée sur la table, discrètement */
}

/* Zoom doux pour le double-tap uniquement — la classe est posée le temps du saut, puis retirée. */
#page-box.gliding { transition: transform 180ms ease-out; }

/* Étage 2 — la peinture. */
#paint { position: absolute; top: 0; left: 0; }

/* Étage 3 — l'artwork en multiply. pointer-events:none = aucun doigt, aucun outil ne l'atteint.
   Il apparaît en fondu quand il est chargé (le papier d'abord, le dessin ensuite — UX §12). */
#artwork {
  position: absolute; top: 0; left: 0;
  width: 1350px; height: 1098px;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
#artwork.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #artwork { transition: none; }
  #page-box.gliding { transition: none; }
}

/* Étage 4 — le bouton d'ajustement. Cible ≥ 44 px, coin bas-droit, calme. */
#btn-fit {
  position: fixed; right: 14px; bottom: calc(var(--dock-h, 118px) + 14px);
  width: 48px; height: 48px;
  border: none; border-radius: 12px;
  background: rgba(255,255,255,0.85);
  color: #444;
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#btn-fit:active { background: #FFFFFF; }

/* ===== L'ADIEU (M4 étape 1) — hier, une fois, avant que le jour tourne =====
   Le voile est un théâtre CSS ; la vérité (le verdict du jour) vit dans game.js.
   Provisoire par le look : le vrai cadre Polaroid et sa caméra arrivent à M5. */
#farewell {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(242,238,230,0.92);
  animation: fw-in 400ms ease;
}
#farewell[hidden] { display: none; }
@keyframes fw-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #farewell { animation: none; } }
.fw-card {
  background: #FFFFFF; padding: 16px 16px 22px;   /* la marge du bas plus généreuse : le look pola */
  box-shadow: 0 6px 30px rgba(0,0,0,0.18);
  transform: rotate(-1.5deg);
  max-width: min(86vw, 520px);
  text-align: center;
}
#farewell-img { display: block; width: 100%; height: auto; background: #FFFFFF; min-height: 120px;
  border: 1px solid #E4DFD6; }   /* le liseré du pola (demande du 15 août) */
#fw-line { margin: 14px 4px 10px; font: 16px/1.4 Georgia, serif; color: #333; }
.fw-buttons { display: flex; gap: 10px; justify-content: center; }
#fw-yes, #fw-no {
  min-height: 44px; padding: 0 22px; border: none; border-radius: 10px;
  font: 15px -apple-system, sans-serif; cursor: pointer;
}
#fw-yes { background: var(--ink, #111111); color: #FFFFFF; font-weight: 600; }   /* la porte chaude : la photo */
#fw-yes:active { opacity: 0.85; }
#fw-no { background: #ECE7DE; color: #333; }                                       /* la porte discrète : hier part */
#fw-no:active { background: #E2DCD1; }

/* ===== L'EN-TÊTE DE LA FAMILLE (2a-fix2 — « soyons pareil », 15 août) =====
   Copié de la voix du 7 Diff (style.css v5.43) : le papier, les filets rouges, Playfair pour le
   titre, Source Sans pour les commandes, l'engrenage et le « ? » en pastilles rondes, FR | EN. */
:root {
  --css-v: "v0.34";                    /* DOIT égaler l'en-tête (le harnais y veille) ; game.js le lit dans le tampon */
  --navy: #1B3659; --red: #F40C0C; --ink: #111111; --paper: #F8F6F1; --mid: #888880; --rule: #D0CBC0;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
}
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  border-bottom: 2px solid var(--ink);
  padding: 14px 24px 12px;
  background: var(--paper);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-brand { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.header-rule { height: 48px; width: 3px; background: var(--red); flex-shrink: 0; }
.header-titles { display: flex; flex-direction: column; line-height: 1; gap: 3px; min-width: 0; }
.brand-kicker { font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.brand-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 900; color: var(--navy); letter-spacing: -0.01em; line-height: 1; margin: 0; white-space: nowrap; }
.brand-byline { font-family: var(--font-display); font-size: clamp(0.75rem, 1.2vw, 0.95rem); font-style: italic; color: var(--mid); text-decoration: none; }
.header-date { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--navy); letter-spacing: 0.01em; white-space: nowrap; }
#stamp { font: 10px/1 var(--font-body); color: var(--rule); letter-spacing: 0.4px; align-self: flex-end; margin-bottom: 4px; }
.header-right { flex-shrink: 0; }
.header-lang { display: flex; align-items: center; gap: 8px; }
.btn-howto {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
  transition: background 0.15s, color 0.15s;
}
.btn-howto:hover { background: var(--ink); color: #fff; }
.lang-btn {
  background: none; border: none; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; color: var(--mid); cursor: pointer; padding: 6px 4px; min-height: 32px;
}
.lang-btn.active { color: var(--navy); border-bottom: 2px solid var(--red); }
.lang-sep { color: var(--rule); font-size: 0.8rem; }
@media (max-width: 720px) {
  #site-header { padding: 10px 14px 8px; }
  .header-rule { height: 36px; }
  .header-brand { gap: 12px; }
  .brand-title { font-size: 1.15rem; }
  .brand-byline { display: none; }
  .header-date { display: none; }        /* la date revient au « ? » sur les petits écrans (étape 3) */
  #stamp { display: none; }
}
/* L'EN-TÊTE COMPACT — petit écran ET .settled — tout sur UNE ligne de base (Nathalie, 16 août) :
   le kicker, le titre, la date, FR | EN partagent la même ligne de base ; l'engrenage, le « ? » et les
   filets, qui n'ont pas de texte, se centrent (align-self:center les retire du calcul de la ligne de base). */
@media (max-width: 720px) {
  .header-inner, .header-brand, .header-titles, .header-lang { align-items: baseline; }
  .header-titles { flex-direction: row; gap: 10px; }
  .brand-kicker { white-space: nowrap; }
  .header-rule, .btn-howto { align-self: center; }
  .lang-btn { padding: 4px 4px; min-height: 0; line-height: 1; }
}
#site-header.settled .header-inner, #site-header.settled .header-brand, #site-header.settled .header-titles, #site-header.settled .header-lang { align-items: baseline; }
#site-header.settled .brand-kicker { white-space: nowrap; }
#site-header.settled .header-rule, #site-header.settled .btn-howto { align-self: center; }
#site-header.settled .lang-btn { padding: 4px 4px; min-height: 0; line-height: 1; }

/* ===== LE DOCK (M4 étape 2a — UX §2) =====
   Le pays du pouce. Une seule surface, calme, posée en bas ; la palette au-dessus de la bande.
   La signature du jeu vit ici : l'outil choisi s'encre dans la couleur du joueur (--ink). */
#dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;   /* v0.24 : trois cases en ligne — le bloc, le trait, la caméra */
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: #EFEEEA;                 /* le gris doux du mock-up (16 août) : la plaque blanche de l'outil choisi s'y détache */
  box-shadow: 0 -1px 0 rgba(0,0,0,0.06);
  --ink: #1EBFF5;
}
#dock-main { display: flex; flex-direction: column; align-items: center; gap: 6px; }   /* v0.24 : palette + outils, UNE unité centrée */
#palette { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; max-width: 100%; }
.sw {
  width: 34px; height: 34px; margin: 5px; border-radius: 50%; padding: 0;
  border: 2px solid rgba(0,0,0,0.06); background: var(--c);
  transition: transform 120ms ease, box-shadow 120ms ease; cursor: pointer;
  flex: 0 0 auto;
}
.sw.selected { transform: scale(1.22); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,0.22); border-color: rgba(0,0,0,0.12); }
@media (prefers-reduced-motion: reduce) { .sw { transition: none; } }
#tools { display: flex; align-items: center; justify-content: center; gap: 2px; }
.tool, .act {
  width: 48px; height: 48px; border: none; border-radius: 12px; background: transparent;
  color: #6E6659; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.ico { width: 26px; height: 26px; fill: currentColor; display: block; }
/* Les icônes bicolores (16 août) : .k = le trait, toujours currentColor ; .m = la partie qui prend l'encre,
   seulement quand l'outil est choisi (au repos, tout est gris). Le trait sombre tient la forme : une encre
   très pâle (blanc, jaune clair) reste lisible sur la plaque blanche. */
/* Un <use> clone le symbole dans un arbre fantôme : « .ico .m » n'y entre pas (leçon du 16 août, iPad).
   Une VARIABLE héritée y entre : les parties .m portent fill="var(--m)" dans le symbole ; on pose --m ici. */
.tool { --m: currentColor; }
.tool.selected { --m: var(--ink); color: #4E4841; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.tool.selected[data-tool="eraser"] { color: #111111; }   /* la gomme n'a pas de couleur : noir 100 % (Nathalie, 15 août) */
.act:active, .tool:active { background: #E4E2DC; }
.dk-sep { width: 1px; height: 26px; background: #E4DFD6; margin: 0 6px; }
#btn-camera.breathe { animation: breathe 260ms ease; }
@keyframes breathe { 40% { transform: scale(0.86); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #btn-camera.breathe { animation: none; } }
#widths { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.dock-cam-sep { width: 1px; height: 64px; background: rgba(0,0,0,0.12); margin: 0 18px 0 22px; flex: 0 0 auto; }   /* v0.24 : le trait entre le bloc et la caméra */
#btn-camera { color: #6E6659; width: 64px; height: 64px; overflow: visible; }   /* v0.24 : dans sa case, plus grande (Nathalie) */
#btn-camera .ico { width: 42px; height: 42px; transform: none; }   /* 2-3 px plus bas que les ronds, et la photo dépasse du bas comme un vrai pola qui sort */   /* le pola est haut et étroit : plus grand pour peser autant que les autres (Nathalie) */
#widths.dim { opacity: 0.35; pointer-events: none; }        /* Remplir : les points pâlissent et n'écoutent plus ; la place reste (v0.16) */
#widths.dim .wd.selected { background: transparent; box-shadow: none; }
#widths.dim .wd.selected span { box-shadow: none; }
.wd {
  width: 40px; height: 44px; border: none; border-radius: 10px; background: transparent;
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.wd span { display: block; border-radius: 50%; background: #6E6659; }
.wd.selected { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,0.10); }
.wd.selected span { background: var(--ink); box-shadow: 0 0 0 1.5px #4E4841; }   /* l'anneau sombre tient le point, l'encre le remplit */
button:focus-visible { outline: 2px solid #1EBFF5; outline-offset: 2px; }

/* Une encre très claire (blanc, jaune clair, gris très clair) disparaîtrait sur la plaque du dock :
   la plaque de l'outil choisi et du point de largeur s'assombrit pour la porter. */
#dock.ink-light .wd.selected span { box-shadow: 0 0 0 2px #4E4841; }   /* encre très pâle : l'anneau du point un peu plus fort */

/* ===== L'ÉVENTAIL PRESSE-ET-GLISSE (M4 étape 2b — UX §2) =====
   Du théâtre au-dessus du choix. game.js pose la position et le sens en styles directs, selon le bord du
   dock (en bas : la colonne monte ; sur le côté : la rangée part vers le dessin). Les cellules font 44 px. */
#fan { position: fixed; left: 0; top: 0; z-index: 12; pointer-events: none; }
#fan[hidden] { display: none; }
#fan-column {
  position: fixed; display: flex; gap: 6px;      /* la position et le sens viennent des styles directs (game.js, selon le bord) */
  pointer-events: auto;
}
.fc {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c); border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 90ms ease;
  animation: fan-in 120ms ease;
}
.fc.hover, .sw.hover { transform: scale(1.3); box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0,0,0,0.28); }
@keyframes fan-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#fan-name {
  position: fixed; text-align: center;             /* la position vient des styles directs (game.js) */
  font: 600 14px/1 var(--font-body); color: var(--navy);
  background: rgba(255,255,255,0.92); border-radius: 8px; padding: 6px 10px; box-sizing: border-box;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12);
}
#fan-name:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .fc { animation: none; transition: none; } }

/* Le point de nuance : la pastille soulevée dit quelle nuance de sa famille est tenue (Clair, Foncé). */
.sw { position: relative; }
.sw[data-hue="white"] { border-color: rgba(0,0,0,0.18); }   /* Blanc sur le dock blanc : un liseré pour se voir */
.sw.selected.variant::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--v); box-shadow: 0 0 0 1.5px #fff;
}

/* Petits écrans : la palette et la bande se resserrent, jamais en dessous des 44 px de cible. */
@media (max-width: 900px) {
  /* (v0.19 : jusqu'à 900 px — un téléphone en paysage débordait à droite ; alignée à GAUCHE, la caméra seule à droite (Nathalie))
     La palette en deux rangées de 7, en quinconce, la caméra à droite sur les deux rangées :
     14 pastilles + la caméra ne tenaient pas sur un iPhone (rouge, orange et blanc partaient hors écran). */
  #palette { display: grid; grid-template-columns: repeat(7, 38px); grid-auto-rows: 38px; height: auto; gap: 0; justify-content: start; padding-left: 8px; align-items: center; width: 100%; box-sizing: border-box; }   /* v0.20 : pleine largeur, la grille part du bord gauche — au-dessus d'Annuler ; la caméra seule à droite */
  .sw:nth-child(n+8):nth-child(-n+14) { margin-left: 23px; margin-right: -15px; }   /* la deuxième rangée décalée d'une demi-pastille */
  /* v0.24 : sur l'iPad en portrait (onglet), le bloc reste centré et la caméra dans sa case ; sur le TÉLÉPHONE, la bande :
     le bloc pleine largeur, la palette à gauche, le trait caché, la caméra absolue à droite à la hauteur de la première rangée. */
  #palette { width: auto; justify-content: center; padding-left: 0; }
  body.phone #dock-main { width: 100%; align-items: flex-start; }
  body.phone #palette { width: 100%; justify-content: start; padding-left: 8px; }
  body.phone #tools { align-self: center; }
  body.phone .dock-cam-sep { display: none; }
  body.phone #btn-camera { position: absolute; right: 12px; top: 6px; width: 52px; height: 52px; }
  body.phone #btn-camera .ico { width: 34px; height: 34px; }
  .sw { width: 30px; height: 30px; margin: 4px; }
  .tool, .act { width: 44px; height: 44px; }
  .ico { width: 24px; height: 24px; }
  #widths { margin-left: 4px; }
  .wd { width: 34px; }
  #day-date { font-size: 13px; }
}

/* ===== LES PANNEAUX DE LA FAMILLE (M4 étape 3b — portés du 7 Diff style.css v5.43, lui-même du Sudoku) =====
   Le voile, le panneau papier bordé d'encre, le titre Playfair, les rangées, le toggle qui glisse,
   Effacer tout clôturé en bas. Ce fichier n'a pas de .hidden global : chaque composant porte le sien (la leçon v5.41). */
:root { --blue: #0867CC; }
.howto-overlay { position: fixed; inset: 0; background: rgba(17,17,17,0.55); z-index: 400; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
.howto-overlay.hidden { display: none; }
.settings-panel.hidden { display: none; }
.settings-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--paper); border: 2px solid var(--ink);
  max-width: 420px; width: calc(100% - 48px); max-height: 80vh; overflow-y: auto;
  padding: 30px 32px; z-index: 401; box-sizing: border-box;
}
.settings-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy); margin: 0 0 16px; }
/* Le ✕ : GRAND et ÉPAIS — le nouveau plancher de la famille (UX §7 ; le 7 Diff et le Sudoku suivront). Cible 44 px. */
.panel-close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 0;
  font: 700 1.5rem/1 var(--font-body); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.panel-close:hover { color: var(--red); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.setting-row:last-of-type { border-bottom: none; }
.setting-label { font-size: 0.92rem; color: var(--ink); font-family: var(--font-body); margin: 0; }
.toggle { flex-shrink: 0; width: 46px; height: 26px; border-radius: 13px; border: none; background: var(--rule); position: relative; cursor: pointer; transition: background 0.2s; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left 0.2s; }
.toggle.on { background: var(--blue); }
.toggle.on::after { left: 22px; }
.btn-clear {
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 18px; cursor: pointer; transition: background 0.15s, color 0.15s; min-height: 44px;
}
.btn-clear:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
#clear-fence { margin-top: 22px; }
#clear-confirm[hidden] { display: none; }
#clear-confirm { padding-top: 6px; }
.clear-buttons { display: flex; gap: 10px; margin-top: 10px; }
.clear-buttons .btn-clear { flex: 1; }
.btn-clear.btn-quiet { border-color: var(--rule); color: var(--mid); }
.btn-clear.btn-quiet:hover { background: var(--rule); color: var(--ink); }
/* Le « ? » : tout se lit sur place, ça défile dedans (le 7 Diff v5.27) */
.info-box { max-height: 82vh; overflow-y: auto; }
.info-item { margin: 0 0 10px; }
.info-item > strong { display: block; margin-bottom: 3px; color: var(--navy); font-family: var(--font-body); }
.info-item p { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.45; font-family: var(--font-body); }
.help-date { display: none; margin: -8px 0 14px; font: 600 0.95rem var(--font-body); color: var(--navy); }
@media (max-width: 720px) { .help-date { display: block; } }   /* la date revient au « ? » sur les petits écrans (2a-fix2) */
@media (prefers-reduced-motion: reduce) { .toggle, .toggle::after, .btn-clear { transition: none; } }

/* ===== LE BONJOUR DE PREMIÈRE VISITE (M4 étape 3c — UX §4) =====
   Rien n'existe hors de body.hello : ni la ligne, ni les légendes. Le premier remplissage retire la classe. */
#hello-line { display: none; }
body.hello #hello-line {
  display: block; position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-h, 118px) + 12px); z-index: 9;
  margin: 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.92); box-shadow: 0 1px 6px rgba(0,0,0,0.12);
  font: 15px/1.2 Georgia, serif; color: #333; white-space: nowrap;
  animation: hello-in 600ms ease;
}
@keyframes hello-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { body.hello #hello-line { animation: none; } }
.cap { display: none; }
body.hello #tools .tool, body.hello #tools .act { flex-direction: column; gap: 1px; height: 56px; }
body.hello .cap { display: block; font: 600 9px/1 var(--font-body); letter-spacing: 0.02em; color: #6E6659; text-transform: none; }
body.hello .tool.selected .cap { color: inherit; }

/* ===== LA MISE EN PAGE QUI SE POSE (v0.15 — Nathalie, 16 août) ===== */
/* L'en-tête qui se pose : après 15 s, une ligne — kicker + titre + date, la signature partie au « ? ». */
#site-header { transition: padding 260ms ease; }
#site-header.settled { padding: 6px 24px 5px; }
#site-header.settled .header-rule { height: 24px; }
#site-header.settled .header-titles { flex-direction: row; align-items: baseline; gap: 10px; }
#site-header.settled .brand-title { font-size: 1.15rem; }
#site-header.settled .brand-kicker { font-size: 0.55rem; }
#site-header.settled .brand-byline { display: none; }
#site-header.settled .btn-howto { width: 28px; height: 28px; }
#site-header.settled .header-date { font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { #site-header { transition: none; } }
.help-byline { margin: -8px 0 12px; font: italic 0.95rem var(--font-display); color: var(--mid); }
.help-byline a { color: var(--mid); }
/* Le réglage segmenté « Palette » */
.seg-group { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.seg {
  background: transparent; border: 1.5px solid var(--rule); color: var(--mid);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0 10px; min-height: 36px; cursor: pointer;
}
.seg.active { border-color: var(--ink); color: var(--ink); background: #fff; }
/* Le dock sur le côté : deux colonnes — la palette DEHORS (la caméra au bout), outils et largeurs DEDANS. */
body.dock-left #dock, body.dock-right #dock {
  top: var(--header-h, 80px); bottom: 0; left: auto; right: 0; width: auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 0;   /* v0.24 : le bloc, le trait, la caméra dessous */
  padding: 10px 6px 10px 4px; overflow: hidden;
  box-shadow: -1px 0 0 rgba(0,0,0,0.06);
}
body.dock-left #dock { right: auto; left: 0; padding: 10px 4px 10px 6px; box-shadow: 1px 0 0 rgba(0,0,0,0.06); }
body.dock-left #dock-main, body.dock-right #dock-main { flex-direction: row; align-items: center; gap: 4px; }   /* v0.24 : la colonne d'outils centrée en hauteur sur la colonne de pastilles */
body.dock-left #dock-main { flex-direction: row-reverse; }
body.dock-left .dock-cam-sep, body.dock-right .dock-cam-sep { width: 84px; height: 1px; margin: 12px 0 8px; }
body.dock-left #palette, body.dock-right #palette { display: flex; flex-direction: column; height: auto; width: 46px; gap: 2px; order: 2; }   /* display:flex : gagne sur la grille des petits écrans si un côté y est choisi */
body.dock-left #tools, body.dock-right #tools { flex-direction: column; order: 1; gap: 2px; }
body.dock-left .dk-sep, body.dock-right .dk-sep { width: 26px; height: 1px; margin: 6px 0; }
body.dock-left #widths, body.dock-right #widths { flex-direction: column; margin-left: 0; margin-top: 8px; }
body.dock-left #palette .sw, body.dock-right #palette .sw { margin: 3px 5px; }   /* l'ID gagne sur le quinconce des petits écrans */
body.dock-left #palette, body.dock-right #palette { padding-left: 0; justify-content: flex-start; }
body.dock-left #btn-camera, body.dock-right #btn-camera { position: static; width: 56px; height: 56px; }   /* v0.24 : sur le côté, la caméra sous le trait, dans sa case */
/* Le bouton d'ajustement change de coin : loin du dock, toujours en bas. */
body.dock-right #btn-fit { right: auto; left: 14px; bottom: 14px; }
body.dock-left #btn-fit { right: 14px; bottom: 14px; }
/* La ligne du bonjour reste sous le dessin, centrée dans l'espace qui reste. */
body.dock-right.hello #hello-line { bottom: 14px; left: calc((100vw - var(--dock-w, 0px)) / 2); }
body.dock-left.hello #hello-line { bottom: 14px; left: calc(var(--dock-w, 0px) + (100vw - var(--dock-w, 0px)) / 2); }
body.dock-left.hello #tools .tool, body.dock-right.hello #tools .tool, body.dock-left.hello #tools .act, body.dock-right.hello #tools .act { height: 56px; }
/* Sur le côté, la colonne des cellules devient une rangée ; les styles directs (game.js) portent la position. */
#fan[data-side="left"] #fan-column, #fan[data-side="right"] #fan-column { flex-direction: row; }
/* Le réglage « Palette » : sur un petit écran, l'étiquette AU-DESSUS des quatre segments (ils se cassaient sur deux lignes, iPhone). */
@media (max-width: 560px) {
  .setting-row.seg-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .setting-row.seg-row .seg-group { justify-content: flex-start; }
}
/* L'en-tête sous 560 px (v0.19) : le titre fonçait dans l'engrenage. Le kicker et le second filet s'effacent, le titre
   rétrécit et se tronque proprement (…) plutôt que d'écraser les boutons ; la marque ne déborde jamais. */
@media (max-width: 560px) {
  .brand-kicker { display: none; }
  .header-titles + .header-rule { display: none; }
  .header-brand { overflow: hidden; gap: 10px; }
  .header-titles { min-width: 0; }
  .brand-title { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .header-lang { gap: 6px; }
}
/* Le banc dans le « ? » (v0.19) : le tampon est caché sur petit écran — sa ligne (version, verdict, mesures du dock) s'y relit. */
.help-stamp { display: none; margin: 14px 0 0; font: 11px/1.4 var(--font-body); color: var(--mid); word-break: break-all; }
@media (max-width: 720px) { .help-stamp { display: block; } }
/* Le téléphone (v0.20, body.phone posé par game.js quand le côté court < 560 px) : pas de réglage « Palette » — le dock reste en bas. */
body.phone .setting-row.seg-row { display: none; }
/* L'onglet (v0.21, Nathalie) : en bas, sur iPad et Mac, le dock n'est plus une bande d'un bord à l'autre — un onglet centré,
   coins arrondis en haut, la rangée des couleurs et la rangée des outils centrées dedans. Le téléphone garde sa bande. */
body.dock-bottom:not(.phone) #dock {
  left: 50%; right: auto; transform: translateX(-50%); width: auto; max-width: calc(100vw - 24px);
  border-radius: 18px 18px 0 0; padding: 10px 22px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -1px 0 rgba(0,0,0,0.06), 0 -6px 18px rgba(0,0,0,0.05);
}
/* L'onglet sur les côtés (v0.22, Nathalie) : collé au bord, centré en hauteur dans l'espace sous l'en-tête, coins arrondis vers le dessin. */
body.dock-left:not(.phone) #dock, body.dock-right:not(.phone) #dock {
  top: var(--header-h, 80px); bottom: 0; margin: auto 0; transform: none;                 /* v0.25 : centré par les marges automatiques dans la fenêtre VISIBLE */
  height: -webkit-fit-content; height: fit-content; max-height: none;
  padding: 18px 8px 18px 6px;
  box-shadow: -1px 0 0 rgba(0,0,0,0.06), -6px 0 18px rgba(0,0,0,0.05);
}
body.dock-right:not(.phone) #dock { border-radius: 18px 0 0 18px; }
body.dock-left:not(.phone) #dock { border-radius: 0 18px 18px 0; padding: 18px 6px 18px 8px; box-shadow: 1px 0 0 rgba(0,0,0,0.06), 6px 0 18px rgba(0,0,0,0.05); }
/* La mesure du dock (v0.48, game.js) : la boîte épouse son contenu le temps d'une lecture — sans plafond, sinon la mesure mentirait. */
body.dock-measure #dock { bottom: auto !important; max-height: none !important; }

/* ===== LE POLAROID (M5 étape 2 → 2b) — le théâtre au-dessus de la vérité =====
   La photo (cadre + légende compris) est un PNG déjà vrai quand la scène s'ouvre. Ici seulement le théâtre.
   Les nombres viennent de game.js (un seul jeu, audité, réglable au tunnel) :
   --pola-flash · --pola-slot-ms · --pola-slide (durée) · --pola-drop-ms (chute + swing) · --pola-develop · --pola-tilt
   --pola-slot-y (le BAS de la fente, en px depuis le haut de l'écran) · --pola-slot-w · --pola-dist (la course de sortie) ·
   --pola-drop (la chute, px) · --pola-vh (la hauteur visible, mesurée en JS — jamais 100vh sur iPad). */
#pola-flash { position: fixed; inset: 0; z-index: 30; background: #FFFFFF; opacity: 0; pointer-events: none; }
#pola-flash[hidden] { display: none; }
#pola-flash.on { opacity: 1; }
#pola-flash.fade { opacity: 0; transition: opacity var(--pola-flash, 180ms) ease-out; }
#pola { position: fixed; inset: 0; z-index: 25; }
#pola[hidden] { display: none; }
#pola-veil { position: absolute; inset: 0; background: rgba(17,17,17,0.55); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); opacity: 0; transition: opacity 300ms ease; }
#pola.shown #pola-veil { opacity: 1; }
/* La bouche : une fine bande noire sous l'en-tête, qui s'étire depuis son centre à l'éclair, reste ouverte tant que la photo est là */
#pola-slot { position: absolute; left: 50%; top: calc(var(--pola-slot-y, 100px) - var(--pola-slot-h, 16px)); width: var(--pola-slot-w, 400px); height: var(--pola-slot-h, 16px);
  background: var(--ink); border-radius: 6px; transform: translateX(-50%) scaleX(0); transition: transform var(--pola-slot-ms, 150ms) ease-out; z-index: 2; }
#pola-slot::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: var(--pola-slot-line, 2px); margin-top: calc(var(--pola-slot-line, 2px) / -2);
  background: #8A8378; border-radius: 1px; }   /* la vraie fente, la ligne grise au milieu — c'est de là que le petit sort */
#pola.slot-open #pola-slot { transform: translateX(-50%) scaleX(1); }
/* Tout ce qui est encore dans l'appareil est invisible : la scène vit dans une boîte qui COMMENCE au bas de la fente et coupe
   ce qui dépasse (overflow: hidden — v0.30 : clip-path laissait passer la photo animée sur Safari iPad ; overflow ne laisse rien passer) */
#pola-out { position: absolute; top: var(--pola-slot-y, 100px); left: 0; right: 0; bottom: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.pola-stage {
  position: relative; display: inline-block; line-height: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transform: translateY(calc(-1 * var(--pola-dist, 100vh))) rotate(0deg);   /* dans l'appareil, au-dessus de la fente */
}
#pola.measure .pola-stage { transform: none; visibility: hidden; }        /* un instant pour mesurer la course, invisible */
/* Temps 1 — pincée : sortie droite, à vitesse de moteur (linéaire), jusqu'à --pola-drop au-dessus de son repos */
#pola.slide .pola-stage { transform: translateY(calc(-1 * var(--pola-drop, 30px))) rotate(0deg); transition: transform var(--pola-slide, 1250ms) linear; }
/* Temps 2 — lâchée : dès que le bord du haut quitte la fente, elle tombe (accélère) ET tourne — la chute donne le swing, amorti.
   La rotation part à 0 % : plus un pixel tout droit après la fente (v0.28). */
#pola.drop .pola-stage { transition: none; animation: pola-drop var(--pola-drop-ms, 650ms) forwards; }
@keyframes pola-drop {
  0%   { transform: translateY(calc(-1 * var(--pola-drop, 30px))) rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  14%  { transform: translateY(calc(-0.55 * var(--pola-drop, 30px))) rotate(calc(var(--pola-tilt, -2.5deg) * 1.4)); animation-timing-function: ease-in; }
  26%  { transform: translateY(0) rotate(calc(var(--pola-tilt, -2.5deg) * 3.2)); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); }   /* le coin cogne : POUF — elle repart VITE vers la droite, puis ease out, longtemps */
  74%  { transform: translateY(0) rotate(calc(var(--pola-tilt, -2.5deg) * 0.7)); animation-timing-function: cubic-bezier(0.05, 0.85, 0.2, 1); }   /* … un peu au-delà du repos ; second petit coup : vite, et ease out jusqu'à la place */
  100% { transform: translateY(0) rotate(var(--pola-tilt, -2.5deg)); }
}
#pola.settled .pola-stage, #pola.still .pola-stage { transform: translateY(0) rotate(var(--pola-tilt, -2.5deg)); animation: none; transition: none; }
#pola-img { display: block; width: auto; height: auto; max-width: min(88vw, 640px); max-height: min(calc(var(--pola-vh, 700px) - var(--pola-slot-y, 100px) - 48px), 720px); background: #FFFFFF; }
/* Le développement, trois couches, sur la fenêtre seule (les proportions du cadre : 54/1458 · 54/1342 · 1350/1458 · 1098/1342) :
   1. le lait, gris clair chaud, qui FONCE (0 → 35 %) · 2. l'image PERCE, floue, brunâtre, sans contraste (25 → 70 %) · 3. elle S'ÉCLAIRCIT : les couleurs arrivent (70 → 100 %) */
#pola-milk, #pola-dev { position: absolute; left: 3.7037%; top: 4.0238%; width: 92.5926%; height: 81.8182%; }
#pola-milk { background: #E3DED3; }
#pola-dev { opacity: 0; filter: blur(2px) sepia(0.7) contrast(0.5) brightness(1.08); }
#pola.developing #pola-milk { animation: pola-milk var(--pola-develop, 2200ms) forwards; }
#pola.developing #pola-dev { animation: pola-dev var(--pola-develop, 2200ms) forwards; }
@keyframes pola-milk { 0% { background: #E3DED3; } 25% { background: #B9B2A4; } 100% { background: #B9B2A4; } }
@keyframes pola-dev {
  0%   { opacity: 0; filter: blur(2px) sepia(0.7) contrast(0.5) brightness(1.08); }
  20%  { opacity: 0; filter: blur(2px) sepia(0.7) contrast(0.5) brightness(1.08); }
  55%  { opacity: 1; filter: blur(2px) sepia(0.6) contrast(0.6) brightness(1.06); }   /* elle perce, floue longtemps — encore floue quand elle s'arrête de bouger */
  80%  { opacity: 1; filter: blur(1px) sepia(0.3) contrast(0.85) brightness(1.02); }
  100% { opacity: 1; filter: none; }
}
#pola.developed #pola-milk, #pola.developed #pola-dev { display: none; }   /* développée : la vérité est dessous, identique */
#pola-close { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); color: #FFFFFF; z-index: 26; }
#pola-close:hover { color: var(--red); }
#pola-actions { position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 12px; z-index: 26; }
#pola-actions[hidden] { display: none; }
/* Les boutons d'action : Partager (si le système le supporte) + Télécharger. Fond chaud semi-transparent sur le voile sombre. */
.pola-action-btn {
  min-height: 44px; padding: 0 22px; border: none; border-radius: 10px;
  background: rgba(248,246,241,0.92); color: var(--ink);
  font: 600 15px -apple-system, sans-serif; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: background 0.15s;
}
.pola-action-btn:hover, .pola-action-btn:active { background: #E2DCD1; }
.pola-action-btn.done, .pola-action-btn[disabled] { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  #pola-flash.fade, #pola-veil, #pola-slot, .pola-stage, #pola.slide .pola-stage { transition: none; }
  #pola.drop .pola-stage, #pola.developing #pola-milk, #pola.developing #pola-dev { animation: none; }
  #pola-slot { display: none; }
  #pola-out { overflow: visible; }
  .pola-action-btn { transition: none; }
}