/* Connectic Monétique — styles des compositions (classes cm-*). Couleurs et typo : theme.json. */

:root {
	--cm-radius: 14px;
	--cm-ombre: 0 10px 30px rgba(10, 45, 73, .08);
	--cm-nuit: var(--wp--preset--color--nuit);
	--cm-bleu: var(--wp--preset--color--bleu);
	--cm-clair: var(--wp--preset--color--clair);
	--cm-orange: var(--wp--preset--color--orange);
	--cm-orange-pale: var(--wp--preset--color--orange-pale);
	--cm-fond: var(--wp--preset--color--fond);
	--cm-bordure: var(--wp--preset--color--bordure);
	--cm-gris: var(--wp--preset--color--gris);
}

body { margin: 0; -webkit-font-smoothing: antialiased; }
.cm-main > .wp-block-post-content > :first-child { margin-top: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* ---------- En-tête ---------- */
.cm-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--cm-bordure);
	padding-top: .65rem; padding-bottom: .65rem;
}
.admin-bar .cm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .cm-header { top: 46px; } }
.cm-logo { margin: 0; flex-shrink: 1; min-width: 0; }
.cm-logo img { display: block; max-width: 100%; height: auto; }
.cm-header__actions { gap: 1.25rem; }
.cm-nav a { color: var(--cm-nuit); text-decoration: none; }
.cm-nav a:hover { color: var(--cm-bleu); }
.cm-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--cm-bordure) !important;
	border-radius: 10px; box-shadow: var(--cm-ombre);
	padding: .4rem 0; min-width: 240px !important;
}
.cm-nav .wp-block-navigation__submenu-container a { padding: .5rem 1rem !important; }
.cm-header__cta .wp-block-button__link { padding: .6rem 1.2rem; font-size: .95rem; }
@media (max-width: 960px) {
	.cm-header .cm-header__cta { display: none; }
}
@media (max-width: 600px) {
	.cm-logo, .cm-logo img { width: 165px !important; }
}
.cm-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.cm-nav .wp-block-navigation-item__content { white-space: nowrap; }

