/* ==========================================================================
   TYPOGRAPHIE : le seul fichier à modifier pour changer les typos.
   Chaque RÔLE (logo, menu, sous-menu, titre, paragraphe...) a 8 réglages :
     --ROLE-font    famille de police
     --ROLE-size    taille, en "u" (1u = 1% de la hauteur de l'écran, plafonné en 4:3)
     --ROLE-weight  graisse (300 à 800)
     --ROLE-style   normal | italic
     --ROLE-ls      espacement des lettres
     --ROLE-lh      interligne
     --ROLE-case    none | uppercase
     --ROLE-color   couleur
   Astuce : sur le site, appuyer sur la touche T ouvre un panneau pour tester
   en direct, puis "Copier le CSS" et coller le résultat dans ce fichier.
   ========================================================================== */

:root{
  /* Polices disponibles */
  --font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Agrandir Wide","Archivo","Arial Black",sans-serif;

  /* Échelle globale : 1 = taille de la maquette. 1.1 agrandit tous les textes de 10 %. */
  --scale:1;
  --u:calc(min(1vh, 0.75vw) * var(--scale));
  --min-font:10px;

  /* Couleurs de texte */
  --ink:#25243b;
  --ink-soft:#383749;

  /* Alignement des paragraphes : justify | left */
  --text-align:justify;

  /* Soulignements (menu actif, années) */
  --underline-offset:0.28em;
  --underline-thickness:1px;

  --hero-title-font:var(--font-display); --hero-title-size:9.5; --hero-title-weight:700; --hero-title-style:normal; --hero-title-ls:0em; --hero-title-lh:1; --hero-title-case:none; --hero-title-color:#ffffff;

  --hero-subtitle-font:var(--font-display); --hero-subtitle-size:2.4; --hero-subtitle-weight:700; --hero-subtitle-style:normal; --hero-subtitle-ls:0.02em; --hero-subtitle-lh:1.2; --hero-subtitle-case:none; --hero-subtitle-color:#ffffff;

  --hero-footer-font:var(--font-body); --hero-footer-size:1.5; --hero-footer-weight:400; --hero-footer-style:normal; --hero-footer-ls:0.02em; --hero-footer-lh:1.2; --hero-footer-case:none; --hero-footer-color:#ffffff;

  --logo-font:var(--font-body); --logo-size:3.5; --logo-weight:700; --logo-style:normal; --logo-ls:-0.03em; --logo-lh:1; --logo-case:none; --logo-color:var(--ink);

  --menu-font:var(--font-body); --menu-size:2.5; --menu-weight:400; --menu-style:normal; --menu-ls:0.005em; --menu-lh:1.2; --menu-case:none; --menu-color:var(--ink-soft);

  --menu-active-font:var(--font-body); --menu-active-size:2.5; --menu-active-weight:400; --menu-active-style:normal; --menu-active-ls:0.005em; --menu-active-lh:1.2; --menu-active-case:none; --menu-active-color:var(--ink);

  --submenu-font:var(--font-body); --submenu-size:1.9; --submenu-weight:400; --submenu-style:normal; --submenu-ls:0.03em; --submenu-lh:1.3; --submenu-case:none; --submenu-color:var(--ink-soft);

  --h2-font:var(--font-body); --h2-size:3.0; --h2-weight:600; --h2-style:normal; --h2-ls:0em; --h2-lh:1.2; --h2-case:none; --h2-color:var(--ink);

  --year-font:var(--font-body); --year-size:2.2; --year-weight:400; --year-style:normal; --year-ls:0.01em; --year-lh:1.3; --year-case:none; --year-color:var(--ink);

  --label-font:var(--font-body); --label-size:2.0; --label-weight:400; --label-style:normal; --label-ls:0.08em; --label-lh:1.3; --label-case:none; --label-color:var(--ink-soft);

  --event-featured-font:var(--font-body); --event-featured-size:2.1; --event-featured-weight:600; --event-featured-style:normal; --event-featured-ls:0.01em; --event-featured-lh:1.4; --event-featured-case:none; --event-featured-color:var(--ink);

  --event-font:var(--font-body); --event-size:2.1; --event-weight:400; --event-style:normal; --event-ls:0.01em; --event-lh:1.4; --event-case:none; --event-color:var(--ink-soft);

  --body-en-font:var(--font-body); --body-en-size:2.5; --body-en-weight:400; --body-en-style:normal; --body-en-ls:0.01em; --body-en-lh:1.5; --body-en-case:none; --body-en-color:var(--ink-soft);

  --body-fr-font:var(--font-body); --body-fr-size:2.5; --body-fr-weight:400; --body-fr-style:italic; --body-fr-ls:0.01em; --body-fr-lh:1.5; --body-fr-case:none; --body-fr-color:var(--ink-soft);

  --strong-font:var(--font-body); --strong-size:2.5; --strong-weight:700; --strong-style:normal; --strong-ls:0.01em; --strong-lh:1.5; --strong-case:none; --strong-color:var(--ink);

  --cta-font:var(--font-body); --cta-size:2.1; --cta-weight:400; --cta-style:normal; --cta-ls:0.03em; --cta-lh:1.4; --cta-case:none; --cta-color:var(--ink);

  --cv-button-font:var(--font-body); --cv-button-size:1.5; --cv-button-weight:700; --cv-button-style:normal; --cv-button-ls:0.04em; --cv-button-lh:1; --cv-button-case:none; --cv-button-color:#ffffff;

  --toggle-font:var(--font-body); --toggle-size:1.7; --toggle-weight:500; --toggle-style:normal; --toggle-ls:0.04em; --toggle-lh:1.2; --toggle-case:none; --toggle-color:var(--ink);

  --pager-font:var(--font-body); --pager-size:1.7; --pager-weight:500; --pager-style:normal; --pager-ls:0.04em; --pager-lh:1.2; --pager-case:none; --pager-color:var(--ink);

  --note-font:var(--font-body); --note-size:1.8; --note-weight:600; --note-style:normal; --note-ls:0.01em; --note-lh:1.3; --note-case:none; --note-color:var(--ink);


  --caption-opad-font:var(--font-body); --caption-opad-size:2.4; --caption-opad-weight:500; --caption-opad-style:normal; --caption-opad-ls:0.01em; --caption-opad-lh:1.2; --caption-opad-case:none; --caption-opad-color:#ffffff;

  --lightbox-caption-font:var(--font-body); --lightbox-caption-size:2.1; --lightbox-caption-weight:400; --lightbox-caption-style:normal; --lightbox-caption-ls:0.05em; --lightbox-caption-lh:1.3; --lightbox-caption-case:none; --lightbox-caption-color:#ffffff;
}

