/* ==========================================================================
   Accueil : conversion du gabarit « Accueil v2 » (canvas design-v3).
   ========================================================================== */

/* ---------- hero, carrousel ---------- */
.c-hero-sec { border-bottom: 1px solid var(--sol-encre); }
/* Plein écran : l'en-tête flottant ne prend plus de hauteur. */
.c-hero { position: relative; width: 100%; overflow: hidden; background: var(--sol-encre); height: 100svh; min-height: min(560px, 100svh); max-height: 1000px; }
.c-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: scale(1); transition: opacity 900ms var(--sol-ease), transform 1400ms var(--sol-ease); }
.c-hero__img[data-off="1"] { opacity: 0; transform: scale(1.045); }
/* Le voile porte le titre. Le voile du haut, qui rendait lisible l'en-tête fondu, est parti
   avec lui le 15/09/2026. */
.c-hero__voile { position: absolute; inset: 0; background:
	linear-gradient(to top, oklch(0.18 0.010 260 / 0.80) 0%, oklch(0.18 0.010 260 / 0.52) 34%, oklch(0.18 0.010 260 / 0.10) 68%, transparent 100%); }
.c-hero__contenu { position: absolute; inset: auto 0 0 0; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; justify-content: space-between; }
@keyframes lever { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.c-hero__txt { flex: 1 1 620px; min-width: 0; transition: opacity 240ms var(--sol-ease), transform 240ms var(--sol-ease); }
.c-hero__txt[data-phase="out"] { opacity: 0; transform: translateY(12px); }
.c-hero__surtitre { font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-blanc); margin: 0 0 22px; }
/* Satoshi est plus large que la serif à taille égale : le pas descend de 6.6 à 6.2 vw
   pour que le titre occupe la même place qu'avant (échelle « B » de la preview du 11/09). */
