/*
 * SACKO by Pencil – socle : polices, jetons, utilitaires (docs/04_regles-de-construction.md), base, en-tête,
 * menu, pied de page, boutons et composants communs à toutes les pages. Préfixe « sk- » (ADR-0004 § 2).
 * Palette validée le 2026-10-27 (PRD § 6.2) ; police Google Sans et style du site de référence whelp.co (2026-10-28). Espacements : rules/04-site-aere (base 4 px, interne < externe).
 */

/* ====== Police auto-hébergée (licence OFL, fichier joint dans assets/fonts/) ====== */
/* Google Sans, police du site de référence whelp.co (PRD § 6.3, 2026-10-28) : un seul fichier variable 400–700. */
@font-face {
	font-family: "Google Sans";
	src: url("../fonts/google-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ====== Jetons ====== */
:root {
	/* Couleurs (PRD § 6.2) */
	--sk-or: #c9961e;          /* filets, icônes, fonds d'accent, boutons ; texte seulement sur fond sombre */
	--sk-or-fonce: #b0820c;    /* grands titres sur fond clair */
	--sk-or-texte: #8a6508;    /* liens et petits textes or sur fond clair (contraste ≈ 5,3:1) */
	--sk-or-clair: #e8c040;    /* dégradés, survols */
	--sk-anthracite: #2b2b2b;  /* texte courant */
	--sk-noir: #202020;        /* fonds sombres */
	--sk-gris: #6b6452;        /* textes secondaires */
	--sk-argent: #b8b8b8;
	--sk-creme: #f5ebd7;       /* fonds de tableaux */
	--sk-fond-creme: #fbf6ec;  /* sections alternées */
	--sk-blanc: #fff;
	--sk-bordure: #e9dfcb;
	--sk-clair-sur-sombre: #d9d3c7;
	--sk-whatsapp: #1fa855;
	--sk-erreur: #b42318;      /* champs à corriger (formulaire de devis), contraste ≈ 6,5:1 sur blanc */
	--sk-blanc-voile: rgba(255, 255, 255, 0.92); /* en-tête translucide, légendes posées sur les photos */

	/* Polices */
	--sk-police-titres: "Google Sans", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	--sk-police-texte: "Google Sans", "Helvetica Neue", "Segoe UI", Arial, sans-serif;

	/* Tailles de police (docs/04 § 3) */
	--sk-fs-t0: clamp(2.25rem, 1.5577rem + 3.0769vw, 3.75rem); /* titre du hero (36 → 60 px sur 360–1140 px), exception docs/04 § 3.3 */
	--sk-fs-chiffre: clamp(2.75rem, 1.9423rem + 3.5897vw, 4.5rem); /* repères chiffrés (44 → 72 px), exception docs/04 § 3.3 */
	--sk-fs-t1: clamp(3rem, 2.5385rem + 2.0513vw, 4rem);
	--sk-fs-t2: clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);
	--sk-fs-t3: clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);
	--sk-fs-t4: clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);
	--sk-fs-t5: clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem);
	--sk-fs-t6: clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem);
	--sk-fs-t7: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem);
	--sk-fs-soustitre: 1.2rem;
	--sk-fs-texte: 1rem;
	--sk-fs-grand: 1.125rem;
	--sk-fs-petit: 0.875rem;

	/* Espacements internes des composants (rules/04-site-aere § 2 : multiples de 4 px) */
	--sk-e-1: 0.25rem;  /* 4 */
	--sk-e-2: 0.5rem;   /* 8 */
	--sk-e-3: 0.75rem;  /* 12 */
	--sk-e-4: 1rem;     /* 16 */
	--sk-e-6: 1.5rem;   /* 24 */
	--sk-e-8: 2rem;     /* 32 */
	--sk-e-12: 3rem;    /* 48 */
	--sk-e-16: 4rem;    /* 64 : colonnes de contenu côte à côte */
	--sk-mesure: 65ch;  /* longueur de ligne maximale (50 à 75 caractères) */

	/* Espacements des cartes et des sections (docs/04 § 2 : trois tailles) */
	--sk-pad-s: clamp(1rem, 0.7692rem + 1.0256vw, 1.5rem);
	--sk-pad-m: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem);
	--sk-pad-l: clamp(2rem, 1.5385rem + 2.0513vw, 3rem);
	--sk-pad-tb-s: clamp(1.5rem, 1.0385rem + 2.0513vw, 2.5rem);
	--sk-pad-tb-m: clamp(4rem, 3.5385rem + 2.0513vw, 5rem);
	--sk-pad-tb-l: clamp(7rem, 6.5385rem + 2.0513vw, 8rem);

	/* Mise en page */
	--sk-largeur: 72rem;        /* 1152 px de contenu, comme la référence */
	--sk-largeur-etroite: 50rem;
	--sk-marge: clamp(1rem, 0.5385rem + 2.0513vw, 2rem);
	--sk-gouttiere: clamp(1.5rem, 1.2692rem + 1.0256vw, 2rem); /* 24 → 32 : carte ↔ carte */
	--sk-rayon: 1.5rem;         /* cartes très arrondies (référence whelp.co) */
	--sk-rayon-s: 0.875rem;     /* champs, petites cartes, pastilles d'icône */
	--sk-pilule: 999px;         /* boutons, onglets, filtres */
	--sk-hauteur-entete: 4.5rem;
	--sk-ombre: 0 1.5rem 4rem rgba(32, 32, 32, 0.08);
	--sk-ombre-s: 0 0.5rem 1.5rem rgba(32, 32, 32, 0.08);
	--sk-transition: 0.2s ease;
}

