/* Farellacci 2026 — Di Luce e Ombra, variante CLAIRE (B-18 : DLO2, l'oeuvre dans la lumiere).
   Copie de dlo/css/dlo.css puis les quatre gestes du lot, rien d'autre. Chargee APRES
   ../../css/site.css (hors @layer : elle gagne sur les utilitaires sans !important).
   Hex uniquement, parmi les 11 mesures ; aucun hex neuf.

   ═══ Le principe (01_MISSION_SCOPE § B-18) ═══════════════════════════════════
   « je suis plus blanc que noir » : la page HERITE du jour de site.css — cette feuille
   ne redefinit AUCUNE couleur, ne force aucun schema sombre. Plus de spot (la couche d ombre) :
   « le site n'a pas a justifier le nom par des effets d'ombre ». La porte DLO de la V2
   reste dans la nuit ; on clique, l'oeuvre s'ouvre dans la lumiere. */

/* la barre : meme patron que site.css (.barre), qui peint tout en var(--color-*) —
   elle rend donc claire sans une seule regle neuve. Le bouton IT/EN est une FORME
   SEULE (B-17.7) : aucun href, aucun hreflang, aucune seconde URL. */
.lang-toggle {
  background: transparent; border: 0; padding: 0; cursor: default;
  font: inherit; color: inherit; letter-spacing: .14em; font-size: .64rem;
}
.lang-toggle b { font-weight: 400; }

/* ═══ B-17.1 — l'entree de section ═══════════════════════════════════════════ */
.dlo-intro { max-width: 62ch; }

/* titre de gabarit projet — meme famille typo que le h1 V2 (font-serif, clamp),
   valeur propre a Diluce : pas de dependance a une classe Tailwind non compilee. */
.dlo-titolo { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 26ch; }

/* ═══ le cadre — creme le temps du lazy, l'image le remplit (B-18 geste 1) ═════
   Aucune couche d'ombre : la cornice ne contient plus que l'image. */
.dlo-cornice { position: relative; overflow: hidden; background: var(--color-creme); width: 100%; }
.dlo-cornice img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ═══ B-18 geste 4 — le parallax, seulement la ou l'image est deja en cover ═════
   Patron copie de v2.css (.v2-banda) : une image de 160 % posee a -30 %, que dlo2.js
   fait glisser de -18 % a +18 % au scrub ([data-banda], copie de v2.js § B-15.2).
   18 est la borne mathematique (50 × 0,6 / 1,6 = 18,75) : au-dela un bord entre.
   Sans GSAP ou sous reduced-motion : l'image reste a -30 %, elle couvre toujours. */
[data-banda] img { position: absolute; top: -30%; left: 0; width: 100%; height: 160%; object-fit: cover; }

/* ═══ le gabarit projet — recit a trois VRAIES tailles (B-18 geste 2) ═════════
   orientamento du manifeste -> pose : paysage = piena (pleine largeur du conteneur) ;
   portrait/carre, 1er d'une suite = sola (seule, centree, grande) ; les 2 suivants =
   dittico (deux cote a cote). Plus aucun portrait a 640 px (le defaut mesure sur Roots,
   12/15). Deduit des donnees par genera_progetto.py, jamais choisi image par image. */
.dlo-racconto { display: grid; gap: clamp(28px, 5vw, 64px); padding-block: clamp(40px, 6vw, 88px); }
.dlo-racconto > * { grid-column: 1 / -1; }
/* l'aspect-ratio vient d'un style INLINE pose par genera_progetto.py depuis le
   manifeste (largeur/altezza reelles) : attr() sur une propriete non textuelle
   n'a aucun support navigateur, on ne s'y fie pas. */
.dlo-img--piena { width: 100%; }
.dlo-img--sola { width: 100%; max-width: min(1100px, 72vw); justify-self: center; }
.dlo-img--sola.dlo-carre { max-width: min(900px, 64vw); }
.dlo-dittico {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  gap: clamp(12px, 2vw, 28px); width: 100%; max-width: 1100px; justify-self: center;
}
.dlo-img--dittico { min-width: 0; }
@media (max-width: 48rem) {
  .dlo-img--sola, .dlo-img--sola.dlo-carre { max-width: 100%; }
  /* le dittico RESTE a deux colonnes : une planche, ca se lit (l'oeil du Superviseur tranche a 390) */
}
.dlo-testo { max-width: 56ch; justify-self: center; text-align: center; display: grid; gap: .9em; }
.dlo-testo p { color: var(--color-encre); margin: 0; }

/* ═══ B-18 geste 3 — UN quadro epingle par projet photo, l'essai ═══════════════
   position: sticky, jamais ScrollTrigger.pin : natif, sans recalcul, joue au doigt,
   ne compte pas comme mouvement (tient sous reduced-motion). L'image tient 100svh
   (vh en repli, patron B-12.5) ; le texte passe PAR-DESSUS l'image tenue, sur un
   panneau clair — jamais pose sur la photo. Le wrapper garde 40svh sous le texte
   pour que l'image se libere apres lui — en CONTENU (::after), pas en padding : le
   rectangle de contrainte d'un sticky est la boite de contenu du parent, un padding
   n'y compte pas (mesure : avec padding-bottom l'image lachait des la fin du texte). */
