/* ============================================================================
   ayoubtrhaiti.fr — base.css
   ----------------------------------------------------------------------------
   Remise à zéro, typographie et composants réutilisables. Aucune valeur en
   dur : tout vient de theme.css. Nommage BEM en français.
   Composants : .mincho .etiquette .sceau .tuile .cadre .ligne-lien .bouton
                .code .champ .statut .logo .reserve .horaire .visuellement-cache
   ========================================================================== */

/* ---- Remise à zéro ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond-a);            /* sous le fond fixe (.fond), pour les débordements */
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  line-height: var(--il-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 719px) { body { font-size: var(--t-corps-mobile); } }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }   /* l'attribut hidden gagne toujours, même sur une tuile en flex */
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--sur-bouton); }

/* ---- Accessibilité ---------------------------------------------------------------- */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: fixed; top: var(--e3); left: var(--e3); z-index: 100;
  padding: var(--e3) var(--e4); border-radius: var(--r-m);
  background: var(--bouton); color: var(--sur-bouton); font-weight: 600;
  transform: translateY(-200%); transition: transform var(--d-micro) var(--courbe);
}
.evitement:focus { transform: none; }

/* ---- Typographie -------------------------------------------------------------- */
.mincho { font-family: var(--police-titre); }
.etiquette {
  font-family: var(--police-mono); font-size: var(--t-etiquette); font-weight: 400;
  letter-spacing: var(--esp-etiquette); text-transform: uppercase; color: var(--etiquette);
}
.etiquette--accent { color: var(--accent); }
.etiquette--accent-2 { color: var(--accent-2-texte); }
.etiquette--photo { color: var(--sur-photo); }
.numero {      /* « No.01 » */
  font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: var(--esp-rail);
  color: var(--accent);
}
.titre-display {
  font-family: var(--police-titre); font-weight: 800; font-size: var(--t-display);
  line-height: var(--il-display); letter-spacing: var(--esp-display); text-wrap: balance;
}
.titre-chapitre {
  font-family: var(--police-titre); font-weight: 800; font-size: var(--t-h2);
  line-height: var(--il-h2); text-wrap: balance;
}
.titre-tuile {
  font-family: var(--police-titre); font-weight: 700; font-size: var(--t-h3); line-height: var(--il-h3);
}
.titre-tuile--grand { font-weight: 800; font-size: var(--t-h3-grand); line-height: 1.05; }
.texte-2 { color: var(--texte-2); }
.petit { font-size: var(--t-petit); line-height: var(--il-petit); }
.mini  { font-size: var(--t-mini);  line-height: var(--il-petit); }
.mono  { font-family: var(--police-mono); }

/* ---- Sceau 熊 ----------------------------------------------------------------- */
.sceau {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: var(--r-sceau);
  background: var(--sceau); color: var(--sur-sceau);
  font-family: var(--police-titre); font-weight: 800; font-size: 26px; line-height: 1;
  transform: rotate(-4deg); box-shadow: var(--sceau-ombre);
}
.sceau--petit { width: 40px; height: 40px; font-size: 20px; }
.sceau--grand { width: 64px; height: 64px; font-size: 22px; line-height: 1.05; text-align: center; }
.sceau--moyen { width: 56px; height: 56px; font-size: 20px; line-height: 1.05; text-align: center; }

/* ---- Tuile -------------------------------------------------------------------- */
.tuile {
  display: flex; flex-direction: column; gap: var(--e2); min-width: 0;
  padding: var(--e5); border-radius: var(--r-l);
  border: 1px solid var(--tuile-bordure); background: var(--tuile);
  color: var(--texte);
  transition: background var(--d-micro) var(--courbe), border-color var(--d-micro) var(--courbe), transform var(--d-micro) var(--courbe);
}
.tuile p { font-size: var(--t-petit); line-height: var(--il-petit); color: var(--texte-2); }
a.tuile:hover, .tuile--cliquable:hover { background: var(--tuile-survol); }
.tuile--vedette    { border-color: var(--vedette-bordure);    background: var(--vedette-fond); }
.tuile--discord    { border-color: var(--discord-tuile-bordure); background: var(--discord-tuile-fond); }
.tuile--partenaire { border-color: var(--partenaire-bordure); background: var(--partenaire-fond); }
.tuile--vedette:hover, .tuile--discord:hover, .tuile--partenaire:hover { background-color: transparent; }
.tuile--bas { justify-content: flex-end; }      /* contenu calé en bas (petites tuiles produit) */
.tuile--pointille { border-style: dashed; }
.tuile__pied { margin-top: auto; }
.tuile__appel {    /* appel à l'action en mono, en bas d'une tuile cliquable */
  font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: var(--esp-rail);
  text-transform: uppercase; color: var(--accent);
}

