/*
 * SACKO by Pencil – pages intérieures, aérées (rules/04-site-aere) : page domaine, À propos, Références, Contact,
 * pages de texte. Bandeau, pôles, cartes, listes, tableau, boutons, lignes larges et composants de l'accueil
 * réutilisés (cartes, grille à filets, mises en page FAQ et contact, carte de contact, bulles) sont dans socle.css.
 * Espacements : jetons --sk-e-* (multiples de 4 px) ; espace interne toujours < espace externe.
 */

/* ====== En-tête clair et appel à l'action clair (À propos ; page Contact pour le titre) ====== */
/* Variante du bandeau : grand titre fin, interlettrage serré (.sk-t1), chapo gris à 24 px sous le titre. */
.sk-bandeau--clair { background: var(--sk-blanc); }
.sk-titre-page { max-width: 18ch; text-wrap: balance; }
.sk-bandeau--clair .sk-chapo { margin-top: var(--sk-e-6); }
/* Appel à l'action clair : fond blanc, grand titre fin, texte gris, comme la fin des pages de la référence. */
.sk-appel--clair { background: var(--sk-blanc); color: var(--sk-gris); }
.sk-appel--clair .sk-appel__titre { color: var(--sk-noir); }

/* ====== Page domaine ====== */
/* Présentation (icône, titre, texte, boutons) à gauche, prestations dans un encadré à droite. Trois tailles de texte :
   titre T4, titre de l'encadré T6, texte et liste en grand texte. */
.sk-domaine { align-items: flex-start; }
.sk-domaine__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--sk-e-6);
	border-radius: 50%;
	background: var(--sk-creme);
	color: var(--sk-or-fonce);
	font-size: 2rem;
}
.sk-carte-offre {
	background: var(--sk-fond-creme);
	border: 1px solid var(--sk-bordure);
	border-top: 4px solid var(--sk-or);
	border-radius: var(--sk-rayon);
}
.sk-carte-offre__titre { margin-bottom: var(--sk-e-6); }
.sk-carte-offre .sk-liste-coches { font-size: var(--sk-fs-grand); }
.sk-carte-offre .sk-liste-coches li + li { margin-top: var(--sk-e-4); }
.sk-voisins__tous { margin-top: var(--sk-e-12); text-align: center; }

/* ====== À propos (référence whelp.co, page « About ») ====== */
/* Notre histoire (comme « Our story » de la référence) : surtitre gris et grand titre à gauche, texte à droite, alignés
   en bas ; 48 px plus bas, un grand cadre crème 16:9 où trois photos sont posées comme des tirages instantanés
   (cadre blanc, bas plus large, légère rotation). Les tirages sont dimensionnés en unités du cadre (cqw) : la
   composition se réduit d'un bloc, comme une image, jusqu'au mobile. Filet sous la section (section suivante blanche).
   Exception docs/04 § 1 (comme socle.css, « composants de la référence ») : grille CSS équivalente à .sk-col-6 +
   .sk-col-reste, empilée sous 767 px. */
.sk-histoire-section { border-bottom: 1px solid var(--sk-bordure); }
.sk-histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sk-e-16); align-items: end; }
.sk-histoire__surtitre { margin-bottom: var(--sk-e-4); font-size: var(--sk-fs-petit); color: var(--sk-gris); }
.sk-histoire__titre { max-width: 16ch; text-wrap: balance; }
.sk-histoire__texte { font-size: var(--sk-fs-grand); color: var(--sk-gris); }
.sk-tirages {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 16 / 9;
	margin-top: var(--sk-e-12);
	overflow: hidden;
	border-radius: var(--sk-rayon);
	background: var(--sk-fond-creme);
}
.sk-tirage {
	position: absolute;
	margin: 0;
	padding: 1.5cqw 1.5cqw 5cqw;
	background: var(--sk-blanc);
	box-shadow: 0 0.6cqw 2cqw rgba(32, 32, 32, 0.14);
}
.sk-tirage img { display: block; width: 100%; height: auto; object-fit: cover; }
.sk-tirage--1 { left: 5%; top: 12%; width: 33%; transform: rotate(9deg); }
.sk-tirage--2 { left: 35%; top: 15%; z-index: 1; width: 32%; transform: rotate(-10deg); }
.sk-tirage--3 { left: 62%; top: 12%; width: 32%; transform: rotate(5deg); }

/* Atouts : liste à coches or sur deux colonnes, dans une carte blanche (chapo à 24 px du titre). */
.sk-faq__chapo { margin-top: var(--sk-e-6); }
.sk-atouts-liste { max-width: none; font-size: var(--sk-fs-grand); }
.sk-atouts-liste ul { width: 100%; }
.sk-atouts-liste li + li { margin-top: var(--sk-e-4); }

/* Engagements : grille à filets de l'accueil en 5 colonnes (3 sur tablette ; 1 sur mobile, exception à docs/04 § 1.1
   qui donnerait 2 par ligne : à 360 px, un mot-clé comme « Développement » ne tiendrait pas). Introduction en texte
   courant : 3 tailles dans la section (titre, mot-clé, texte). */