.dlo-quadro { position: relative; }
.dlo-quadro::after { content: ''; display: block; height: 40vh; height: 40svh; }
.dlo-quadro-img { position: sticky; top: 0; height: 100vh; height: 100svh; }
.dlo-quadro-img .dlo-cornice { height: 100%; }
.dlo-quadro-testo {
  position: relative; z-index: 1;   /* au-dessus de l'image epinglee (positionnee, donc peinte apres) */
  background: var(--color-fond); max-width: 56ch; margin-inline: auto;
  padding: clamp(32px, 5vw, 64px); display: grid; gap: .9em; text-align: center;
}
.dlo-quadro-testo p { color: var(--color-encre); margin: 0; }
/* paysage -> cover, plein cadre : le SEUL endroit ou une oeuvre est rognee, et c'est un
   paysage (il porte aussi [data-banda] : le parallax joue). Portrait / carre -> contain
   sur le fond, jamais rogne ; a >= 48rem le quadro passe a deux colonnes : image
   epinglee a gauche, texte qui defile a droite. */
.dlo-quadro--contain .dlo-cornice { background: var(--color-fond); }
.dlo-quadro--contain .dlo-cornice img { object-fit: contain; }
@media (min-width: 48rem) {
  .dlo-quadro--contain { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(12px, 2vw, 28px); }
  .dlo-quadro--contain .dlo-quadro-img { grid-column: 1; }
  .dlo-quadro--contain .dlo-quadro-testo { grid-column: 2; margin-inline: 0; }
}
/* audit Lead Tech B-18 : un quadro SANS texte (3 projets ou testi.json est vide) n'a
   rien a tenir — ni l'espace de liberation (::after), ni la grille a deux colonnes :
   une image pleine hauteur, et la suite. */
.dlo-quadro--muto::after { display: none; }
.dlo-quadro--muto.dlo-quadro--contain { display: block; }

/* ═══ B-17.2b — les photos en couleur ne cassent pas la scene ═══════════════
   Rien de special a poser : `img { grayscale }` (site.css) est retire ICI, projet
   par projet, uniquement quand `grigio:false` (genera_progetto.py/genera_indice.py
   posent data-colore="1" sur le <picture>, depuis le manifeste — jamais a la main).
   Sans cette regle, la couleur resterait desaturee par site.css. */
[data-colore="1"] img { filter: none; -webkit-filter: none; }

/* ═══ le gabarit FILM (B-17 § Les deux films) ════════════════════════════════
   Poster local + lecture au clic : au repos, RIEN de Vimeo. Le bouton pose
   uniquement l'intention ; dlo2.js cree l'<iframe> apres le clic (B-17.12). */
/* max-width : sans borne, un poster PORTRAIT (chi-sono-io, 853x1280) etire a la
   pleine largeur de l'article deviendrait haut de pres de 2000px (mesure sur
   capture d'ecran). */
.dlo-film { position: relative; max-width: 640px; margin-inline: auto; }
.dlo-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgb(35 35 35 / .28); border: 0; padding: 0; cursor: pointer;
}
.dlo-play i {
  display: grid; place-items: center; width: clamp(56px, 8vw, 84px); height: clamp(56px, 8vw, 84px);
  border-radius: 999px; border: 1px solid var(--color-taupe); color: var(--color-taupe);
  font-style: normal; font-size: 1.4rem;
}
.dlo-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ B-17.1 — les 5 scenes de l'entree de section ═══════════════════════════
   Chaque scene est un lien plein cadre vers progetti/<slug>.html : l'image en cover
   (72svh) — donc en parallax, [data-banda] — et le titre, pose SOUS .dlo-cornice. */
.dlo-scene { display: grid; }
.dlo-scena {
  position: relative; display: block; color: inherit; text-decoration: none;
  border-top: 1px solid var(--color-bouton);
}
.dlo-scena .dlo-cornice { height: 72vh; height: 72svh; min-height: 340px; }
.dlo-scena-testo {
  position: relative; display: grid; gap: 8px; justify-items: start;
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 72px);
}
.dlo-scena-testo h2 { font-size: clamp(1.3rem, 3vw, 2rem); }

/* ═══ le pied — les 11 projets, en liste (B-17.1) ═══════════════════════════ */
.dlo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dlo-lista a { color: var(--color-encre); text-decoration: none; border-bottom: 1px solid transparent; }
.dlo-lista a:hover { border-bottom-color: var(--color-sable); }

/* ═══ B-19.C ═══════════════════════════════════════════════════════════════════
   Retours cliente du 2026-09-17 : la barre de navigation, les trois pages simples, la ligne
   reglementaire du pied, « In vendita ». Tout ce qui precede est INTACT (temoin de B-19.4 et des
   sondes B-18) ; les ajouts ne redefinissent aucune --color-*, aucun hex neuf (controle 1 et 12). */

/* C.1 — Progetti · Chi sono · Contatti entre la marque et le toggle IT/EN : meme graisse et meme
   tracking que .lang-toggle (.64rem / .14em), pas de hamburger. .caps donne la famille et la casse ;
   la couleur est celle de la barre (inherit), la page courante porte un filet sable. */
