/*
 * Refonte 2026 : carte « cas client » à deux faces (recto photo + bandeau, verso citation), partagée par la section
 * « Nos clients » de l'accueil (parts/home/clients.php, rangée en slider) et la page Clients (page-references.php,
 * grille .am-cas--grille). Balisage : parts/cas/carte.php ; retournement et morphing : assets/js/am-cas.js.
 * Extraite d'am-home.css le 22/09/2026 (P9) sans changement de rendu sur l'accueil : sélecteurs .am-home .am-cas__…
 * réécrits .am-cas .am-cas__… (même spécificité), .am-cas étant la section de l'accueil ou la liste de la page Clients.
 * Chargée avant am-home.css (dépendance) : la rangée de l'accueil (largeur, hauteur minimale et écart des cartes,
 * --am-cas-card-w / -h / -gap posées sur .am-cas) reste dans am-home.css.
 * Aucune taille de police en dur : jetons --am-* d'am-refonte.css.
 */

/* Variables de la carte (reprises de .am-cas, am-home.css) */
.am-cas__card {
	--am-cas-verso-pb: 2.5rem; /* bas du verso, repris par le calcul de --am-cas-link-band */
	--am-cas-link-pt: 1.375rem;
	--am-cas-link-lh: 1.5;
	/* Bande du lien « En savoir plus » au bas du verso, que le bouton de bascule laisse libre quand le verso est affiché :
	   bas du verso + respiration du lien + une ligne de lien. Repli : am-cas.js mesure la valeur exacte
	   (--am-cas-link-band posée sur la carte). */
	--am-cas-link-band: calc(var(--am-cas-verso-pb) + var(--am-cas-link-pt) + var(--am-cas-link-lh) * var(--am-fs-body));
}

.am-cas__card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-height: var(--am-cas-card-h, 41.5rem);
	margin: 0;
	border-radius: 3.125rem;
	overflow: hidden;
	isolation: isolate;
}
/* Les deux faces dans la même cellule : la carte prend la hauteur de la plus haute. Les faces reprennent l'arrondi de
   la carte (border-radius: inherit en chaîne) : sinon le filet du verso, carré, était coupé dans les coins. */
.am-cas__faces {
	border-radius: inherit;
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0, 1fr);
}
/* position: relative sur les deux faces : sinon le recto (positionné) passerait devant le verso quel que soit l'ordre du DOM */
.am-cas__face {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: inherit;
}

/* Recto */
.am-cas__face--recto {
	justify-content: flex-end;
	padding: 1.3125rem;
	background-color: var(--am-color-slate);
}
.am-cas .am-cas__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}
.am-cas__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 20.4375rem;
	padding: 1.875rem 2rem 2.25rem 2.6875rem;
	border-radius: 1.875rem;
	background-color: var(--am-color-white);
}
/* Couleur du secteur : choisie par cas (sous-champ tag_color), la même au recto et au verso */
.am-cas .am-cas__card--tag-coral { --am-cas-tag-color: var(--am-color-coral-text); } /* texte sur blanc : corail AA */
.am-cas .am-cas__card--tag-plum { --am-cas-tag-color: var(--am-color-plum); }
.am-cas__tag {
	margin: 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-tag);
	line-height: var(--am-lh-tag);
	font-weight: var(--am-fw-semibold);
	color: var(--am-cas-tag-color, var(--am-color-coral-text));
	text-transform: uppercase;
}
.am-cas__logo {
	display: flex;
	align-items: center;
	height: 4.5rem;
	margin-top: 1.625rem;
}
.am-cas .am-cas__logo-img {
	display: block;
	width: auto;
	max-width: 11rem;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: 0 50%;
}
/* SVG sans dimensions intrinsèques (width="1" height="1" posés par WordPress) */
.am-cas .am-cas__logo-img[src$=".svg"] {
	width: 11rem;
}
.am-cas__panel-text {
	margin: 1.375rem 0 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-tag);
	line-height: 1.25;
	font-weight: var(--am-fw-semibold);
	color: var(--am-color-ink);
}

/*
 * Lien facultatif vers la fiche du client (sous-champ link) : même écriture que le lien des cartes métiers (pas de
 * soulignement au repos, trait tracé de gauche à droite au survol et au focus, décision du 18/09/2026), dans la couleur
 * du secteur de la carte (corail assombri ou prune : AA sur le blanc des deux faces). Posé au bas du verso, sous le logo
 * (ou au bas du bandeau du recto sur une carte sans citation, donc sans verso) : collé en bas par margin-top: auto, pour
 * que la bande laissée libre par le bouton de bascule (--am-cas-link-band) tombe juste.
 */
