/* ==========================================================================
   COMPONENTS – Classes réutilisables (préfixe km-)
   À poser sur les sections / lignes / modules Divi (onglet Avancé → Classe CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sections : fonds pleine largeur de la maquette
   -------------------------------------------------------------------------- */

/* Bande vert forêt (hero, informations clés, temps de trajet) */
.km-section--dark {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.km-section--dark h1,
.km-section--dark h2,
.km-section--dark h4,
.km-section--dark h5,
.km-section--dark h6,
.km-section--dark p,
.km-section--dark a {
  color: var(--color-on-primary);
}

.km-section--dark h3 {
  color: var(--color-secondary);
}

/* Bande crème (formulaire, visite virtuelle) */
.km-section--light {
  background-color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Titres de section
   -------------------------------------------------------------------------- */

/* H1/H2 bicolores : 1re ligne verte, 2e ligne sable.
   Usage : <h2 class="km-section-title">Ligne 1<span>ligne 2</span></h2> */
.km-section-title span {
  display: block;
  color: var(--color-secondary);
}

/* Surtitre sable (style H3 de la maquette) applicable à tout élément */
.km-eyebrow {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--color-secondary);
}

/* Texte en sable (couleur secondaire du projet) — sur un <span> inline ou
   sur un module entier (paragraphes ET titres). !important : bat les couleurs
   de titre / chapeau et des paragraphes Divi. */
.km-sand,
#page-container .km-sand,
#page-container .km-sand p,
#page-container .km-sand span,
#page-container .km-sand h1,
#page-container .km-sand h2,
#page-container .km-sand h3,
#page-container .km-sand h4,
#page-container .km-sand h5,
#page-container .km-sand h6 {
  color: var(--color-secondary) !important;
}

/* Attaque : première phrase mise en avant à l'intérieur d'un paragraphe —
   sable et graissée. À poser sur un <span> ouvrant, le reste du texte suivant
   normalement. 600 est la graisse la plus lourde chargée (cf. functions.php) :
   au-delà, le navigateur simulerait le gras et déformerait la police.
   !important : bat les couleurs de paragraphe injectées par Divi. */
.km-lead-in,
#page-container .km-lead-in {
  color: var(--color-secondary) !important;
  font-weight: var(--weight-semibold);
}

/* Chapeau : Outfit Medium 23/30 — paragraphe d'introduction sous le H1.
   Le sélecteur `p` couvre le contenu des modules Texte Divi (.et_pb_text_inner p).
   (La priorité face à la règle générique des paragraphes Divi est assurée
   dans divi-overrides.css, chargé après.) */
.km-chapeau,
.km-chapeau p {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h3); /* 30/23 ≈ 1.3, même ratio que H3 */
  color: var(--color-primary);
}

/* Sur bande verte (hero), le chapeau passe en blanc */
.km-section--dark .km-chapeau,
.km-section--dark .km-chapeau p {
  color: var(--color-on-primary);
}

/* Retrait droit des blocs mis en avant (chapeau du hero, H1 sur image) :
   le bloc reste calé à gauche, la marge limite sa largeur côté droit.
   Desktop → tablette (moitié) → mobile (annulé), cf. responsive.css. */
.km-indent {
  margin-right: 20%;
}

/* Variante renforcée — H1 du hero : force le retour à la ligne
   comme sur la maquette (« …de Lully, / aux portes de Genève »). */
.km-indent--lg {
  margin-right: 35%;
}

/* H1 du hero : sans marge basse (le 0.5em de base.css fausserait la
   distance de 50px entre le titre et le bas de l'image). Les deux
   sélecteurs couvrent la classe posée sur le module ou sur le h1. */
