/* =========================================================
   SPORTOKOM — maquette statique HTML/CSS
   Reconstituée à partir de template-final.psd /
   template-servicedetail-final.psd (couleurs, polices, textes).
   Polices d'origine repérées dans les PSD : Ostrich Sans
   (Black/Bold/Medium) pour les titres, Arsenal (Regular/Italic)
   pour les textes courants. Ostrich Sans n'est pas distribuée sur
   Google Fonts : elle est ici la VRAIE police (fichiers .woff2 dans
   assets/fonts/, licence libre OFL — voir assets/fonts/OFL-OstrichSans.md),
   à partir du pack fourni. Oswald reste en solution de repli si les
   fichiers ne chargent pas.
   IMPORTANT : OstrichSans-Bold est un dessin "lignée"/à double contour
   VOLONTAIRE (ce n'est pas un bug) — c'est le style natif utilisé pour
   tous les titres "en creux" du PSD (NOTRE ÉQUIPE, EN QUELQUES MOTS,
   PROFESSIONNELS DU SPORT, SOLUTIONS…). Là où le PSD montre du texte
   PLEIN (ATHLÈTES & SPORTIFS…, le logo footer, "VOUS SOUHAITEZ
   TRAVAILLER AVEC NOUS"…) on utilise le poids 900 (OstrichSans-Black,
   plein) à la place.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Alumni+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Tinos:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
  font-family: 'Ostrich Sans';
  src: url('../assets/fonts/OstrichSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Ostrich Sans';
  src: url('../assets/fonts/OstrichSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  /* OstrichSans-Bold est VOLONTAIREMENT une version "lignée"/creuse
     (double contour) du dessin — ce n'est pas un défaut de fichier : les
     titres du PSD ("NOTRE EQUIPE", "PROFESSIONNELS DU SPORT", "SOLUTIONS"…)
     utilisent bien ce rendu en creux nativement, sans effet CSS ajouté. */
  font-family: 'Ostrich Sans';
  src: url('../assets/fonts/OstrichSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Ostrich Sans';
  src: url('../assets/fonts/OstrichSans-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  --color-black: #0a0a0a;
  --color-white: #ffffff;
  --color-cream: #fdefd3;
  --color-gold: #f1af34;
  --color-gold-dark: #d99a20;
  --color-red: #b93a3e;
  --color-red-dark: #9c2c30;
  --color-btn-red: #c0392b;
  --color-grey: #8a8a8a;
  --color-grey-dark: #4a4a4a;
  --color-text: #222222;

  /* Harmonisation des 3 familles du site : Ostrich Sans pour tous les
     titres, Alumni Sans pour le texte courant, Tinos pour tout ce qui est
     en italique (citations, accroches) — cohérent sur l'ensemble des
     pages plutôt que des choix au cas par cas. */
  --font-display: 'Ostrich Sans', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Alumni Sans', Arial, sans-serif;
  --font-serif-alt: 'Tinos', Georgia, 'Times New Roman', serif;
  /* Police neutre (non condensée) utilisée par la nav du header dans le
     PSD — ce n'est pas la police "affiche" Ostrich Sans. */
  --font-nav: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; text-decoration: none; }
p a{text-decoration: underline; font-weight:700;}

/* ---------- Typography helpers ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  /* 700 = poids exact déclaré pour Ostrich Sans Bold (voir @font-face) :
     un poids "entre deux" (ex. 600) force Chrome à faire du faux-gras
     (double contour légèrement décalé), d'où un rendu "fantôme"/crénelé
     coloré sur les titres. Rester sur un poids réellement disponible
     (300/500/700/900) évite cet artefact. */
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0;
}

.section-title {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--color-black);
}
/* Espacements propres à certains titres de section, remplaçant les
   style="" en ligne qui étaient dans le HTML. */
.section-title--equipe { margin-bottom: 26px; }
.section-title--services { margin-top: 10px; }

.quote {
  font-family: var(--font-serif-alt);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
}

.btn {
  display: inline-block;
  background: var(--color-btn-red);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-gold);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  font-size: 18px;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn.block { display: block; width: 100%; text-align: center; }