.c-hero__h1 { font-family: var(--sol-serif); font-weight: var(--sol-titre-poids); font-size: clamp(38px, 6.2vw, 94px); line-height: 0.9; letter-spacing: -0.035em; color: var(--sol-blanc); text-wrap: balance; }
.c-hero__h1 span { display: block; }
.c-hero__h1-it { font-style: var(--sol-second-style); font-weight: var(--sol-second-poids); letter-spacing: -0.03em; }
.c-hero__h1[data-off="1"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-hero__proj { display: none; }
.c-hero__proj[data-on="1"] { display: block; }
.c-hero__proj-titre { font-family: var(--sol-serif); font-weight: var(--sol-titre-poids); font-size: clamp(34px, 4.9vw, 76px); line-height: 0.96; letter-spacing: -0.035em; margin: 0 0 16px; color: var(--sol-blanc); max-width: 14em; text-wrap: balance; }
.c-hero__proj-texte { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.45; color: oklch(0.94 0.008 70); }
.c-hero__cmd { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.c-hero__lien { margin: 0; font-family: var(--sol-etroit); font-size: 13px; letter-spacing: 0.04em; color: var(--sol-blanc); }
.c-hero__lien a { text-decoration: none; text-underline-offset: 4px; color: inherit; }
.c-hero__lien a:hover { text-decoration: underline; color: inherit; }
.c-hero__dots { display: flex; gap: 2px; margin: 0 -10px; }
.c-hero__dot { position: relative; cursor: pointer; background: transparent; border: 0; padding: 14px 10px; font-family: var(--sol-etroit); font-size: 12px; letter-spacing: 0.12em; color: oklch(0.99 0.005 80 / 0.55); font-variant-numeric: tabular-nums; transition: color var(--sol-vite) var(--sol-ease); }
@media (hover: hover) and (pointer: fine) { .c-hero__dot:hover { color: oklch(0.99 0.005 80 / 0.85); } }
.c-hero__dot[aria-pressed="true"] { color: var(--sol-blanc); }
.c-hero__dot::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 1px; background: var(--sol-blanc); transform: scaleX(0); transform-origin: left; }
.c-hero__dots[data-auto="1"]:not([data-pause]) .c-hero__dot[aria-pressed="true"]::after { animation: progres var(--sol-hero-duree, 6s) linear forwards; }
@keyframes progres { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
	.c-hero__contenu { animation: none; }
	.c-hero__dot::after { animation: none !important; }
	.c-hero__img { transition: opacity 300ms ease-out; transform: none !important; }
	.c-hero__txt { transition: none; transform: none !important; }
	/* ⚠ Poste de développement : Windows a ses effets d'animation désactivés, donc le navigateur
	   demande « moins de mouvement » et TOUT ce bloc s'applique. Pour juger les animations,
	   réactiver les effets dans Paramètres › Accessibilité › Effets visuels. */
}

/* ---------- intro, garanties ---------- */
.c-intro { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.c-intro__texte { flex: 2 1 520px; min-width: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; margin: 0; color: oklch(0.30 0.008 260); }
.c-intro__note { flex: 1 1 320px; min-width: 0; margin: 0; font-family: var(--sol-etroit); font-size: 14px; color: oklch(0.44 0.008 260); }
.c-garanties { margin-top: 40px; padding-top: 22px; padding-bottom: 18px; display: flex; flex-wrap: wrap; gap: 0 36px; font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-gris); border-top: 1px solid var(--sol-filet); }

/* ---------- dossiers ---------- */
.c-dossiers { padding-top: 76px; padding-bottom: 40px; }
.c-dossiers__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-bottom: 1px solid var(--sol-encre); padding-bottom: 12px; margin-bottom: 44px; }
.c-dossiers__grille { display: grid; gap: 88px; }
.c-dossier--grand { display: flex; flex-wrap: wrap; gap: 44px; }
.c-dossier--grand .c-dossier__lien-img { display: block; flex: 1 1 520px; min-width: 0; }
.c-dossier--grand .c-dossier__corps { flex: 1 1 300px; min-width: 0; }
.c-dossier--inverse .c-dossier__lien-img { order: 2; }
.c-dossier__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: oklch(0.88 0.006 160); transition: opacity 220ms var(--sol-ease); }
@media (hover: hover) and (pointer: fine) { .c-dossier__lien-img:hover .c-dossier__img { opacity: 0.86; } }
.c-dossier__titre { font-family: var(--sol-serif); font-size: 40px; line-height: 1.02; letter-spacing: -0.015em; margin: 10px 0 16px; }
.c-dossier__titre a { text-decoration: none; }
.c-dossier__texte { margin: 0 0 20px; color: var(--sol-encre-douce); }
.c-dossier__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-family: var(--sol-etroit); font-size: 13px; border-top: 1px solid var(--sol-filet); padding-top: 14px; }
.c-dossier__dl dt { color: var(--sol-gris-clair); letter-spacing: 0; font-size: 13px; align-self: center; }
.c-dossier__dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.c-dossiers__grille > .c-dossier--carte:nth-child(3) { grid-column: 1; }
@media (min-width: 720px) {
	.c-dossiers__grille { grid-template-columns: 1fr 1fr; }
	.c-dossier--grand { grid-column: 1 / -1; }
}
.c-dossier--carte .c-dossier__lien-img { display: block; margin-bottom: 20px; }
.c-dossier--carte .c-dossier__titre { font-size: 32px; line-height: 1.05; margin: 8px 0 12px; }
.c-dossier--carte .c-dossier__texte { margin: 0; }

/* ---------- mur des réalisations (30/09/2026, v2) ----------
   Pleine largeur, tailles franchement contrastées (demande du 30/09) : trois bandes sur 12 colonnes,
   une grande et une moyenne (7 + 5), puis trois plus basses de largeurs inégales (3 + 5 + 4), puis
   le miroir de la première (5 + 7). Chaque photo remplit sa case, recadrée au centre. Autonome :
   composants.css n'est pas chargé sur l'accueil. Au-delà de sept projets, les suivants font 4/12. */
.c-mur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
	grid-template-rows: clamp(280px, 30vw, 520px) clamp(200px, 19vw, 330px) clamp(280px, 30vw, 520px); grid-auto-rows: clamp(220px, 22vw, 380px); }
