/* ==========================================================================
   Blocs Communication Quantique
   Couleurs et polices reprises de la charte graphique et de la page
   « De la sidération à la connexion ».
   ========================================================================== */

:root {
	--cqb-bleuclair:  #38bce0;
	--cqb-bleufonce:  #0d519d;
	--cqb-bleumarine: #1f3c5c;
	--cqb-creme:      #fbf7f4;
	--cqb-peche:      #fce2cc;
	--cqb-rose:       #e63557;
	--cqb-gris:       #ececec;

	--cqb-titre: "Quicksand", Helvetica, Arial, sans-serif;
	--cqb-texte: "Lato", Helvetica, Arial, sans-serif;
}

/* --- Base d'une section -------------------------------------------------- */

.cqb-section {
	font-family: var(--cqb-texte);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--cqb-bleumarine);
	padding-block: 78px;
	padding-inline: 24px;
	overflow: hidden;
}

/* Pleine largeur, même si le thème enferme le contenu dans un conteneur. */
.cqb-section--pleine {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* ...sauf dans l'éditeur, où cela déborderait du cadre. */
.editor-styles-wrapper .cqb-section--pleine {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

.cqb-wrap {
	max-width: 1080px;
	margin-inline: auto;
}

/* Sections sur fond bleu */
.cqb-section--sombre,
.cqb-section--sombre :is(h1, h2, h3, p, li, strong, b, span) {
	color: #fff;
}

.cqb-section--sombre .cqb-chiffre { color: var(--cqb-bleuclair); }

/* --- Titres -------------------------------------------------------------- */

.cqb-section :is(h1, h2, h3) { line-height: 1.18; }

.cqb-section h2 {
	font-family: var(--cqb-titre);
	font-weight: 300;
	font-size: clamp(1.65rem, 3.4vw, 2.4rem);
	color: var(--cqb-bleumarine);
	margin-block: 0 30px;
}

.cqb-section h3 {
	font-family: var(--cqb-titre);
	font-weight: 500;
	font-size: 1.16rem;
	margin-block: 0 12px;
}

.cqb-centre { text-align: center; }
.cqb-centre h2 { text-align: center; }

/* --- Bouton -------------------------------------------------------------- */

.cqb-btn .wp-block-button__link {
	background-color: var(--cqb-bleuclair);
	color: #fff;
	font-family: var(--cqb-texte);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: 50px;
	padding: 15px 40px;
	transition: .2s ease-in-out all;
}

.cqb-btn .wp-block-button__link:hover,
.cqb-btn .wp-block-button__link:focus-visible {
	background-color: var(--cqb-bleumarine);
	color: #fff;
}

.cqb-btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--cqb-bleuclair);
	outline-offset: 3px;
}

.cqb-note {
	font-size: .84rem;
	opacity: .82;
	margin-top: 14px;
	max-width: 440px;
}

.cqb-centre .cqb-note { margin-inline: auto; }

/* --- Bandeau d'accueil --------------------------------------------------- */

.cqb-badge {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50px;
	padding: 8px 20px;
	margin-bottom: 24px;
}

.cqb-section h1 {
	font-family: var(--cqb-texte);
	font-size: clamp(1.95rem, 4.4vw, 3.05rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .005em;
	color: var(--cqb-bleuclair);
	margin-block: 0 14px;
}

.cqb-accroche {
	font-family: var(--cqb-titre);
	font-weight: 500;
	font-size: clamp(1.12rem, 2.1vw, 1.4rem);
	margin-bottom: 20px;
}

.cqb-sous {
	font-size: 1.03rem;
	font-weight: 300;
	margin-bottom: 26px;
	max-width: 520px;
}

/* Photos à coins arrondis */
.cqb-photo img {
	border-radius: 26px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	width: 100%;
	object-fit: cover;
}

.cqb-photo--claire img { box-shadow: 0 12px 34px rgba(31, 60, 92, .16); }

/* --- Manifeste ----------------------------------------------------------- */

.cqb-filet {
	width: 64px;
	height: 4px;
	background: var(--cqb-bleuclair);
	border: none;
	border-radius: 2px;
	margin: 0 auto 30px;
	opacity: 1;
}

.cqb-manifeste p {
	max-width: 690px;
	margin: 0 auto 18px;
	font-size: 1.07rem;
}

.cqb-pivot {
	font-family: var(--cqb-titre);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--cqb-bleuclair);
	max-width: 660px;
	margin: 34px auto 0;
}

/* --- Listes à pastilles -------------------------------------------------- */

.cqb-liste { list-style: none; padding-left: 0; }

.cqb-liste li {
	position: relative;
	padding: 11px 0 11px 26px;
	font-weight: 300;
	font-size: 1rem;
}

.cqb-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 21px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cqb-bleuclair);
}

/* Variante « pour qui », avec filets de séparation */
.cqb-liste--filets {
	max-width: 670px;
	margin-inline: auto;
	text-align: left;
}

.cqb-liste--filets li {
	font-size: 1.03rem;
	padding: 15px 0 15px 36px;
	border-bottom: 1px solid var(--cqb-gris);
}

.cqb-liste--filets li:last-child { border-bottom: none; }
.cqb-liste--filets li::before { left: 9px; top: 24px; }

/* --- Cartes du déroulé --------------------------------------------------- */

.cqb-cartes { flex-wrap: wrap; gap: 20px; }

.cqb-cartes .wp-block-column {
	flex-basis: 228px;
	flex-grow: 1;
	background: var(--cqb-creme);
	border-radius: 20px;
	padding: 32px 26px;
	text-align: left;
}

.cqb-etiquette {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cqb-bleuclair);
	margin-bottom: 12px;
}

.cqb-cartes p:last-child {
	font-size: .95rem;
	font-weight: 300;
	margin-bottom: 0;
}

/* --- Agathe et les chiffres ---------------------------------------------- */

.cqb-portrait img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(255, 255, 255, .35);
}

.cqb-chiffres { flex-wrap: wrap; gap: 16px 26px; margin-top: 24px; }

.cqb-chiffres .wp-block-column { flex-basis: 160px; flex-grow: 1; }

.cqb-chiffre {
	display: block;
	font-family: var(--cqb-titre);
	font-weight: 500;
	font-size: 1.7rem;
	color: var(--cqb-bleuclair);
}

.cqb-chiffres p { font-size: .83rem; opacity: .9; margin: 0; }

/* --- Questions fréquentes ------------------------------------------------ */

.cqb-faq { max-width: 730px; margin-inline: auto; }

.cqb-faq-item {
	background: #fff;
	border-radius: 18px;
	padding: 18px 26px;
	margin-bottom: 12px;
	box-shadow: 0 4px 18px rgba(31, 60, 92, .06);
}

.cqb-faq-item summary {
	font-size: 1.01rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 32px;
}

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

.cqb-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: -3px;
	color: var(--cqb-bleuclair);
	font-size: 1.5rem;
	line-height: 1;
}

.cqb-faq-item[open] summary::after { content: "–"; }

.cqb-faq-item p {
	margin-top: 12px;
	margin-bottom: 0;
	font-weight: 300;
	font-size: .96rem;
}

/* --- Zone du formulaire -------------------------------------------------- */

.cqb-inscription {
	max-width: 440px;
	scroll-margin-top: 130px;
}

.cqb-centre .cqb-inscription { margin-inline: auto; }

/* --- Colonnes et confort ------------------------------------------------- */

.cqb-duo { gap: 56px; align-items: center; }

@media (max-width: 899px) {
	.cqb-section { padding-block: 56px; }
	.cqb-duo { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.cqb-btn .wp-block-button__link { transition: none; }
}