/**
 * Cas clients — Alsace Courtiers
 *
 * Reprend la charte du site : orange #e78d49 en accent, bleu #31a3cc pour les
 * surtitres, Raleway pour les titres forts, Oswald en capitales pour les
 * titres de section.
 *
 * Chargé uniquement sur les gabarits « cas client » (voir template-tags.php).
 */

/* Les variables sont aussi portées par .cc-module : les modules de maillage
   vivent sur les pages du site, qui ne portent pas la classe .cc-template —
   et ne doivent surtout pas la porter, sous peine d'hériter des règles
   d'en-tête des gabarits cas clients. */
.cc-template,
.cc-module {
	--cc-orange: #e78d49;
	--cc-orange-dark: #cf7226;
	--cc-blue: #31a3cc;
	--cc-navy: #0c3d5d;
	--cc-ink: #1c1c1b;
	--cc-body: #3b3b3b;
	--cc-muted: #767676;
	--cc-line: #e7e2dc;
	--cc-cream: #faf7f3;
	--cc-radius: 4px;
}

/*
 * L'en-tête d'accueil (image de couverture + accroche « Obtenez le meilleur
 * financement ») n'a pas lieu d'être ici : ces gabarits ont le leur.
 *
 * La règle du thème ne le masque que sur .page — un contenu personnalisé ne
 * porte pas cette classe, d'où le débordement. On le masque plutôt que de le
 * retirer du HTML : global.js calcule le déclenchement de la navigation fixe
 * à partir de sa hauteur (headerOffset = $customHeader.innerHeight()). Absent
 * du DOM, la valeur serait « undefined », la comparaison toujours fausse, et
 * le menu resterait transparent par-dessus le contenu. Masqué, il mesure 0 :
 * exactement le comportement des pages internes du site.
 */
.cc-template .custom-header {
	display: none;
}

/*
 * Raccord avec l'en-tête du site.
 *
 * Le thème dégage l'en-tête fixe en décalant le contenu (marge de 100 px) et
 * en ajoutant 88 px de padding sur #content. Sur les pages du site tout est
 * blanc, donc cela ne se voit pas ; avec un hero coloré, ces 188 px
 * formaient une bande blanche entre le menu et le contenu.
 *
 * On annule les deux et on reporte la compensation en padding du hero : son
 * fond remonte alors jusqu'en haut de la page, sous l'en-tête.
 */
.cc-template .site-content-contain {
	margin-top: 0;
}

.cc-template #content.site-content {
	padding-top: 0;
}

/*
 * En-tête opaque dès le chargement.
 *
 * global.js ne pose « .site-navigation-fixed » qu'une fois dépassée la
 * hauteur de .custom-header. Or jQuery mesure environ 1110 px même quand
 * l'élément est masqué : innerHeight() le démasque le temps de le mesurer.
 * Le menu ne devenait donc blanc qu'après 1110 px de défilement.
 *
 * On applique ici l'état final d'emblée, avec exactement les mêmes valeurs
 * que .site-navigation-fixed : quand le script finit par ajouter la classe,
 * rien ne bouge à l'écran.
 *
 * Uniquement au-dessus de 1024 px : en dessous, le thème passe en menu
 * burger et c'est .logogrp qui porte déjà la barre blanche de 100 px.
 */
@media screen and (min-width: 1024px) {

	.cc-template .navigation-top {
		height: 100px;
		background-color: #fff;
		box-shadow: 1px 3px 15px -5px rgba(0, 0, 0, 0.27);
		z-index: 1000;
	}
}

