/* Start custom CSS *//* Formations (page 338) — section « Six thématiques » et photos de « Mon approche ».
   Tous les styles des cartes sont ici (aucun style local) : grille 151ae231, en-tête 24db640a.
   Structure d'une carte : article > [photo] + [contenu > titre H3 + dévoilé > intérieur > accroche + bouton]. */

/* En-tête de section */
body.elementor-page-338 [data-id="24db640a"] { max-width: 760px; padding: 0; margin: 0 0 40px; display: flex; flex-direction: column; gap: 14px; }
body.elementor-page-338 [data-id="24db640a"] > * { margin: 0; }

/* Grille : 3 colonnes, 2 sur tablette, 1 sur mobile */
body.elementor-page-338 [data-id="151ae231"] { padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1199px) { body.elementor-page-338 [data-id="151ae231"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 767px) { body.elementor-page-338 [data-id="151ae231"] { grid-template-columns: minmax(0, 1fr); } body.elementor-page-338 [data-id="24db640a"] { margin-bottom: 32px; } }

/* Carte, état de base (tactile, tablette, mobile) : photo au-dessus, texte dessous toujours visible */
body.elementor-page-338 [data-id="151ae231"] > article { position: relative; min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background-color: #123D28; }
body.elementor-page-338 [data-id="151ae231"] > article > :first-child { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
body.elementor-page-338 [data-id="151ae231"] > article > :nth-child(2) { position: static; min-width: 0; padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
body.elementor-page-338 [data-id="151ae231"] h3 { margin: 0; font-family: var(--es-police-titre); font-weight: 700; font-size: 22px; line-height: 1.2; color: #FFFFFF; }
body.elementor-page-338 [data-id="151ae231"] > article > :nth-child(2) > :nth-child(2) { position: static; min-width: 0; padding: 0; display: grid; grid-template-rows: 1fr; }
body.elementor-page-338 [data-id="151ae231"] > article > :nth-child(2) > :nth-child(2) > div { position: static; min-width: 0; min-height: 0; overflow: hidden; padding: 0 6px 8px; margin: 0 -6px -8px; display: flex; flex-direction: column; gap: 16px; }
body.elementor-page-338 [data-id="151ae231"] article p { margin: 12px 0 0; font-family: var(--es-police-texte); font-weight: 400; font-size: 16px; line-height: 1.5; color: #E3EFE7; }
@media (max-width: 767px) { body.elementor-page-338 [data-id="151ae231"] h3 { font-size: 20px; } body.elementor-page-338 [data-id="151ae231"] > article > :nth-child(2) { padding: 18px 20px 22px; } }

/* Bouton « Découvrir l'offre » (lien vers la page thématique). Sans lien, Elementor le rend en <button> : il est alors masqué. */
body.elementor-page-338 [data-id="151ae231"] button.e-button-base { display: none !important; }
body.elementor-page-338 [data-id="151ae231"] a.e-button-base { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 8px; background-color: #F5AD1F; color: #15241B; font-family: var(--es-police-texte); font-weight: 600; font-size: 16px; line-height: 1.3; text-decoration: none; transition: background-color 150ms; }
body.elementor-page-338 [data-id="151ae231"] a.e-button-base:hover { background-color: #E39A0C; color: #15241B; }
body.elementor-page-338 [data-id="151ae231"] a.e-button-base:focus-visible { outline: 3px solid #F5AD1F; outline-offset: 3px; }
body.elementor-page-338 [data-id="151ae231"] a.e-button-base::after { content: "→"; content: "→" / ""; display: inline-block; transition: transform 180ms ease-out; }
body.elementor-page-338 [data-id="151ae231"] > article:hover a.e-button-base::after, body.elementor-page-338 [data-id="151ae231"] a.e-button-base:focus-visible::after { transform: translateX(3px); }
body.elementor-page-338 [data-id="151ae231"] .e-button-base span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { body.elementor-page-338 [data-id="151ae231"] a.e-button-base { align-self: stretch; justify-content: center; } }

/* Carte entièrement cliquable : le lien du bouton s'étend à toute la carte (lien étiré). Un seul lien et un seul arrêt clavier par carte. */
body.elementor-page-338 [data-id="151ae231"] > article:has(a.e-button-base) { cursor: pointer; }
body.elementor-page-338 [data-id="151ae231"] a.e-button-base::before { content: ""; position: absolute; inset: 0; z-index: 2; }
body.elementor-page-338 [data-id="151ae231"] > article:has(a.e-button-base:focus-visible) { outline: 3px solid #123D28; outline-offset: 3px; }

/* Ordinateur avec souris : photo pleine carte, titre sur dégradé ; au survol ou au focus, voile + accroche + bouton */
@media (hover: hover) and (min-width: 1200px) {
  body.elementor-page-338 [data-id="151ae231"] > article { display: block; aspect-ratio: 5 / 4; }
  body.elementor-page-338 [data-id="151ae231"] > article > :first-child { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  body.elementor-page-338 [data-id="151ae231"] > article > :nth-child(2) { position: absolute; inset: 0; padding: 24px; justify-content: flex-end; background-color: rgba(18, 61, 40, 0); background-image: linear-gradient(to top, rgba(18, 61, 40, 0.92) 0%, rgba(18, 61, 40, 0.75) 45%, rgba(18, 61, 40, 0) 75%); transition: background-color 200ms ease-out; }
  body.elementor-page-338 [data-id="151ae231"] h3 { font-size: 24px; }
  body.elementor-page-338 [data-id="151ae231"] article p { font-size: 15px; }
  body.elementor-page-338 [data-id="151ae231"] > article > :nth-child(2) > :nth-child(2) { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 200ms ease-out, opacity 200ms ease-out; }
  body.elementor-page-338 [data-id="151ae231"] > article:hover > :nth-child(2), body.elementor-page-338 [data-id="151ae231"] > article:focus-within > :nth-child(2) { background-color: rgba(18, 61, 40, 0.86); }
  body.elementor-page-338 [data-id="151ae231"] > article:hover > :nth-child(2) > :nth-child(2), body.elementor-page-338 [data-id="151ae231"] > article:focus-within > :nth-child(2) > :nth-child(2) { grid-template-rows: 1fr; opacity: 1; }
}

/* Mouvement réduit : aucune transition */
@media (prefers-reduced-motion: reduce) {
  body.elementor-page-338 [data-id="151ae231"] *, body.elementor-page-338 [data-id="151ae231"] *::before, body.elementor-page-338 [data-id="151ae231"] *::after { transition: none !important; }
  body.elementor-page-338 [data-id="151ae231"] a.e-button-base::after { transform: none !important; }
}

/* Mon approche : bande de deux photos du formateur (74cd250d), cadre Réplique sur la grande photo */
body.elementor-page-338 [data-id="74cd250d"] { padding: 0; margin: 12px 0 8px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
body.elementor-page-338 [data-id="5e069155"] { position: relative; min-width: 0; padding: 0; margin: 0 28px 28px 0; }
body.elementor-page-338 [data-id="7f898e8d"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; border-radius: 16px; box-shadow: none; }
body.elementor-page-338 [data-id="5abe04e2"] { position: absolute; right: -28px; bottom: -28px; width: 56px; height: 56px; min-width: 0; padding: 0; border-radius: 50%; background-color: #F5AD1F; box-shadow: 0 0 0 12px #FFFFFF; }
body.elementor-page-338 [data-id="35e11f99"] { display: block; width: 100%; height: calc(100% - 28px); min-height: 0; object-fit: cover; object-position: 35% 55%; border-radius: 16px; box-shadow: none; }
@media (max-width: 767px) {
  body.elementor-page-338 [data-id="74cd250d"] { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.elementor-page-338 [data-id="5e069155"] { margin: 0 22px 22px 0; }
  body.elementor-page-338 [data-id="5abe04e2"] { width: 44px; height: 44px; right: -22px; bottom: -22px; box-shadow: 0 0 0 10px #FFFFFF; }
  body.elementor-page-338 [data-id="35e11f99"] { height: auto; aspect-ratio: 16 / 10; }
}/* End custom CSS */