/* ============================================================
   MADAR — feuille de style
   Couleurs et polices de l'identité visuelle : modifier ici.
   Police officielle : Objektiv. Pour l'utiliser, déposer les
   fichiers .woff2 dans assets/fonts/ et décommenter le bloc
   @font-face ci-dessous.
   ============================================================ */

/*
@font-face { font-family: "Objektiv"; src: url("../assets/fonts/ObjektivMk1-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Objektiv"; src: url("../assets/fonts/ObjektivMk1-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*/

:root {
  --black: #010309;        /* Rich Black FOGRA29 */
  --navy: #011128;         /* Rich Black FOGRA39 */
  --gray: #EFEFEF;         /* Bright Gray */
  --blue: #0963ED;         /* Brandeis Blue */
  --blue-light: #A8C7FE;   /* Baby Blue Eyes */
  --diamond: #C5EAFC;      /* Diamond */
  --text-dim: rgba(239, 239, 239, 0.68);
  --line: rgba(168, 199, 254, 0.18);
  --ink-dim: #3A4660;

  --font: "Objektiv", "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1240px;
  --gutter: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--gray);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--blue-light); }
a:hover { color: var(--diamond); }
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.hidden { display: none; }

/* ---------- Mise en page ---------- */
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: 112px; }
.stack { display: flex; flex-direction: column; gap: 40px; }
.stack-lg { display: flex; flex-direction: column; gap: 64px; }
.center { text-align: center; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.05; font-weight: 400; letter-spacing: -0.025em; }
.display { font-size: clamp(40px, 6.4vw, 92px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--diamond); }
.eyebrow { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 32px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 30px; border: 0; border-radius: 999px;
  background: var(--blue); color: #fff; font: 600 17px/1 var(--font);
  text-decoration: none; cursor: pointer; transition: transform .2s, background .2s;
}
.btn:hover { background: #0754C9; color: #fff; transform: translateY(-1px); }

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(ellipse 70% 55% at 50% 110%, rgba(9, 99, 237, .5), rgba(1, 17, 40, 0) 70%), var(--navy);
  padding-top: 32px;
}
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.logo { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.hero__place { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; }
.hero__body {
  max-width: 1040px; margin: 0 auto; padding: 120px var(--gutter) 96px;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.hero h1 { font-size: clamp(38px, 6.2vw, 84px); line-height: 1.02; font-weight: 300; letter-spacing: -0.035em; }
.hero h1 strong { display: block; font-weight: 600; }
.hero .lead { max-width: 46ch; }

/* ---------- Médias (vidéos, images, fonds) ---------- */
.media { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-9-16 { aspect-ratio: 9 / 16; }
/* Vidéo verticale dans un cadre horizontal : affichée en entier sur un fond flou */
.media--entier img:not(.media__fond), .media--entier video { object-fit: contain; }
.media .media__fond { object-fit: cover; filter: blur(28px) brightness(.55); transform: scale(1.2); }
.media__play {
  position: relative; z-index: 2; width: 72px; height: 72px; border: 0; border-radius: 50%;
  background: rgba(1, 3, 9, .55); display: grid; place-items: center; cursor: pointer;
  transition: transform .2s, background .2s;
}
.media__play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.media__play:hover { transform: scale(1.08); background: var(--blue); }
.media__placeholder { position: relative; z-index: 1; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }


/* ---------- Pourquoi Madar existe ---------- */
.why { background: var(--black); padding-top: 32px; }
.why__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
.why__text p { color: var(--text-dim); font-size: 19px; max-width: 62ch; }
.why__text strong { color: var(--gray); font-weight: 600; }
.bridge { display: flex; align-items: center; gap: 0; }
.bridge__side {
  flex: 1 1 0; min-width: 0; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px;
  display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--text-dim);
}
.bridge__label { font-size: 22px; font-weight: 600; color: var(--gray); }
.bridge__line { flex: 0 1 64px; height: 1px; background: linear-gradient(90deg, var(--line), var(--blue)); }
.bridge__line:last-of-type { background: linear-gradient(90deg, var(--blue), var(--line)); }
.bridge__core {
  flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  box-shadow: 0 0 0 10px rgba(9, 99, 237, .15), 0 0 60px rgba(9, 99, 237, .45);
}
@media (max-width: 760px) {
  .why__text { grid-template-columns: 1fr; }
  .bridge { flex-direction: column; }
  .bridge__side { width: 100%; text-align: center; }
  .bridge__line { flex-basis: 32px; width: 1px; height: 32px; background: linear-gradient(180deg, var(--line), var(--blue)); }
  .bridge__line:last-of-type { background: linear-gradient(180deg, var(--blue), var(--line)); }
}

/* ---------- Partenaires ---------- */
.partners { padding-block: 72px; }
.partners__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: rgba(168, 199, 254, .12); border-radius: 16px; overflow: hidden;
}
.partner {
  background: var(--black); min-height: 112px; padding: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: rgba(239, 239, 239, .82); text-align: center;
}
/* Les logos sont tous dans un cadre 480×240 transparent, déjà équilibré : on affiche le cadre entier */
.partner img { width: 100%; max-width: 200px; height: auto; aspect-ratio: 2 / 1; object-fit: contain; opacity: .85; transition: opacity .2s; }
.partner:hover img { opacity: 1; }
@media (max-width: 900px) { .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partner--empty { font-size: 15px; font-weight: 400; color: rgba(239, 239, 239, .4); }

/* ---------- Problème ---------- */
.problem { padding-top: 40px; }
.pain { border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pain svg { width: 26px; height: 26px; fill: none; stroke: var(--blue-light); stroke-width: 1.6; }

/* ---------- Approche ---------- */
.approach { background: var(--navy); padding-block: 128px; }
.flow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; font-size: clamp(18px, 2vw, 22px); }
.pill { padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(168, 199, 254, .3); }
.pill--accent { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.arrow { color: var(--blue-light); }

/* ---------- Maroc ---------- */
.morocco { background: radial-gradient(circle at 80% 40%, rgba(9, 99, 237, .3), rgba(1, 3, 9, 0) 55%), var(--black); padding-block: 128px; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 18px; max-width: 1000px; }
.quote blockquote { margin: 0; font-size: clamp(32px, 4.8vw, 64px); line-height: 1.1; font-weight: 300; letter-spacing: -0.025em; }
.quote strong { font-weight: 600; color: var(--blue-light); }
.quote figcaption { font-size: 16px; color: var(--text-dim); }
.tags { display: flex; flex-wrap: wrap; gap: 12px; }
.tags span { padding: 10px 20px; border-radius: 999px; background: rgba(168, 199, 254, .1); font-size: 16px; }

/* ---------- Réalisations ---------- */
.work { background: var(--gray); color: var(--navy); }
.work__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.work__head p { max-width: 38ch; color: var(--ink-dim); }
.team .work__head p { color: var(--text-dim); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
  min-height: 44px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  font: 500 15px/1 var(--font); background: transparent; color: var(--navy);
  border: 1px solid rgba(1, 17, 40, .25); transition: background .2s, color .2s;
}
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--gray); border-color: var(--navy); }

/* Mosaïque : tuiles verticales (1 colonne) et horizontales (2 colonnes), sans trous */
.work__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 8px; grid-auto-flow: dense; column-gap: 16px; row-gap: 0;
}
.tile { margin: 0; padding-bottom: 24px; align-self: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tile--large { grid-column: span 2; }
.tile .media { border-radius: 18px; }
.tile figcaption { font-size: 16px; font-weight: 500; }
.tile__cat {
  position: absolute; z-index: 2; left: 14px; top: 14px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(1, 3, 9, .45);
}

/* ---------- Services ---------- */
.services { background: var(--navy); }
.services__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.services__list li {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px 24px; padding: 32px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.services__list h3 { font-size: 24px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.services__list p { font-size: 16px; color: var(--text-dim); }
.num { color: var(--blue-light); }

/* ---------- Méthode ---------- */
.step { display: flex; flex-direction: column; gap: 8px; }
.step span { font-size: 64px; font-weight: 200; line-height: 1; color: var(--blue); }
.step h3 { font-size: 26px; font-weight: 600; }
.step p { font-size: 16px; color: var(--text-dim); }

/* ---------- Équipe ---------- */
.team { background: var(--navy); }
.team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.member { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.member__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #0B2A57, var(--black)); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member h3 { font-size: 19px; font-weight: 600; }
.member p { font-size: 15px; color: var(--blue-light); }

/* ---------- Contact ---------- */
.contact {
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(9, 99, 237, .4), rgba(1, 3, 9, 0) 70%), var(--black);
  padding-bottom: 0; overflow: hidden;
}
.contact__inner {
  max-width: 760px; margin: 0 auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.form {
  width: 100%; text-align: left; background: var(--navy); border: 1px solid var(--line);
  border-radius: 24px; padding: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: rgba(239, 239, 239, .8); }
.form input, .form select, .form textarea {
  background: var(--black); color: var(--gray); border: 1px solid rgba(168, 199, 254, .25);
  border-radius: 12px; padding: 12px 14px; font: 16px var(--font); min-height: 46px;
}
.form textarea { resize: vertical; }
.form .full { grid-column: 1 / -1; }
.legal { font-size: 13px; color: var(--text-dim); }
.footer-line { font-size: 14px; color: var(--text-dim); }
.footer-line a { color: var(--text-dim); }
.wordmark {
  max-width: var(--max); margin: 72px auto 0; text-align: center; color: var(--blue);
  font-size: clamp(110px, 27vw, 380px); line-height: .78; font-weight: 700; letter-spacing: -0.06em;
}

/* ---------- Lecteur vidéo ---------- */
.player { width: min(1100px, 94vw); padding: 0; border: 0; border-radius: 18px; background: #000; overflow: visible; }
.player::backdrop { background: rgba(1, 3, 9, .85); }
.player__media { aspect-ratio: 16 / 9; }
.player--vertical { width: fit-content; }
.player--vertical .player__media { aspect-ratio: 9 / 16; height: min(86vh, 167vw); }
.player__media video, .player__media iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; }
.player__close {
  position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--gray); color: var(--navy); font-size: 24px; line-height: 1; cursor: pointer;
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .section { padding-block: 80px; }
  .hero__body { padding-block: 72px 56px; }
  .hero__place { font-size: 13px; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .member h3 { font-size: 16px; }
  .member p { font-size: 13px; }
  .member__photo { border-radius: 14px; }
  .tile figcaption { font-size: 14px; }
  .tile__cat { left: 10px; top: 10px; font-size: 10px; padding: 3px 8px; }
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .services__list li { grid-template-columns: 48px minmax(0, 1fr); }
  .services__list p { grid-column: 2; }
  .form { grid-template-columns: 1fr; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}