/* ==========================================================================
   TUTTINSIEME — home.css · écran 2a (desktop 1280) + 2f phone 1 (mobile)
   Propriétaire : [home]. Étend base.css (tt-tirage, tt-cta, tt-label…).
   Géométrie : docs/INVENTAIRE-MAQUETTES.md §2 et §7.1.
   Les variantes accueil du socle (masthead 42px, nav 16px, footer 30px,
   masthead mobile centré, langswitch) sont portées par les modificateurs
   --home de base.css, posés par base.html.twig : rien à compenser ici.
   Les rotations de tirages vivent ici (pas en --rot inline)
   parce qu'elles changent entre desktop et mobile (2,3° → −1,4°).
   La section « Gli ultimi racconti » (ex-§4) a été SUPPRIMÉE (retour client V1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Exclusion desktop/mobile des copies propres à l'accueil (¶ hero,
   occhiello et ¶ du bloc arbre, extrait de carte) — bascule dans le bloc 5
   -------------------------------------------------------------------------- */
.tt-home-solo-mobile { display: none; }

/* --------------------------------------------------------------------------
   2. Hero — grid 1.1fr/.9fr, pile de 2 tirages superposés à droite (§2.1)
   -------------------------------------------------------------------------- */
.tt-home-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 66px 56px 58px;
}

.tt-home-hero__occhiello { font-size: 15px; letter-spacing: .18em; }

.tt-home-hero__titolo {
  margin: 16px 0 22px;
  font-size: 58px;
  line-height: 1.08;
}

.tt-home-hero__paragrafo {
  max-width: 32em;
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.7;
  color: var(--tt-corpo);
}

.tt-home-hero__nota {
  max-width: 32em;
  font-size: 19px;
  line-height: 1.7;
  font-style: italic;
  color: var(--tt-didascalia);
}

.tt-home-hero__firma {
  margin-top: 16px;
  font-family: var(--tt-font-titoli);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--tt-inchiostro);
}

/* Positions absolues de la maquette : les légendes ne sont jamais recouvertes
   (le paysage devant s'arrête au-dessus de la légende du portrait derrière) */
.tt-home-hero__pila {
  position: relative;
  height: 488px;
}

.tt-home-hero__foto { position: absolute; }

.tt-home-hero__foto--ritratto {
  left: 2%;
  top: 96px;
  width: 262px;
  z-index: 1;
}
.tt-home-hero__foto--ritratto .tt-tirage { --rot: -3.2deg; }

.tt-home-hero__foto--paesaggio {
  right: 0;
  top: 0;
  width: 330px;
  z-index: 2;
}
.tt-home-hero__foto--paesaggio .tt-tirage { --rot: 2.3deg; }

/* Seule légende du site alignée à droite (exception relevée §1.8) */
.tt-home-hero__foto--paesaggio .tt-tirage__didascalia {
  text-align: right;
  padding-right: 4px;
}

/* --------------------------------------------------------------------------
   3. Bloc arbre — bandeau bleu majolique, grid 360px/1fr (§2.2)
   Le bandeau FERME désormais la page (« Gli ultimi racconti » supprimé,
   retour client V1) : marge basse pour respirer avant le footer.
   -------------------------------------------------------------------------- */
.tt-home-albero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 52px;
  align-items: center;
  margin: 0 56px 64px;
  padding: 44px 52px;
  background: var(--tt-banda-albero);
}

/* Focus clavier lisible sur le fond bleu (l'outline maiolica du socle s'y perd) */
.tt-home-albero a:focus-visible { outline-color: var(--tt-crema-su-blu); }

/* Mini-arbre : scène 340×244, connecteurs SVG + pastilles absolues */
.tt-home-albero__minialbero {
  position: relative;
  width: 340px;
  height: 244px;
  margin: 0 auto;
}

.tt-home-albero__connettori {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tt-home-albero__pastiglia {
  position: absolute;
  width: 84px;
  text-align: center;
}
/* Positions exactes §2.2 — couple en haut, 3 enfants sur le rail de fratrie */
.tt-home-albero__pastiglia:nth-of-type(1) { left: 25px; top: 6px; }
.tt-home-albero__pastiglia:nth-of-type(2) { left: 131px; top: 6px; }
.tt-home-albero__pastiglia:nth-of-type(3) { left: 14px; top: 112px; }
.tt-home-albero__pastiglia:nth-of-type(4) { left: 110px; top: 112px; }
.tt-home-albero__pastiglia:nth-of-type(5) { left: 206px; top: 112px; }

/* Pastille 62px, anneau azzurro (rôle ornemental autorisé : anneaux) */
.tt-home-albero__ritratto {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border: 3px solid var(--tt-azzurro);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  object-fit: cover;
}
/* Repli sans photo : initiale du prénom, Cormorant sur crème */
.tt-home-albero__ritratto--iniziale {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-crema);
  font-family: var(--tt-font-titoli);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--tt-banda-albero);
}

