/* expertise.css : page_css de /expertise (refonte "Calques", octobre 2026).
   Composants communs dans site.css ; ici seulement la mise en page propre a la page. */

/* Posture : texte a gauche, deux cartes empilees a droite */
.xp-amont { display: grid; gap: 32px; margin-top: clamp(32px, 4vw, 52px); }
.xp-amont-text h3 { margin-top: 0; font-family: var(--font); font-weight: 700; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); }
.xp-amont-text p { max-width: 62ch; }
.xp-amont-text p:last-child { margin-bottom: 0; }
.xp-amont-cards { display: grid; gap: 16px; align-content: start; }
.xp-amont-cards .card p { margin-bottom: 0.6em; }
.xp-amont-cards .card p:first-of-type { font-weight: 500; color: var(--navy); }
.xp-amont-cards .card p:last-child { margin-bottom: 0; color: var(--text-muted); }
@media (min-width: 900px) {
  .xp-amont { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; }
}

/* Bio : portrait encadre, puis le texte */
.xp-bio { display: grid; gap: 32px; align-items: center; }
.xp-bio .profile-media { margin: 0; max-width: 360px; }
.xp-bio-text > p:not(.a) { margin-top: 24px; max-width: 64ch; }
.xp-bio-text > p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .xp-bio { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 64px; }
  .xp-bio .profile-media { max-width: none; }
}
.xp-defends { margin: clamp(48px, 6vw, 80px) 0 28px; }
/* Principes : intitule en gras dans le fil du texte (contenu d'origine conserve) */
.xp-principles li { color: var(--text-muted); max-width: 40ch; }
.xp-principles strong { color: var(--navy); font-weight: 600; }

/* Certifications : deux groupes de visas */
.cert-group + .cert-group { margin-top: clamp(40px, 5vw, 64px); }
.cert-intro { display: grid; gap: 8px; margin-bottom: 22px; }
.cert-intro h3 { margin: 0; font-size: 1.1875rem; }
.cert-intro p { margin: 0; max-width: 72ch; color: var(--text-muted); }
@media (min-width: 960px) {
  .cert-intro { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 64px; align-items: baseline; }
}
/* Colonnes explicites : aucune case vide (le fond navy de la grille dessine les filets) */
.cert-visas { grid-template-columns: 1fr; }
.cert-visas p { font-size: 0.9375rem; }
.cert-visas strong { display: inline; margin: 0; font-size: inherit; }
.cert-logos { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.cert-logos img { width: auto; max-width: 140px; }
@media (min-width: 720px) {
  .cert-visas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-visas li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .cert-visas { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
  .cert-visas li:last-child:nth-child(odd) { grid-column: auto; }
  /* Case sans logo : le texte s'aligne sur celui des cases voisines (logo 44px + ecart 18px) */
  .cert-text p { margin-top: 62px; }
}

/* IA : texte et liste a coches, visuel a droite */
.xp-ia { display: grid; gap: 36px; margin-top: clamp(28px, 4vw, 48px); align-items: start; }
.xp-ia-text > p:first-child { color: var(--text); }
.xp-ia .ticks { margin: 0 0 24px; }
.xp-result { max-width: 62ch; }
/* Le bouton sous l'illustration, centre sur elle */
.xp-ia-side .btn-group { margin-top: 28px; justify-content: center; }
.xp-ia-fig { margin: 0; border: 1px solid var(--rule-strong); padding: 8px; background: var(--bg); }
.xp-ia-fig img { width: 100%; height: auto; }
@media (min-width: 960px) {
  .xp-ia { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 64px; }
  .xp-ia-fig { margin-top: 6px; }
}

/* Cartouche de fin */
.xp-cta { margin-top: clamp(48px, 6vw, 80px); }