/* ==========================================================================
   TUTTI INSIEME — base.css · socle du design system
   Propriétaire : [design-system]. Les agents d'écran importent ce fichier
   et n'y touchent pas ; ils étendent les classes tt-* dans leur propre CSS.
   Références : docs/CONVENTIONS-THEME.md (tokens imposés) ·
   docs/INVENTAIRE-MAQUETTES.md §1 (géométries exactes).
   Breakpoint unique : @media (max-width: 700px).
   Composants fournis ici : .tt-lisere (alias .tt-liserè) · .tt-masthead
   (+ --home) · .tt-langswitch · .tt-nav (+ --home) · .tt-footer (+ --home) ·
   .tt-tirage (+ --sm, ratios, __scotch) · .tt-chip-persona (+ --crema) ·
   .tt-cta (+ --su-blu, --blocco) · .tt-bottone-secondario (+ --quadrato) ·
   .tt-label (modificateurs = couleur seulement) · .tt-riquadro ·
   .tt-link-blu · .tt-container · .tt-sr-solo ·
   variantes sépia body.tema-sepia-a / body.tema-sepia-b (prévisualisation)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset minimal maison (pas de reset externe)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: none; padding: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   2. Tokens (liste imposée par CONVENTIONS-THEME.md — ne pas renommer)
   -------------------------------------------------------------------------- */
:root {
  /* Fond cappuccino (16/09/2026) : tout le site, plus seulement l'arbre.
     Déplacer le fond sous les textes oblige à reprendre sept valeurs — cinq
     encres passaient sous le seuil de lisibilité, et deux surfaces (bandeaux,
     cadre de photo manquante) se confondaient avec le nouveau fond, écarts
     de 1,15 et 1,08. Chaque correction garde la teinte d'origine et vise
     4,5 exactement : le minimum pour ne rien dénaturer. */
  --tt-crema:#E3D3BE; --tt-bianco:#FFFDF7; --tt-banda:#D3BFA3; --tt-backing:#CDB89A;
  --tt-banda-nav:#F2E9DA;
  --tt-inchiostro:#33261A; --tt-corpo:#4A3A29; --tt-corpo-racconto:#3D2F20;
  --tt-meta:#6D5944; --tt-didascalia:#6E573F; --tt-footer:#6C5940;
  --tt-terracotta:#924729; --tt-terracotta-hover:#7C3C22;
  --tt-terracotta-su-blu:#B0562F; --tt-terracotta-su-blu-hover:#9A4728;
  --tt-maiolica:#275470; --tt-maiolica-hover:#1E4359; --tt-banda-albero:#29536D;
  --tt-oro:#E8C98A; --tt-crema-su-blu:#F7F0E2; --tt-azzurro:#5BA8CB;
  --tt-label-su-banda:#634C2C; --tt-iniziali:#5C4630; --tt-testo-cta:#FBF4E6;
  --tt-bordo-neutro:rgba(51,38,26,.35); --tt-bordo-carta:rgba(122,90,52,.4);
  --tt-ombra-tirage:0 14px 32px rgba(70,45,20,.20),0 2px 6px rgba(70,45,20,.12);
  --tt-ombra-tirage-sm:0 10px 24px rgba(70,45,20,.16);
  --tt-ombra-carta:0 3px 10px rgba(70,45,20,.08);
  --tt-ombra-selezione:0 8px 22px rgba(47,100,134,.28);
  /* Palette de l'ARBRE — variante bois/cuir (16/09/2026).
     Ne concerne que la page de l'arbre : le reste du site garde ses beiges.
     Trois valeurs s'écartent de la maquette, et chaque fois pour la lisibilité,
     mesures à l'appui :
       · l'olive du bouton actif passe de #4A5D3A à #C7D8B0. Le vert sombre
         avait la MÊME luminosité que le cuir (rapport 1,18) : impossible de
         voir quelle branche est ouverte sans distinguer le vert du brun — un
         homme sur douze ne le peut pas. Éclairci, il s'en détache de 5,6.
       · le lien d'une fiche passe de #9A5218 à #934E17 (4,21 -> 4,53).
       · les traits de parenté deviennent CLAIRS : sur un fond sombre, un
         trait brun disparaît.
     Les deux beiges de cartes remplacent le beige unique de la maquette :
     ils gardent la lecture hommes/femmes tout en restant du beige. */
  --tt-albero-fondo:#47555E; --tt-albero-punti:#5A6A74; --tt-albero-banda:#C6A882;
  --tt-albero-linea:#D4C9B6; --tt-albero-aiuto:#E4DACA;
  --tt-albero-testo:#F5ECDD; --tt-albero-cuoio:#6B4423;
  --tt-albero-banda-testo:#3E2B23;
  --tt-albero-attivo:#C7D8B0; --tt-albero-attivo-testo:#2A3520;
  --tt-uomo-fondo:#D9DDE0; --tt-uomo-bordo:#6B4423;
  --tt-uomo-testo:#2E3A3D; --tt-uomo-attenue:#4A5457;
  --tt-donna-fondo:#EFD6CA; --tt-donna-bordo:#6B4423;
  --tt-donna-testo:#4A342A; --tt-donna-attenue:#5C4A3D;
  --tt-carta-link:#934E17;

  --tt-font-titoli:'Cormorant Garamond',Georgia,serif;
  --tt-font-corpo:'Source Serif 4','Source Serif Pro',Georgia,serif;
}