.am-cas__link {
	align-self: flex-start; /* boîte du lien limitée à son texte : le trait du survol et le contour de focus s'arrêtent avec lui */
	margin: auto 0 0;
	padding-top: var(--am-cas-link-pt); /* respiration minimale avec ce qui précède, même quand la face est pleine */
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body);
	line-height: var(--am-cas-link-lh);
	font-weight: var(--am-fw-semibold);
	color: var(--am-cas-tag-color, var(--am-color-coral-text));
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.05em);
	background-size: 0 1px;
	transition: background-size 0.35s ease-out;
}
.am-cas__link:hover,
.am-cas__link:focus {
	color: var(--am-cas-tag-color, var(--am-color-coral-text));
	text-decoration: none;
	background-size: 100% 1px;
}
.am-cas__link:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: 0; /* le lien inclut sa respiration haute (padding) : un décalage mordrait sur le texte du cas */
	border-radius: 0.125rem;
}
	@media (prefers-reduced-motion: reduce) {
		.am-cas__link { transition: none; }
	}

/* Verso */
.am-cas__face--verso {
	padding: 2.9375rem 3rem var(--am-cas-verso-pb) 4rem;
	border: 1px solid color-mix(in srgb, var(--am-color-slate) 35%, transparent);
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
}
.am-cas__quote {
	display: flex;
	flex-direction: column;
	margin: 0;
}
.am-cas__quote-mark {
	display: block;
	width: 2.875rem;
	height: 2.375rem;
	margin: 2.3125rem 0 0 0.375rem;
	fill: var(--am-color-coral);
}
.am-cas__quote-text {
	margin: 2.9375rem 0 0;
	padding: 0;
	border: 0;
}
.am-cas__quote-text p {
	margin: 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-tag);
	line-height: 1.24;
	font-weight: var(--am-fw-regular);
	color: var(--am-color-ink);
}
.am-cas__author {
	display: flex;
	flex-direction: column;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--am-color-slate);
	font-family: var(--am-font-sans);
}
.am-cas__author-name {
	font-size: calc(1.375rem * var(--am-type-scale));
	line-height: 1.27;
	font-weight: var(--am-fw-semibold);
}
.am-cas__author-role {
	font-size: var(--am-fs-body);
	line-height: 1.55;
	font-weight: var(--am-fw-regular);
}
.am-cas__logo--verso {
	margin-top: 1.75rem;
}

/* Bascule : bouton transparent qui couvre la carte (toucher, clic, clavier) */
.am-cas__toggle {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.am-cas__toggle:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: -0.25rem;
}
/* Carte à verso portant un lien : quand le verso est affiché (survol de la carte, ou carte fixée retournée), le bouton
   s'arrête au-dessus du lien posé au bas du verso, sans quoi le lien, sous le bouton, serait inatteignable à la souris
   comme au toucher et un clic dessus retournerait la carte. Recto affiché : le bouton couvre toute la carte, il n'y a
   rien à cliquer dessous. Le survol étant celui de la carte entière, la souris qui descend sur le lien ne ramène pas
   le recto. Hauteur de la bande : mesurée par am-cas.js (--am-cas-link-band posée sur la carte), à défaut calculée
   en CSS. */
.am-cas__card--verso.am-cas__card--link.is-flipped .am-cas__toggle {
	height: auto; /* hauteur posée par top et bottom : sans cela, height: 100% l'emporterait et le bouton couvrirait le lien */
	bottom: var(--am-cas-link-band);
}
	@media (hover: hover) {
		.am-cas__card--verso.am-cas__card--link:hover .am-cas__toggle {
			height: auto;
			bottom: var(--am-cas-link-band);
		}
	}

/* Verso masqué par l'opacité seulement : il reste dans l'arbre d'accessibilité (lu par les lecteurs d'écran). Tant qu'il
   est masqué il ne capte pas le pointeur (pointer-events), sans quoi il intercepterait, depuis sa cellule de grille posée
   par-dessus le recto, le pointeur destiné au recto (son logo volait le clic).
   Focus clavier : règles :focus-visible réservées au cas sans JS (.is-js posée par am-cas.js) ; avec le JS, le focus passe
   par .is-flipped, pour qu'Entrée ou Espace puissent remettre le recto et qu'aria-pressed suive la face affichée.
   :focus-within sur le verso, sans JS : le lien du verso, s'il prend le focus au clavier, montre la face où il se trouve
   (sinon il serait un piège au tabulation, focalisé derrière une face invisible). Avec le JS, c'est .is-flipped qui s'en
   charge, morphing compris. */