/* ---------- Bandeaux ---------- */
.cm-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--cm-nuit) 0%, var(--cm-bleu) 100%);
	color: #fff;
	padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem);
}
.cm-hero::after {
	content: ""; position: absolute; right: -12rem; top: -12rem;
	width: 36rem; height: 36rem; border-radius: 50%;
	background: radial-gradient(circle, rgba(110, 193, 228, .28) 0%, rgba(110, 193, 228, 0) 70%);
	pointer-events: none;
}
.cm-hero > * { position: relative; z-index: 1; }
.cm-hero h1 { color: #fff; margin-top: .5rem; }
.cm-hero .cm-chapo { color: rgba(255, 255, 255, .86); }
.cm-hero .is-style-outline .wp-block-button__link { color: #fff; border: 2px solid rgba(255, 255, 255, .7); background: transparent; }
.cm-hero .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); }
.cm-hero--page { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.cm-hero--page .cm-chapo { max-width: 46rem; }
.cm-hero__visuel { display: flex; justify-content: center; }
.cm-hero__tpe { margin: 0; position: relative; }
.cm-hero__tpe::before {
	content: ""; position: absolute; inset: 8% -10%;
	background: radial-gradient(circle, rgba(110, 193, 228, .45), rgba(110, 193, 228, 0) 65%);
}
.cm-hero__tpe img {
	position: relative; display: block; width: min(300px, 70vw); height: auto;
	background: #fff; border-radius: 28px; padding: 1.25rem;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
	transform: rotate(-4deg);
}

.cm-surtitre {
	color: var(--cm-orange); font-size: .8rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; margin-bottom: 0;
}
.cm-section .cm-surtitre { color: var(--cm-bleu); }
.cm-section .cm-surtitre::before {
	content: ""; display: inline-block; width: 1.5rem; height: 3px; border-radius: 2px;
	background: var(--cm-orange); vertical-align: middle; margin-right: .6rem;
}
.cm-chapo { font-size: var(--wp--preset--font-size--large); line-height: 1.55; }

.cm-pastilles { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.cm-pastilles span {
	display: inline-block; padding: .3rem .8rem; border-radius: 999px;
	font-size: .82rem; font-weight: 600;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
}
.cm-pastilles--claires { margin-top: 0; }
.cm-pastilles--claires span { background: #fff; border-color: var(--cm-bordure); color: var(--cm-nuit); }

/* ---------- Sections ---------- */
.cm-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.cm-section--serre { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.cm-section--fond { background: var(--cm-fond); }
.cm-section > h2 { max-width: 40rem; margin-top: .4rem; margin-bottom: 2rem; }
.cm-section > h2 + p { max-width: 46rem; margin-top: -1rem; margin-bottom: 2rem; color: var(--cm-gris); }

/* ---------- Chiffres clés ---------- */
.cm-chiffres { gap: 1rem; }
.cm-chiffre {
	gap: .25rem; padding: 1.4rem 1.5rem; border-radius: var(--cm-radius);
	background: #fff; border: 1px solid var(--cm-bordure); border-top: 4px solid var(--cm-orange);
}
.cm-chiffre__valeur { margin: 0; font-size: 2rem; font-weight: 800; color: var(--cm-nuit); line-height: 1.1; }
.cm-chiffre__libelle { margin: 0; color: var(--cm-gris); font-size: .92rem; line-height: 1.45; }

/* ---------- Cartes ---------- */
.cm-cartes, .cm-avantages { gap: 1.25rem; }
.cm-carte, .cm-avantage {
	position: relative; gap: .5rem;
	background: #fff; border: 1px solid var(--cm-bordure); border-radius: var(--cm-radius);
	padding: 1.75rem; transition: box-shadow .2s, transform .2s;
}
.cm-carte:hover { box-shadow: var(--cm-ombre); transform: translateY(-2px); }
.cm-carte h3, .cm-avantage h3 { margin: 0; }
.cm-carte p, .cm-avantage p { margin: 0; color: var(--cm-gris); }
.cm-avantage { border: 0; background: transparent; padding: .5rem 0 0 4.25rem; }
.cm-lien-fleche { margin-top: auto !important; padding-top: .5rem; }
.cm-lien-fleche a { font-weight: 600; text-decoration: none; }
.cm-lien-fleche a::after { content: " →"; transition: margin .2s; }
.cm-lien-fleche a:hover::after { margin-left: .25rem; }

/* Icônes : pastille (::before) + pictogramme masqué (::after) */
.cm-ico::before {
	content: ""; display: block; width: 3rem; height: 3rem; flex-shrink: 0;
	border-radius: 12px; background: var(--cm-orange-pale); margin-bottom: .5rem;
}
.cm-ico::after {
	content: ""; position: absolute; top: calc(1.75rem + .7rem); left: calc(1.75rem + .7rem);
	width: 1.6rem; height: 1.6rem; background: var(--cm-bleu);
	-webkit-mask: var(--cm-picto) center / contain no-repeat; mask: var(--cm-picto) center / contain no-repeat;
}
.cm-avantage.cm-ico::before { position: absolute; left: 0; top: .5rem; margin: 0; }
.cm-avantage.cm-ico::after { top: 1.2rem; left: .7rem; }

.cm-ico--terminal { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Crect x='8' y='5' width='8' height='5' rx='1'/%3E%3Cpath d='M9 14h.01M12 14h.01M15 14h.01M9 17h.01M12 17h.01M15 17h.01'/%3E%3C/svg%3E"); }
.cm-ico--globe { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }
.cm-ico--automate { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Crect x='7' y='5' width='10' height='7' rx='1'/%3E%3Cpath d='M8 16h3M15 15v3'/%3E%3C/svg%3E"); }
.cm-ico--outils { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L22 14l-8 8-2.3-2.3a4 4 0 0 0-5-5L4 12l8-8z'/%3E%3Cpath d='M9 15l-6 6'/%3E%3C/svg%3E"); }
.cm-ico--banque { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18'/%3E%3C/svg%3E"); }
.cm-ico--tarif { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E"); }
.cm-ico--bouclier { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.cm-ico--horloge { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.cm-ico--maison { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.cm-ico--lien { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.cm-ico--mobile { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.cm-ico--ecran { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4M6 13l4-4 3 3 5-5'/%3E%3C/svg%3E"); }
.cm-ico--carte { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.cm-ico--caisse { --cm-picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='18' height='8' rx='1'/%3E%3Cpath d='M7 13V8h10v5M9 3h6v5H9zM7 17h.01M11 17h2'/%3E%3C/svg%3E"); }

/* ---------- Étapes ---------- */
.cm-etapes { gap: 1.25rem; counter-reset: cm-etape; }
.cm-etape {
	counter-increment: cm-etape; gap: .5rem;
	background: #fff; border-radius: var(--cm-radius); padding: 1.75rem; border: 1px solid var(--cm-bordure);
}
.cm-etape::before {
	content: counter(cm-etape);
	display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: var(--cm-orange); color: var(--cm-nuit); font-weight: 800; margin-bottom: .5rem;
}
.cm-etape h3 { margin: 0; }
.cm-etape p { margin: 0; color: var(--cm-gris); }

/* ---------- Terminaux ---------- */
.cm-terminaux { gap: 1.25rem; }
.cm-terminal {
	gap: .35rem; background: #fff; border: 1px solid var(--cm-bordure);
	border-radius: var(--cm-radius); padding: 1.25rem 1.5rem 1.5rem;
}
.cm-terminal__photo { margin: 0 0 .75rem; background: var(--cm-fond); border-radius: 10px; padding: 1rem; width: 100%; box-sizing: border-box; }
.cm-terminal__photo img { display: block; height: 170px; width: 100%; object-fit: contain; }
.cm-terminal h3 { margin: 0; }
.cm-terminal__type { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-bleu); }
.cm-terminal__prix { margin: .25rem 0 0; color: var(--cm-gris); font-size: .95rem; }
.cm-terminal__prix strong { color: var(--cm-nuit); font-size: 1.35rem; }
.cm-terminal__options { margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--cm-bordure); font-size: .88rem; color: var(--cm-gris); }

/* ---------- Tableaux ---------- */
.cm-tableau { overflow-x: auto; margin-bottom: 1rem; }
.cm-tableau table { border-collapse: collapse; width: 100%; min-width: 34rem; background: #fff; }
.cm-tableau th, .cm-tableau td { border: 0; border-bottom: 1px solid var(--cm-bordure); padding: .8rem 1rem; text-align: center; }
.cm-tableau th:first-child, .cm-tableau td:first-child { text-align: left; }
.cm-tableau thead th { background: var(--cm-nuit); color: #fff; font-weight: 600; }
.cm-tableau thead { border: 0; }
.cm-tableau tbody tr:nth-child(even) { background: var(--cm-fond); }
.cm-tableau td:last-child { white-space: nowrap; }
.cm-tableau td:first-child { white-space: normal; }

/* ---------- Encadrés & textes ---------- */
.cm-note {
	background: var(--cm-orange-pale); border: 1px solid #F8D79C; border-radius: 10px;
	padding: .9rem 1.2rem; margin-top: 2rem;
}
.cm-petit { font-size: .85rem; color: var(--cm-gris); }
.cm-a-completer {
	background: #FFFBEA; border: 2px dashed #E0B400; border-radius: 10px;
	padding: .8rem 1.1rem; color: #6B5500;
}
.cm-coches { list-style: none; padding-left: 0; }
.cm-coches li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.cm-coches li::before {
	content: "✓"; position: absolute; left: 0; top: .05rem;
	display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
	background: var(--cm-orange-pale); color: var(--cm-bleu); font-weight: 800; font-size: .8rem;
}
.cm-encart { background: var(--cm-fond); border-radius: var(--cm-radius); padding: 1.5rem !important; align-self: flex-start; }
.cm-encart h3 { margin-top: 0; }

/* ---------- Moyens de paiement ---------- */
.cm-moyens { gap: 1rem; align-items: center; }
.cm-moyens__titre { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cm-gris); }

/* ---------- FAQ ---------- */
.cm-faq { max-width: 52rem; }
.cm-faq .wp-block-details { margin: 0; }
.cm-faq summary {
	cursor: pointer; list-style: none; font-weight: 600; color: var(--cm-nuit);
	font-size: 1.05rem; padding-right: 2rem; position: relative;
}
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary::after {
	content: "+"; position: absolute; right: 0; top: -.15rem;
	font-size: 1.5rem; font-weight: 400; color: var(--cm-bleu); transition: transform .2s;
}
.cm-faq details[open] summary::after { transform: rotate(45deg); }
.cm-faq details p { color: var(--cm-gris); margin-bottom: 0; }

/* ---------- Appel à contact ---------- */
.cm-cta { background: var(--cm-orange); padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
.cm-cta h2 { margin: 0; }
.cm-cta p { margin: .25rem 0 0; font-weight: 600; }
.cm-cta a { color: var(--cm-nuit); }
.cm-cta__contenu { gap: 1.5rem; }
.cm-bouton-sombre .wp-block-button__link { background: var(--cm-nuit); color: #fff; }
.cm-bouton-sombre .wp-block-button__link:hover { background: var(--cm-bleu); color: #fff; }

/* ---------- Pied de page ---------- */
.cm-footer { background: var(--cm-nuit); color: rgba(255, 255, 255, .78); padding-top: var(--wp--preset--spacing--60); padding-bottom: 1.5rem; font-size: .95rem; }
.cm-footer a { color: #fff; text-decoration: none; }
.cm-footer a:hover { color: var(--cm-clair); text-decoration: underline; }
.cm-footer__grille { gap: 2rem; }
.cm-footer__grille p { margin: 0; line-height: 1.9; }
.cm-footer__marque { font-size: 1.25rem; font-weight: 800; color: #fff; }
.cm-footer__titre { color: var(--cm-orange); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.cm-footer__bas { margin-top: 3rem !important; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; gap: .5rem 1.5rem; }
.cm-footer__bas p { margin: 0; }

@media (max-width: 781px) {
	.cm-hero .wp-block-columns { gap: 2.5rem; }
	.cm-avantage { padding-left: 4.25rem; }
}