/* Animation machine à écrire + mots en exergue (page d'accueil) */

/* Sans JS : texte visible dans .typewriter-live (copie du final en JS) */
.copy.has-typewriter:not(.is-typewriter-running) .typewriter-live {
  display: none !important;
}

.copy.has-typewriter .typewriter-caret {
  display: none !important;
}

/* Marges verticales : héritées de .copy > div (pas de surcharge) */
.copy.has-typewriter > .typewriter-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.copy.has-typewriter .typewriter-stack > .typewriter-final,
.copy.has-typewriter .typewriter-stack > .typewriter-live {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  box-sizing: border-box;
}

/* Typo identique (y compris blocs tablo-text-sized) */
.copy.tablo-text-block.tablo-text-sized.has-typewriter .typewriter-final :is(p, li),
.copy.tablo-text-block.tablo-text-sized.has-typewriter .typewriter-live :is(p, li) {
  font-size: var(--tablo-text-fs) !important;
  line-height: var(--tablo-text-lh) !important;
}

/* Le final garde la mise en page ; texte transparent pendant l’anim */
.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done) .typewriter-final {
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done) .typewriter-final,
.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done) .typewriter-final * {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done) .typewriter-final .home-exergue {
  box-shadow: none !important;
  background: transparent !important;
}

.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done) .typewriter-live {
  position: relative;
  z-index: 1;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Paragraphes : pas de marge interne (l’espace est sur .typewriter-stack) */
.copy.has-typewriter .typewriter-final p,
.copy.has-typewriter .typewriter-live p,
.copy.has-typewriter .typewriter-final > :first-child,
.copy.has-typewriter .typewriter-final > :last-child,
.copy.has-typewriter .typewriter-live > :first-child,
.copy.has-typewriter .typewriter-live > :last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.copy.has-typewriter.has-indent .typewriter-final p,
.copy.has-typewriter.has-indent .typewriter-live p {
  text-indent: 30%;
}

/* Exergues : coquilles sur le final (invisible) + texte sur le live */
.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done)
  .typewriter-final
  .home-exergue:not(.is-exergue-superseded) {
  visibility: visible;
  pointer-events: auto;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.copy.has-typewriter.is-typewriter-running:not(.is-typewriter-done) .typewriter-live {
  display: block;
  visibility: visible;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  box-sizing: border-box;
}

/* Fin : révéler le final (déjà en place) ; masquer le live sans reflow */
.copy.has-typewriter.is-typewriter-done .typewriter-live {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.copy.has-typewriter.is-typewriter-done .typewriter-final {
  pointer-events: auto;
  user-select: text;
}

/* --- Mots en exergue (menu principal) --- */
.copy .home-exergue,
.copy.has-typewriter .typewriter-live .home-exergue {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border: none;
  box-shadow: 0 0 0 1px currentColor;
  border-radius: var(--home-exergue-radius, 0);
  padding: 0 0.22em;
  margin: 0 0.04em;
  line-height: 1.12;
  vertical-align: baseline;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-radius 0.2s ease-out,
    background-color 0.2s ease-out,
    color 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.copy .home-exergue:nth-of-type(odd) {
  --home-exergue-radius: 9999px;
}

.copy .home-exergue:nth-of-type(even) {
  --home-exergue-radius: 0;
}

.copy .home-exergue:hover,
.copy .home-exergue:focus-visible,
.copy .home-exergue.is-home-exergue-highlight,
.copy.has-typewriter .typewriter-live .home-exergue:hover,
.copy.has-typewriter .typewriter-live .home-exergue:focus-visible,
.copy.has-typewriter .typewriter-live .home-exergue.is-home-exergue-highlight {
  background-color: var(--season-2, var(--section-text, currentColor));
  color: var(--season-1, var(--section-bg, inherit));
  box-shadow: 0 0 0 1px var(--season-1, var(--section-bg, currentColor));
  outline: none;
}

.copy .home-exergue:nth-of-type(odd):is(:hover, :focus-visible, .is-home-exergue-highlight) {
  --home-exergue-radius: 0;
}

.copy .home-exergue:nth-of-type(even):is(:hover, :focus-visible, .is-home-exergue-highlight) {
  --home-exergue-radius: 9999px;
}

/* Mode N&B : exergues au survol / highlight = forme noire, texte blanc au-dessus
   (!important : priorité sur .layout-section[data-has-bw-layout="1"] span) */
body[data-contrast-mode="bw"] .layout-section .copy .home-exergue:is(:hover, :focus-visible, .is-home-exergue-highlight),
body[data-contrast-mode="bw"]
  .layout-section[data-has-bw-layout="1"]
  .copy
  .home-exergue:is(:hover, :focus-visible, .is-home-exergue-highlight),
body[data-contrast-mode="bw"]
  .layout-section
  .copy.has-typewriter
  .typewriter-final
  .home-exergue:is(:hover, :focus-visible, .is-home-exergue-highlight),
body[data-contrast-mode="bw"]
  .layout-section
  .copy.has-typewriter
  .typewriter-live
  .home-exergue:is(:hover, :focus-visible, .is-home-exergue-highlight) {
  background-color: #000000 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 1px #000000 !important;
  outline: none;
}

/* Exergue → même hover que le bouton du menu (main.css + actions.twig) */
header .actions-wrapper .action-item.is-home-exergue-hover > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-bg="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-bg="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-text="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-header-buttons-has-text="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover:has(> .submenu:hover)
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.is-home-exergue-hover:has(> .submenu:focus-within)
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.submenu-active.is-home-exergue-hover
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.submenu-active.is-home-exergue-hover
  > a.button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
header .actions-wrapper .action-item.submenu-active.is-home-exergue-hover
  > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle) {
  background-color: var(--referential-bg, var(--color-background, #ffffff)) !important;
  color: var(--referential-text, var(--color-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--referential-border, var(--color-text, #000000)) !important;
}

body[data-contrast-mode="bw"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-bg="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > .button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle),
body[data-contrast-mode="bw"][data-header-buttons-has-text="1"]
  header
  .actions-wrapper
  .action-item.is-home-exergue-hover
  > button.header-nav-button:not(.button--referentiel):not(.menu-search__toggle) {
  background-color: var(--bw-referential-bg, var(--referential-bg, #ffffff)) !important;
  color: var(--bw-referential-text, var(--referential-text, #000000)) !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--bw-referential-border, var(--referential-border, #000000)) !important;
}

header .actions-wrapper .action-item.submenu-active > .submenu {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}