/* Home single-page enhancements */
html { scroll-behavior: smooth; }
img  { max-width: 100%; height: auto; display: block; }

/* ====== CENTRAGE GLOBAL SUR LA HOME ====== */
.home { text-align: center; }

/* Titres & paragraphes hors cartes : centrés */
.home h1,
.home section > h2,
.home section > p,
.home .lead,
.home .section-intro { 
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 70ch;
}

/* Hero */
.home .home-hero { padding-top: 72px; }
.home .lead      { margin: 0.5rem auto 1rem; }

/* CTA group */
.hero-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Sections */
.home-section { padding-block: clamp(40px, 6vw, 96px); }

/* ====== GRILLES ====== */
.cards { display: grid; gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.cards.three { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cards.four  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cards.equal .card { display: flex; flex-direction: column; }

/* Vision: 3 colonnes ≥992px */
#vision .cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 992px) {
  #vision .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Secteurs: 4→3→2→1 */
#secteurs .cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px)  { #secteurs .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { #secteurs .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #secteurs .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Services: 3→2→1 */
#services .cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 768px)  { #services .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { #services .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ====== EXCEPTION : DANS LES CARTES ======
   - Titres & textes alignés à gauche
   - Paragraphes justifiés (align-left pour la dernière ligne) */
.home .cards .card { 
  text-align: left;
  padding: clamp(12px, 2.2vw, 20px);
  display: flex; 
  flex-direction: column;
}
.home .cards .card h3 { 
  margin: .6rem 0 .4rem; 
  line-height: 1.25; 
  text-align: left;
}
.home .cards .card p {
  margin: 0 0 .4rem;
  text-align: justify;
  max-width: none; /* pas de contrainte 70ch dans les cartes */
}

/* Médias des cartes */
.card .media,
.vision-card__media { display:block; border-radius: 10px; overflow:hidden; }
.card .media { aspect-ratio: 4 / 3; }
.vision-card__media { aspect-ratio: 3 / 4; }
.card .media img,
.vision-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.card__footer { margin-top: auto; }

/* Domain (si utilisé) */
.domain { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.domain-img { width: 100%; display: block; }

/* ====== Ancres (compense la nav fixe) ====== */
section[id] { scroll-margin-top: 72px; }

/* ====== Boutons (outline blanc semi-transparent) ====== */
:root { --azean-green-700: #1c3d38; --btn-radius: 8px; }
.button, .btn {
  --btn-alpha: 0.12;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,var(--btn-alpha));
  color: #fff; border: 1.5px solid #fff; border-radius: var(--btn-radius);
  padding: .6rem 1rem; line-height: 1.2; text-decoration:none; font-weight: 700;
}
.button:hover, .btn:hover { background: rgba(255,255,255,0.18); }
.button:focus-visible, .btn:focus-visible { outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }

/* Variante inverse (si fond clair) */
.btn--inverse {
  background: transparent;
  color: var(--azean-green-700);
  border: 1.5px solid var(--azean-green-700);
}
.btn--inverse:hover { background: color-mix(in srgb, var(--azean-green-700) 10%, transparent); }
.btn--inverse:focus-visible { outline: 3px solid color-mix(in srgb, var(--azean-green-700) 50%, white); outline-offset: 2px; }

/* Nav active (complément styles.css) */
.nav .nav-links a.active { text-decoration: underline; text-underline-offset: 6px; }

/* ====== Footer LinkedIn : icône seule ====== */
.footer-social__link { display:inline-flex; align-items:center; text-decoration:none; }
.footer-social__link .icon--linkedin { display:block; opacity:.9; transition:transform .15s, opacity .15s; }
.footer-social__link:hover .icon--linkedin { opacity:1; transform: translateY(-1px); }

/* ====== Sécurités layout ====== */
@media (max-width: 768px) { .home-section { padding: 40px 0; } }

/* Anti-chevauchement */
.cards, .cards--sectors, .cards--services { display: grid; gap: clamp(16px, 2vw, 28px); }
.cards--sectors { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cards--services { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:1199px){ .cards--sectors{grid-template-columns:repeat(3,1fr)} .cards--services{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .cards--sectors,.cards--services{grid-template-columns:1fr} }
.card, [class*="card"] { height:auto !important; position:static !important; min-height:0; }

/* Débloquer tout blocage de scroll éventuel (héritage) */
html, body { height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden; }

/* ======================= */
/*  IMAGES BORD À BORD     */
/* ======================= */

/* Utilise une variable de padding pour calculer les marges négatives */
.home .cards .card {
  --card-pad: clamp(12px, 2.2vw, 20px);
  padding: var(--card-pad);
}

/* Vision (portrait 3/4) — l’image déborde pour coller aux bords de la carte */
.home .cards .card .vision-card__media {
  display: block;
  width: calc(100% + (var(--card-pad) * 2));
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) .9rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px 12px 0 0; /* mêmes coins que la carte */
}
.home .cards .card .vision-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Secteurs / Services (paysage 4/3) — idem, bord à bord */
.home .cards .card .media {
  display: block;
  width: calc(100% + (var(--card-pad) * 2));
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) .9rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.home .cards .card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Petite douceur au survol (optionnel) */
.home .cards .card .media:hover,
.home .cards .card .vision-card__media:hover {
  filter: brightness(1.03);
  transform: translateZ(0); /* évite flou subpixel sur certains browsers */
}

/* Empêche qu’une règle globale limite le rayon ou change la largeur */
.home .cards .card picture,
.home .cards .card .media {
  max-width: none !important;
}

/* Sécurité : les paragraphes des cartes restent justifiés + alignés à gauche (déjà configuré) */
.home .cards .card p {
  text-align: justify;
  text-align-last: left;
}