/*
 * Feuille de style du site (F-009, mise en page de spec_presentation §2 et §3).
 * Le thème se règle par les seules variables ci-dessous ; toute autre règle les emploie (RT-016).
 * Mise en page fluide, smartphone d'abord, deux points de rupture 48em et 64em (RT-009, RT-010).
 * Aucune hauteur de cadre fixée, aucun texte coupé, aucun sélecteur lié au nombre de cartes (RT-015).
 * Le style d'un titre suit la classe de son cadre, pas son niveau (RT-023).
 * Aucune ressource tierce (RT-001).
 */

/*
 * Variables du thème C retenu (ADR-005), recopiées de maquettes/theme-c.css. Les @font-face d'IBM Plex Sans et
 * les fichiers woff2 de public/assets/fonts/ viennent avec F-003 (RT-016, RT-021) : en attendant, la police du
 * système sert de repli.
 */
:root {
  --color-bg: #0d1117;
  --color-surface: #151b23;
  --color-text: #e6edf3;
  --color-text-muted: #a0aab5;
  --color-accent: #7aa2c8;
  --color-on-accent: #0d1117;
  --color-border: #2b3440;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-heading: "IBM Plex Sans", sans-serif;
  --space-unit: 0.75rem;
  --line-height: 1.45;
  /* Blocs de texte sur le fond d'écran : teinte bleu nuit, opacité (55 % au moins pour le contraste AA) et halo du texte (RT-028, RT-017, RG-017). */
  --color-block: #061a2e;
  --block-alpha: 60%;
  --text-halo: 0 0 0.3em var(--color-block);
  /* Largeur de la photo du dirigeant (RT-033, RG-021). */
  --portrait-width: 10rem;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-muted); /* texte courant en gris, titres en blanc (RT-028, RG-017) */
  font-family: var(--font-body);
  line-height: var(--line-height);
  overflow-wrap: anywhere;
}

/*
 * Fond d'écran fixe (RT-027, RG-016) : une seule couche fixe sous la page, image couvrante calée à droite à toutes
 * les largeurs (les courbes restent à l'écran), pas de background-attachment (ignoré par Safari sur iPhone), pas
 * de hauteur (RT-015).
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/elegance-abstraite-bleu-nuit.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

h1,
h2,
h3 {
  color: var(--color-text);
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-unit);
}

h3 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 var(--space-unit);
}

ul {
  margin: 0 0 var(--space-unit);
  padding-inline-start: calc(var(--space-unit) * 2);
}

a {
  color: var(--color-accent);
}

a:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: max(1rem, var(--space-unit));
  padding-block: var(--space-unit);
  /* Bloc de texte semi-opaque sur le fond d'écran, repli opaque sans color-mix (RT-028, RG-017). */
  background: var(--color-block);
  background: color-mix(in srgb, var(--color-block) var(--block-alpha), transparent);
  text-shadow: var(--text-halo);
}

/* En-tête : marque, bouton du menu, menu, sélecteur de langue (RT-011). */
.site-header .container {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-unit);
}

.brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-text);
  text-decoration: none;
}

.nav-toggle {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  font: inherit;
  padding: calc(var(--space-unit) * 0.5) var(--space-unit);
  cursor: pointer;
}

/* Sans script le bouton garde l'attribut hidden et le menu reste déplié (RT-011). */
.nav-toggle[hidden] {
  display: none;
}

.nav {
  flex: 1 1 100%;
}

/* Replié par menu.js sous 48em (RT-011). */
.nav.is-collapsed {
  display: none;
}

.nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-unit);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
  padding-block: calc(var(--space-unit) * 0.25);
}

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

.lang-switch {
  display: flex;
  gap: var(--space-unit);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-switch a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.lang-switch a[aria-current="true"] {
  color: var(--color-accent);
  font-weight: 600;
}

/* Cadres : une classe par type, la hauteur suit le texte (RT-015). */
.section {
  margin-block: var(--space-unit);
}

.section > .container {
  padding-block: calc(var(--space-unit) * 3);
}

.section h1,
.section h2 {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  color: var(--color-accent);
}

.hero > .container {
  padding-block: calc(var(--space-unit) * 4);
}

.hero h1,
.hero h2 {
  font-size: clamp(1.75rem, 6vw, 3rem);
  /* Titre de l'accueil en accent (RT-028). */
  color: var(--color-accent);
}

.hero-text {
  color: var(--color-text-muted);
  font-size: 1.15rem;
}

.button {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
  text-shadow: none;
  padding: calc(var(--space-unit) * 0.6) calc(var(--space-unit) * 1.4);
  border-radius: 0.25rem;
}

.button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Lignes de lecture bornées pour les cadres de texte (RT-009). */
.text p,
.text ul,
.legal p,
.legal ul,
.contact p {
  max-width: 45rem;
}

.contact-email {
  font-weight: 600;
}

/* Adresse de contact et lien du profil côte à côte (RG-019, RT-031). */
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-unit);
}

.profile-link {
  font-weight: 600;
}

/* Photo du dirigeant : centrée en haut du bloc sous 48em, colonne de droite au-delà (RG-021, RT-033). */
img.portrait {
  display: block;
  width: var(--portrait-width);
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-unit);
  border-radius: 0.375rem;
  border: 1px solid var(--color-border);
}

/* Conclusion sous les cartes (RG-018, RT-029). */
.cards-outro {
  margin-top: calc(var(--space-unit) * 1.5);
}

.cards-outro p {
  max-width: 45rem;
}

/* Cartes : grille qui se recompose selon la place, quel que soit leur nombre (RT-010, RT-015). */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-unit);
  margin-top: calc(var(--space-unit) * 1.5);
}

.card {
  background: var(--color-surface);
  text-shadow: none;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: calc(var(--space-unit) * 1.2);
}

/* Icône de carte : bloc de 4 unités sur pastille claire, sans déformation ni recoloration (RG-014, RT-026). */
.card-icon {
  display: block;
  width: calc(var(--space-unit) * 4);
  aspect-ratio: 1;
  object-fit: contain;
  box-sizing: content-box;
  padding: calc(var(--space-unit) / 2);
  margin-bottom: var(--space-unit);
  background: var(--color-text);
  border-radius: 0.375rem;
}

.card p,
.card li {
  color: var(--color-text-muted);
}

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

.site-footer {
  margin-top: var(--space-unit);
  color: var(--color-text-muted);
}

.site-footer .container {
  border-top: 1px solid var(--color-border);
  padding-block: calc(var(--space-unit) * 2);
}

.site-footer p {
  margin-bottom: 0;
}

.error .container {
  padding-block: calc(var(--space-unit) * 4);
}

@media (min-width: 48em) {
  /* Menu affiché en ligne, bouton retiré (RT-011). */
  .nav-toggle {
    display: none;
  }

  .nav {
    flex: 1 1 auto;
  }

  .nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero > .container {
    padding-block: calc(var(--space-unit) * 6);
  }

  /* Photo du dirigeant à droite, texte en colonne de gauche, hauts alignés (RG-021, RT-033). */
  .container.has-portrait {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--portrait-width);
    column-gap: var(--space-unit);
    align-items: start;
  }

  .has-portrait .portrait-text {
    grid-column: 1;
    grid-row: 1;
  }

  .has-portrait .portrait-text > :first-child {
    margin-top: 0;
  }

  img.portrait {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
}

@media (min-width: 64em) {
  .container {
    padding-inline: calc(var(--space-unit) * 2);
  }

  .section > .container {
    padding-block: calc(var(--space-unit) * 4);
  }
}