/* ====== Base (réinitialisations sûres : pas de règle de mise en page sur des balises nues) ====== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--sk-hauteur-entete) + var(--sk-e-4));
}
body {
	margin: 0;
	background: var(--sk-blanc);
	color: var(--sk-anthracite);
	font-family: var(--sk-police-texte);
	font-size: var(--sk-fs-texte);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--sk-police-titres);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--sk-noir);
}
p, ul, ol, dl, dd, figure {
	margin: 0;
}
a {
	color: var(--sk-or-texte);
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
:focus-visible {
	outline: 3px solid var(--sk-or);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ====== Utilitaires de docs/04 ====== */
.sk-ligne { display: flex; flex-wrap: wrap; gap: var(--sk-gouttiere); }
.sk-ligne > * { flex: 1 1 var(--sk-base, 100%); min-width: 0; }
.sk-ligne--6 { --sk-base: 13.5%; }
.sk-ligne--5 { --sk-base: 16.5%; }
.sk-ligne--4 { --sk-base: 20%; }
.sk-ligne--3 { --sk-base: 25%; }
.sk-ligne--2 { --sk-base: 35%; }
.sk-col-2 { flex: 0 1 15%; }
.sk-col-3 { flex: 0 1 24%; }
.sk-col-4 { flex: 0 1 32%; }
.sk-col-5 { flex: 0 1 41%; }
.sk-col-6 { flex: 0 1 49%; }
.sk-col-7 { flex: 0 1 58%; }
.sk-col-8 { flex: 0 1 66%; }
.sk-col-9 { flex: 0 1 75%; }
.sk-col-10 { flex: 0 1 83%; }
.sk-ligne > .sk-col-reste, .sk-col-reste { flex: 1 1 0; }
@media (max-width: 1024px) {
	.sk-ligne--6, .sk-ligne--5 { --sk-base: 25%; }
	.sk-ligne--4, .sk-ligne--3 { --sk-base: 35%; }
	.sk-ligne--2 { --sk-base: 100%; }
}
@media (max-width: 767px) {
	.sk-ligne--6, .sk-ligne--5 { --sk-base: 35%; }
	.sk-ligne--4, .sk-ligne--3, .sk-ligne--2 { --sk-base: 100%; }
	[class*="sk-col-"], .sk-ligne > .sk-col-reste { flex: 1 1 100%; }
}

.sk-pad-s { padding: var(--sk-pad-s); }
.sk-pad-m { padding: var(--sk-pad-m); }
.sk-pad-l { padding: var(--sk-pad-l); }
.sk-pad-tb-s { padding-top: var(--sk-pad-tb-s); padding-bottom: var(--sk-pad-tb-s); }
.sk-pad-tb-m { padding-top: var(--sk-pad-tb-m); padding-bottom: var(--sk-pad-tb-m); }
.sk-pad-tb-l { padding-top: var(--sk-pad-tb-l); padding-bottom: var(--sk-pad-tb-l); }
/* Exception rules/04-site-aere § 9 : sous 767 px, le grand espacement de section est ramené à 80 px. */
@media (max-width: 767px) {
	.sk-pad-tb-l { padding-top: 5rem; padding-bottom: 5rem; }
}

.sk-t1 { font-size: var(--sk-fs-t1); }
.sk-t2 { font-size: var(--sk-fs-t2); }
.sk-t3 { font-size: var(--sk-fs-t3); }
.sk-t4 { font-size: var(--sk-fs-t4); }
.sk-t5 { font-size: var(--sk-fs-t5); }
.sk-t6 { font-size: var(--sk-fs-t6); }
.sk-t7 { font-size: var(--sk-fs-t7); }
.sk-t1, .sk-t2, .sk-t3, .sk-t4, .sk-t5, .sk-t6, .sk-t7 { font-family: var(--sk-police-titres); line-height: 1.2; }
.sk-t6, .sk-t7 { line-height: 1.3; } /* sous-titres (rules/04-site-aere § 4) */
/* Grands titres « à la whelp.co » : graisse normale, interlettrage serré ; interligne 1.15 (exception assumée à 1.2,
   comme la référence : à ces tailles, 1.2 ouvre trop les lignes). */
.sk-t1, .sk-t2 { font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; }

.sk-conteneur {
	width: 100%;
	max-width: calc(var(--sk-largeur) + 2 * var(--sk-marge));
	margin-inline: auto;
	padding-inline: var(--sk-marge);
}
.sk-conteneur--etroit { max-width: calc(var(--sk-largeur-etroite) + 2 * var(--sk-marge)); }
.sk-centre { text-align: center; }

/* Masquage accessible (jamais « screen-reader-text », classe de WordPress) */
.sk-masque {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sk-evitement {
	position: absolute;
	top: -10rem;
	left: var(--sk-e-4);
	z-index: 100;
	padding: var(--sk-e-3) var(--sk-e-6);
	background: var(--sk-noir);
	color: var(--sk-blanc);
	font-weight: 600;
	border-radius: var(--sk-rayon);
}
.sk-evitement:focus { top: var(--sk-e-4); }

/* ====== Textes ====== */
.sk-surtitre {
	margin-bottom: var(--sk-e-3);
	font-family: var(--sk-police-texte);
	font-size: var(--sk-fs-petit);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sk-or-texte);
}
.sk-surtitre--clair { color: var(--sk-or); }