.dlo-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); min-width: 0; }
.dlo-menu { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.dlo-menu .caps { font-size: .64rem; letter-spacing: .14em; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.dlo-menu .caps:hover, .dlo-menu .caps[aria-current="page"] { border-bottom-color: var(--color-sable); }
/* 390 px : tout tient sur UNE ligne (scrollWidth === clientWidth sur .barre) - la marque raccourcit
   son tracking, les liens et le toggle aussi ; rien ne passe a la ligne, rien ne deborde. */
@media (max-width: 30rem) {
  .barre .marque { font-size: .56rem; letter-spacing: .12em; }
  .dlo-nav { gap: 12px; }
  .dlo-menu { gap: 10px; }
  .dlo-menu .caps, .barre .lang-toggle { font-size: .56rem; letter-spacing: .08em; }
}

/* C.2 (a) — « By Laetitia Farellacci » sous la marque : seconde ligne, plus petite. RETENU (C.9,
   arbitrage Superviseur 2026-09-17) ; l'essai (b) sous le h1 de la home est retire. */
.dlo-firma { display: block; font-size: .5rem; letter-spacing: .16em; color: var(--color-gris-2); margin-top: 3px; line-height: 1; }
@media (max-width: 30rem) { .dlo-firma { font-size: .44rem; letter-spacing: .1em; } }

/* C.3 — la page simple (pagina.twig) : le corps du texte, le portrait de Chi sono en CONTAIN
   (jamais rogne), a gauche du texte des 48rem. Titres h2/h3 avec ancre (privacy). */
.dlo-pagina { display: grid; gap: clamp(28px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 88px); }
/* sous 48rem l'entree n'a pas de padding vertical (py-[56px] n'est pas compile dans site.css, comme sur
   l'index dlo2) : le corps prend l'air lui-meme ; des 48rem md:py-[88px] joue et le corps colle. */
.dlo-pagina { padding-top: 32px; }
@media (min-width: 48rem) { .dlo-pagina { padding-top: 0; } }
.dlo-ritratto { width: 100%; max-width: 480px; }
.dlo-ritratto .dlo-cornice { background: var(--color-fond); }
.dlo-ritratto .dlo-cornice img { object-fit: contain; }
.dlo-corpo { display: grid; gap: 1em; max-width: 62ch; }
.dlo-corpo p { color: var(--color-encre); margin: 0; }
.dlo-corpo a { color: var(--color-encre); text-decoration: none; border-bottom: 1px solid var(--color-sable); }
.dlo-pagina-titolo { max-width: 30ch; }
h2.dlo-pagina-titolo { font-size: clamp(1.45rem, 2.8vw, 2rem); margin-top: .9em; }
h3.dlo-pagina-titolo { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: .5em; }
.dlo-corpo > .dlo-pagina-titolo:first-child { margin-top: 0; }
.dlo-coordinate { font-style: normal; display: grid; gap: .5em; padding-bottom: .5em; }
@media (min-width: 48rem) {
  .dlo-pagina--ritratto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; column-gap: clamp(24px, 4vw, 64px); }
}

/* C.6 — la ligne reglementaire du pied : meme style que la ligne (c) d'origine, deux liens /privacy. */
.dlo-legale a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.dlo-legale a:hover { border-bottom-color: var(--color-sable); }

/* C.8 — « In vendita », sous le chapo, avant le racconto : un filet 2 px --color-taupe (#9e8b6a,
   l'un des 11 hex : le rouge n'y est pas) au-dessus, largeur du bloc, PAS de fond, pas de prix,
   pas de bouton. Discret par la taille, visible par le filet. Hors <figure> : confronta_pose.py
   ne le voit pas. */
.dlo-vendita {
  width: 100%; max-width: 56ch; justify-self: center;
  border-top: 2px solid var(--color-taupe); padding-top: 16px;
  display: grid; gap: 8px; justify-items: start;
}
.dlo-vendita p { margin: 0; font-size: 1.1rem; line-height: 1.4; color: var(--color-encre); }
.dlo-vendita a { color: var(--color-encre); text-decoration: none; border-bottom: 1px solid var(--color-sable); padding-bottom: 2px; }

/* ═══ B-19.D ═══════════════════════════════════════════════════════════════════
   La page de tous les projets (/progetti) et la zone d'invitation de la home (D.7). Tout ce qui precede
   est INTACT ; aucune --color-* redefinie, aucun hex neuf. Le vocabulaire est celui de dlo2 : .caps,
   .dlo-cornice, [data-banda], .dlo-scena-testo. Defilement natif ; GSAP local pour la revelation. */

/* le rythme : piena / due / piena / due... - une colonne, un bloc par ligne, l'air entre eux */
.dlo-elenco { display: grid; gap: clamp(28px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 88px); }
/* sous 48rem l'entree n'a pas de padding vertical (py-[56px] non compile, comme pagina.twig) */
.dlo-elenco { padding-top: 32px; }
@media (min-width: 48rem) { .dlo-elenco { padding-top: 0; } }
/* une scheda = un lien plein cadre : l'image, puis le titre SOUS le cadre (jamais sur la photo, B-18.8) */
.dlo-progetto { display: block; min-width: 0; color: inherit; text-decoration: none; }
/* piena / sola / le decalage du second `due` : les regles du RYTHME (--piena 16:9, --sola 72vw, nth-child(2)
   margin-top 12 %) ont ete DEPLACEES telles quelles sous [data-vista="racconto"] en B-19.N (le racconto n'est
   plus la seule vue) - voir § B-19.N en fin de feuille. .dlo-due reste ici : /prints (B-19.I) s'en sert aussi. */
/* due : deux projets cote a cote au ratio de leur visuel ; des 48rem le second demarre plus bas (~12 %) */
.dlo-due { display: grid; gap: clamp(28px, 5vw, 64px) clamp(12px, 2vw, 28px); }
@media (min-width: 48rem) {
  .dlo-due { grid-template-columns: 1fr 1fr; align-items: start; }
}
.dlo-progetto-testo { display: grid; gap: 8px; justify-items: start; padding-top: clamp(12px, 2vw, 22px); }
.dlo-progetto-testo h2 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
/* .dlo-zoom : la couche qui grandit au survol - l'<img> reste a GSAP (le parallax ecrit son transform
   en ligne), la couche a la CSS : les deux ne se disputent pas la meme propriete. Positionnee, elle est le
   bloc conteneur de l'image absolue de [data-banda] (memes -30 % / 160 %, meme geometrie). */
.dlo-zoom { position: absolute; inset: 0; }
/* survol : +2 % d'echelle en 1,2 s, pointeur fin seulement ; rien au toucher, rien sous reduced-motion.
   Le titre, hors de .dlo-zoom, ne bouge pas. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dlo-zoom { transition: transform 1.2s ease; }
  .dlo-progetto:hover .dlo-zoom { transform: scale(1.02); }
}
/* [data-svela] : la revelation a l'entree (dlo2.js § B-19.D, clip-path 92 % -> 100 % + opacite, une fois).
   La valeur de repos est posee ICI pour que GSAP ait une cible interpolable ; sans GSAP ou sous
   reduced-motion, rien ne bouge et tout est visible. */
[data-svela] { clip-path: inset(0 0 0 0); }

/* D.7 - la zone d'invitation de la home, apres les 5 scenes, a la place de la liste du pied : beaucoup
   d'air, aucune image de fond, un filet au-dessus comme les scenes. */
.dlo-invito {
  display: grid; gap: 18px; justify-items: start;
  padding-block: clamp(64px, 10vw, 128px); border-top: 1px solid var(--color-bouton);
}
.dlo-invito p { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.2; max-width: 22ch; color: var(--color-encre); }
/* le bouton : derive de .lang-toggle / border-bouton - filet 1 px, caps, sans fond, sans ombre */
.dlo-bottone {
  display: inline-block; margin-top: 10px; padding: 13px 26px;
  border: 1px solid var(--color-encre); background: transparent; color: var(--color-encre);
  font-size: .64rem; letter-spacing: .2em; text-decoration: none;
}
.dlo-bottone:hover { border-color: var(--color-sable); color: var(--color-encre); }

/* ═══ B-19.F ═══════════════════════════════════════════════════════════════════
   Google Analytics 4 derriere un bandeau de consentement MAISON (arbitrage Superviseur 2026-09-17).
   Le bandeau .dlo-consenso est cree par dlo2.js § B-19.F, seulement si <body data-ga> et sans cookie
   dlo_consenso : fond --color-fond-2, filet --color-bouton, aucune ombre, en bas de fenetre, ne bloque
   pas la page. Deux boutons de MEME poids (Accetta / Rifiuta, .dlo-bottone : filet 1 px, sans fond).
   En 390 px : deux lignes - la phrase, puis les deux boutons cote a cote. Tout ce qui precede est INTACT ;
   aucune --color-* redefinie, aucun hex neuf. */
.dlo-consenso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--color-fond-2); border-top: 1px solid var(--color-bouton); box-shadow: none;
  padding: 18px clamp(20px, 3vw, 40px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
}
.dlo-consenso[hidden] { display: none; }
.dlo-consenso p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--color-encre); max-width: 64ch; flex: 1 1 24rem; }
.dlo-consenso p a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-sable); white-space: nowrap; }
.dlo-consenso-scelte { display: flex; gap: 12px; flex: 0 0 auto; }
/* le <button> herite la famille et la casse de .caps ; memes mesures que le bouton de la home */
.dlo-consenso .dlo-bottone { margin-top: 0; padding: 11px 22px; cursor: pointer; line-height: 1; }
/* le bouton « Cookie » du pied (rouvre le bandeau) : un lien comme ses voisins, sans fond ni bordure */
.dlo-legale button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid transparent; padding: 0; cursor: pointer;
}
.dlo-legale button:hover { border-bottom-color: var(--color-sable); }