.am-cas__face--verso {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.am-cas__card.is-flipped .am-cas__face--verso,
.am-cas__toggle:not(.is-js) ~ .am-cas__faces .am-cas__face--verso:focus-within,
.am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__face--verso {
	opacity: 1;
	pointer-events: auto;
}
	/* Survol : celui de la CARTE entière, lien compris. Le bouton de bascule couvre la carte, sauf la bande du lien quand
	   le verso est affiché (voir plus haut) : la souris qui descend sur le lien reste sur la carte, le verso reste donc
	   affiché sous le pointeur et le lien reste cliquable. */
	@media (hover: hover) {
		.am-cas__card--verso:hover .am-cas__face--verso {
			opacity: 1;
			pointer-events: auto;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.am-cas__face,
		.am-cas__face--verso,
		.am-cas__card.is-flipped .am-cas__face--verso,
		.am-cas__toggle:not(.is-js) ~ .am-cas__faces .am-cas__face--verso:focus-within,
		.am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__face--verso,
		.am-cas__card--verso:hover .am-cas__face--verso {
			transition: none;
		}
	}


/* Paliers de la carte (repris des paliers de la section, am-home.css) */
	@media screen and (max-width: 1279px) {
		.am-cas__card { --am-cas-verso-pb: var(--am-space-6); }
		.am-cas__face--verso { padding: var(--am-space-7) var(--am-space-6) var(--am-cas-verso-pb); }
		.am-cas__panel { min-height: 0; padding: var(--am-space-6) var(--am-space-5) var(--am-space-6) var(--am-space-6); }
	}
	@media screen and (max-width: 767px) {
		.am-cas__card {
			--am-cas-verso-pb: var(--am-space-5);
			border-radius: var(--am-radius-photo);
		}
		/* Verso resserré : sur une carte étroite, la citation fixait seule la hauteur de la carte (jusqu'à 890 px à 320 px de large) */
		.am-cas__face--verso { padding: var(--am-space-6) var(--am-space-5) var(--am-cas-verso-pb); }
		.am-cas__quote-mark { margin-top: var(--am-space-4); }
		.am-cas__quote-text { margin-top: var(--am-space-4); }
		.am-cas__author { margin-top: var(--am-space-5); padding-top: var(--am-space-4); }
		.am-cas__logo--verso { height: 3.5rem; margin-top: var(--am-space-4); }
	}

/*
 * Pastille « retourner » en haut à droite des cartes qui ont un verso : signale que la carte se retourne (toucher, clic,
 * survol). Décorative : le bouton .am-cas__toggle, qui couvre la carte, porte déjà son libellé pour les lecteurs d'écran.
 * Écrans tactiles : pastille pleine (seul indice, pas de survol). Appareils à survol (Antoine, 18/09/2026) : plus petite et
 * estompée au repos, elle s'affirme et fait un demi-tour quand la carte se retourne (survol, focus clavier, carte fixée).
 */
.am-cas__card--verso .am-cas__toggle::after {
	content: '';
	position: absolute;
	top: var(--am-space-4);
	right: var(--am-space-4);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--am-color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151D2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E") no-repeat 50% 50% / 1.25rem;
	box-shadow: 0 0.125rem 0.5rem color-mix(in srgb, var(--am-color-ink) 20%, transparent);
}
	@media (hover: hover) {
		.am-cas__card--verso .am-cas__toggle::after {
			width: 2rem;
			height: 2rem;
			background-size: 1rem;
			opacity: 0.7;
			transition: opacity var(--am-transition) ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
		}
		.am-cas__card--verso:hover .am-cas__toggle::after,
		.am-cas__card--verso.is-flipped .am-cas__toggle::after,
		.am-cas__toggle:focus-visible::after {
			opacity: 1;
			transform: rotate(180deg);
		}
	}
	@media (hover: hover) and (prefers-reduced-motion: reduce) {
		.am-cas__card--verso .am-cas__toggle::after {
			transition: opacity var(--am-transition) ease;
		}
		.am-cas__card--verso:hover .am-cas__toggle::after,
		.am-cas__card--verso.is-flipped .am-cas__toggle::after,
		.am-cas__toggle:focus-visible::after {
			transform: none;
		}
	}

/*******************
 7 bis. cas clients : bascule « morphing »
*******************/

/*
 * Au survol (appareils à survol), au focus clavier du bouton de la carte ou carte fixée retournée (.is-flipped) :
 * 1. le pavé blanc du recto s'agrandit jusqu'à prendre tout le cadre (0,5 s) ;
 * 2. les textes et la photo du recto s'effacent (0,2 à 0,25 s) ;
 * 3. les textes du verso apparaissent en fondu en remontant légèrement (0,7 s) ;
 * 4. le recto entier passe à l'opacité 0, verso en place : plus rien de la photo ne peut transparaître.
 * Au retour, l'ordre s'inverse. Le pavé est dessiné par .am-cas__face--recto::before, découpé (clip-path) à la place du
 * pavé : haut mesuré par am-cas.js (--am-cas-morph-top), marges du recto (21 px) et coins de 30 px ; déployé, il reprend
 * les coins de la carte. .is-morph (posée par le JS) active l'effet : sans JS, fondu simple du verso.
 * Cartes sans verso (sans citation) : aucun effet.
 */
.am-cas__card--verso.is-morph {
	--am-cas-morph-in: 0.5s;
}
/* Le recto isole son empilement : le pavé (z-index 1) et ses textes (2) restent sous le verso, qui le suit dans le DOM */
.am-cas__card--verso.is-morph .am-cas__face--recto {
	isolation: isolate;
}
/* Photo effacée une fois le pavé déployé : sinon son bord reste visible en liseré sous l'arrondi de la carte */
.am-cas .am-cas__card--verso.is-morph .am-cas__photo {
	transition: opacity 0.15s ease 0.1s;
}
.am-cas__card--verso.is-morph .am-cas__face--recto::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--am-color-white);
	clip-path: inset(var(--am-cas-morph-top, 100%) 1.3125rem 1.3125rem 1.3125rem round 1.875rem);
	transition: clip-path var(--am-cas-morph-in) cubic-bezier(0.6, 0, 0.2, 1) 0.2s; /* retour : après l'effacement du verso */
	pointer-events: none;
}
.am-cas__card--verso.is-morph .am-cas__panel {
	z-index: 2;
	background-color: transparent; /* le pavé est dessiné par ::before */
}
.am-cas__card--verso.is-morph .am-cas__panel > * {
	transition: opacity 0.25s ease 0.55s; /* retour : quand le pavé a repris sa place */
}
.am-cas__card--verso.is-morph .am-cas__face--verso {
	transition: opacity 0.2s ease; /* retour : s'efface d'abord */
}
.am-cas__card--verso.is-morph .am-cas__face--verso > * {
	transform: translateY(0.75rem);
	transition: transform 0.2s ease;
}
.am-cas__card--verso.is-morph .am-cas__face--recto {
	transition: opacity 0s; /* retour : réaffiché tout de suite, sous le verso qui s'efface */
}

