/* ============================================================================
 * hub-photo.css — La pellicule, les tirages et l'établi du hub Photo.
 *
 * L'univers lui-même (police, pièce, papier, jetons) est dans CSS/atelier.css,
 * partagé avec les 9 pages d'outil — à charger AVANT ce fichier. Ici,
 * uniquement ce qui n'existe que sur le hub.
 * ========================================================================== */

/* ---- L'ENSEIGNE ----------------------------------------------------------- */
body[data-page="photo"] .section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.01em; font-weight: 700;
}
body[data-page="photo"] .tools-intro { max-width: 720px; }
/* En chambre noire, le trait vert sous le titre devient un filet ambre. */
body[data-page="photo"].dark-mode .section-title span::after { background: var(--pho-safe); }

/* ---- 3. LA PELLICULE (la chaîne de traitement) ---------------------------- */
/* Cinq étapes alignées : c'est déjà une bande de film, autant le dire. */
body[data-page="photo"] .st-flow {
  position: relative;
  background: var(--pho-film);
  border-radius: 3px;
  padding: 1.5rem 0.9rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  gap: 0;
}
/* Les perforations, en haut et en bas. */
body[data-page="photo"] .st-flow::before,
body[data-page="photo"] .st-flow::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background-image: radial-gradient(circle at center, #dfe3e8 0 2.6px, transparent 3px);
  background-size: 22px 9px; background-repeat: repeat-x;
}
body[data-page="photo"] .st-flow::before { top: 5px; }
body[data-page="photo"] .st-flow::after { bottom: 5px; }

body[data-page="photo"] .st-flow-step {
  flex: 1 1 0; justify-content: center;
  padding: 0.55rem 0.7rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0; background: none;
  font-family: var(--pho-caption); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f1f3f5;                        /* pellicule sombre dans les deux thèmes */
}
body[data-page="photo"] .st-flow-step:last-child { border-right: 0; }
body[data-page="photo"] .st-flow-step i { color: var(--on-dark-accent); }
/* Les chevrons faisaient le lien entre des pastilles ; entre deux photogrammes,
   c'est le filet qui sépare. */
body[data-page="photo"] .st-flow-sep { display: none; }

/* ---- 4. LES TIRAGES ------------------------------------------------------- */
/* liquid-glass.css impose `background: var(--glass-bg) !important` sur
   .tool-card : on change les VALEURS, pas la règle. Un tirage n'est pas en
   verre — ni flou, ni translucide, et il reste blanc en chambre noire. */
/* Le papier n'existe qu'à la lumière du jour : la nuit, les cartes reprennent
   le verre sombre du site et donc ses jetons de couleur — plus rien à
   rebasculer, c'est l'image seule qui porte l'identité (voir la visionneuse). */
body.lg-on[data-page="photo"]:not(.dark-mode) {
  --glass-bg:        var(--pho-paper);
  --glass-bg-strong: var(--pho-paper);
  --glass-border:    var(--pho-edge);
  --radius-glass:    3px;
  --glass-shadow:    0 2px 4px rgba(20, 24, 30, 0.14), 0 14px 30px rgba(20, 24, 30, 0.16);
}

/* .st-app tire son fond de var(--glass-bg) : sur cette page c'est du papier,
   dans les deux thèmes — donc concerné. .st-desktop, lui, garde son propre
   dégradé vert translucide et SUIT le thème : l'y ajouter revenait à y écrire
   de l'encre sombre sur un panneau sombre (3 icônes à 2,12:1 en chambre noire). */
body[data-page="photo"]:not(.dark-mode) .tool-card,
body[data-page="photo"]:not(.dark-mode) .st-app {
  /* LE POINT CENTRAL : ces surfaces sont du papier blanc dans LES DEUX thèmes.
     Sans ce bloc, tout leur texte passe en valeurs « fond sombre » dès que le
     visiteur bascule en chambre noire — vert vif sur blanc, 1,40:1. */
  --text-color:   var(--pho-ink);
  --accent-text:  var(--brand-green-deep);
  --warn-text:    #9a4708;
  --bad-text:     #b03325;
  --info-text:    #0a6b84;
  --special-text: #6b3fd4;
  color: var(--pho-ink);
}

