/* luxe-notre-metier.css — Notre métier (FR/IT/EN), atelier LUXE, 30/09/2026. Chargée en dernier, après maisons-etalonnage.css.
   Trois choses, rien d'autre : (1) la galerie ivoire montre le photogramme existant films/terrae/TERRAE_03.webp (« geste de récolte »)
   en planche paysage de 62 % — le photogramme de 720 px est affiché à ~760 px à 1440, presque à sa taille ; la salle, le passe-partout,
   le volume, la commande « Suspendre » et le moteur (galeries-ivoire.mjs, maisons-galeries.mjs) restent tels quels ; (2) les renvois
   .lx-renvoi posés dans le paragraphe de chaque responsabilité (photogramme existant + légende existante + lien vers la séquence,
   qui ne bouge pas) ; (3) l'arrivée du renvoi — filet qui se trace, bloc qui se pose (opacité et transform seulement, espace déjà
   réservé : aucun décalage de mise en page). Gardes : body[data-tc-cine-paused="true"] → état final statique ; mouvement réduit,
   contraste renforcé, couleurs forcées, impression → aucune animation, tout visible. Jetons du site seulement ; aucune police.
   LOT INTENSITÉ (Claude, 30/09/2026 ; arbitrages Codex 16:45, 16:49) : le raisin, pas l'arche, est le point de fixation.
   À partir de 1100 px, la scène se resserre autour du photogramme (720 px, sa définition : jamais étiré) et se centre ;
   le volume blanc, conservé, est réduit et posé en marge du sujet ; cartel et commande restent sous l'image, dans le même
   ordre. À 700 px et moins, le volume sort des grappes (réduit, en marge). Renvois lisibles, plus des timbres : vignettes
   76 → 144 px (1440) et 64 → 104 px (390), légende plus grande ; survol/focus visibles (filet, cadre orange, image qui se
   lève) ; arrivée en ordre filet → matière → repère → action (aucun déplacement animé du texte : légende et action en fondu).
   v2 (18:15) : scène ≤ 816 px dès 701 px, volume en marge basse ; neutralisations à spécificité égale (F18-01). */

/* 1. Galerie ivoire : planche paysage à 62 %, cadrage sur les grappes ; passe-partout et volume gardent leur place à droite. */
body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-stage > .iv-picture { width: 62%; }
body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-picture img { object-position: 50% 44%; }
@media (max-width: 700px) {
  body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-stage > .iv-picture { width: 100%; }
}

/* 2. Renvois : photogramme existant (76 × 135, 9:16 comme les films), légende existante, action. Dans le paragraphe :
      ils suivent la colonne de lecture à toutes les largeurs (grilles des responsabilités inchangées). */