h1.km-indent--lg,
.km-indent--lg h1 {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Utilitaires d'espacement — à poser sur une SECTION Divi. Le padding indiqué
   REMPLACE le réglage par défaut de Divi (section ~4%, ligne ~2%) : la règle
   annule aussi le padding des lignes internes du même côté pour que la valeur
   soit une distance réelle, pas un cumul.
   `!important` requis : Divi applique le padding de section en style inline.
   -------------------------------------------------------------------------- */
.km-pt-25 {
  padding-top: 25px !important;
}

.km-pt-25 .et_pb_row {
  padding-top: 0;
}

.km-pb-25 {
  padding-bottom: 25px !important;
}

.km-pb-25 .et_pb_row {
  padding-bottom: 0;
}

/* Image réduite à 25% de sa largeur d'affichage, centrée dans sa colonne.
   (width en % du conteneur : les images Divi sont déjà bornées par leur
   colonne via max-width:100%, une réduction "taille native" serait sans effet.) */
.km-img-25 .et_pb_image_wrap {
  display: block;
  width: 100%;
  text-align: center;
}

.km-img-25 img,
img.km-img-25 {
  width: 25%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Image collée au bord droit de sa colonne (pour une colonne de droite,
   ce bord = la marge droite du contenu). Taille d'image inchangée :
   seul l'alignement est forcé, les marges Divi sont neutralisées. */
.km-img-right {
  margin: 0 !important;
}

.km-img-right .et_pb_image_wrap {
  display: block;
  width: 100%;
  text-align: right;
  margin: 0 !important;
}

.km-img-right img,
img.km-img-right {
  display: inline-block;
  margin: 0 !important;
}

/* Image franc-bord à droite : le module déborde de la ligne d'exactement
   la marge extérieure (--margin-outer) et vient toucher le bord de l'écran,
   à toutes les largeurs. À poser sur un module Image d'une colonne de droite. */
.km-img-bleed-right {
  margin: 0 calc(-1 * var(--margin-outer)) 0 0 !important;
}

.km-img-bleed-right .et_pb_image_wrap,
.km-img-bleed-right img {
  display: block;
  width: 100%;
  margin: 0 !important;
}

/* Image franc-bord à gauche : le module déborde de la ligne vers la gauche
   d'exactement la marge extérieure et vient toucher le bord de l'écran.
   À poser sur un module Image d'une colonne de gauche. */
.km-img-bleed-left {
  margin: 0 0 0 calc(-1 * var(--margin-outer)) !important;
}

.km-img-bleed-left .et_pb_image_wrap,
.km-img-bleed-left img {
  display: block;
  width: 100%;
  margin: 0 !important;
}

/* Équilibre la hauteur des images d'une ligne (ex. 2 images côte à côte) :
   même ratio imposé aux images → même hauteur (colonnes de largeur égale),
   recadrage par object-fit. À poser sur la LIGNE. Ratio réglable : --km-ratio. */
.km-img-even .et_pb_image img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--km-ratio, 3 / 2);
  object-fit: cover;
}

/* Bloc de texte contraint à la largeur de la première colonne : le padding
   droit réserve l'espace de la 2e colonne (maquette « Le mot du promoteur /
   de l'architecte », textes sous les images). Pleine largeur en mobile.
   La largeur du padding est réglable via --km-pr (défaut 50%). */
.km-col-width {
  --km-pr: 25%;
  padding-right: var(--km-pr) !important; /* !important : fonctionne aussi sur une colonne (bat le padding Divi) */
}

/* Padding droit léger de 5%, annulé en mobile (cf. responsive.css). */
.km-pr-5 {
  padding-right: 5%;
}

/* Marge haute de 25px (espace AU-DESSUS de l'élément). Fonctionne sur tout
   module, y compris un bouton — contrairement à km-pt-25 qui règle le padding
   interne (écrasé sur les boutons). Le 2e sélecteur bat la marge des boutons. */
.km-mt-25,
body #page-container .et_pb_button.km-mt-25 {
  margin-top: 25px !important;
}

/* Padding bas de 300px sur une SECTION — remplace le padding Divi.
   En mobile, la section reprend le padding normal (cf. responsive.css).
   !important : bat le padding de « hauteur de section » de Divi. */
.km-pb-300 {
  padding-bottom: 200px !important;
}

.km-pb-300 .et_pb_row {
  padding-bottom: 0;
}

/* Effet de chevauchement entre 2 sections (réf. « efficacité mesurable ») :
   - km-pb-400 sur la 1re section (verte) : son fond se prolonge vers le bas.
   - km-overlap-up sur la 2e section (images) : elle remonte d'autant pour
     chevaucher, ses images passant par-dessus le fond de la 1re.
   Le montant est piloté par une seule variable --km-overlap → padding et
   remontée toujours synchronisés. Annulé en mobile. */