/* ---- Cadre photo : 20 px, passe-partout 10 px, image en 12 px ----------------------- */
.cadre {
  position: relative; display: block; overflow: hidden; min-width: 0;
  padding: 10px; border-radius: var(--r-l);
  border: 1px solid var(--cadre-bordure); background: var(--cadre-fond);
  color: var(--sur-photo);
  transition: border-color var(--d-micro) var(--courbe);
}
.cadre:hover { border-color: var(--accent); }
.cadre__image, .cadre > img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m);
  background: var(--reserve);
}
.cadre__legende {    /* bandeau voilé en bas de l'image */
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 5px; padding: 18px 20px;
  background: var(--voile-photo); border-radius: 0 0 var(--r-m) var(--r-m);
}
.cadre__legende .numero { color: var(--sur-photo-2); }
.cadre__nom { font-family: var(--police-titre); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--sur-photo); }
.cadre__coin { position: absolute; }      /* étiquette posée dans un coin : left/top en ligne */
.cadre--compact { padding: 6px; }
.cadre--compact .cadre__legende { left: 6px; right: 6px; bottom: 6px; padding: 14px 16px; }
.cadre--compact .cadre__image { border-radius: calc(var(--r-m) - 2px); }

/* ---- Ligne-lien : « Twitch ……… Lives → » ---------------------------------------- */
.ligne-lien {
  display: flex; align-items: center; gap: var(--e4); min-height: 56px;
  border-bottom: 1px solid var(--filet); font-size: 18px; color: var(--texte);
  transition: color var(--d-micro) var(--courbe), padding-left var(--d-micro) var(--courbe);
}
.ligne-lien span {
  margin-left: auto; font-family: var(--police-mono); font-size: var(--t-etiquette);
  letter-spacing: var(--esp-rail); color: var(--etiquette); white-space: nowrap;
}
.ligne-lien:hover { padding-left: var(--e2); }
.ligne-lien:hover span { color: var(--accent); }
.ligne-lien--petite { min-height: 52px; font-size: 16px; }

/* ---- Boutons ------------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--bouton-h); padding: 0 var(--e5); border-radius: var(--r-m);
  background: var(--bouton); color: var(--sur-bouton);
  font-weight: 500; font-size: 15px; line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--d-micro) var(--courbe), color var(--d-micro) var(--courbe), border-color var(--d-micro) var(--courbe), transform var(--d-micro) var(--courbe);
}
.bouton:hover { background: var(--bouton-survol); color: var(--sur-bouton); }
.bouton:active { transform: translateY(1px); }
.bouton--plein { background: var(--sceau); color: var(--sur-sceau); }
.bouton--plein:hover { background: var(--sceau); color: var(--sur-sceau); box-shadow: 0 12px 30px rgba(124, 77, 255, .45); transform: translateY(-2px); }
.bouton--contour { background: transparent; color: var(--texte); border-color: var(--bouton-contour); }
.bouton--contour:hover { background: var(--tuile-survol); color: var(--texte); border-color: var(--accent); }
.bouton--discord { background: var(--discord-bouton); color: var(--sur-discord); }
.bouton--discord:hover { background: var(--discord); color: var(--sur-discord); }
.bouton--petit { min-height: var(--bouton-h-petit); padding: 0 var(--e4); font-size: 13px; }
.bouton--bloc { width: 100%; }
.bouton--mono {
  font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: var(--esp-rail); text-transform: uppercase;
}
.lien-souligne { border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: color var(--d-micro) var(--courbe); }
.lien-souligne:hover { color: var(--accent); }

/* ---- Code promo + bouton Copier ----------------------------------------------- */
.code {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 6px 6px 6px 16px; border-radius: var(--r-m); border: 1px solid var(--champ-bordure);
  font-family: var(--police-mono); font-size: var(--t-code); letter-spacing: var(--esp-code);
}
.code__copier {
  min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--champ-bordure);
  font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: var(--esp-rail);
  text-transform: uppercase; color: var(--texte);
  transition: background var(--d-micro) var(--courbe), border-color var(--d-micro) var(--courbe);
}
.code__copier:hover { border-color: var(--accent); }
.code__copier[data-copie] { background: var(--accent); color: var(--sur-bouton); border-color: var(--accent); }