.sk-atouts-grille--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sk-engagements__intro { max-width: var(--sk-mesure); margin-top: var(--sk-e-6); color: var(--sk-gris); }

/* Tableau de libellés / valeurs (informations légales, direction), posé dans une carte : lignes séparées par des
   filets, libellé gris, valeur foncée (comme les listes à filets de la référence). */
.sk-tableau { width: 100%; border-top: 1px solid var(--sk-bordure); }
.sk-tableau__ligne { display: grid; grid-template-columns: minmax(8rem, 35%) 1fr; gap: var(--sk-e-4); padding: var(--sk-e-3) 0; border-bottom: 1px solid var(--sk-bordure); }
.sk-tableau dt { line-height: 1.5; color: var(--sk-gris); }
.sk-tableau dd { line-height: 1.5; color: var(--sk-noir); overflow-wrap: anywhere; }
@media (max-width: 767px) {
	/* Libellé au-dessus de sa valeur, plus près d'elle (4 px) que de la ligne précédente (12 px). */
	.sk-tableau__ligne { grid-template-columns: 1fr; gap: var(--sk-e-1); }
}

@media (max-width: 1024px) {
	/* La colonne de droite des atouts devient trop étroite pour deux colonnes de liste avant l'empilement. */
	.sk-atouts-liste ul { columns: 1; }
	.sk-atouts-grille--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.sk-atouts-grille--5 { grid-template-columns: 1fr; }
	/* Titre au-dessus du texte : plus près de lui (24 px) que du cadre des photos (48 px). */
	.sk-histoire { grid-template-columns: 1fr; gap: var(--sk-e-6); }
}

/* ====== Références ====== */
.sk-references { padding: 0; list-style: none; }
/* 7 références : la dernière ligne garde la largeur d'une colonne (pas de carte étirée sur toute la ligne). */
@media (min-width: 768px) {
	.sk-references { --sk-largeur-ref: calc((100% - 2 * var(--sk-gouttiere)) / 3); }
	.sk-references > .sk-carte-reference { flex: 0 1 var(--sk-largeur-ref); }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.sk-references { --sk-largeur-ref: calc((100% - var(--sk-gouttiere)) / 2); }
}
.sk-carte-reference {
	display: flex;
	align-items: center;
	gap: var(--sk-e-4);
	background: var(--sk-blanc);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon);
}
.sk-carte-reference__initiale {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--sk-creme);
	font-family: var(--sk-police-titres);
	font-size: var(--sk-fs-t6);
	font-weight: 800;
	color: var(--sk-or-fonce);
}
.sk-carte-reference__textes { display: flex; flex-direction: column; gap: var(--sk-e-1); min-width: 0; }
.sk-carte-reference__nom { font-weight: 700; }
.sk-carte-reference__secteur { color: var(--sk-gris); }

/* ====== Contact (référence whelp.co, page « Contact ») ====== */
/* À gauche : coordonnées en lignes à filets (pastille d'icône, libellé gris, coordonnée, flèche), toute la ligne
   cliquable (≥ 80 px) ; 48 px sous le chapo. À droite : la carte de contact de l'accueil (socle.css), pour le devis. */
.sk-coordonnees { margin: var(--sk-e-12) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sk-bordure); }
.sk-coordonnee { position: relative; display: flex; align-items: center; gap: var(--sk-e-4); padding: var(--sk-e-4) 0; border-bottom: 1px solid var(--sk-bordure); }
.sk-coordonnee__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: var(--sk-rayon-s);
	background: var(--sk-fond-creme);
	color: var(--sk-or-fonce);
}
.sk-coordonnee__icone .sk-icone { width: 1.25rem; height: 1.25rem; }
.sk-coordonnee__textes { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sk-e-1); min-width: 0; }
/* Libellé au-dessus du calque cliquable : il reste modifiable en façade avec Pencil. */
.sk-coordonnee__libelle { position: relative; z-index: 1; font-size: var(--sk-fs-petit); line-height: 1.3; color: var(--sk-gris); }
.sk-coordonnee__lien { line-height: 1.5; color: var(--sk-noir); text-decoration: none; overflow-wrap: anywhere; transition: color var(--sk-transition); }
.sk-coordonnee__lien::after { content: ""; position: absolute; inset: 0; } /* toute la ligne est cliquable */
.sk-coordonnee__fleche { color: var(--sk-gris); transition: transform var(--sk-transition), color var(--sk-transition); }
.sk-coordonnee:hover .sk-coordonnee__lien { color: var(--sk-or-texte); }
.sk-coordonnee:hover .sk-coordonnee__fleche { color: var(--sk-or-texte); transform: translateX(var(--sk-e-1)); }
.sk-coordonnee:focus-within { outline: 3px solid var(--sk-or); outline-offset: 2px; border-radius: var(--sk-rayon-s); }
.sk-coordonnee__lien:focus-visible { outline: none; }

