/* EasyNode : jetons et composants de base.
   Source : knowledge/design/easynode-design-system.md (relevé du 2026-10-27). */
/* Copie du § 8 de la charte, lignes 758 à 992, telle quelle, à deux écarts près, signalés sur place :
   ce fichier vit dans css/ et les images dans img/, donc ses deux url("img/…") deviennent
   url("../img/…"). Les compléments de la page sont dans css/page.css. */
:root {
  /* Palette principale [G] */
  --en-primary: #5527C1;        /* violet : WordPress « primary », app --color-primary */
  --en-secondary: #FFED61;      /* jaune : WordPress « secondary », app --color-secondary */
  --en-background: #FAFAFA;     /* fond de page : WordPress « background » */
  --en-ink: #222025;            /* texte, trait, ombre, fond sombre */

  /* Palette secondaire [O] */
  --en-surface: #FFFFFF;
  --en-light: #F4F4F4;          /* tranche des surfaces blanches (app : #F6F6F6) */
  --en-secondary-edge: #FFDE11; /* tranche des éléments jaunes */
  --en-cream: #FCF6E9;
  --en-error: #E82929;
  --en-success: #219D40;
  --en-warning: #DF7300;
  --en-info: #175AEA;

  /* Polices [G] */
  --en-font-title: "Tilt Warp", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --en-font-text: "Inria Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle du site au-dessus de 1550 px [O] */
  --en-fs-small: 18px;
  --en-fs-normal: 20px;
  --en-fs-medium: 24px;
  --en-fs-big: 32px;
  --en-fs-large: 64px;          /* h3 */
  --en-fs-x-large: 72px;        /* h2 */
  --en-fs-huge: 92px;           /* h1 */
  --en-fs-enormous: 138px;      /* accroche géante */

  /* Trait, rayon, ombre [O] */
  --en-border-width: 3px;
  --en-radius: 6px;
  --en-depth: 6px;              /* hauteur de l'ombre dure (app : 5px) */

  /* Espacements et conteneurs [O] */
  --en-base: 8px;
  --en-gap: 24px;
  --en-page-padding: 64px;
  --en-card-padding: 32px;
  --en-control-height: 46px;
  --en-content: 877px;
  --en-wide: 1260px;
  --en-full: 1520px;

  /* Mouvement [O] */
  --en-duration: .3s;
  --en-ease: cubic-bezier(0.76, 0, 0.24, 1);
  --en-ease-bounce: cubic-bezier(.5, 1.6, .4, .9);
}

@media (max-width: 1550px) {
  :root {
    --en-fs-small: 16px; --en-fs-normal: 18px; --en-fs-medium: 22px; --en-fs-big: 28px;
    --en-fs-large: 48px; --en-fs-x-large: 60px; --en-fs-huge: 72px; --en-fs-enormous: 120px;
  }
}
@media (max-width: 1280px) {
  :root {
    --en-fs-medium: 20px; --en-fs-big: 24px; --en-fs-large: 34px; --en-fs-x-large: 40px;
    --en-fs-huge: 60px; --en-fs-enormous: 100px;
  }
}
@media (max-width: 1024px) {
  :root {
    --en-fs-normal: 16px; --en-fs-huge: 42px; --en-fs-enormous: 60px;
    --en-page-padding: 20px; --en-card-padding: 20px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--en-background);
  color: var(--en-ink);
  font-family: var(--en-font-text);
  font-size: var(--en-fs-normal);
  font-weight: 300;
  line-height: 1.3;
  accent-color: var(--en-primary);
}
strong, b { font-weight: 700; }

h1, h2, h3, h4, h5, h6, .en-display {
  font-family: var(--en-font-title);
  font-weight: 400;
  font-synthesis: none;
  margin: 0 0 var(--en-gap);
}
h1 { font-size: var(--en-fs-huge); line-height: 1.2; }
h2 { font-size: var(--en-fs-x-large); line-height: 1; }
h3 { font-size: var(--en-fs-large); line-height: 1; }
h4 { font-size: var(--en-fs-medium); }
.en-display { font-size: var(--en-fs-enormous); line-height: .9; }