/* La référence n'a pas de filet sous les titres : seul l'espace sépare le titre du texte. */
.sk-titre-filet { margin-bottom: var(--sk-e-6); }

.sk-texte { max-width: var(--sk-mesure); }
.sk-texte p + p, .sk-texte p + ul, .sk-texte ul + p { margin-top: 1em; } /* paragraphe ↔ paragraphe = taille du texte */
.sk-texte ul, .sk-texte ol { padding-left: var(--sk-e-6); }
.sk-texte strong { color: var(--sk-noir); }
.sk-texte--grand { font-size: var(--sk-fs-grand); }

.sk-entete-section { max-width: 48rem; margin-bottom: var(--sk-e-12); }
.sk-entete-section--centre { margin-inline: auto; text-align: center; }

/* ====== Icônes (masques SVG : Feather – MIT, Lucide – ISC ; bloc généré, voir ADR-0004 § 8) ====== */
.sk-icone {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: var(--sk-i) center / contain no-repeat;
	mask: var(--sk-i) center / contain no-repeat;
}
/* @icones-debut */
:root { --sk-i-coche: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); }
.sk-icone--telephone { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z%22/%3E%3C/svg%3E"); }
.sk-icone--whatsapp { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z%22/%3E%3Cpath d=%22M9 9.5c.5 2 2.5 4 5 5l1-1.2 1.8.8c-.2 1-1 1.6-2 1.4-3-.6-5.6-3.2-6.2-6.2-.2-1 .4-1.8 1.4-2l.8 1.8z%22/%3E%3C/svg%3E"); }
.sk-icone--email { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%224%22 width=%2220%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22m22 6-10 7L2 6%22/%3E%3C/svg%3E"); }
.sk-icone--adresse { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E"); }
.sk-icone--fleche { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M12 5l7 7-7 7%22/%3E%3C/svg%3E"); }
.sk-icone--coche { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); }
.sk-icone--globe { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z%22/%3E%3C/svg%3E"); }
.sk-icone--carton { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z%22/%3E%3Cpath d=%22M3.3 7 12 12l8.7-5M12 22V12M7.5 4.2l9 5.2%22/%3E%3C/svg%3E"); }
.sk-icone--casque { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 18h20M4 18v-2a8 8 0 0 1 16 0v2M10 8.3V5h4v3.3%22/%3E%3C/svg%3E"); }
.sk-icone--ecran { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%223%22 width=%2220%22 height=%2214%22 rx=%222%22/%3E%3Cpath d=%22M8 21h8M12 17v4%22/%3E%3C/svg%3E"); }
.sk-icone--bouclier { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.sk-icone--soleil { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4%22/%3E%3C/svg%3E"); }
.sk-icone--batiment { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6M9 10h1M14 10h1%22/%3E%3C/svg%3E"); }
.sk-icone--plan { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z%22/%3E%3C/svg%3E"); }
.sk-icone--avion { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/svg%3E"); }
.sk-icone--outil { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z%22/%3E%3C/svg%3E"); }
.sk-icone--medaille { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%226%22/%3E%3Cpath d=%22M15.5 12.9 17 22l-5-3-5 3 1.5-9.1%22/%3E%3C/svg%3E"); }
.sk-icone--oeil { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); }
.sk-icone--cible { --sk-i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22/%3E%3C/svg%3E"); }
/* @icones-fin */

/* ====== Boutons et liens ====== */
.sk-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-e-2);
	min-height: 3rem;
	padding: var(--sk-e-3) var(--sk-e-6);
	border: 1px solid transparent;
	border-radius: var(--sk-pilule);
	font-family: var(--sk-police-titres);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sk-transition), color var(--sk-transition), border-color var(--sk-transition), transform var(--sk-transition);
}
.sk-bouton:hover { transform: translateY(-1px); }
.sk-bouton--or { background: var(--sk-or); color: var(--sk-noir); }
.sk-bouton--or:hover { background: var(--sk-or-clair); color: var(--sk-noir); }
.sk-bouton--contour { border-color: var(--sk-bordure); background: var(--sk-blanc); color: var(--sk-noir); }
.sk-bouton--contour:hover { border-color: var(--sk-anthracite); color: var(--sk-noir); }
.sk-bouton--grand { min-height: 3.5rem; padding-inline: var(--sk-e-8); font-size: 1rem; }
.sk-bouton--contour-clair { border-color: rgba(255, 255, 255, 0.55); color: var(--sk-blanc); }
.sk-bouton--contour-clair:hover { border-color: var(--sk-or); color: var(--sk-or); }

.sk-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-e-2);
	min-height: 2.75rem;
	font-family: var(--sk-police-titres);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sk-noir);
	text-decoration: none;
}
.sk-lien-fleche .sk-icone { transition: transform var(--sk-transition); }
.sk-lien-fleche:hover .sk-icone { transform: translateX(var(--sk-e-1)); }
.sk-lien-fleche:hover { color: var(--sk-or-texte); }

/* Lien souligné de la référence (« Explore… ») */
.sk-lien {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem; /* cible tactile ≥ 44 px */
	font-weight: 500;
	color: var(--sk-noir);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
	transition: color var(--sk-transition);
}
.sk-lien:hover { color: var(--sk-or-texte); }

/* ====== Trame de points or (motif du profil PDF), en CSS : aucune image à télécharger ====== */
.sk-trame { position: relative; isolation: isolate; overflow: hidden; }
.sk-trame::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: min(30rem, 70%);
	aspect-ratio: 1;
	background: linear-gradient(225deg, var(--sk-or-clair), var(--sk-or) 40%, rgba(201, 150, 30, 0.2) 75%);
	-webkit-mask: radial-gradient(circle, #000 0 36%, transparent 40%) 0 0 / 0.9rem 0.9rem, radial-gradient(farthest-side at var(--sk-trame-x) var(--sk-trame-y), #000 0, transparent 100%);
	-webkit-mask-composite: source-in;
	mask: radial-gradient(circle, #000 0 36%, transparent 40%) 0 0 / 0.9rem 0.9rem, radial-gradient(farthest-side at var(--sk-trame-x) var(--sk-trame-y), #000 0, transparent 100%);
	mask-composite: intersect;
	opacity: 0.55;
	pointer-events: none;
}
.sk-trame--haut-droite::before { top: 0; right: 0; --sk-trame-x: 100%; --sk-trame-y: 0%; }
.sk-trame--bas-gauche::before { bottom: 0; left: 0; --sk-trame-x: 0%; --sk-trame-y: 100%; }

/* ====== En-tête ====== */
.sk-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sk-blanc-voile);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--sk-transition);
}
.admin-bar .sk-entete { top: var(--wp-admin--admin-bar--height, 0); }
.sk-entete.sk-colle { border-bottom-color: var(--sk-bordure); }
.sk-entete__interieur { position: relative; display: flex; align-items: center; gap: var(--sk-e-6); min-height: var(--sk-hauteur-entete); }

.sk-logo { display: inline-flex; align-items: center; gap: var(--sk-e-3); margin-right: auto; color: var(--sk-anthracite); text-decoration: none; }
.sk-logo__cadre { display: block; flex: none; width: 2.75rem; aspect-ratio: 1; }
.sk-logo__cadre img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk-logo__textes { display: flex; flex-direction: column; line-height: 1; }
.sk-logo__nom {
	font-family: var(--sk-police-titres);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--sk-noir);
}
.sk-logo__complement { font-family: var(--sk-police-titres); font-size: var(--sk-fs-petit); font-weight: 500; letter-spacing: 0.04em; color: var(--sk-gris); }

/* Menu principal */
.sk-menu { display: flex; flex: 1 1 auto; align-items: center; gap: var(--sk-e-6); }
.sk-menu > :not(.sk-menu__action) { margin-inline: auto; } /* liste du menu (ou zone gérée qui l’entoure) centrée */
.sk-menu__action { display: flex; align-items: center; gap: var(--sk-e-4); }
.sk-entete__tel { display: inline-flex; align-items: center; gap: var(--sk-e-2); min-height: 2.75rem; font-size: var(--sk-fs-petit); color: var(--sk-anthracite); text-decoration: none; white-space: nowrap; }
.sk-entete__tel .sk-icone { color: var(--sk-or-fonce); }
.sk-entete__tel:hover { color: var(--sk-or-texte); }
.sk-menu__liste { display: flex; align-items: center; gap: var(--sk-e-1); padding: 0; list-style: none; }
.sk-menu__element { position: relative; list-style: none; }
.sk-menu__lien--n0 {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--sk-e-2) var(--sk-e-3);
	font-family: var(--sk-police-texte);
	font-size: 1rem;
	font-weight: 400;
	color: var(--sk-anthracite);
	text-decoration: none;
	border-radius: var(--sk-pilule);
	transition: background-color var(--sk-transition);
}
.sk-menu__lien--n0:hover { background: var(--sk-fond-creme); }
.sk-est-actif > .sk-menu__lien--n0 { font-weight: 600; color: var(--sk-noir); }
.sk-a-sous { display: flex; align-items: center; }
.sk-a-sous > .sk-menu__lien--n0 { padding-right: var(--sk-e-1); }
.sk-sous-bascule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-e-8);
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sk-anthracite);
	cursor: pointer;
}
.sk-sous-bascule::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform var(--sk-transition);
}
.sk-ouvert > .sk-sous-bascule::before { transform: translateY(25%) rotate(-135deg); }

.sk-sous, .sk-sous-liste { margin: 0; padding: 0; list-style: none; }
.sk-menu__lien--n1 {
	display: block;
	padding: var(--sk-e-2) 0;
	font-family: var(--sk-police-titres);
	font-size: var(--sk-fs-petit);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--sk-or-texte);
	text-decoration: none;
}
.sk-menu__lien--n2 {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--sk-e-1) 0;
	color: var(--sk-anthracite);
	text-decoration: none;
	line-height: 1.3;
}
.sk-menu__lien--n1:hover, .sk-menu__lien--n2:hover, .sk-est-actif > .sk-menu__lien--n2 { color: var(--sk-or-texte); }

