/* ==========================================================================
   Tertium Éditions — jetons de design
   Refonte WooCommerce · à charger en premier dans le thème enfant

   Dernière synchronisation avec les maquettes : 29 août 2026 (passe 4 — fond blanc validé).
   Source de vérité : CE FICHIER. Les maquettes HTML sont en styles inline et
   **recopient** ces valeurs à la main — elles n'importent pas tokens.css.

   Valeurs qui existent donc en double (à vérifier si vous modifiez un jeton) :
     couleurs   #17150F #FFFFFF #EDE7DA #E0D9C9 #EBEAE7 #E9E9E5 #DFDFDA #D4D4CF #F3F3F0
                #A6402A #D08A6E #B08A4A #8A6A2F #C9A566 rgba(176,138,74,.55)
                #56544E #6A6862 #C4C4BF #B5B5AF #EBDDD2 #3F6B48 #E3C58A
     typo       52 / 46 / 44 / 36 / 34 / 32 / 30 / 28 / 26 / 23 / 22 / 19 / 17 px
                corps 16px · dense 14 / 13,5 / 12,5 px · capitales 11,5 / 11 px
     espacements gouttiere 56px (bureau) / 44px (en-tête) / 20px (mobile)
     mouvement  .25s · .35s · .6s · .7s · zoom 1,07 · lévitation -7px · défilés 46s / 52s
   ========================================================================== */

