/* ==========================================================================
   Soldatos : feuille principale. Tokens issus du canvas design-v3.
   Nomenclature BEM du design system : u- utilitaires, c- composants, p- pages.
   ========================================================================== */

/* ---------- polices auto-hébergées (assets/fonts, sous-ensemble latin) ----------
   11/09/2026 : passage à Satoshi (Indian Type Foundry, Fontshare), demandé par la cliente
   d'après sa référence largo.studio. Une seule famille pour tout le site : la hiérarchie
   passe par la graisse et la taille, plus par l'opposition serif / sans-serif.
   ⚠ Satoshi n'a pas d'italique : partout où le thème utilisait l'italique comme second
   registre, on emploie la graisse 300. Un font-style: italic donnerait un faux penché.
   Les déclarations Instrument Serif et Archivo restent ci-dessous : leurs fichiers ne sont
   téléchargés que si une règle les appelle, et elles permettent de revenir en arrière. */
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/satoshi-300.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/satoshi-400.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/satoshi-500.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/satoshi-700.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/satoshi-900.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-regular.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/archivo-400.woff2') format('woff2'); }  /* police variable : un seul fichier pour les trois graisses */
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/archivo-narrow-400.woff2') format('woff2'); }  /* police variable : un seul fichier pour les trois graisses */

/* ---------- tokens ---------- */
:root {
	/* 05/10/2026 : le beige (oklch(0.96 0.012 70)) devient le gris vert demandé par la cliente,
	   RVB 207 213 209. Le menu reste blanc (--sol-menu). Filets et gris de texte suivent. */
	--sol-fond: #cfd5d1;
	--sol-fond-clair: oklch(0.985 0.003 160);
	--sol-menu: #fff;
	--sol-encre: oklch(0.28 0.008 260);
	--sol-encre-douce: oklch(0.36 0.008 260);
	--sol-gris: oklch(0.44 0.006 260);      /* 0.48 avant le fond gris : 4,4:1, sous le seuil */
	--sol-gris-clair: oklch(0.45 0.006 260);
	--sol-filet: oklch(0.74 0.008 160);     /* 0.86 beige : invisible sur le gris */
	--sol-filet-sombre: oklch(0.42 0.008 260);
	--sol-accent: oklch(0.45 0.09 250);
	--sol-blanc: oklch(0.99 0.005 80);
	--sol-sur-sombre: oklch(0.80 0.008 70);

	/* Les trois rôles pointent sur Satoshi. Les noms restent : ils disent l'usage
	   (titres, texte courant, étiquettes), pas la police. */
	--sol-serif: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* titres, chapôs, citations */
	--sol-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;    /* texte courant */
	--sol-etroit: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;  /* surtitres, étiquettes, boutons */
	--sol-titre-poids: 500;      /* la serif tenait en 400 ; une sans-serif a besoin d'un cran de plus */
	--sol-second-poids: 300;     /* le second registre, à la place de l'italique */

	--sol-rail: 250px;           /* colonne du menu sur écran large (15/09/2026) */
	--sol-conteneur: 1440px;
	--sol-gouttiere: 40px;
	--sol-section: 84px;

	--sol-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--sol-vite: 180ms;
	--sol-moyen: 260ms;
}
@media (max-width: 720px) {
	:root { --sol-gouttiere: 20px; --sol-section: 56px; }
}

/* ---------- Satoshi : graisse des titres et second registre (11/09/2026) ----------
   Un seul endroit pour tout ce qui découle du changement de police. Retirer ce bloc
   et remettre les trois variables suffit à revenir à la serif. */
.c-titre, .c-chapo, .c-hero__h1, .c-hero__proj-titre, .c-carte__titre, .c-contact__titre,
.c-portrait__citation, .c-cabinet__accroche, .c-savoir__accroche, .c-savoir__nom,
.c-dossier__titre, .c-domaines__nom, .c-methode__nom, .c-avis__texte, .c-liste__item a,
.c-hdr__nom, .c-foot__nom, .c-fiche__h1, .c-etudie__grille h3,
.c-prose h2, .c-prose h3, .c-prose--prestation h3, .c-prose--prestation h4,
.c-prose .wp-block-details summary { font-weight: var(--sol-titre-poids); letter-spacing: -0.03em; }
/* Second registre : la graisse fine remplace l'italique de la serif. */
.c-titre em, .c-titre i, .c-titre__it, .c-hero__h1-it, .c-fiche__h1-it, .c-contact__it,
.c-chapo em, .c-chapo i { font-style: var(--sol-second-style); font-weight: var(--sol-second-poids); letter-spacing: -0.025em; }

