/* ============================================================================
   SECTIONS.CSS — SECTIONS GÉNÉRIQUES, GRILLES, CARTES, COMPOSANTS
   ============================================================================
   4e fichier du CSS découpé du site (voir l'ordre complet en tête de
   base.css). Dépend des variables de base.css : à charger après lui.

   C'est le plus gros fichier du découpage, et c'est normal : ce sont les
   briques réutilisées PAR TOUTES LES PAGES DE CONTENU du site (accueil,
   pages A2S Supply, pages CDEX). Il n'y a pas de CSS "propre" à
   produits.html, services.html ou mentions-legales.html : ces pages
   composent simplement ces mêmes briques (.hero, .section, .card, .split,
   .steps...) dans un ordre différent. Les styliser ici, une seule fois,
   évite d'avoir à répéter les mêmes règles dans plusieurs fichiers.
   ========================================================================== */

/* ----------------------------------------------------------------------
   SECTIONS / TITRES DE SECTION / GRILLES
   ---------------------------------------------------------------------- */
.section { padding-block: var(--sp-7); }
.section--alt { background: var(--c-paper-alt); }
.section--navy { background: var(--c-navy-900); color: var(--c-white); }
.section--navy h2, .section--navy h3 { color: var(--c-white); }
.section--navy p { color: rgba(255,255,255,0.72); }
.section--tight { padding-block: var(--sp-5); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-5);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--fs-lead); margin-top: var(--sp-2); }

/* Grille "responsive" générique : s'adapte automatiquement au nombre de colonnes
   possibles selon la largeur de l'écran, sans media query nécessaire */
.grid {
  display: grid;
  gap: var(--sp-4);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ----------------------------------------------------------------------
   CARTE "UNIVERS" (page Groupe, pour présenter A2S / CDEX)
   ---------------------------------------------------------------------- */
.entity-card {
  position: relative;
  border-radius: var(--radius-l);
  padding: var(--sp-5);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--c-white);
  overflow: hidden;
  box-shadow: var(--ombre-m);
  transition: transform var(--transition), box-shadow var(--transition);
}
.entity-card:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }
.entity-card--a2s { background: linear-gradient(150deg, var(--c-navy-900), #3a2a10 130%); }
.entity-card--cdex { background: linear-gradient(150deg, var(--c-navy-900), #4a220f 130%); }
.entity-card__num {
  font-family: var(--f-titres);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  opacity: 0.65;
  margin-bottom: var(--sp-3);
}
.entity-card h3 {
  color: var(--c-white);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  margin-bottom: var(--sp-1);
}
.entity-card p { color: rgba(255,255,255,0.75); margin-bottom: var(--sp-3); }
.entity-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.entity-card--a2s .btn--primary { background: var(--c-a2s-500); }
.entity-card--a2s .btn--primary:hover { background: var(--c-a2s-600); }
.entity-card--cdex .btn--primary { background: var(--c-cdex-500); }
.entity-card--cdex .btn--primary:hover { background: var(--c-cdex-600); }

/* --- Photo en fond de carte "univers" (remplace le glow abstrait) ---
   .entity-card (le parent, plus haut) a déjà "border-radius: var(--radius-l)"
   ET "overflow: hidden" : c'est CE parent qui arrondit visuellement la
   photo en rognant tout ce qui dépasse de son cadre. .entity-card__media
   n'a donc pas besoin de son propre border-radius, juste de remplir
   exactement la carte ("inset: 0" = collé aux 4 bords du parent) pour que
   le rognage du parent s'applique pile sur les bords de l'image. */
.entity-card__media { position: absolute; inset: 0; z-index: 0; }
/* object-fit: cover = la photo remplit tout le cadre sans se déformer et
   sans "trous" (elle est recadrée si son ratio ne correspond pas à celui
   de la carte), quelle que soit sa taille ou son orientation d'origine. */
.entity-card__media img { width: 100%; height: 100%; object-fit: cover; }
.entity-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,31,60,.2) 0%, rgba(10,31,60,.55) 45%, rgba(10,31,60,.95) 100%);
}
.entity-card__content { position: relative; z-index: 1; }

/* ----------------------------------------------------------------------
   CARTE SIMPLE (valeurs, services, produits, secteurs)
   ---------------------------------------------------------------------- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  padding: var(--sp-4);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-m);
  border-color: transparent;
}
.card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-s);
  background: var(--accent-light);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 0.5rem; }
.card p { font-size: 0.95rem; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--sp-2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-dark);
}
.card__link svg { width: 1em; height: 1em; transition: transform var(--transition); }
.card:hover .card__link svg { transform: translateX(4px); }

/* --- Variante "photo" de carte (produits / services illustrés par une image réelle) ---
   Structure attendue en HTML :
     <div class="card card--photo">
       <div class="card__media"><img src="..." alt=""></div>
       <div class="card__body"><h3>...</h3><p>...</p></div>
     </div>
   .card (règle au-dessus) porte déjà "border-radius: var(--radius-m)".
   Comme .card--photo passe son "padding" à 0 et ajoute "overflow: hidden"
   SUR CE MÊME ÉLÉMENT .card, c'est lui qui rogne la photo à ses coins
   arrondis : la photo elle-même n'a pas besoin de border-radius. */
.card--photo { padding: 0; overflow: hidden; }
/* aspect-ratio fige une hauteur d'image PROPORTIONNELLE à la largeur de la
   carte (4/3 = format "presque carré", classique pour une vignette produit).
   Sans cette ligne, chaque photo garderait sa hauteur naturelle et les
   cartes d'une même grille auraient des tailles différentes et mal
   alignées — c'est ce qui donnait des vignettes "à taille aléatoire". */
.card--photo .card__media { aspect-ratio: 4 / 3; overflow: hidden; }
/* object-fit: cover = quelle que soit la taille/orientation du fichier
   d'origine, la photo remplit exactement ce cadre 4/3 sans se déformer
   (elle est recadrée proprement, jamais étirée). */
.card--photo .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.card--photo:hover .card__media img { transform: scale(1.06); }
.card--photo .card__body { padding: var(--sp-4); }
.card--photo .card__body h3 { margin-bottom: 0.5rem; }
.card--photo .card__body p { font-size: 0.95rem; }

/* ----------------------------------------------------------------------
   BLOC "CONTENU ALTERNÉ" (image/visuel d'un côté, texte de l'autre)
   On alterne .split--reverse une section sur deux pour créer un rythme
   de lecture agréable.
   ---------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.split--reverse .split__visual { order: 2; }
.split__visual {
  background: var(--c-navy-900);
  border-radius: var(--radius-l);
  min-height: 360px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split__visual svg { width: 55%; height: auto; opacity: 0.9; }
/* --- Variante "photo" : une image réelle en plein cadre plutôt qu'un pictogramme ---
   .split__visual (juste au-dessus) porte déjà "border-radius" + "overflow:
   hidden" + "min-height: 360px" : c'est ce parent qui donne au bloc sa
   taille et ses coins arrondis. L'image n'a donc qu'à se caler sur les 4
   bords ("inset: 0") avec object-fit: cover pour remplir tout le cadre
   sans se déformer, quelle que soit sa taille/orientation d'origine. */
.split__visual--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__list { margin-top: var(--sp-3); display: grid; gap: 0.9rem; }
.split__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-weight: 500;
  color: var(--c-ink);
}
.split__list svg {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-dark); margin-top: 2px;
}