/* ═══ B-19.E ═══════════════════════════════════════════════════════════════════
   La newsletter au pied (E.1 amende 2026-09-17) : un formulaire, pas un service - rendu par _layout.twig
   seulement si le global sito porte l'URL du fournisseur. Vocabulaire dlo2 : .caps + filet --color-bouton,
   SANS fond ni ombre ; le bouton est .dlo-bottone (filet 1 px, sans fond). Tout ce qui precede est INTACT ;
   aucune --color-* redefinie, aucun hex neuf. */
.dlo-newsletter {
  display: grid; gap: 14px; justify-items: start;
  border-top: 1px solid var(--color-bouton); padding-top: 22px; background: none; box-shadow: none;
}
.dlo-newsletter-riga { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 32rem; }
.dlo-newsletter input[type="email"] {
  flex: 1 1 14rem; min-width: 0; padding: 11px 14px; border-radius: 0;
  border: 1px solid var(--color-bouton); background: transparent; color: var(--color-encre);
  font: inherit; font-size: .9rem;
}
.dlo-newsletter input[type="email"]:focus { outline: none; border-color: var(--color-encre); }
.dlo-newsletter .dlo-bottone { margin-top: 0; padding: 11px 22px; cursor: pointer; line-height: 1; }
.dlo-newsletter-consenso { display: flex; gap: 10px; align-items: flex-start; max-width: 52ch; font-size: .8rem; line-height: 1.45; color: var(--color-encre-2); cursor: pointer; }
.dlo-newsletter-consenso input { margin: 3px 0 0; flex: none; accent-color: var(--color-encre); }
.dlo-newsletter-consenso a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-sable); }