/* ---------- socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top : l'en-tête est collant (et flottant sur l'accueil). Sans cela, cliquer
   sur une ancre comme « La méthode en cinq phases » amène le titre visé sous l'en-tête. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
	margin: 0;
	background: var(--sol-fond);
	color: var(--sol-encre);
	font-family: var(--sol-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--sol-accent); }
:focus-visible { outline: 2px solid var(--sol-accent); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
button { font: inherit; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- utilitaires ---------- */
.u-container { max-width: var(--sol-conteneur); margin: 0 auto; padding-left: var(--sol-gouttiere); padding-right: var(--sol-gouttiere); }
.u-section { padding-top: var(--sol-section); padding-bottom: var(--sol-section); }
.u-sombre { background: var(--sol-encre); color: oklch(0.94 0.008 70); }
.u-clair { background: var(--sol-fond-clair); }
.u-filet-haut { border-top: 1px solid var(--sol-encre); }
.u-filet-bas { border-bottom: 1px solid var(--sol-encre); }
.u-visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- typographie ---------- */
.c-surtitre { font-family: var(--sol-etroit); font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0 0 26px; padding-bottom: 12px; border-bottom: 1px solid var(--sol-encre); }
/* Titres de page et de fiche. Ils sont longs (« Duplex loft avec terrasses à Aix-en-Provence,
   rénovation complète ») et Satoshi est large : à 5 vw le titre mangeait cinq lignes et
   repoussait le chapô sous la ligne de flottaison. 3,8 vw le ramène à trois lignes. */
.c-titre { font-family: var(--sol-serif); font-size: clamp(34px, 3.8vw, 58px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.c-titre em, .c-titre i { font-style: normal; font-weight: var(--sol-second-poids); letter-spacing: -0.03em; }
.c-chapo { font-family: var(--sol-serif); font-size: clamp(21px, 2vw, 29px); line-height: 1.2; letter-spacing: -0.015em; color: var(--sol-encre-douce); max-width: 21em; margin: 16px 0 0; }
.c-etiquette { font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-accent); }
.c-lien { font-family: var(--sol-etroit); font-size: 15px; letter-spacing: 0; color: var(--sol-accent); }

/* ---------- boutons ---------- */
.c-btn { display: inline-flex; align-items: center; padding: 15px 30px; font-family: var(--sol-etroit); font-size: 15px; letter-spacing: 0; text-decoration: none; border: 1px solid var(--sol-encre); color: var(--sol-encre); background: transparent; cursor: pointer; transition: opacity var(--sol-vite) var(--sol-ease), background-color var(--sol-vite) var(--sol-ease), color var(--sol-vite) var(--sol-ease); }
.c-btn--plein { background: var(--sol-encre); color: var(--sol-blanc); }
@media (hover: hover) and (pointer: fine) {
	.c-btn:hover { color: var(--sol-encre); opacity: 0.82; }
	.c-btn--plein:hover { color: var(--sol-blanc); }
}

/* ---------- lien d'évitement ---------- */
.c-skip { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--sol-encre); color: var(--sol-blanc); padding: 10px 16px; text-decoration: none; }
.c-skip:focus { left: 0; }

/* ---------- en-tête : colonne fixe à gauche (15/09/2026) ----------
   Retours de la cliente d'après largo.studio : rubriques en grand et en minuscules, toujours
   visibles, logo en tête de colonne. Sous 1041 px, la colonne devient une barre « menu » qui
   ouvre un panneau plein écran (voir « Menu mobile » plus bas). Sur écran large, tout le
   contenu est décalé de la largeur de la colonne (--sol-rail). */