/* --------------------------------------------------------------------------
   2bis. Variantes sépia — PRÉVISUALISATION client uniquement (retour V1 nº6),
   jamais actives par défaut. Classes posées sur <body> par le hook JS
   d'ancre d'URL (#sepia-a / #sepia-b — hook hors de ce fichier).
   Seuls les fonds sont réchauffés ; toutes les surfaces (tirages, cartes,
   bandeaux, liseré, nav mobile) suivent via les tokens — aucun fond opaque
   n'est codé en dur dans le socle, les rgba() translucides dérivés de
   l'encre teintent naturellement les nouveaux fonds.
   Deux encres sont assombries pour tenir AA (≥ 4.5:1) sur fonds réchauffés :
   meta et label-su-banda étaient déjà sous 4.5 dans la palette d'origine.
   Ratios calculés (WCAG) : inchiostro 12.4 · corpo 9.2 · footer 4.7 sur
   crema ; didascalia 6.6 · meta 5.5 sur bianco ; meta 4.8 sur crema ;
   label-su-banda 5.0 · iniziali 6.8 sur banda.
   -------------------------------------------------------------------------- */
body.tema-sepia-a,
body.tema-sepia-b {
  --tt-crema: #F5EBD5;
  --tt-bianco: #FFFBF0;
  --tt-banda: #EDE0C4;
  --tt-backing: #E5D7B8;
  --tt-meta: #7A6345;
  --tt-label-su-banda: #755834;
}

/* Variante B : même palette + grain « papier ancien » à peine perceptible
   (l'effet se sent sans se voir). Bruit feTurbulence désaturé en data-URI,
   tuile 260px sans raccord (stitchTiles). Voile fixe non interactif
   (pointer-events none), SOUS les surcouches interactives — bottom sheet
   et panneau de l'albero à z-index 60. */
body.tema-sepia-b::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Base — corps ≥ 18px, titres Cormorant, liens toujours soulignés
   -------------------------------------------------------------------------- */
body {
  background: var(--tt-crema);
  color: var(--tt-inchiostro);
  font-family: var(--tt-font-corpo);
  font-size: 19px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tt-font-titoli);
  font-weight: 600;
  line-height: 1.1;
}

/* Graisses chargées : Source Serif 400/600 — éviter le 700 synthétisé */
b, strong { font-weight: 600; }

a {
  color: var(--tt-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--tt-terracotta-hover); }

/* Lien « univers bleu » (retour à l'arbre, auteur du kicker racconto) */
.tt-link-blu { color: var(--tt-maiolica); }
.tt-link-blu:hover { color: var(--tt-maiolica-hover); }

/* Focus visible partout (clavier) */
:focus-visible {
  outline: 2px solid var(--tt-maiolica);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Utilitaires
   -------------------------------------------------------------------------- */
.tt-container { max-width: 1200px; margin-inline: auto; }

/* Label petites capitales. Modificateurs = COULEUR uniquement,
   les écrans ajustent taille (13–15px) et letter-spacing (.13–.18em). */
.tt-label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tt-maiolica);
}
.tt-label--su-banda { color: var(--tt-label-su-banda); }
.tt-label--oro { color: var(--tt-oro); }
.tt-label--meta { color: var(--tt-meta); }