.c-mur__item { grid-column: span 4; margin: 0; overflow: hidden; background: var(--sol-encre); }
.c-mur__item:nth-child(1), .c-mur__item:nth-child(7) { grid-column: span 7; }
.c-mur__item:nth-child(2), .c-mur__item:nth-child(4), .c-mur__item:nth-child(6) { grid-column: span 5; }
.c-mur__item:nth-child(3) { grid-column: span 3; }
.c-mur__item:nth-child(5) { grid-column: span 4; }
.c-mur__lien { position: relative; display: block; height: 100%; color: var(--sol-blanc); text-decoration: none; }
.c-mur__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--sol-ease), opacity 300ms var(--sol-ease); }
/* Titres légers (« trop massifs » en v1) : graisse fine, taille modérée, voile plus discret. */
.c-mur__txt { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 56px 20px 16px; background: linear-gradient(to top, oklch(0.18 0.010 260 / 0.62) 0%, oklch(0.18 0.010 260 / 0.22) 60%, transparent 100%); text-shadow: 0 1px 14px oklch(0.15 0.01 260 / 0.45); }
.c-mur__num, .c-mur__lieu { display: block; font-family: var(--sol-etroit); font-size: 12px; letter-spacing: 0.02em; color: oklch(0.94 0.006 70 / 0.88); }
.c-mur__titre { margin: 4px 0 2px; font-family: var(--sol-serif); font-weight: var(--sol-second-poids); font-size: clamp(18px, 1.45vw, 24px); line-height: 1.15; letter-spacing: -0.01em; color: var(--sol-blanc); }
/* Survol : la photo ne bouge pas, seul le titre se souligne (même règle que l'index, 30/09/2026). */
.c-mur__titre { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .c-mur__lien:hover { color: var(--sol-blanc); } .c-mur__lien:hover .c-mur__titre { text-decoration-color: currentColor; } }
.c-mur__lien:focus-visible .c-mur__titre { text-decoration-color: currentColor; }
.c-mur__lien:focus-visible { outline: 2px solid var(--sol-encre); outline-offset: -4px; }
/* Tablette et téléphone : deux colonnes, une vue sur trois en pleine largeur. */
@media (max-width: 1040px) {
	.c-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: 4px; }
	.c-mur__item, .c-mur__item:nth-child(n) { grid-column: span 1; aspect-ratio: 4 / 5; }
	.c-mur__item:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
}