.c-hdr__marque { display: block; color: var(--sol-encre); text-decoration: none; }
.c-hdr__marque:hover { color: var(--sol-encre); text-decoration: none; }
.c-hdr__logo { display: block; width: 100%; max-width: 190px; height: auto; }
@media (min-width: 1041px) {
	body { padding-left: var(--sol-rail); }
	.c-hdr { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; width: var(--sol-rail); background: var(--sol-menu); border-right: 1px solid var(--sol-filet); }
	.c-hdr__inner { height: 100%; display: flex; flex-direction: column; padding: 36px 30px 30px; overflow-y: auto; }
	.c-hdr__panneau { order: 1; flex: 1 0 auto; display: flex; flex-direction: column; }
	.c-hdr__marque { order: 0; padding-bottom: 40px; }   /* logo en tête de colonne (demande du 15/09) */
	.c-hdr__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-family: var(--sol-serif); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.03em; text-transform: lowercase; }
	.c-hdr__liste a { display: block; padding: 3px 0; text-decoration: none; color: var(--sol-gris); transition: color var(--sol-vite) var(--sol-ease); }
	.c-hdr__liste a:hover { color: var(--sol-encre); text-decoration: none; }
	.c-hdr__liste .current-menu-item > a { color: var(--sol-encre); font-weight: var(--sol-titre-poids); }
	.c-hdr__pied { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; }
	.c-hdr__cta { justify-content: center; padding: 13px 16px; font-size: 15px; border: 0; }
	.c-hdr__tel { margin: 0; font-family: var(--sol-etroit); font-size: 14px; line-height: 1.5; color: var(--sol-gris); }
	.c-hdr__tel a { text-decoration: none; color: var(--sol-encre); }
}

/* ---------- pied de page ---------- */
.c-foot { background: var(--sol-encre); color: var(--sol-sur-sombre); }
.c-foot__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 44px 40px; padding-top: 64px; padding-bottom: 40px; }
.c-foot__nom { margin: 0 0 6px; font-family: var(--sol-serif); font-size: 26px; line-height: 1.1; color: var(--sol-blanc); }
.c-foot__metier { margin: 0 0 20px; font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: oklch(0.70 0.008 260); }
.c-foot__adresse { font-style: normal; margin: 0 0 20px; font-family: var(--sol-etroit); font-size: 14px; line-height: 1.7; }
.c-foot__adresse a { text-decoration: none; overflow-wrap: anywhere; }
.c-foot__note { margin: 0; font-family: var(--sol-etroit); font-size: 13px; color: oklch(0.72 0.008 260); }
.c-foot__titre { margin: 0 0 14px; font-family: var(--sol-etroit); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--sol-blanc); }
.c-foot__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--sol-etroit); font-size: 14px; }
.c-foot__liste a { text-decoration: none; }
.c-foot__liste a:hover { color: var(--sol-blanc); }
.c-foot__liste--ligne { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.c-foot__barre { border-top: 1px solid var(--sol-filet-sombre); }
.c-foot__barre-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; padding-top: 24px; padding-bottom: 24px; font-family: var(--sol-etroit); font-size: 12.5px; letter-spacing: 0.05em; }
.c-foot__secondaire { display: flex; flex-wrap: wrap; gap: 24px; }
.c-foot__secondaire-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.c-foot__secondaire a { text-decoration: none; }

/* ---------- listes de secours (index.php) ---------- */
.c-liste { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--sol-encre); }
.c-liste__item { padding: 18px 0; border-bottom: 1px solid var(--sol-filet); }
.c-liste__item a { font-family: var(--sol-serif); font-size: 26px; line-height: 1.1; text-decoration: none; }
.c-liste__item p { margin: 6px 0 0; color: var(--sol-encre-douce); }
.pagination, .navigation { margin-top: 32px; font-family: var(--sol-etroit); font-size: 15px; letter-spacing: 0; }
.pagination a, .pagination span { margin-right: 18px; }