/* Carte du devis, resserrée pour tenir dans l'écran (1440 × 900) : padding moyen, titre ↔ texte 16 px, texte ↔
   formulaire 24 px ; bouton WhatsApp à la place du formulaire si Contact Form 7 est inactif. */
.sk-carte-contact.sk-devis { padding: var(--sk-pad-m); }
.sk-devis .sk-carte-contact__titre { margin-bottom: var(--sk-e-4); }
.sk-devis__intro { margin-bottom: var(--sk-e-6); color: var(--sk-gris); }
.sk-devis .sk-carte-contact__bouton { margin-top: 0; }
.sk-devis__mention { margin-top: var(--sk-e-4); font-size: var(--sk-fs-petit); line-height: 1.5; color: var(--sk-gris); }
.sk-devis__mention a { color: var(--sk-or-texte); }

/* ====== Formulaire de devis (Contact Form 7, ADR-0006 ; balisage du script 03-formulaire-devis.php) ====== */
/* Champs en flex + grow (docs/04 § 1) : deux par ligne quand la carte le permet, un seul sinon. Libellé ↔ champ
   8 px, champ ↔ champ 16 px en colonne et 24 px en ligne : le message d'erreur (14 px) loge dans ces 24 px, hors
   du flux, pour que son retrait ne déplace pas le bouton pendant le clic (constaté sur NOURRIR, ADR-0011). */
.sk-formulaire .sk-form { display: flex; flex-wrap: wrap; gap: var(--sk-e-6) var(--sk-e-4); }
.sk-form__champ { flex: 1 1 10rem; min-width: 0; }
.sk-form__champ--large, .sk-form__envoi { flex-basis: 100%; }
.sk-form__champ label { display: block; margin-bottom: var(--sk-e-2); font-size: 0.9375rem; line-height: 1.3; color: var(--sk-anthracite); }
.sk-formulaire .wpcf7-form-control-wrap { display: block; position: relative; }
.sk-formulaire :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	display: block;
	width: 100%;
	min-height: 2.75rem; /* 44 px : cible tactile minimale */
	padding: var(--sk-e-2) var(--sk-e-4);
	border: 1px solid var(--sk-bordure);
	border-radius: var(--sk-rayon-s);
	background: var(--sk-blanc);
	font: inherit;
	line-height: 1.5;
	color: var(--sk-noir);
	transition: border-color var(--sk-transition), box-shadow var(--sk-transition);
}
.sk-formulaire textarea { height: 7rem; min-height: 5.5rem; resize: vertical; }
.sk-formulaire ::placeholder { color: var(--sk-gris); opacity: 0.8; }
.sk-formulaire :is(input, select, textarea):focus-visible { outline: none; border-color: var(--sk-or); box-shadow: 0 0 0 3px rgba(201, 150, 30, 0.25); }
.sk-formulaire [aria-invalid="true"] { border-color: var(--sk-erreur); }
.sk-formulaire .wpcf7-not-valid-tip { position: absolute; top: calc(100% + var(--sk-e-1)); left: 0; right: 0; font-size: var(--sk-fs-petit); line-height: 1.25; color: var(--sk-erreur); }
/* Réponse d'envoi : préfixe « .wpcf7 » pour passer devant la feuille de Contact Form 7. */
.wpcf7 .sk-formulaire .wpcf7-response-output { margin: var(--sk-e-6) 0 0; padding: var(--sk-e-4); border: 1px solid var(--sk-bordure); border-radius: var(--sk-rayon-s); font-size: 0.9375rem; line-height: 1.5; }
.wpcf7 .sk-formulaire.sent .wpcf7-response-output { border-color: var(--sk-whatsapp); background: var(--sk-fond-creme); }
.wpcf7 .sk-formulaire:is(.invalid, .unaccepted, .payment-required, .failed, .spam, .aborted) .wpcf7-response-output { border-color: var(--sk-erreur); }
/* Champ piège : hors de l'écran (pas « display: none », que certains robots repèrent). */
.sk-form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sk-form__envoi { position: relative; }
.sk-form__envoi .sk-bouton { width: 100%; border: 0; }
.sk-formulaire .wpcf7-spinner { position: absolute; top: 50%; right: var(--sk-e-4); margin: 0; transform: translateY(-50%); }

/* ====== Pages de texte (lecture en F) ====== */
/* Intertitres en T7 : 48 px au-dessus, 12 px au-dessous (plus près du texte qu'ils annoncent). */
.sk-texte--page { font-size: var(--sk-fs-grand); }
.sk-texte--page p:has(> strong:only-child) {
	margin-top: var(--sk-e-12);
	font-family: var(--sk-police-titres);
	font-size: var(--sk-fs-t7);
	line-height: 1.3;
}
.sk-texte--page p:has(> strong:only-child) + p { margin-top: var(--sk-e-3); }
.sk-texte--page p:first-child { margin-top: 0; }
.sk-liste-simple { padding-left: var(--sk-e-6); }