/* Ordinateur : panneau à colonnes (un pôle par colonne) */
@media (min-width: 1025px) {
	.sk-menu__element--n0.sk-a-sous { position: static; }
	.sk-sous {
		position: absolute;
		top: 100%;
		left: var(--sk-marge);
		right: var(--sk-marge);
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--sk-e-8);
		padding: var(--sk-pad-m);
		background: var(--sk-blanc);
		border: 1px solid var(--sk-bordure);
		border-radius: var(--sk-rayon);
		box-shadow: var(--sk-ombre);
		visibility: hidden;
		opacity: 0;
		transform: translateY(var(--sk-e-2));
		transition: opacity var(--sk-transition), transform var(--sk-transition), visibility var(--sk-transition);
	}
	.sk-a-sous:hover > .sk-sous, .sk-a-sous.sk-ouvert > .sk-sous, .sk-a-sous:focus-within > .sk-sous {
		visibility: visible;
		opacity: 1;
		transform: none;
	}
	.sk-menu__lien--n1 { border-bottom: 1px solid var(--sk-bordure); margin-bottom: var(--sk-e-2); padding-bottom: var(--sk-e-3); }
}

/* Bouton du menu mobile */
.sk-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: var(--sk-e-1);
	width: 2.75rem;
	height: 2.75rem;
	padding: var(--sk-e-3);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-pilule);
	background: var(--sk-blanc);
	cursor: pointer;
}
.sk-burger__trait { display: block; height: 2px; background: var(--sk-anthracite); border-radius: 1px; transition: transform var(--sk-transition), opacity var(--sk-transition); }
.sk-burger[aria-expanded="true"] .sk-burger__trait:nth-child(2) { transform: translateY(calc(var(--sk-e-1) + 2px)) rotate(45deg); }
.sk-burger[aria-expanded="true"] .sk-burger__trait:nth-child(3) { opacity: 0; }
.sk-burger[aria-expanded="true"] .sk-burger__trait:nth-child(4) { transform: translateY(calc(-1 * var(--sk-e-1) - 2px)) rotate(-45deg); }

