/* =========================================================
   VANTUAN — feuille de style de marque
   Gestion Vantuan inc. · société de gestion
   Sceau vert 千歳緑 · accent shu 朱
   ---------------------------------------------------------
   Ce fichier contient : les jetons de couleur, la typographie
   et les composants de base du site. Tout le reste du site
   doit se construire avec ces valeurs — jamais avec des
   couleurs ou des tailles écrites à la main dans les pages.
   ========================================================= */

/* ---------------------------------------------------------
   1. JETONS — couleurs, typographie, échelle, espacement
   --------------------------------------------------------- */
:root {
  /* Couleurs — mode clair */
  --paper:      #E7EAE6;  /* fond de page (白鼠) */
  --surface:    #F4F6F3;  /* cartes, encadrés */
  --surface-2:  #DCE1DA;  /* aplats discrets */
  --ink:        #141815;  /* texte courant (墨) */
  --ink-2:      #57625B;  /* texte secondaire (鈍色) */
  --filet:      #C6CEC5;  /* traits, séparateurs (白緑) */
  --vert:       #2C5545;  /* couleur de marque (千歳緑) */
  --vert-2:     #4A7D67;  /* survol, états */
  --shu:        #BE4630;  /* accent (朱) — filets et puces UNIQUEMENT */

  /* Typographie */
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Times New Roman", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique — ne pas ajouter de valeur intermédiaire */
  --t--2: 0.6875rem;   /* intitulés en capitales */
  --t--1: 0.8125rem;   /* légendes, notes */
  --t-0:  1rem;        /* texte courant */
  --t-1:  1.1875rem;   /* chapô */
  --t-2:  1.5rem;
  --t-3:  clamp(1.75rem, 3.2vw, 2.25rem);
  --t-4:  clamp(2.25rem, 5vw, 3.25rem);
  --t-5:  clamp(2.75rem, 7.5vw, 4.5rem);

  /* Mise en page */
  --marge:  clamp(1.25rem, 5vw, 4rem);
  --largeur: 72rem;
  --mesure:  65ch;      /* longueur de ligne maximale */
}

/* Couleurs — mode sombre. Le vert et le shu sont RELEVÉS,
   jamais simplement inversés, sinon ils s'éteignent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0C110E;
    --surface:   #131A16;
    --surface-2: #1C251F;
    --ink:       #E6EBE7;
    --ink-2:     #93A199;
    --filet:     #29332C;
    --vert:      #8FBFA6;
    --vert-2:    #6FA88D;
    --shu:       #E2725A;
  }
}
:root[data-theme="dark"] {
  --paper:     #0C110E;
  --surface:   #131A16;
  --surface-2: #1C251F;
  --ink:       #E6EBE7;
  --ink-2:     #93A199;
  --filet:     #29332C;
  --vert:      #8FBFA6;
  --vert-2:    #6FA88D;
  --shu:       #E2725A;
}

/* ---------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }

p { margin: 0; max-width: var(--mesure); }

a { color: var(--vert); text-underline-offset: 0.2em; }
a:hover { color: var(--vert-2); }

img { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--filet); }
th { font-size: var(--t--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }

:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }

/* ---------------------------------------------------------
   3. UTILITAIRES
   --------------------------------------------------------- */
.container { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }

.pile      { display: flex; flex-direction: column; gap: 1rem; }
.pile-l    { display: flex; flex-direction: column; gap: 2rem; }