.cc-shell {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.cc-shell--narrow {
	max-width: 800px;
}

.cc-surtitre {
	margin: 0 0 6px;
	color: var(--cc-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cc-surtitre--light {
	color: rgba(255, 255, 255, 0.85);
}

.cc-link {
	color: var(--cc-orange-dark);
	font-weight: 600;
	border-bottom: 1px solid rgba(231, 141, 73, 0.4);
	text-decoration: none;
}

.cc-link:hover {
	border-bottom-color: var(--cc-orange-dark);
}

/* ---------------------------------------------------------------- En-tête */

/* Le padding haut intègre la hauteur de l'en-tête fixe (100 px), que le hero
   passe désormais dessous. Voir le bloc « Raccord avec l'en-tête » plus haut. */
.cc-hero {
	position: relative;
	overflow: hidden;
	padding: 164px 0 56px;
	background: linear-gradient(180deg, var(--cc-cream) 0%, #fff 100%);
	border-bottom: 1px solid var(--cc-line);
}

/* Sous 1024 px, la barre blanche fait 100 px et vient de .logogrp. */
@media screen and (max-width: 1023px) {

	.cc-hero {
		padding-top: 144px;
	}
}

/*
 * Illustration de fond, centrée dans les deux axes et fortement atténuée.
 *
 * L'image est portée par --cc-hero-image, injectée par le gabarit (image mise
 * en avant de la fiche, sinon illustration commune du thème). Sans variable,
 * la règle se désactive d'elle-même et le hero garde son seul dégradé.
 *
 * L'opacité est appliquée à ce calque uniquement, jamais au texte : celui-ci
 * vit dans .cc-shell, au-dessus, et reste parfaitement opaque.
 *
 * Attention : une url() portée par une variable personnalisée est résolue par
 * le navigateur relativement à CETTE feuille de style, pas au document. D'où
 * l'URL absolue produite par dgs_cc_hero_style() ; une URL relative irait
 * chercher le fichier dans assets/css/.
 */
.cc-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background-image: var(--cc-hero-image, none);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.28;
	pointer-events: none;
}

/*
 * Voile dégradé par-dessus l'image : opaque là où court le texte, plus léger
 * à droite où l'illustration peut respirer. Garantit le contraste quelle que
 * soit l'image choisie.
 */
.cc-hero::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.88) 0%,
		rgba(255, 255, 255, 0.62) 50%,
		rgba(255, 255, 255, 0.15) 100%
	);
	pointer-events: none;
}

/* Le texte reste au-dessus des deux calques. */
.cc-hero .cc-shell {
	position: relative;
	z-index: 1;
}

/* En colonne étroite, le texte occupe toute la largeur : voile uniforme. */
@media screen and (max-width: 1023px) {

	.cc-hero::after {
		background: rgba(255, 255, 255, 0.8);
	}
}

.cc-breadcrumb {
	margin-bottom: 22px;
	color: var(--cc-muted);
	font-size: 13px;
	letter-spacing: 0.5px;
}

.cc-breadcrumb a {
	color: var(--cc-muted);
	text-decoration: none;
}

.cc-breadcrumb a:hover {
	color: var(--cc-orange-dark);
}

.cc-breadcrumb span {
	margin: 0 8px;
	opacity: 0.6;
}

.cc-hero__kicker {
	margin: 0 0 14px;
	color: var(--cc-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.cc-template .cc-hero__title {
	max-width: 16em;
	margin: 0 0 18px;
	color: var(--cc-ink);
	font-family: 'Raleway', sans-serif;
	font-size: 46px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.5px;
	text-transform: none;
	padding: 0;
}

.cc-hero__title span {
	color: var(--cc-orange);
}

.cc-hero__lead,
.cc-hero__question {
	max-width: 46em;
	margin: 0 0 20px;
	color: var(--cc-body);
	font-size: 18px;
	line-height: 1.65;
}

.cc-hero__question {
	font-style: italic;
	color: var(--cc-muted);
}

.cc-hero__figure {
	display: inline-block;
	margin: 14px 0 0;
	padding: 16px 26px;
	background: #fff;
	border-left: 4px solid var(--cc-orange);
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.4);
}

.cc-hero__figure strong {
	display: block;
	color: var(--cc-orange-dark);
	font-family: 'Raleway', sans-serif;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}

.cc-hero__figure span {
	display: block;
	margin-top: 4px;
	color: var(--cc-muted);
	font-size: 14px;
}

/* Étiquettes de problématique */

.cc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.cc-tags li {
	margin: 0;
}

.cc-tags a {
	display: inline-block;
	padding: 6px 14px;
	color: var(--cc-navy);
	background: rgba(49, 163, 204, 0.1);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: 0.25s;
}

.cc-tags a:hover {
	color: #fff;
	background: var(--cc-blue);
}

/* Raccourcis vers les problématiques, en tête de page pilier */

.cc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
}