/* Ouverture */
.am-cas__card--verso.is-morph.is-flipped .am-cas__face--recto::before,
.am-cas__card--verso.is-morph .am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__face--recto::before {
	clip-path: inset(-2px round 3.125rem);
	transition-delay: 0s;
}
.am-cas .am-cas__card--verso.is-morph.is-flipped .am-cas__photo,
.am-cas .am-cas__card--verso.is-morph .am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__photo {
	opacity: 0;
	transition: opacity 0.25s ease var(--am-cas-morph-in);
}
.am-cas__card--verso.is-morph.is-flipped .am-cas__face--recto,
.am-cas__card--verso.is-morph .am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__face--recto {
	opacity: 0;
	transition: opacity 0s calc(var(--am-cas-morph-in) + 0.9s);
}
.am-cas__card--verso.is-morph.is-flipped .am-cas__face--verso > *,
.am-cas__card--verso.is-morph .am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__face--verso > * {
	transform: none;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--am-cas-morph-in) + 0.2s);
}
.am-cas__card--verso.is-morph.is-flipped .am-cas__panel > *,
.am-cas__card--verso.is-morph .am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__panel > * {
	opacity: 0;
	transition: opacity 0.2s ease var(--am-cas-morph-in);
}
.am-cas__card--verso.is-morph.is-flipped .am-cas__face--verso,
.am-cas__card--verso.is-morph .am-cas__toggle:not(.is-js):focus-visible ~ .am-cas__faces .am-cas__face--verso {
	transition: opacity 0.7s ease calc(var(--am-cas-morph-in) + 0.2s);
}
	@media (hover: hover) {
		.am-cas__card--verso.is-morph:hover .am-cas__face--recto::before {
			clip-path: inset(-2px round 3.125rem);
			transition-delay: 0s;
		}
		.am-cas .am-cas__card--verso.is-morph:hover .am-cas__photo {
			opacity: 0;
			transition: opacity 0.25s ease var(--am-cas-morph-in);
		}
		.am-cas__card--verso.is-morph:hover .am-cas__face--recto {
			opacity: 0;
			transition: opacity 0s calc(var(--am-cas-morph-in) + 0.9s);
		}
		.am-cas__card--verso.is-morph:hover .am-cas__face--verso > * {
			transform: none;
			transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--am-cas-morph-in) + 0.2s);
		}
		.am-cas__card--verso.is-morph:hover .am-cas__panel > * {
			opacity: 0;
			transition: opacity 0.2s ease var(--am-cas-morph-in);
		}
		.am-cas__card--verso.is-morph:hover .am-cas__face--verso {
			transition: opacity 0.7s ease calc(var(--am-cas-morph-in) + 0.2s);
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.am-cas__card--verso.is-morph .am-cas__face--recto::before,
		.am-cas__card--verso.is-morph .am-cas__panel > *,
		.am-cas__card--verso.is-morph .am-cas__face--verso,
		.am-cas__card--verso.is-morph .am-cas__face--verso > *,
		.am-cas__card--verso.is-morph .am-cas__face--recto,
		.am-cas .am-cas__card--verso.is-morph .am-cas__photo {
			transition: none !important;
		}
	}