/* ---------- portrait : vidéo BFMTV au survol ---------- */
.c-portrait__video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
/* Bouton lecture et bandeau toujours visibles sur la photo (30/09/2026) ; le survol les accentue. */
.c-portrait__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: oklch(0.18 0.010 260 / 0.55); transition: background 260ms var(--sol-ease), transform 260ms var(--sol-ease); }
.c-portrait__play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--sol-blanc); }
.c-portrait__play-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; font-family: var(--sol-etroit); font-size: 13px; text-align: left; color: var(--sol-blanc); background: linear-gradient(to top, oklch(0.18 0.010 260 / 0.7), transparent); }
.c-portrait__video:hover .c-portrait__play, .c-portrait__video:focus-visible .c-portrait__play { background: oklch(0.18 0.010 260 / 0.8); transform: scale(1.08); }
button.c-portrait__presse { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
button.c-portrait__presse:hover { color: var(--sol-encre); }

/* ---------- fenêtre vidéo ---------- */
.c-video { width: min(1100px, 92vw); max-width: none; padding: 0; border: 0; background: #000; overflow: visible; }
.c-video::backdrop { background: oklch(0.12 0.010 260 / 0.86); }
.c-video__cadre { aspect-ratio: 16 / 9; }
.c-video__cadre iframe { display: block; width: 100%; height: 100%; border: 0; }
.c-video__fermer { position: absolute; right: 0; top: -48px; width: 44px; height: 44px; border: 0; background: none; color: var(--sol-blanc); font-size: 34px; line-height: 1; cursor: pointer; }

/* ---------- savoir-faire ---------- */
.c-savoir { margin-top: 76px; padding: 76px 0; }
.c-savoir__inner { display: flex; flex-wrap: wrap; gap: 64px; }
.c-savoir__intro { flex: 1 1 320px; min-width: 0; }
.c-savoir__accroche { font-family: var(--sol-serif); font-size: 38px; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 20px; color: var(--sol-blanc); }
.c-savoir__p { margin: 0 0 24px; color: var(--sol-sur-sombre); }
.c-savoir__liste { list-style: none; margin: 0; padding: 0; flex: 2.4 1 460px; min-width: 0; border-top: 1px solid var(--sol-filet-sombre); }
.c-savoir__liste li { border-bottom: 1px solid var(--sol-filet-sombre); }
.c-savoir__liste a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 20px; padding: 17px 0; text-decoration: none; color: inherit; transition: opacity 200ms var(--sol-ease); }
@media (hover: hover) and (pointer: fine) { .c-savoir__liste a:hover { opacity: 0.65; color: inherit; } }
.c-savoir__num { font-family: var(--sol-etroit); font-size: 12px; color: oklch(0.72 0.008 260); font-variant-numeric: tabular-nums; }
.c-savoir__nom { font-family: var(--sol-serif); font-size: 30px; line-height: 1.1; color: var(--sol-blanc); }
.c-savoir__vues { font-family: var(--sol-etroit); font-size: 13px; color: oklch(0.72 0.008 260); font-variant-numeric: tabular-nums; }

/* ---------- cabinet ---------- */
.c-cabinet { display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start; }
.c-cabinet__texte { flex: 1 1 520px; min-width: 0; }
.c-cabinet__accroche { font-family: var(--sol-serif); font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 26px; max-width: 15em; }
.c-cabinet__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; max-width: 44em; }
.c-cabinet__cols p { margin: 0; color: var(--sol-encre-douce); }
.c-cabinet__lien { display: inline-block; margin-top: 30px; }
.c-cabinet__dl { margin: 30px 0 0; border-top: 1px solid var(--sol-encre); }
.c-cabinet__dl > div { display: flex; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--sol-filet); align-items: baseline; flex-wrap: wrap; }
.c-cabinet__dl > div:last-child { border-bottom: 0; }
.c-cabinet__dl dt { font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-gris); flex: 0 0 190px; }
.c-cabinet__dl dd { margin: 0; font-family: var(--sol-etroit); font-size: 17px; font-variant-numeric: tabular-nums; }
.c-cabinet__presta { flex: 1 1 340px; min-width: 0; max-width: 460px; background: var(--sol-fond-clair); border: 1px solid var(--sol-filet); padding: 30px 32px; }
.c-cabinet__presta-titre { font-family: var(--sol-etroit); font-size: 14px; font-weight: 600; letter-spacing: 0; margin: 0 0 20px; color: var(--sol-gris); }
.c-cabinet__presta-liste { list-style: none; margin: 0; padding: 0; }
.c-cabinet__presta-liste li { border-top: 1px solid oklch(0.88 0.006 160); }
.c-cabinet__presta-liste li:last-child { border-bottom: 1px solid oklch(0.88 0.006 160); }
.c-cabinet__presta-liste a { display: block; padding: 13px 0; text-decoration: none; font-size: 17px; }
.c-cabinet__presta-note { margin: 18px 0 0; font-family: var(--sol-etroit); font-size: 13px; color: oklch(0.46 0.008 260); }

/* ---------- avis ---------- */
.c-avis__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; border-bottom: 1px solid var(--sol-encre); padding-bottom: 12px; margin-bottom: 36px; }
.c-avis__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.c-avis__note { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--sol-accent); }
.c-avis__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.c-avis__carte { margin: 0; background: var(--sol-fond); border: 1px solid var(--sol-filet); padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; min-height: 220px; }
.c-avis__etoiles { margin: 0; font-size: 17px; letter-spacing: 0.22em; color: oklch(0.80 0.16 85); }
.c-avis__texte { margin: 0; flex: 1 1 auto; font-family: var(--sol-serif); font-size: 24px; line-height: 1.25; }
.c-avis__auteur { font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-gris-clair); }
.c-avis__pied { margin: 24px 0 0; max-width: 46em; font-family: var(--sol-etroit); font-size: 14px; color: oklch(0.46 0.008 260); }