/* ----------------------------------------------------------------------
   COMPOSANTS SPÉCIFIQUES (chiffres clés, étapes, chips, citation, CTA...)
   ---------------------------------------------------------------------- */

/* --- Bandeau "chiffres clés" avec compteurs animés --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-4);
  text-align: center;
}
.stat__num {
  font-family: var(--f-titres);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3.2rem);
  color: var(--accent);
  line-height: 1;
}
.stat__label {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* --- Étapes numérotées (processus) --- */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-3);
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--c-white);
  border: 1px solid var(--c-line);
}
.step__num {
  counter-increment: step;
  font-family: var(--f-titres);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--accent);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.step__num::before { content: counter(step, decimal-leading-zero); }

/* --- Bande logos / secteurs clients (chips) --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.chip {
  padding: 0.6em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-navy-900);
}

/* --- Citation / témoignage --- */
.quote {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--radius-l);
  background: var(--c-white);
  border-left: 4px solid var(--accent);
  box-shadow: var(--ombre-s);
}
.quote p { font-size: var(--fs-lead); color: var(--c-navy-900); font-style: italic; }
.quote__author { margin-top: var(--sp-3); font-weight: 700; color: var(--accent-dark); font-style: normal; }

/* --- Bandeau CTA plein écran --- */
.cta-band {
  border-radius: var(--radius-l);
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(135deg, var(--c-navy-900), var(--c-navy-700));
  color: var(--c-white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.cta-band h2 { color: var(--c-white); max-width: 20ch; }

/* --- Carte "passerelle vers l'autre entité" (renforce la complémentarité) --- */
.cross-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-m);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
}
.cross-card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-s);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cross-card__icon svg { width: 22px; height: 22px; color: var(--c-white); }

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .split, .split--reverse .split__visual { grid-template-columns: 1fr; }
  .split { gap: var(--sp-4); }
  .split__visual { order: -1; min-height: 260px; }
}

@media (max-width: 640px) {
  .section { padding-block: var(--sp-6); }
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .cross-card { flex-direction: column; align-items: flex-start; }
  .cross-card a.btn { width: 100%; justify-content: center; }
}