/* ═══ B-19.H ═══════════════════════════════════════════════════════════════════
   /chi-sono complet (les listes des mostre et des premi) et la vraie page /contatti (le formulaire).
   Tout ce qui precede est INTACT ; aucune --color-* redefinie, aucun hex neuf. Vocabulaire dlo2 : .caps,
   filets --color-bouton, champs sur --color-fond-2, AUCUNE ombre ; le bouton est .dlo-bottone. */

/* H.1 - le bloc `lista` (une voce par ligne) : une liste sobre, un filet entre les voci, sans puce */
.dlo-voci { list-style: none; margin: 0; padding: 0; display: grid; }
.dlo-voci li { padding: .55em 0; border-top: 1px solid var(--color-bouton); color: var(--color-encre); line-height: 1.45; }
.dlo-voci li:last-child { border-bottom: 1px solid var(--color-bouton); }

/* H.2 - /contatti : des 48rem les coordonnees (le corps) a gauche, le formulaire a droite ; en dessous, l'un
   sous l'autre. Meme grille que la page au portrait. */
@media (min-width: 48rem) {
  .dlo-pagina--contatti { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; column-gap: clamp(24px, 4vw, 64px); }
}
.dlo-modulo { display: grid; gap: 18px; justify-items: start; width: 100%; max-width: 40rem; background: none; box-shadow: none; }
.dlo-campo { display: grid; gap: 6px; width: 100%; }
/* l'etiquette : .caps ne donne que la famille et la casse, la mesure est celle du menu */
.dlo-campo label { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-encre-2); }
.dlo-campo input, .dlo-campo select, .dlo-campo textarea {
  width: 100%; padding: 11px 14px; border-radius: 0; box-shadow: none; appearance: none;
  border: 1px solid var(--color-bouton); background: var(--color-fond-2); color: var(--color-encre);
  font: inherit; font-size: .94rem; line-height: 1.4;
}
.dlo-campo textarea { resize: vertical; min-height: 9em; }
.dlo-campo select { cursor: pointer; }
.dlo-campo input:focus, .dlo-campo select:focus, .dlo-campo textarea:focus { outline: none; border-color: var(--color-encre); }
/* la case de consentement : la ligne de la newsletter (B-19.E), au meme dessin */
.dlo-consenso-riga { display: flex; gap: 10px; align-items: flex-start; max-width: 52ch; font-size: .8rem; line-height: 1.45; color: var(--color-encre-2); cursor: pointer; }
.dlo-consenso-riga input { margin: 3px 0 0; flex: none; accent-color: var(--color-encre); }
.dlo-consenso-riga a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-sable); }
.dlo-modulo .dlo-bottone { margin-top: 4px; padding: 13px 26px; cursor: pointer; line-height: 1; }

/* ═══ B-19.I ═══════════════════════════════════════════════════════════════════
   La page « Prints » (/prints, Opere disponibili) : les oeuvres au rythme `due` de B-19.D seul (deux par
   rangee au ratio du visuel, la seconde decalee des 48rem, une colonne en 390), le texte SOUS le cadre.
   Tout ce qui precede est INTACT ; aucune --color-* redefinie, aucun hex neuf. Vocabulaire dlo2 : .caps,
   .dlo-cornice, .dlo-due / .dlo-zoom / [data-svela] de B-19.D ; le survol +2 % pointeur fin seulement. */
.dlo-opere { display: grid; gap: clamp(28px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 88px); }
/* sous 48rem l'entree n'a pas de padding vertical (py-[56px] non compile, comme .dlo-elenco) */
.dlo-opere { padding-top: 32px; }
@media (min-width: 48rem) { .dlo-opere { padding-top: 0; } }
/* le paragraphe des conditions, sous le chapo de l'entree */
.dlo-prints-testo { margin: 0; max-width: 52ch; color: var(--color-encre); }
/* une opera = une <figure> : le cadre au ratio du visuel (jamais rogne), puis la legende */
.dlo-opera { margin: 0; min-width: 0; }
@media (min-width: 48rem) { .dlo-due > .dlo-opera:nth-child(2) { margin-top: 12%; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dlo-opera:hover .dlo-zoom { transform: scale(1.02); }
}
.dlo-opera-testo { display: grid; gap: 8px; justify-items: start; padding-top: clamp(12px, 2vw, 22px); }
.dlo-opera-testo h2 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
.dlo-opera-testo p { margin: 0; color: var(--color-encre); line-height: 1.45; }
.dlo-opera-riga { font-size: .94rem; }
.dlo-opera-progetto { font-size: .9rem; color: var(--color-encre-2); }
.dlo-opera-progetto a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-sable); }
.dlo-opera-testo > a.caps { color: var(--color-encre); text-decoration: none; border-bottom: 1px solid var(--color-sable); padding-bottom: 2px; margin-top: 4px; }
/* venduta : la mention .caps en gris, l'image legerement en retrait - l'oeuvre reste montree */
.dlo-opera-stato { color: var(--color-gris-2); margin-top: 4px; }
.dlo-opera--venduta .dlo-cornice img { opacity: .82; }
/* 0 oeuvre : la ligne d'attente, en serif comme la zone d'invitation */
.dlo-opere-vuoto { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--color-encre-2); }
/* la barre a 390 avec QUATRE liens (C.1 : une ligne, rien ne deborde) : mesure avant - le toggle IT · EN
   se cassait sur trois lignes (43 px de haut). Les mesures de C.1 se resserrent d'un cran, memes regles ;
   le toggle ne se casse plus (nowrap, flex none). */