/* Tablette et mobile : menu déroulant sous l'en-tête */
@media (max-width: 1024px) {
	.sk-burger { display: inline-flex; }
	.sk-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sk-e-4);
		max-height: calc(100vh - var(--sk-hauteur-entete));
		overflow-y: auto;
		padding: var(--sk-e-2) var(--sk-marge) var(--sk-e-6);
		background: var(--sk-blanc);
		border-top: 1px solid var(--sk-bordure);
		box-shadow: var(--sk-ombre);
	}
	.sk-menu.sk-ouvert { display: flex; }
	.sk-menu__liste { flex-direction: column; align-items: stretch; gap: 0; }
	.sk-menu__element--n0 { border-bottom: 1px solid var(--sk-bordure); }
	.sk-a-sous { flex-wrap: wrap; justify-content: space-between; }
	.sk-menu__lien--n0 { padding-inline: 0; }
	.sk-menu__element--n0.sk-est-actif > .sk-menu__lien--n0 { box-shadow: none; }
	.sk-sous-bascule { width: 2.75rem; }
	.sk-sous { display: none; flex: 1 1 100%; padding: 0 0 var(--sk-e-4) var(--sk-e-3); }
	.sk-ouvert > .sk-sous { display: block; }
	.sk-menu__element--n1 + .sk-menu__element--n1 { margin-top: var(--sk-e-4); }
	.sk-menu > :not(.sk-menu__action) { margin-inline: 0; }
	.sk-menu__action { flex-direction: column; align-items: stretch; }
	.sk-menu__action .sk-bouton { width: 100%; }
}
@media (max-width: 767px) {
	.sk-logo__cadre { width: 2.5rem; }
}

/* ====== Bandeau de titre des pages intérieures ====== */
/* Même souffle que le hero de l'accueil (sk-pad-tb-l dans le balisage) : surtitre ↔ titre 12 px, titre ↔ chapo 24 px. */
.sk-bandeau { background: var(--sk-noir); color: var(--sk-clair-sur-sombre); }
.sk-bandeau__titre { max-width: 24ch; color: var(--sk-blanc); text-wrap: balance; }
.sk-bandeau__chapo { max-width: var(--sk-mesure); margin-top: var(--sk-e-6); font-size: var(--sk-fs-grand); line-height: 1.6; }

/* ====== Sections ====== */
.sk-section--creme { background: var(--sk-fond-creme); }

/* Ligne à deux blocs de contenu (texte + texte, texte + carte) : plus d'air entre les colonnes qu'entre deux cartes,
   et 48 px entre les blocs quand ils passent l'un sous l'autre. */
.sk-ligne--large { column-gap: var(--sk-pad-l); row-gap: var(--sk-e-12); }

/* Groupe de boutons : 32 px au-dessus (texte ↔ boutons), 16 px entre deux boutons. */
.sk-boutons { display: flex; flex-wrap: wrap; gap: var(--sk-e-4); margin-top: var(--sk-e-8); }
.sk-boutons--centre { justify-content: center; }
@media (max-width: 767px) {
	.sk-boutons .sk-bouton { flex: 1 1 100%; }
}

/* ====== Composants de la référence whelp.co, communs à l'accueil et aux pages intérieures ====== */
/* Exception docs/04 § 1 (déjà notée pour l'accueil) : les grilles de cartes sont en CSS grid (colonnes égales,
   alignement des hauteurs) ; mêmes paliers que .sk-ligne (4 → 2 → 1 colonnes, asymétrique empilé sous 767 px). */