/* ---- Formulaire ----------------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.champ label {
  font-family: var(--police-mono); font-size: var(--t-etiquette); letter-spacing: .2em;
  text-transform: uppercase; color: var(--etiquette);
}
.champ input, .champ textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--r-m);
  border: 1px solid var(--champ-bordure); background: var(--champ); color: var(--texte);
  font-size: 16px; line-height: 1.4;
  transition: border-color var(--d-micro) var(--courbe);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus-visible, .champ textarea:focus-visible { outline: none; border-color: var(--accent); }
.champ[data-invalide] input, .champ[data-invalide] textarea { border-color: var(--erreur); }
.champ__erreur { font-size: var(--t-mini); color: var(--erreur); }
.champ__erreur:empty { display: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* honeypot */

/* ---- Statut en direct : pastille ------------------------------------------------- */
.statut {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; width: fit-content;
  min-height: 34px; padding: 0 14px; border-radius: var(--r-rond);
  border: 1px solid var(--tuile-bordure); font-size: 13px; color: var(--texte-2);
  transition: border-color var(--d-micro) var(--courbe);
}
.statut::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hors-ligne); flex-shrink: 0;
}
.statut[data-etat="direct"] { border-color: var(--en-ligne); color: var(--texte); }
.statut[data-etat="direct"]::before { background: var(--en-ligne); box-shadow: 0 0 0 4px rgba(59, 165, 93, .2); }
.statut__chrono { font-family: var(--police-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .06em; }
.point-en-ligne { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--en-ligne); }

/* ---- Vitrine logo partenaire ------------------------------------------------------- */
.logo {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 18px;
  border-radius: var(--r-m); background: var(--logo-fond); border: 1px solid var(--logo-bordure);
}
.logo img { max-height: 36px; width: auto; max-width: 100%; object-fit: contain; }
.logo--clair { background: var(--logo-fond-clair); border-color: var(--logo-bordure-clair); }
/* Un logo peut avoir deux versions (sombre / claire) : on montre celle du mode courant, jamais recolorée */
.logo__clair { display: none; }
:root[data-mode="clair"] .logo__sombre { display: none; }
:root[data-mode="clair"] .logo__clair { display: block; }
:root[data-mode="clair"] .logo:not(.logo--clair) { background: var(--logo-fond-clair); border-color: var(--logo-bordure-clair); }
.logo--amazon img { transform: translateY(7%); }   /* calage optique : la vague sous « amazon » pèse en bas, le texte est centré sur l'axe */
.logo--nu, :root[data-mode="clair"] .logo--nu { background: transparent; border-color: transparent; padding: 0; justify-content: flex-start; }
.logo--nu img { max-height: 64px; width: auto; height: 64px; border-radius: var(--r-m); }
.logo--haut { min-height: 72px; }
.logo--haut img { max-height: 52px; }

/* ---- Réserve : image manquante ------------------------------------------------------ */
.reserve { background: var(--reserve); }

/* ---- Horaire : « Mardi  Tekken 8 ……… 21 h » ---------------------------------------- */
.horaire {
  display: flex; align-items: baseline; gap: var(--e4); padding: 14px 0;
  border-bottom: 1px solid var(--filet-faible); font-size: var(--t-petit);
}
.horaire__jour { font-family: var(--police-titre); font-weight: 700; font-size: 20px; width: 96px; flex-shrink: 0; color: var(--texte); }
.horaire__heure { margin-left: auto; white-space: nowrap; }

/* ---- Pastille mono (filtres, « Non lus ») -------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--r-rond);
  border: 1px solid var(--tuile-bordure); font-size: 13px; font-weight: 500;
}

/* ---- Bascule de mode : fondu court --------------------------------------------------- */
html.mode-transition, html.mode-transition *, html.mode-transition *::before, html.mode-transition *::after {
  transition: background-color var(--d-mode) var(--courbe), color var(--d-mode) var(--courbe), border-color var(--d-mode) var(--courbe) !important;
}

/* ---- Mouvement réduit : plus aucune transition --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}