/* =================================
   MADE IN FRANCE — PAGE SPECIFIC STYLES
================================= */

:root {
  --margin: 40px;
  --gap: 96px;
  --col-gap: 20px;
  --col: calc((100vw - (var(--margin) * 2) - (var(--col-gap) * 11)) / 12);
  /* 8 colonnes centrées — pour le titre et le texte */
  --eight-cols: calc((var(--col) * 8) + (var(--col-gap) * 7));
  /* 10 colonnes centrées — pour l'image et le texte */
  --ten-cols: calc((var(--col) * 10) + (var(--col-gap) * 9));
}


/* =================================
   HEADER — logo The Parisianer centré
   Séparé du reste par une ligne fine
================================= */

.mif-header {
  padding: 80px var(--margin) 40px var(--margin);
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #e0e0e0;
}

.mif-logo {
  display: block;
  /* Largeur du logo — ajuste si trop grand ou trop petit */
  max-width: 500px;
  width: 50%;
  height: auto;
}


/* =================================
   INTRO — titre + texte centrés
   Contrairement aux autres projets,
   ce layout est centré (pas 50/50)
   comme dans le PDF Parisianer.
================================= */

.mif-intro {
  padding: var(--gap) var(--margin) 0 var(--margin);
  display: flex;
  flex-direction: column;
  align-items: center;       /* tout centré */
  text-align: center;
}

.mif-title {
  margin: 0 0 32px 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.mif-body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: var(--eight-cols);
}


/* =================================
   ILLUSTRATION — pleine largeur
   avec légende centrée dessous
================================= */

.mif-image-section {
  margin-top: var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--margin);
}

.mif-image {
  display: block;
  width: var(--ten-cols);    /* 10 colonnes sur 12 */
  max-width: 100%;
  height: auto;
}

.mif-caption {
  margin-top: 20px;
  font-family: 'Krub', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #888;
  text-align: center;
}


/* =================================
   META — Client / Outils
================================= */

.mif-meta {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 88px var(--margin) 100px var(--margin);
}

.mif-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mif-meta-label {
  font-family: 'Krub', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.mif-meta-value {
  font-family: 'Krub', sans-serif;
  font-weight: 400;
  font-size: 14px;
}


/* =================================
   MOBILE — max 768px
================================= */

@media (max-width: 768px) {

  :root {
    --margin: 20px;
    --gap: 56px;
    --col-gap: 12px;
    --col: calc((100vw - 40px - (var(--col-gap) * 11)) / 12);
    --eight-cols: calc((var(--col) * 8) + (var(--col-gap) * 7));
  }

  .mif-header {
    padding: 60px var(--margin) 32px var(--margin);
  }

  .mif-logo {
    width: 70%;
  }

  .mif-title {
    font-size: clamp(42px, 11vw, 72px);
    margin-bottom: 24px;
  }

  .mif-body {
    font-size: clamp(16px, 4vw, 20px);
    text-align: left;
  }

  .mif-meta {
    gap: 20px;
    padding: 40px var(--margin) 120px var(--margin);
  }

  .mif-meta-label,
  .mif-meta-value {
    font-size: 11px;
  }

}