:root {
  /* ---- Couleurs ---- */
  --tt-encre:            #17150F; /* texte principal, fonds sombres */
  --tt-papier:           #FFFFFF; /* fond du site — BLANC (validé 29/08/2026) */
  --tt-papier-alt:       #EDE7DA; /* BEIGE : fond de bloc, encart, bandeau (usage par touches) */
  --tt-papier-gris:      #F3F3F0; /* gris très clair : boutons secondaires, tuiles neutres */
  --tt-papier-ombre:     #EBEAE7; /* fond hors zone de contenu (desk) */
  --tt-bord:             #E9E9E5; /* filets, grilles 1px sur fond blanc */
  --tt-bord-beige:       #E0D9C9; /* filets DANS ou AUTOUR d'un bloc beige */
  --tt-bord-champ:       #DFDFDA; /* bordures d'inputs et boutons secondaires */
  --tt-bord-champ-fonce: #D4D4CF;

  --tt-brique:           #A6402A; /* accent 1 : liens, sur-titres, badges */
  --tt-brique-claire:    #D08A6E; /* liens sur fond sombre */
  --tt-or:               #B08A4A; /* accent 2 : FONDS uniquement */
  --tt-or-texte:         #8A6A2F; /* or en texte sur fond clair (4,6:1) */

  --tt-texte-2:          #56544E; /* texte secondaire sur papier */
  --tt-texte-3:          #6A6862; /* métadonnées (minimum sur papier) */
  --tt-sur-sombre-1:     #C4C4BF; /* texte secondaire sur encre */
  --tt-sur-sombre-2:     #B5B5AF;
  --tt-sur-sombre-3:     #EBDDD2; /* texte sur dégradé */

  --tt-stock:            #3F6B48; /* disponibilité */
  --tt-blanc:            #FFFFFF;

  --tt-or-clair:         #C9A566; /* filets de 2px, FONDS et FILETS uniquement */
  --tt-or-voile:         rgba(176, 138, 74, .55); /* hairline dorée : remplace l'ancien filet encre */
  --tt-or-voile-fort:    rgba(176, 138, 74, .7);

  --tt-degrade: linear-gradient(100deg, #17150F 0%, #3B2A1C 44%, #7A2D1C 80%, #A6402A 100%);
  --tt-degrade-mobile: linear-gradient(150deg, #17150F 0%, #3B2A1C 46%, #7A2D1C 82%, #A6402A 100%);

  /* Règles de contraste :
     - #B08A4A ne s'emploie JAMAIS en texte sur fond clair (2,9:1) → --tt-or-texte
     - sur une bande --tt-or, seule --tt-encre est lisible (5,7:1) : pas d'or foncé, pas de brique
     - --tt-texte-3 est le gris le plus clair admis sur --tt-papier (5,5:1) et --tt-papier-alt (4,8:1)

     RÈGLE DE SURFACE (fond blanc, beige par touches) :
     - --tt-papier (blanc) = surface par défaut de toutes les pages, cartes produit,
       grilles catalogue, en-tête et pied de page clair.
     - --tt-papier-alt (beige) = UNIQUEMENT les blocs d'accent, jamais une page entière :
       bandeau de tête de page catégorie, bloc « Les Visages de Tertium », bloc
       « Les sept marques », encart « Appel à manuscrits », encart auteur de la fiche
       livre, distinctions, agenda, équipe, cadres de portraits/couvertures à venir,
       facettes non sélectionnées.
     - Un filet à l'intérieur ou au bord d'un bloc beige prend --tt-bord-beige,
       pas --tt-bord (sinon le filet gris tranche sur le beige).
     - --tt-papier-gris = remplissage neutre des boutons secondaires sur fond blanc. */

  /* ---- Typographie ---- */
  --tt-serif: 'Instrument Serif', Georgia, serif;   /* graisse 400 uniquement */
  --tt-sans:  'Archivo', system-ui, sans-serif;     /* 400 / 500 / 600 / 700 */

  --tt-fs-h1:        52px;  /* 32px en mobile */
  --tt-fs-h1-page:   46px;  /* titres de page intérieure */
  --tt-fs-h2:        34px;  /* 24px en mobile */
  --tt-fs-h2-petit:  28px;
  --tt-fs-h3:        23px;
  --tt-fs-carte:     19px;  /* titre de produit en grille */
  --tt-fs-corps:     16px;  /* base du site : body, prose, résumés, biographies */
  --tt-fs-corps-s:   14px;  /* blocs denses uniquement : cartes, tableaux, colonnes latérales */
  --tt-fs-meta:      12.5px;
  --tt-fs-micro:     11.5px; /* capitales, plancher absolu : 11px */

  --tt-lh-titre:     1.1;
  --tt-lh-corps:     1.7;
  --tt-ls-micro:     .1em;   /* interlettrage des capitales */
  --tt-ls-titre:     -.015em;

  /* ---- Espacements ---- */
  --tt-max:          1400px; /* largeur maximale du site */
  --tt-gouttiere:    56px;   /* marge horizontale des sections */
  --tt-gouttiere-nav: 44px;  /* marge horizontale de l'en-tête */
  --tt-gouttiere-mob: 20px;
  --tt-section:      64px;   /* rythme vertical entre sections */
  --tt-bloc:         26px;
  --tt-gap:          24px;
  --tt-gap-s:        14px;
  --tt-touch:        44px;   /* cible tactile minimale */

  /* ---- Formes ---- */
  --tt-radius:       0;      /* aucun arrondi, sauf pastilles */
  --tt-filet:        1px solid var(--tt-bord);        /* grilles, séparateurs internes */
  --tt-filet-or:     1px solid var(--tt-or-voile);    /* séparateurs de section (par défaut) */
  --tt-filet-fort:   2px solid var(--tt-or-clair);    /* filet de tête de carte (Carnet) */
  --tt-filet-accent: 3px solid var(--tt-brique);      /* filet latéral des cartes agenda */
  --tt-filet-encre:  1px solid var(--tt-encre);       /* réservé aux bandes sombres */
  --tt-ombre-carte:  0 18px 34px -22px rgba(23, 21, 15, .6);
  --tt-ombre-couv:   0 12px 26px -16px rgba(23, 21, 15, .6);
  --tt-ombre-page:   0 24px 60px -30px rgba(23, 21, 15, .45);
  --tt-ratio-couv:   3 / 4;  /* couvertures : object-fit cover, jamais de marge blanche */

  /* ---- Mouvement ---- */
  --tt-t-rapide:     .25s ease;
  --tt-t-moyen:      .35s ease;
  --tt-t-zoom:       .6s cubic-bezier(.2, .6, .2, 1);
  --tt-t-reveal:     .75s cubic-bezier(.2, .6, .2, 1);
  --tt-t-lift:       .35s cubic-bezier(.2, .7, .3, 1);
  --tt-zoom-hover:   1.07;
  --tt-lift:         -7px;   /* carte qui se lève (actu, auteur, Carnet) */
  --tt-lift-petit:   -3px;   /* couverture en grille */
  --tt-press:        1px;    /* enfoncement au clic */
  --tt-anneau:       0 0 0 1px rgba(23, 21, 15, .08);      /* liseré au repos */
  --tt-anneau-or:    0 0 0 1px rgba(176, 138, 74, .6);     /* liseré au survol */
  --tt-ombre-flottante: 0 32px 56px -26px rgba(23, 21, 15, .55);

  /* ---- Focus ---- */
  --tt-focus:        3px solid var(--tt-brique);
  --tt-focus-offset: 3px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--tt-papier-ombre);
  color: var(--tt-encre);
  font-family: var(--tt-sans);
  font-size: var(--tt-fs-corps);   /* 16px : base du site */
  line-height: var(--tt-lh-corps);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--tt-serif); font-weight: 400; line-height: var(--tt-lh-titre); }
p { text-wrap: pretty; }

a { color: var(--tt-brique); text-decoration: none; }
a:hover { color: var(--tt-encre); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--tt-focus);
  outline-offset: var(--tt-focus-offset);
}