/* Texte pour lecteurs d'écran uniquement */
.tt-sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Liseré majolique (haut de chaque page) — azzurro ornemental
   .tt-liserè = orthographe du contrat, .tt-lisere = alias sans accent
   Retour V1 nº7 : collés au bord du viewport, les carreaux semblaient
   tronqués. 3px d'air (fond de page, via background-clip: content-box,
   suit les variantes sépia) + carreaux rehaussés 6→8px. Le gradient
   (périodes) ne change pas. box-sizing global border-box : height inclut
   le padding-top.
   -------------------------------------------------------------------------- */
.tt-lisere,
.tt-liserè {
  height: 11px; /* 3px d'air + 8px de carreaux */
  padding-top: 3px;
  background: repeating-linear-gradient(90deg,
    var(--tt-terracotta) 0 26px, var(--tt-crema) 26px 30px,
    var(--tt-maiolica) 30px 56px, var(--tt-crema) 56px 60px,
    var(--tt-azzurro) 60px 86px, var(--tt-crema) 86px 90px);
  background-clip: content-box;
}

@media (max-width: 700px) {
  .tt-lisere,
  .tt-liserè {
    height: 8px; /* 2px d'air + 6px de carreaux */
    padding-top: 2px;
    background: repeating-linear-gradient(90deg,
      var(--tt-terracotta) 0 22px, var(--tt-crema) 22px 26px,
      var(--tt-maiolica) 26px 48px, var(--tt-crema) 48px 52px,
      var(--tt-azzurro) 52px 74px, var(--tt-crema) 74px 78px);
    /* le shorthand background réinitialise le clip : à redéclarer ici */
    background-clip: content-box;
  }
}

/* --------------------------------------------------------------------------
   6. Masthead — défaut = pages internes (36px), --home = accueil (42px)
   Structure : .tt-masthead > div (logotipo + sottotitolo) + .tt-langswitch
   -------------------------------------------------------------------------- */
.tt-masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 52px 18px;
}
.tt-masthead--home { padding: 26px 52px 22px; }

.tt-masthead__logotipo {
  display: inline-block;
  font-family: var(--tt-font-titoli);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--tt-inchiostro);
  text-decoration: none;
}
.tt-masthead__logotipo:hover { color: var(--tt-inchiostro); }
.tt-masthead--home .tt-masthead__logotipo { font-size: 42px; }

.tt-masthead__sottotitolo {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tt-meta);
}
.tt-masthead--home .tt-masthead__sottotitolo { margin-top: 7px; font-size: 14.5px; }

@media (max-width: 700px) {
  /* Pages internes : rangée compacte logotype + pilules, sans sous-titre */
  .tt-masthead {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(51,38,26,.2);
  }
  .tt-masthead__logotipo { font-size: 25px; }
  .tt-masthead__sottotitolo { display: none; }

  /* Accueil : masthead centré, sélecteur pleine largeur dessous */
  .tt-masthead--home {
    display: block;
    text-align: center;
    padding: 18px 18px 12px;
    border-bottom: none;
  }
  .tt-masthead--home .tt-masthead__logotipo { font-size: 31px; }
  .tt-masthead--home .tt-masthead__sottotitolo {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    letter-spacing: .14em;
  }
}

/* --------------------------------------------------------------------------
   7. Sélecteur de langue — pilules « Italiano / Français » en toutes lettres
   Active : pleine encre. Inactive : bordée ; hover fond + bordure foncée.
   -------------------------------------------------------------------------- */
.tt-langswitch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tt-langswitch__pill {
  display: inline-flex;
  align-items: center;
  height: 47px;
  padding: 0 24px;
  border: 2px solid rgba(51,38,26,.5);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  color: var(--tt-inchiostro);
  text-decoration: none;
}
.tt-langswitch__pill:hover {
  background: rgba(51,38,26,.08);
  border-color: var(--tt-inchiostro);
  color: var(--tt-inchiostro);
}
.tt-langswitch__pill--active,
.tt-langswitch__pill--active:hover {
  background: var(--tt-inchiostro);
  border-color: var(--tt-inchiostro);
  color: var(--tt-crema);
}