.btn-arrow {
  position: relative;
  background: var(--color-btn-red);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-gold);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 26px;
  /* Pointe des deux côtés (comme dans le PSD), pas seulement à droite. */
  clip-path: polygon(0 50%, 8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%);
  display: inline-block;
}

/* ---------- Placeholder image wrapper ---------- */
.ph {
  position: relative;
  overflow: hidden;
  background: #ccc;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-tag {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 10px;
  font-family: monospace;
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
  letter-spacing: 0;
  text-transform: none;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  background: var(--color-black);
  position: relative;
  z-index: 50;
}
/* Le PSD n'utilise PAS la police "affiche" condensée pour la nav : les
   libellés sont dans une simple sans-serif normale, casse naturelle
   (pas de majuscules forcées). La pastille rouge "Une question ?" est
   un vrai bloc plein largeur de bandeau (hauteur du header), au bord
   gauche coupé en biais dans le même angle que les séparateurs "/" —
   pas juste un lien avec un fond. */
.nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  /* Dans la maquette, les liens sont groupés juste avant le bouton rouge
     (pas étalés depuis le bord gauche de la fenêtre) : on les laisse donc
     se packer avec lui contre le bord droit (justify-content:flex-end sur
     .nav), avec juste un peu d'air à droite avant le bouton. */
  padding: 22px 32px 22px 24px;
}
.nav-links a {
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .14rem;
  position: relative;
  /* Le "/" est collé bord à bord entre deux liens : un seul espacement
     (dans le padding, pas un gap flex en plus) sépare le texte du trait
     oblique de chaque côté. */
  padding-right: 28px;
}
.nav-links a:not(:last-child)::after {
  content: "";
  position: absolute;
  /* Le trait doit toucher le bord SUP et INF de la barre de nav (pas juste
     un petit trait centré sur le texte) : on l'étend au-delà de la hauteur
     du lien lui-même (via le padding vertical de .nav-links, -22px de
     chaque côté) puis on rallonge légèrement (scaleY) pour compenser le
     raccourcissement de la projection verticale dû à la rotation, afin
     que les pointes retombent exactement sur les bords après rotation. */
  right: 11px; top: -22px; bottom: -22px;
  width: 2px;
  background: #fff;
  transform: rotate(20deg) scaleY(1.065);
  transform-origin: center;
}
.nav a.cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-red);
  color: var(--color-gold);
  padding: 10px 34px 10px 46px;
  line-height: 1.45;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .14rem;
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%);
}

/* =========================================================
   HERO / COLLAGE
   ========================================================= */
.hero {
  position: relative;
  background: var(--color-black);
  overflow: hidden;
}
/* La mosaïque triangulaire (assemblage irrégulier de petits triangles,
   certains en duotone rouge/or, d'autres en noir & blanc) est désormais
   le vrai visuel fourni pour chaque page — bien plus fidèle que le
   quadrillage régulier qu'on pouvait recréer en CSS pur (triangles de
   tailles variables, teintes non périodiques). Une seule image de fond
   par page, recadrée en object-fit:cover pour rester nette sur toutes
   les largeurs d'écran. */
.hero-collage {
  /* Hauteur fixe (plus de min/max responsive) : sur un écran plus étroit
     que l'image, le fond reste centré et coupe à gauche/droite (cover) ;
     sur un écran plus large, il continue de couvrir toute la largeur —
     comportement standard de background-size:cover avec position center. */
  background: var(--color-black) center / cover no-repeat;
}
.hero-collage--home {
  height: 460px;
  background-image: url('../assets/img/hero/hero-mosaic-home.jpg');
}
.hero-collage--service {
  /* Bandeau plus fin sur la fiche-service, comme dans la maquette fournie
     pour cette page (visuel large et court, pas la même proportion que
     la home). */
  height: 274px;
  background-image: url('../assets/img/hero/hero-mosaic-service.jpg');
}

/* Pas de fond ni de découpe hexagonale : juste le logo, parfaitement
   centré dans le bandeau. */