@media (max-width: 30rem) {
  .barre .marque { font-size: .52rem; letter-spacing: .08em; }
  .dlo-nav { gap: 8px; }
  .dlo-menu { gap: 7px; }
  .dlo-menu .caps, .barre .lang-toggle { font-size: .52rem; letter-spacing: .04em; }
  .barre .lang-toggle { white-space: nowrap; flex: none; }
}

/* ═══ B-19.K ═══════════════════════════════════════════════════════════════════
   Retours cliente du 2026-09-18 : le pied sombre, la liste des projets hors du pied, la marque a la hauteur
   de la barre avec la firma a sa droite, le menu telephone sous lg (C.1 amende). La barre RESTE blanche
   (est-plein, arbitrage Superviseur : aucune transparence, la sentinelle de site.js reste inutilisee).
   Tout ce qui precede est INTACT ; aucune --color-* redefinie, aucun hex neuf (controles 1 et 12).
   Vocabulaire : site.css porte deja .barre .trait, .panneau, .barre.menu-ouvert, html.menu-verrouille. */

/* K.1 - le pied sur --color-nav (le « gris fonce » de la palette, rgb 56 56 56 ; encre reste la couleur du texte
   courant). Texte et liens en --color-fond / --color-bouton : bouton sur nav = 9.1:1, fond sur nav > 9.1:1 ;
   gris-2 sur nav ne passe pas (4.07:1, mesure), on ne l'emploie pas. Le filet de .dlo-legale en --color-gris.
   .dlo-consenso (fixe, hors pied) et .dlo-invito (dans main) ne changent pas. */
