/* ==========================================================================
   Phase 2, 11/11/2026 : conversion, navigation, pages de service.
   Charge apres style.css. Retour arriere : retirer ce fichier et la ligne
   require de functions.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Bandeau de consentement
   A 1440 x 900 la boite (440 x 255, en bas a gauche) recouvrait le bouton
   principal du hero. A partir de 1024 px elle devient un bandeau d'une ligne
   en pied d'ecran. Le texte reste entier, les trois choix restent visibles,
   « Tout refuser » garde le meme poids que « Tout accepter ».
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.cky-consent-container.cky-box-bottom-left {
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}

	.cky-consent-container .cky-consent-bar {
		padding: 12px var(--cc-gutter) !important;
		border-radius: 0 !important;
		border-width: 1px 0 0 !important;
		border-style: solid !important;
		border-color: var(--cc-border) !important;
		box-shadow: 0 -2px 18px rgba(16, 26, 32, 0.1) !important;
	}

	.cky-consent-container .cky-notice {
		display: flex !important;
		align-items: center !important;
		gap: var(--cc-s6) !important;
		max-width: 1280px;
		margin: 0 auto !important;
	}

	.cky-consent-container .cky-title {
		flex-shrink: 0;
		margin: 0 !important;
		white-space: nowrap;
	}

	.cky-consent-container .cky-notice-group {
		display: flex !important;
		flex-grow: 1;
		align-items: center !important;
		gap: var(--cc-s6) !important;
	}

	.cky-consent-container .cky-notice-des {
		flex-grow: 1;
		max-height: none !important;
		padding: 0 !important;
	}

	.cky-consent-container .cky-notice-des p {
		margin: 0 !important;
	}

	.cky-consent-container .cky-notice-btn-wrapper {
		flex-shrink: 0;
		flex-wrap: nowrap !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.cky-consent-container .cky-notice-btn-wrapper button,
	.cky-consent-container .cky-notice-btn-wrapper a {
		flex: 0 0 auto !important;
		min-width: 132px !important;
		padding: 10px 18px !important;
	}

	.cky-consent-container .cky-btn-customize {
		flex-basis: auto !important;
	}
}

/* Sous 768 px la boite reste, un peu plus basse, pour laisser le bouton
   principal du hero entierement degage a 375 x 812. */
@media (max-width: 767px) {
	.cky-consent-container .cky-consent-bar {
		padding: var(--cc-s3) !important;
	}

	.cky-consent-container .cky-title {
		font-size: 15px !important;
		margin-bottom: 4px !important;
	}

	.cky-consent-container .cky-notice-des,
	.cky-consent-container .cky-notice-des p {
		font-size: 12.5px !important;
		line-height: 1.4 !important;
	}

	.cky-consent-container .cky-notice-btn-wrapper {
		padding-top: var(--cc-s2) !important;
	}
}

/* --------------------------------------------------------------------------
   2. Hero de l'accueil en deux colonnes
   -------------------------------------------------------------------------- */

.cc-hero__inner--duo {
	align-items: center;
}

.cc-hero__inner--duo h1 {
	max-width: 760px;
}

.cc-hero__inner--duo .cc-lede {
	max-width: 660px;
}

.cc-hero__aside {
	width: 380px;
	flex-shrink: 0;
	padding: var(--cc-s6);
	background: var(--cc-surface);
	border-radius: var(--cc-radius);
	border-top: 3px solid var(--cc-brand);
}

.cc-hero__aside-titre {
	margin: 0 0 var(--cc-s3);
	font-family: var(--cc-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-silver);
}

.cc-hero__aside-liste {
	margin: 0 0 var(--cc-s5);
	padding: 0;
	list-style: none;
}

.cc-hero__aside-liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-s3);
	min-height: 44px;
	padding-block: var(--cc-s2);
	font-size: 17px;
	font-weight: 600;
	color: var(--cc-ink);
	border-bottom: 1px solid var(--cc-border);
}

.cc-hero__aside-liste a:hover {
	color: var(--cc-primary);
	text-decoration: none;
}

.cc-hero__aside-contact a {
	display: block;
	padding-block: 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--cc-primary);
}

@media (max-width: 1023px) {
	.cc-hero__aside {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   3. Section « Verifiable » : liens de controle
   -------------------------------------------------------------------------- */

.cc-proof__item p + p {
	margin-top: var(--cc-s2);
}

.cc-proof__liens {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.cc-proof__liens a {
	display: inline-block;
	padding-block: 5px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. En-tete et pied de page : entree CRM
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) and (max-width: 1399px) {
	.cc-header__inner {
		gap: var(--cc-s6);
	}

	.cc-nav__list {
		gap: var(--cc-s4);
	}
}

.cc-footer__cols--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--cc-s6);
}

@media (min-width: 1024px) {
	.cc-footer__inner:has(.cc-footer__cols--5) .cc-footer__brand {
		width: 250px;
	}
}

@media (max-width: 1023px) {
	.cc-footer__cols--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   5. Fil d'Ariane
   -------------------------------------------------------------------------- */

.cc-fil {
	padding-top: var(--cc-s5);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cc-muted);
}

.cc-fil a {
	color: var(--cc-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-fil a:hover {
	color: var(--cc-primary);
}

.cc-fil-wrap:not(:empty) + .cc-hub__head {
	padding-top: var(--cc-s6);
}

.cc-article > .cc-fil {
	padding-top: 0;
	margin-bottom: var(--cc-s6);
}

/* --------------------------------------------------------------------------
   6. Guides : recherche et filtre par categorie
   -------------------------------------------------------------------------- */

.cc-guides-outils {
	padding-bottom: var(--cc-s5);
}

.cc-guides-outils__recherche label {
	display: block;
	margin-bottom: var(--cc-s2);
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-ink);
}

.cc-guides-outils__champ {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-s3);
	max-width: 640px;
}

.cc-guides-outils__champ input[type="search"] {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 50px;
	padding: 13px 14px;
	font-family: var(--cc-text);
	font-size: 16px;
	color: var(--cc-ink);
	background: var(--cc-bg);
	border: 1px solid #76848d;
	border-radius: var(--cc-radius-field);
}

.cc-guides-outils__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-s2);
	margin-top: var(--cc-s6);
}

