/* =====================================================================
   VARIABLES GLOBALES
   Modifier ici pour ajuster les valeurs communes à tout le site
   ===================================================================== */
:root {
  /* Hauteur du header fixe */
  --header-height: 64px;

  /* Largeur max du contenu (header intérieur + blocs de contenu) */
  --content-max-width: 1224px;

  /* Padding latéral — s'adapte automatiquement à la largeur du viewport */
  --content-padding: clamp(16px, 3vw, 40px);

  /* Couleurs */
  --color-bg:           #ffffff;
  --color-text:         #1a1a1a;
  --color-text-muted:   #888888;
  --color-border:       rgba(0, 0, 0, 0.07);

  /* Typographie */
  --font-family: 'Inter', sans-serif;
}


/* =====================================================================
   RESET & BASE
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.light {
  font-weight: 200;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =====================================================================
   HEADER
   Position fixe, fond blanc, contenu centré sur --content-max-width
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: #e6007e;
  border-bottom: none;
}

/* Conteneur intérieur centré */
.header-inner {
  max-width: var(--content-max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--content-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
}

/* Hauteur du logo — ajuster selon le rendu souhaité */
.logo-img {
  height: 32px;
  width: auto;
  display: block;
}

/* Navigation droite */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Icônes sociales */
.nav-icon {
  display: flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.nav-icon:hover {
  opacity: 1;
}

/* Lien "Contact" */
.nav-contact {
  font-size: 0.8125rem;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  transition: opacity 0.2s ease;
}

.nav-contact:hover {
  opacity: 0.6;
}


/* =====================================================================
   MAIN — décalage pour compenser le header fixe
   ===================================================================== */
main {
  padding-top: var(--header-height);
}


/* =====================================================================
   BLOC PLEINE LARGEUR (.fw-block)
   Section qui s'étend sur toute la largeur de la page.

   Utilisation :
     --fw-bg : couleur (ex: #f5f5f5)
               ou image CSS (ex: url('images/fond.jpg'))
               → par défaut : transparent (fond blanc vient du body)

   Si --fw-bg est une image CSS, elle sera automatiquement couverte.
   Pour les images de contenu, utiliser plutôt <img class="cb-image">.
   ===================================================================== */
.fw-block {
  width: 100%;
  background: var(--fw-bg, transparent);
  background-size: cover;
  background-position: center;
}


/* =====================================================================
   BLOC DE CONTENU CENTRÉ (.content-block)
   Conteneur max 1224px, centré dans .fw-block.
   C'est lui qui porte l'aspect-ratio et les images/textes.

   Utilisation :
     --cb-bg      : couleur ou image de fond du bloc de contenu
                    → par défaut : transparent
     aspect-ratio : ratio du bloc, défini en style inline sur l'élément
                    ex: style="aspect-ratio: 16/9;"
                    → pour une hauteur fixe, remplacer par: style="height: 80vh;"
   ===================================================================== */
.content-block {
  position: relative;
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cb-bg, transparent);
  background-size: cover;
  background-position: center;
}


/* =====================================================================
   IMAGE DE BLOC (.cb-image)
   Remplit intégralement le .content-block en object-fit: cover.
   Fonctionne avec aspect-ratio ou height définis sur .content-block.

   Pour ajuster le cadrage : modifier object-position
   ex: object-position: top center;   → recadre vers le haut
       object-position: 50% 30%;      → décale vers le haut à 30%
   ===================================================================== */
.cb-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* =====================================================================
   TEXTE SUR IMAGE (.cb-text)
   Positionné en absolu par-dessus l'image, en pourcentages.

   Utilisation : définir top/left/right/bottom en style inline sur l'élément
   ex: style="top: 20%; left: 8%;"
       style="bottom: 12%; right: 6%;"

   La couleur de texte est blanche par défaut (pour fonds sombres).
   Changer color si l'image est claire.
   ===================================================================== */
.cb-text {
  position: absolute;
  max-width: 60%;
  color: #ffffff;
}

/* Sur mobile, le texte peut prendre un peu plus de place */
@media (max-width: 768px) {
  .cb-text {
    max-width: 82%;
  }
}


/* =====================================================================
   VARIANTE TEXTE SEUL (.content-block--text)
   Bloc sans image : hauteur déterminée par le contenu, pas d'aspect-ratio.

   Padding vertical et horizontal : modifier les valeurs clamp() ci-dessous
   clamp(min, fluide, max) — les trois valeurs à ajuster selon l'espace voulu
   ===================================================================== */
.content-block--text {
  overflow: visible;
  padding: 60px var(--content-padding);
}

/* Conteneur texte — limite la largeur pour la lisibilité (hors split) */
.text-block {
  max-width: 580px;
}

/* =====================================================================
   RANGÉE D'IMAGES COLLÉES (.image-row)
   Images côte à côte, aucun espace, chacune prend une part égale
   ===================================================================== */
.image-row {
  display: flex;
  gap: 0;
  overflow: hidden;
  padding: 50px 0 50px 0;
}

.image-row img {
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/* =====================================================================
   LAYOUT DEUX COLONNES (.text-image-split)
   Texte à gauche, image à droite, dans un .content-block--text
   ===================================================================== */
.text-image-split {
  display: flex;
  align-items: stretch;
  gap: clamp(32px, 5vw, 72px);
}

/* En mode split, le text-block est une colonne flex */
.text-image-split .text-block {
  flex: 1;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}

/* Colonne image droite */
.split-image {
  flex: 1;
}

.split-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sur mobile : empilement vertical, image en dessous */
@media (max-width: 768px) {
  .text-image-split {
    flex-direction: column;
  }

  .split-image {
    width: 100%;
    min-height: 240px;
  }
}


/* =====================================================================
   TYPOGRAPHIE
   Toutes les tailles utilisent clamp() pour être fluides entre mobile et desktop.
   Format : clamp(taille-min, taille-fluide, taille-max)
   Modifier les trois valeurs pour ajuster selon vos besoins.
   ===================================================================== */

/* Petite étiquette catégorie au-dessus du titre */
.text-label {
  display: block;
  font-size: clamp(0.625rem, 0.85vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75em;
  opacity: 0.5;
}

/* Titre principal */
.text-title {
  font-size: clamp(1.75rem, 4.5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Corps de texte */
.text-body {
  font-size: clamp(0.9rem, 1.3vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-top: 2em;
}

/* Corps de texte — version grande (×1.4) */
.text-body-up {
  font-size: clamp(1.26rem, 1.82vw, 1.4875rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-text-muted);
  margin-top: 1em;
}


/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  padding: 40px var(--content-padding);
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}


/* =====================================================================
   RESPONSIVE — breakpoints
   ===================================================================== */

/* Classe utilitaire — masquée sur mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .image-row { flex-direction: column; padding: 0; margin-top: 20px; }
  .image-row img { width: 100%; height: auto; }
  .image-row img.mug { width: 75%; margin: 20px auto 20px; }
}

/* Tablette */
@media (max-width: 768px) {
  :root {
    --header-height: 52px;
  }

  .logo-img {
    height: 20px;
  }

  .header-nav {
    gap: 16px;
  }

  /*
    Pour changer le ratio d'un bloc image sur mobile, cibler le bloc
    via un id ou une classe supplémentaire ajoutée dans le HTML.

    Exemples :
      #bloc-hero .content-block { aspect-ratio: 4/3; }
      .bloc-projet .content-block { aspect-ratio: 1/1; }
  */
}

/* Mobile */
@media (max-width: 480px) {
  .site-footer {
    padding-top: 16px;
  }

  .header-nav {
    gap: 12px;
  }

  .nav-contact {
    font-size: 0.75rem;
    letter-spacing: 0.07em;
  }

  .content-block--text {
    padding-top: clamp(48px, 12vw, 72px);
    padding-bottom: clamp(48px, 12vw, 72px);
  }
}