:root {
  --km-overlap: 20.8vw; /* ~300px à 1440, fluide avec la largeur d'écran */
}

.km-pb-400 {
  padding-bottom: var(--km-overlap) !important;
}

.km-pb-400 .et_pb_row {
  padding-bottom: 0;
}

.km-overlap-up {
  margin-top: calc(-1 * var(--km-overlap)) !important;
  position: relative;
  z-index: 1;
  background-color: transparent !important; /* laisse voir le fond de la section du dessus */
}

/* Version « vers le haut » : le fond de la section se prolonge VERS LE HAUT
   (padding-top), analogue de km-pb-400. Même montant --km-overlap. */
.km-pt-400 {
  padding-top: var(--km-overlap) !important;
}

.km-pt-400 .et_pb_row {
  padding-top: 0;
}

/* Chevauchement inverse : la section colorée du BAS remonte DERRIÈRE la
   section du dessus (images). Son fond déborde vers le haut ; son contenu
   reste en bas (padding-top compensatoire). z-index bas → passe derrière.
   À poser sur la section verte du bas, avec km-front sur la section images. */
.km-overlap-up-bg {
  --km-overlap-bg: 30vw; /* hauteur de remontée du fond (propre à cette classe) */
  margin-top: calc(-1 * var(--km-overlap-bg)) !important;
  padding-top: var(--km-overlap-bg) !important;
  position: relative;
  z-index: 1;
}

/* Section maintenue au premier plan (au-dessus d'un fond qui remonte) */
.km-front {
  position: relative;
  z-index: 2;
}

/* Crédits / mentions : style du paragraphe (Light) mais en 16px fixe.
   16px = plancher de lisibilité, donc taille fixe plutôt que responsive.
   #page-container : bat la taille des paragraphes Divi (20px). */
#page-container .km-credits,
#page-container .km-credits p {
  font-size: 1rem; /* 16px */
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-base);
}

/* Légende : style du paragraphe (Light, même interligne et interlettrage,
   couleur héritée), à 16px — plancher de lisibilité web demandé, donc taille
   fixe et non fluide : elle ne peut plus ni monter ni descendre.
   #page-container : bat la taille des paragraphes Divi (20px). */
#page-container .km-caption,
#page-container .km-caption p {
  font-size: 1rem; /* 16px */
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-base);
}

/* Centre verticalement les colonnes d'une ligne (image + texte sur la même
   ligne, alignés au milieu). À poser sur la LIGNE Divi. */
.km-valign-center {
  align-items: center !important;
}

/* Logo intégré dans un module Texte : logo à gauche (centré verticalement),
   titre + description à droite. Grid = le texte ne peut pas passer sous le
   logo. À poser sur le module Texte contenant le logo PUIS le texte.
   Taille du logo réglable via --km-logo. */
.km-inline-logo {
  --km-logo: 100px;
}

.km-inline-logo .et_pb_text_inner {
  display: grid;
  grid-template-columns: auto 1fr; /* logo | texte */
  column-gap: 0.75em;
}

/* Le logo (1er élément) : colonne de gauche, sur toute la hauteur, centré.
   `span 99` couvre toutes les rangées de texte (les rangées implicites
   vides restent à hauteur 0) — plus fiable que `1 / -1` qui ne s'étend
   pas aux rangées implicites. */
.km-inline-logo .et_pb_text_inner > *:first-child {
  grid-column: 1;
  grid-row: 1 / span 99;
  align-self: center;
  margin: 0;
}

/* Tout le reste (titre, description) va en colonne 2 et s'empile */
.km-inline-logo .et_pb_text_inner > *:not(:first-child) {
  grid-column: 2;
}

.km-inline-logo .et_pb_text_inner img {
  display: block;
  width: var(--km-logo);
  height: auto;
}

/* Décalage vertical : padding haut de 160px, annulé en mobile pour
   reprendre l'empilement naturel (cf. responsive.css). */
.km-pt-160 {
  padding-top: 160px;
}

/* Padding bas de 100px. */
.km-pb-100 {
  padding-bottom: 100px;
}