.intitule {                       /* petit intitulé en capitales */
  font-size: var(--t--2);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.chapo { font-size: var(--t-1); color: var(--ink-2); line-height: 1.75; max-width: 34em; }
.note  { font-size: var(--t--1); color: var(--ink-2); line-height: 1.65; }
.chiffres { font-variant-numeric: tabular-nums; }

/* Le filet shu — l'accent principal. Ne jamais l'élargir
   au point d'en faire un bandeau. */
.filet-shu { height: 2px; width: 4rem; background: var(--shu); border: 0; margin: 0; }

section { padding-block: clamp(3.5rem, 8vw, 6rem); }
section + section { border-top: 1px solid var(--filet); }

/* ---------------------------------------------------------
   4. LOGO ET VERROUILLAGE
   --------------------------------------------------------- */
.lockup { display: flex; align-items: center; gap: 1.15rem; text-decoration: none; color: inherit; }
.lockup .sceau { width: 40px; height: 40px; flex: none; color: var(--vert); }
.lockup .barre { width: 1px; align-self: stretch; background: var(--filet); }

.motsymbole { display: flex; flex-direction: column; gap: 0.25rem; line-height: 1; }
.motsymbole .nom {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* compense l'interlettrage à droite */
}
.motsymbole .genre {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------------------------------------------------------
   5. EN-TÊTE ET NAVIGATION
   --------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--filet);
  background: var(--paper);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.25rem;
}
.nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.nav a {
  font-size: var(--t--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--shu); }

/* ---------------------------------------------------------
   6. HÉROS
   --------------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero .signature {
  font-family: var(--serif);
  font-size: var(--t-5);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.hero .intro { font-size: var(--t-1); color: var(--ink-2); max-width: 32em; }

/* Signature qui défile : un mot à la fois, deux secondes chacun.
   La piste compte quatre lignes — la quatrième répète la première pour
   que la boucle se referme sans saut. */
.defile { display: block; height: 1.25em; overflow: hidden; }
.defile-piste { display: block; animation: defile-signature 6s infinite; }
.defile-piste span { display: block; height: 1.25em; line-height: 1.25em; }

@keyframes defile-signature {
  0%,  28% { transform: translateY(0); }
  33%, 61% { transform: translateY(-25%); }
  66%, 94% { transform: translateY(-50%); }
  100%     { transform: translateY(-75%); }
}

/* Choix du client : le défilement tourne pour tout le monde, y compris quand le
   système demande moins d'animations. Le titre garde son texte complet en
   aria-label, donc rien n'est perdu pour les lecteurs d'écran. */

/* ---------------------------------------------------------
   7. BLOCS DE CONTENU
   --------------------------------------------------------- */
.grille-3 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 760px) { .grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grille-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 760px) { .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bloc { display: flex; flex-direction: column; gap: 0.75rem; }
.bloc h3 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-2); }
.bloc h3::before {                /* la puce carrée shu */
  content: "";
  width: 0.4rem; height: 0.4rem;
  background: var(--shu);
  flex: none;
}
.bloc p { font-size: var(--t-0); color: var(--ink-2); }

.encadre {
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1rem;
}

/* Liste de faits — page « La société » */
.faits { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
@media (min-width: 700px) { .faits { grid-template-columns: repeat(2, 1fr); } }
.fait { background: var(--surface); padding: 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fait dt { font-size: var(--t--2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.fait dd { margin: 0; font-family: var(--serif); font-size: var(--t-1); }

/* ---------------------------------------------------------
   8. PIED DE PAGE
   --------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--filet);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer .container {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  justify-content: space-between; align-items: flex-start;
}
.site-footer .mentions { font-size: var(--t--2); letter-spacing: 0.1em; color: var(--ink-2); text-transform: uppercase; }

/* ---------------------------------------------------------
   9. IMAGES — traitements de marque
   --------------------------------------------------------- */
.img-marque { filter: saturate(0.8) contrast(0.96); }   /* image de contenu */
.img-tete   { filter: grayscale(1) contrast(1.05); }     /* base du duotone */

.figure { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.figure img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.figure figcaption { font-size: var(--t--1); color: var(--ink-2); }

/* ---------------------------------------------------------
   10. MOUVEMENT — discret, et désactivable
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Exception voulue : la signature continue de défiler même quand le système
     demande moins d'animations. Le texte complet reste dans l'aria-label. */
  .defile-piste { animation: defile-signature 6s infinite !important; }
}

/* ---------------------------------------------------------
   11. IMPRESSION
   --------------------------------------------------------- */
@media print {
  body { background: #FFFFFF; color: #000000; }
  .site-header, .site-footer, .nav { border: 0; }
  .nav { display: none; }
}