/* Titre et chapo de section */
.sk-titre-section { max-width: 22ch; }
.sk-entete-section .sk-chapo { margin-top: var(--sk-e-6); }
.sk-chapo { max-width: 48ch; font-size: var(--sk-fs-grand); line-height: 1.6; color: var(--sk-gris); }
.sk-chapo p + p { margin-top: 1em; }

/* Bulle blanche (icône + deux lignes), posée sur les photos et les visuels */
.sk-bulle {
	display: flex;
	align-items: center;
	gap: var(--sk-e-3);
	max-width: 17rem;
	padding: var(--sk-e-3) var(--sk-e-4);
	background: var(--sk-blanc);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon-s);
	box-shadow: var(--sk-ombre-s);
	font-size: var(--sk-fs-petit);
	line-height: 1.3;
}
.sk-bulle__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--sk-fond-creme);
	color: var(--sk-or-fonce);
}
.sk-bulle__icone .sk-icone { width: 1.125rem; height: 1.125rem; }
.sk-bulle__textes strong { display: block; font-family: var(--sk-police-titres); font-size: var(--sk-fs-petit); font-weight: 600; color: var(--sk-noir); }
/* Places des bulles posées en absolu sur un visuel (vitrine de l'accueil, logo d'À propos) */
.sk-bulle--1 { left: calc(-1 * var(--sk-e-6)); top: 18%; }
.sk-bulle--2 { right: calc(-1 * var(--sk-e-6)); bottom: 14%; }

/* Hero centré (accueil, À propos) : pastille, titre, introduction, boutons, note. Sur l'accueil, la vitrine suit
   (accueil.css) ; variante « page » : fermé par l'espace d'une section. */
.sk-hero { padding-top: var(--sk-pad-tb-m); text-align: center; }
.sk-hero--page { padding-bottom: var(--sk-pad-tb-m); }
.sk-pastille {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-e-2);
	padding: var(--sk-e-2) var(--sk-e-4);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-pilule);
	background: var(--sk-blanc);
	font-size: var(--sk-fs-petit);
}
.sk-pastille::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sk-or); }
.sk-hero__titre {
	max-width: 22ch;
	margin: var(--sk-e-8) auto 0;
	font-size: var(--sk-fs-t0);
	font-weight: 400;
	line-height: 1.15; /* exception assumée (voir .sk-t1) */
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.sk-hero__suite { font-style: normal; color: var(--sk-gris); }
.sk-hero__texte { max-width: 54ch; margin: var(--sk-e-8) auto 0; font-size: var(--sk-fs-grand); color: var(--sk-gris); }
.sk-hero__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-e-3); margin-top: var(--sk-e-8); }
.sk-hero__note { margin-top: var(--sk-e-6); font-size: var(--sk-fs-petit); color: var(--sk-gris); }

/* Repères : quatre grands chiffres sur une ligne (accueil, À propos). Variante « filets » (À propos, comme la page
   « About » de la référence) : un filet pleine largeur au-dessus et au-dessous de la ligne de chiffres. */
.sk-reperes { padding-top: var(--sk-pad-tb-m); padding-bottom: var(--sk-pad-tb-m); }
.sk-reperes--filets { border-top: 1px solid var(--sk-bordure); border-bottom: 1px solid var(--sk-bordure); }
.sk-reperes__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sk-e-8); margin: 0; padding: 0; list-style: none; }
.sk-repere__valeur {
	display: block;
	font-family: var(--sk-police-titres);
	font-size: var(--sk-fs-chiffre);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--sk-noir);
}
.sk-repere__libelle { display: block; margin-top: var(--sk-e-4); color: var(--sk-gris); }

.sk-bouton--whatsapp .sk-icone { color: var(--sk-whatsapp); }

/* Deux cartes côte à côte (qui sommes-nous, vision et mission, direction et informations légales), empilées sous 1024 px */
.sk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-gouttiere); }
.sk-carte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sk-e-6);
	padding: var(--sk-pad-l);
	background: var(--sk-blanc);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon);
}
.sk-carte__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--sk-rayon-s);
	background: var(--sk-fond-creme);
	color: var(--sk-or-fonce);
	font-size: 1.5rem;
}
.sk-carte .sk-t3 { font-weight: 400; letter-spacing: -0.03em; }
.sk-carte__texte { max-width: var(--sk-mesure); color: var(--sk-gris); }
.sk-carte__lien { margin-top: auto; }

/* Grille à filets numérotés (atouts de l'accueil, engagements d'À propos : variante --5 dans pages.css) */
.sk-atouts-grille { counter-reset: sk-atout; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sk-e-12) var(--sk-e-8); margin: 0; padding: 0; list-style: none; }
.sk-atout { padding-top: var(--sk-e-6); border-top: 1px solid var(--sk-bordure); }
.sk-atout:not(.sk-atout--appel)::before { counter-increment: sk-atout; content: counter(sk-atout, decimal-leading-zero); display: block; margin-bottom: var(--sk-e-4); font-family: var(--sk-police-titres); font-size: var(--sk-fs-petit); font-weight: 600; color: var(--sk-or-texte); }
.sk-atout__texte { margin-top: var(--sk-e-3); color: var(--sk-gris); }

/* Titre à gauche, contenu à droite (FAQ de l'accueil, atouts d'À propos) ; texte à gauche, carte à droite (contact) :
   équivalents de .sk-col-5 / .sk-col-6 + .sk-col-reste, empilés sous 767 px. Section contact : 5 tailles de texte
   (surtitre et libellés en petit, titre, chapo, texte, titre de la carte), exception assumée comme sur l'accueil :
   deux blocs distincts côte à côte, chacun en a 3 au plus. */