/* --- Règles d'application (ne pas modifier sauf pour ajouter un rôle) --- */
.t-hero-title{
  font-family:var(--hero-title-font);
  font-size:max(var(--min-font), calc(var(--hero-title-size) * var(--u) * var(--fit,1)));
  font-weight:var(--hero-title-weight); font-style:var(--hero-title-style);
  letter-spacing:var(--hero-title-ls); line-height:var(--hero-title-lh);
  text-transform:var(--hero-title-case); color:var(--hero-title-color);
}
.t-hero-subtitle{
  font-family:var(--hero-subtitle-font);
  font-size:max(var(--min-font), calc(var(--hero-subtitle-size) * var(--u) * var(--fit,1)));
  font-weight:var(--hero-subtitle-weight); font-style:var(--hero-subtitle-style);
  letter-spacing:var(--hero-subtitle-ls); line-height:var(--hero-subtitle-lh);
  text-transform:var(--hero-subtitle-case); color:var(--hero-subtitle-color);
}
.t-hero-footer{
  font-family:var(--hero-footer-font);
  font-size:max(var(--min-font), calc(var(--hero-footer-size) * var(--u) * var(--fit,1)));
  font-weight:var(--hero-footer-weight); font-style:var(--hero-footer-style);
  letter-spacing:var(--hero-footer-ls); line-height:var(--hero-footer-lh);
  text-transform:var(--hero-footer-case); color:var(--hero-footer-color);
}
.t-logo{
  font-family:var(--logo-font);
  font-size:max(var(--min-font), calc(var(--logo-size) * var(--u) * var(--fit,1)));
  font-weight:var(--logo-weight); font-style:var(--logo-style);
  letter-spacing:var(--logo-ls); line-height:var(--logo-lh);
  text-transform:var(--logo-case); color:var(--logo-color);
}
.t-menu{
  font-family:var(--menu-font);
  font-size:max(var(--min-font), calc(var(--menu-size) * var(--u) * var(--fit,1)));
  font-weight:var(--menu-weight); font-style:var(--menu-style);
  letter-spacing:var(--menu-ls); line-height:var(--menu-lh);
  text-transform:var(--menu-case); color:var(--menu-color);
}
.t-menu-active{
  font-family:var(--menu-active-font);
  font-size:max(var(--min-font), calc(var(--menu-active-size) * var(--u) * var(--fit,1)));
  font-weight:var(--menu-active-weight); font-style:var(--menu-active-style);
  letter-spacing:var(--menu-active-ls); line-height:var(--menu-active-lh);
  text-transform:var(--menu-active-case); color:var(--menu-active-color);
}
.t-submenu{
  font-family:var(--submenu-font);
  font-size:max(var(--min-font), calc(var(--submenu-size) * var(--u) * var(--fit,1)));
  font-weight:var(--submenu-weight); font-style:var(--submenu-style);
  letter-spacing:var(--submenu-ls); line-height:var(--submenu-lh);
  text-transform:var(--submenu-case); color:var(--submenu-color);
}
.t-h2{
  font-family:var(--h2-font);
  font-size:max(var(--min-font), calc(var(--h2-size) * var(--u) * var(--fit,1)));
  font-weight:var(--h2-weight); font-style:var(--h2-style);
  letter-spacing:var(--h2-ls); line-height:var(--h2-lh);
  text-transform:var(--h2-case); color:var(--h2-color);
}
.t-year{
  font-family:var(--year-font);
  font-size:max(var(--min-font), calc(var(--year-size) * var(--u) * var(--fit,1)));
  font-weight:var(--year-weight); font-style:var(--year-style);
  letter-spacing:var(--year-ls); line-height:var(--year-lh);
  text-transform:var(--year-case); color:var(--year-color);
}
.t-label{
  font-family:var(--label-font);
  font-size:max(var(--min-font), calc(var(--label-size) * var(--u) * var(--fit,1)));
  font-weight:var(--label-weight); font-style:var(--label-style);
  letter-spacing:var(--label-ls); line-height:var(--label-lh);
  text-transform:var(--label-case); color:var(--label-color);
}
.t-event-featured{
  font-family:var(--event-featured-font);
  font-size:max(var(--min-font), calc(var(--event-featured-size) * var(--u) * var(--fit,1)));
  font-weight:var(--event-featured-weight); font-style:var(--event-featured-style);
  letter-spacing:var(--event-featured-ls); line-height:var(--event-featured-lh);
  text-transform:var(--event-featured-case); color:var(--event-featured-color);
}
.t-event{
  font-family:var(--event-font);
  font-size:max(var(--min-font), calc(var(--event-size) * var(--u) * var(--fit,1)));
  font-weight:var(--event-weight); font-style:var(--event-style);
  letter-spacing:var(--event-ls); line-height:var(--event-lh);
  text-transform:var(--event-case); color:var(--event-color);
}
.t-body-en{
  font-family:var(--body-en-font);
  font-size:max(var(--min-font), calc(var(--body-en-size) * var(--u) * var(--fit,1)));
  font-weight:var(--body-en-weight); font-style:var(--body-en-style);
  letter-spacing:var(--body-en-ls); line-height:var(--body-en-lh);
  text-transform:var(--body-en-case); color:var(--body-en-color);
}
.t-body-fr{
  font-family:var(--body-fr-font);
  font-size:max(var(--min-font), calc(var(--body-fr-size) * var(--u) * var(--fit,1)));
  font-weight:var(--body-fr-weight); font-style:var(--body-fr-style);
  letter-spacing:var(--body-fr-ls); line-height:var(--body-fr-lh);
  text-transform:var(--body-fr-case); color:var(--body-fr-color);
}
.t-strong{font-weight:var(--strong-weight); color:var(--strong-color);}
.t-cta{
  font-family:var(--cta-font);
  font-size:max(var(--min-font), calc(var(--cta-size) * var(--u) * var(--fit,1)));
  font-weight:var(--cta-weight); font-style:var(--cta-style);
  letter-spacing:var(--cta-ls); line-height:var(--cta-lh);
  text-transform:var(--cta-case); color:var(--cta-color);
}
.t-cv-button{
  font-family:var(--cv-button-font);
  font-size:max(var(--min-font), calc(var(--cv-button-size) * var(--u) * var(--fit,1)));
  font-weight:var(--cv-button-weight); font-style:var(--cv-button-style);
  letter-spacing:var(--cv-button-ls); line-height:var(--cv-button-lh);
  text-transform:var(--cv-button-case); color:var(--cv-button-color);
}
.t-toggle{
  font-family:var(--toggle-font);
  font-size:max(var(--min-font), calc(var(--toggle-size) * var(--u) * var(--fit,1)));
  font-weight:var(--toggle-weight); font-style:var(--toggle-style);
  letter-spacing:var(--toggle-ls); line-height:var(--toggle-lh);
  text-transform:var(--toggle-case); color:var(--toggle-color);
}
.t-pager{
  font-family:var(--pager-font);
  font-size:max(var(--min-font), calc(var(--pager-size) * var(--u) * var(--fit,1)));
  font-weight:var(--pager-weight); font-style:var(--pager-style);
  letter-spacing:var(--pager-ls); line-height:var(--pager-lh);
  text-transform:var(--pager-case); color:var(--pager-color);
}
.t-note{
  font-family:var(--note-font);
  font-size:max(var(--min-font), calc(var(--note-size) * var(--u) * var(--fit,1)));
  font-weight:var(--note-weight); font-style:var(--note-style);
  letter-spacing:var(--note-ls); line-height:var(--note-lh);
  text-transform:var(--note-case); color:var(--note-color);
}
.t-caption-opad{
  font-family:var(--caption-opad-font);
  font-size:max(var(--min-font), calc(var(--caption-opad-size) * var(--u) * var(--fit,1)));
  font-weight:var(--caption-opad-weight); font-style:var(--caption-opad-style);
  letter-spacing:var(--caption-opad-ls); line-height:var(--caption-opad-lh);
  text-transform:var(--caption-opad-case); color:var(--caption-opad-color);
}
.t-lightbox-caption{
  font-family:var(--lightbox-caption-font);
  font-size:max(var(--min-font), calc(var(--lightbox-caption-size) * var(--u) * var(--fit,1)));
  font-weight:var(--lightbox-caption-weight); font-style:var(--lightbox-caption-style);
  letter-spacing:var(--lightbox-caption-ls); line-height:var(--lightbox-caption-lh);
  text-transform:var(--lightbox-caption-case); color:var(--lightbox-caption-color);
}

.t-menu-active{text-decoration:underline; text-decoration-thickness:var(--underline-thickness); text-underline-offset:var(--underline-offset);}
.t-year{text-decoration:underline; text-decoration-thickness:var(--underline-thickness); text-underline-offset:var(--underline-offset);}
.t-body-en,.t-body-fr{text-align:var(--text-align); hyphens:auto; -webkit-hyphens:auto;}