/*******************
 Nom et sous-titre du client (page Clients : titre de la fiche, type d'accompagnement), facultatifs
*******************/

.am-cas__name {
	margin: 1rem 0 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-card-title);
	line-height: var(--am-lh-card-title);
	font-weight: var(--am-fw-semibold);
	color: var(--am-color-ink);
	text-transform: uppercase;
}
.am-cas__subtitle {
	margin: 0.25rem 0 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body);
	line-height: var(--am-lh-body);
	font-weight: var(--am-fw-regular);
	color: var(--am-color-ink);
}
/* Après le nom ou le sous-titre, le texte du bandeau se rapproche (reprise de l'ancienne carte de la page Clients) */
.am-cas__name + .am-cas__panel-text,
.am-cas__subtitle + .am-cas__panel-text {
	margin-top: 0.75rem;
}

/* Carte sans photo : le bandeau blanc occupe toute la carte (texte en haut), filet du verso pour la détacher du fond */
.am-cas__card--sans-photo .am-cas__face--recto {
	border: 1px solid color-mix(in srgb, var(--am-color-slate) 35%, transparent);
	background-color: var(--am-color-white);
}
.am-cas__card--sans-photo .am-cas__panel {
	flex: 1 1 auto;
}

/*******************
 Grille (page Clients, page-references.php) : 3, 2 puis 1 colonnes
*******************/

/*
 * Réglages du palier « 22rem » de la rangée de l'accueil (hauteur minimale 36rem, verso et bandeau resserrés), à toutes
 * les largeurs. Écart entre cartes : celui de l'accueil. Une colonne sous 600 px : carte de 28rem au plus, centrée.
 * Retouche du 22/09/2026 : la grille occupe le .wrapper commun (1300 px de contenu) et non plus .wrapper-1100. Trois
 * colonnes restent le bon compte : ~415 px par carte à 1440 px, près des 448 px (28rem) de la carte de l'accueil, quand
 * quatre en donneraient ~305, moins que le plus petit palier de l'accueil (22rem). Colonnes plafonnées à 28rem : une
 * carte ne dépasse jamais sa taille de conception ; la grille se centre si la place est plus grande.
 */
.am-cas--grille {
	--am-cas-card-h: 36rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 28rem));
	justify-content: center;
	gap: 1.6875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.am-cas--grille > .am-cas__item {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
}
	@media screen and (min-width: 1280px) {
		/* Cartes de 378 à 415 px dans le .wrapper : hauteur minimale de 38,5rem (616 px), soit à 415 px le ratio de la carte
		   de l'accueil (448 × 664) et de la photo recadrée am-cas ; à 36rem, la photo ne montrait qu'un bandeau au-dessus du texte */
		.am-cas--grille { --am-cas-card-h: 38.5rem; }
		.am-cas--grille .am-cas__card { --am-cas-verso-pb: var(--am-space-6); }
		.am-cas--grille .am-cas__face--verso { padding: var(--am-space-7) var(--am-space-6) var(--am-cas-verso-pb); }
		.am-cas--grille .am-cas__panel { min-height: 0; padding: var(--am-space-6) var(--am-space-5) var(--am-space-6) var(--am-space-6); }
	}
	@media screen and (max-width: 1023px) {
		.am-cas--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media screen and (max-width: 767px) {
		.am-cas--grille { --am-cas-card-h: 30rem; }
	}
	@media screen and (max-width: 599px) {
		.am-cas--grille { grid-template-columns: minmax(0, 28rem); justify-content: center; }
	}