/* =========================================================================
   BANDEAU DE REASSURANCE

   Quatre colonnes juste au-dessus du pied de page : icone, titre, precision.
   Markup et donnees : includes/reassurance.php (champs ACF, page d'options).

   Pas d'accents dans ce fichier, comme les autres feuilles du chrome : elles
   sont servies telles quelles, sans en-tete de jeu de caracteres garanti.
   ========================================================================= */

.evok-engagements {
	/* Un filet en haut, rien en bas : le pied de page arrive juste apres, avec
	   son propre aplat. Deux traits se toucheraient. */
	border-top: 1px solid rgba(12, 12, 12, .12);
	/* Rien en bas : le pied de page apporte sa propre marge haute (64 px,
	   chrome.css), et les deux s'additionnaient. */
	padding: 56px 0 0 0;
	background: var(--white, #fff);
	color: var(--body-color, #0c0c0c);
	/* Sans valeur de repli, a dessein : `--font-base` n'est declaree que dans le
	   pied de page et le header, jamais globalement. La declaration est donc
	   invalide ici, et la fonte HERITE de la page — celle du theme. C'est ce
	   qu'on veut : la bande appartient au contenu, pas au chrome. */
	font-family: var(--font-base);
}

/* Le conteneur est celui du pied de page (paliers 540/720/960/1140/1320) :
   les colonnes tombent sur la meme verticale que l'adresse et les menus. */
.evok-engagements .container {
	width: 100%;
	margin: 0 auto;
	padding: 0 7.5px;
}

@media (min-width: 576px)  { .evok-engagements .container { max-width: 540px; } }
@media (min-width: 768px)  { .evok-engagements .container { max-width: 720px; } }
@media (min-width: 992px)  { .evok-engagements .container { max-width: 960px; } }
@media (min-width: 1200px) { .evok-engagements .container { max-width: 1140px; } }
@media (min-width: 1400px) { .evok-engagements .container { max-width: 1320px; } }

@media (max-width: 575px) {
	.evok-engagements .container { padding-left: 20px; padding-right: 20px; }
}

/* QUATRE COLONNES D'EGALE LARGEUR, quel que soit le nombre d'engagements.

   `repeat(4, 1fr)` et non `auto-fit` : avec trois engagements, une repartition
   automatique en ferait trois tiers de page, et la bande changerait de rythme
   selon ce que le client a saisi. Ici, trois engagements occupent trois
   colonnes sur quatre — la mise en page reste la meme, il manque simplement
   une case. */
.evok-engagements__liste {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evok-engagements__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}

/* `line-height: 0` : un SVG est en ligne, il traine derriere lui la place
   reservee aux jambages d'une ligne de texte. Sans cela, l'ecart sous l'icone
   ne serait pas celui qu'on ecrit ici. */
.evok-engagements__icone {
	display: block;
	margin-bottom: 12px;
	line-height: 0;
	color: var(--body-color, #0c0c0c);
}

/* A peine plus grande que celles de la barre du header (24) : elle n'est pas une
   cible de clic mais un signe. Quatre pixels de plus suffisent a la detacher —
   au-dela, le trait de 1,3 s'affine a vue d'oeil par rapport a la serie. */
.evok-engagements__icone svg {
	width: 28px;
	height: 28px;
}

/* LES DEUX CORPS VIENNENT DES JETONS DU THEME (`--text-xs`, `--text-base`,
   declares sur `:root` dans style.css) et non plus de pixels ecrits ici : la
   bande appartient au contenu, elle doit suivre son echelle typographique — comme
   sa fonte, heritee pour la meme raison. C'est la seule feuille du chrome dans ce
   cas, les autres habillant des elements qui n'existent que pour lui. */
.evok-engagements__titre {
	margin: 0;
	font-size: var(--text-xs);
	line-height: 20px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.evok-engagements__texte {
	/* Deux tiers de la colonne au plus : une ligne qui court d'un bord a l'autre
	   d'une case centree se lit mal, les deux bords etant irreguliers. */
	max-width: 26ch;
	margin: 0 auto;
	font-size: var(--text-base);
	line-height: 1.4;
	color: var(--gris-texte, #6b6b66);
}

/* Deux colonnes des que quatre deviennent etroites : a 700 px de large, une
   colonne sur quatre ne tient plus « Paiement securise » sur une ligne. */
@media (max-width: 900px) {
	.evok-engagements {
		/* Meme geste qu'au-dessus : rien en bas, le pied de page apporte sa marge. */
		padding: 44px 0 0 0;
	}

	.evok-engagements__liste {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 20px;
	}
}

/* Une seule colonne sous 480 px : deux cases centrees cote a cote y font huit
   lignes de texte tronquees. La bande devient une liste, qui se parcourt. */
@media (max-width: 480px) {
	.evok-engagements__liste {
		grid-template-columns: 1fr;
		gap: 33px 0;
	}
}