/* Surcharges CSS sl_mahi (thème enfant de mahi) */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Lexend:wght@300;400;700&display=swap');

/* Couleurs et polices : surcharge des variables CSS définies par mahi
   (themes/mahi/css/style.css:3-18). */
:root {
  --color-primary: #E8A020;        /* accent or / CTA */
  --color-secondary: #E8A020;      /* vert sombre, utilisé en hover/secondaire */
  --color-primary-light: #FCF3E3;  /* fond clair (sections, cartes) */
  --bg-body: #FEFBF6;
  --text-color: #152912;
  --bold-color: #152912;
  --light: #FCF3E3;
  --dark: #152912;                 /* fond sombre / hero / footer */
  --dark-text-color: #FEFBF6;      /* texte sur fond sombre */
  --shadow: 0 0 3px 0 var(--color-secondary);
  --border: #E8A020;
  --border-dark: #152912;
  --font-text: "Lexend", sans-serif;
  --font-heading: "Lexend", sans-serif;
}

/* Lexend en weight 300 par défaut sur le texte courant. */
body {
  font-weight: 300;
}

/* Sticky footer : pousse le footer en bas si le contenu est court.
   Drupal enveloppe la page dans .dialog-off-canvas-main-canvas, donc le flex
   doit être propagé sur body ET sur ce wrapper. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* border-box pour que le padding-top ajouté par la toolbar admin Drupal
     (79px en horizontal-fixed) soit absorbé dans les 100vh. Sans ça, le body
     dépasse le viewport de la hauteur de la toolbar et le footer reste sous
     la fenêtre. */
  box-sizing: border-box;
}

body > .dialog-off-canvas-main-canvas {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

#main-wrapper {
  flex: 1 0 auto;
}

footer.footer {
  flex-shrink: 0;
}

/* Évite que l'icône menu (mobile) colle au titre du site / au bord droit. */
.header-right {
  padding-left: 1rem;
  padding-right: 1rem;
}

.site-slogan {
  line-height: normal;
}

/* Footer : étale les liens du menu sur toute la largeur disponible. */
.footer-region .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  gap: 1rem;
}

.footer-region .menu .menu-item {
  margin: 0;
}

/* Page header : remplace l'illustration de fond livree par mahi
   (mahi/css/style.css:1289). Le chemin est relatif a ce CSS, donc
   ../images/* pointe sur themes/custom/sl_mahi/images/. */
.page-header {
  background-image: url("../images/page-header.svg");
}

/* Footer : centre la ligne de copyright. */
.footer-bottom-last .copyright {
  text-align: center;
  width: 100%;
}

.service {
  text-align: justify;
  flex: 1 1 49%;
}
.service.big {
  flex: 1 1 100%;
}
.service.realisation {
  flex: content;
}
.realisation li {
  padding: 0;
}

.subtitle {
  font-weight: bold;
}

/* Page d'accueil : layout en grille a 2 colonnes / 2 lignes pour que
   .note.service (encart) s'aligne automatiquement avec .general-body
   (le corps de .general, sous son h2), independamment des hauteurs.
   .services etait display:flex chez mahi (style.css:1925), on l'override.
   .general utilise display:contents pour que ses enfants (h2 et
   .general-body) deviennent les items de la grille. */
.services {
  display: grid;
  grid-template-columns: 6fr 4fr;
  column-gap: 1rem;
  row-gap: 1rem;
}
.services .general {
  display: contents;
}
.services .general > h2 {
  grid-column: 1;
  grid-row: 1;
}
/* Toute non-h2 dans .general (typiquement la div .general-body) va sur
   la ligne 2, ce qui l'aligne avec .note.service. Compatible que tu aies
   ajoute la classe .general-body ou non a la div interne. */
.services .general > :not(h2) {
  grid-column: 1;
  grid-row: 2;
}
.services .note.service {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  /* Par defaut un item de grille s'etire sur toute la hauteur de sa cellule
     (align-items: stretch). On limite .note.service a la hauteur de son
     contenu pour qu'il ne descende pas jusqu'au bas de .general. */
  align-self: start;
}

/* Sous 768px : on empile en une seule colonne pour eviter deux colonnes
   illisibles. .general (display:contents) laisse ses enfants s'empiler
   naturellement, .note.service revient apres. */
@media (max-width: 768px) {
  .services {
    grid-template-columns: 1fr;
  }
  .services .general > h2,
  .services .general > :not(h2),
  .services .note.service {
    grid-column: 1;
    grid-row: auto;
  }

  /* Reduit la taille des h2 sur mobile (mahi h2 = 1.8rem a desktop). */
  h2 {
    font-size: 1.4rem;
  }
}

/* Menu Pied de page : ceinture-bretelles si quelqu'un reactive l'affichage
   du titre du bloc (Drupal le rend deja en .visually-hidden par defaut). */
.menu-footer h2 {
  display: none;
}

.footer-container {
  gap: 1rem;
}