.sk-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sk-e-16); align-items: start; }
.sk-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sk-e-16); align-items: start; }
.sk-contact .sk-chapo { margin-top: var(--sk-e-6); }

/* Carte de contact : carte blanche à ombre douce (accueil, page Contact) */
.sk-carte-contact {
	padding: var(--sk-pad-l);
	background: var(--sk-blanc);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon);
	box-shadow: var(--sk-ombre);
}
.sk-carte-contact__titre { margin-bottom: var(--sk-e-6); }
.sk-carte-contact__bouton { width: 100%; margin-top: var(--sk-e-6); }

@media (max-width: 1024px) {
	.sk-bulle--1 { left: var(--sk-e-6); }
	.sk-bulle--2 { right: var(--sk-e-6); }
	.sk-duo { grid-template-columns: 1fr; } /* docs/04 § 1.1 : deux colonnes → 100 % */
	.sk-atouts-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk-reperes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sk-e-12); }
}
@media (max-width: 767px) {
	.sk-hero { text-align: left; }
	.sk-hero__titre, .sk-hero__texte { margin-left: 0; }
	.sk-hero__boutons { justify-content: flex-start; }
	.sk-hero__boutons .sk-bouton { width: 100%; }
	.sk-atouts-grille, .sk-faq, .sk-contact { grid-template-columns: 1fr; }
	.sk-faq, .sk-contact { gap: var(--sk-e-12); }
}

/* ====== Pôles et cartes des domaines (page de synthèse, pages domaines) ====== */
/* Un pôle = une section ; numéro or et titre côte à côte (deux éléments agrandis), résumé en texte courant. */
.sk-pole__entete { display: flex; align-items: flex-start; gap: var(--sk-e-6); }
.sk-pole__numero {
	flex: none;
	font-family: var(--sk-police-titres);
	font-size: var(--sk-fs-t3);
	font-weight: 500;
	line-height: 1.2;
	color: var(--sk-or);
}
.sk-pole__titre { margin-bottom: var(--sk-e-4); }
.sk-pole__resume { max-width: var(--sk-mesure); color: var(--sk-gris); }
@media (max-width: 767px) {
	/* Numéro au-dessus du titre : le résumé garde toute la largeur de l'écran. */
	.sk-pole__entete { flex-direction: column; gap: var(--sk-e-2); }
}

/* Carte : 16 px entre ses zones, 24 px sous l'icône ; carte ↔ carte = gouttière (24 → 32 px). */
.sk-carte-domaine {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sk-e-4);
	background: var(--sk-blanc);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon);
	transition: border-color var(--sk-transition), box-shadow var(--sk-transition), transform var(--sk-transition);
}
.sk-carte-domaine:hover { border-color: var(--sk-or); box-shadow: var(--sk-ombre); transform: translateY(-2px); }
.sk-carte-domaine__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--sk-e-2);
	border-radius: 50%;
	background: var(--sk-creme);
	color: var(--sk-or-fonce);
	font-size: 1.75rem;
}
.sk-carte-domaine__lien { color: var(--sk-anthracite); text-decoration: none; }
.sk-carte-domaine__lien::after { content: ""; position: absolute; inset: 0; border-radius: var(--sk-rayon); }
.sk-carte-domaine__resume { flex: 1; color: var(--sk-gris); }
.sk-carte-domaine .sk-lien-fleche { min-height: 0; margin-top: var(--sk-e-2); }

/* ====== Atouts : titre à gauche, liste dans un encadré aéré à droite (Références, pages domaines) ====== */
.sk-atouts { align-items: center; column-gap: var(--sk-pad-l); row-gap: var(--sk-e-12); }
.sk-liste-atouts.sk-liste-atouts--aeree {
	gap: var(--sk-e-6) var(--sk-e-8);
	padding: var(--sk-pad-l);
	background: var(--sk-blanc);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon);
}

/* ====== Listes ====== */
.sk-liste-atouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sk-e-4) var(--sk-e-6); padding: 0; list-style: none; }
.sk-liste-atouts--simple { grid-template-columns: 1fr; }
/* Pastille or de 28 px, 12 px avant le libellé ; libellé centré sur la pastille quand il tient sur une ligne. */
.sk-coche {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 1.75rem;
	padding-left: calc(1.75rem + var(--sk-e-3));
	font-weight: 600;
	line-height: 1.3;
}
.sk-coche::before { content: ""; position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--sk-or); }
.sk-coche .sk-icone { position: absolute; left: 0.375rem; top: 0.375rem; width: 1rem; height: 1rem; color: var(--sk-noir); }
@media (max-width: 767px) {
	.sk-liste-atouts { grid-template-columns: 1fr; }
}

.sk-liste-coches { max-width: var(--sk-mesure); }
.sk-liste-coches ul { padding: 0; list-style: none; }
.sk-liste-coches li { position: relative; padding-left: var(--sk-e-8); }
.sk-liste-coches li + li { margin-top: var(--sk-e-3); }
.sk-liste-coches li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1.6em - 1.25rem) / 2); /* centrée sur la première ligne */
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--sk-or);
	-webkit-mask: var(--sk-i-coche) center / contain no-repeat;
	mask: var(--sk-i-coche) center / contain no-repeat;
}
.sk-liste-coches--colonnes ul { columns: 2; column-gap: var(--sk-e-8); }
.sk-liste-coches--colonnes li { break-inside: avoid; }
@media (max-width: 767px) {
	.sk-liste-coches--colonnes ul { columns: 1; }
}