/* ---------- variantes partagées ---------- */
.c-surtitre--nu { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.c-surtitre--clair { color: var(--sol-blanc); border: 0; padding: 0; margin: 0 0 24px; }
.c-surtitre--gris { color: var(--sol-gris); }
.c-lien--clair { color: var(--sol-blanc); }
.c-lien--gris { color: var(--sol-gris); }

/* ---------- journal ---------- */
.c-journal { padding-top: 76px; padding-bottom: 84px; }
.c-journal__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--sol-filet); padding-bottom: 12px; margin-bottom: 26px; }
.c-journal__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; }
.c-journal__liste a { text-decoration: none; display: block; }
.c-journal__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 14px; background: oklch(0.88 0.006 160); }
.c-journal__cat { display: block; font-family: var(--sol-etroit); font-size: 13.5px; letter-spacing: 0; color: oklch(0.52 0.006 260); margin-bottom: 7px; }
.c-journal__titre { display: block; font-size: 18px; line-height: 1.35; }


/* ---------- portrait ---------- */
.c-portrait { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.c-portrait__fig { flex: 0 1 360px; min-width: 0; max-width: 360px; margin: 0; }
.c-portrait__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 10%; }
.c-portrait__legende { margin-top: 12px; font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-gris-clair); }
.c-portrait__texte { flex: 2 1 520px; min-width: 0; }
.c-portrait__citation { margin: 0 0 24px; max-width: 22em; font-family: var(--sol-serif); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.16; letter-spacing: -0.015em; }
.c-portrait__citation p { margin: 0; }
.c-portrait__p { max-width: 40em; color: oklch(0.34 0.008 260); }
.c-portrait__pied { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; border-top: 1px solid var(--sol-filet); padding-top: 20px; margin-top: 28px; }
.c-portrait__presse { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--sol-etroit); font-size: 13px; color: oklch(0.46 0.008 260); text-decoration: none; }
.c-portrait__badge { font-size: 13px; letter-spacing: 0; padding: 3px 7px; border: 1px solid var(--sol-filet); }


/* ---------- accessibilité : libellés réservés aux lecteurs d'écran ---------- */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }

/* ---------- avis : pied avec bouton vers la fiche Google ---------- */
.c-avis__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 28px; }
.c-avis__fin .c-avis__pied { margin: 0; flex: 1 1 420px; }
.c-avis__bouton { gap: 12px; }
.c-avis__bouton-etoiles { color: oklch(0.80 0.16 85); letter-spacing: 0.12em; font-size: 13px; }

/* ==========================================================================
   Menu mobile (burger) et passe responsive commune
   ========================================================================== */
.c-hdr__burger { display: none; }
@media (max-width: 1040px) {
	html { scroll-padding-top: 84px; }
	.c-hdr { position: sticky; top: 0; z-index: 30; background: var(--sol-menu); border-bottom: 1px solid var(--sol-filet); }
	.c-hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--sol-gouttiere); }
	.c-hdr__marque, .c-hdr__burger { position: relative; z-index: 2; }
	.c-hdr__logo { width: 150px; }
	.c-hdr__burger { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 0 10px 12px; min-height: 44px; background: transparent; border: 0; cursor: pointer; color: var(--sol-encre); font-family: var(--sol-etroit); font-size: 17px; }
	.c-hdr__burger-trait { position: relative; display: block; width: 26px; height: 1.5px; background: currentColor; transition: background var(--sol-vite) var(--sol-ease); }
	.c-hdr__burger-trait::before, .c-hdr__burger-trait::after { content: ""; position: absolute; left: 0; width: 26px; height: 1.5px; background: currentColor; transition: transform var(--sol-moyen) var(--sol-ease); }
	.c-hdr__burger-trait::before { top: -8px; }
	.c-hdr__burger-trait::after { top: 8px; }
	.is-ouvert .c-hdr__burger-trait { background: transparent; }
	.is-ouvert .c-hdr__burger-trait::before { transform: translateY(8px) rotate(45deg); }
	.is-ouvert .c-hdr__burger-trait::after { transform: translateY(-8px) rotate(-45deg); }
	/* Le panneau couvre tout l'écran ; le logo et la croix restent au-dessus, à leur place. */
	.c-hdr__panneau { display: none; position: fixed; inset: 0; z-index: 1; overflow-y: auto; flex-direction: column; background: var(--sol-menu); padding: 104px var(--sol-gouttiere) 36px; }
	.is-ouvert .c-hdr__panneau { display: flex; animation: deplier 220ms var(--sol-ease) both; }
	.u-menu-ouvert { overflow: hidden; }
	.c-hdr__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-family: var(--sol-serif); font-size: clamp(38px, 10vw, 64px); line-height: 1.06; letter-spacing: -0.035em; text-transform: lowercase; }
	.c-hdr__liste a { display: block; padding: 6px 0; text-decoration: none; color: var(--sol-gris); }
	.c-hdr__liste .current-menu-item > a { color: var(--sol-encre); font-weight: var(--sol-titre-poids); }
	.c-hdr__pied { margin-top: auto; padding-top: 40px; display: grid; gap: 16px; justify-items: start; }
	.c-hdr__cta { padding: 15px 26px; font-size: 16px; border: 0; }
	.c-hdr__tel { margin: 0; font-family: var(--sol-etroit); font-size: 15px; line-height: 1.5; color: var(--sol-gris); }
	.c-hdr__tel a { text-decoration: none; color: var(--sol-encre); }
}
@keyframes deplier { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
	.c-hdr__sous { font-size: 9.5px; }
	.c-titre { font-size: clamp(34px, 10vw, 76px); }
	.c-chapo { font-size: 20px; }
	.c-surtitre { margin-bottom: 20px; }
	.c-btn { padding: 14px 22px; }
	.c-journal__tete { flex-wrap: wrap; gap: 8px 24px; }
	.c-journal { padding-top: var(--sol-section); padding-bottom: var(--sol-section); }
	.c-journal__liste { gap: 28px; }
	.c-portrait { gap: 36px; }
	.c-portrait__fig { flex-basis: 100%; max-width: 100%; }
	.c-portrait__citation { font-size: 28px; }
	.c-foot__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-top: 48px; }
	.c-foot__grille > :first-child { grid-column: 1 / -1; }
	.c-foot__barre-inner { flex-direction: column; gap: 10px; }
	.c-avis__fin { gap: 16px; }
	.c-avis__bouton { width: 100%; justify-content: center; }
}