.cc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	color: var(--cc-ink);
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: 0.25s;
}

.cc-chip:hover {
	color: var(--cc-orange-dark);
	border-color: var(--cc-orange);
	transform: translateY(-2px);
}

.cc-chip__count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	color: #fff;
	background: var(--cc-orange);
	border-radius: 999px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* ------------------------------------------------------- Sections piliers */

.cc-pillar {
	padding: 70px 0;
	scroll-margin-top: 110px;
}

.cc-pillar--alt {
	background: var(--cc-cream);
}

.cc-pillar__head {
	max-width: 720px;
	margin-bottom: 38px;
}

.cc-template .cc-pillar__title {
	margin: 0 0 14px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Oswald Light', 'Oswald', sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}

.cc-pillar__desc {
	margin: 0;
	color: var(--cc-body);
	font-size: 17px;
	line-height: 1.65;
}

/* ----------------------------------------------------------------- Cartes */

.cc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 26px;
}

.cc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 28px 24px;
	background: #fff;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-radius);
	transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* Liseré orange qui se déploie au survol. */
.cc-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 4px;
	height: 56px;
	background: var(--cc-orange);
	border-radius: var(--cc-radius) 0 0 var(--cc-radius);
	transition: height 0.35s ease;
}

.cc-card:hover {
	transform: translateY(-4px);
	border-color: rgba(231, 141, 73, 0.5);
	box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.45);
}

.cc-card:hover::before {
	height: calc(100% + 2px);
}

/* Toute la carte est cliquable, sans imbriquer de liens. */
.cc-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 0;
}

.cc-card__link:focus-visible {
	outline: 3px solid var(--cc-orange);
	outline-offset: 3px;
}

