/* ============================================================
   THEME DU SITE — RETRO GAMES BREAK
   ------------------------------------------------------------
   Maquette : « Retro Games Break - Page Pro ». Fond noir, titres en
   Orbitron, texte en Figtree, trois couleurs de marque (rouge,
   vert, bleu) reprises des pixels du logo.

   Charge dans la couche `theme` (apres composants et blocs du Core,
   avant les utilitaires) : TOUT va dans `@layer theme { ... }`.

   1. Polices (hors couche : @font-face n'en depend pas)
   2. Jetons --s-* (le Core suit : grille, formulaires, messages)
   3. Charpente : en-tete, sections, pied de page
   4. Composants de la maquette, prefixe t-
   ============================================================ */

/* 1. Polices -------------------------------------------------
   Servies depuis public/theme/fonts : le site reste lisible si
   Google Fonts ne repond pas. Figtree est une police variable,
   un seul fichier couvre les graisses 400 a 700. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("fonts/orbitron-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer theme {

  /* 2. Jetons ------------------------------------------------ */
  :root {
    /* Couleurs de marque, nommees : les variantes de carte et les
       boutons les citent directement. */
    --t-rouge:       #db092d;
    --t-rouge-hover: #f01236;
    --t-vert:        #4ba333;
    --t-bleu:        #0066ff;
    --t-blanc:       #ffffff;

    --s-color-primary:        var(--t-rouge);
    --s-color-primary-hover:  var(--t-rouge-hover);
    --s-color-primary-soft:   rgb(219 9 45 / 14%);
    --s-color-on-primary:     #ffffff;

    --s-color-secondary:       var(--t-bleu);
    --s-color-secondary-hover: #2b7fff;
    --s-color-on-secondary:    #ffffff;

    --s-color-accent:    var(--t-vert);
    --s-color-on-accent: #ffffff;

    --s-color-heading:      #ffffff;
    --s-color-text:         #c6c6cd;
    --s-color-text-muted:   #9a9aa4;
    --s-color-text-inverse: #ffffff;

    --s-color-bg:            #0a0a0c;
    --s-color-surface:       #101015;
    --s-color-surface-alt:   #0d0d11;
    --s-color-surface-dark:  #060608;
    --s-color-border:        #1d1d22;
    --s-color-border-strong: #2b2b34;

    --s-color-success:      var(--t-vert);
    --s-color-success-soft: rgb(75 163 51 / 14%);
    --s-color-danger:       #ff4d6a;
    --s-color-danger-soft:  rgb(219 9 45 / 16%);
    --s-color-warning:      #f5a524;
    --s-color-warning-soft: rgb(245 165 36 / 14%);
    --s-color-info:         #4d94ff;
    --s-color-info-soft:    rgb(0 102 255 / 14%);

    --s-font-body:    "Figtree", system-ui, sans-serif;
    --s-font-heading: "Orbitron", "Figtree", sans-serif;
    --s-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

    /* La maquette court sur toute la largeur, avec 5vw de marge. */
    --s-container:     100rem;
    --s-gutter:        clamp(1rem, 5vw, 5rem);
    --s-section-y:     clamp(4rem, 2.5rem + 4vw, 6.25rem);
    --s-header-height: 72px;

    /* grid.css (couche layout, posee APRES les jetons) fixe sa propre
       largeur : sans ce rappel, les blocs resteraient a 72rem. */
    --l-container: var(--s-container);
    --l-gutter:    var(--s-gutter);

    --s-radius-sm: 2px;
    --s-radius-md: 2px;
    --s-radius-lg: 2px;

    --s-shadow-sm: none;
    --s-shadow-md: 0 12px 32px rgb(0 0 0 / 50%);

    /* Champs de formulaire (forms.css, partage avec le backoffice) :
       jetons que tokens.css du site ne raccorde pas, a passer en
       sombre ici, faute de quoi les champs resteraient clairs. */
    --c-surface-hover: #15151b;
    --c-text-subtle:   #5f5f69;
    --c-ring:          0 0 0 3px rgb(0 102 255 / 25%);
  }

  html {
    color-scheme: dark;
    background: var(--s-color-bg);
  }

  body {
    color: var(--s-color-text);
    background: var(--s-color-bg);
  }

  ::selection {
    color: #ffffff;
    background: var(--t-rouge);
  }

  a:hover {
    color: var(--t-vert);
  }

  /* 3. Charpente ---------------------------------------------- */

  /* En-tete */
  .s-header {
    background: rgb(10 10 12 / 88%);
    backdrop-filter: blur(10px);
    border-bottom-color: var(--s-color-border);
  }

  .s-logo img {
    height: 44px;
  }

  .s-nav {
    gap: 28px;
  }

  .s-nav__link {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #b9b9c0;
  }

  .s-nav__link:hover,
  .s-nav__link.is-active {
    color: var(--t-vert);
  }

  .s-nav__link.is-active::after {
    background: var(--t-vert);
  }

  /* En-tete compose (Structure du site > En-tete et pied de page) :
     logo, navigation, bouton « Nous contacter ». */
  .s-region--entete {
    gap: 28px;
  }

  @media (max-width: 860px) {
    .s-nav {
      background: var(--s-color-bg);
    }

    .s-region--entete {
      gap: 12px;
    }
  }

  /* Boutons du Core (bloc Bouton, formulaires) : ceux de la maquette. */
  .s-btn {
    padding: 11px 20px;
    font-family: var(--s-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--t-rouge);
    border-color: transparent;
    border-radius: 2px;
  }

  .s-btn:hover {
    color: #ffffff;
    background: var(--t-rouge-hover);
  }

  .s-btn--outline {
    color: #f2f2f4;
    background: transparent;
    border-color: #33333c;
  }

  .s-btn--outline:hover {
    color: var(--t-bleu);
    background: transparent;
    border-color: var(--t-bleu);
  }

  /* Sections : une bande par bloc « Section ». Une section sans titre
     (les engagements, sous les prestations) prolonge la precedente :
     pas de filet entre les deux, moins d'air. */
  .s-section {
    border-bottom: 1px solid var(--s-color-border);
  }

  .s-section:has(+ .s-section .t-section--suite) {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .s-section:has(.t-section--suite) {
    padding-top: 3.5rem;
  }

  /* Pied de page compose : logo, menu en ligne, mention. */
  .s-footer--composed {
    margin-top: 0;
    padding: 34px 0 48px;
    color: #8b8b95;
    background: var(--s-color-bg);
    border-top: 1px solid var(--s-color-border);
  }

  .s-region--pied-de-page {
    align-items: center;
    row-gap: 24px;
  }

  .s-footer--composed .s-logo img {
    opacity: 0.75;
  }

  .s-footer--composed .s-menu-block__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
    justify-content: flex-end;
  }

  .s-footer--composed a,
  .s-footer--composed .s-menu-block__link {
    font-size: 14px;
    color: #8b8b95;
    text-decoration: none;
  }

  .s-footer--composed a:hover,
  .s-footer--composed .s-menu-block__link:hover {
    color: var(--t-vert);
    text-decoration: none;
  }

  .s-footer--composed .s-mention {
    font-size: 13px;
  }

  @media (max-width: 48rem) {
    .s-footer--composed .s-menu-block__list {
      justify-content: flex-start;
    }
  }

  /* Messages (retour d'un envoi de formulaire) */
  .s-flashes {
    padding-top: var(--s-space-6);
  }

  /* 4. Composants de la maquette ------------------------------ */

  /* Surtitre precede des trois pixels du logo. */
  .t-eyebrow {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 18px;
    font-family: var(--s-font-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8b8b95;
  }

  .t-eyebrow::before {
    content: "";
    flex: none;
    width: 52px;
    height: 12px;
    background:
      url("img/pixel-rouge.svg") 0 0 / 12px 12px no-repeat,
      url("img/pixel-vert.svg") 20px 0 / 12px 12px no-repeat,
      url("img/pixel-bleu.svg") 40px 0 / 12px 12px no-repeat;
  }

  /* Boutons */
  .t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    font-family: var(--s-font-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--t-rouge);
    border: 1px solid transparent;
    border-radius: 2px;
    transition: color var(--s-transition-fast), border-color var(--s-transition-fast), background-color var(--s-transition-fast);
  }

  .t-btn:hover {
    color: #ffffff;
    background: var(--t-rouge-hover);
  }

  .t-btn--outline {
    color: #f2f2f4;
    background: transparent;
    border-color: #33333c;
  }

  .t-btn--outline:hover {
    background: transparent;
  }

  .t-btn--bleu:hover { color: var(--t-bleu); border-color: var(--t-bleu); }
  .t-btn--vert:hover { color: var(--t-vert); border-color: var(--t-vert); }

  /* Ouverture (hero) */
  @keyframes t-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .t-hero {
    position: relative;
    padding: clamp(4rem, 2rem + 6vw, 6.5rem) 0 clamp(4rem, 2rem + 6vw, 7rem);
    background: radial-gradient(900px 480px at 85% 8%, rgb(0 102 255 / 12%), transparent 70%);
    border-bottom: 1px solid var(--s-color-border);
  }

  .t-hero__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 56px;
    align-items: center;
  }

  .t-hero__text {
    max-width: 660px;
  }

  .t-hero .t-eyebrow {
    margin-bottom: 28px;
  }

  .t-hero__title {
    max-width: 24ch;
    margin: 0 0 28px;
    font-family: var(--s-font-heading);
    font-size: clamp(24px, 3.1vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-wrap: balance;
  }

  .t-hero__lead {
    max-width: 58ch;
    margin: 0 0 40px;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.62;
    color: #c6c6cd;
    text-wrap: pretty;
  }

  .t-hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 520px;
  }

  .t-hero__actions .t-btn {
    padding-inline: 18px;
  }

  .t-hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
  }

  .t-hero__media img {
    display: block;
    width: min(100%, 440px);
    height: auto;
    animation: t-fade-in 700ms ease-out both;
  }

  @media (prefers-reduced-motion: reduce) {
    .t-hero__media img {
      animation: none;
    }
  }

  /* Entete de section */
  .t-section__title {
    max-width: 22ch;
    margin: 0 0 20px;
    font-family: var(--s-font-heading);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    color: #ffffff;
    text-wrap: balance;
  }

  .t-section__intro {
    max-width: 66ch;
    margin-inline: 0;
    font-size: 17px;
    line-height: 1.68;
    color: #b9b9c0;
  }

  .t-section__intro > :last-child {
    margin-bottom: 0;
  }

  .t-section--split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 56px;
  }

  .t-section--split .t-section__intro {
    max-width: 58ch;
    color: #c6c6cd;
  }

  .t-section__media {
    justify-self: end;
    width: 100%;
    max-width: 440px;
  }

  .t-section__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
  }

  /* Elements d'une section : les grilles de la maquette, une par dessin */
  .t-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--t-items-min, 290px)), 1fr));
    gap: var(--t-items-gap, 16px);
  }

  .t-section__text + .t-items {
    margin-top: 3.5rem;
  }

  .t-section--suite > .t-items:first-child {
    margin-top: 0;
  }

  .t-items--encarts { --t-items-min: 200px; }
  .t-items--etapes  { --t-items-min: 240px; --t-items-gap: 28px; }
  .t-items--cas     { --t-items-min: 280px; --t-items-gap: 24px; }

  .t-items--visuels {
    --t-items-min: 170px;

    align-items: start;
  }

  /* Chiffres cles : sous le texte, dans sa largeur de lecture. */
  .t-items--chiffres {
    --t-items-min: 140px;
    --t-items-gap: 24px;

    max-width: 660px;
  }

  .t-section__text > .t-items--chiffres,
  .t-section__text + .t-items--chiffres {
    margin-top: 44px;
  }

  .t-card__media img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 2px;
  }

  /* Cartes */
  .t-card {
    --t-card-color: var(--s-color-border-strong);

    height: 100%;
  }

  .t-card--rouge { --t-card-color: var(--t-rouge); }
  .t-card--vert  { --t-card-color: var(--t-vert); }
  .t-card--bleu  { --t-card-color: var(--t-bleu); }
  .t-card--blanc { --t-card-color: var(--t-blanc); }

  .t-card p {
    margin: 0;
  }

  .t-card__title {
    margin: 0 0 16px;
    font-family: var(--s-font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
  }

  .t-card__text {
    font-size: 16px;
    line-height: 1.66;
    color: #b9b9c0;
    text-wrap: pretty;
  }

  .t-card--carte {
    padding: 36px 32px;
    background: var(--s-color-surface);
    border-radius: 2px;
    transition: background-color var(--s-transition-fast);
  }

  .t-card--carte:hover {
    background: #15151b;
  }

  .t-card--encart {
    padding: 28px 26px;
    background: var(--s-color-surface-alt);
    border-radius: 2px;
  }

  .t-card--encart .t-card__title {
    margin-bottom: 8px;
    font-size: 15px;
  }

  .t-card--encart .t-card__text,
  .t-card--cas .t-card__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--s-color-text-muted);
  }

  .t-card--etape {
    padding-top: 22px;
    border-top: 2px solid var(--t-card-color);
  }

  .t-card--etape .t-card__kicker {
    margin-bottom: 12px;
    font-family: var(--s-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #8b8b95;
  }

  .t-card--etape .t-card__title {
    margin-bottom: 12px;
    font-size: 17px;
  }

  .t-card--etape .t-card__text {
    font-size: 15px;
    line-height: 1.64;
    color: var(--s-color-text-muted);
  }

  .t-card--chiffre {
    padding-top: 14px;
    border-top: 2px solid var(--t-card-color);
  }

  .t-card .t-card__value {
    font-family: var(--s-font-heading);
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
  }

  .t-card .t-card__label {
    margin-top: 6px;
    font-size: 13px;
    color: #8b8b95;
  }

  .t-card--cas {
    padding: 32px;
    background: var(--s-color-surface);
    border-radius: 2px;
  }

  .t-card--cas .t-card__kicker {
    margin-bottom: 16px;
    font-family: var(--s-font-mono);
    font-size: 11px;
    color: #8b8b95;
  }

  .t-card--cas .t-card__title {
    margin-bottom: 10px;
    font-size: 16px;
  }

  /* Visuels (goodies, logos) */
  .t-figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: clip;
    background: var(--s-color-surface);
    border-radius: 2px;
  }

  .t-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .t-figure figcaption {
    min-height: 74px;
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--s-color-text-muted);
  }

  .t-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 24px;
    font-family: var(--s-font-mono);
    font-size: 11px;
    color: #8b8b95;
    text-align: center;
    background: repeating-linear-gradient(135deg, #141419 0 10px, #0f0f13 10px 20px);
    border-radius: 2px;
  }

  /* Contact : texte a gauche, formulaire a droite */
  .t-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 56px;
    align-items: start;
  }

  /* Le formulaire a besoin de 36rem pour placer ses champs par deux
     (paliers en requetes de conteneur) : on lui donne la plus grande
     part de la ligne. */
  @media (min-width: 64rem) {
    .t-contact {
      grid-template-columns: 5fr 6fr;
    }
  }

  .t-contact__text .t-section__title {
    max-width: 18ch;
  }

  .t-contact__text .t-section__intro {
    max-width: 54ch;
    color: #c6c6cd;
  }

  .t-contact__note {
    max-width: 54ch;
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #8b8b95;
  }

  .t-contact__form {
    padding: 36px 32px;
    background: var(--s-color-surface);
    border-radius: 2px;
  }

  /* Champs du formulaire public : focus en bleu, comme la maquette ;
     le bouton reste rouge. */
  .t-contact__form .s-form {
    --c-primary: var(--t-bleu);
    --c-surface: var(--s-color-bg);
    --c-border-strong: var(--s-color-border-strong);
  }

  .t-contact__form .c-label {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--s-color-text-muted);
  }

  .t-contact__form :is(.c-input, .c-select, .c-textarea) {
    padding: 13px 14px;
    font-size: 15px;
    color: #f2f2f4;
  }

  .t-contact__form .s-form .c-btn--primary {
    padding: 16px 30px;
    font-family: var(--s-font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--t-rouge);
    border-radius: 2px;
  }

  .t-contact__form .s-form .c-btn--primary:hover {
    background: var(--t-rouge-hover);
  }

  /* Appel a l'action */
  .s-section:has(.t-cta) {
    padding-block: 4rem;
  }

  .t-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
  }

  .t-cta__text {
    max-width: 52ch;
  }

  .t-cta__title {
    margin: 0 0 12px;
    font-family: var(--s-font-heading);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
  }

  .t-cta p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--s-color-text-muted);
  }
}