/* ============================================================================
   LA TRIBU DIGITALE — Page « Nos Formations »
   Grille 2/3 – 1/3, cards claires à illustration.

   Tout est préfixé .ltd- et scopé sous .ltd-formations : aucune collision
   possible avec Bootstrap ou les classes du thème (bgwatergreen, superbord…).

   À personnaliser :
     · § IMAGES (fin de fichier)  → chemin des visuels + cadrage par card
     · § BREAKOUT                 → à activer si la section reste bridée en largeur
   ============================================================================ */

/* ---------- Palette & conteneur ---------- */
.ltd-formations{
	--ltd-teal:#0E7C70;
	--ltd-teal-dark:#0A5D54;
	--ltd-mint:#EAF6F4;
	--ltd-mint-soft:#F4FBFA;
	--ltd-line:#D5E8E4;
	--ltd-ink:#22335C;
	--ltd-body:#4E5F76;
	background:var(--ltd-mint);
	padding:44px 0 52px;
}
.ltd-formations *,
.ltd-formations *::before,
.ltd-formations *::after{box-sizing:border-box;}

/* ---------- BREAKOUT ----------------------------------------------------
   La section prend déjà toute la largeur du conteneur de contenu. Si le
   gabarit du site la bride (contenu centré à 1140 px par ex.), dé-commenter
   le bloc ci-dessous pour la faire déborder sur tout le viewport.
   Attention : sous Windows, 100vw inclut la barre de défilement et peut créer
   un débordement horizontal de ~15 px — ajouter alors overflow-x:hidden au body.

.ltd-formations{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
------------------------------------------------------------------------- */

/* Pleine largeur : seules les marges latérales subsistent. */
.ltd-wrap{width:100%;max-width:none;margin:0;padding:0 clamp(16px,3vw,56px);}

.ltd-intro{
	max-width:740px;
	margin:0 auto 38px;
	text-align:center;
	font-size:1.05rem;
	line-height:1.6;
	color:var(--ltd-ink);
}