::selection { background: var(--tt-brique); color: var(--tt-papier); }

/* --------------------------------------------------------------------------
   États au survol — un effet par intention
   Le focus clavier garde toujours son contour brique : le survol ne le remplace pas.
   -------------------------------------------------------------------------- */

/* 1. Acheter / valider — bouton plein : passage à l'or, ombre portée, enfoncement */
.tt-btn-primaire {
  background: var(--tt-brique); color: var(--tt-papier); border: 0;
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide),
              transform .18s ease, box-shadow var(--tt-t-rapide);
}
.tt-btn-primaire:hover { background: var(--tt-or); color: var(--tt-encre); box-shadow: 0 10px 22px -12px rgba(23, 21, 15, .6); }
.tt-btn-primaire:active { transform: translateY(var(--tt-press)); }

/* 2. Ajouter au panier depuis une grille — bouton secondaire : remplissage or */
.tt-btn-secondaire {
  background: var(--tt-papier-gris); color: var(--tt-encre); border: 1px solid var(--tt-bord-champ);
  transition: background var(--tt-t-rapide), color var(--tt-t-rapide), border-color var(--tt-t-rapide), box-shadow var(--tt-t-rapide);
}
.tt-btn-secondaire:hover { background: var(--tt-or); color: var(--tt-encre); border-color: var(--tt-encre); }
.tt-btn-secondaire:active { transform: translateY(var(--tt-press)); }

/* 3. Naviguer — micro-lien en capitales : soulignement or qui se déploie */
.tt-lien-micro {
  color: var(--tt-brique);
  background: linear-gradient(var(--tt-or), var(--tt-or)) 0 100% / 0 1px no-repeat;
  transition: background-size .3s ease, color var(--tt-t-rapide);
}
.tt-lien-micro:hover { background-size: 100% 1px; color: var(--tt-encre); }

/* 4. Ouvrir une fiche — carte (actu, auteur, article) : liseré or, lévitation, zoom de l'image */
.tt-carte {
  background: var(--tt-papier);
  box-shadow: var(--tt-anneau);
  transition: transform var(--tt-t-lift), box-shadow var(--tt-t-lift);
}
.tt-carte:hover { transform: translateY(var(--tt-lift)); box-shadow: var(--tt-anneau-or), var(--tt-ombre-flottante); }
.tt-carte figure { overflow: hidden; }
.tt-carte img { transition: transform var(--tt-t-zoom); }
.tt-carte:hover img { transform: scale(var(--tt-zoom-hover)); }

/* 5. Choisir un rayon / une facette — remplissage or + filet encre à gauche */
.tt-choix { background: var(--tt-papier-alt); transition: background var(--tt-t-rapide), color var(--tt-t-rapide), box-shadow var(--tt-t-rapide); }
.tt-choix:hover { background: var(--tt-or); color: var(--tt-encre); box-shadow: inset 3px 0 0 var(--tt-encre); }
.tt-choix[aria-pressed="true"] { background: var(--tt-encre); color: var(--tt-papier); font-weight: 600; }

/* 6. Utilitaire (flèches du carrousel, quantité) — inversion, sans mouvement */
.tt-btn-utilitaire { border: 1px solid var(--tt-bord-champ); background: transparent; transition: background var(--tt-t-rapide), color var(--tt-t-rapide); }
.tt-btn-utilitaire:hover { background: var(--tt-encre); color: var(--tt-papier); border-color: var(--tt-encre); }

/* Sur fond sombre, le survol passe à l'or clair, jamais à l'or de fond */
.tt-sur-sombre a:hover { color: #E3C58A; }

/* Étiquette lue par les lecteurs d'écran mais masquée à l'œil */
.tt-visuellement-masque {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement */
.tt-skip {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  background: var(--tt-encre);
  color: var(--tt-papier);
}
.tt-skip:focus {
  position: static;
  width: auto; height: auto;
  clip-path: none;
  display: block;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Points de rupture
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --tt-gouttiere: 40px; }
  /* grilles produits : 3 colonnes */
}

@media (max-width: 900px) {
  :root { --tt-gouttiere: 28px; --tt-fs-h1: 40px; --tt-fs-h2: 28px; }
  /* grilles produits : 2 colonnes · filtres en tiroir · hero en une colonne · menu en tiroir */
}

@media (max-width: 600px) {
  :root {
    --tt-gouttiere: var(--tt-gouttiere-mob);
    --tt-fs-h1: 32px;
    --tt-fs-h1-page: 32px;
    --tt-fs-h2: 24px;
    --tt-fs-h3: 21px;
    --tt-fs-carte: 17px;
    --tt-section: 26px;
  }
  /* voir maquette-mobile.html */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}