/* Padding gauche/droite de 100px, fluide (100px à 1440 → ~20px en mobile). */
.km-px-100 {
  padding-left: clamp(20px, calc(7.5vw - 8px), 100px);
  padding-right: clamp(20px, calc(7.5vw - 8px), 100px);
}

/* Carte Google Maps (iframe) : pleine largeur du module, centrée.
   À poser sur le module Code contenant l'iframe. */
.km-map iframe {
  display: block;
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  border: 0;
}

/* Glisse la section sous le header pour rendre l'arrondi du bandeau visible :
   l'image de fond passe derrière le header blanc et apparaît dans l'encoche
   (comportement maquette). À poser sur la première section de la page. */
.km-under-header {
  margin-top: calc(-1 * var(--header-height));
}

/* --------------------------------------------------------------------------
   Voile dégradé sur l'image du hero (home) : assombrit le bas de l'image
   pour garantir la lisibilité du H1 blanc, comme sur la maquette.
   À poser sur la section Divi qui porte l'image de fond.
   -------------------------------------------------------------------------- */
.km-hero-overlay {
  position: relative;
}

.km-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none; /* le voile ne doit bloquer ni clics ni sélection */
  z-index: 1;
}

/* Le contenu de la section repasse au-dessus du voile */
.km-hero-overlay > * {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Boutons — 4 déclinaisons de la planche design system, toutes en pilule.
   Zone cliquable ≥ 44px de haut (accessibilité).
   -------------------------------------------------------------------------- */
.km-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65em 1.75em;
  border: 1px solid transparent;
  border-radius: var(--border-radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--weight-medium);
  line-height: 1; /* interlignage resserré ; le centrage vertical est assuré par le flex */
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-default),
              border-color var(--transition-default),
              color var(--transition-default);
}

.km-button:hover {
  opacity: 1; /* neutralise le hover générique des liens */
}

.km-button:active {
  transform: translateY(1px);
}

