/* ==========================================================================
   AFRIKAN CAMPUS — home-refonte.css
   AJOUTS NON DESTRUCTIFS pour la HP (index.html), chargé APRÈS home.css.
   Réversible : supprimer ce fichier + son <link> + les blocs HTML ajoutés
   = retour à l'identique de la base claude5. Ne modifie aucune règle existante.
   Préfixe .hpr-* pour tout nouveau composant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 HERO — H1 mis à jour : garantir « Votre transformation IT & IA, » sur la
   1re ligne puis « de la stratégie au delivery. » sur la 2e (exactement 2 lignes).
   Le corps d'origine (3.4rem) faisait déborder la 1re ligne -> léger ajustement
   de taille, isolé à la home (ce fichier n'est chargé que par index.html).
   -------------------------------------------------------------------------- */
.hero-title { font-size: clamp(1.4rem, 2.7vw, 2.3rem); }
@media (max-width: 480px) {
  .hero-title { font-size: 1.35rem; }
}

/* Gabarit de colonnes partagé §1 (hero) ↔ §2 (expertises) : même proportion
   image/contenu, pour une grille cohérente entre les deux sections. */
:root {
  --hpr-col-img: 0.66fr;   /* image ≈40% / contenu ≈60% */
  --hpr-kicker-h: 49px;    /* hauteur du sur-titre (convention projet) : aligne le haut de l'image hero sur le H1 */
}

/* Colonne droite du hero : image (remplace les 4 cartes, parties en §2).
   Cadrage dynamique sobre : coins asymétriques + accent or porté en bas-droite. */
.hero-grid { align-items: stretch; }   /* colonnes même hauteur : image alignée haut/bas avec le texte */
.hpr-hero-media { position: relative; width: 100%; align-self: start; height: auto; aspect-ratio: 9 / 10; max-height: 460px; min-height: 0; margin-top: var(--hpr-kicker-h); }
.hpr-hero-media img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;                          /* épouse la hauteur du bloc texte */
  min-height: 0;                         /* empeche l'image d'imposer sa hauteur naturelle */
  object-fit: cover;
  border-radius: 56px 10px 56px 10px;   /* diagonale discrète */
  background: var(--color-sand);
  box-shadow: var(--shadow-md);
}
/* bloc or décalé en bas-droite, sous l'image (aucune image supplémentaire) */
.hpr-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 56px 10px 56px 10px;
  background: var(--color-secondary);
  transform: translate(18px, 18px);
}

/* --------------------------------------------------------------------------
   §2 « Nos expertises » — image gauche / 4 cartes 2×2 droite, aérées.
   Réutilise le markup .hero-activities / .hero-act (déplacé depuis le hero).
   -------------------------------------------------------------------------- */
.hpr-exp-grid {
  display: grid;
  grid-template-columns: var(--hpr-col-img) 1fr;   /* image ≈40% / cartes ≈60% */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    ".     head"
    "media cards";              /* haut de l'image aligné sur le haut des cartes */
  column-gap: var(--space-4xl);
  row-gap: var(--space-lg);
  align-items: stretch;
}
.hpr-exp-col { display: contents; }              /* head + cartes : items directs de la grille */
.hpr-exp-head { grid-area: head; }
.hpr-exp-head .h2 { margin-bottom: 0; }
.hpr-exp-col .hero-activities { grid-area: cards; }
/* §2 : image à gauche, en miroir du hero (diagonale + accent or inversés). */
.hpr-exp-media { grid-area: media; position: relative; width: 100%; align-self: stretch; height: auto; min-height: 0; }
.hpr-exp-media img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;                          /* épouse la hauteur de la colonne cartes */
  min-height: 0;
  object-fit: cover;
  border-radius: 10px 56px 10px 56px;   /* diagonale inversée */
  background: var(--color-sand);
  box-shadow: var(--shadow-md);
}
/* bloc or décalé en bas-gauche, sous l'image */
.hpr-exp-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px 56px 10px 56px;
  background: var(--color-secondary);
  transform: translate(-18px, 18px);
}
.hpr-exp-col .narrative-eyebrow { margin-bottom: var(--space-sm); }
.hpr-exp-col .h2 { margin-bottom: var(--space-xl); }

/* 4 cartes 2×2 aérées (le hero les compressait) : gap confortable + hauteurs égales */
.hpr-exp-col .hero-activities {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: 0;          /* annule le décalage hero (:has(.hero-activities)) */
  align-items: stretch;
}
.hpr-exp-col .hero-act { height: 100%; }
/* titres de cartes sur UNE seule ligne (desktop) */
.hpr-exp-col .ha-k { white-space: nowrap; }

/* --------------------------------------------------------------------------
   §4 « Pourquoi le Maroc » — 3 repères (contexte national)
   Réutilise la mise en page lp2-edge ; ajoute seulement la liste de repères.
   -------------------------------------------------------------------------- */
.hpr-reperes {
  list-style: none;
  margin: var(--space-xl) auto 0;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: var(--space-md);
  text-align: left;
}
.hpr-reperes li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.hpr-reperes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.hpr-reperes li strong { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   Bandeau logos clients — gris au repos, couleur au survol (desktop seulement)
   -------------------------------------------------------------------------- */
.hpr-logos-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.hpr-logos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-xl) var(--space-2xl);
  align-items: center;
}
.hpr-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}
.hpr-logo img {
  position: absolute;
  max-height: 100%;
  max-width: 78%;
  width: auto;
  object-fit: contain;
}
.hpr-logo-color {
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}
/* survol uniquement sur appareils à pointeur fin (désactivé en mobile) */
@media (hover: hover) {
  .hpr-logo:hover .hpr-logo-gs    { opacity: 0; }
  .hpr-logo:hover .hpr-logo-color { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Responsive (aligné sur les paliers du design system)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hpr-logos-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  /* hero + §2 : 1 colonne, image au-dessus (le hero-grid passe en 1 col à 900) */
  .hpr-exp-grid { grid-template-columns: 1fr; grid-template-rows: none;
                  grid-template-areas: "media" "head" "cards"; gap: var(--space-2xl); }
  .hpr-hero-media { order: -1; margin-top: 0; aspect-ratio: auto; max-height: none; }
  /* empilées : images paysage contenues, jamais dominantes ; coins adoucis, accent or retiré */
  .hpr-hero-media, .hpr-exp-media { height: auto; }
  .hpr-hero-media img,
  .hpr-exp-media img  { height: auto; aspect-ratio: 16 / 10; max-height: 320px; border-radius: 16px; }
  .hpr-hero-media::after,
  .hpr-exp-media::after { display: none; }
}
@media (max-width: 768px) {
  .hpr-logos-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
  /* cartes empilées + titres de cartes lisibles (wrap si besoin) */
  .hpr-exp-col .hero-activities { grid-template-columns: 1fr; }
  .hpr-exp-col .ha-k { white-space: normal; }
}
@media (max-width: 480px) {
  .hpr-logos-grid { grid-template-columns: repeat(2, 1fr); }
}