/* ---------- contact final (partagé) ---------- */
.c-contact__inner { display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start; }
.c-contact__texte { flex: 1 1 480px; min-width: 0; }
.c-contact__titre { font-family: var(--sol-serif); font-weight: var(--sol-titre-poids); font-size: clamp(40px, 4.7vw, 70px); line-height: 0.97; letter-spacing: -0.035em; margin: 0 0 22px; }
.c-contact__it { display: block; font-style: var(--sol-second-style); font-weight: var(--sol-second-poids); }
.c-contact__p { font-size: 19px; max-width: 30em; margin: 0 0 30px; color: oklch(0.34 0.008 260); }
.c-contact__adresse { flex: 1 1 280px; min-width: 0; font-style: normal; font-family: var(--sol-etroit); font-size: 15px; line-height: 1.7; color: oklch(0.34 0.008 260); border-top: 1px solid var(--sol-filet); padding-top: 18px; }
.c-contact__adresse p { margin: 0 0 14px; }
.c-contact__adresse strong { font-family: var(--sol-sans); font-weight: 600; display: block; font-size: 15px; letter-spacing: 0; color: var(--sol-gris-clair); margin-bottom: 4px; }
.c-contact__adresse a { text-decoration: none; }
.c-contact__plan { padding-bottom: 68px; }
.c-contact__plan-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; border-top: 1px solid var(--sol-filet); padding-top: 16px; margin-bottom: 18px; }
.c-contact__plan-titre { margin: 0; font-family: var(--sol-etroit); font-size: 14px; letter-spacing: 0; color: var(--sol-gris-clair); }
.c-contact__iframe { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; border: 1px solid var(--sol-filet); background: oklch(0.93 0.010 70); }

/* ==========================================================================
   Passe mobile
   ========================================================================== */
@media (max-width: 720px) {
	/* Sous la barre « menu », le bandeau prend le reste de la hauteur visible. */
	.c-hero { height: calc(100svh - 75px); min-height: 480px; max-height: none; }
	.c-hero__contenu { padding-bottom: 24px; gap: 14px; }
	.c-hero__surtitre { margin-bottom: 14px; font-size: 11px; }
	.c-hero__h1 { font-size: clamp(36px, 11.5vw, 106px); line-height: 0.92; }
	.c-hero__proj-titre { font-size: clamp(30px, 9vw, 82px); }
	.c-hero__proj-texte { font-size: 16px; }
	.c-hero__cmd { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
	.c-intro { margin-top: 28px; gap: 24px; }
	.c-intro__texte { font-size: 19px; }
	.c-garanties { margin-top: 28px; gap: 6px 24px; }
	.c-dossiers { padding-top: var(--sol-section); padding-bottom: 24px; }
	.c-dossiers__tete { flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
	.c-dossiers__grille { gap: 48px; }
	.c-mur__txt { padding: 40px 12px 10px; }
	.c-mur__titre { font-size: 16px; }
	.c-mur__num, .c-mur__lieu { font-size: 11px; }
	.c-dossier--grand { gap: 20px; }
	.c-dossier__titre { font-size: 32px; }
	.c-dossier--carte .c-dossier__titre { font-size: 28px; }
	.c-dossier--carte .c-dossier__lien-img { margin-bottom: 14px; }
	.c-savoir { margin-top: var(--sol-section); padding: var(--sol-section) 0; }
	.c-savoir__inner { gap: 32px; }
	.c-savoir__accroche { font-size: 30px; }
	.c-savoir__liste a { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; }
	.c-savoir__nom { font-size: 24px; }
	.c-cabinet { gap: 40px; }
	.c-cabinet__accroche { font-size: 30px; }
	.c-cabinet__dl > div { flex-direction: column; gap: 4px; align-items: flex-start; }
	.c-cabinet__dl dt { flex-basis: auto; }
	.c-cabinet__presta { max-width: none; padding: 22px; }
	.c-avis__grille { gap: 16px; }
	.c-avis__carte { min-height: 0; padding: 22px; gap: 14px; }
	.c-avis__texte { font-size: 21px; }
	.c-avis__tete { margin-bottom: 24px; }
	.c-contact__inner { gap: 40px; }
	.c-contact__p { font-size: 17px; }
	.c-contact__plan { padding-bottom: 48px; }
	.c-contact__iframe { aspect-ratio: 4 / 3; }
}

/* 15/09/2026 : lien vers la rénovation par type de bien, sous « Les six domaines ». */
.c-savoir__types { display: block; margin-top: 12px; }