/* ---------- Satoshi italique (15/09/2026) ----------
   La cliente l'a signalé : Satoshi a bien des italiques (Fontshare), qui n'avaient pas été
   téléchargés le 11/09 (migration/14-satoshi-italique.py). Le second registre des titres
   retrouve l'italique de l'ancien site, en graisse fine. Pour revenir à la graisse fine
   droite, une seule ligne : --sol-second-style: normal. */
@font-face { font-family: 'Satoshi'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/satoshi-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/satoshi-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/satoshi-500-italic.woff2') format('woff2'); }
:root { --sol-second-style: italic; }

/* ---------- titres à trois niveaux (15/09/2026) : voir sol_titre_niveaux() ----------
   « Duplex loft » en très grand, « avec terrasses à Aix-en-Provence, » en dessous, plus petit
   et en italique fin, « rénovation complète » en petit. Interlignage serré, comme demandé. */
.c-t1, .c-t2, .c-t3 { display: block; }
.c-t1 { font-weight: var(--sol-titre-poids); font-size: clamp(44px, 6vw, 104px); line-height: 0.92; letter-spacing: -0.045em; }
.c-t2 { margin-top: 0.12em; font-weight: var(--sol-second-poids); font-style: var(--sol-second-style); font-size: clamp(26px, 2.7vw, 46px); line-height: 1.04; letter-spacing: -0.025em; }
.c-t3 { margin-top: 0.55em; font-weight: 400; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.25; letter-spacing: -0.005em; color: var(--sol-gris); }
.c-fiche__h1--index .c-t1 { font-size: clamp(52px, 7.4vw, 128px); }
@media (max-width: 720px) {
	.c-t1 { font-size: clamp(40px, 12vw, 72px); }
	.c-fiche__h1--index .c-t1 { font-size: clamp(44px, 13vw, 80px); }
	.c-t2 { font-size: clamp(22px, 6.4vw, 34px); }
	.c-t3 { font-size: 17px; }
}

/* ---------- plus de texte souligné (15/09/2026) ----------
   « Pas de textes surlignés, c'est peu lisible. » Aucun lien n'est souligné au repos ; le trait
   ne revient qu'au survol et au clavier, sauf sur les boutons, cartes et rubriques du menu. */
a { text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; }
.c-btn:hover, .c-btn:focus-visible, .c-hdr a:hover, .c-carte a:hover, .c-filtres__f:hover, .c-foot a:hover { text-decoration: none; }

.c-skip { z-index: 40; }

/* ---------- arrivée du menu (15/09/2026) ----------
   À chaque page, sur écran large (15/09 : « sur toutes les pages, un poil plus de temps ») : le filet de la colonne se trace, le logo
   se dévoile, les rubriques montent une à une depuis un masque, puis le bouton apparaît.
   Sur téléphone, la même cascade à chaque ouverture du menu.

   🔴 Garde-fous (incident Solis du 10/09, hero invisible) :
   - animation 100 % CSS : rien n'attend un script pour s'afficher ; l'état final est l'état
     normal, et « both » ne masque les rubriques que pendant leur propre animation ;
   - la classe « sol-intro » est posée par un script inline en tête (sol_intro_menu), avant le
     rendu, à chaque page ; sans JavaScript, pas d'effet du tout ;
   - soldatos.js retire la classe après l'animation : les masques ne rognent plus rien ensuite
     (contour du clavier, jambage du « j ») ;
   - « moins de mouvement » demandé par le système : aucun effet. */
@keyframes sol-monte { from { transform: translateY(108%); } to { transform: none; } }
@keyframes sol-devoile { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sol-trace { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sol-apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 1041px) and (prefers-reduced-motion: no-preference) {
	.sol-intro .c-hdr { border-right-color: transparent; }
	.sol-intro .c-hdr::after { content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; background: var(--sol-filet); transform-origin: top; animation: sol-trace 1600ms cubic-bezier(0.65, 0, 0.35, 1) both; }
	.sol-intro .c-hdr__logo { animation: sol-devoile 1300ms cubic-bezier(0.77, 0, 0.18, 1) 180ms both; }
	.sol-intro .c-hdr__liste li { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
	.sol-intro .c-hdr__liste a { animation: sol-monte 1200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
	.sol-intro .c-hdr__liste li:nth-child(1) a { animation-delay: 500ms; }
	.sol-intro .c-hdr__liste li:nth-child(2) a { animation-delay: 610ms; }
	.sol-intro .c-hdr__liste li:nth-child(3) a { animation-delay: 720ms; }
	.sol-intro .c-hdr__liste li:nth-child(4) a { animation-delay: 830ms; }
	.sol-intro .c-hdr__liste li:nth-child(5) a { animation-delay: 940ms; }
	.sol-intro .c-hdr__liste li:nth-child(n + 6) a { animation-delay: 1050ms; }
	.sol-intro .c-hdr__pied { animation: sol-apparait 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms both; }
}

@media (max-width: 1040px) and (prefers-reduced-motion: no-preference) {
	.is-ouvert .c-hdr__liste li { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
	.is-ouvert .c-hdr__liste a { animation: sol-monte 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
	.is-ouvert .c-hdr__liste li:nth-child(1) a { animation-delay: 60ms; }
	.is-ouvert .c-hdr__liste li:nth-child(2) a { animation-delay: 130ms; }
	.is-ouvert .c-hdr__liste li:nth-child(3) a { animation-delay: 200ms; }
	.is-ouvert .c-hdr__liste li:nth-child(4) a { animation-delay: 270ms; }
	.is-ouvert .c-hdr__liste li:nth-child(5) a { animation-delay: 340ms; }
	.is-ouvert .c-hdr__liste li:nth-child(n + 6) a { animation-delay: 410ms; }
	.is-ouvert .c-hdr__pied { animation: sol-apparait 650ms cubic-bezier(0.22, 1, 0.36, 1) 420ms both; }
}

/* ---------- apparition au défilement, version 2 (15/09/2026) : voir soldatos.js ----------
   « C'est quasi invisible » : mouvements plus amples et plus longs, élément par élément.
   Textes : montée et fondu. Titres de section : montée plus haute. Photos et cartes : rideau
   qui se lève, la photo dézoome à l'intérieur (pas d'opacité, l'image reste nette).
   L'état caché n'existe que si le script l'a posé (data-reveal="0"). */
:root { --sol-r-ease: cubic-bezier(0.16, 1, 0.3, 1); }
/* 30/09/2026 (« ça saccade ») : plus aucun clip-path. Le rideau animait un clip-path sur chaque carte,
   recalculé par le processeur à chaque image, avec un dézoom de 1,22 sur des photos de 1200 px. Le
   rideau est maintenant un panneau couleur du fond qui se replie vers le haut (transform : la carte
   graphique s'en charge seule), le dézoom descend à 1,08. Même effet à l'œil, sans saccade. */
/* Pas de will-change : posé sur tous les éléments en attente, il créait une couche graphique par
   carte dès le chargement (19 grandes photos) et faisait ramer la page. */
.sol-reveal [data-reveal] { transition: opacity 900ms var(--sol-r-ease) var(--sol-d, 0ms), transform 1100ms var(--sol-r-ease) var(--sol-d, 0ms); }
.sol-reveal [data-reveal="0"] { opacity: 0; transform: translateY(48px); }
.sol-reveal [data-reveal="0"][data-reveal-type="titre"] { transform: translateY(72px); }
/* Cartes (index, savoir-faire, voisins, mur de l'accueil) : apparition propre, voir soldatos.js.
   Un seul mouvement court pour la photo et son texte, sans délai en chaîne. */
[data-apparition] { transition: opacity 600ms var(--sol-r-ease), transform 700ms var(--sol-r-ease); }
[data-apparition="0"] { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce), print { [data-apparition="0"] { opacity: 1; transform: none; } }
/* Photos seules (galeries, portrait) : rideau couleur du fond qui se replie, léger dézoom. */
.sol-reveal [data-reveal][data-reveal-type="image"] { opacity: 1; position: relative; overflow: hidden; }
.sol-reveal [data-reveal][data-reveal-type="image"]::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--sol-fond); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1100ms var(--sol-r-ease) var(--sol-d, 0ms); pointer-events: none; }
.sol-reveal [data-reveal="0"][data-reveal-type="image"] { transform: translateY(40px); }
.sol-reveal [data-reveal="0"][data-reveal-type="image"]::before { transform: scaleY(1); }
.sol-reveal [data-reveal][data-reveal-type="image"] img { transition: transform 1100ms var(--sol-r-ease) var(--sol-d, 0ms) !important; }
.sol-reveal [data-reveal="0"][data-reveal-type="image"] img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .sol-reveal [data-reveal="0"], .sol-reveal [data-reveal="0"] img { opacity: 1; transform: none; } .sol-reveal [data-reveal]::before { display: none; } }
@media print { .sol-reveal [data-reveal="0"], .sol-reveal [data-reveal="0"] img { opacity: 1; transform: none; } .sol-reveal [data-reveal]::before { display: none; } }

/* ---------- entrée des titres au chargement (15/09/2026) ----------
   Pages de premier niveau : le fil, le surtitre, puis le H1 niveau par niveau (chaque ligne
   sort d'un masque), puis le chapô et l'introduction. Sur l'accueil, les deux lignes du titre du
   bandeau et ses commandes. Porté par la classe « sol-intro » (script inline de tête, retirée
   par soldatos.js à 4 s), donc 100 % CSS.
   ⚠ Le H1 est souvent le plus grand élément de la page : il n'est jamais mis en opacité nulle,
   seulement masqué par clip-path le temps qu'il monte. */
@keyframes sol-ligne { from { transform: translateY(0.55em); clip-path: inset(100% -0.1em -0.3em -0.1em); } to { transform: none; clip-path: inset(-0.2em -0.1em -0.3em -0.1em); } }
@keyframes sol-fondu-monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sol-zoom { from { transform: scale(1.04); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) .c-fiche__tete { animation: none; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) .c-fil { animation: sol-fondu-monte 900ms var(--sol-r-ease) 150ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) :is(.c-fiche__surtitre, .c-hero__surtitre) { animation: sol-fondu-monte 1000ms var(--sol-r-ease) 300ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) :is(.c-fiche__h1 .c-t1, .c-hero__h1 > span:first-child) { animation: sol-ligne 1300ms var(--sol-r-ease) 450ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) :is(.c-fiche__h1 .c-t2, .c-hero__h1 > span:nth-child(2)) { animation: sol-ligne 1300ms var(--sol-r-ease) 680ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) .c-fiche__h1 .c-t3 { animation: sol-ligne 1300ms var(--sol-r-ease) 900ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) .c-fiche__h1:not(:has(.c-t1)) { animation: sol-ligne 1300ms var(--sol-r-ease) 450ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) :is(.c-chapo, .c-hero__cmd) { animation: sol-fondu-monte 1100ms var(--sol-r-ease) 1100ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) :is(.c-fiche__intro, .c-fiche__note) { animation: sol-fondu-monte 1100ms var(--sol-r-ease) 1250ms both; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) .c-fiche__une { overflow: hidden; }
	.sol-intro :is(.p-accueil, .post-type-archive-realisation, .post-type-archive-savoir-faire, .blog, .p-page--le-cabinet, .p-page--renovation-appartement-a-paris) .c-fiche__une img { animation: sol-zoom 1800ms var(--sol-r-ease) 300ms both; }
}

/* ---------- bandeau de contact, téléphone et tablette (30/09/2026) ----------
   Sur écran large, la colonne de gauche porte déjà le bouton : le bandeau n'existe pas. */
.c-cta-mobile { display: none; }
@media (max-width: 1040px) {
	.c-cta-mobile { position: fixed; left: var(--sol-gouttiere); right: var(--sol-gouttiere); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: stretch; gap: 1px; background: var(--sol-encre); color: var(--sol-blanc); box-shadow: 0 10px 30px oklch(0.2 0.01 260 / 0.28); transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform 360ms var(--sol-ease), opacity 260ms ease; pointer-events: none; }
	.c-cta-mobile[hidden] { display: none; }
	.c-cta-mobile.is-visible { transform: none; opacity: 1; pointer-events: auto; }
	.u-menu-ouvert .c-cta-mobile { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
	.c-cta-mobile a, .c-cta-mobile button { display: flex; align-items: center; justify-content: center; min-height: 48px; color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; }
	.c-cta-mobile__btn { flex: 1 1 auto; padding: 0 16px; font-family: var(--sol-etroit); font-size: 15px; letter-spacing: 0.01em; }
	.c-cta-mobile__tel { flex: 0 0 52px; border-left: 1px solid oklch(1 0 0 / 0.16) !important; }
	.c-cta-mobile__fermer { flex: 0 0 44px; font-size: 22px; line-height: 1; opacity: 0.7; border-left: 1px solid oklch(1 0 0 / 0.16) !important; }
	.c-cta-mobile a:hover, .c-cta-mobile a:focus-visible { color: inherit; text-decoration: none; }
}
@media (max-width: 1040px) and (prefers-reduced-motion: reduce) { .c-cta-mobile { transition: opacity 200ms ease; } }

/* ---------- bandeau cookies (05/10/2026, inc/mesure.php) ----------
   Refuser et Accepter ont le même poids (exigence CNIL). Pendant qu'il est ouvert, le bandeau de
   contact mobile s'efface pour ne pas s'empiler dessus. */
.c-cookies { position: fixed; z-index: 60; right: 24px; bottom: 24px; width: min(420px, calc(100vw - 2 * var(--sol-gouttiere))); padding: 22px 24px; background: var(--sol-encre); color: var(--sol-blanc); box-shadow: 0 12px 36px oklch(0.2 0.01 260 / 0.3); }
.c-cookies[hidden] { display: none; }
.c-cookies__titre { margin: 0 0 6px; font-family: var(--sol-etroit); font-size: 15px; font-weight: 500; }
.c-cookies__texte { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--sol-sur-sombre); }
.c-cookies__texte a { color: var(--sol-blanc); text-decoration: underline; text-underline-offset: 3px; }
.c-cookies__actions { display: flex; gap: 10px; }
.c-cookies__btn { flex: 1 1 0; min-height: 44px; padding: 10px 16px; font: inherit; font-family: var(--sol-etroit); font-size: 15px; color: var(--sol-blanc); background: transparent; border: 1px solid var(--sol-blanc); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .c-cookies__btn:hover { background: var(--sol-blanc); color: var(--sol-encre); } }
.c-cookies__btn:focus-visible { outline: 2px solid var(--sol-blanc); outline-offset: 2px; }
.c-foot__cookies { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.u-bandeau-cookies .c-cta-mobile { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .c-cookies { left: var(--sol-gouttiere); right: var(--sol-gouttiere); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; } }