.tt-home-albero__nome {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.35;
  color: rgba(247,240,226,.92);
}

.tt-home-albero__altri {
  position: absolute;
  top: 206px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.tt-home-albero__pillola {
  padding: 5px 16px;
  border: 1.5px solid rgba(247,240,226,.6);
  border-radius: 999px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tt-crema-su-blu);
}

/* Colonne droite */
.tt-home-albero__occhiello { font-size: 14.5px; letter-spacing: .18em; }

.tt-home-albero__titolo {
  margin: 10px 0 14px;
  font-size: 44px;
  line-height: 1.1;
  color: var(--tt-crema-su-blu);
}

.tt-home-albero__paragrafo {
  max-width: 34em;
  margin: 0 0 26px;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(247,240,226,.88);
}

.tt-home-albero__fila-mobile { display: none; }

.tt-home-albero__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.tt-home-albero__cta { font-size: 20px; }

.tt-home-albero__cerca {
  font-size: 18px;
  color: var(--tt-crema-su-blu);
}
.tt-home-albero__cerca:hover { color: var(--tt-oro); }

/* --------------------------------------------------------------------------
   4. Mobile ≤ 700px — phone 1 (§7.1) : hero en colonne, 1 tirage, bandeau
   arbre pleine largeur. Masthead centré + langswitch pleine
   largeur + footer court : base.css via les modificateurs --home.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .tt-home-solo-desktop { display: none; }
  .tt-home-solo-mobile { display: revert; }

  /* Hero en colonne, copie raccourcie, sans la nota (§7.1.5) */
  .tt-home-hero {
    display: block;
    padding: 26px 20px 8px;
  }
  .tt-home-hero__occhiello { font-size: 14px; letter-spacing: .16em; }
  .tt-home-hero__titolo { margin: 12px 0 14px; font-size: 40px; line-height: 1.1; }
  .tt-home-hero__paragrafo { margin: 0; font-size: 18px; line-height: 1.68; }
  .tt-home-hero__nota { display: none; }
  .tt-home-hero__firma { margin-top: 10px; font-size: 23px; }

  /* Un seul tirage, en flux (§7.1.6) : le paysage, en petit format, −1,4° ;
     16px + 18px de marge basse + 8px de padding du hero = les 26px maquette */
  .tt-home-hero__pila { height: auto; margin: 16px 0 18px; }
  .tt-home-hero__foto--ritratto { display: none; }
  .tt-home-hero__foto--paesaggio { position: static; width: auto; }
  .tt-home-hero__foto--paesaggio .tt-tirage {
    --rot: -1.4deg;
    padding: 10px 10px 11px;
    box-shadow: var(--tt-ombra-tirage-sm);
  }
  .tt-home-hero__foto--paesaggio .tt-tirage__didascalia {
    margin-top: 9px;
    padding-right: 0;
    font-size: 15.5px;
    text-align: center;
  }

  /* Bloc arbre pleine largeur ; le mini-arbre devient une rangée de
     pastilles-initiales entre le ¶ et le CTA (§7.1.7). Le bandeau ferme la
     page : marge basse avant le footer. */
  .tt-home-albero {
    display: block;
    margin: 0 0 24px;
    padding: 26px 20px 28px;
  }
  .tt-home-albero__minialbero { display: none; }
  .tt-home-albero__occhiello { font-size: 13px; }
  .tt-home-albero__titolo { font-size: 33px; }
  .tt-home-albero__paragrafo { margin: 0 0 18px; font-size: 18px; line-height: 1.6; }

  .tt-home-albero__fila-mobile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
  .tt-home-albero__iniziale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--tt-crema);
    border: 2.5px solid var(--tt-azzurro);
    border-radius: 50%;
    font-family: var(--tt-font-titoli);
    font-weight: 600;
    font-size: 20px;
    color: var(--tt-banda-albero);
  }
  .tt-home-albero__fila-mobile .tt-home-albero__pillola {
    padding: 5px 14px;
    font-size: 14px;
  }

  .tt-home-albero__azioni { display: block; }
  .tt-home-albero__cta {
    display: flex;
    width: 100%;
    font-size: 19px;
  }
  .tt-home-albero__cerca {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 17px;
  }
}