body.page-notre-metier:not(#lx-metier) .lx-renvoi {
  position: relative; display: grid; grid-template-columns: clamp(112px, 10vw, 144px) minmax(0, 1fr); gap: 0 clamp(20px, 2vw, 30px); align-items: center;
  margin-top: 34px; padding-top: 24px; max-width: 34em; color: inherit; text-decoration: none;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: currentColor; opacity: .3;
  transform-origin: left center;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi > img {
  display: block; width: clamp(112px, 10vw, 144px); height: auto; aspect-ratio: 9 / 16; max-width: none; object-fit: cover; object-position: 50% 45%;
  outline: 1px solid color-mix(in srgb, currentColor 24%, transparent); outline-offset: 3px;
  transition: translate 480ms var(--tc-ease-mineral, cubic-bezier(.16, .6, .1, 1)), outline-color 320ms ease, outline-offset 320ms ease, box-shadow 480ms ease;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi-texte { display: grid; gap: 10px; min-width: 0; }
body.page-notre-metier:not(#lx-metier) .lx-renvoi-legende {
  font: 300 clamp(19px, 1.55vw, 24px)/1.35 var(--tc-serif, Georgia, serif); letter-spacing: -.012em; text-wrap: balance;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi-action {
  display: inline-flex; align-items: center; gap: 12px; width: max-content; max-width: 100%;
  font: 400 11.5px/1.5 var(--tc-sans, Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi-action > span[aria-hidden] { color: var(--co-orange, var(--pe-orange, #f37021)); text-decoration: none; }
body.page-notre-metier:not(#lx-metier) .lx-renvoi:hover .lx-renvoi-action { text-decoration-thickness: 2px; }
body.page-notre-metier:not(#lx-metier) .lx-renvoi:is(:hover, :focus-visible) > img {
  translate: 0 -6px; outline-color: var(--co-orange, var(--pe-orange, #f37021)); outline-offset: 6px; box-shadow: 0 22px 30px -20px #071e18b3;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi:is(:hover, :focus-visible)::before { opacity: .8; }
body.page-notre-metier:not(#lx-metier) .lx-renvoi:focus-visible .lx-renvoi-action { text-decoration-thickness: 2px; }
body.page-notre-metier:not(#lx-metier) .lx-renvoi:focus-visible { outline: 2px solid var(--co-orange, var(--pe-orange, #f37021)); outline-offset: 6px; }
@media (max-width: 700px) {
  body.page-notre-metier:not(#lx-metier) .lx-renvoi { grid-template-columns: 104px minmax(0, 1fr); gap: 0 18px; margin-top: 28px; padding-top: 20px; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi > img { width: 104px; height: auto; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi-legende { font-size: 19px; }
}

/* 3. Arrivée du renvoi (le seul raffinement de mouvement de la page). États posés par luxe-notre-metier.mjs :
      « attente » hors écran (opacité seule, la place est prise), « anime » à l'entrée, « static » sous garde ou déjà à l'écran. */
body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="attente"] { opacity: 0; }
body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"]::before {
  animation: lx-renvoi-filet 900ms var(--tc-ease-mineral, cubic-bezier(.16, .6, .1, 1)) both;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] > img {
  animation: lx-renvoi-matiere 1100ms var(--tc-ease-mineral, cubic-bezier(.16, .6, .1, 1)) 250ms both;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] .lx-renvoi-legende {
  animation: lx-renvoi-fondu 800ms ease-out 700ms both;
}
body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] .lx-renvoi-action {
  animation: lx-renvoi-fondu 800ms ease-out 1000ms both;
}
@keyframes lx-renvoi-filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lx-renvoi-matiere { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lx-renvoi-fondu { from { opacity: 0; } to { opacity: 1; } }
/* Garde partagée (raccord-mouvement.mjs : dialogue, scène en pause, météo, onglet caché) : état final, lisible, sans geste. */
body.page-notre-metier[data-tc-cine-paused="true"]:not(#lx-metier) .lx-renvoi,
body.page-notre-metier[data-tc-cine-paused="true"]:not(#lx-metier) .lx-renvoi::before,
body.page-notre-metier[data-tc-cine-paused="true"]:not(#lx-metier) .lx-renvoi :is(img, .lx-renvoi-legende, .lx-renvoi-action) { animation: none; }
body.page-notre-metier[data-tc-cine-paused="true"]:not(#lx-metier) .lx-renvoi[data-lx-vu] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active), print {
  body.page-notre-metier:not(#lx-metier) .lx-renvoi,
  body.page-notre-metier:not(#lx-metier) .lx-renvoi::before,
  body.page-notre-metier:not(#lx-metier) .lx-renvoi :is(img, .lx-renvoi-legende, .lx-renvoi-action) { animation: none; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu] { opacity: 1; transform: none; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi > img { transition: none; translate: none; }
}
@media (forced-colors: active) {
  body.page-notre-metier:not(#lx-metier) .lx-renvoi::before { background: CanvasText; opacity: 1; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi > img { outline-color: CanvasText; }
}
@media print {
  body.page-notre-metier:not(#lx-metier) .lx-renvoi-action { display: none; }
}
/* ---- LOT INTENSITÉ v2 (18:15, relecture Codex 18:10) : le raisin serré dans son cadre ----------------------------------
   ≥ 701 px : scène resserrée à 816 px au plus et centrée ; photogramme à sa définition au plus (720 px), toujours 44 px plus
   étroit que la scène pour laisser la marge au volume ; passe-partout serré autour du raisin ; volume (arche) réduit, posé en
   marge basse sur le bord droit du passe-partout, sans couvrir grappes, cartel ni « Suspendre » (cartel et commande restent
   sous l'image, même rangée, même ordre). ≤ 700 px : volume réduit, sorti des grappes, en débord bas droit (inchangé v1). */
@media (min-width: 701px) {
  body.page-notre-metier:not(#lx-metier) .iv-gallery > .iv-stage { width: min(100%, 816px); justify-self: center; }
  body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-stage > .iv-picture { width: min(720px, calc(100% - 44px)); }
  body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-picture img { object-position: 50% 46%; }
  body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-stage > .iv-volume {
    /* Largeur = exactement la colonne de marge (44 px + passe-partout) : la boîte de l'arche ne chevauche jamais le photogramme. */
    width: calc(44px + var(--mc-gallery-mat, 24px)); height: calc(1.55 * (44px + var(--mc-gallery-mat, 24px)));
    margin: 0 calc(-1 * var(--mc-gallery-mat, 24px)) -26px 0;
  }
}
@media (max-width: 700px) {
  body.page-notre-metier:not(#lx-metier) .iv-gallery .iv-stage > .iv-volume { width: 22%; height: 112px; margin: 0 -6% -30px 0; }
}

/* ---- LOT NOIR ET BLANC (Claude, 30/09/2026) : « Observer · Attendre · Composer · Transmettre », ligne manifeste ----------
   Demande du propriétaire (« le blanc/noir à certains endroits cohérents de Terrae ») ; grammaire relevée chez Dom Pérignon,
   traduite et jamais copiée ; arbitrages Codex 18:51. COULEURS SEULEMENT, sur .dv-gestures : bande noire #0d0d0d pleine
   largeur, mots en blanc, points séparateurs gris (discrets, contrastés à plus de 4,5:1). Pleine largeur SANS mise en page :
   le fond du bandeau et une ombre pleine (box-shadow, débord « d'encre » qui ne crée jamais de défilement) sont découpés
   par clip-path en hauteur (14 px sous le titre de section, pour qu'il ne colle pas à la bande ; 22 px au-dessus du bas, pour
   centrer optiquement la ligne) et prolongés jusqu'aux bords de la fenêtre. Boîtes, marges, polices, casse, ordre des quatre
   gestes et grille 2 × 2 du téléphone inchangés ; aucune interaction, aucune animation. */
body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures {
  background: #0d0d0d; color: #ffffff;
  box-shadow: 0 0 0 100vmax #0d0d0d; clip-path: inset(14px -100vmax 22px);
}
body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures span:not(:last-child)::after { color: #8a8a8a; }
@media (max-width: 700px) {
  body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures { clip-path: inset(12px -100vmax 10px); }
}
/* Replis : contraste renforcé (points blancs) ; couleurs forcées (couleurs système, rien de peint) ; impression (encre sur papier). */
@media (prefers-contrast: more) {
  body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures span:not(:last-child)::after { color: #ffffff; }
}
@media (forced-colors: active) {
  body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures { background: Canvas; color: CanvasText; box-shadow: none; clip-path: none; }
  body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures span:not(:last-child)::after { color: CanvasText; }
}
@media print {
  body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures { background: none; color: #0d0d0d; box-shadow: none; clip-path: none; }
  body.page-notre-metier:not(#lx-metier) .ed-responsibilities .dv-gestures span:not(:last-child)::after { color: #595959; }
}

/* ---- Gardes réaffirmées en fin de feuille ---- */
body.page-notre-metier[data-tc-cine-paused="true"]:not(#lx-metier) .lx-renvoi > img { transition: none; translate: none; }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active), print {
  body.page-notre-metier:not(#lx-metier) .lx-renvoi :is(img, .lx-renvoi-legende, .lx-renvoi-action),
  body.page-notre-metier:not(#lx-metier) .lx-renvoi::before { animation: none; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi > img { transition: none; translate: none; }
}
/* ---- v2 (F18-01, BEAUVOIR 18:00) : neutralisations à spécificité ÉGALE aux effets qu'elles annulent, placées après eux ----
   Arrivée : .lx-renvoi[data-lx-vu="anime"]::before et > img (1,3,2) ; légende et action (1,4,1) ; attente (1,3,1).
   Survol/focus : .lx-renvoi:is(:hover, :focus-visible) > img (1,3,2). Même sélecteur, plus loin dans la feuille : la
   neutralisation l'emporte sans !important et sans dépendre de la garde JS — impression pendant une arrivée comprise.
   État final visible : opacité 1, transform et translate à none, aucune animation ni transition. */
@media (prefers-reduced-motion: reduce), (prefers-contrast: more), (forced-colors: active), print {
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"]::before { animation: none; transform: none; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] > img { animation: none; opacity: 1; transform: none; translate: none; transition: none; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] .lx-renvoi-legende,
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] .lx-renvoi-action { animation: none; opacity: 1; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="attente"],
  body.page-notre-metier:not(#lx-metier) .lx-renvoi[data-lx-vu="anime"] { animation: none; opacity: 1; transform: none; }
  body.page-notre-metier:not(#lx-metier) .lx-renvoi:is(:hover, :focus-visible) > img { translate: none; transition: none; }
}