/* TistouWeb — design system « Industry », repris de ThieumWeb.
   Feuille PARTAGÉE par les pages intérieures (cv.html, rigolo.html).
   index.html reste autonome : c'est une page d'accueil plein écran, sans
   barre de navigation — même parti pris que l'accueil de ThieumWeb. */

:root {
  --ink: #eef6ff;
  --ground: #1d2d3d;
  --line: rgba(238, 246, 255, .18);
  --line-strong: rgba(238, 246, 255, .34);
  --muted: rgba(238, 246, 255, .68);
  --steel: #94bce3;
  --on-steel: #1d2d3d;
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

/* — en-tête, persistant sur les pages intérieures — */
.site-header {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 44px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--ground);
  z-index: 5;
}

.brand-frame {
  position: relative;
  display: inline-flex;
  padding: 8px 16px;
}

.brand-frame i {
  position: absolute;
  width: 10px;
  height: 10px;
}

.brand-frame .tl { top: 0; left: 0; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.brand-frame .tr { top: 0; right: 0; border-right: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.brand-frame .bl { bottom: 0; left: 0; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.brand-frame .br { bottom: 0; right: 0; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }

.site-header .brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
}

.site-header .sep {
  width: 1px;
  height: 20px;
  background: var(--line-strong);
}

.site-nav {
  display: flex;
  gap: 22px;
  align-items: center;
}

.site-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--steel);
}

.site-nav a:focus-visible,
.site-header .brand:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

/* Sur un écran étroit, l'en-tête se resserre et passe à la ligne plutôt que
   de déborder : la barre reste utilisable à 400 px. */
@media (max-width: 560px) {
  .site-header {
    gap: 14px;
    padding: 14px 16px;
    flex-wrap: wrap;
  }
  .site-header .sep { display: none; }
}

/* — bouton d'action, commun à l'accueil et aux pages intérieures — */
.enter {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 38px;
  background: var(--steel);
  color: var(--on-steel);
  border: 1px solid var(--steel);
}

.enter:hover { background: #b5d9fd; border-color: #b5d9fd; }
.enter:active { background: #749dc4; border-color: #749dc4; }
.enter:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }

/* Variante secondaire : un « Retour » ne doit pas peser autant que l'action
   principale de la page. */
.enter.fantome { background: transparent; color: var(--steel); }
.enter.fantome:hover { background: rgba(148, 188, 227, .12); }
.enter.fantome:active { background: rgba(148, 188, 227, .22); }

/* — le contenu occupe la place restante sous la barre — */
.page { flex: 1; }

/* Page centrée (rigolo) : le contenu se cale au milieu de ce qui reste. */
.page-centree {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 40px 24px 64px;
}

/* — plaque à quatre coins, motif signature du site — */
.plate { position: relative; padding: 40px; border: 0; }
.plate i { position: absolute; width: 46px; height: 46px; }
.plate .tl { top: 0; left: 0; border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.plate .tr { top: 0; right: 0; border-right: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.plate .bl { bottom: 0; left: 0; border-left: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.plate .br { bottom: 0; right: 0; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }