/*
Theme Name: CEM Consulting v2
Theme URI: https://cem-consulting.ch/
Description: Conseil aux entrepreneurs et PME. Navigation par prestations et situations. Retour arrière via le manifeste de release et sa sauvegarde ciblée.
Author: CEM Consulting
Template: cem-consulting
Version: 2.4.2
Requires at least: 6.0
License: GPL-2.0-or-later
Text Domain: cem-consulting-v2
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--cc-bg: #ffffff;
	--cc-surface: #eff3f5;
	--cc-ink: #101a20;
	--cc-body: #39434a;
	--cc-muted: #566169;
	--cc-border: #dfe3e6;
	/* Couleurs relevees sur le logo : cyan des trois tours #08b0d8, gris de
	   l'anneau et du mot CEM #818284. Le cyan pur ne donne que 2,56:1 sur blanc,
	   donc l'action prend un bleu-cyan profond de la meme famille (5,82:1) et
	   le cyan reste aux filets et aux aplats graphiques. */
	--cc-primary: #0a6e8a;
	--cc-primary-hover: #075567;
	--cc-link: #0a6e8a;
	--cc-brand: #08b0d8;
	--cc-brand-soft: #a8d8e0;
	--cc-silver: #66686a;
	--cc-on-dark: #c3ccd2;
	--cc-accent-on-dark: #6fd3ec;
	--cc-field: #17242c;
	--cc-field-border: #39434a;

	--cc-s1: 4px;
	--cc-s2: 8px;
	--cc-s3: 12px;
	--cc-s4: 16px;
	--cc-s5: 20px;
	--cc-s6: 24px;
	--cc-s7: 32px;
	--cc-s8: 40px;

	--cc-section: 88px;
	--cc-gutter: 80px;

	--cc-radius: 8px;
	--cc-radius-field: 6px;
	--cc-radius-pill: 999px;

	--cc-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--cc-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Locally hosted OFL fonts: no external font requests or render-blocking CSS. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/archivo-latin.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/instrument-sans-latin.woff2') format('woff2'); }

.cc-price.cc-price--invert p { color: var(--cc-on-dark); }
.cc-contact__form { min-width: 0; width: 100%; }
.cc-contact__form .wpcf7-form { display: grid; gap: 18px; }
.wpcf7-form label { display: block; font-size: 16px; line-height: 1.5; }
.wpcf7-form input:not([type=submit]), .wpcf7-form select, .wpcf7-form textarea {
	width: 100%; min-height: 46px; padding: 12px; border: 1px solid #76848d;
	border-radius: 3px; background: #fff; color: #101a20; font: inherit; box-sizing: border-box;
}
.wpcf7-form textarea { min-height: 130px; }
.wpcf7-form .wpcf7-submit { min-height: 46px; padding: 12px 24px; background: #0a6e8a; color: white; border: 0; border-radius: 3px; font: inherit; cursor: pointer; }
.wpcf7-form .cc-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wpcf7-form .cc-privacy { font-size: 14px; line-height: 1.6; }
.cc-contact .cc-privacy, .cc-contact .cc-privacy a { color: #c3ccd2; }
.cc-contact .wpcf7-not-valid-tip { color: #ffbab0; }
.cc-contact .wpcf7-form label { color: #c3ccd2; }
.cc-price__amount { white-space: nowrap; flex-shrink: 0; }
.cc-contact .wpcf7-response-output { color: white; padding: 16px; }
.cc-services-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; list-style: none; padding: 0; }
.cc-services-grid a { display: block; padding: 20px; border: 1px solid #dfe3e6; min-height: 80px; }
@media (max-width: 600px) { .cc-services-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--cc-bg);
	color: var(--cc-ink);
	font-family: var(--cc-text);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--cc-link);
	text-decoration: none;
}

a:hover {
	color: var(--cc-primary-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--cc-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

h1,
h2,
h3,
h4 {
	font-family: var(--cc-display);
	margin: 0;
	color: var(--cc-ink);
}

h1 {
	font-size: 66px;
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: -0.035em;
}

h2 {
	font-size: 44px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.03em;
}

h3 {
	font-size: 30px;
	line-height: 1.16;
	font-weight: 600;
	letter-spacing: -0.02em;
}

h4 {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
}

p {
	margin: 0 0 var(--cc-s4);
	color: var(--cc-body);
}

.cc-skip {
	position: absolute;
	left: -9999px;
}

.cc-skip:focus {
	left: var(--cc-s4);
	top: var(--cc-s4);
	z-index: 100;
	padding: var(--cc-s3) var(--cc-s5);
	background: var(--cc-ink);
	color: #fff;
	border-radius: var(--cc-radius-field);
}

/* Le conteneur porte padding-inline SEUL : un raccourci padding ecraserait
   le rythme vertical des sections. */
.cc-wrap {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
}

.cc-section {
	padding-block: var(--cc-section);
}

.cc-section--tight {
	padding-block: calc(var(--cc-section) / 2);
}

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

.cc-lede {
	font-size: 20px;
	line-height: 1.58;
	color: var(--cc-body);
}

/* ==========================================================================
   3. Boutons
   ========================================================================== */

.cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-s2);
	min-height: 46px;
	padding: 15px 30px;
	font-family: var(--cc-text);
	font-size: 17px;
	font-weight: 600;
	border-radius: var(--cc-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 180ms ease, color 180ms ease;
}

.cc-btn--primary {
	background: var(--cc-primary);
	color: #fff;
}

.cc-btn--primary:hover {
	background: var(--cc-primary-hover);
	color: #fff;
	text-decoration: none;
}

.cc-btn--ghost {
	background: transparent;
	color: var(--cc-ink);
	border-color: var(--cc-border);
}

.cc-btn--ghost:hover {
	background: var(--cc-surface);
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-btn--sm {
	min-height: 44px;
	padding: 12px 22px;
	font-size: 15px;
}

/* ==========================================================================
   4. En-tete
   ========================================================================== */

/* position: relative est indispensable : sans lui, le menu mobile ouvert
   s'ancre sur le body et se place hors de l'ecran, mesure a top: -209 px. */
.cc-header {
	position: relative;
	border-bottom: 1px solid transparent;
	background: var(--cc-bg);
}

.cc-header__inner {
	display: flex;
	align-items: center;
	gap: var(--cc-s8);
	padding-block: var(--cc-s5);
}

.cc-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cc-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cc-ink);
	flex-shrink: 0;
}

/* La marque du logo, detouree du fichier officiel. alt vide : le nom qui suit
   porte deja l'information, la repeter ferait doublon au lecteur d'ecran. */
.cc-brand__mark {
	width: auto;
	height: 34px;
	flex-shrink: 0;
}

.cc-brand:hover {
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-nav {
	flex-grow: 1;
}

.cc-nav__list {
	display: flex;
	align-items: center;
	gap: var(--cc-s6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-nav__link {
	display: inline-block;
	padding-block: var(--cc-s2);
	font-size: 15px;
	font-weight: 500;
	color: #36424a;
	white-space: nowrap;
}

.cc-nav__link:hover,
.cc-nav__link[aria-current="page"] {
	color: var(--cc-primary);
	text-decoration: none;
}

.cc-nav__link[aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--cc-primary);
}

.cc-header__tel {
	font-size: 15px;
	font-weight: 500;
	color: #36424a;
	white-space: nowrap;
}

/* Bouton d'appel de l'en-tete : masque au-dessus de 480 px, ou le bouton
   texte tient. Voir la note dans header.php. */
.cc-header__appel {
	display: none;
	flex-shrink: 0;
	width: 46px;
	min-width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--cc-primary);
	border-radius: var(--cc-radius-pill);
}

.cc-header__appel:hover {
	background: var(--cc-primary-hover);
	color: #fff;
	text-decoration: none;
}

.cc-burger {
	display: none;
	flex-shrink: 0;
	width: 46px;
	min-width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-pill);
	cursor: pointer;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.cc-hero__inner {
	display: flex;
	gap: 72px;
	align-items: center;
	padding-block: 64px 72px;
}

.cc-hero__text {
	flex-grow: 1;
	min-width: 0;
}

/* Hero sans portrait : une seule colonne, mesure de lecture gardee sur le
   titre et l'accroche pour ne pas etaler le texte sur 1440 px. */
.cc-hero__inner--large {
	flex-direction: column;
	align-items: flex-start;
}

.cc-hero__inner--large h1 {
	max-width: 900px;
}

.cc-hero__inner--large .cc-lede {
	max-width: 720px;
}

.cc-hero h1 {
	max-width: 700px;
	margin-bottom: var(--cc-s6);
}

.cc-hero .cc-lede {
	max-width: 620px;
	margin-bottom: var(--cc-s7);
}

.cc-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--cc-s5);
	flex-wrap: wrap;
}

.cc-hero__link {
	font-size: 17px;
	font-weight: 600;
}

/* margin: 0 est indispensable : le navigateur applique 1em 40px a <figure>,
   ce qui faisait deborder la page de 22 px a 375 px de large. */
.cc-portrait {
	margin: 0;
	width: 452px;
	flex-shrink: 0;
	background: var(--cc-surface);
	border-radius: var(--cc-radius);
	overflow: hidden;
}

.cc-portrait img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	object-position: center top;
}

.cc-portrait__card {
	padding: var(--cc-s5) var(--cc-s6);
	background: var(--cc-bg);
	border-top: 3px solid var(--cc-brand);
}

.cc-portrait__name {
	display: block;
	font-family: var(--cc-display);
	font-size: 22px;
	font-weight: 600;
	margin-bottom: var(--cc-s1);
}

.cc-portrait__role {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	color: var(--cc-muted);
}

/* ==========================================================================
   6. Selecteur de moment
   ========================================================================== */

.cc-moments {
	background: var(--cc-surface);
}

.cc-moments__head {
	display: flex;
	gap: 72px;
	align-items: flex-end;
	margin-bottom: var(--cc-s7);
}

.cc-moments__head h2 {
	flex-grow: 1;
	max-width: 700px;
	margin: 0;
}

.cc-moments__head p {
	width: 400px;
	flex-shrink: 0;
	margin: 0 0 var(--cc-s1);
	font-size: 17px;
}

.cc-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--cc-s7);
}

.cc-pill {
	min-height: 46px;
	padding: 13px 22px;
	font-family: var(--cc-text);
	font-size: 16px;
	font-weight: 600;
	color: #36424a;
	background: var(--cc-bg);
	border: 1px solid #c8d0d5;
	border-radius: var(--cc-radius-pill);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cc-pill:hover {
	border-color: var(--cc-primary);
	color: var(--cc-primary);
}

.cc-pill[aria-pressed="true"] {
	background: var(--cc-primary);
	border-color: var(--cc-primary);
	color: #fff;
}

.cc-panel {
	display: block;
	min-height: 400px;
	padding: var(--cc-s8) 44px;
	background: var(--cc-bg);
	border-radius: var(--cc-radius);
}

/* ==========================================================================
   7 bis. Situations
   --------------------------------------------------------------------------
   La page d'accueil affiche la phrase du client, pas le nom de la prestation.
   Decision de Cem du 19/09/2026. Six situations par moment au maximum : a
   375 px chacune occupe une ligne compacte, donc six lignes tiennent dans un
   ecran la ou vingt vignettes rendraient la page interminable.
   ========================================================================== */

.cc-situations {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cc-s4);
}

.cc-situation {
	display: flex;
}

.cc-situation__link,
.cc-situation--todo {
	display: flex;
	flex-direction: column;
	gap: var(--cc-s2);
	width: 100%;
	min-height: 132px;
	padding: var(--cc-s6);
	background: var(--cc-surface);
	border: 1px solid transparent;
	border-radius: var(--cc-radius);
	transition: background-color 180ms ease, border-color 180ms ease;
}

.cc-situation__link:hover {
	background: var(--cc-bg);
	border-color: var(--cc-primary);
	text-decoration: none;
}

.cc-situation__q {
	font-family: var(--cc-display);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--cc-ink);
	flex-grow: 1;
}

.cc-situation__svc {
	font-size: 14px;
	line-height: 1.4;
	color: var(--cc-muted);
}

.cc-situation__link .cc-chevron {
	color: var(--cc-primary);
	margin-top: var(--cc-s1);
}

.cc-situation__link:hover .cc-chevron {
	transform: translateX(3px);
}

.cc-situation--todo {
	color: var(--cc-muted);
	background: transparent;
	border-color: var(--cc-border);
	border-style: dashed;
}

.cc-situation--todo .cc-situation__q {
	color: var(--cc-muted);
}

.cc-situation__soon {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.cc-panel__foot {
	margin: var(--cc-s7) 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cc-body);
}

.cc-panel__foot a {
	font-weight: 600;
	white-space: nowrap;
}

/* Guides du domaine ouvert, sous les situations du meme moment. */
.cc-panel__guides {
	margin-top: var(--cc-s6);
	padding-top: var(--cc-s6);
	border-top: 1px solid var(--cc-border);
}

.cc-panel__guides-titre {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-muted);
	margin-bottom: var(--cc-s3);
}

.cc-panel__guides ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cc-s4) var(--cc-s7);
}

.cc-panel__guides a {
	display: flex;
	align-items: flex-start;
	gap: var(--cc-s2);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
}

.cc-panel__guides .cc-chevron {
	flex-shrink: 0;
	margin-top: 5px;
}

.cc-panel__intro {
	width: 380px;
	flex-shrink: 0;
}

.cc-panel__intro h3 {
	margin-bottom: var(--cc-s4);
}

.cc-panel__intro p {
	margin-bottom: var(--cc-s5);
}

.cc-panel__cta {
	font-size: 17px;
	font-weight: 600;
}

/* Sans JavaScript, tous les panneaux restent affiches et lisibles. */
.cc-panel[hidden] {
	display: none;
}

.no-js .cc-panel[hidden] {
	display: flex;
}

.no-js .cc-pills {
	display: none;
}

/* ==========================================================================
   7. Index de services
   ========================================================================== */

.cc-index {
	flex-grow: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 44px;
	align-content: start;
}

.cc-index--single {
	grid-template-columns: minmax(0, 1fr);
}

.cc-index__row {
	border-bottom: 1px solid var(--cc-border);
}

.cc-index__link {
	display: flex;
	align-items: center;
	gap: var(--cc-s3);
	min-height: 46px;
	padding-block: 15px;
	font-size: 17px;
	font-weight: 500;
	color: var(--cc-ink);
}

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

.cc-index__label {
	flex-grow: 1;
}

.cc-chevron {
	flex-shrink: 0;
	color: var(--cc-primary);
	transition: transform 180ms ease;
}

.cc-index__link:hover .cc-chevron {
	transform: translateX(3px);
}

.cc-index__row--todo {
	display: flex;
	align-items: center;
	gap: var(--cc-s3);
	min-height: 46px;
	padding-block: 15px;
	font-size: 17px;
	color: var(--cc-muted);
}

.cc-index__row--todo .cc-index__label {
	flex-grow: 1;
}

.cc-index__soon {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

/* ==========================================================================
   8. Engagements
   ========================================================================== */

.cc-proof__inner {
	display: flex;
	gap: 72px;
}

.cc-proof__head {
	width: 400px;
	flex-shrink: 0;
}

.cc-proof__grid {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cc-s7) 56px;
}

.cc-proof__item h3 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0;
	margin-bottom: var(--cc-s2);
}

.cc-proof__item p {
	margin: 0;
	font-size: 16px;
}

/* ==========================================================================
   9. Tarifs
   ========================================================================== */

.cc-prices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: var(--cc-s6);
}

.cc-price {
	display: flex;
	flex-direction: column;
	gap: var(--cc-s3);
	padding: var(--cc-s7);
	background: var(--cc-surface);
	border-radius: var(--cc-radius);
}

.cc-price--invert {
	background: var(--cc-ink);
}

.cc-price--invert h3,
.cc-price--invert .cc-price__amount {
	color: #fff;
}

.cc-price--invert p,
.cc-price--invert .cc-price__unit {
	color: var(--cc-on-dark);
}

.cc-price--invert a {
	color: var(--cc-accent-on-dark);
}

.cc-price h3 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
}

.cc-price p {
	flex-grow: 1;
	margin: 0;
	font-size: 15px;
	line-height: 1.58;
	color: var(--cc-muted);
}

.cc-price__line {
	display: flex;
	align-items: baseline;
	gap: var(--cc-s2);
}

.cc-price__amount {
	font-family: var(--cc-display);
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

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

.cc-price__link {
	font-size: 16px;
	font-weight: 600;
}

.cc-prices__note {
	margin: 0;
	font-size: 15px;
	color: var(--cc-muted);
}

/* ==========================================================================
   10. Guides
   ========================================================================== */

.cc-guides__head {
	display: flex;
	align-items: flex-end;
	gap: var(--cc-s8);
	padding-bottom: var(--cc-s5);
	margin-bottom: var(--cc-s7);
	border-bottom: 1px solid var(--cc-border);
}

.cc-guides__head h2 {
	flex-grow: 1;
	font-size: 36px;
}

.cc-guides__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cc-s8);
}

.cc-guide__cat {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cc-primary);
	margin-bottom: var(--cc-s2);
}

.cc-guide h3 {
	font-size: 21px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0;
	margin-bottom: var(--cc-s2);
}

.cc-guide h3 a {
	color: var(--cc-ink);
}

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

.cc-guide p {
	margin: 0;
	font-size: 15px;
	line-height: 1.58;
	color: var(--cc-muted);
}

/* ==========================================================================
   11. Contact
   ========================================================================== */

.cc-contact {
	background: var(--cc-ink);
	color: #fff;
}

.cc-contact__inner {
	display: flex;
	gap: 72px;
	padding-block: 72px;
}

.cc-contact__text {
	width: 460px;
	flex-shrink: 0;
}

.cc-contact h2 {
	color: #fff;
	margin-bottom: var(--cc-s5);
}

.cc-contact__text p {
	color: var(--cc-on-dark);
	font-size: 17px;
	line-height: 1.64;
}

.cc-contact__coords {
	display: flex;
	flex-direction: column;
	gap: var(--cc-s2);
	margin-top: var(--cc-s6);
}

.cc-contact__coords span {
	font-size: 16px;
	color: var(--cc-on-dark);
}

.cc-contact__coords a {
	font-size: 16px;
	font-weight: 500;
	color: var(--cc-accent-on-dark);
}

.cc-form {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px var(--cc-s5);
	align-content: start;
}

.cc-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cc-field--wide {
	grid-column: span 2;
}

.cc-field label {
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-on-dark);
}

.cc-field input,
.cc-field select,
.cc-field textarea {
	min-height: 50px;
	padding: 13px 14px;
	font-family: var(--cc-text);
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	background: var(--cc-field);
	border: 1px solid var(--cc-field-border);
	border-radius: var(--cc-radius-field);
}

.cc-field textarea {
	resize: vertical;
}

.cc-form button {
	grid-column: span 2;
	justify-self: start;
}

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.cc-footer__inner {
	display: flex;
	gap: 72px;
	padding-block: 48px var(--cc-s7);
}

.cc-footer__brand {
	width: 340px;
	flex-shrink: 0;
}

.cc-footer__brand span {
	display: block;
	font-family: var(--cc-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: var(--cc-s3);
}

.cc-footer__brand p {
	margin: 0;
	font-size: 15px;
	color: var(--cc-muted);
}

.cc-footer__cols {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cc-s7);
}

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

.cc-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cc-footer__col a,
.cc-footer__col span {
	font-size: 15px;
	line-height: 1.5;
	color: #36424a;
}

.cc-footer__legal {
	display: flex;
	align-items: center;
	gap: var(--cc-s6);
	padding-block: var(--cc-s5) var(--cc-s7);
	border-top: 1px solid var(--cc-border);
}

.cc-footer__legal span {
	flex-grow: 1;
	font-size: 14px;
	color: var(--cc-silver);
}

.cc-footer__legal a {
	font-size: 14px;
	color: var(--cc-silver);
}

/* ==========================================================================
   13. Hub de moment et article
   ========================================================================== */

.cc-hub__head {
	display: flex;
	gap: 72px;
	align-items: flex-end;
	padding-block: 56px var(--cc-s8);
}

.cc-hub__head h1 {
	flex-grow: 1;
	max-width: 760px;
	font-size: 56px;
}

.cc-hub__head p {
	width: 400px;
	flex-shrink: 0;
	margin: 0 0 var(--cc-s1);
}

/* La gouttiere est portee par padding-inline, et max-width l'inclut (box-sizing
   border-box), d'ou le calc : la colonne de texte reste a 760 px en desktop et
   garde 18 px de marge en mobile. Sans ce padding, le corps touchait les deux
   bords de l'ecran a 375 px, mesure sur les 421 pages. */
.cc-article {
	max-width: calc(760px + 2 * var(--cc-gutter));
	margin-inline: auto;
	padding-inline: var(--cc-gutter);
	padding-block: 56px var(--cc-section);
}

.cc-article h1 {
	font-size: 48px;
	margin-bottom: var(--cc-s6);
}

.cc-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-s4);
	font-size: 15px;
	color: var(--cc-muted);
	margin-bottom: var(--cc-s8);
	padding-bottom: var(--cc-s5);
	border-bottom: 1px solid var(--cc-border);
}

.cc-article__body {
	font-size: 18px;
	line-height: 1.72;
}

.cc-article__body h2 {
	font-size: 32px;
	margin-block: var(--cc-s8) var(--cc-s4);
}

.cc-article__body h3 {
	font-size: 24px;
	margin-block: var(--cc-s7) var(--cc-s3);
}

.cc-article__body ul,
.cc-article__body ol {
	padding-left: var(--cc-s6);
	color: var(--cc-body);
}

.cc-article__body li {
	margin-bottom: var(--cc-s2);
}

.cc-article__body img {
	border-radius: var(--cc-radius);
	margin-block: var(--cc-s7);
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width: 1279px) {
	:root {
		--cc-gutter: 40px;
		--cc-section: 72px;
	}

	.cc-hero__inner,
	.cc-moments__head,
	.cc-proof__inner,
	.cc-contact__inner,
	.cc-footer__inner,
	.cc-hub__head {
		gap: var(--cc-s8);
	}

	h1 {
		font-size: 52px;
	}

	.cc-portrait {
		width: 360px;
	}
}

@media (max-width: 1279px) {
	.cc-nav,
	.cc-header__tel {
		display: none;
	}

	.cc-burger {
		display: inline-flex;
	}

	.cc-nav--ouvert {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		z-index: 40;
		padding: var(--cc-s6) var(--cc-gutter) var(--cc-s8);
		background: var(--cc-bg);
		border-bottom: 1px solid var(--cc-border);
	}

	.cc-nav--ouvert .cc-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.cc-nav--ouvert .cc-nav__link {
		display: block;
		padding-block: var(--cc-s4);
		font-size: 18px;
		border-bottom: 1px solid var(--cc-border);
	}
}

@media (max-width: 1023px) {
	.cc-hero__inner,
	.cc-proof__inner,
	.cc-contact__inner,
	.cc-footer__inner,
	.cc-moments__head,
	.cc-hub__head {
		flex-direction: column;
		align-items: stretch;
	}

	.cc-portrait,
	.cc-proof__head,
	.cc-contact__text,
	.cc-footer__brand,
	.cc-panel__intro,
	.cc-moments__head p,
	.cc-hub__head p {
		width: 100%;
	}

	.cc-panel {
		min-height: 0;
	}

	.cc-situations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cc-index {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-prices,
	.cc-guides__grid,
	.cc-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	:root {
		--cc-gutter: 18px;
		--cc-section: 48px;
	}

	body {
		font-size: 16px;
	}

	/* En-tete mobile : la marque prend la place restante, le bouton et le menu
	   ne se compriment jamais. Sans ces trois regles, la barre deborde de 63 px
	   a 375 px et sort le bouton de menu de l'ecran. */
	.cc-header__inner {
		gap: var(--cc-s3);
		padding-block: var(--cc-s4);
	}

	.cc-brand {
		flex-grow: 1;
		min-width: 0;
		gap: 8px;
		font-size: 19px;
	}

	.cc-brand__mark {
		height: 30px;
	}

	.cc-header__inner .cc-btn {
		flex-shrink: 0;
		padding-inline: var(--cc-s4);
		font-size: 14px;
	}
}

/* Sous 480 px : le bouton texte cede la place au bouton d'appel. */
@media (max-width: 479px) {
	.cc-header__cta {
		display: none;
	}

	.cc-header__appel {
		display: inline-flex;
	}

	.cc-brand {
		font-size: 17px;
	}

	h1 {
		font-size: 39px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 25px;
	}

	.cc-lede {
		font-size: 17px;
	}

	.cc-hero__inner {
		padding-block: var(--cc-s7) var(--cc-s8);
	}

	.cc-hero__actions .cc-btn {
		width: 100%;
	}

	.cc-portrait img {
		height: 252px;
		object-position: center 20%;
	}

	.cc-panel {
		padding: var(--cc-s5) var(--cc-s4);
	}

	/* Sur telephone la vignette devient une ligne : la phrase du client, le nom
	   de la prestation dessous, le chevron a droite. Six lignes tiennent dans
	   un ecran, six cartes de 132 px non. */
	.cc-situations {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.cc-situation__link,
	.cc-situation--todo {
		flex-direction: row;
		align-items: center;
		gap: var(--cc-s3);
		min-height: 56px;
		padding: var(--cc-s3) 0;
		background: transparent;
		border: 0;
		border-bottom: 1px solid var(--cc-border);
		border-radius: 0;
	}

	.cc-situation:last-child .cc-situation__link,
	.cc-situation:last-child.cc-situation--todo {
		border-bottom: 0;
	}

	.cc-situation__link:hover {
		background: transparent;
		border-color: var(--cc-border);
	}

	.cc-situation__q {
		font-size: 16px;
		flex-grow: 0;
	}

	/* Le nom de la prestation passe sous la phrase, sans casser l'alignement
	   du chevron : les deux libelles forment une colonne, le chevron reste a
	   droite de la ligne. */
	.cc-situation__link {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "q chev" "svc chev";
		align-items: center;
		column-gap: var(--cc-s3);
		row-gap: 2px;
	}

	.cc-situation__q {
		grid-area: q;
	}

	.cc-situation__svc {
		grid-area: svc;
		font-size: 13px;
	}

	.cc-situation__link .cc-chevron {
		grid-area: chev;
		margin-top: 0;
	}

	.cc-panel__foot {
		margin-top: var(--cc-s6);
		font-size: 15px;
	}

	.cc-panel__guides ul {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cc-s3);
	}

	.cc-prices,
	.cc-guides__grid,
	.cc-proof__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-field--wide,
	.cc-form button {
		grid-column: span 1;
	}

	.cc-form button {
		justify-self: stretch;
	}

	.cc-hub__head h1 {
		font-size: 36px;
	}

	.cc-article h1 {
		font-size: 34px;
	}

	.cc-article__body {
		font-size: 17px;
	}

	.cc-footer__legal {
		flex-wrap: wrap;
		gap: var(--cc-s3);
	}

	.cc-footer__legal span {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   15. Preferences utilisateur
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.cc-header,
	.cc-footer,
	.cc-pills,
	.cc-contact {
		display: none;
	}
}

/* ==========================================================================
   16. Bande de preuve du corpus
   --------------------------------------------------------------------------
   Remplace la section « Ce que nous avons deja ecrit », devenue un doublon
   depuis que chaque onglet porte ses propres guides. Garde l'argument du
   corpus sans repeter trois titres du meme domaine.
   ========================================================================== */

.cc-corpus {
	display: flex;
	align-items: center;
	gap: var(--cc-s8);
	padding-block: var(--cc-s7);
	border-top: 1px solid var(--cc-border);
	border-bottom: 1px solid var(--cc-border);
}

.cc-corpus > div {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.cc-corpus__chiffre {
	font-family: var(--cc-display);
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--cc-primary);
}

.cc-corpus__mot {
	margin-top: var(--cc-s2);
	font-size: 15px;
	font-weight: 600;
	color: var(--cc-muted);
}

.cc-corpus p {
	flex-grow: 1;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	max-width: 720px;
}

.cc-corpus .cc-btn {
	flex-shrink: 0;
}

@media (max-width: 1023px) {
	.cc-corpus {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cc-s5);
	}
}

/* ==========================================================================
   17. Bandeau de consentement (CookieYes)
   --------------------------------------------------------------------------
   Mesure du 19/09/2026 a 375 px : le bandeau occupait 366 px sur 812, soit
   45 % de l'ecran, et recouvrait le bouton principal du hero. Decomposition :
   40 px de marges, 24 de titre, 120 de texte, et 168 pour TROIS boutons
   empiles. Les boutons passent donc en une rangee.

   Deux regles tenues :
   - aucun texte legal n'est tronque ni masque ;
   - « Tout refuser » garde exactement le meme poids visuel que « Tout accepter »
     (meme taille, meme graisse, meme hauteur). Rendre le refus moins facile que
     l'acceptation serait un defaut de conformite, pas une economie de place.

   Les selecteurs .cky- appartiennent a l'extension. Toute mise a jour exige
   la recette avant/refus/acceptation/retrait dans scripts/qa.cjs :
   un changement partiel du DOM peut produire une regression.
   ========================================================================== */

.cky-consent-container .cky-consent-bar {
	padding: var(--cc-s4) !important;
	border-radius: var(--cc-radius) !important;
	box-shadow: 0 2px 24px rgba(16, 26, 32, 0.14) !important;
}

.cky-consent-container .cky-title {
	font-family: var(--cc-display) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--cc-ink) !important;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p {
	font-family: var(--cc-text) !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--cc-body) !important;
}

/* Les trois choix sur une rangee : 168 px d'empilement deviennent 44. */
.cky-consent-container .cky-notice-btn-wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: var(--cc-s2) !important;
	padding-top: var(--cc-s3) !important;
}

/* L'extension pose width: 341px EN DUR sur chaque bouton, ce qui l'emporte sur
   flex-basis et force un bouton par ligne. width: auto est donc indispensable.
   Deux rangees plutot qu'une : a 375 px, trois libelles sur une seule ligne ne
   tiennent qu'au prix d'une police illisible. Accepter et refuser occupent la
   premiere rangee, a parts egales ; personnaliser prend la seconde. */
.cky-consent-container .cky-notice-btn-wrapper button,
.cky-consent-container .cky-notice-btn-wrapper a {
	width: auto !important;
	flex: 1 1 calc(50% - var(--cc-s2)) !important;
	min-width: 0 !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	font-family: var(--cc-text) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: var(--cc-radius-pill) !important;
	white-space: nowrap !important;
}

/* Ordre explicite : accepter et refuser cote a cote, personnaliser dessous.
   L'extension les sortait dans un ordre different de l'ordre du document. */
.cky-consent-container .cky-btn-accept {
	order: 1 !important;
}

.cky-consent-container .cky-btn-reject {
	order: 2 !important;
}

.cky-consent-container .cky-btn-customize {
	order: 3 !important;
	flex-basis: 100% !important;
}

/* Accepter et refuser : meme forme, meme taille, seule la couleur differe. */
.cky-consent-container .cky-btn-accept {
	background: var(--cc-primary) !important;
	border: 1px solid var(--cc-primary) !important;
	color: #fff !important;
}

.cky-consent-container .cky-btn-reject {
	background: var(--cc-body) !important;
	border: 1px solid var(--cc-body) !important;
	color: #fff !important;
}

.cky-consent-container .cky-btn-customize {
	background: transparent !important;
	border: 1px solid var(--cc-border) !important;
	color: var(--cc-ink) !important;
}

@media (max-width: 767px) {
	.cky-consent-container {
		inset-inline: var(--cc-s3) !important;
		width: auto !important;
		max-width: none !important;
	}

	.cky-consent-container .cky-title,
	.cky-consent-container .cky-notice-des,
	.cky-consent-container .cky-notice-btn-wrapper {
		padding-inline: 0 !important;
	}
}