.cc-guides-outils__cats a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-ink);
	background: var(--cc-bg);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-pill);
}

.cc-guides-outils__cats a span {
	font-weight: 400;
	color: var(--cc-muted);
}

.cc-guides-outils__cats a:hover {
	background: var(--cc-surface);
	text-decoration: none;
}

.cc-guides-outils__cats a[aria-current="page"] {
	color: #fff;
	background: var(--cc-primary);
	border-color: var(--cc-primary);
}

.cc-guides-outils__cats a[aria-current="page"] span {
	color: #fff;
}

/* --------------------------------------------------------------------------
   7. Page contact : coordonnees a cote du formulaire
   -------------------------------------------------------------------------- */

.cc-contact-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cc-s7);
	margin-top: var(--cc-s7);
}

.cc-contact-duo__coords {
	padding: var(--cc-s6);
	background: var(--cc-surface);
	border-radius: var(--cc-radius);
	font-size: 16px;
	line-height: 1.6;
}

.cc-contact-duo__coords h2 {
	margin: 0 0 var(--cc-s3);
	font-size: 22px;
}

.cc-contact-duo__coords p {
	margin: 0 0 var(--cc-s3);
}

.cc-contact-duo__coords a {
	font-weight: 600;
}

@media (min-width: 1024px) {
	body.page-id-14 .cc-article {
		max-width: calc(1080px + 2 * var(--cc-gutter));
	}

	.cc-contact-duo {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}

	.cc-contact-duo__coords {
		order: 2;
	}
}

/* Bouton d'envoi du formulaire : meme forme que les autres boutons. */
.wpcf7-form .wpcf7-submit {
	border-radius: var(--cc-radius-pill);
	padding: 13px 30px;
	font-weight: 600;
}

.wpcf7-form .cc-facultatif {
	font-size: 14px;
	color: var(--cc-muted);
}

.cc-contact .wpcf7-form .cc-facultatif {
	color: #c3ccd2;
}

/* --------------------------------------------------------------------------
   8. Pages /services/ de l'ancien gabarit
   Leur contenu porte ses couleurs en style en ligne. Le bleu clair #58B2D6
   sous du texte blanc donnait un contraste de 2,4:1. Il devient le bleu
   d'action du theme (5,8:1), et les boutons prennent la forme en pilule.
   Aucun texte n'est modifie.
   -------------------------------------------------------------------------- */

.cc-article__body [style*="background:#58B2D6"],
.cc-article__body [style*="background: #58B2D6"],
.cc-article__body [style*="background:#58b2d6"] {
	background: var(--cc-primary) !important;
	color: #fff !important;
}

.cc-article__body a[style*="background:#58B2D6"],
.cc-article__body a[style*="background:#58b2d6"] {
	border-radius: var(--cc-radius-pill) !important;
	font-family: var(--cc-text);
}

.cc-article__body a[style*="background:#58B2D6"]:hover {
	background: var(--cc-primary-hover) !important;
	text-decoration: none;
}

.cc-article__body [style*="color:#58B2D6"],
.cc-article__body [style*="color: #58B2D6"],
.cc-article__body [style*="color:#58b2d6"] {
	color: var(--cc-primary) !important;
}

.cc-article__body [style*="border:2px solid #58B2D6"],
.cc-article__body [style*="border-color:#58B2D6"],
.cc-article__body [style*="solid #58B2D6"] {
	border-color: var(--cc-primary) !important;
}

.cc-article__body [style*="color:#888"],
.cc-article__body [style*="color:#999"],
.cc-article__body [style*="color:#777"] {
	color: var(--cc-muted) !important;
}

.cc-article__body [style*="color:#1D1D1B"] {
	color: var(--cc-ink) !important;
}

.cc-article__body [style*="color:#444"],
.cc-article__body [style*="color:#555"] {
	color: var(--cc-body) !important;
}

/* Le hero de l'ancien gabarit repetait le titre de la page (deja en H1 au-dessus)
   et reservait 55 % de la hauteur d'ecran. Le doublon est masque, les blancs
   de 80 px entre sections sont ramenes a l'echelle du theme. */
.cc-article__body .hero-section {
	min-height: 0 !important;
	padding: 0 0 var(--cc-s6) !important;
}

.cc-article__body .hero-section .hero-title,
.cc-article__body .hero-section .hero-bg-orb {
	display: none;
}

.cc-article__body .hero-section .hero-badge {
	display: block;
	margin-bottom: var(--cc-s3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-primary);
}

.cc-article__body .hero-section .hero-subtitle {
	font-size: 20px;
	line-height: 1.5;
	color: var(--cc-body);
}

.cc-article__body > section[style*="padding:80px 0"] {
	padding-block: var(--cc-s8) !important;
}

.cc-article__body > section[style*="padding:80px 0"] > div[style*="padding:0 32px"] {
	padding-inline: var(--cc-s6) !important;
}

.cc-article__body > section[style*="background:#f8f9fa"] {
	background: var(--cc-surface) !important;
	border-radius: var(--cc-radius);
}