/* ====== Appel à l'action ====== */
.sk-appel { background: var(--sk-noir); color: var(--sk-clair-sur-sombre); }
/* Centré, entouré d'espace (rules/04-site-aere § 8) : une phrase, un texte court, deux actions. */
.sk-appel__interieur { display: flex; flex-direction: column; align-items: center; gap: var(--sk-e-8); text-align: center; }
.sk-appel__textes { max-width: 52rem; }
.sk-appel__titre { color: var(--sk-blanc); margin-bottom: var(--sk-e-4); text-wrap: balance; }
.sk-appel__texte { max-width: var(--sk-mesure); margin-inline: auto; }
.sk-appel__texte { font-size: var(--sk-fs-grand); }
.sk-appel__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-e-4); }

/* ====== Pied de page ====== */
/* Liens regroupés par catégories (rules/04-site-aere § 8) : 8 px entre icône et libellé, 16 px sous les titres de
   colonne, 24 px avant le bouton, 48 px entre les colonnes empilées. */
/* Pied clair, comme la référence : colonnes de liens, filet fin au-dessus. */
.sk-pied { background: var(--sk-blanc); color: var(--sk-anthracite); border-top: 1px solid var(--sk-bordure); }
.sk-pied__colonnes { column-gap: var(--sk-pad-l); row-gap: var(--sk-e-12); }
.sk-pied__marque { flex: 1 1 30%; }
.sk-pied__colonne { flex: 1 1 22%; }
.sk-pied__logo { display: inline-flex; align-items: center; gap: var(--sk-e-3); margin-bottom: var(--sk-e-4); color: var(--sk-noir); text-decoration: none; }
.sk-pied__embleme { display: block; width: 2.75rem; aspect-ratio: 1; }
.sk-pied__embleme img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk-pied__nom { font-family: var(--sk-police-titres); font-weight: 700; letter-spacing: -0.01em; }
.sk-pied__signature { max-width: 30ch; color: var(--sk-gris); }
.sk-pied__titre { margin-bottom: var(--sk-e-3); font-family: var(--sk-police-texte); font-size: var(--sk-fs-petit); font-weight: 400; letter-spacing: 0; color: var(--sk-gris); }
.sk-pied__liste { padding: 0; list-style: none; }
.sk-pied__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-e-2);
	min-height: 2.75rem;
	padding: var(--sk-e-1) 0;
	color: var(--sk-anthracite);
	text-decoration: none;
	line-height: 1.3;
}
.sk-pied__lien:hover { color: var(--sk-or-texte); }
.sk-pied__lien .sk-icone { color: var(--sk-or-fonce); }
.sk-pied__contacts { margin-bottom: var(--sk-e-6); }
@media (max-width: 1024px) {
	.sk-pied__marque { flex-basis: 100%; }
	.sk-pied__colonne { flex-basis: 35%; }
}
@media (max-width: 767px) {
	.sk-pied__colonne { flex-basis: 100%; }
}

.sk-pied-bas { font-size: var(--sk-fs-petit); color: var(--sk-gris); }
.sk-pied-bas__interieur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sk-e-2) var(--sk-e-6); padding-top: var(--sk-e-6); padding-bottom: var(--sk-e-6); background: linear-gradient(var(--sk-bordure), var(--sk-bordure)) top center / calc(100% - 2 * var(--sk-marge)) 1px no-repeat; }
.sk-pied-bas__liste { display: flex; flex-wrap: wrap; gap: 0 var(--sk-e-6); padding: 0; list-style: none; }
.sk-pied-bas__lien { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--sk-gris); text-decoration: none; }
.sk-pied-bas__lien:hover { color: var(--sk-noir); }
.sk-pied-bas__credits { flex-basis: 100%; }
.sk-pied-bas__credits p { max-width: 65ch; line-height: 1.6; }
.sk-pied-bas__credits a { color: inherit; }
.sk-pied-bas__credits a:hover { color: var(--sk-noir); }
.sk-pied-bas__credits a[rel="license"] { white-space: nowrap; }
@media (max-width: 767px) {
	.sk-pied-bas__credits { padding-bottom: var(--sk-e-12); } /* dégage la dernière ligne du bouton WhatsApp flottant */
}

/* ====== Bouton WhatsApp flottant ====== */
.sk-whatsapp {
	position: fixed;
	right: var(--sk-e-4);
	bottom: var(--sk-e-4);
	z-index: 40;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--sk-whatsapp);
	color: var(--sk-blanc);
	box-shadow: var(--sk-ombre-s);
	font-size: 1.6rem;
	transition: transform var(--sk-transition);
}
.sk-whatsapp:hover { transform: scale(1.06); }
.sk-whatsapp .pencil-button__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ====== Apparition au défilement (sans JavaScript, tout reste visible) ====== */
.sk-js .sk-apparition { opacity: 0; transform: translateY(var(--sk-e-4)); transition: opacity 0.5s ease, transform 0.5s ease; }
.sk-js .sk-apparition.sk-vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sk-js .sk-apparition { opacity: 1; transform: none; }
}