.hero-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.hero-logo a { display: flex; }
.hero-logo img { width: 12rem; height: auto; }
/* Bandeau service plus court : logo un peu plus petit pour rester bien
   proportionné dans une bande moins haute. */
.hero-logo--service img { 
	margin-top: -7rem;     
	width: 10rem;
    height: auto; }

.hero-tagline {
  text-align: center;
  padding: 56px 20px 34px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.35;
}
.hero-tagline .solid { color: var(--color-black); font-weight: 700; }
.hero-tagline .grey { color: var(--color-grey); font-weight: 900; }

/* three pillars — mise en colonnes gérée par la grille Bootstrap (row/col-md-4)
   dans le HTML ; cette règle ne fixe plus que le conteneur et le style. */
.pillars {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 46px;
  text-align: center;
}
.pillar-img {
  width: 130px; height: 130px;
  margin: 0 auto 22px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.pillars p { font-family: var(--font-serif-alt); font-style: italic; font-size: 24px; }
.pillars p em { font-style: italic; font-weight: 700; }

.cta-band { max-width: 960px; margin: 0 auto 60px; padding: 0 24px; }

/* =========================================================
   TEAM
   ========================================================= */
.team-quote {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
  padding: 0 24px;
  color: var(--color-grey-dark);
}
.team-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 70px;
}
/* Une seule personne mise en avant : photo en "carré sur pointe" (losange)
   dans une colonne étroite (3/12), rôle + bio alignés à gauche dans la
   grande colonne (9/12) à côté, plutôt que la grille à 3 cartes centrées
   d'avant. */
.team-photo-col { text-align: center; }
.team-photo {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  margin: 0 auto 20px;
  transform: rotate(45deg);
  background: var(--color-black);
  overflow: hidden;
}
/* Forme gérée uniquement en CSS : si aucun fichier photo n'est fourni,
   .ph garde son fond gris par défaut (voir plus haut), sans rien à
   changer ici. */
.team-photo .ph {
  width: 100%; height: 100%;
  transform: rotate(-45deg) scale(1.42);
}
.team-info h3 { font-size: 36px; font-weight: 900; margin-bottom: 6px; text-align: left; }
.team-info h3 span { font-size:40px; font-weight: 400; }
/* Comme dans la maquette : une ligne fine qui va jusqu'au bord de la
   colonne (pas juste sous le texte du rôle), avec le petit rond plein
   au milieu, comme sur les fiches de l'ancienne grille à 3 cartes. */