.cc-card__kicker {
	margin: 0 0 10px;
	color: var(--cc-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.cc-template .cc-card__title,
.cc-module .cc-card__title {
	margin: 0 0 12px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Raleway', sans-serif;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.2px;
	text-transform: none;
	height: auto;
}

.cc-card__question {
	margin: 0 0 20px;
	color: var(--cc-muted);
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
}

.cc-card__figure {
	margin: auto 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--cc-line);
}

.cc-card__figure strong {
	display: block;
	color: var(--cc-orange-dark);
	font-family: 'Raleway', sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
}

.cc-card__figure span {
	display: block;
	margin-top: 3px;
	color: var(--cc-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Empilé plutôt qu'aligné : le lieu peut être long, l'alignement resterait
   différent d'une carte à l'autre. */
.cc-card__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 18px;
}

.cc-card__place {
	color: var(--cc-muted);
	font-size: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.cc-card__more {
	color: var(--cc-orange-dark);
	font-size: 14px;
	font-weight: 700;
}

.cc-card__more::after {
	content: " →";
	display: inline-block;
	transition: transform 0.25s;
}

.cc-card:hover .cc-card__more::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------- Fiche détaillée */

.cc-single .cc-shell--narrow {
	padding-top: 54px;
	padding-bottom: 10px;
}

/* Tableau de synthèse */

.cc-essentiel {
	margin: 0 0 46px;
	padding: 30px 32px;
	background: var(--cc-cream);
	border-top: 3px solid var(--cc-orange);
	border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

.cc-template .cc-essentiel h2 {
	margin: 0 0 20px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Oswald Light', 'Oswald', sans-serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cc-essentiel dl {
	margin: 0;
}

.cc-essentiel__row {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 6px 22px;
	padding: 12px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cc-essentiel__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.cc-essentiel dt {
	margin: 0;
	color: var(--cc-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.cc-essentiel dd {
	margin: 0;
	color: var(--cc-body);
	font-size: 16px;
	line-height: 1.55;
}

/* Corps de l'article */

.cc-body {
	color: var(--cc-body);
	font-size: 17px;
	line-height: 1.75;
}

.cc-template .cc-body h2 {
	margin: 46px 0 16px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Oswald Light', 'Oswald', sans-serif;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cc-body h2:first-child {
	margin-top: 0;
}

.cc-body p {
	margin: 0 0 18px;
}

.cc-body a {
	color: var(--cc-orange-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(231, 141, 73, 0.45);
}

.cc-body a:hover {
	border-bottom-color: var(--cc-orange-dark);
}

/* Témoignage */

.cc-quote {
	position: relative;
	margin: 46px 0;
	padding: 34px 34px 30px 62px;
	background: #fff;
	border: 1px solid var(--cc-line);
	border-left: 4px solid var(--cc-orange);
	border-radius: var(--cc-radius);
}

.cc-quote::before {
	content: "“";
	position: absolute;
	top: 6px;
	left: 22px;
	color: var(--cc-orange);
	font-family: Georgia, serif;
	font-size: 68px;
	line-height: 1;
	opacity: 0.55;
}

.cc-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--cc-ink);
	font-size: 18px;
	font-style: italic;
	line-height: 1.7;
}

.cc-quote blockquote::before {
	content: "« ";
}

.cc-quote blockquote::after {
	content: " »";
}

.cc-quote figcaption {
	margin-top: 14px;
	color: var(--cc-muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* Questions fréquentes */

.cc-faq {
	margin: 50px 0;
}

.cc-template .cc-faq h2,
.cc-template .cc-resources h2 {
	margin: 0 0 20px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Oswald Light', 'Oswald', sans-serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cc-faq details {
	border-bottom: 1px solid var(--cc-line);
}

.cc-faq summary {
	position: relative;
	padding: 18px 44px 18px 0;
	color: var(--cc-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.cc-faq summary::-webkit-details-marker {
	display: none;
}

.cc-faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 8px;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	color: var(--cc-orange-dark);
	font-size: 22px;
	font-weight: 400;
	line-height: 24px;
	text-align: center;
	transition: transform 0.25s;
}

.cc-faq details[open] summary::after {
	content: "–";
}

.cc-faq summary:hover {
	color: var(--cc-orange-dark);
}

.cc-faq__answer {
	padding: 0 44px 20px 0;
	color: var(--cc-body);
	font-size: 16px;
	line-height: 1.7;
}

.cc-faq__answer p {
	margin: 0;
}

/* Ressources */

.cc-resources {
	margin: 46px 0 10px;
	padding: 28px 30px;
	background: var(--cc-cream);
	border-radius: var(--cc-radius);
}

.cc-resources ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-resources li {
	margin: 0;
	padding-left: 20px;
	position: relative;
}

.cc-resources li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--cc-orange);
}

.cc-resources a {
	color: var(--cc-navy);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.cc-resources a:hover {
	color: var(--cc-orange-dark);
}

/* ----------------------------------------------------------------- Appels */

.cc-cta {
	margin-top: 56px;
	padding: 56px 0;
	color: #fff;
	background: linear-gradient(120deg, var(--cc-navy) 0%, #17587f 100%);
	text-align: center;
}

.cc-cta--large {
	padding: 76px 0;
}

/* Sur la page pilier, l'appel enchaîne directement la dernière section. */
.cc-archive .cc-cta {
	margin-top: 0;
}

.cc-template .cc-cta h2 {
	margin: 0 0 16px;
	padding: 0;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: none;
}

.cc-cta__lead {
	max-width: 40em;
	margin: 0 auto 26px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 17px;
	line-height: 1.65;
}

.cc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 22px;
	margin: 0;
}

.cc-btn {
	display: inline-block;
	padding: 14px 34px;
	color: #fff;
	background: var(--cc-orange);
	border: 1px solid var(--cc-orange);
	border-radius: 2px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-decoration: none;
	transition: 0.3s;
}

.cc-btn:hover {
	color: var(--cc-orange);
	background: transparent;
}

/* Action secondaire : même gabarit, poids visuel moindre. */
.cc-btn--ghost {
	color: #fff;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
}

.cc-btn--ghost:hover {
	color: var(--cc-navy);
	background: #fff;
	border-color: #fff;
}

/* Mentions */

/*
 * Mentions de fin d'article. Pas de filet séparateur : le bandeau d'appel à
 * l'action qui précède marque déjà la rupture. L'espacement est symétrique
 * au-dessus et en dessous, et c'est le conteneur qui le porte entièrement
 * (voir .cc-shell--legal) pour éviter d'empiler marge et padding.
 */
.cc-legal {
	margin: 0;
	color: var(--cc-muted);
	font-size: 13px;
	line-height: 1.65;
}

.cc-legal p {
	margin: 0 0 12px;
}

.cc-legal p:last-child {
	margin-bottom: 0;
}

.cc-single .cc-shell--legal {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* À lire aussi */

.cc-related {
	padding: 66px 0 76px;
	background: var(--cc-cream);
}

.cc-template .cc-related h2 {
	margin: 0 0 34px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Oswald Light', 'Oswald', sans-serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cc-related__all {
	margin: 34px 0 0;
	text-align: center;
}

/* ------------------------------------------------------------ Adaptations */

@media (max-width: 1024px) {

	.cc-template .cc-hero__title {
		font-size: 38px;
	}

	.cc-template .cc-cta h2 {
		font-size: 28px;
	}
}

@media (max-width: 782px) {

	.cc-hero {
		padding: 134px 0 40px;
	}

	.cc-hero::before,
	.cc-hero::after {
		display: none;
	}

	.cc-template .cc-hero__title {
		font-size: 30px;
	}

	.cc-hero__lead {
		font-size: 16px;
	}

	.cc-pillar {
		padding: 48px 0;
	}

	.cc-template .cc-pillar__title {
		font-size: 26px;
	}

	.cc-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.cc-essentiel {
		padding: 24px 20px;
	}

	.cc-essentiel__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.cc-single .cc-shell--narrow {
		padding-top: 36px;
	}

	.cc-template .cc-body h2 {
		font-size: 22px;
	}

	.cc-quote {
		padding: 46px 22px 24px;
	}

	.cc-quote::before {
		left: 18px;
	}
}

/* ------------------------------------------- Modules sur les pages du site */

/*
 * Blocs ajoutés en fin de contenu par inc/cas-clients/maillage.php.
 * Ils vivent dans le contenu des pages du site, dont la largeur est déjà
 * contrainte par le thème : pas de .cc-shell ici, on hérite du conteneur.
 */
.cc-module {
	margin: 48px 0 0;
	padding-top: 34px;
	border-top: 1px solid var(--cc-line);
	clear: both;
}

.cc-module .cc-surtitre {
	margin-bottom: 4px;
}

.cc-module .cc-module__title {
	margin: 0 0 24px;
	padding: 0;
	color: var(--cc-ink);
	font-family: 'Oswald Light', 'Oswald', sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cc-module .cc-module__title--small {
	font-size: 19px;
	margin-bottom: 14px;
}

/* Cards resserrées : la colonne de contenu est plus étroite que sur la
   page pilier, trois par ligne y seraient illisibles. */
.cc-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 18px;
}

.cc-grid--compact .cc-card {
	padding: 22px 20px 18px;
}

.cc-grid--compact .cc-card__title {
	font-size: 18px;
}

.cc-grid--compact .cc-card__figure strong {
	font-size: 22px;
}

.cc-module__all {
	margin: 22px 0 0;
}

/* Encart simulateurs */

.cc-simus ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-simus li {
	margin: 0;
}

.cc-simus a {
	display: inline-block;
	padding: 10px 18px;
	color: var(--cc-navy);
	background: var(--cc-cream);
	border: 1px solid var(--cc-line);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: 0.25s;
}

.cc-simus a:hover {
	color: var(--cc-orange-dark);
	border-color: var(--cc-orange);
}

@media screen and (max-width: 782px) {

	.cc-grid--compact {
		grid-template-columns: 1fr;
	}

	.cc-module {
		margin-top: 36px;
		padding-top: 26px;
	}
}

/* --------------------------------------------------------------- Impression */

@media print {

	.cc-cta,
	.cc-chips,
	.cc-related,
	.cc-breadcrumb,
	.cc-card__link {
		display: none !important;
	}

	.cc-hero::before {
		display: none;
	}

	.cc-card,
	.cc-essentiel,
	.cc-quote {
		break-inside: avoid;
	}
}