.en-container { max-width: var(--en-wide); margin-inline: auto; padding-inline: var(--en-page-padding); }
.en-grid {
  display: grid;
  gap: var(--en-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* Surface tracée : carte, en-tête, encart. --en-edge = tranche de l'ombre. */
.en-surface {
  --en-edge: var(--en-light);
  background: var(--en-surface);
  color: var(--en-ink);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
  box-shadow: 0 var(--en-depth) 0 calc(-1 * var(--en-border-width)) var(--en-edge),
              0 var(--en-depth) 0 0 var(--en-ink);
  margin-bottom: var(--en-depth);
  padding: var(--en-card-padding);
}

/* Bouton : blanc par défaut, --secondary (jaune, action principale), --primary (violet). */
.en-btn {
  --en-edge: var(--en-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--en-base);
  min-height: var(--en-control-height);
  padding: var(--en-base) calc(2 * var(--en-base));
  font-family: var(--en-font-title);
  font-size: var(--en-fs-small);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--en-ink);
  background: var(--en-surface) url("../img/btn_halftone.png") no-repeat right center / auto 100%; /* écart : ../img/ */
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
  box-shadow: 0 var(--en-depth) 0 calc(-1 * var(--en-border-width)) var(--en-edge),
              0 var(--en-depth) 0 0 var(--en-ink);
  margin-bottom: var(--en-depth);
  cursor: pointer;
}
.en-btn--secondary { --en-edge: var(--en-secondary-edge); background-color: var(--en-secondary); }
.en-btn--primary { --en-edge: var(--en-primary); background-color: var(--en-primary); color: #FFFFFF; }

/* Enfoncement au survol, instantané comme sur les deux sites. */
@media (hover: hover) {
  .en-btn:hover, a.en-surface:hover {
    translate: 0 3px;
    box-shadow: 0 3px 0 0 var(--en-ink);
  }
}
/* Focus clavier [R] : aucun style dédié n'existe sur les sites. */
.en-btn:focus-visible, a.en-surface:focus-visible {
  outline: var(--en-border-width) solid var(--en-primary);
  outline-offset: 3px;
}

/* Étiquette « New » inclinée. */
.en-tag {
  display: inline-block;
  padding: 3px 6px;
  font-family: var(--en-font-title);
  font-size: 12px;
  text-transform: uppercase;
  background: var(--en-secondary);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
  box-shadow: 0 var(--en-depth) 0 calc(-1 * var(--en-border-width)) var(--en-secondary-edge),
              0 var(--en-depth) 0 0 var(--en-ink);
  rotate: 9deg;
}

/* Champ (fond blanc comme l'app : lisible sur tous les fonds). */
.en-input {
  min-height: var(--en-control-height);
  padding: 0 calc(2 * var(--en-base) - 2 * var(--en-border-width));
  font: inherit;
  color: var(--en-ink);
  background: var(--en-surface);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
}
.en-input[aria-invalid="true"] { border-color: var(--en-error); }

/* Sections pleine largeur : 64 px comme les groupes colorés du thème. */
.en-section { position: relative; padding-block: var(--en-page-padding); }
.en-section > * { position: relative; z-index: 2; }
.en-section--primary { background: var(--en-primary); color: #FFFFFF; }
.en-section--dark { background: var(--en-ink); color: #FFFFFF; }

/* Trame de section (hero, pied de page). */
.en-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/texture.svg") center / cover no-repeat; /* écart : ../img/ */
  opacity: .06;
}

/* Vague basse du thème (is-style-mask-2), tracé recopié de front.min.css 1.3.6.
   Le tracé fait 219 px de haut jusqu'à 1920 px de large : le contenu s'arrête au-dessus. */
.en-wave-bottom { padding-bottom: calc(219px + var(--en-page-padding)); }
.en-wave-bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='1920' height='219' viewBox='0 0 1920 219' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0V219H1920V99C1920 99 1758.5 218.5 1510 218.5C1409.53 218.5 1296.52 192.99 1167.23 163.805C1014.57 129.344 839.21 89.76 635 81C110.5 58.5004 0 0 0 0Z' fill='%23FAFAFA'/%3E%3C/svg%3E")
              bottom center / max(1920px, 100%) no-repeat;
}

/* Chiffres « cartoon ». */
.en-cartoon {
  font-family: var(--en-font-title);
  color: var(--en-secondary);
  -webkit-text-stroke: var(--en-border-width) var(--en-ink);
  text-shadow: 4px 4px 0 var(--en-ink);
}

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