body[data-page="photo"] .tool-card {
  padding: 1rem 1rem 1.4rem;            /* la marge basse d'un tirage */
  gap: 0.7rem;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Posés à la main : jamais tout à fait droits. */
body[data-page="photo"] .tools-grid .tool-card:nth-child(3n+1) { transform: rotate(-0.55deg); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(3n+2) { transform: rotate(0.35deg); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(3n)   { transform: rotate(-0.2deg); }
/* On le prend en main : il se redresse et se soulève. */
body[data-page="photo"] .tools-grid .tool-card:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 0 4px 8px rgba(20, 24, 30, 0.16), 0 22px 44px rgba(20, 24, 30, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="photo"] .tools-grid .tool-card,
  body[data-page="photo"] .tools-grid .tool-card:hover { transform: none; }
}

/* L'image du tirage : l'icône devient la photo, pas une pastille. */
/* LE CLICHÉ. Neuf rectangles gris identiques avec une icône au milieu, ce n'est
   pas une photo : c'est un emplacement vide. Chaque tirage reçoit donc son
   propre bichrome, du grain et un léger vignettage — les trois choses qui font
   qu'une surface se lit comme une image plutôt que comme un aplat. Le grain est
   un SVG en data-URI (aucune requête réseau, cette page n'en fait pas). */
body[data-page="photo"] .tool-card-icon {
  position: relative; overflow: hidden;
  width: 100%; height: 118px; border-radius: 2px; font-size: 2.4rem;
  /* Le sujet du cliché. 0,5 ne donnait que 2,68:1 sur les bichromes clairs —
     sous le seuil des icônes. L'opacité se compose avec le contraste. */
  color: rgba(24, 27, 32, 0.74);
  background: linear-gradient(158deg, #d7cdbb 0%, #b7a992 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 30, 0.1);
}
body[data-page="photo"] .tool-card-icon > i { position: relative; z-index: 2; }
/* Le grain argentique. */
body[data-page="photo"] .tool-card-icon::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.42; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* Le vignettage : un tirage n'est jamais uniforme jusqu'au bord. */
body[data-page="photo"] .tool-card-icon::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 78% 70% at 50% 42%, transparent 40%, rgba(18, 16, 14, 0.26) 100%);
}
/* Six bichromes, cyclés : deux tirages voisins ne sont jamais de la même image. */
body[data-page="photo"] .tools-grid .tool-card:nth-child(6n+1) .tool-card-icon { background: linear-gradient(158deg, #d9ccb8 0%, #b3a184 100%); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(6n+2) .tool-card-icon { background: linear-gradient(158deg, #ccd6de 0%, #98a8b8 100%); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(6n+3) .tool-card-icon { background: linear-gradient(158deg, #cbd5c4 0%, #9aab92 100%); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(6n+4) .tool-card-icon { background: linear-gradient(158deg, #e0cdc5 0%, #bb9d94 100%); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(6n+5) .tool-card-icon { background: linear-gradient(158deg, #c3d3d2 0%, #93aaa9 100%); }
body[data-page="photo"] .tools-grid .tool-card:nth-child(6n)   .tool-card-icon { background: linear-gradient(158deg, #e3d3b2 0%, #bda87e 100%); }
/* La nuit, la même image passe sur la boîte lumineuse : rétroéclairée, donc plus
   claire et plus chaude, montée dans un cache noir. Le grain et le vignettage
   restent — c'est toujours le même cliché. */
body[data-page="photo"].dark-mode .tool-card-icon {
  color: rgba(26, 22, 16, 0.72);
  border: 3px solid #14161a;
  box-shadow: 0 0 26px rgba(255, 230, 185, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  /* Rétroéclairé, pas délavé : au-delà, la teinte du cliché disparaît. */
  filter: brightness(1.24) saturate(0.95);
}
body[data-page="photo"].dark-mode .tool-card-icon::after {
  background: radial-gradient(ellipse 80% 72% at 50% 42%, transparent 46%, rgba(60, 40, 16, 0.2) 100%);
}
body[data-page="photo"] .tool-card h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
body[data-page="photo"] .tool-card p { opacity: 0.78; font-size: 0.9rem; }

/* La légende, en bas du tirage — annotation au dos, pas bouton d'appli. */
body[data-page="photo"] .tool-card-cta {
  font-family: var(--pho-caption); font-size: 0.72rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding-top: 0.6rem; margin-top: auto;
  border-top: 1px solid var(--pho-edge); width: 100%;
}
/* Essayé et retiré : des coins photo aux angles du tirage. Ils se battaient avec
   la pastille de genre, l'étoile « favori » et le bord du cliché, et l'un d'eux
   tombait au milieu du texte. Un tirage posé sur une table lumineuse n'est de
   toute façon pas monté : les coins, c'est pour l'album. */

/* L'étiquette collée dans le coin. */
body[data-page="photo"] .tool-card-badge {
  top: 0.85rem; right: 0.85rem; transform: rotate(2deg);
  border-radius: 2px; background: #ffd9a8; color: #5a3410;
  font-family: var(--pho-caption); letter-spacing: 0.06em;
  box-shadow: 0 2px 5px rgba(20, 24, 30, 0.18);
}
/* L'étoile « favori » reste à sa place par défaut (bas-droite) : c'est la marge
   blanche du tirage, à côté de la légende. Essayée dans le coin de l'image, elle
   tombait sur le gris du cliché — 2,87:1, sous le seuil des icônes.
   La nuit, la carte redevient sombre : l'étoile reprend sans rien de spécial le
   traitement standard du thème sombre. */

/* ---- 5. LES INTERCALAIRES ------------------------------------------------- */
body[data-page="photo"] .st-group-head h2 {
  font-family: 'Playfair Display', Georgia, serif; font-size: 1.45rem;
}
body[data-page="photo"] .st-group-head i {
  border-radius: 2px;
  background: var(--pho-paper);
  border: 1px solid var(--pho-edge);
  color: #47525e;
  box-shadow: 0 2px 6px rgba(20, 24, 30, 0.14);
}
/* La nuit, l'intertitre n'est pas éclairé : plus de carré blanc au mur. */
body[data-page="photo"].dark-mode .st-group-head i {
  background: #191512;
  border-color: rgba(255, 176, 102, 0.28);
  color: var(--on-dark-accent);
  box-shadow: none;
}
body[data-page="photo"] .st-desktop-kicker,
body[data-page="photo"] .st-app-dl {
  font-family: var(--pho-caption); letter-spacing: 0.06em; text-transform: uppercase;
}
body[data-page="photo"] .st-desktop { border-radius: 4px; }
body[data-page="photo"] .st-desktop h2 { font-family: 'Playfair Display', Georgia, serif; }
body[data-page="photo"] .st-app { border-radius: 3px; }