@media (max-width: 700px) {
  .tt-langswitch { gap: 6px; }
  .tt-langswitch__pill {
    height: 40px;
    padding: 0 14px;
    font-size: 15.5px;
  }
  /* Accueil mobile : 2 boutons pleine largeur sous le masthead centré */
  .tt-masthead--home .tt-langswitch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }
  .tt-masthead--home .tt-langswitch__pill {
    height: 48px;
    justify-content: center;
    padding: 0 18px;
    font-size: 17.5px;
  }
}

/* --------------------------------------------------------------------------
   8. Nav — 4 entrées en toutes lettres, jamais de hamburger
   Actif : le texte RESTE encre, seul le soulignement est azzurro (ornemental)
   -------------------------------------------------------------------------- */
/* Le bandeau de navigation était du même fond que l'en-tête, séparé par deux
   filets seulement. Une nuance plus CLAIRE le détache — l'inverse assombrit
   le survol terracotta des liens sous le seuil de lisibilité (4,16). */
.tt-nav {
  background: var(--tt-banda-nav);
  display: flex;
  flex-wrap: wrap; /* le FR plus long peut passer sur 2 lignes */
  justify-content: center;
  gap: 10px;
  border-top: 1px solid rgba(51,38,26,.22);
  border-bottom: 1px solid rgba(51,38,26,.22);
}

.tt-nav__item {
  padding: 15px 26px;
  font-size: 19px;
  font-weight: 600;
  color: var(--tt-inchiostro);
  text-decoration: none;
}
.tt-nav--home .tt-nav__item { padding: 16px 26px; }

.tt-nav__item:hover {
  color: var(--tt-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tt-nav__item--active,
.tt-nav__item--active:hover {
  color: var(--tt-inchiostro);
  text-decoration: underline;
  text-decoration-color: var(--tt-azzurro);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

@media (max-width: 700px) {
  /* Grille 2×2 de boutons (h 50), cibles tactiles larges */
  .tt-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 18px 16px;
    border-top: none;
  }
  .tt-nav__item,
  .tt-nav--home .tt-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 8px;
    border: 1.5px solid var(--tt-bordo-neutro);
    border-radius: 10px;
    background: var(--tt-bianco);
    font-size: 16.5px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.tt-footer {
  border-top: 1px solid rgba(51,38,26,.22);
  padding: 26px 56px;
  text-align: center;
  font-size: 16px;
  color: var(--tt-footer);
}
.tt-footer--home { padding: 30px 56px; }

/* macros.footer() émet deux <p> : exclusion mutuelle au breakpoint 700px */
.tt-footer__testo--mobile { display: none; }

@media (max-width: 700px) {
  .tt-footer,
  .tt-footer--home {
    margin-top: 22px;
    padding: 18px 20px;
    font-size: 14.5px;
  }
  .tt-footer__testo--desktop { display: none; }
  .tt-footer__testo--mobile { display: block; }
}

/* --------------------------------------------------------------------------
   10. Tirage papier — LE cadre photo du site (bords francs : radius 0)
   La figure entière (fond blanc, padding, ombre, légende) porte la rotation,
   passée en variable : style="--rot:-1.6deg". Ratio : classe modificatrice
   ou style="--ratio:3/4". Défaut = grand tirage (padding 12, ombre pleine).
   Structure :
   <figure class="tt-tirage tt-tirage--ritratto" style="--rot:-1.6deg">
     <div class="tt-tirage__foto"><img …></div>
     <figcaption class="tt-tirage__didascalia">…</figcaption>
   </figure>
   -------------------------------------------------------------------------- */
.tt-tirage {
  position: relative;
  background: var(--tt-bianco);
  border-radius: 0;
  padding: 12px 12px 13px;
  box-shadow: var(--tt-ombra-tirage);
  transform: rotate(var(--rot, 0deg));
}
.tt-tirage--sm {
  padding: 10px 10px 11px;
  box-shadow: var(--tt-ombra-tirage-sm);
}

.tt-tirage--ritratto { --ratio: 3/4; }
.tt-tirage--paesaggio { --ratio: 4/3; }
.tt-tirage--largo { --ratio: 16/9; }

.tt-tirage__foto {
  aspect-ratio: var(--ratio, 3/4);
  background: var(--tt-backing); /* backing visible tant que la photo manque */
  overflow: hidden;
}
.tt-tirage__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-tirage__didascalia {
  margin-top: 11px;
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  color: var(--tt-didascalia);
}
.tt-tirage--sm .tt-tirage__didascalia {
  margin-top: 9px;
  font-size: 15.5px;
}

/* Variante « scotch » (tirage paysage du hero) : bande semi-transparente */
.tt-tirage__scotch {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 98px;
  height: 28px;
  background: rgba(208,186,144,.58);
  box-shadow: 0 1px 3px rgba(70,45,20,.12);
}

/* --------------------------------------------------------------------------
   11. Chip-personne — pilule cliquable avatar + prénom + années
   Défaut : fond blanc (posée sur bandeau crème/banda). --crema : fond crème,
   avatar 34px (posée sur carte blanche, ex. encadré du racconto).
   -------------------------------------------------------------------------- */
.tt-chip-persona {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--tt-bianco);
  border: 1px solid var(--tt-bordo-carta);
  border-radius: 999px;
  padding: 7px 18px 7px 8px;
  color: var(--tt-inchiostro);
  text-decoration: none;
}
.tt-chip-persona:hover {
  border-color: var(--tt-maiolica);
  box-shadow: 0 3px 10px rgba(47,100,134,.15);
  color: var(--tt-inchiostro);
}

.tt-chip-persona__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tt-banda);
  border: 1px solid rgba(122,90,52,.35);
  overflow: hidden;
  font-family: var(--tt-font-titoli);
  font-weight: 600;
  font-size: 16px;
  color: var(--tt-iniziali);
}
.tt-chip-persona__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* visages dans le tiers haut des photos (retour V1) */
  object-position: 50% 30%;
}