/* ---------- Grille 2/3 – 1/3 ---------- */
.ltd-grid{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:40px;
	align-items:start;
}
.ltd-colhead{
	margin:0 0 24px;
	padding:14px 20px;
	text-align:center;
	background:var(--ltd-teal);
	border:1px solid rgba(0,0,0,.35);
	border-radius:12px;
	box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.ltd-colhead h2{
	margin:0;
	color:#fff;
	font-size:1.3rem;
	line-height:1.3;
	font-weight:600;
}

/* Colonne large   : 4 cards par ligne (8 cards = 2 lignes)
   Colonne étroite : 2 cards par ligne (3 cards = 2 lignes, 2 puis 1)
   Les cards font sensiblement la même largeur dans les deux colonnes. */
.ltd-cards{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:18px;
	align-items:stretch;
}
.ltd-col--main .ltd-cards{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ---------- Card ---------- */
.ltd-card{
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border:1px solid var(--ltd-line);
	border-radius:16px;
	overflow:hidden;
	text-decoration:none;
	box-shadow:0 2px 6px rgba(14,124,112,.07);
	transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ltd-card:hover,
.ltd-card:focus-visible{
	transform:translateY(-4px);
	border-color:var(--ltd-teal);
	box-shadow:0 14px 28px rgba(14,124,112,.18);
	text-decoration:none;
}
.ltd-card:focus-visible{outline:3px solid var(--ltd-teal);outline-offset:3px;}

/* ---------- Zone illustration ----------
   Les visuels sont en 16:9 sur fond blanc, sujet centré. On les affiche en 4:3
   avec un léger zoom pour rogner les bords. Réglage par card : --z / --fx / --fy. */
.ltd-card__media{
	position:relative;
	display:block;
	aspect-ratio:4 / 3;
	background-color:#fff;
	background-repeat:no-repeat;
	background-size:auto var(--z,122%);
	background-position:var(--fx,50%) var(--fy,45%);
	border-bottom:1px solid var(--ltd-line);
	transition:transform .45s ease;
}
@supports not (aspect-ratio:4/3){
	.ltd-card__media{height:0;padding-top:75%;}
}
/* Voile vert d'eau très léger : relie les visuels à la charte LTD */
.ltd-card__media::after{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(ellipse at 50% 58%, rgba(14,124,112,.09), rgba(14,124,112,0) 66%),
		linear-gradient(180deg, rgba(14,124,112,.05) 0%, rgba(14,124,112,0) 40%);
	pointer-events:none;
}
.ltd-card:hover .ltd-card__media{transform:scale(1.03);}

/* ---------- Contenu ---------- */
.ltd-card__body{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	padding:17px 19px 19px;
	gap:9px;
}
.ltd-card__title{
	margin:0;
	color:var(--ltd-ink);
	font-size:1.04rem;
	line-height:1.3;
	font-weight:700;
	/* jamais de césure au milieu d'un mot : retour à la ligne entre les mots */
	-webkit-hyphens:manual;
	hyphens:manual;
	word-break:normal;
	overflow-wrap:normal;
}
.ltd-card__text{
	margin:0;
	color:var(--ltd-body);
	font-size:.88rem;
	line-height:1.5;
	-webkit-hyphens:manual;
	hyphens:manual;
	word-break:normal;
	overflow-wrap:normal;
}
/* Ligne d'info concrète, optionnelle (durée, format, financement).
   Markup prêt dans le HTML, en commentaire, à activer card par card. */
.ltd-card__meta{
	margin:0;
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:var(--ltd-teal);
}
.ltd-card__cta{
	margin-top:auto;
	padding-top:13px;
	display:inline-flex;
	align-items:center;
	gap:7px;
	color:var(--ltd-teal);
	font-size:.86rem;
	font-weight:700;
}
.ltd-card__cta svg{width:14px;height:14px;flex:0 0 auto;transition:transform .2s ease;}
.ltd-card:hover .ltd-card__cta svg{transform:translateX(4px);}

/* ---------- Responsive ----------
   Paliers explicites : plus la résolution baisse, moins il y a de cards par
   ligne, donc plus de lignes. Les cards gardent une largeur lisible.

     ≥ 1180 px : 2/3 – 1/3, 4 par ligne | 2 par ligne
     980–1179  : sections empilées, 3 par ligne → 8 = 3 lignes, 3 = 1 ligne
     700–979   : 2 par ligne                    → 8 = 4 lignes, 3 = 2 lignes
     < 700 px  : 1 par ligne                    → 8 = 8 lignes, 3 = 3 lignes   */
@media (max-width:1179px){
	.ltd-grid{grid-template-columns:1fr;gap:34px;}
	.ltd-cards,
	.ltd-col--main .ltd-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:979px){
	.ltd-cards,
	.ltd-col--main .ltd-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:699px){
	.ltd-formations{padding:32px 0 40px;}
	.ltd-cards,
	.ltd-col--main .ltd-cards{grid-template-columns:1fr;gap:16px;}
	.ltd-card__media{aspect-ratio:16 / 9;}
	.ltd-card__title{font-size:1.08rem;}
	.ltd-card__text{font-size:.92rem;}
	.ltd-card__body{padding:16px 18px 18px;}
}
@supports not (aspect-ratio:16/9){
	@media (max-width:699px){.ltd-card__media{padding-top:56.25%;}}
}
@media (prefers-reduced-motion:reduce){
	.ltd-card,.ltd-card__media,.ltd-card__cta svg{transition:none;}
	.ltd-card:hover{transform:none;}
	.ltd-card:hover .ltd-card__media{transform:none;}
}

/* ============================================================================
   § IMAGES
   Seul bloc à adapter : remplacer /images/formations/ par le chemin réel.

   --z  = zoom      (plus la valeur est haute, plus les bords sont rognés)
   --fx = visée horizontale     --fy = visée verticale

   Les 9 premiers visuels ont de larges marges blanches et des débris de
   génération sur les bords : le zoom les recadre. Les deux derniers sont
   cadrés plein bord et n'ont besoin d'aucun zoom.
   ============================================================================ */
.ltd-i-entreprise .ltd-card__media{
	background-image:url('/images/formations/creer-son-entreprise.webp');
	--z:114%; --fx:46%; --fy:48%;
}
.ltd-i-webmarketing .ltd-card__media{
	background-image:url('/images/formations/webmarketing.webp');
	--z:126%; --fx:40%; --fy:48%;
}
.ltd-i-cm .ltd-card__media{
	background-image:url('/images/formations/community-management.webp');
	--z:118%; --fx:45%; --fy:44%;
}
.ltd-i-seo .ltd-card__media{
	background-image:url('/images/formations/referencement-naturel.webp');
	--z:130%; --fx:42%; --fy:46%;
}
.ltd-i-contenu-ia .ltd-card__media{
	background-image:url('/images/formations/contenu-ia.webp');
	--z:138%; --fx:35%; --fy:47%;
}
.ltd-i-copywriting .ltd-card__media{
	background-image:url('/images/formations/copywriting.webp');
	--z:130%; --fx:48%; --fy:44%;
}
.ltd-i-activite-ia .ltd-card__media{
	background-image:url('/images/formations/activite-ia.webp');
	--z:130%; --fx:43%; --fy:40%;
}
.ltd-i-canva .ltd-card__media{
	background-image:url('/images/formations/bootcamp-canva.webp');
	--z:132%; --fx:43%; --fy:41%;
}
.ltd-i-smm .ltd-card__media{
	background-image:url('/images/formations/social-media-manager.webp');
	--z:126%; --fx:43%; --fy:49%;
}
/* Visuels corrigés, cadrés plein bord : pas de zoom nécessaire. */
.ltd-i-tiktok .ltd-card__media{
	background-image:url('/images/formations/social-media-manager-tiktok.webp');
	--z:100%; --fx:50%; --fy:50%;
}
.ltd-i-email .ltd-card__media{
	background-image:url('/images/formations/email-marketing.webp');
	--z:100%; --fx:52%; --fy:46%;
}