body > footer { background: var(--color-nav); color: var(--color-fond); }
body > footer .caps { color: var(--color-fond); }
body > footer .dlo-legale { color: var(--color-bouton); border-top-color: var(--color-gris); }
/* K.2 - le seul lien du pied vers /progetti : .caps, filet sable au survol comme les liens du menu */
.dlo-tutti { justify-self: start; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.dlo-tutti:hover { border-bottom-color: var(--color-sable); }

/* K.3 (a) - la marque en SERIF font-light, a la hauteur de la rangee (58px une fois est-plein) : 1.9rem des lg,
   1.3rem en dessous, une seule ligne (nowrap). La firma passe a droite du titre, sur la meme ligne, alignee
   sur la ligne de base (inline-flex + baseline), .caps .5rem gris-2, ecart 14px. Ces regles viennent APRES
   les mesures 30rem de C.1 / B-19.I (.barre .marque, meme specificite) : elles gagnent. */
.barre .marque {
  display: inline-flex; align-items: baseline; gap: 14px; min-width: 0;
  font-family: var(--font-serif); font-weight: 300; text-transform: none;
  font-size: 1.3rem; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
@media (min-width: 64rem) { .barre .marque { font-size: 1.9rem; } }
.barre .dlo-firma { display: inline; margin-top: 0; font-size: .5rem; letter-spacing: .16em; line-height: 1; color: var(--color-gris-2); }

/* K.4 - sous lg : .dlo-nav (liens en ligne + toggle) cachee, le bouton [data-burger] (lg:hidden) et le panneau
   #menu-mobile (panneau lg:hidden, [hidden] au repos) prennent le relais - site.js § 2. A lg et au-dessus,
   bouton et panneau sont display:none (lg:hidden de site.css) et C.1 reste tel quel. */
@media (max-width: 63.99rem) { .dlo-nav { display: none; } }
.dlo-menu-mobile a { display: inline-block; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.dlo-menu-mobile a:hover, .dlo-menu-mobile a[aria-current="page"] { border-bottom-color: var(--color-sable); }
/* le toggle IT · EN de la derniere ligne : la mesure de .lang-toggle (.64rem / .14em), pas celle des 30rem */
#menu-mobile .lang-toggle { font-size: .64rem; letter-spacing: .14em; }

/* ═══ B-19.L ═══════════════════════════════════════════════════════════════════
   Positionnement de l'accueil (retour Superviseur 2026-09-18) : « Laetitia Farellacci » entre dans le h1 de la
   home, en seconde ligne du MEME <h1> - display:block, serif herite, ~.55 de la taille du titre (.dlo-titolo :
   clamp(2rem, 4.6vw, 3.4rem) -> .55em), --color-encre-2, interligne 1.2, un souffle de .2em au-dessus.
   0 hex neuf : les tokens de site.css. La ligne ne touche ni .dlo-titolo ni les poses en dessous. */
.dlo-h1-nome { display: block; margin-top: .2em; font-size: .55em; line-height: 1.2; letter-spacing: .01em; color: var(--color-encre-2); }

/* ═══ B-19.M ═══════════════════════════════════════════════════════════════════
   Entretien cliente du 2026-09-19 : la marque en capitales, le sur-titre qui devient le titre des pages simples,
   les reseaux au pied. Tout ce qui precede est INTACT ; aucune --color-* redefinie, aucun hex neuf (controles 1
   et 12). Vocabulaire dlo2 : .caps, .barre .marque, .dlo-intro, body > footer. */

/* M.1 - la marque en CAPITALES (« j'aime bien que ce soit totalement en capitales ») : serif et graisse K.3 (a)
   conservees, tracking leger .04em. Meme specificite que K.3, plus bas dans la feuille : gagne. La firma (.caps)
   reste en capitales, a sa mesure. Les capitales sont plus larges : sous 30rem le titre descend a 1.1rem pour
   tenir sur UNE ligne a 390 menu ferme (K.5), la firma se cache avant que le titre ne casse (regle K.3). */
.barre .marque { text-transform: uppercase; letter-spacing: .04em; }
/* mesure a 390 (sonde_b19m.py) : a 1.3rem la marque en capitales deborde sa boite de 10 px (scrollWidth 321 / 311) ;
   a 1.1rem elle tient avec de la marge, la firma reste visible. */
@media (max-width: 30rem) { .barre .marque { font-size: 1.1rem; } }

/* M.7 - le sur-titre devient le h1 des pages simples (/progetti, /prints, /chi-sono, /contatti, /privacy) :
   .caps grossi a .85rem, tracking .22em, --color-encre-2, graisse normale. Le h1 de site.css (font-weight normal,
   text-wrap balance) et .caps (famille, casse) restent ; seules la mesure et la couleur changent. */
.dlo-sopratitolo { font-size: .85rem; letter-spacing: .22em; color: var(--color-encre-2); font-weight: 400; line-height: 1.4; }

/* M.8 - les reseaux au pied, au-dessus de la ligne reglementaire : deux glyphes SVG inline, 22 px, en --color-fond
   sur le pied sombre (K.1), --color-bouton au survol ; ecart 18px. Aucune image, aucune police. */
.dlo-social { display: flex; gap: 18px; align-items: center; }
.dlo-social a { display: inline-flex; color: var(--color-fond); line-height: 0; }
.dlo-social a:hover { color: var(--color-bouton); }
.dlo-social svg { display: block; width: 22px; height: 22px; }

/* ═══ B-19.N ═══════════════════════════════════════════════════════════════════
   /progetti : la GRIGLIA par defaut, le RACCONTO au choix du visiteur (entretien cliente du 2026-09-19, « les
   galeristes jugent en dix secondes » ; arbitrage Superviseur : griglia par defaut). Un seul DOM, deux vues,
   l'attribut data-vista du conteneur .dlo-elenco tranche (progetti.twig, dlo2.js § B-19.N). Tout ce qui precede
   est INTACT hors le DEPLACEMENT des trois regles du rythme D sous [data-vista="racconto"] (ci-dessous, a
   l'identique) ; aucune --color-* redefinie, aucun hex neuf (controles 1 et 12). Vocabulaire dlo2 : .dlo-intro,
   .dlo-elenco, .dlo-due, .dlo-cornice, .dlo-zoom, [data-banda], [data-svela]. */

/* N.1 - le choix de la vue, a droite du h1 : l'intro passe sur deux colonnes (h1 | groupe), le chapo dessous ;
   sa borne 62ch saute (le groupe s'aligne au bord droit de la grille des cartes ; le chapo garde son max-w-[52ch]). */
.dlo-intro--vista { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dlo-intro--vista > p { grid-column: 1 / -1; }
/* deux boutons de 34 px, glyphe 16 px, filet --color-bouton sur le bouton presse ; gris au repos, encre presse
   ou survole. Sans JS ils restent inertes (griglia). */
.dlo-vista { display: flex; gap: 6px; justify-self: end; }
.dlo-vista button {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; margin: 0;
  border: 1px solid transparent; background: transparent; color: var(--color-gris-2); cursor: pointer;
}
.dlo-vista button:hover { color: var(--color-encre); }
.dlo-vista button[aria-pressed="true"] { color: var(--color-encre); border-color: var(--color-bouton); cursor: default; }
.dlo-vista svg { display: block; width: 16px; height: 16px; fill: currentColor; }

/* N.2 - la griglia (CSS seul) : 2 colonnes, 3 des 64rem ; gouttiere clamp(12px, 1.6vw, 24px) entre colonnes,
   un peu plus d'air entre les rangees (le titre vit sous le cadre) ; les wrappers .dlo-due se dissolvent
   (display: contents) : leurs deux cartes rejoignent la grille du conteneur, sans decalage, sans piena. */
[data-vista="griglia"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px) clamp(12px, 1.6vw, 24px); }
@media (min-width: 64rem) { [data-vista="griglia"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-vista="griglia"] .dlo-due { display: contents; }
/* chaque cadre au ratio uniforme 4:5 (une vignette est une ENTREE, pas l'oeuvre : le racconto et la page projet la
   montrent entiere ; elle choisit ce qui se voit par le champ `quadro`). !important : le cadre `due` porte son
   ratio reel en style= (racconto), il faut passer devant. */
[data-vista="griglia"] .dlo-cornice { aspect-ratio: 4 / 5 !important; }
[data-vista="griglia"] .dlo-cornice img { object-fit: cover; object-position: center; }
/* N.5 - en griglia l'image de la piena ([data-banda]) est IMMOBILE : elle reprend la geometrie d'un cadre ordinaire
   (100 %, en flux dans .dlo-zoom) et le transform que GSAP ecrit en ligne est neutralise ; le tween reste arme,
   le racconto le retrouve tel quel (ScrollTrigger.refresh() a la bascule, dlo2.js). */
[data-vista="griglia"] [data-banda] img { position: relative; top: auto; height: 100%; transform: none !important; }
/* sous le cadre : titre serif plus petit (~1.05rem), moins d'air ; « Film » seul pour un film (M.6) */
[data-vista="griglia"] .dlo-progetto-testo { gap: 4px; padding-top: 10px; }
[data-vista="griglia"] .dlo-progetto-testo h2 { font-size: 1.05rem; }

/* N.3 - le racconto = le rendu D, a l'identique : les trois regles du rythme, DEPLACEES depuis § B-19.D (memes
   declarations, meme ordre, memes media queries), scopees sous le conteneur en vue racconto. */
/* piena : paysage pleine largeur, 16:9 cover - le cadre porte [data-banda] : image 160 % a -30 %, parallax
   de dlo2.js § 3 (le code existant) */
[data-vista="racconto"] .dlo-progetto--piena .dlo-cornice { aspect-ratio: 16 / 9; }
/* sola : un visuel portrait a la place d'une piena - seul, centre, a son ratio, jamais rogne, sans bande */
[data-vista="racconto"] .dlo-progetto--sola { width: 100%; max-width: min(1100px, 72vw); justify-self: center; }
@media (max-width: 48rem) { [data-vista="racconto"] .dlo-progetto--sola { max-width: 100%; } }   /* comme .dlo-img--sola */
/* due : des 48rem le second demarre plus bas (~12 %) */
@media (min-width: 48rem) {
  [data-vista="racconto"] .dlo-due > .dlo-progetto:nth-child(2) { margin-top: 12%; }
}

/* ═══ B-19.O ═══════════════════════════════════════════════════════════════════
   Pages projet (entretien cliente du 2026-09-19) : la verticale seule se voit ENTIERE, l'horizontale ne deborde
   plus et les horizontales prennent une largeur commune, la cliente a la main photo par photo (champ `larghezza`
   de l'asset, CP). Tout ce qui precede est INTACT : les regles ci-dessous s'ajoutent des 48rem seulement -
   sous 48rem rien ne change (une colonne, 100 %). Aucune --color-* redefinie, aucun hex neuf. Vocabulaire dlo2 :
   .dlo-img--sola / .dlo-carre / .dlo-img--piena / .dlo-quadro--contain / .dlo-quadro-img. */

@media (min-width: 48rem) {
  /* O.1 - une verticale seule tient dans l'ecran : la figure porte --r = largeur/hauteur (style inline,
     _macros.figura / quadro), sa largeur est bornee a 85vh * r -> au plus 85 % de la hauteur de la fenetre,
     jamais rognee (le cadre garde le ratio reel). Repli var(--r, 1) : sans --r, un carre. */
  .dlo-img--sola { max-width: min(1100px, 72vw, calc(85vh * var(--r, 1))); }
  .dlo-img--sola.dlo-carre { max-width: min(900px, 64vw, calc(85vh * var(--r, 1))); }
  /* le quadro portrait / carre (contain, epingle 100vh) : meme borne, centre dans sa colonne (grille --contain)
     ou dans le bloc (--muto, display: block) - l'image contenue mesure alors 85vh de haut, jamais plus */
  .dlo-quadro--contain .dlo-quadro-img { max-width: calc(85vh * var(--r, 1)); justify-self: center; margin-inline: auto; }

  /* O.2 - les horizontales prennent une largeur commune, reduite : toutes les memes, centrees.
     Le quadro paysage (.dlo-quadro, cover + [data-banda]) garde sa pleine largeur : c'est le moment a part. */
  .dlo-img--piena { max-width: min(1400px, 84vw); justify-self: center; }

  /* O.3 - la largeur choisie dans le CP (champ `larghezza` de l'asset : Piena 100 %, Grande 84 %, Media 60 %,
     Piccola 42 % de la page), posee seule, centree, SANS la borne O.1 (elle a choisi). */
  .dlo-img--l-grande { max-width: min(1400px, 84vw); }
  .dlo-img--l-media { max-width: min(900px, 60vw); }
  .dlo-img--l-piccola { max-width: min(620px, 42vw); }
}
/* O.3 - les quatre classes existent a toutes les largeurs : pleine colonne sous 48rem (comme .dlo-img--piena) */
.dlo-img--l-piena, .dlo-img--l-grande, .dlo-img--l-media, .dlo-img--l-piccola { width: 100%; justify-self: center; }

/* ═══ B-19.V (V.12) ═════════════════════════════════════════════════════════════
   /contatti : le retour du formulaire (envoye / non envoye) est un vrai bloc en tete du formulaire, a l'ancre
   #modulo - pas une ligne de texte courant. Tokens existants seulement, aucun hex neuf, aucune ombre, aucune
   animation. Envoye : filet 1 px --color-sable ; non envoye : meme bloc, filet gauche 3 px --color-encre. */
.dlo-esito {
  width: 100%; display: grid; gap: 10px; padding: 24px 26px;
  background: var(--color-fond-2); border: 1px solid var(--color-sable); box-shadow: none;
}
.dlo-esito:focus { outline: none; }
.dlo-esito .caps { font-size: .64rem; letter-spacing: .14em; color: var(--color-encre-2); }
.dlo-esito p {
  margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  line-height: 1.3; color: var(--color-encre);
}
.dlo-esito--errore { border-color: var(--color-bouton); border-left: 3px solid var(--color-encre); }
.dlo-esito a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-sable); }