.tt-chip-persona__nome {
  font-size: 17.5px;
  font-weight: 600;
}
.tt-chip-persona__anni {
  font-size: 15px;
  font-weight: 400;
  color: var(--tt-meta);
}

.tt-chip-persona--crema {
  background: var(--tt-crema);
  padding: 6px 16px 6px 7px;
}
.tt-chip-persona--crema .tt-chip-persona__avatar {
  width: 34px;
  height: 34px;
  font-size: 15px;
}
.tt-chip-persona--crema .tt-chip-persona__nome { font-size: 17px; }

/* --------------------------------------------------------------------------
   12. Boutons — l'action est TOUJOURS terracotta, jamais azzurro
   -------------------------------------------------------------------------- */
.tt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 36px;
  border: none;
  border-radius: 8px;
  background: var(--tt-terracotta);
  color: var(--tt-testo-cta);
  font-family: var(--tt-font-corpo);
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.tt-cta:hover {
  background: var(--tt-terracotta-hover);
  color: var(--tt-testo-cta);
}

/* Sur bandeau bleu majolique : terracotta réchauffé pour le contraste */
.tt-cta--su-blu { background: var(--tt-terracotta-su-blu); }
.tt-cta--su-blu:hover { background: var(--tt-terracotta-su-blu-hover); }

.tt-cta--blocco {
  display: flex;
  width: 100%;
}

@media (max-width: 700px) {
  .tt-cta { border-radius: 10px; }
}

/* Bouton secondaire bordé (base des boutons zoom, actions neutres) */
.tt-bottone-secondario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  background: var(--tt-bianco);
  border: 1.5px solid rgba(51,38,26,.45);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--tt-inchiostro);
  text-decoration: none;
  cursor: pointer;
}
.tt-bottone-secondario:hover {
  background: rgba(51,38,26,.06);
  border-color: var(--tt-inchiostro);
  color: var(--tt-inchiostro);
}

/* 48×48 pour les boutons zoom « − / + » (glyphe 26px, pas d'icône) */
.tt-bottone-secondario--quadrato {
  width: 48px;
  padding: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   13. Encadré à filet supérieur azzurro (« Le persone di questo racconto »)
   Seul emploi de l'azzurro sur un encadré : le filet, jamais le texte.
   -------------------------------------------------------------------------- */
.tt-riquadro {
  background: var(--tt-bianco);
  border: 1px solid rgba(47,100,134,.4);
  border-top: 3px solid var(--tt-azzurro);
  padding: 22px 26px;
}

@media (max-width: 700px) {
  .tt-riquadro { padding: 16px 18px; }
}

/* Nav mobile à 3 entrées : la 1re (la plus longue) prend toute la largeur */
@media (max-width: 700px) {
  .tt-nav__item:first-child:nth-last-child(3) { grid-column: 1 / -1; }
}