.km-button:disabled,
.km-button[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

/* Bouton 03 – fond vert, texte blanc (Envoyer) */
.km-button--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.km-button--primary:hover {
  background-color: #0F2E1B; /* [hypothèse] vert assombri ~15% */
  color: var(--color-on-primary);
}

/* Bouton 01 – fond sable, texte vert (CTA sur bande verte) */
.km-button--sand {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

.km-button--sand:hover {
  background-color: #B29A78; /* [hypothèse] sable assombri ~10% */
  color: var(--color-primary);
}

/* Bouton 04 – contour vert sur fond clair */
.km-button--outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.km-button--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Bouton 02 – contour sable, texte sable (sur bande verte) */
.km-button--outline-light {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.km-button--outline-light:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}

/* Focus visible adapté aux fonds sombres */
.km-section--dark .km-button:focus-visible {
  outline-color: var(--color-secondary);
}

/* Bouton calé sur le bord droit de sa colonne — dans une colonne pleine
   largeur, ce bord est la marge droite de la page.
   Se pose sur le module Bouton — Divi 5 met alors la classe sur le <a>
   lui-même, d'où le :has() qui remonte à son conteneur — ou sur la Ligne / la
   Colonne qui le contient. Dans tous les cas c'est le conteneur du bouton qui
   est visé, jamais la ligne entière : un text-align posé sur la ligne
   déporterait aussi tous ses autres textes.
   align-self: stretch garantit que ce conteneur occupe toute la largeur de la
   colonne flex de Divi 5 — sans lui il se réduirait au bouton et l'alignement
   n'aurait plus rien à décaler. */
.et_pb_button_module_wrapper:has(> .km-button-right),
.km-button-right .et_pb_button_module_wrapper,
.km-button-right.et_pb_button_module_wrapper {
  text-align: right;        /* conteneur en bloc : le bouton est inline-flex */
  justify-content: flex-end; /* conteneur en flex : text-align n'y ferait rien */
  align-self: stretch;
}

/* Filet de sécurité : si le conteneur est un flex en colonne, ni text-align ni
   justify-content ne déplacent le bouton horizontalement — seule une marge
   automatique le fait. Sans effet dans les autres cas. */
.km-button-right.et_pb_button {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Bouton centré sur la HAUTEUR de sa colonne. Les marges automatiques
   absorbent à parts égales l'espace libre au-dessus et en dessous : c'est le
   mécanisme qui marche sans rien changer au conteneur, la colonne de Divi 5
   étant un flex en colonne. Reste sans effet si la colonne fait exactement la
   hauteur de son contenu — il faut donc qu'elle soit étirée par une colonne
   voisine plus haute. Se combine avec km-button-right pour l'horizontale. */
.et_pb_button_module_wrapper:has(> .km-button-vcenter),
.km-button-vcenter .et_pb_button_module_wrapper,
.km-button-vcenter.et_pb_button_module_wrapper {
  margin-top: auto;
  margin-bottom: auto;
}

/* --------------------------------------------------------------------------
   Cartes (piliers Durabilité, encarts « Un quotidien facilité »)
   Fond crème, titre sable, icône filaire sable, coins droits (maquette).
   -------------------------------------------------------------------------- */
.km-card {
  background-color: var(--color-surface);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  height: 100%;
}

.km-card h4:first-child,
.km-card .km-card__title {
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Chiffres clés (142 appartements, 12 000 m², 2027…)
   Nombre en ExtraLight 54/75, libellé en dessous.
   -------------------------------------------------------------------------- */
.km-stat {
  text-align: center;
}

.km-stat--left {
  text-align: left;
}

.km-stat__number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-xlight);
  line-height: var(--leading-stat);
  letter-spacing: var(--tracking-stat);
}

.km-stat__label {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-base);
}

.km-stat__icon {
  display: block;
  margin: 0 auto var(--space-sm);
  width: 56px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Témoignages / citations (« Le mot du promoteur », « Le mot de l'architecte »)
   -------------------------------------------------------------------------- */
.km-quote__source {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-h3);
  color: var(--color-secondary);
  margin-bottom: 1.25rem;
}

.km-quote__text {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Liste de téléchargements (plans PDF) — icône fichier sable + libellé
   -------------------------------------------------------------------------- */
.km-download-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Interlignage resserré, scopé à ce module uniquement.
   Préfixe #page-container : bat la règle des paragraphes Divi de
   divi-overrides.css (#page-container .et_pb_text p) qui imposerait 1.4. */
#page-container .km-download-list,
#page-container .km-download-list p,
#page-container .km-download-list li,
#page-container .km-download-list a {
  line-height: 0.6;
}

/* Titre « Téléchargements » (h4) : décalé vers le bas, marge basse alignée
   sur celle du h2 (calc(--space-lg / 2) = 25px). Scopé à ce module. */
.km-download-list h4 {
  padding-top: 5%;
  margin-bottom: calc(var(--space-lg) / 2);
}

/* Chaque entrée : picto + libellé sur une ligne, centrés verticalement,
   avec un espace généreux entre eux. Couvre les 3 markups Divi possibles :
   lien (a), élément de liste (li) ou paragraphe (p) avec image inline. */
.km-download-list a,
.km-download-list li,
.km-download-list p {
  display: flex;
  align-items: center;
  gap: 1.5em;            /* espace picto ↔ texte agrandi (0.75 → 1.5em) */
  margin: 0 0 var(--space-sm);
  font-weight: var(--weight-light);
}

/* Libellés en noir : la règle générique `a { color: var(--color-primary) }` de
   base.css les rendrait verts. Scopé à ce module. */
#page-container .km-download-list a {
  color: var(--color-text);
}

/* Aucun padding bas sur les entrées, quel que soit le markup généré par Divi
   (le préfixe #page-container bat sa règle #page-container .et_pb_text p). */
#page-container .km-download-list a,
#page-container .km-download-list li,
#page-container .km-download-list p {
  padding-bottom: 0;
}

.km-download-list img,
.km-download-list svg {
  width: 24px;
  height: auto;
  flex-shrink: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Listes avec intitulé en gras (équipements : « Jardins partagés & potagers — … »)
   -------------------------------------------------------------------------- */
.km-feature-list ul {
  list-style: none;
  padding: 0;
}

.km-feature-list li {
  margin-bottom: var(--space-xs);
}

.km-feature-list strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}