.team-info .role {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .08em;
  color: var(--color-grey);
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 18px;
  position: relative;
}
.team-info .role::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-black);
}
.team-info .role::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 14px; height: 14px;
  margin-left: -7px;
  background: #fff;
  border: 2px solid var(--color-black);
  border-radius: 50%;
  z-index: 1;
}
.team-info p.bio { font-size: 18px; text-align: left; color: #333; margin: 0 0 14px; }
.team-info p.bio:last-child { margin-bottom: 0; }

/* =========================================================
   NOS SOLUTIONS — diagonal blocks
   ========================================================= */
.solutions { background: var(--color-cream); padding: 56px 0 0; overflow: hidden; }
.solutions .section-title { padding-top: 0; }

/* Dans le PSD, les deux bandes ne sont PAS inclinées dans le même sens
   (un simple skewY ne convient donc pas) : la ligne du haut est haute à
   DROITE / basse à GAUCHE, la ligne du milieu (entre le bloc or et le
   bloc rouge) est haute à GAUCHE / basse à DROITE (sens opposé), et la
   ligne du bas repasse haute à droite / basse à gauche. Chaque rangée a
   donc son propre clip-path à deux bords non parallèles ; la rangée du
   bas remonte d'un cran (margin-top négatif) pour que son coin découpé
   vienne exactement combler le coin découpé de la rangée du dessus —
   comme pour les triangles du bandeau photo, sans laisser d'espace. */
.solutions-ribbon { margin: 46px 0 30px; }
.sol-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}
.sol-row:first-child {
  clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 calc(100% - 90px));
}
.sol-row:last-child {
  clip-path: polygon(0 0, 100% 90px, 100% calc(100% - 90px), 0 100%);
  margin-top: -90px;
}
.sol-row .ph { width: 100%; height: 100%; }
.sol-row .text {
  padding: 64px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.sol-row .text.bg-gold { background: var(--color-gold); }
.sol-row .text.bg-red { background: var(--color-red); color: #fff; }
.sol-row .text .quote { font-family: var(--font-serif-alt); font-size: 30px; line-height: 1.3; }
.sol-row .text p.copy { font-size: 22px; }
.sol-row .text.bg-red p.copy { color: rgba(255,255,255,.9); }

.solutions-cta {
  text-align: center;
  padding: 50px 24px 40px;
  max-width: 760px;
  margin: 0 auto;
}

/* icon features grid */
.feature-grid {
  background: var(--color-cream);
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 24px 60px;
}
/* Dans le PSD, il n'y a que 4 lignes fines et dorées à l'intérieur de la
   grille (2 verticales + 2 horizontales, comme un "dièse" #) — pas de
   cadre autour de chaque case ni autour de la grille entière. */
.feature {
  padding: 34px 26px;
  text-align: center;
}
/* Sur mobile (<768px), la grille passe en 2 colonnes (col-6) au lieu de
   3 (col-md-4) — le motif de bordures "dièse" change donc de logique en
   dessous de ce seuil (voir media query plus bas), d'où le :not ci-dessous
   qui ne s'applique qu'à partir de la disposition 3 colonnes. */
@media (min-width: 768px) {
  .feature:not(:nth-child(3n)) { border-right: 1px solid var(--color-gold); }
  .feature:nth-child(-n+6) { border-bottom: 1px solid var(--color-gold); }
}
/* img est display:block globalement : sans marges auto, il colle à
   gauche même dans un conteneur text-align:center. */
/* Disposition mobile en 2 colonnes (col-6) : bordure droite sur la
   colonne de gauche seulement, bordure basse sur toutes les lignes sauf
   la dernière (le 9e item, seul sur sa ligne, n'a besoin d'aucune des
   deux, sinon on se retrouve avec des traits qui ne ferment rien). */
@media (max-width: 767.98px) {
  .feature:nth-child(odd):not(:last-child) { border-right: 1px solid var(--color-gold); }
  .feature:nth-child(-n+8) { border-bottom: 1px solid var(--color-gold); }
}
.feature-icon { width: 46px; height: 46px; margin: 0 auto 16px; object-fit: contain; }
/* Texte courant (légende), pas un titre : police générale du site plutôt
   que la police d'affiche, pour rester cohérent avec le reste des textes. */
.feature p {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .03em;
  margin: 0;
}

/* =========================================================
   SERVICES CARDS
   ========================================================= */
.services { padding: 60px 0 70px; }
.services-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.service-card {
  position: relative;
  display: block;
  height: 320px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.22,.85,.32,1.1);
}
/* Carte entièrement cliquable (tout le bloc est un <a>) : effet de survol
   plus marqué qu'un simple zoom — un fanion de couleur se déplie depuis le
   coin, un reflet diagonal balaie la photo, la photo se démasque en
   zoomant légèrement, et toute la carte se soulève avec une ombre nette. */
.service-card:hover,
.service-card:focus-visible {
  box-shadow: 0 22px 46px rgba(0,0,0,.4);
  transform: translateY(-6px);
}
.service-card .ph { position: absolute; inset: 0; }
/* Photo volontairement floue, comme dans le PSD — mais l'image source
   elle-même reste normale/nette : le flou est un filtre CSS, pas un
   defaut de l'image. Le léger scale masque les bords nets du flou. */
.service-card .ph img {
  filter: blur(3px);
  transform: scale(1.1);
  transition: filter .5s ease, transform .6s cubic-bezier(.22,.85,.32,1.1);
}
.service-card:hover .ph img,
.service-card:focus-visible .ph img {
  filter: blur(0px) brightness(.9);
  transform: scale(1.22) rotate(.6deg);
}
/* Effet "spot" au survol : un glow radial fixe (centré sur la carte) qui
   s'allume fort puis s'estompe sur place — pas un reflet qui traverse la
   photo. Seule l'opacité anime ; le dégradé lui-même ne se déplace pas. */
.service-card .ph::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 55%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.service-card:hover .ph::after,
.service-card:focus-visible .ph::after {
  animation: cardSpot .75s ease-out forwards;
}
@keyframes cardSpot {
  0% { opacity: 0; }
  12% { opacity: 1; }
  35% { opacity: .8; }
  100% { opacity: 0; }
}
.service-card::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.14);
  transition: background .35s ease;
  z-index: 2;
}
.service-card:hover::after,
.service-card:focus-visible::after {
  background: rgba(0,0,0,.05);
}
.service-card::before {
  /* Fanion triangulaire qui se déplie depuis le coin supérieur gauche au
     survol, pour signaler nettement la carte "active" — plus expressif
     qu'un simple liseré de bordure. */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 84px; height: 84px;
  background: var(--color-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: translate(-100%, -100%);
  transition: transform .5s cubic-bezier(.22,1.4,.36,1);
  z-index: 3;
  pointer-events: none;
}
.service-card:hover::before,
.service-card:focus-visible::before {
  transform: translate(0, 0);
}
.service-card .content {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  padding: 26px;
  z-index: 4;
}
.service-card .ph .ph-tag { z-index: 1; }
.service-card h3 {
  color: #fff;
  font-weight: 900;
  font-size: 46px;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  margin: 0;
  transition: transform .35s ease;
}
.service-card:hover h3,
.service-card:focus-visible h3 {
  transform: translateY(-2px);
}
.service-card .btn-arrow {
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-card:hover .btn-arrow,
.service-card:focus-visible .btn-arrow {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 26px rgba(0,0,0,.5);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { position: relative; }
.footer-top-wrap {
  position: relative;
  background: var(--color-white);
  overflow: hidden;
}
/* Pan diagonal orange derrière le logo, sur fond blanc — plutôt qu'un
   fond orange plein sur toute la largeur comme dans la première version.
   Vérifié au pixel sur la référence : le pan est ÉTROIT en haut et
   s'élargit légèrement vers le bas (pas l'inverse). Largeur calée sur
   la colonne du logo (col-lg-5) avec une marge de sécurité, pour ne
   jamais passer sous le texte de la colonne suivante. */
.footer-wedge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40%;
  min-width: 300px;
  background: var(--color-gold);
  clip-path: polygon(0 0, 87% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.footer-top {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 50px 24px 40px;
}
.footer-logo img { width: 190px; }
.footer-top h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  color: var(--color-black);
  font-size: 17px;
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.footer-top ul { list-style: none; margin: 0; padding: 0; }
.footer-top li { margin-bottom: 6px; font-size: 18px; }
.footer-top ul a { color: inherit; }
.footer-top ul a:hover { text-decoration: underline; }

/* Même or que le pan diagonal du dessus (.footer-wedge) : dans le PSD,
   la carte n'est qu'une silhouette légèrement plus foncée SUR ce même
   fond, pas un bloc d'une autre couleur — sinon on voit une jointure.
   La vraie carte du monde (World_Map_Blank.svg, recolorée en CSS-gold
   foncé) remplace le placeholder. Le ratio largeur/hauteur du bloc est
   fixé (aspect-ratio) et l'image reste en object-fit:cover avec un
   object-position calé sur l'Europe : ainsi le repère "Belgique" tombe
   toujours au même endroit du bandeau, quelle que soit la largeur de
   l'écran (pas de recalcul possible avec des % seuls dès qu'il y a un
   recadrage object-fit). */
.footer-map {
  position: relative;
  aspect-ratio: 1600 / 280;
  /* Ne PAS combiner min-height avec aspect-ratio ici : sur un bloc en
     largeur auto, dès que min-height force une hauteur, le navigateur
     recalcule la largeur à partir du ratio (largeur = hauteur × ratio)
     et le bloc déborde de son conteneur. La hauteur minimale pour les
     petits écrans est gérée séparément dans le media query mobile. */
  background: var(--color-gold);
}
.footer-map .ph { position: absolute; inset: 0; background: transparent; overflow: hidden; }
/* Zoom sur l'image pour que l'Europe/l'Afrique occupent l'essentiel du
   bandeau (comme dans la maquette), au lieu du planisphère complet avec
   son contour ovale visible. */
.footer-map .ph img { object-position: 46% 15%; transform: scale(1.7); }

/* Le repère est un groupe unique (pointeur + étiquette) positionné une
   seule fois : l'étiquette est accrochée juste sous la pointe, son bord
   droit aligné sur elle — comme dans la maquette — au lieu de deux
   éléments positionnés indépendamment.
   left/top ci-dessous sont la coordonnée EXACTE de la Belgique (calculée
   à partir de la position réelle de la Belgique dans world-map.svg, puis
   projetée à travers le même object-fit:cover + object-position +
   transform:scale() que l'image de fond) : la pointe du pin est calée
   dessus directement (voir .footer-map-pin plus bas), pas via un décalage
   en pixels fixes qui dérivait selon la largeur d'écran. */
.footer-map-marker {
  position: absolute;
  left: 47.8%; top: 38%;
  width: 34px;
}
/* Le repère du PSD n'est pas un triangle isocèle classique : c'est une
   forme "fanion" asymétrique (un bord quasi droit à gauche, une pointe
   décalée) — reproduite ici au pixel près par un clip-path à 3 points
   plutôt qu'une bordure CSS symétrique.
   Positionné en absolute (et non plus en flux normal) et remonté de sa
   propre hauteur : ainsi c'est la POINTE (58% 100% du clip-path) qui
   tombe exactement sur .footer-map-marker (left/top ci-dessus), quelle
   que soit la taille réelle du bandeau — plus de décalage fixe en px qui
   dérivait avec la hauteur du conteneur. */
.footer-map-pin {
  position: absolute;
  left: -20px;
  top: -50px;
  width: 34px;
  height: 50px;
  background: var(--color-red);
  clip-path: polygon(6% 0%, 100% 19%, 58% 100%);
}
.footer-map-tag {
  position: absolute;
  top: 8px;
  right: 10px;
  width: max-content;
  max-width: 320px;
  font-size: 18px;
}
/* Étiquette en "escalier" : chaque ligne est son propre bloc, large
   uniquement de son propre texte — comme dans la maquette, où la 2e ligne
   ("dans le monde entier"), plus courte, forme une marche sous la 1ère
   plutôt qu'un rectangle plein classique. */
.footer-map-tag span {
  display: block;
  width: max-content;
  max-width: 320px;
  background: var(--color-red);
  color: var(--color-gold);
  padding: 8px 16px;
  font-weight: 700;
}
.footer-map-tag span:first-child { padding-bottom: 4px; }
.footer-map-tag span:last-child { padding-top: 0; margin-top: 1px; }

.footer-bottom {
  background: var(--color-black);
  color: #ccc;
  text-align: center;
  font-size: 16px;
  padding: 16px 24px;
}
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-bottom span { margin: 0 10px; }

/* =========================================================
   PAGE SERVICE DETAIL
   ========================================================= */
.page-hero {
  text-align: center;
  padding: 0 24px 30px;
}
.page-hero .diamond {
  width: min(420px, 60vw);
  height: min(190px, 27vw);
  margin: 0 auto 34px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--color-black);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.page-hero .diamond .ph { width: 100%; height: 100%; }
.page-hero h1 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 26px; font-weight: 900; }
.page-hero .quote { max-width: 640px; margin: 0 auto; color: var(--color-grey-dark); }

.keywords-title {
  text-align: center;
  font-weight: 900;
  font-size: 24px;
  margin: 50px 0 30px;
  letter-spacing: .1em;
}
.tag-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 0 24px;
}
.tag-pill {
  background: var(--color-grey-dark);
  color: #fff;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .04em;
  padding: 10px 22px;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.detail-solutions {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px 70px;
}
.detail-grid { row-gap: 40px; }
.detail-item h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 10px;
}
.detail-item p { font-size: 18px; }

/* Un seul ruban avec une pointe en creux à gauche (comme une flèche vers
   la droite), fond rouge plein — pas un bloc + bouton séparé comme avant. */
.work-cta {
  position: relative;
  background: var(--color-red);
  padding: 26px 30px 26px 60px;
  max-width: 360px;
  margin: 10px 0 0 auto;
  clip-path: polygon(0 50%, 13% 0, 100% 0, 100% 100%, 13% 100%);
}
.work-cta p.lead {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 900;
  color: var(--color-gold);
  font-size: 17px;
  letter-spacing: .14rem;
  margin-bottom: 10px;
}
.work-cta a.btn-arrow {
  display: block;
  background: none;
  color: #63191a;
  -webkit-text-stroke: 0;
  clip-path: none;
  padding: 0;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .14rem;
}

/* =========================================================
   PAGES LÉGALES (mentions légales / conditions d'utilisation)
   ========================================================= */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 90px;
}
.legal-page .section-title { text-align: left; font-size: 34px; margin-bottom: 36px; }
.legal-page h2 {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  font-size: 20px;
  margin: 34px 0 12px;
}
.legal-page p, .legal-page li { font-size: 16px; line-height: 1.7; color: #333; }
.legal-page ul { padding-left: 22px; margin: 0 0 14px; }
.legal-page p { margin: 0 0 14px; }
.legal-page a { color: var(--color-red-dark); text-decoration: underline; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; padding: 16px; }
  .nav a.cta { clip-path: none; flex: 1 1 100%; align-items: center; text-align: center; padding: 12px; }
  /* Rangées empilées en une colonne, mais on garde une petite diagonale
     (plus discrète qu'en desktop) pour ne pas perdre tout le style —
     un simple bord plat rendait la section beaucoup trop "plate". */
  .sol-row { grid-template-columns: 1fr; margin-top: 0 !important; }
  .sol-row:first-child { clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 calc(100% - 20px)); }
  .sol-row:last-child { clip-path: polygon(0 0, 100% 20px, 100% calc(100% - 20px), 0 100%); margin-top: -20px !important; }
  .sol-row .ph { height: 260px; }
  /* La mosaïque étant désormais une image (voir plus haut), les diagonales
     et le duotone restent intacts sur mobile automatiquement — seule la
     hauteur du bandeau est réajustée pour ce format plus étroit. */
  /* Même logique qu'en desktop : hauteur fixe, le fond reste centré et
     coupe à gauche/droite (cover) sur les écrans étroits, plutôt qu'une
     hauteur qui rétrécit avec la largeur. */
  /* Toujours centré, sans fond : juste une taille plus contenue pour
     rester lisible sur un bandeau plus court. */
  .hero-logo img {  }
  .hero-logo--service img { }
  /* Le grand pan diagonal plein écran ne fonctionne plus une fois le logo
     et le texte empilés en colonne : on garde quand même un bandeau
     diagonal, mais fin et en haut du bloc, plutôt que de tout aplatir en
     un simple fond uni. */
  .footer-wedge {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; min-width: 0;
    height: 90px;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  }
  /* On GARDE un aspect-ratio (juste plus "carré" que sur grand écran) au
     lieu de passer à une hauteur fixe : avec un object-fit:cover, le
     recadrage ne dépend alors QUE de ce ratio (plus de la largeur), donc
     le repère "Belgique" reste calé au même endroit à TOUTES les largeurs
     mobiles/tablette (320px à 900px), au lieu de dériver au fil de la
     largeur comme avec une hauteur fixe. */
  .footer-map { aspect-ratio: 2.8; height: auto; }
  .footer-map .ph img { object-position: 50% -8%; transform: scale(1.7); }
  /* Le recadrage (object-position/scale) diffère du desktop, donc la
     projection de la coordonnée "Belgique" retombe à un top% différent —
     recalculé pour ce recadrage mobile (même formule que le desktop). */
  .footer-map-marker { left: 47.8%; top: 35.8%; }
  .footer-map-tag { right: auto; left: -80px; max-width: 200px; }
  .footer-map-tag span { width: 100%; max-width: 200px; white-space: normal; }
}